/* ─────────────────────────────────────────────────────────────
   togo-page-stacks.css
   Visual polish voor de 7 stack-pages:
     • stacks.html                  (hub — body[data-page="stacks"])
     • fat-loss-stack.html          (body[data-page$="-stack"])
     • cognitive-stack.html
     • longevity-stack.html
     • performance-stack.html
     • recovery-stack.html
     • glow-stack.html

   Doelen
     1. Hub: 6 cards uitgelijnd in equal-height grid, chips/badges/prices
        consistent over alle cards.
     2. Detail: 3 tier-cards zelfde hoogte, "Most Popular" flag valt nooit
        over de rand, tap-targets ≥44px, price/weight alignment.
     3. Featured-section + FAQ-section + Trust pills sitewide consistent.
     4. Sticky checkout-CTA op mobile zodat de buy-knop nooit uit beeld is.
     5. Light + dark consistent via tokens (geen hard-coded #fff/#000).

   Page-scoped: alles onder body[data-page="stacks"] of body[data-page$="-stack"]
   zodat geen andere pagina collateral damage krijgt.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   SECTIE 1 — STACK HUB (stacks.html)
   ═══════════════════════════════════════════════════════════════ */

/* 1.1  Hub-grid: 6 cards uitgelijnd, equal-height, max 3 kolommen
   ── auto-fit minmax(300,1fr) gaf bij 7 items rare wees-rij. Pin op
       repeat(3,1fr) ≥ 1024px en repeat(2,1fr) ≥ 720px zodat 6 cards
       altijd in 2×3 of 3×2 grid landen, niet 4+3 of 5+2. */
@media (min-width: 720px) {
  body[data-page="stacks"] .stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  body[data-page="stacks"] .stack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1.2  Hub stack-card: zelfde hoogte via display:flex + min-height baseline.
   Lead-paragraph krijgt flex:1 zodat footer altijd onderin uitlijnt,
   ongeacht of chips wrappen of de copy 2 vs 4 regels is. */
body[data-page="stacks"] .stack-card {
  min-height: 320px;
}
body[data-page="stacks"] .stack-card__lead {
  flex: 1 1 auto;
  min-height: 4.4em; /* ~3 regels reserve zodat short-copy cards niet inzakken */
}

/* 1.3  Hub stack-card: chip-rij vaste hoogte zodat footer onder elke card
   op exact dezelfde y-positie zit (kritisch voor visuele uitlijning). */
body[data-page="stacks"] .stack-card__compounds {
  min-height: 56px;
  align-content: flex-start;
}

/* 1.4  Hub price-normalisatie. Fat Loss heeft "From €49 / stack" maar 5
   andere cards alleen "From €49". Maak <small> altijd consistent en
   zorg dat baseline-uitlijning klopt. */
body[data-page="stacks"] .stack-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
body[data-page="stacks"] .stack-card__price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint, #7d7d85);
  letter-spacing: 0.04em;
}

/* 1.5  Hub badge — pin top-right, z-index zodat 'ie nooit onder icon-glow valt.
   Plus voorkomen dat badge tegen icon kruist op smalle viewports. */
body[data-page="stacks"] .stack-card__badge {
  z-index: 2;
}
body[data-page="stacks"] .stack-card__icon {
  margin-right: 80px; /* houd ruimte vrij rechts voor badge */
}
@media (min-width: 480px) {
  body[data-page="stacks"] .stack-card__icon { margin-right: 0; }
}

/* 1.6  Hub stack-card hover — subtiel brand-tinted lift met betere shadow.
   Overschrijft inline-style hover om Royal-Restraint te respecteren. */
body[data-page="stacks"] .stack-card--live:hover {
  border-color: var(--color-border-accent, rgba(224, 27, 27, 0.4));
  box-shadow:
    0 18px 44px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--color-border-accent, rgba(224, 27, 27, 0.2));
}

/* 1.7  Light-mode voor de hub — inline style block in stacks.html mikt op
   dark only. Override met token-based light-theme zodat cream-bg klopt. */
