/* ===== Scoped styles (Helvetica + exact sizes) ===== */
.tts-scope{font-family: Helvetica, Arial, sans-serif}
.tts-scope *{box-sizing:border-box}
.tts-band{background:#e9e9e9;}
.tts-container{max-width:1180px; margin:0 auto;}

/* top small title */
.tts-top-title{
  margin:0 0 12px 0;
  font-size:16px; font-weight:600; color:#000; letter-spacing:.01em;
  text-transform:uppercase;
}

/* grid: 65% / 35% */
.tts-grid{display:grid; grid-template-columns:65% 35%; gap:28px; align-items:start}
@media(max-width:1100px){.tts-grid{grid-template-columns:1fr}}

/* left column */
.tts-hero-img{display:block; width:100%; height:auto; border-radius:5px !important;}
.tts-left-group{margin-top:16px}

/* section heads (13px, 600) */
.tts-head{font-size:13px; font-weight:600; color:#222; margin:0 0 10px}

/* halves: L&F + Characteristics (50/50) */
.tts-halves{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:800px){.tts-halves{grid-template-columns:1fr}}

/* chips */
.tts-chips{display:flex; flex-wrap:wrap; gap:1px !important; margin:0}
.tts-chip{
  display:inline-flex; align-items:center; gap:2px !important;
  background:#fff; border:1px solid #e6e6e6; border-radius:3px;
  padding:5px 15px 5px 10px; font-size:11px; font-weight:500; color:#111;
  line-height:1;
}
.tts-chip svg{width:18px; height:18px; display:block}
.tts-chip svg *{stroke:#A8A8A8; fill:none; stroke-width:2}

/* Language Support (single box) */
.tts-langbox{
  background:#fff; border:1px solid #e6e6e6; border-radius:3px;
  padding:6px 15px 6px 10px; color:#111; font-size:11px; font-weight:500;
  margin-top:8px;
}

/* right column */
.tts-desc{margin-bottom: 18px; color:#000000; font-size:13px; font-weight:400; line-height:1.4}
.tts-buttons{display:flex; gap:16px !important; margin-top:115px}
.tts-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:3px !important; border:1px solid #e1e1e1;
  font-size:15px; font-weight:600; text-decoration:none; color:#111;
  line-height:1; text-transform:none;
}
.tts-btn.more{
  background:#003BFF; background:#003BFFF2; border-color:#003BFF; color:#fff;
  padding:10px 24px !important;
}
.tts-btn.pdf{
  background:#fff; border-color:#e1e1e1; color:#111;
  padding:10px 80px !important;
}

/* spacing blocks */
.tts-block{margin-top:18px}

/* Phones ≤600px */
@media (max-width: 600px){
  .tts-top-title{font-size:14px; margin-bottom:10px}
  .tts-grid{gap:20px}
  .tts-left-group{margin-top:12px}

  .tts-head{font-size:12px}
  .tts-chips{gap:6px !important}
  .tts-chip{font-size:10px}
  .tts-chip svg{width:16px; height:16px}
  .tts-langbox{font-size:10px}

  .tts-buttons{flex-direction:column; gap:10px !important; margin-top:16px}
  .tts-btn{width:100%}
  .tts-btn.more{padding:10px 16px !important}
  .tts-btn.pdf{padding:10px 16px !important}
  .tts-hero-img{border-radius:10px}
}

/* Very small phones ≤400px */
@media (max-width: 400px){
  .tts-grid{gap:16px}
  .tts-top-title{font-size:13px}
  .tts-head{margin-bottom:8px}
}

/* =========================
   CORRECT spacing between complete listings (cards)
   ========================= */
/* The grid row itself should not add inter-card spacing */
.tts-scope .tts-container .tts-grid{
  margin-bottom: 0 !important;
}
/* Put the gap after the meta block (end of each card) */
.tts-scope .tts-container .tts-left-group{
  margin-bottom: 36px !important; /* desktop gap */
}
/* No extra gap after the final card */
.tts-scope .tts-container .tts-left-group:last-of-type{
  margin-bottom: 0 !important;
}
/* Mobile gap a bit smaller */
@media (max-width: 600px){
  .tts-scope .tts-container .tts-left-group{
    margin-bottom: 24px !important;
  }
	.tts-desc{
		margin-left:6px;
	}
}

/* === Safe responsive hero ratio (no fixed size) === */
.tts-hero-img{
  width:100% !important;
  height:auto !important;
  border-radius:12px;
  aspect-ratio: 7 / 0;           /* keep visual ratio */
  object-fit: cover;                /* crop to fill; use 'contain' if needed */
  object-position: center;
}

/* Limit left block width on wide screens so grid doesn't stretch too far */
@media (min-width: 1101px){
  .tts-grid > div:first-child{ max-width:700px; }
}

/* =========================
   Align right column with image height
   - paragraph at top
   - buttons stuck to bottom
   ========================= */
@media (min-width: 1101px){
  .tts-grid{ align-items: stretch !important; }                /* equal height columns */
  .tts-grid > div:last-child{ display:flex !important; flex-direction:column !important; }
  .tts-grid > div:last-child .tts-buttons{ margin-top:auto !important; } /* push buttons to bottom */
}

/* =========================
   Keep meta (Licenses/Characteristics/Language) under image only
   ========================= */
@media (min-width: 1101px){
  .tts-left-group{
    width:65%;         /* match left grid column */
    margin-right:auto; /* prevent it from flowing under the right column */
  }
  /* If you prefer to cap by pixel instead, swap the line above with:
     max-width:700px; */
}

/* =========================
   Buttons: 2×2 grid (More|PDF on top, Buy|Preview bottom)
   ========================= */
.tts-grid > div:last-child .tts-buttons{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap:16px !important;
  margin-top:auto !important; /* bottom-align inside right column */
}
.tts-grid > div:last-child .tts-buttons .tts-btn{ width:100%; }

/* Place cells (based on DOM order in PHP) */
.tts-btn.more    { grid-column:1; grid-row:1; } /* top-left */
.tts-btn.pdf     { grid-column:2; grid-row:1; } /* top-right */
.tts-btn.buy     { grid-column:1; grid-row:2; } /* bottom-left (same size as More) */
.tts-btn.preview { grid-column:2; grid-row:2; } /* bottom-right (same size as PDF) */

/* Sizes to match */
.tts-btn.buy     { padding:10px 15px !important; background:#003BFFF2; border-color:#003BFF; color:#fff; }
.tts-btn.preview { padding:10px 80px !important; background:#fff; border-color:#e1e1e1; color:#111; }
.tts-btn.buy:hover{color:#fff;}
.tts-btn.more:hover{color:#fff;}
.tts-btn.preview:hover{color:color:#fff;}

/* Mobile: stack buttons as 1 column */
@media (max-width: 600px){
  .tts-grid > div:last-child .tts-buttons{ grid-template-columns: 1fr; }
}