/* v2-chrome.css — sitewide header/footer/dropdown-consistentie (data-v2).
   Alleen identieke chrome-componenten; geen card/section-layout. */

/* selectie + scrollbar + focus (veilig overal) */
body[data-v2] ::selection { background: rgba(184,37,47,0.28); color: inherit; }
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] :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--color-accent,#b8252f); outline-offset: 3px; border-radius: 10px; }

/* =============================================================
 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; } }


/* Winkelwagen-voorraadbadge leesbaar in light mode: de in-stock pill heeft
   een groene achtergrond (#047857), maar de tekst was óók donkergroen =
   groen-op-groen. Witte tekst (alleen light) maakt het leesbaar. */
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;
}