/* -------------------------------------------------------------
 preview-shop-v2.css — ALLEEN voor preview-shop-v2.html.
 Presentatielaag bovenop de echte shop (kaart-DOM + filter-JS
 onaangeraakt). Vertaalt de chaos-audit naar rust:
 1 toolbar, 1 badge per kaart, COA-belofte 1× boven het grid,
 1 prijsnotatie, kalmere hero, light-mode foto-kader.
 ------------------------------------------------------------- */

/* === HERO: editorial, rustig ================================= */
/* De grid-sectie ("Alle compounds.") links uitlijnen; de dubbele
 "CATALOGUS"-eyebrow daar verbergen (de page-hero heeft 'm al). */
body[data-v2] .section:has(> .container > .shop-layout) .section__head,
body[data-v2] .section:has(.shop-layout) .section__head {
 text-align: left;
}
body[data-v2] .section:has(.shop-layout) .section__head .section__eyebrow {
 display: none;
}

/* === CONTROLEZONE: van 4 lagen naar 1 rustige toolbar ======== */
/* A-Z scroll-spy balk weg (lijkt op een ongewenst actief filter) */
body[data-v2] .togo-az-index { display: none !important; }

/* Quick-filter-chips: één neutrale dot-kleur i.p.v. 3 (rust) en
 strakker uitgelijnd; blijven functioneel (JS ongemoeid). */
body[data-v2] .shop-quick-filter__dot,
body[data-v2] .shop-quick-filter__dot--green,
body[data-v2] .shop-quick-filter__dot--accent,
body[data-v2] .shop-quick-filter__dot--blue {
 background: currentColor !important;
 opacity: 0.55;
}
body[data-v2] .shop-quick-filter[aria-pressed="true"] .shop-quick-filter__dot { opacity: 1; }
body[data-v2] .shop-quick-filters { gap: 8px; margin-block: 10px 18px; }

/* === ÉÉN COA-belofte boven het grid i.p.v. op 48 kaarten ===== */
body[data-v2] .shop-quick-filters::after {
 content: "Independent lab-tested COA included with every batch";
 display: block;
 flex: 1 1 100%;
 margin-top: 6px;
 font-size: 12px;
 color: var(--color-text-muted, #9d9da5);
 letter-spacing: 0.01em;
}
body[data-v2][lang="nl"] .shop-quick-filters::after,
html[lang="nl"] body[data-v2] .shop-quick-filters::after {
 content: "Onafhankelijk lab-getest COA bij elke batch inbegrepen";
}

/* === KAART: max één status-badge, geen ruis-overlays ========= */
/* Bestseller-chip op de foto verbergen — status (voorraad) wint.
 Het tweede stack-item is altijd de marketing-badge. */
body[data-v2] .card-badge-stack [data-stack-item="1"] { display: none !important; }

/* "COA per batch"-preview-chip van elke kaart halen (staat nu 1×
 boven het grid). */
body[data-v2] .togo-card-preview { display: none !important; }

/* Eventuele prijs-chip op de foto verbergen — prijs hoort onder de
 titel in NL-notatie (de bestaande prijsregel blijft). */
body[data-v2] .card__media [class*="price"],
body[data-v2] .card__media .togo-price-pill { display: none !important; }

/* Statusbadge: rustige, uniforme pill linksboven */
body[data-v2] .card-badge-stack {
 gap: 6px;
}
body[data-v2] .togo-stock {
 font-size: 10.5px;
 letter-spacing: 0.05em;
 padding: 4px 9px;
 border-radius: 999px;
}

/* === MEDIA: edge-to-edge + light-mode foto-kader ============= */
body[data-v2] #shop-grid a.card .card__media {
 border-radius: 0;
}
/* Light: donkere productfoto's krijgen een zacht kader zodat ze
 niet als harde zwarte blokken op crème "schaakborden". */
html[data-theme="light"] body[data-v2] #shop-grid a.card .card__media {
 background: linear-gradient(180deg, #f5f1ea 0%, #ece5d8 100%);
 border-bottom: 1px solid rgba(10, 10, 12, 0.08);
}
html[data-theme="light"] body[data-v2] #shop-grid a.card .card__media img {
 mix-blend-mode: multiply;
}

/* === GRID: rustiger ritme, gelijke kaarthoogte =============== */
body[data-v2] .shop-grid {
 gap: clamp(14px, 1.6vw, 22px);
}

/* === PAGINA-EINDE: USP-tegels strak 3×2, minder lege ruimte == */
body[data-v2] .home-trust .grid,
body[data-v2] [class*="usp"] .grid {
 gap: 14px;
}

