/* -------------------------------------------------------------
 preview-v2-core.css — gedeelde V2-designlaag, ALLEEN geladen
 door preview-*-v2.html pagina's (body[data-v2]).
 Codificeert de bewezen patronen van 2026-06-06: flagship-kaarten,
 kalm sectie-ritme, badge-discipline, CTA-hiërarchie.
 Raakt productie-pagina's niet; uitrol pas na ED-akkoord.
 ------------------------------------------------------------- */

/* === 1. Sectie-ritme: één ademhaling voor de hele site ======= */
body[data-v2] main > .section,
body[data-v2] main > section.section {
 padding-block: clamp(44px, 6vw, 84px);
}
body[data-v2] main > .section .section__head {
 max-width: 640px;
 margin-bottom: clamp(22px, 3vw, 36px);
}
body[data-v2] .section__eyebrow {
 font-size: 12px;
 letter-spacing: 0.13em;
 font-weight: 700;
}
body[data-v2] .section__title {
 letter-spacing: -0.012em;
 line-height: 1.12;
}
body[data-v2] .section__lead {
 max-width: 56ch;
 line-height: 1.6;
}

/* === 2. Kaart-discipline: één kaarttaal, beide themes ======== */
body[data-v2] .card,
body[data-v2] .shop-card,
body[data-v2] .stack-card {
 border-radius: 16px;
 transition: border-color 0.22s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
body[data-v2] a.card:hover,
body[data-v2] a.shop-card:hover,
body[data-v2] a.stack-card:hover {
 transform: translateY(-2px);
 border-color: rgba(224, 27, 27, 0.45);
 box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] body[data-v2] a.card:hover,
html[data-theme="light"] body[data-v2] a.shop-card:hover {
 box-shadow: 0 12px 30px rgba(20, 18, 12, 0.14);
}
@media (prefers-reduced-motion: reduce) {
 body[data-v2] .card,
 body[data-v2] .shop-card,
 body[data-v2] a.card:hover,
 body[data-v2] a.shop-card:hover {
  transition: none;
  transform: none;
 }
}

/* Media edge-to-edge in kaarten (flagship-taal): foto raakt de
 kaartranden, hairline eronder, content-ritme eronder strak. */
body[data-v2] .card > .card__media:first-child,
body[data-v2] a.card .card__media {
 border-radius: 0;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] body[data-v2] a.card .card__media {
 border-bottom-color: rgba(10, 10, 12, 0.08);
}

/* === 3. Badge/chip-discipline ================================ */
/* Max visuele lagen op een kaart: 1 status-badge (op de foto,
 linksboven) + 1 inhoudelijke chip (onder, in content). Alles in
 twee vaste vormen: vivid pill (status) en stille chip (meta). */
body[data-v2] .badge,
body[data-v2] .card__badge,
body[data-v2] [class*="badge--"] {
 font-size: 10.5px;
 letter-spacing: 0.06em;
 padding: 4px 9px;
 border-radius: 999px;
 line-height: 1.2;
}
body[data-v2] .chip,
body[data-v2] [class*="__chip"] {
 font-size: 11px;
 padding: 3px 9px;
 border-radius: 999px;
 line-height: 1.3;
}

/* === 4. CTA-hiërarchie ======================================= */
/* Eén primaire knop per zichtveld; secundair altijd visueel stiller. */
body[data-v2] .btn--primary {
 font-weight: 700;
 letter-spacing: 0.01em;
}
body[data-v2] .btn--secondary,
body[data-v2] .btn--ghost {
 font-weight: 600;
}
body[data-v2] .section .btn + .btn {
 margin-inline-start: 0; /* gaps regelen via flex-gap, niet via margins */
}

/* === 5. Light-mode vangrails ================================= */
html[data-theme="light"] body[data-v2] .section--surface {
 border-block: 1px solid rgba(10, 10, 12, 0.06);
}
html[data-theme="light"] body[data-v2] .card,
html[data-theme="light"] body[data-v2] .shop-card {
 border-color: rgba(10, 10, 12, 0.12);
}

/* === 6. Grid-veiligheid (memory: altijd minmax(0,1fr)) ======= */
body[data-v2] .grid,
body[data-v2] [class*="grid-"] {
 min-width: 0;
}
body[data-v2] .grid > * {
 min-width: 0;
}

/* =============================================================
 COHESIE-LAAG (2026-06-06) — één premium gevoel over álle V2-
 previews: consistent ritme, motion, focus, selectie, scrollbar.
 ============================================================= */

/* Eén selectie-kleur sitewide (klein detail, groot premium-gevoel) */
body[data-v2] ::selection { background: rgba(184,37,47,0.28); color: inherit; }

/* Verfijnde, merkgekleurde dunne scrollbar overal */
body[data-v2] { scrollbar-width: thin; scrollbar-color: rgba(184,37,47,0.45) transparent; }
body[data-v2] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-v2] ::-webkit-scrollbar-thumb { background: rgba(184,37,47,0.40); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
body[data-v2] ::-webkit-scrollbar-thumb:hover { background: rgba(184,37,47,0.62); background-clip: padding-box; }

/* Universele zachte scroll-reveal voor secties (één bewegingstaal).
 Alleen wanneer beweging gewenst is; reduced-motion = direct zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
 body[data-v2] main > section,
 body[data-v2] .v2-tabs,
 body[data-v2] .v2-bottom {
 animation: v2sectionIn .6s cubic-bezier(.2,.7,.2,1) both;
 }
}
@keyframes v2sectionIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Consistente, rustige knop-interactie sitewide */
body[data-v2] .btn {
 transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, background .2s ease, border-color .2s ease;
}
body[data-v2] .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(184,37,47,0.28); }
body[data-v2] .btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { body[data-v2] .btn:hover { transform: none; } }

