/* ═══════════════════════════════════════════════════════════════════════
   togo-page-home.css — visual polish for index.html only.
   Scope: body[data-page="home"]
   Layer  : loaded AFTER togo-final-polish.css → wint specificity-tie.
   Goal   : strakke spacing, perfecte uitlijning, gelijke kaart-hoogtes,
            mobile 375 + desktop 1440 + light/dark beide consistent.
   Niet aankomen: globale tokens / hero-grid logica / nav / footer.
   Alle regels zijn additive en page-scoped.
   ═══════════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------------
   H1 · HERO — uitlijning + CTA-pariteit
   ------------------------------------------------------------------------- */

/* H1.1  Hero-grid: tekst-kolom en carousel-kolom op zelfde top-edge laten
         starten ipv vertical-center. Bij lange copy + landscape-carousel
         valt de foto anders 20-40px onder het eyebrow — voelt willekeurig. */
@media (min-width: 641px) {
  body[data-page="home"] .hero--with-carousel .hero__inner {
    align-items: start;
  }
  /* Optisch trekken we de carousel iets omlaag zodat zijn vertical-center
     ongeveer met de H1-baseline samenvalt. Geen layout-shift. */
  body[data-page="home"] .hero__carousel-wrap {
    margin-top: 6px;
  }
}

/* H1.2  Hero-CTA's gelijke breedte op desktop. "Browse the catalog →" en
         "Fat-Loss Stack from €49" hebben verschillende tekstlengte → de
         knoppen worden ongelijk breed. Forceer gelijke min-width + center
         de tekst zodat ze als pair voelen. */
@media (min-width: 641px) {
  body[data-page="home"] .hero--with-carousel .hero__actions .btn--lg {
    min-width: 232px;
    justify-content: center;
    text-align: center;
  }
}

/* H1.3  Hero trust-pills die onder text+carousel staan: lijn ze uit met
         de tekst-kolom links, niet centered (centered op asymmetric grid
         oogt "los"). Final-polish set flex-start al, hier verzekeren we
         dat ze niet horizontaal overshooten op smalle desktops. */
@media (min-width: 641px) {
  body[data-page="home"] .hero--with-carousel .hero__trust {
    align-items: center;
    row-gap: 10px;
  }
}

/* H1.4  Hero op tablet (641-960): grid is nog side-by-side maar de
         carousel-kolom clampt naar minimum (~30vw → 192px) en wordt te
         smal voor een mooie foto. Geef kleine boost. */
@media (min-width: 641px) and (max-width: 960px) {
  body[data-page="home"] .hero--with-carousel .hero__inner {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 32vw, 320px);
    gap: 24px;
  }
}

/* -------------------------------------------------------------------------
   H2 · DAILY-FACT STRIP — ademruimte + alignment met hero
   ------------------------------------------------------------------------- */

/* H2.1  De daily-fact zit nu in .section--compact direct onder de hero
         maar heeft `max-width:720px` + `margin:28px auto 0`. Op desktop
         drijft hij gecentreerd terwijl de hero links-uitgelijnd staat.
         Lijn 'm uit met de container-rand zodat hij visueel onder de
         hero-text-kolom zit, niet zwevend in het midden. */