/* =============================================================
 PREMIUM-LAAG (2026-06-06) — van "rust" naar "luxe":
 verfijnde kaart, micro-interacties, prijs-hiërarchie.
 ============================================================= */

/* Kaart-frame: zachter, diepere hover, geen harde rand in dark */
body[data-v2] #shop-grid a.card {
 border: 1px solid transparent;
 background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
 border-radius: 14px;
 overflow: hidden;
 transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1), border-color .22s ease;
}
body[data-v2] #shop-grid a.card:hover {
 transform: translateY(-4px);
 border-color: rgba(224,27,27,0.40);
 box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 60px rgba(224,27,27,0.08);
}
html[data-theme="light"] body[data-v2] #shop-grid a.card {
 background: #fff;
 border-color: rgba(10,10,12,0.10);
}
html[data-theme="light"] body[data-v2] #shop-grid a.card:hover {
 box-shadow: 0 16px 38px rgba(20,18,12,0.14);
 border-color: rgba(224,27,27,0.35);
}

/* Media: subtiele zoom-on-hover (one wow per card) */
body[data-v2] #shop-grid a.card .card__media {
 overflow: hidden;
}
body[data-v2] #shop-grid a.card .card__media img {
 transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
body[data-v2] #shop-grid a.card:hover .card__media img {
 transform: scale(1.045);
}

/* Status-badge: van gevulde pill naar fijn glas-label met dot */
body[data-v2] .card-badge-stack .togo-stock {
 display: inline-flex; align-items: center; gap: 6px;
 background: rgba(10,12,16,0.72);
 -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
 border: 1px solid rgba(255,255,255,0.14);
 color: #e8e8ee;
 font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
 padding: 4px 9px 4px 7px; border-radius: 999px;
}
body[data-v2] .card-badge-stack .togo-stock::before {
 content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22c55e; flex: 0 0 auto;
}
body[data-v2] .card-badge-stack .togo-stock--partial::before,
body[data-v2] .card-badge-stack .togo-stock--fresh::before { background: #f59e0b; }
html[data-theme="light"] body[data-v2] .card-badge-stack .togo-stock {
 background: rgba(255,255,255,0.86); color: #1a1a20; border-color: rgba(10,10,12,0.12);
}

/* Body-ritme: kicker klein/kalm, titel groter editorial, tekst clamp */
body[data-v2] #shop-grid .card__body { padding: 16px 16px 18px; }
body[data-v2] #shop-grid .card__eyebrow {
 font-size: 10.5px; letter-spacing: 0.13em; font-weight: 700;
 color: var(--color-accent-text, #ff6b6b); margin: 0 0 7px; text-transform: uppercase;
}
body[data-v2] #shop-grid .card__title {
 font-size: 19px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 6px;
}
body[data-v2] #shop-grid .card__body-text {
 font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted, #9d9da5);
 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 margin: 0;
}

/* Prijs-regel: prominent, tabular, met fijne scheidingslijn erboven */
body[data-v2] #shop-grid .v2-price {
 display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
 margin: 12px 0 0; padding-top: 11px;
 border-top: 1px solid rgba(255,255,255,0.07);
 font-variant-numeric: tabular-nums;
}
html[data-theme="light"] body[data-v2] #shop-grid .v2-price { border-top-color: rgba(10,10,12,0.08); }
body[data-v2] #shop-grid .v2-price__amount {
 font-size: 16px; font-weight: 700; color: var(--color-text, #fff); letter-spacing: -0.01em;
}
body[data-v2] #shop-grid .v2-price__from {
 font-size: 11px; font-weight: 500; color: var(--color-text-muted, #9d9da5); margin-right: 3px;
}
body[data-v2] #shop-grid .v2-price__sizes {
 font-size: 11px; color: var(--color-text-muted, #9d9da5); white-space: nowrap;
}

/* Wishlist-hart: fijner, glasachtig, alleen vol bij hover/saved */
body[data-v2] #shop-grid .togo-wishlist-heart {
 width: 34px; height: 34px;
 background: rgba(10,12,16,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
 border: 1px solid rgba(255,255,255,0.16);
}

/* "Bekijk →" affordance: een solide accent-balk die op hover vóór de
 foto binnenglijdt (z-index boven de img die z-index:1 heeft). */
body[data-v2] #shop-grid a.card .card__media { position: relative; }
body[data-v2] #shop-grid a.card .card__media::after {
 content: "Bekijk compound →";
 position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
 padding: 11px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
 color: #fff; text-align: center;
 background: #b8252f;
 box-shadow: 0 -10px 24px rgba(184,37,47,0.30);
 transform: translateY(101%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
 pointer-events: none;
}
body[data-v2] #shop-grid a.card:hover .card__media::after { transform: translateY(0); }
html:not([lang="nl"]) body[data-v2] #shop-grid a.card .card__media::after { content: "View compound →"; }

