/* togo-mobile-cardgrids.css
   ─────────────────────────────────────────────────────────────────
   Mobile-only (<=640px) overrides voor card-grids. Doel: kaarten
   "langs elkaar" ipv lange verticale kolommen. Twee patterns:

   • horizontal scroll-snap rails — voor "curated" product/article rijen
     (Featured, Library, Recently-viewed, Top-picks)
   • 2-kolom grids — voor structurele rasters (categorieën, trust-tiles,
     process-steps, stat-tiles)

   Page-scope via body[data-page=…] zodat sitewide `.grid-3` regels
   onaangetast blijven op andere pagina's.
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px){

  /* ── Herbruikbaar: scroll-snap rail mixin via custom property ──── */
  .togo-rail{
    display:flex !important;
    grid-template-columns:none !important;
    grid-auto-flow:column;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    box-sizing:border-box;
    max-width:100%;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  .togo-rail::-webkit-scrollbar{display:none}
  .togo-rail > *{
    flex:0 0 72%;
    scroll-snap-align:start;
    min-width:0;
  }

  /* ────────────────────────────────────────────────────────────────
     HOMEPAGE
     ──────────────────────────────────────────────────────────────── */

  /* 1. Core Categories (7 cards) → 3-col app-tile stijl (compact, scannable) */
  body[data-page="home"] .entry-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }
  body[data-page="home"] .entry-grid .card--media .card__media{aspect-ratio:1/1}
  body[data-page="home"] .entry-grid .card--media .card__body{padding:6px 8px 9px}
  body[data-page="home"] .entry-grid .card__title{font-size:11.5px;line-height:1.2;margin-bottom:0}
  body[data-page="home"] .entry-grid .card__eyebrow{display:none}
  body[data-page="home"] .entry-grid .card__body-text{display:none}

  /* 2. Featured Compounds (.grid-3 in section--surface) → safe 2-col grid */
  body[data-page="home"] .section--surface > .container > .grid.grid-3{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow-x:visible;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="home"] .section--surface > .container > .grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page="home"] .section--surface > .container > .grid.grid-3 > .card{
    flex:initial;
    min-width:0;
    max-width:100%;
  }
  body[data-page="home"] .section--surface > .container > .grid.grid-3 .card--media .card__media{aspect-ratio:1/1}
  body[data-page="home"] .section--surface > .container > .grid.grid-3 .card--media .card__body{padding:10px 12px 12px}
  body[data-page="home"] .section--surface > .container > .grid.grid-3 .card__title{font-size:13.5px;line-height:1.25}
  body[data-page="home"] .section--surface > .container > .grid.grid-3 .card__body-text{font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* 3. Why TogoPeptide trust-tiles (.grid-2) → 2-col */
  body[data-page="home"] .section > .container > .grid.grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="home"] .grid.grid-2 > .card{padding:14px 14px}
  body[data-page="home"] .grid.grid-2 .trust-tile__title{font-size:14px}
  body[data-page="home"] .grid.grid-2 .trust-tile__body{font-size:12.5px;line-height:1.4}

  /* 4. Process steps (4 stappen) → 2x2 grid */
  body[data-page="home"] .process-steps{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  body[data-page="home"] .process-step{padding:14px 14px 16px}
  body[data-page="home"] .process-step__title{font-size:14px}
  body[data-page="home"] .process-step__body{font-size:12px;line-height:1.4}
  body[data-page="home"] .process-step::before{font-size:10px;margin-bottom:6px}

  /* 5. Research Library (.grid-3, niet section--surface) → safe 2-col grid */
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow-x:visible;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 > .card{
    flex:initial;
    min-width:0;
    max-width:100%;
  }
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 .card--media .card__media{aspect-ratio:16/10}
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 .card--media .card__body{padding:10px 12px 12px}
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 .card__title{font-size:13.5px;line-height:1.25}
  body[data-page="home"] main > .section:not(.section--surface) > .container > .grid.grid-3 .card__body-text{font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* 6. Trust-stats strip (4 KPI tegels) — al 2-col, alleen polish */
  body[data-page="home"] .trust-stat{padding:12px 10px;gap:2px}
  body[data-page="home"] .trust-stat__value{font-size:22px}
  body[data-page="home"] .trust-stat__sub{font-size:11px;line-height:1.3}

  /* 7. Recently-viewed widget (dynamisch) — 1-col met compacte kaart */
  body[data-page="home"] .togo-home-recent__grid{grid-template-columns:1fr;gap:10px}
  body[data-page="home"] .togo-home-recent__card{padding:10px 12px;gap:10px}
  body[data-page="home"] .togo-home-recent__media{width:44px;height:44px}
  body[data-page="home"] .togo-home-recent__title{font-size:14px}
  body[data-page="home"] .togo-home-recent__desc{font-size:11.5px}

  /* 10. Stack-CTA banner polish */
  body[data-page="home"] .stack-cta{padding:18px 18px 20px;border-radius:16px}
  body[data-page="home"] .stack-cta__title{font-size:22px;margin-bottom:8px}
  body[data-page="home"] .stack-cta__lead{font-size:13.5px;margin-bottom:16px}
  body[data-page="home"] .stack-cta__action .btn{width:100%}

  /* ────────────────────────────────────────────────────────────────
     SHOP
     ──────────────────────────────────────────────────────────────── */

  /* entry-grid (7 categories) → 2-col */
  body[data-page="shop"] .entry-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  /* quick filter chips → horizontal scroll-snap */
  body[data-page="shop"] .shop-quick-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    box-sizing:border-box;
    max-width:100%;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    padding-bottom:4px;
  }
  body[data-page="shop"] .shop-quick-filters::-webkit-scrollbar{display:none}
  body[data-page="shop"] .shop-quick-filter{flex:0 0 auto;scroll-snap-align:start}

  /* shop-grid — onder 340px terug naar 1 col */
  @media (max-width: 340px){
    body[data-page="shop"] .shop-grid{grid-template-columns:1fr}
  }

  /* ────────────────────────────────────────────────────────────────
     CATEGORY
     ──────────────────────────────────────────────────────────────── */

  /* category quick filters → horizontal scroll-snap */
  body[data-page="category"] .cat-quick-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    box-sizing:border-box;
    max-width:100%;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    padding-bottom:4px;
  }
  body[data-page="category"] .cat-quick-filters::-webkit-scrollbar{display:none}
  body[data-page="category"] .cat-quick-filter{flex:0 0 auto;scroll-snap-align:start}
  body[data-page="category"] .cat-quick-filters__label{flex:0 0 auto;scroll-snap-align:start}

  /* Top picks → safe 2-col grid. No negative rail offset: it clips product cards. */
  body[data-page="category"] .category-top-picks{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    display:grid;
    gap:10px;
    overflow-x:visible;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="category"] .category-top-picks::-webkit-scrollbar{display:none}
  body[data-page="category"] .category-top-picks > .card{
    flex:initial;
    min-width:0;
    max-width:100%;
  }

  /* All compounds grid → 2-col, plus card-content compact zodat de
     absolute-positioned overlay-elementen (badge-stack, compare, wishlist,
     preview-chips) niet over elkaar vallen op smalle 163px-cards. */
  body[data-page="category"] #category-grid.grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="category"] #category-grid.grid-3 .card__body{padding:12px 14px}
  body[data-page="category"] #category-grid.grid-3 .card__media{aspect-ratio:1/1}
  body[data-page="category"] #category-grid.grid-3 .card__title{font-size:14px}
  body[data-page="category"] #category-grid.grid-3 .card__body-text{
    font-size:11.5px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Card top-row overlays worden centraal geregeld in togo-final-polish.css. */
  body[data-page="category"] #category-grid.grid-3 .badge.card__badge{
    font-size:10px;padding:3px 8px;line-height:1.2;
  }
  body[data-page="category"] #category-grid.grid-3 .togo-card-preview__chip{display:none}

  .card .badge.card__badge,
  .shop-card .badge.card__badge{
    font-size:10px;padding:3px 8px;line-height:1.2;
  }

  @media (max-width:380px){
    body[data-page="category"] #category-grid.grid-3,
    body[data-page="category"] .category-top-picks{
      grid-template-columns:minmax(0, 1fr) !important;
      gap:14px !important;
    }
  }
  .card.card--media .togo-card-stock,
  .shop-grid .card .togo-card-stock,
  #category-grid .card .togo-card-stock,
  #compound-related .card .togo-card-stock{
    display:none;
  }
  .card .togo-card-preview__chip,
  .shop-card .togo-card-preview__chip{display:none}

  /* Category research library → safe stacked grid */
  body[data-page="category"] #category-research-grid.grid-3{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:10px;
    overflow-x:visible;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="category"] #category-research-grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page="category"] #category-research-grid.grid-3 > .card{
    flex:initial;
    min-width:0;
    max-width:100%;
  }

  /* ────────────────────────────────────────────────────────────────
     COMPOUND (product detail page)
     ──────────────────────────────────────────────────────────────── */

  /* Inline trust pills (8 stuks bij CTA) → 2-col */
  body[data-page="compound"] .tgp-trust-pills--inline{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
  }
  body[data-page="compound"] .tgp-trust-pills--inline .tgp-trust-pills__pill{
    padding:8px 10px;
    font-size:11.5px;
  }

  /* Aliases / Reg / Stacks grids → 2-col (recon-grid blijft 1-col) */
  body[data-page="compound"] .aliases-grid,
  body[data-page="compound"] .reg-grid,
  body[data-page="compound"] .stacks-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  body[data-page="compound"] .aliases-card,
  body[data-page="compound"] .reg-tile,
  body[data-page="compound"] .stack-link{padding:12px}

  /* Storage advice → 2-col spec-sheet */
  body[data-page="compound"] .pdp-storage-advice{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  body[data-page="compound"] .pdp-storage-advice__cell{padding:10px 12px}
  body[data-page="compound"] .pdp-storage-advice__value{font-size:13px}

  /* "Every order includes" trust-tiles — bewust 1-col (tekstrijk) */
  body[data-page="compound"] .grid.grid-2{gap:12px}
  body[data-page="compound"] .trust-tile{padding:4px 0}
  body[data-page="compound"] .trust-tile__title{font-size:14.5px}
  body[data-page="compound"] .trust-tile__body{font-size:13px;line-height:1.55}

  body[data-page="compound"] .compound-compare-wrap{
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  body[data-page="compound"] .compound-compare-table,
  body[data-page="compound"] .compound-compare-table thead,
  body[data-page="compound"] .compound-compare-table tbody,
  body[data-page="compound"] .compound-compare-table tr,
  body[data-page="compound"] .compound-compare-table th,
  body[data-page="compound"] .compound-compare-table td{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  body[data-page="compound"] .compound-compare-table thead{display:none}
  body[data-page="compound"] .compound-compare-table tbody{display:grid;gap:10px}
  body[data-page="compound"] .compound-compare-table tbody tr{
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-surface-raised);
    overflow:hidden;
  }
  body[data-page="compound"] .compound-compare-table tbody th{
    padding:10px 12px;
    border-bottom:1px solid var(--color-border);
    color:var(--color-text);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  body[data-page="compound"] .compound-compare-table tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:1px solid var(--color-border);
    font-size:13px;
  }
  body[data-page="compound"] .compound-compare-table tbody td:last-child{border-bottom:0}
  body[data-page="compound"] .compound-compare-table tbody td::before{
    flex:0 0 auto;
    color:var(--color-text-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  body[data-page="compound"] .compound-compare-table tbody td:nth-of-type(1)::before{content:"Current"}
  body[data-page="compound"] .compound-compare-table tbody td:nth-of-type(2)::before{content:"Related"}
  body[data-page="compound"] .compound-compare-table tbody td:nth-of-type(3)::before{content:"Related"}
  body[data-page="compound"] .compound-compare-table tbody td:nth-of-type(4)::before{content:"Related"}
  body[data-page="compound"] .compound-compare-table .ccmp-stock,
  body[data-page="compound"] .compound-compare-table .ccmp-price-from,
  body[data-page="compound"] .compound-compare-table .ccmp-cta{
    max-width:100%;
    white-space:normal;
  }

  /* Related products + related articles → 2-col */
  body[data-page="compound"] #compound-related.grid-3,
  body[data-page="compound"] #compound-related-articles.grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="compound"] #compound-related.grid-3 .card__media{aspect-ratio:1/1}

  /* Recently viewed → safe 2-col grid */
  body[data-page="compound"] #compound-recently-viewed.grid-4{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="compound"] #compound-recently-viewed.grid-4::-webkit-scrollbar{display:none}
  body[data-page="compound"] #compound-recently-viewed.grid-4 > .card{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* ────────────────────────────────────────────────────────────────
     SITEWIDE (alle pagina's)
     ──────────────────────────────────────────────────────────────── */

  /* Trust-pills sitewide (boven footer) → 2-col i.p.v. 1-kolom */
  .tgp-trust-pills{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px;
    padding:16px 0;
  }
  .tgp-trust-pills__pill{
    padding:10px 12px;
    font-size:12px;
    border-radius:10px;
    gap:8px;
  }
  .tgp-trust-pills__icon{width:16px;height:16px}
  .tgp-trust-pills__label strong{font-size:12.5px;margin-bottom:1px}
}

/* Extra noodgreep: onder 340px (oude iPhone SE-1) terug naar 1-col
   waar 2-col te krap wordt. */
@media (max-width: 340px){
  body[data-page="home"] .entry-grid,
  body[data-page="shop"] .entry-grid,
  body[data-page="category"] #category-grid.grid-3,
  body[data-page="compound"] #compound-related.grid-3,
  body[data-page="compound"] #compound-related-articles.grid-3{
    grid-template-columns:1fr;
  }
}

/* ════════════════════════════════════════════════════════════════
   UITBREIDING — overige pagina's (blog hub, stacks, about, 6 stack-
   detail pages, research-hub, quality, shipping, returns, contact,
   help, glossary, wishlist, stack-builder).

   Herbruikbare rail-mixin via custom property niet mogelijk in pure
   CSS — daarom blokken uitgeschreven. Page-scope via data-page.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){

  /* ── Blog hub: alle .blog-grid secties → safe mobile grid ── */
  body[data-page="blog-hub"] .blog-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="blog-hub"] .blog-grid::-webkit-scrollbar{display:none}
  body[data-page="blog-hub"] .blog-grid > .blog-card{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  body[data-page="blog-hub"] .blog-card__cover{
    aspect-ratio:16/9;
    min-height:124px;
  }
  body[data-page="blog-hub"] .blog-card__body{padding:17px 18px 18px}
  body[data-page="blog-hub"] .blog-card__title{font-size:16px;line-height:1.28}
  body[data-page="blog-hub"] .blog-card__excerpt{
    font-size:13.25px;
    line-height:1.52;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body[data-page="blog-hub"] .blog-card__meta{font-size:11.5px;gap:8px}

  @media (max-width:389px){
    body[data-page="blog-hub"] .blog-card__body{padding-inline:16px}
    body[data-page="blog-hub"] .blog-card__cover{min-height:116px}
  }

  /* ── Stacks hub: 6 stack-cards → safe mobile grid ── */
  body[data-page="stacks"] .stack-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="stacks"] .stack-grid::-webkit-scrollbar{display:none}
  body[data-page="stacks"] .stack-grid > .stack-card{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:18px;
  }
  body[data-page="stacks"] .stack-card__name{font-size:17px}
  body[data-page="stacks"] .stack-card__lead{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  body[data-page="stacks"] .stack-card__chip{font-size:10.5px;padding:3px 7px}
  body[data-page="stacks"] .stack-compare{
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:14px;
  }
  body[data-page="stacks"] .stack-compare table,
  body[data-page="stacks"] .stack-compare thead,
  body[data-page="stacks"] .stack-compare tbody,
  body[data-page="stacks"] .stack-compare tr,
  body[data-page="stacks"] .stack-compare th,
  body[data-page="stacks"] .stack-compare td{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  body[data-page="stacks"] .stack-compare thead{display:none}
  body[data-page="stacks"] .stack-compare tbody{display:grid;gap:10px}
  body[data-page="stacks"] .stack-compare tr{
    border:1px solid var(--color-border);
    border-radius:14px;
    background:var(--color-surface);
    overflow:hidden;
  }
  body[data-page="stacks"] .stack-compare td{
    display:grid;
    grid-template-columns:minmax(82px, 34%) minmax(0, 1fr);
    gap:10px;
    align-items:start;
    padding:10px 12px;
    border-bottom:1px solid var(--color-border);
    font-size:12.5px;
  }
  body[data-page="stacks"] .stack-compare td:last-child{border-bottom:0}
  body[data-page="stacks"] .stack-compare td::before{
    color:var(--color-text-muted);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  body[data-page="stacks"] .stack-compare td:nth-of-type(1)::before{content:"Stack"}
  body[data-page="stacks"] .stack-compare td:nth-of-type(2)::before{content:"Focus"}
  body[data-page="stacks"] .stack-compare td:nth-of-type(3)::before{content:"Compounds"}
  body[data-page="stacks"] .stack-compare td:nth-of-type(4)::before{content:"Tiers"}
  body[data-page="stacks"] .stack-compare td:nth-of-type(5)::before{content:"Status"}

  /* ── About: process → 2×2, values → rail ── */
  body[data-page="about"] .process-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="about"] .process-step{padding:14px 14px 16px}
  body[data-page="about"] .process-step__title{font-size:14px}
  body[data-page="about"] .process-step__body{font-size:12px;line-height:1.4}
  body[data-page="about"] .values-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="about"] .values-grid::-webkit-scrollbar{display:none}
  body[data-page="about"] .values-grid > *{width:100%;max-width:100%;min-width:0}

  /* ── Stack-detail pagina's (6×) via suffix-selector ── */
  body[data-page$="-stack"] .grid.grid-3{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page$="-stack"] .grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page$="-stack"] .grid.grid-3 > *{width:100%;max-width:100%;min-width:0}
  body[data-page$="-stack"] .grid.grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page$="-stack"] .trust-tile{padding:14px}
  body[data-page$="-stack"] .trust-tile__title{font-size:14px}
  body[data-page$="-stack"] .trust-tile__body{font-size:12.5px;line-height:1.4}
  body[data-page$="-stack"] .tier-grid{gap:12px}

  /* ── Research hub: artikel/topic grids → safe mobile grid ── */
  body[data-page="research-hub"] .grid.grid-3{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="research-hub"] .grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page="research-hub"] .grid.grid-3 > .card{width:100%;max-width:100%;min-width:0}

  /* ── Quality / Shipping: compact facts in 2-col; returns policy stays readable. ── */
  body[data-page="quality"] .grid.grid-2,
  body[data-page="shipping"] .grid.grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="returns"] .grid.grid-2{
    grid-template-columns:1fr;
    gap:12px;
  }
  body[data-page="quality"] .grid.grid-2 .trust-tile,
  body[data-page="shipping"] .grid.grid-2 .trust-tile,
  body[data-page="returns"] .grid.grid-2 .trust-tile{padding:14px}
  body[data-page="quality"] .grid.grid-2 .trust-tile__title,
  body[data-page="shipping"] .grid.grid-2 .trust-tile__title,
  body[data-page="returns"] .grid.grid-2 .trust-tile__title{font-size:14px}
  body[data-page="quality"] .grid.grid-2 .trust-tile__body,
  body[data-page="shipping"] .grid.grid-2 .trust-tile__body,
  body[data-page="returns"] .grid.grid-2 .trust-tile__body{font-size:12.5px;line-height:1.4}

  body[data-page="quality"] .grid.grid-3,
  body[data-page="shipping"] .grid.grid-3,
  body[data-page="returns"] .grid.grid-3{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    overflow-x:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:0;
    margin-inline:0;
    mask-image:none;
    -webkit-mask-image:none;
  }
  body[data-page="quality"] .grid.grid-3::-webkit-scrollbar,
  body[data-page="shipping"] .grid.grid-3::-webkit-scrollbar,
  body[data-page="returns"] .grid.grid-3::-webkit-scrollbar{display:none}
  body[data-page="quality"] .grid.grid-3 > *,
  body[data-page="shipping"] .grid.grid-3 > *,
  body[data-page="returns"] .grid.grid-3 > *{width:100%;max-width:100%;min-width:0}

  /* ── Contact: 2x2 grid, laatste over volle breedte als oneven ── */
  body[data-page="contact"] .grid.grid-2,
  body[data-page="contact"] .grid.grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="contact"] .grid.grid-3 > *:last-child:nth-child(odd){grid-column:span 2}

  @media (max-width:409px){
    body[data-page="contact"] .grid.grid-3{
      grid-template-columns:1fr;
      gap:12px;
    }
    body[data-page="contact"] .grid.grid-3 > *:last-child:nth-child(odd){grid-column:auto}
  }

  /* ── Help: navigatie-tegels in 2-col compact ── */
  body[data-page="help"] .grid.grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-page="help"] .grid.grid-3 > .card{padding:14px}
  body[data-page="help"] .grid.grid-3 .card__title{font-size:14px}
  body[data-page="help"] .grid.grid-3 .card__body-text{font-size:12px;line-height:1.4}

  @media (max-width:409px){
    body[data-page="help"] .grid.grid-3{
      grid-template-columns:1fr;
      gap:12px;
    }
    body[data-page="help"] .grid.grid-3 > .card{padding:18px}
    body[data-page="help"] .grid.grid-3 .card__title{font-size:16px}
    body[data-page="help"] .grid.grid-3 .card__body-text{font-size:13.5px;line-height:1.55}
  }

  /* ── Glossary: term-cards compact 2-col ── */
  body[data-page="glossary"] .grid.grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  body[data-page="glossary"] .grid.grid-2 > *{padding:12px}

  @media (max-width:409px){
    body[data-page="glossary"] .grid.grid-2{
      grid-template-columns:minmax(0, 1fr);
      gap:12px;
    }
    body[data-page="glossary"] .grid.grid-2 > *{padding:16px}
  }

  /* ── Wishlist: text-heavy saved cards need reading width, not a tiny 2-col squeeze. ── */
  body[data-page="wishlist"] .wishlist-grid,
  body[data-page="wishlist"] #wishlist-grid{
    grid-template-columns:minmax(0, 1fr);
    gap:12px;
  }
  body[data-page="wishlist"] .wi-card{padding:14px;gap:8px}

  /* ── Stack-builder: alle pickers naar 2-col (interactieve tool, geen swipe) ── */
  body[data-page="stack-builder"] .grid.grid-3,
  body[data-page="stack-builder"] .stack-catalog__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}