body[data-page="home"] .section--compact .daily-fact {
  margin-inline: 0;
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

body[data-page="home"] .section--compact .daily-fact__label {
  margin-bottom: 0;
  flex-shrink: 0;
  align-self: center;
}

body[data-page="home"] .section--compact .daily-fact__body {
  flex: 1 1 280px;
  min-width: 0;
}

/* H2.2  Op mobile fallback terug naar gestackt (final-polish doet dit al
         maar via flex-direction:column — bevestig labels-eerst layout). */
@media (max-width: 640px) {
  body[data-page="home"] .section--compact .daily-fact {
    gap: 4px;
  }

  body[data-page="home"] .section--compact .daily-fact__body {
    flex: 0 1 auto;
  }
}

/* H2.3  Spacing tussen hero en daily-fact: hero heeft padding-bottom 64px,
         section--compact pakt --space-7. Op mobile teveel lucht. Krimp
         compact section-padding zodat hij dichter onder de hero ademt
         maar niet kleeft. */
body[data-page="home"] .section--compact {
  padding-top: 24px;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  body[data-page="home"] .section--compact {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* -------------------------------------------------------------------------
   H3 · TRUST-STATS KPI STRIP — uitlijning + cijfer-rhythm
   ------------------------------------------------------------------------- */

/* H3.1  Cijfers in 4 tiles hebben verschillende grootte (49 vs ≥98% vs
         24h vs EU). Tabular-nums is al gezet; zorg dat alle waardes
         dezelfde baseline volgen door min-height op de value-rij. */
body[data-page="home"] .trust-stat {
  align-items: center;
  justify-content: center;
}
body[data-page="home"] .trust-stat__value {
  min-height: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* H3.2  Op desktop wat extra verticale padding zodat de tiles niet plat
         ogen — momenteel slechts --space-4 (16px) en de cijfers zijn 30px. */
@media (min-width: 720px) {
  body[data-page="home"] .trust-stat {
    padding: 22px 16px;
    gap: 6px;
  }
}

/* -------------------------------------------------------------------------
   H4 · CATEGORIES ENTRY-GRID — uniform card-hoogte + media-aspect
   ------------------------------------------------------------------------- */

/* H4.1  Entry-grid is `auto-fit minmax(240px, 1fr)` → op 1440 desktop
         krijg je 4 kolommen → 7 cards = 4+3, de laatste rij hangt links.
         Force max 3 kolommen zodat 7 cards mooi 3+3+1 of 3+3+1 (laatste
         centered) is. We laten de browser kiezen tussen 1/2/3 — nooit 4. */
@media (min-width: 720px) {
  body[data-page="home"] .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* H4.2  De 7e card (Essentials) staat alleen op de derde rij links →
         center 'm zodat de orphan netjes onder de middelste kolom valt. */
@media (min-width: 720px) {
  body[data-page="home"] .entry-grid > .card:nth-child(7):last-child {
    grid-column: 2 / 3;
  }
}

/* H4.3  Cards in entry-grid hebben verschillende body-text-lengtes →
         onderkanten verschuiven. Force flex-column + flex op body. */
body[data-page="home"] .entry-grid > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="home"] .entry-grid > .card .card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* H4.4  Card media-aspect uniform — alle category-bundles zelfde 1:1
         crop. Voorkomt jumpy rij-hoogtes door beeld-aspect-mismatch. */
body[data-page="home"] .entry-grid > .card .card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
body[data-page="home"] .entry-grid > .card .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
   H5 · FEATURED COMPOUNDS RAIL — badge-positie + card pariteit
   ------------------------------------------------------------------------- */

/* H5.1  Bestseller-badges (6x) overlappen soms de productfoto-detail.
         Zet ze consistent links-boven met kleine inset + drop-shadow voor
         leesbaarheid op licht/donker productbeeld. */
body[data-page="home"] main > .section--surface .grid.grid-3 .card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
body[data-page="home"] main > .section--surface .grid.grid-3 .card__media {
  position: relative;
}

/* H5.2  Featured-cards (6) gelijke hoogte zodat de "View the full
         catalog" button onder een rechte onderlijn zit. */
body[data-page="home"] main > .section--surface .grid.grid-3 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="home"] main > .section--surface .grid.grid-3 > .card .card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* H5.3  De "View the full catalog" link onder featured: inline-style
         heeft margin-top var(--space-6). Verzeker dat de knop op mobile
         min 44px hoog is en gecentreerd staat. */
body[data-page="home"] main > .section--surface > .container > p:has(.btn--secondary) {
  margin-top: var(--space-7);
  text-align: center;
}

/* -------------------------------------------------------------------------
   H6 · WHY TOGOPEPTIDE — 4 trust-tiles gelijke hoogte
   ------------------------------------------------------------------------- */

/* H6.1  De 4 trust-tiles staan in .grid-2 (= 2 kolommen op desktop).
         Tekst-lengtes verschillen → kaarten worden ongelijk hoog →
         rij-grid laat de korste card "boven hangen". Force stretch +
         gelijke padding (final-polish doet dit al via nth-of-type maar
         alleen ≥768px en alleen op 1 specifieke section-positie). */
body[data-page="home"] main .section .grid-2 {
  align-items: stretch;
}
body[data-page="home"] main .section .grid-2 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="home"] main .section .grid-2 > .card .trust-tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* H6.2  Trust-tile body-text moet niet uitvloeien tot underlijn van card
         — geef body voldoende lijn-hoogte voor leesbaarheid. */
body[data-page="home"] .trust-tile__body {
  line-height: 1.55;
}

@media (max-width: 640px) {
  body[data-page="home"] .home-trust {
    padding-block: 28px;
  }
  body[data-page="home"] .home-trust .section__head {
    gap: 6px;
    margin-bottom: 24px;
  }
  body[data-page="home"] .home-trust .section__title {
    font-size: 22px;
    line-height: 1.08;
  }
  body[data-page="home"] .home-trust .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }
  body[data-page="home"] main .home-trust.section > .container > .grid.grid-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body[data-page="home"] main .home-trust.section > .container > .grid.grid-2 > .card {
    padding: 13px 14px;
    border-radius: 14px;
  }
  body[data-page="home"] .home-trust .trust-tile {
    gap: 4px;
  }
  body[data-page="home"] .home-trust .trust-tile__title {
    font-size: 14px;
    line-height: 1.22;
  }
  body[data-page="home"] .home-trust .trust-tile__body {
    font-size: 12.5px;
    line-height: 1.38;
  }
}

@media (min-width: 401px) and (max-width: 640px) {
  body[data-page="home"] main .home-trust.section > .container > .grid.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* -------------------------------------------------------------------------
   H7 · PROCESS STEPS — 2x2 mobile, 4-col desktop, gelijke hoogte
   ------------------------------------------------------------------------- */

/* H7.1  Process-steps grid heeft 1-col < 720, 4-col ≥ 720. Final-polish
         injecteert 2x2 op 720-880 wat goed is. Verzeker dat alle steps
         dezelfde hoogte hebben in alle breakpoints. */
body[data-page="home"] .process-steps {
  align-items: stretch;
}
body[data-page="home"] .process-step {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="home"] .process-step__body {
  flex: 1 1 auto;
}

/* H7.2  Mobile: compacte timeline in plaats van vier hoge cards. */
@media (max-width: 640px) {
  body[data-page="home"] .home-process {
    padding-block: 26px;
  }
  body[data-page="home"] .home-process .section__head {
    gap: 6px;
    margin-bottom: 24px;
  }
  body[data-page="home"] .home-process .section__title {
    font-size: 22px;
    line-height: 1.08;
  }
  body[data-page="home"] .home-process .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }
  body[data-page="home"] .process-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  body[data-page="home"] .process-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 3px;
    align-items: start;
    padding: 12px 14px;
    min-height: 0;
    border-radius: 14px;
  }
  body[data-page="home"] .process-step::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface) 91%);
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border) 76%);
    font-size: 11px;
    letter-spacing: 0;
    line-height: 1;
  }
  body[data-page="home"] .process-step__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.22;
  }
  body[data-page="home"] .process-step__body {
    grid-column: 2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.36;
  }
}