/* Eén focus-taal: zachte ronde accent-ring voor toetsenbord */
body[data-v2] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
 outline: 2px solid var(--color-accent, #b8252f); outline-offset: 3px; border-radius: 10px;
}

/* Sectiekop-ritme harmoniseren: eyebrow → titel → lead consistente
 verticale maat over alle families */
body[data-v2] .section__eyebrow { margin-bottom: 8px; }
body[data-v2] .section__title { margin-bottom: 10px; }
body[data-v2] .section__lead { margin-top: 0; }

/* Beeld-rand-discipline: elk product/media-blok dezelfde zachte radius */
body[data-v2] :is(.card__media, [class*="media"]) { border-radius: 14px; }
body[data-v2] :is(#shop-grid, #category-grid, .category-top-picks) .card__media { border-radius: 0; }

/* Subtiele bovenrand-gloed op secties met --surface (diepte zonder ruis) */
html:not([data-theme="light"]) body[data-v2] .section--surface {
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* =============================================================
 HEADER · NAVI-DROPDOWN · FOOTER (2026-06-07) — kalmer & premium
 Gedeeld over alle V2-previews. Alleen presentatie.
 ============================================================= */

/* --- HEADER: "Afrekenen" rustiger (geen knal-rood slab) ------ */
body[data-v2] .site-header__actions .btn--primary,
body[data-v2] .site-header .btn--primary[href*="pay"] {
 background: transparent !important;
 color: var(--color-accent-text, #ff6b6b) !important;
 border: 1px solid rgba(184,37,47,0.5) !important;
 box-shadow: none !important;
 font-weight: 600 !important;
}
body[data-v2] .site-header__actions .btn--primary:hover {
 background: rgba(184,37,47,0.12) !important;
 border-color: rgba(184,37,47,0.8) !important;
}
/* icoon-knoppen in de header consistente, rustige hit-stijl */
body[data-v2] .site-header :is(.nav-search__trigger, .nav-cart__trigger, .nav-account__trigger, .togo-theme-toggle, .nav-lang__trigger) {
 transition: color .18s ease, background .18s ease;
}

/* --- NAVI-DROPDOWN: tegels met categorie-accent + hover ------ */
body[data-v2] .nav-shop__panel .shop-card,
body[data-v2] [class*="nav-shop"] .shop-card {
 border-radius: 12px;
 transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background .2s ease;
 position: relative;
}
body[data-v2] .nav-shop__panel .shop-card:hover {
 transform: translateY(-2px);
 border-color: rgba(224,27,27,0.45);
}
body[data-v2] .nav-shop__panel .shop-card:not(.shop-card--primary)::after {
 content: "→"; position: absolute; top: 12px; right: 14px;
 color: var(--color-accent-text, #ff6b6b); opacity: 0; transform: translateX(-4px);
 transition: opacity .2s ease, transform .2s ease; font-size: 13px;
}
body[data-v2] .nav-shop__panel .shop-card:hover::after { opacity: 1; transform: none; }
/* "Alle compounds" → kalme link i.p.v. zwaar rood slab */
body[data-v2] .nav-shop__panel .shop-card--primary {
 background: transparent !important;
 border: 1px solid rgba(184,37,47,0.4) !important;
}
body[data-v2] .nav-shop__panel .shop-card--primary .shop-card__label { color: var(--color-accent-text, #ff6b6b) !important; }
body[data-v2] .nav-shop__panel .shop-card--primary:hover { background: rgba(184,37,47,0.10) !important; }

/* --- FOOTER: 7 banden → 3 rustige zones --------------------- */
/* (1) dubbele statregel weg — zegt hetzelfde als de trust-strip */
body[data-v2] .footer-stats { display: none !important; }
/* (2) "Page last updated" weg uit klant-footer */
body[data-v2] .footer-updated,
body[data-v2] .site-footer__updated,
body[data-v2] [class*="last-updated"] { display: none !important; }
/* (3) betaal-chips uniform: egale neutrale stijl (geen iDEAL-rood/Mollie-groen) */
body[data-v2] .footer-payment__method {
 background: rgba(255,255,255,0.04) !important;
 border: 1px solid var(--color-border, rgba(255,255,255,0.14)) !important;
 color: var(--color-text-muted, #c8c8cf) !important;
 box-shadow: none !important; font-weight: 600 !important;
}
body[data-v2] .footer-payment__method * { color: inherit !important; fill: currentColor !important; }
html[data-theme="light"] body[data-v2] .footer-payment__method {
 background: rgba(10,10,12,0.03) !important; border-color: rgba(10,10,12,0.14) !important; color: #5a5a60 !important;
}
/* (4) rustiger verticaal ritme tussen de footer-banden */
body[data-v2] .site-footer__grid { padding-block: clamp(28px, 4vw, 48px); }
body[data-v2] .footer-trust,
body[data-v2] .footer-payment { padding-block: 16px; }
body[data-v2] .site-footer__bottom { padding-block: 22px; }
/* footer-links nooit mid-woord breken ("Cookievoorkeure n") */
body[data-v2] .site-footer a { white-space: nowrap; hyphens: none; }
@media (max-width: 600px) { body[data-v2] .site-footer a { white-space: normal; } }

/* =============================================================
 COMPLIANCE-STRIP (optie A) — research-use bovenaan verkoop-
 pagina's, kalm geframed (niet alarmerend). Door JS geïnjecteerd
 boven het product-grid op shop/categorie.
 ============================================================= */
body[data-v2] .v2-compliance {
 display: flex; align-items: center; gap: 10px;
 margin: 0 0 16px; padding: 10px 14px;
 border: 1px solid rgba(184,37,47,0.28); border-radius: 10px;
 background: rgba(184,37,47,0.06);
 font-size: 12.5px; line-height: 1.4; color: var(--color-text-soft, #c8c8cf);
}
html[data-theme="light"] body[data-v2] .v2-compliance {
 background: rgba(184,37,47,0.04); color: #44403c;
}
body[data-v2] .v2-compliance__icon {
 flex: 0 0 auto; color: var(--color-accent, #e01b1b);
 display: inline-flex;
}
body[data-v2] .v2-compliance strong { color: var(--color-text, #fff); font-weight: 700; }
html[data-theme="light"] body[data-v2] .v2-compliance strong { color: #1a1a20; }
@media (max-width: 480px) { body[data-v2] .v2-compliance { font-size: 11.5px; align-items: flex-start; } }

/* full-width vangrail: nooit als grid-cel in de sidebar belanden */
body[data-v2] .v2-compliance { grid-column: 1 / -1; width: 100%; }

/* Winkelwagen-voorraadbadge leesbaar in light mode (groen-op-groen fix) */
html[data-theme="light"] body[data-v2] .cart-line .togo-lead--in-stock,
html[data-theme="light"] body[data-v2] .cart-line .togo-lead--in-stock * {
 color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}