@media (prefers-reduced-motion: reduce) {
 body[data-v2] #shop-grid a.card,
 body[data-v2] #shop-grid a.card .card__media img,
 body[data-v2] #shop-grid a.card .card__media::after { transition: none !important; }
 body[data-v2] #shop-grid a.card:hover { transform: none; }
 body[data-v2] #shop-grid a.card:hover .card__media img { transform: none; }
}

/* Grid iets ruimer voor de premium lucht */
body[data-v2] #shop-grid { gap: clamp(16px, 1.8vw, 26px); }

/* =============================================================
 PREMIUM-LAAG 2 — pagina-niveau: hero, zijbalk, toolbar
 ============================================================= */

/* HERO: van gecentreerd "Research compounds." naar editorial links.
 De stat-rij wordt door preview-shop-v2.js ingespoten (.v2-herostats). */
body[data-v2] .shop-layout { margin-top: 6px; }
body[data-v2] main > .section:has(#shop-grid) .section__head,
body[data-v2] main > .section .section__head:has(~ .shop-layout) {
 text-align: left;
 max-width: 760px;
}
body[data-v2] main > .section .section__head .section__title {
 font-size: clamp(30px, 3.6vw, 46px);
 letter-spacing: -0.02em;
}
body[data-v2] .v2-herostats {
 display: flex; flex-wrap: wrap; gap: 0;
 margin: 18px 0 4px; padding: 0; list-style: none;
 border: 1px solid var(--color-border, rgba(255,255,255,0.08));
 border-radius: 12px; overflow: hidden; width: fit-content;
}
body[data-v2] .v2-herostats li {
 padding: 10px 18px; display: flex; flex-direction: column; gap: 1px;
 border-right: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
body[data-v2] .v2-herostats li:last-child { border-right: 0; }
body[data-v2] .v2-herostats__num {
 font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
 font-variant-numeric: tabular-nums; color: var(--color-text, #fff);
}
body[data-v2] .v2-herostats__lbl {
 font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
 color: var(--color-text-muted, #9d9da5);
 /* nooit midden-in-woord afbreken ("VERBINDI NGEN") */
 overflow-wrap: normal; word-break: keep-all; hyphens: none; white-space: nowrap;
}
@media (max-width: 560px) {
 body[data-v2] .v2-herostats { width: 100%; flex-wrap: wrap; }
 /* 2 per rij op telefoon zodat labels niet hoeven te breken */
 body[data-v2] .v2-herostats li { flex: 1 1 calc(50% - 1px); padding: 10px 12px; }
 body[data-v2] .v2-herostats__lbl { white-space: normal; }
}

/* Print-CTA degraderen tot stille tekstlink (was de prominente hero-knop) */
body[data-v2] .print-button {
 background: transparent !important; border: 0 !important;
 color: var(--color-text-muted, #9d9da5) !important;
 font-size: 12px !important; font-weight: 500 !important;
 padding: 4px 0 !important; box-shadow: none !important; min-height: 0 !important;
 text-decoration: underline; text-underline-offset: 3px; gap: 6px;
}
body[data-v2] .print-button .print-button__icon { width: 13px; height: 13px; }
body[data-v2] .print-button:hover { color: var(--color-accent-text, #ff6b6b) !important; }

/* ZIJBALK: rustiger, premium kaartje i.p.v. losse checkboxes */
body[data-v2] .shop-filters {
 background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
 border: 1px solid var(--color-border, rgba(255,255,255,0.08));
 border-radius: 14px; padding: 16px 16px 8px;
}
html[data-theme="light"] body[data-v2] .shop-filters {
 background: #fff; border-color: rgba(10,10,12,0.10);
}
body[data-v2] .shop-filters__label {
 font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
 font-weight: 700; color: var(--color-text-muted, #9d9da5);
 display: block; margin: 0 0 8px;
}
body[data-v2] .shop-filters__group { margin-bottom: 18px; }
body[data-v2] .shop-filters__option {
 display: flex; align-items: center; gap: 8px;
 padding: 5px 0; font-size: 13px; cursor: pointer;
 transition: color .15s ease;
}
body[data-v2] .shop-filters__option:hover { color: var(--color-accent-text, #ff6b6b); }
body[data-v2] .shop-filters__count {
 margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
 color: var(--color-text-muted, #9d9da5);
 background: rgba(255,255,255,0.05); border-radius: 999px; padding: 1px 8px; min-width: 24px; text-align: center;
}
html[data-theme="light"] body[data-v2] .shop-filters__count { background: rgba(10,10,12,0.05); }

/* TOOLBAR: rustig, met fijne onderlijn als anker */
body[data-v2] .shop-toolbar {
 padding-bottom: 14px; margin-bottom: 4px;
 border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.07));
}
body[data-v2] .shop-toolbar__count {
 font-size: 13px; color: var(--color-text-muted, #9d9da5); font-variant-numeric: tabular-nums;
}
body[data-v2] .shop-search input { font-size: 13px; }
body[data-v2] .shop-sort { font-size: 13px; }

/* =============================================================
 PREMIUM-LAAG 3 — finesse (bestseller-accent, reveal, micro-UX)
 ============================================================= */

/* (A) Bestseller-kaart: heel subtiel — een dun goud-lijntje langs de
 bovenrand + een klein ster-glyph vóór de titel. Geen grote badge,
 zodat ook 3 bestsellers naast elkaar rustig blijven. */
body[data-v2] #shop-grid a.card.v2-bestseller { position: relative; }
body[data-v2] #shop-grid a.card.v2-bestseller::before {
 content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6;
 background: linear-gradient(90deg, #f5d27a, #d4a017);
}
body[data-v2] #shop-grid a.card.v2-bestseller .card__title::before {
 content: "★ "; color: #d4a017; font-size: 0.9em;
}

/* (C) Categorie-accent op de kicker (subtiel, valt terug op rood) */
body[data-v2] #shop-grid .card__eyebrow {
 color: var(--v2-cat, var(--color-accent-text, #ff6b6b));
}

/* (B/H) Scroll-reveal: zacht omhoog infaden, gestaffeld gevoel */
body[data-v2] .v2-reveal {
 opacity: 0; transform: translateY(14px);
 transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
body[data-v2] .v2-reveal.is-in { opacity: 1; transform: none; }

/* (D) Hartje "pop" bij klik/saved */
body[data-v2] .togo-wishlist-heart { transition: transform .18s cubic-bezier(.2,.7,.2,1), background .2s ease, border-color .2s ease; }
body[data-v2] .togo-wishlist-heart:active { transform: scale(0.86); }
body[data-v2] .togo-wishlist-heart[aria-pressed="true"],
body[data-v2] .togo-wishlist-heart[data-saved="true"] {
 background: rgba(184,37,47,0.92); border-color: #b8252f; color: #fff;
}

/* (E) Quick-filter actief = subtiele gevulde pill */
body[data-v2] .shop-quick-filter[aria-pressed="true"] {
 background: rgba(184,37,47,0.14);
 border-color: rgba(184,37,47,0.45);
 color: var(--color-text, #fff);
}

/* (F) Product op een "voetstuk": zachte radiale gloed achter de foto */
body[data-v2] #shop-grid a.card .card__media::after,
body[data-v2] #shop-grid a.card .card__media .card-badge-stack { /* z-context anchor */ }
body[data-v2] #shop-grid a.card .card__media picture {
 position: relative; z-index: 1; display: block;
}
body[data-v2] #shop-grid a.card .card__media {
 background:
  radial-gradient(120% 80% at 50% 115%, rgba(224,27,27,0.10), transparent 60%),
  #0c0c10;
}
html[data-theme="light"] body[data-v2] #shop-grid a.card .card__media {
 background:
  radial-gradient(120% 80% at 50% 115%, rgba(224,27,27,0.06), transparent 60%),
  linear-gradient(180deg, #f5f1ea 0%, #ece5d8 100%);
}

/* (G) Toolbar plakt netjes bij scroll (desktop) */
@media (min-width: 921px) {
 body[data-v2] .shop-toolbar {
  position: sticky; top: 64px; z-index: 5;
  background: var(--color-bg, #0a0a0d); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
 }
 html[data-theme="light"] body[data-v2] .shop-toolbar { background: rgba(255,255,255,0.86); }
}

/* (I) Consistente focus-ring voor toetsenbord (a11y-finesse) */
body[data-v2] a.card:focus-visible,
body[data-v2] .shop-quick-filter:focus-visible,
body[data-v2] .shop-filters__option:focus-within {
 outline: 2px solid var(--color-accent, #b8252f); outline-offset: 3px; border-radius: 12px;
}

/* (J) Verfijnde scrollbar (alleen preview, subtiel) */
body[data-v2] * { scrollbar-width: thin; scrollbar-color: rgba(184,37,47,0.5) transparent; }