/* H7.3  Op 720-880 (tablet) waar steps in 2x2 vallen: align gaps zodat
         de visuele rhytm 1·2 / 3·4 niet onevenredig wijd is. */
@media (min-width: 720px) and (max-width: 880px) {
  body[data-page="home"] .process-steps {
    gap: 14px;
  }
}

/* -------------------------------------------------------------------------
   H8 · STACK-CTA BANNER — button-centrering + verticale balans
   ------------------------------------------------------------------------- */

/* H8.1  Stack-CTA op desktop is 1fr auto grid → de "Open the Stack"
         knop hangt rechts. Op smalle desktop (768-880) wordt de auto-
         kolom te krap waardoor de knop zelf wraps. Force min-width +
         center het hele blok op mobile. */
body[data-page="home"] .stack-cta__action .btn--lg {
  min-width: 200px;
  justify-content: center;
}

@media (max-width: 767px) {
  body[data-page="home"] .stack-cta {
    text-align: center;
  }
  body[data-page="home"] .stack-cta__copy {
    margin-inline: auto;
  }
  body[data-page="home"] .stack-cta__action {
    justify-content: center;
    margin-top: var(--space-4);
  }
  body[data-page="home"] .stack-cta__action .btn--lg {
    width: 100%;
    max-width: 320px;
  }
}

/* H8.2  Stack-CTA radial-gradient (rechts-boven accent-soft) is op
         crémige light-theme nauwelijks zichtbaar — versterk een hint. */
html[data-theme="light"] body[data-page="home"] .stack-cta {
  background:
    radial-gradient(circle at 85% 0%, rgba(224, 27, 27, 0.10), transparent 60%),
    var(--color-surface-raised);
}

/* -------------------------------------------------------------------------
   H9 · RESEARCH LIBRARY RAIL — zelfde rhythm als featured
   ------------------------------------------------------------------------- */

/* H9.1  Library grid (6 articles in grid-3) — gelijke card hoogtes +
         consistent badge-positie net als featured-compounds rail. */