html[data-theme="light"] body[data-page="stacks"] .stack-card {
  background: var(--color-surface, #fff);
  border-color: var(--color-border, rgba(10, 10, 12, 0.08));
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__name {
  color: var(--color-text, #0a0a0c);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__lead {
  color: var(--color-text-muted, #5a5a60);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__chip {
  background: rgba(10, 10, 12, 0.04);
  border-color: rgba(10, 10, 12, 0.08);
  color: var(--color-text-soft, #2a2a30);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__price {
  color: var(--color-text, #0a0a0c);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__price small {
  color: var(--color-text-muted, #5a5a60);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__cta {
  color: var(--color-accent-on-weak, #99161D);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card__footer {
  border-top-color: rgba(10, 10, 12, 0.08);
}
html[data-theme="light"] body[data-page="stacks"] .stack-card--live:hover {
  border-color: var(--color-accent, #B8252F);
  box-shadow:
    0 18px 44px -10px rgba(184, 37, 47, 0.18),
    0 0 0 1px rgba(184, 37, 47, 0.22);
}

/* 1.8  Comparison-table: betere mobile UX. min-width 680px maakte scroll
   nodig op ~720-820px viewports zonder visuele hint. Toon nu scroll-shadow
   alleen wanneer écht overflow is. */
body[data-page="stacks"] .stack-compare {
  position: relative;
  background-image:
    linear-gradient(to right, var(--color-surface, #0d0d10), var(--color-surface, #0d0d10)),
    linear-gradient(to right, var(--color-surface, #0d0d10), var(--color-surface, #0d0d10)),
    linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
html[data-theme="light"] body[data-page="stacks"] .stack-compare {
  background: var(--color-surface, #fff);
  border-color: var(--color-border, rgba(10, 10, 12, 0.08));
}
html[data-theme="light"] body[data-page="stacks"] .stack-compare th,
html[data-theme="light"] body[data-page="stacks"] .stack-compare td {
  border-bottom-color: rgba(10, 10, 12, 0.06);
  color: var(--color-text-soft, #2a2a30);
}
html[data-theme="light"] body[data-page="stacks"] .stack-compare th {
  color: var(--color-text-muted, #5a5a60);
}


/* ═══════════════════════════════════════════════════════════════
   SECTIE 2 — STACK DETAIL PAGES (body[data-page$="-stack"])
   Tier-cards (Starter / Advanced / Ultimate), checkout, trust, FAQ
   ═══════════════════════════════════════════════════════════════ */

/* 2.1  Tier-grid: alle 3 tier-cards exact zelfde hoogte via align-items:stretch
   + min-height baseline. De featured-card kreeg +6px padding-top in
   togo-fix-home.css; comp dit door alle cards baseline-padding-top te geven. */
body[data-page$="-stack"] .tier-grid {
  align-items: stretch;
}
body[data-page$="-stack"] .tier-card {
  /* match featured padding-top zodat alle 3 cards even hoog beginnen */
  padding-top: calc(var(--space-5, 24px) + 6px);
  min-height: 540px;
}
body[data-page$="-stack"] .tier-card__body {
  flex: 1 1 auto; /* body groeit zodat price-block onderin uitlijnt */
}

/* 2.2  "Most Popular" flag — bestaande fix in togo-fix-home zet hem centered
   met box-shadow. Extra: zorg dat flag nooit over kaart-rand valt op
   viewports tussen 880-1100px wanneer card-breedte ~280-320px is.
   max-width van flag = card-breedte minus padding. */
body[data-page$="-stack"] .tier-card__flag {
  max-width: calc(100% - 32px);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 2.3  Tap-targets ≥ 44×44 op alle tier-card controls. De featured fix
   gaf check een ::after pseudo-element van 44px. Zorg ook dat de hele
   tier-card als label klikbaar is met ≥ 44px hit-target en focus-ring. */
body[data-page$="-stack"] .tier-card {
  min-height: 540px;
}
body[data-page$="-stack"] .tier-card:focus-within {
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 2px;
}

/* 2.4  Price + price-strike alignment.
   `.tier-card__price` is 28px/700, strike 15px/400. Bij gap:10px en
   baseline kan de strike op verschillende y-positie landen door
   sub/super-baseline van het € teken. Forceer numerieke font-variant
   en tabular-nums zodat €49 / €69 / €89 onder elkaar exact uitlijnen
   over de 3 tiers. */
body[data-page$="-stack"] .tier-card__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
}
body[data-page$="-stack"] .tier-card__price-strike {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
  position: relative;
  top: -2px; /* compenseer voor visuele baseline-drift t.o.v. 28px price */
}

/* 2.5  Tier-card "Save €9" pill — leesbaar in beide themes.
   In dark heeft ie rgba(34,197,94,.12) bg, in light theme override
   met deeper green-on-cream zodat 4.5:1 contrast haalt. */
html[data-theme="light"] body[data-page$="-stack"] .tier-card__save {
  color: #15803d;
  background: rgba(34, 197, 94, 0.14);
}

/* 2.6  Tier-card light theme — inline <style> block in elke stack-page
   targeted alleen dark (#0f0f0f bg, #fff text). Override zodat
   tier-cards in light-mode op cream-canvas correct renderen. */
html[data-theme="light"] body[data-page$="-stack"] .tier-card {
  background: var(--color-surface, #fff);
  border-color: var(--color-border, rgba(10, 10, 12, 0.10));
  color: var(--color-text, #0a0a0c);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card:hover {
  border-color: var(--color-accent, #B8252F);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card.is-selected {
  border-color: var(--color-accent, #B8252F);
  box-shadow:
    0 0 0 1px var(--color-accent, #B8252F),
    0 12px 36px rgba(184, 37, 47, 0.16);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card__title,
html[data-theme="light"] body[data-page$="-stack"] .tier-card__price {
  color: var(--color-text, #0a0a0c);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card__body,
html[data-theme="light"] body[data-page$="-stack"] .tier-card__items li {
  color: var(--color-text-soft, #2a2a30);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card__items {
  border-top-color: rgba(10, 10, 12, 0.08);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card__eyebrow,
html[data-theme="light"] body[data-page$="-stack"] .tier-card__price-note {
  color: var(--color-text-muted, #5a5a60);
}
html[data-theme="light"] body[data-page$="-stack"] .tier-card__media {
  background: linear-gradient(180deg, #f5f1ea 0%, #ece5d8 100%);
  border-color: rgba(10, 10, 12, 0.06);
}

/* 2.7  Featured trust-section — `.grid grid-2` met 4× .card.trust-tile
   is op desktop een 2×2 grid, maar trust-tile heeft geen padding/spacing
   wanneer 'ie binnen .card zit (dubbele wrapper). Normaliseer zodat alle
   4 tiles dezelfde inner-height + body-line-height hebben. */
body[data-page$="-stack"] .trust-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
body[data-page$="-stack"] .trust-tile__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
body[data-page$="-stack"] .trust-tile__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
body[data-page$="-stack"] .grid.grid-2 > .card:has(.trust-tile) {
  display: flex;
  flex-direction: column;
}

/* 2.8  FAQ-section op detail-pages — `.card` met `<h3>` + body geeft geen
   visual hint dat 'ie expandable is. Op de hub gebruik je <details>/<summary>
   met card__title — voeg chevron toe via ::after zodat het affordance is. */
body[data-page="stacks"] details.card > summary.card__title {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
body[data-page="stacks"] details.card > summary.card__title::-webkit-details-marker {
  display: none;
}
body[data-page="stacks"] details.card > summary.card__title::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-55%) rotate(45deg);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  opacity: 0.55;
}
body[data-page="stacks"] details.card[open] > summary.card__title::after {
  transform: translateY(-35%) rotate(-135deg);
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="stacks"] details.card > summary.card__title::after {
    transition: none;
  }
}

/* 2.9  FAQ-section on detail-pages — de 3 cards in grid-3 hebben h3+p
   zonder details/summary. Geef equal-height + line-height parity. */
body[data-page$="-stack"] section#faq .grid.grid-3 > .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
body[data-page$="-stack"] section#faq .card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}
body[data-page$="-stack"] section#faq .card__body-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* 2.10  Stack pages have tall editorial/product sections. The global
   600px content-visibility placeholder creates visible scroll/spacing
   jumps on these pages, so keep the stack surface fully measured. */
body[data-page="stacks"] .section,
body[data-page$="-stack"] .section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* 2.11  Stack-detail hero flow: glowup.css pulls generic mobile hero CTAs
   upward with translateY(-40px). On stack pages the lead copy is taller, so
   that transform overlaps the lead. Keep the stack hero in normal document
   flow and let spacing come from margins/gap instead of visual translation. */
@media (max-width: 640px) {
  body[data-page$="-stack"] main > .hero:not(.hero--with-carousel) .hero__actions {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTIE 3 — TRUST PILLS (sitewide gebruik op stack-pages)
   ═══════════════════════════════════════════════════════════════ */

/* 3.1  Trust pills op stack-pages: zorg dat 6 pills netjes 3×2 vormen
   op tablet/desktop ipv ongelijke wees-rijen. Auto-fit met
   minmax(220px,1fr) kan op 720-980px viewport 5+1 layout geven. */
@media (min-width: 720px) {
  body[data-page$="-stack"] .tgp-trust-pills,
  body[data-page="stacks"] .tgp-trust-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  body[data-page$="-stack"] .tgp-trust-pills,
  body[data-page="stacks"] .tgp-trust-pills {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* 3.2  Trust pill light-theme — `.tgp-trust-pills__pill` heeft
   `background: var(--color-bg-elevated, #0e0e11)` fallback wat in light
   theme via tokens correct flipt, maar de hover-state heeft hard-coded
   rgba(216,35,47,.4) zonder cream-fit. Iets zachter in light. */
html[data-theme="light"] body[data-page$="-stack"] .tgp-trust-pills__pill:hover,
html[data-theme="light"] body[data-page="stacks"] .tgp-trust-pills__pill:hover {
  border-color: rgba(184, 37, 47, 0.32);
  background: rgba(184, 37, 47, 0.04);
}


/* ═══════════════════════════════════════════════════════════════
   SECTIE 4 — STICKY CHECKOUT CTA (mobile)
   Op detail-pages mag de buy-knop nooit uit beeld zijn. Sticky-bottom
   bar verschijnt onder de tier-grid op viewports <880px.
   ═══════════════════════════════════════════════════════════════ */

/* 4.1  Sticky button — alleen op detail-pages, alleen op mobile.
   Z-index onder mobile-nav (var(--tgp-mn-height) is 64px daar),
   safe-area-inset voor iOS notch. */
body[data-page$="-stack"] .stack-cta {
  position: relative;
}

@media (max-width: 880px) {
  /* maak hele stack-cta sectie op mobile een hoge-CTR sticky-ready strip */
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) {
    position: static;
    z-index: auto;
    margin-top: var(--space-6, 32px);
    background: var(--color-bg, #050505);
    border-top: 1px solid var(--color-border-accent, rgba(224, 27, 27, 0.28));
    box-shadow: 0 14px 32px -22px rgba(224, 27, 27, 0.45);
    padding-block: 14px;
    margin-bottom: 0;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta {
    padding: 14px 16px;
    border-radius: var(--radius-md, 10px);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__copy {
    min-width: 0;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__title {
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__eyebrow,
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__lead {
    display: none;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__action .btn {
    padding: 12px 18px;
    font-size: 14px;
    min-height: 44px;
  }

  /* light theme sticky-bar krijgt cream-bg + brand-tint shadow */
  html[data-theme="light"] body[data-page$="-stack"]
    section.section:has(> .container > .stack-cta) {
    background: var(--color-bg, #FCFAF6);
    box-shadow: 0 -10px 24px -6px rgba(10, 10, 12, 0.12);
  }
}

@media (max-width: 640px) {
  body[data-page="stacks"] .stack-grid {
    gap: 14px;
  }
  body[data-page="stacks"] .stack-grid > .stack-card {
    padding: 20px;
  }
  body[data-page="stacks"] .stack-card {
    min-height: 336px;
  }
  body[data-page="stacks"] .stack-card__name {
    font-size: 18px;
    line-height: 1.25;
  }
  body[data-page="stacks"] .stack-card__lead {
    font-size: 13.5px;
    line-height: 1.52;
    -webkit-line-clamp: 4;
    min-height: 5.9em;
  }
  body[data-page="stacks"] .stack-card__compounds {
    min-height: 60px;
  }
  body[data-page$="-stack"] .grid.grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-page$="-stack"] .trust-tile {
    padding: 18px;
  }
  body[data-page$="-stack"] .trust-tile__title {
    font-size: 15px;
    line-height: 1.3;
  }
  body[data-page$="-stack"] .trust-tile__body {
    font-size: 13.25px;
    line-height: 1.52;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__title {
    font-size: 16px;
  }
  body[data-page$="-stack"] section.section:has(> .container > .stack-cta) .stack-cta__action .btn {
    width: 100%;
    justify-content: center;
  }
}

/* 4.2  Voorkom dat sticky-CTA over het laatste content-section blokje
   gaat zitten — extra spacing-buffer onderaan main wanneer sticky actief. */
@media (max-width: 880px) {
  body[data-page$="-stack"] main {
    padding-bottom: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTIE 5 — STACK CTA SECTION (decision-layer block)
   Desktop versie van .stack-cta — niet sticky, gewoon prominent panel
   ═══════════════════════════════════════════════════════════════ */

/* 5.1  Op desktop: stack-cta krijgt een visuele "decision moment" feel
   via accent-glow + iets extra padding zonder over-the-top wow. */
@media (min-width: 881px) {
  body[data-page$="-stack"] .stack-cta {
    background:
      radial-gradient(circle at 88% 0%, var(--color-accent-soft, rgba(224, 27, 27, 0.12)), transparent 65%),
      var(--color-surface-raised, #17171b);
    border-color: var(--color-border-accent, rgba(224, 27, 27, 0.28));
    box-shadow: var(--shadow-md);
  }
  body[data-page$="-stack"] .stack-cta__action .btn--lg {
    min-height: 52px;
    padding-inline: 28px;
    font-size: 15px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTIE 6 — ACCESSIBILITY & MOTION
   ═══════════════════════════════════════════════════════════════ */

/* 6.1  Reduced-motion: schakel transform-hovers en chevron-rotate uit. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="stacks"] .stack-card,
  body[data-page="stacks"] .stack-card--live:hover,
  body[data-page$="-stack"] .tier-card,
  body[data-page$="-stack"] .tier-card:hover {
    transition: none;
    transform: none;
  }
}

/* 6.2  Focus-visible ring zichtbaar op tier-cards, stack-cards, summaries. */
body[data-page="stacks"] .stack-card:focus-visible,
body[data-page$="-stack"] .tier-card:focus-within {
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 3px;
  border-radius: var(--radius-lg, 16px);
}
body[data-page="stacks"] details.card > summary.card__title:focus-visible {
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 6px);
}