body[data-page="home"] main > .section--surface:nth-of-type(7) .grid.grid-3 > .card,
body[data-page="home"] main > .section.section--surface .grid.grid-3 > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="home"] main > .section--surface .grid.grid-3 > .card .card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* H9.2  Badges in library ("Pillar guide / Deep-dive / Mechanism /
         Methodology"). Consistente positie. */
body[data-page="home"] main > .section--surface .grid.grid-3 .card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* H9.3  Library "Browse the full library →" knop centreren met dezelfde
         margin-top als de featured-button. */
body[data-page="home"] main > .section--surface > .container > p[style*="text-align:center"] {
  margin-top: var(--space-7) !important;
}

/* -------------------------------------------------------------------------
   H10 · TGP-TRUST-PILLS — onderaan, uniform rhythm
   ------------------------------------------------------------------------- */

/* H10.1 Trust-pills strong + label hebben verschillende gewicht/grootte
         → zorg voor consistente vertical alignment tussen icoon en
         tekst-blok. */
body[data-page="home"] .tgp-trust-pills__pill {
  align-items: center;
}
body[data-page="home"] .tgp-trust-pills__label {
  line-height: 1.35;
}

/* H10.2 Op desktop 1440: 6 pills in `auto-fit minmax(220px)` levert
         meestal 4+2 op — laatste rij hangt links. Geef voorkeur aan 3+3
         (mooier symmetrisch) door 3-cols ≥ 980px te forceren. */
@media (min-width: 980px) {
  body[data-page="home"] .tgp-trust-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* H10.3 Op 640-979 (tablet): 2-col is fijner dan auto-fit grillig 1-of-2. */
@media (min-width: 641px) and (max-width: 979px) {
  body[data-page="home"] .tgp-trust-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   H11 · SECTION RHYTHM — uniforme padding tussen alle sections
   ------------------------------------------------------------------------- */

/* H11.1 Sections wisselen tussen `.section` (--space-7 / --space-8) en
         `.section--surface` (zelfde + bg-elevated). De alternatie
         werkt visueel, maar de eerste section ná de hero is
         section--compact (daily-fact) en de stack-CTA section heeft
         minder body — verzeker dat ALLE sections een minimale padding
         houden zodat hun "kop" nooit aan de vorige sectie kleeft. */
@media (min-width: 768px) {
  body[data-page="home"] main > .section:not(.section--compact) {
    padding-block: 64px;
  }
}

/* H11.2 Section-head copy: lead krijgt --text-lg (= ~18px) wat op mobile
         soms te groot is naast de 24-28px title. Krimp lead op mobile. */
@media (max-width: 640px) {
  body[data-page="home"] .section__lead {
    font-size: 15px;
    line-height: 1.55;
  }
  body[data-page="home"] .section__title {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.2;
  }

  body[data-page="home"] main > .section:not(.section--compact) .section__head {
    margin-bottom: 22px;
  }
}

/* H11.3 Section__head heeft `max-width:60ch` wat op 1440 desktop kort is
         (lead-text breekt eerder dan nodig). Tijdens reading-flow oogt
         ok, maar onder een centered grid voelt het tekstblok "links
         hangend". Geen wijziging — alleen voor surface-sections waar
         de cards 3-kolom zijn: laat head ook breed staan zodat het niet
         visueel "links uithangt". */
body[data-page="home"] main > .section--surface .section__head,
body[data-page="home"] main > .section .section__head {
  max-width: 70ch;
}

/* -------------------------------------------------------------------------
   H12 · OVERFLOW HARD-STOP & 1440 MAX-WIDTH SANITY
   ------------------------------------------------------------------------- */

/* H12.1 Container max is 1200 (--container-max). Verzeker dat geen kind
         dit doorbreekt op homepage. */
body[data-page="home"] .container {
  max-width: var(--container-max);
}

/* H12.2 Hero-grid heeft `overflow:hidden` op .hero--with-carousel zodat
         negatieve margin-right van -8px op carousel-wrap niet doorlekt.
         Op 375 mobile geen risico (stack), op desktop OK. Niets nodig
         maar bevestig dat carousel-wrap nooit horizontal-scroll triggert
         op de body. */
@media (max-width: 640px) {
  body[data-page="home"] .hero__carousel-wrap {
    margin-right: 0;
    margin-left: 0;
  }
}

/* -------------------------------------------------------------------------
   H13 · LIGHT THEME — extra polish voor cremige achtergrond
   ------------------------------------------------------------------------- */

/* H13.1 Light theme: trust-pills hebben een subtiele border die op
         crémige achtergrond te zwak is — versterk subtiel. */
html[data-theme="light"] body[data-page="home"] .tgp-trust-pills__pill {
  border-color: rgba(10, 10, 12, 0.12);
  background: #fff;
}
html[data-theme="light"] body[data-page="home"] .tgp-trust-pills__pill:hover {
  border-color: rgba(224, 27, 27, 0.35);
}

/* H13.2 Light theme: process-step bg is dezelfde als section --
         dus de step verdwijnt visueel. Geef de step een witte achtergrond
         + soft border op section--surface achtergrond. */
html[data-theme="light"] body[data-page="home"] .process-step {
  background: #fff;
  border-color: rgba(10, 10, 12, 0.10);
  box-shadow: 0 1px 2px rgba(20, 18, 12, 0.04);
}

/* H13.3 Light theme: trust-tile cards moeten ook duidelijk uitsteken
         tegen de section-bg. */
html[data-theme="light"] body[data-page="home"] main .section .grid-2 > .card {
  background: #fff;
  border-color: rgba(10, 10, 12, 0.10);
}

/* H13.4 Light theme: daily-fact achtergrond op crème is té vlak. */
html[data-theme="light"] body[data-page="home"] .daily-fact {
  background: #fff;
  border-color: rgba(10, 10, 12, 0.10);
}

/* -------------------------------------------------------------------------
   H14 · DARK THEME — depth + contrast voor cards
   ------------------------------------------------------------------------- */

/* H14.1 Dark theme: zorg dat trust-tile / process-step / library cards
         dezelfde subtle elevation hebben (consistentie). */
html:not([data-theme="light"]) body[data-page="home"] .process-step {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* -------------------------------------------------------------------------
   H15 · 375 MOBILE — micro polish
   ------------------------------------------------------------------------- */

/* H15.1 Op 375 hero-actions in column-mode: voeg subtiele scheiding
         tussen primary en secondary CTA's. Final-polish doet column +
         gap:10px maar de secondary kan ondersneeuwen — versterk border. */
@media (max-width: 640px) {
  body[data-page="home"] .hero--with-carousel .hero__actions .btn--secondary {
    border-width: 1.5px;
  }
}

/* H15.2 Op 375 entry-grid (2-col, final-polish): zorg dat card-titles
         niet wrappen naar 3 regels — clamp eyebrow + title. */
@media (max-width: 640px) {
  body[data-page="home"] .entry-grid .card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* H15.3 Op 375 featured-grid (auto-fit 240px = 1 kolom): cards worden
         zeer hoog door 1:1 media-aspect. Force 2-col op 375 zodat het
         featured rail compact blijft net als entry-grid. */
@media (max-width: 640px) {
  body[data-page="home"] main > .section--surface .grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body[data-page="home"] main > .section--surface .grid.grid-3 .card__body {
    padding: 10px 12px 12px;
  }
  body[data-page="home"] main > .section--surface .grid.grid-3 .card__title {
    font-size: 14px;
    line-height: 1.25;
  }
  body[data-page="home"] main > .section--surface .grid.grid-3 .card__eyebrow {
    font-size: 10px;
  }
  body[data-page="home"] main > .section--surface .grid.grid-3 .card__body-text {
    font-size: 11.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* -------------------------------------------------------------------------
   H16 · REDUCED MOTION — respect
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .tgp-trust-pills__pill,
  body[data-page="home"] .tgp-trust-pills__pill:hover {
    transition: none !important;
    transform: none !important;
  }
  body[data-page="home"] .hero__title-em {
    animation: none !important;
    background-position: 0 0 !important;
  }
  body[data-page="home"] .hero__eyebrow-dot {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   H17 · BOTTOM SAFETY — ruimte boven mobile-bottom-nav
   ------------------------------------------------------------------------- */

/* H17.1 Final-polish geeft 16px op laatste section onder 880px. Te krap
         voor de pill-grid die op mobile in 2-col compact valt. Tilt naar
         32px zodat de laatste rij pills niet tegen de bottom-nav kleeft. */
@media (max-width: 880px) {
  body[data-page="home"] main > section:last-of-type {
    padding-bottom: calc(var(--tgp-mn-height, 64px) + 24px);
  }
}

/* -------------------------------------------------------------------------
   H18 · HOMEPAGE STEP 1 — mobile fit, badge safety, CTA consistency
   ------------------------------------------------------------------------- */

body[data-page="home"] .hero--with-carousel .hero__actions {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body[data-page="home"] .hero--with-carousel .hero__title {
  line-height: 1.08 !important;
  padding-bottom: 0.04em;
}

body[data-page="home"] .site-header .btn.btn--sm {
  min-height: 50px !important;
  height: 50px !important;
  block-size: 50px !important;
  padding-block: 0 !important;
  line-height: 1.25;
  overflow: visible;
}

body[data-page="home"] .site-header .btn.btn--sm::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 768px) {
  body[data-page="home"] .nav-shop__trigger {
    padding-inline: 2px;
  }
}

@media (min-width: 768px) and (max-width: 820px) {
  body[data-page="home"] .site-header__inner {
    gap: 10px;
    padding-inline: 20px;
  }

  body[data-page="home"] .site-header__nav {
    gap: 16px;
  }
}

body[data-page="home"] .site-footer,
body[data-page="home"] .site-footer__grid,
body[data-page="home"] .site-footer__group,
body[data-page="home"] .site-footer__brand-col,
body[data-page="home"] .site-footer__newsletter,
body[data-page="home"] .site-footer__bottom,
body[data-page="home"] .site-footer__legal {
  min-width: 0;
  max-width: 100%;
}

body[data-page="home"] .site-footer__social {
  width: 44px;
  height: 44px;
}

body[data-page="home"] .site-footer__links a,
body[data-page="home"] .site-footer__entity a,
body[data-page="home"] .site-footer__pubmed a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 820px) {
  body[data-page="home"] .site-footer__links {
    gap: 2px;
  }

  body[data-page="home"] .site-footer__links a,
  body[data-page="home"] .site-footer__entity a,
  body[data-page="home"] .site-footer__pubmed a {
    width: 100%;
    min-height: 44px;
  }
}

body[data-page="home"] .hero--with-carousel .hero__actions .btn--lg,
body[data-page="home"] .entry-grid .card,
body[data-page="home"] main > .section--surface .grid.grid-3 > .card,
body[data-page="home"] .tgp-trust-pills__pill {
  min-width: 0;
}

body[data-page="home"] .card__title,
body[data-page="home"] .card__body-text,
body[data-page="home"] .section__lead,
body[data-page="home"] .hero__trust li,
body[data-page="home"] .tgp-trust-pills__label {
  overflow-wrap: anywhere;
  hyphens: auto;
}

body[data-page="home"] main > .section--surface .grid.grid-3 .card__badge {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  min-height: 24px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

@media (max-width: 640px) {
  body[data-page="home"] .hero--with-carousel {
    padding-top: 28px;
    padding-bottom: 22px;
  }

  body[data-page="home"] .hero--with-carousel .hero__inner {
    gap: 16px;
  }

  body[data-page="home"] .hero--with-carousel .hero__lead {
    margin-bottom: 16px !important;
  }

  body[data-page="home"] main > .section > .container > .grid.grid-3,
  body[data-page="home"] main > .section--surface > .container > .grid.grid-3,
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 {
    display: grid !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scroll-snap-type: none !important;
  }

  body[data-page="home"] main > .section > .container > .grid.grid-3 > .card,
  body[data-page="home"] main > .section--surface > .container > .grid.grid-3 > .card,
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 > .card {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: unset !important;
  }

  body[data-page="home"] .hero--with-carousel .hero__actions {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    margin-inline: 0;
    box-sizing: border-box;
  }

  body[data-page="home"] .hero--with-carousel .hero__actions .btn--lg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0;
    min-height: 48px;
    padding-inline: 14px;
  }

  body[data-page="home"] .hero--with-carousel .hero__trust {
    display: none !important;
  }

  body[data-page="home"] .entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="home"] .entry-grid > .card .card__body {
    padding: 10px 12px 12px;
    gap: 5px;
  }

  body[data-page="home"] .entry-grid > .card .card__eyebrow {
    font-size: 10px;
    line-height: 1.2;
  }

  body[data-page="home"] .entry-grid > .card .card__body-text {
    font-size: 11.5px;
    line-height: 1.4;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }

  body[data-page="home"] main > .section--surface .grid.grid-3 .card__body-text {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }
}

/* -------------------------------------------------------------------------
   H19 · HERO CAROUSEL — control geometry + image fit
   ------------------------------------------------------------------------- */

body[data-page="home"] .fp-carousel__slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

body[data-page="home"] .fp-carousel--hero {
  --fp-hero-control-rail: 30px;
  padding-bottom: 30px;
  isolation: isolate;
  background:
    linear-gradient(180deg, var(--color-bg-elevated) 0%, color-mix(in srgb, var(--color-bg-elevated) 92%, #000 8%) 100%);
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__viewport {
  border-radius: inherit;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: clip;
}

/* Home cards show real product/category assets. The global card overlay
   contract uses cover for editorial cards, but vials and bundles need to
   be inspectable instead of cropped. Keep the hero carousel cinematic. */
body[data-page="home"] :is(
  .entry-grid,
  main > .section--surface .grid.grid-3
) > a.card.card--media .card__media {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .08), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
}

body[data-page="home"] :is(
  .entry-grid,
  main > .section--surface .grid.grid-3
) > a.card.card--media .card__media img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: clamp(8px, 2.4vw, 18px);
  box-sizing: border-box;
}

html[data-theme="light"] body[data-page="home"] :is(
  .entry-grid,
  main > .section--surface .grid.grid-3
) > a.card.card--media .card__media {
  background:
    radial-gradient(circle at 50% 35%, rgba(184, 37, 47, .07), transparent 48%),
    linear-gradient(180deg, rgba(248, 244, 238, .98), rgba(255, 255, 255, .92));
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dots {
  bottom: 4px;
  min-height: 0;
  height: 28px;
  inline-size: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  gap: 2px;
  box-sizing: border-box;
  background: rgba(8, 8, 10, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dot {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  inline-size: 24px !important;
  block-size: 24px !important;
  min-inline-size: 24px !important;
  min-block-size: 24px !important;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dot[aria-current="true"] {
  box-shadow: none !important;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dot::before {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.42);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  box-shadow: none;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dot[aria-current="true"]::before {
  background: var(--color-accent);
  transform: translate(-50%, -50%) scale(1.16);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 9%, transparent);
}

@media (max-width: 640px) {
  body[data-page="home"] .fp-carousel--hero .fp-carousel__dots {
    display: flex !important;
    bottom: 4px;
    height: 28px;
    inline-size: 110px;
    padding-inline: 4px;
    gap: 2px;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow {
    display: grid !important;
    place-items: center;
    justify-items: center;
    align-items: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    min-inline-size: 40px !important;
    min-block-size: 40px !important;
    padding: 0;
    top: calc((100% - var(--fp-hero-control-rail, 30px)) / 2);
    line-height: 0;
    opacity: .74;
    background:
      radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .18), transparent 42%),
      linear-gradient(180deg, rgba(16, 16, 18, 0.32), rgba(4, 4, 6, 0.50));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .10);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--prev {
    left: 10px;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--next {
    right: 10px;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow svg {
    display: block;
    inline-size: 17px;
    block-size: 17px;
    flex: 0 0 17px;
    margin: 0;
    overflow: visible;
    transform-origin: 50% 50%;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--prev svg {
    transform: none;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--next svg {
    transform: none;
  }
}

@media (min-width: 641px) {
  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    min-inline-size: 40px !important;
    min-block-size: 40px !important;
    position: absolute;
    display: grid;
    place-items: center;
    justify-items: center;
    align-items: center;
    padding: 0;
    top: calc((100% - var(--fp-hero-control-rail, 30px)) / 2);
    line-height: 1;
    border-radius: 999px;
    background:
      radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .18), transparent 42%),
      linear-gradient(180deg, rgba(16, 16, 18, 0.36), rgba(4, 4, 6, 0.56));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow svg {
    display: block;
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 auto;
    margin: 0;
    overflow: visible;
    transform-origin: 50% 50%;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--prev svg {
    transform: none;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--next svg {
    transform: none;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow svg polyline {
    stroke-width: 2.55;
    vector-effect: non-scaling-stroke;
  }

  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow:hover,
  body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow:focus-visible {
    background: rgba(6, 6, 8, 0.78);
    border-color: rgba(255, 255, 255, 0.34);
  }
}

html[data-theme="light"] body[data-page="home"] .fp-carousel--hero .fp-carousel__dots,
html[data-theme="light"] body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.26), rgba(4, 4, 6, 0.42));
  border-color: rgba(255, 255, 255, 0.32);
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__dots {
  line-height: 0;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow {
  overflow: hidden;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow svg,
body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--prev svg,
body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--next svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* -------------------------------------------------------------------------
   H20 · SECTION FLOW — stable homepage rhythm
   ------------------------------------------------------------------------- */

body[data-page="home"] main > .section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

body[data-page="home"] .section__head[data-reveal] {
  transform: none;
}

body[data-page="home"] .section__head[data-reveal].is-visible {
  transform: none;
}

/* H21 · Recently-viewed widget: the global 3-col rule starts at 720px,
   which leaves only ~90px text width on tablet. Keep it readable first. */
body[data-page="home"] .togo-home-recent__grid {
  grid-template-columns: 1fr;
}

body[data-page="home"] .togo-home-recent__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

body[data-page="home"] .togo-home-recent__body {
  min-width: 0;
}

body[data-page="home"] .togo-home-recent__title,
body[data-page="home"] .togo-home-recent__desc {
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-page="home"] .togo-home-recent__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="home"] .togo-home-recent__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 380px) {
  body[data-page="home"] .trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px !important;
    align-items: center;
  }

  body[data-page="home"] .trust-bar__item {
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.1;
    font-size: 10px;
  }
}

@media (min-width: 720px) {
  body[data-page="home"] .togo-home-recent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body[data-page="home"] .togo-home-recent__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body[data-page="home"] main > .section--surface .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
    margin-inline: auto;
  }

  body[data-page="home"] main .section .grid.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 980px;
    margin-inline: auto;
  }
}

@media (max-width: 360px) {
  body[data-page="home"] .entry-grid,
  body[data-page="home"] main > .section--surface .grid.grid-3 {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .entry-grid > .card .card__media,
  body[data-page="home"] main > .section--surface .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 361px) and (max-width: 640px) {
  body[data-page="home"] .home-category-entry {
    padding-block: 28px;
  }

  body[data-page="home"] .home-category-entry .section__head {
    gap: 6px;
    margin-bottom: 24px;
  }

  body[data-page="home"] .home-category-entry .section__title {
    font-size: 22px;
    line-height: 1.08;
  }

  body[data-page="home"] .home-category-entry .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__body {
    min-height: 0;
    padding: 9px 10px 11px;
    justify-content: center;
    gap: 0;
    text-align: center;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__eyebrow,
  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__body-text {
    display: none;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__title {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.18;
  }
}

@media (min-width: 1180px) {
  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1120px;
    margin-inline: auto;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card:nth-child(7):last-child {
    grid-column: auto;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__body {
    padding: 18px 20px 20px;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 641px) and (max-width: 1179px) {
  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > .card .card__body {
    padding: 14px 16px 16px;
    gap: 5px;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__title {
    font-size: 16px;
    line-height: 1.22;
  }

  body[data-page="home"] main .home-category-entry.section > .container > .entry-grid .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.38;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .home-featured {
    padding-block: 28px;
  }

  body[data-page="home"] .home-featured .section__head {
    gap: 6px;
    margin-bottom: 24px;
  }

  body[data-page="home"] .home-featured .section__title {
    font-size: 22px;
    line-height: 1.08;
  }

  body[data-page="home"] .home-featured .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body {
    min-height: 0;
    padding: 9px 10px 11px;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__eyebrow,
  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body-text {
    display: none;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__title {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.18;
  }

  body[data-page="home"] main .home-featured.section > .container > p:has(.btn--secondary) {
    margin-top: 16px;
  }
}

@media (min-width: 641px) and (max-width: 1179px) {
  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body {
    padding: 14px 16px 16px;
    gap: 5px;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__title {
    font-size: 16px;
    line-height: 1.22;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.38;
  }
}

@media (min-width: 1180px) {
  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body {
    padding: 18px 20px 20px;
  }

  body[data-page="home"] main .home-featured.section > .container > .grid.grid-3 .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .home-library {
    padding-block: 28px;
  }

  body[data-page="home"] .home-library .section__head {
    gap: 6px;
    margin-bottom: 14px;
  }

  body[data-page="home"] .home-library .section__title {
    font-size: 22px;
    line-height: 1.08;
  }

  body[data-page="home"] .home-library .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__badge {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    font-size: 9px;
    line-height: 1.1;
    padding: 4px 6px;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body {
    min-height: 0;
    padding: 9px 10px 11px;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__eyebrow,
  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body-text {
    display: none;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__title {
    margin: 0;
    font-size: 13px;
    line-height: 1.16;
  }
}

@media (min-width: 641px) and (max-width: 1179px) {
  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body {
    padding: 14px 16px 16px;
    gap: 5px;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__title {
    font-size: 15.5px;
    line-height: 1.2;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.38;
  }
}

@media (min-width: 1180px) {
  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__media {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body {
    padding: 18px 20px 20px;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="home"] main .home-library.section > .container > .grid.grid-3 .card__body-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

body[data-page="home"] .home-final {
  padding-block: clamp(30px, 5vw, 58px);
}

body[data-page="home"] .home-final__grid {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

body[data-page="home"] .home-final__faq .section__head {
  margin-bottom: 16px;
  text-align: left;
}

body[data-page="home"] .home-final__faq p {
  margin: 0;
}

body[data-page="home"] .home-final__trust {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

body[data-page="home"] .home-final__trust .tgp-trust-pills__pill {
  min-height: 70px;
  padding: 12px 14px;
}

@media (max-width: 760px) {
  body[data-page="home"] .home-final__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="home"] .home-final__faq {
    text-align: center;
  }

  body[data-page="home"] .home-final__faq .section__head {
    gap: 6px;
    margin-bottom: 14px;
    text-align: center;
  }

  body[data-page="home"] .home-final__faq .section__title {
    font-size: 22px;
    line-height: 1.08;
  }

  body[data-page="home"] .home-final__faq .section__lead {
    font-size: 13px;
    line-height: 1.42;
  }

  body[data-page="home"] .home-final__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="home"] .home-final__trust .tgp-trust-pills__pill {
    min-height: 0;
    padding: 9px 10px;
    gap: 8px;
  }

  body[data-page="home"] .home-final__trust .tgp-trust-pills__icon {
    width: 15px;
    height: 15px;
  }

  body[data-page="home"] .home-final__trust .tgp-trust-pills__label {
    font-size: 11px;
    line-height: 1.25;
  }

  body[data-page="home"] .home-final__trust .tgp-trust-pills__label strong {
    font-size: 11px;
    line-height: 1.18;
    margin-bottom: 1px;
  }
}

/* Homepage conversion cards should never sit under decorative toast chrome. */
body[data-page="home"] .whimsy-toast-host {
  display: none !important;
}

/* Mobile/tablet homepage cards run close to the right edge; non-essential
   floaters make the page feel cluttered and cover cards. Keep nav chrome only. */
@media (max-width: 899px) {
  body[data-page="home"] #togo-feedback-fab,
  body[data-page="home"] .tgp-back-to-top {
    display: none !important;
  }
}

html[data-theme="light"] body[data-page="home"] a.card.card--media .card__eyebrow {
  color: #e94b55 !important;
}

/* Carousel chevrons need optical centering, not only geometric centering:
   the open side of a chevron makes the glyph look 1px off inside a circle. */
body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--prev svg {
  transform: translate(calc(-50% - 1px), -50%) !important;
}

body[data-page="home"] .fp-carousel--hero .fp-carousel__arrow--next svg {
  transform: translate(calc(-50% + 1px), -50%) !important;
}

/* Core-category tiles are navigation, not product cards. Keep them quieter
   than the global red product-card treatment so the homepage rhythm stays calm. */
body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media {
  background: color-mix(in srgb, var(--color-bg-elevated) 98%, #fff 2%);
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-accent) 14%);
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media:hover {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border) 58%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .18),
    inset 2px 0 0 color-mix(in srgb, var(--color-accent) 58%, transparent);
}

body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__media {
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-elevated) 96%, #fff 4%), var(--color-bg-elevated));
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
}

body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__media::before {
  content: none !important;
}

body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__media img {
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .20));
}

body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__title {
  color: var(--color-text);
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, #e8ddd0 82%, var(--color-accent) 18%) !important;
  color: #1f1715 !important;
  box-shadow: 0 10px 26px rgba(31, 23, 21, .075) !important;
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media:hover {
  border-color: color-mix(in srgb, var(--color-accent) 36%, #e8ddd0 64%) !important;
  box-shadow:
    0 14px 32px rgba(31, 23, 21, .10),
    inset 2px 0 0 color-mix(in srgb, var(--color-accent) 52%, transparent) !important;
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__media {
  background:
    radial-gradient(circle at 50% 42%, rgba(184, 37, 47, .24), transparent 60%),
    linear-gradient(180deg, #161316 0%, #08080a 100%) !important;
  border-bottom-color: rgba(184, 37, 47, .18) !important;
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__media img {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__title {
  color: #211715 !important;
}