/*
 * Online Hardware Shop — huisstijl (navy/blauw/oranje, Rajdhani + Open Sans)
 * Contrast volgens WCAG 2.2 AA: tekst op oranje is navy (7.1:1), oranje tekst
 * op wit gebruikt --accent-text (5.2:1), prijzen --price (5.4:1).
 */

/* ---------- Fonts (zelf gehost: geen Google-request, AVG-proof) ---------- */
@font-face {
    font-family: "Rajdhani"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonts/rajdhani-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonts/rajdhani-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* variabel font: één bestand voor 400–600 */
    font-family: "Open Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url("/fonts/open-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallback met dezelfde maten als het webfont (berekend met fontTools t.o.v. Arial/Liberation Sans): zolang het
   webfont laadt staat de tekst al op de juiste plek en verspringt er niets bij het wisselen (CLS). */
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 106.02%; ascent-override: 100.81%; descent-override: 27.63%; line-gap-override: 0%; }
@font-face { font-family: "Rajdhani Fallback"; src: local("Arial Bold"), local("Arial"), local("Liberation Sans Bold"), local("Liberation Sans"); font-weight: 600 700; size-adjust: 87.09%; ascent-override: 106.79%; descent-override: 39.73%; line-gap-override: 0%; }

:root {
    --navy: #081124;
    --navy-2: #141c2e;
    --blue: #083AA9;
    --blue-dark: #03246C;
    --accent: #FF7715;        /* vlakken/knoppen (met navy tekst) */
    --accent-hover: #FF8A33;
    --accent-text: #C2410C;   /* oranje als tekstkleur op wit */
    --price: #1A7A43;
    --text: #4F5560;          /* 7.4:1 op wit */
    --text-soft: #5E636D;     /* 6.0:1 op wit, voor kleine meta-tekst */
    --light: #F4F6FB;
    --border: #E3E5EA;
    --muted-on-dark: #B1B7C6;
    --white: #fff;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(8,17,36,.06), 0 8px 24px rgba(8,17,36,.06);
    --shadow-lg: 0 18px 48px rgba(8,17,36,.16);
    --container: 1400px;
    --gutter: clamp(16px, 3vw, 24px);
    --font-head: "Rajdhani", "Rajdhani Fallback", "Arial Narrow", "Roboto Condensed", sans-serif;
    --font-body: "Open Sans", "Open Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Ruimte (2026-10-24, eigenaar: "paddings/margins zijn niet altijd even consistent"): één schaal voor alle sites en
       thema's. Marges, paddings en gaps komen uit deze stappen; losse px-waarden alleen voor details binnen een component
       (chips, badges, 1–3px correcties). */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    /* Ritme: secties, stapels (label → kop → intro → inhoud), kaarten en rasters */
    --section-y: clamp(40px, 6vw, 72px);     /* .section */
    --section-y-sm: clamp(32px, 5vw, 56px);  /* blokken onder elkaar op product-/artikelpagina's */
    --page-top: var(--space-6);              /* inhoud direct onder de kop (kruimelpad) */
    --stack-label: var(--space-2);           /* label → kop */
    --stack-lead: var(--space-2);            /* kop → intro eronder */
    --stack-head: var(--space-5);            /* kop(blok) → inhoud */
    --stack-block: var(--space-7);           /* tussen blokken binnen een sectie */
    --card-pad: var(--space-4);
    --card-pad-lg: var(--space-5);
    --grid-gap: var(--space-3);              /* kaarten/tegels in een raster */
    --grid-gap-lg: var(--space-5);           /* grote kaarten (artikelen) */
    color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
    margin: 0; background: var(--white); color: var(--text);
    font-family: var(--font-body); font-size: 15px; line-height: 1.65;
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
iframe { border: 0; } /* site-core v1.50 haalt style= van iframes in redactie-inhoud weg (embeds hadden style="border:0") */
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
    font-family: var(--font-head); font-weight: 700; color: var(--navy);
    line-height: 1.05; margin: 0 0 .5em; text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 64px); }
h2 { font-size: clamp(28px, 3vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
/* Kop → inhoud overal even ver (was .5em: 14px op mobiel, 21px op desktop) */
h2 { margin-bottom: var(--stack-head); }
::selection { background: var(--accent); color: var(--navy); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toegankelijkheid: zichtbare focus, skip-link */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm);
    text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Knoppen ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 10px 22px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--accent); color: var(--navy);
    font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.1;
    text-decoration: none; cursor: pointer; text-align: center;
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover { background: var(--accent-hover); box-shadow: 0 6px 16px rgba(255,119,21,.28); } }
.btn:active { transform: translateY(1px); }
.btn--navy { background: var(--navy); color: var(--white); }
@media (hover: hover) { .btn--navy:hover { background: var(--blue); box-shadow: none; } }
.btn--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
@media (hover: hover) { .btn--outline:hover { background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 2px var(--navy); } }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: 15px; }
.btn--block { width: 100%; }
.chev::after { content: "›"; font-size: 1.35em; line-height: .6; margin-top: -2px; }
.ext::after { /* uitgaande link-icoon */
    content: ""; width: .8em; height: .8em; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.label {
    display: inline-block; padding: 3px 8px; border-radius: 4px;
    background: var(--accent); color: var(--navy);
    font-family: var(--font-head); font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: 2px; line-height: 1.1;
}
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border-radius: 999px;
    background: var(--light); color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.badge--green { background: #E3F4EA; color: #145C33; }
.badge--blue { background: #E5ECFA; color: var(--blue-dark); }
.badge--popular { background: #FFEBDC; color: #9A3412; } /* vaste donkere tint: contrast ≥ 4,5 op de lichte achtergrond, ook bij een eigen accentkleur */
.badge--used { background: #FFF1CC; color: #6B4200; border: 1px solid #E8C770; } /* winkel met sells_used: contrast ±7:1 */
.badge--digital { background: #E5ECFA; color: #1E3A8A; border: 1px solid #A9BEEB; } /* digitale code (2026-10-23): contrast ±9:1, los van de accentkleur */
.offer__shop .badge--used, .card__meta .badge--used, .best-item__meta .badge--used, .sticky-buy__shop .badge--used, .buybox__shop .badge--used, .offer__shop .badge--digital, .buybox__shop .badge--digital { margin-inline-start: var(--space-1); vertical-align: middle; }
.used-note { margin: -8px 0 16px; padding: 8px 10px; border-radius: var(--radius-sm); background: #FFF8E5; color: #4D3000; font-size: 13px; line-height: 1.5; }
.used-note .badge { margin-inline-end: var(--space-1); }
.used-note--band { margin: 12px 0 0; max-width: 80ch; } /* lichte kaart op de blauwe band: donkere tekst, geen tekst op blauw */

/* ---------- Topbar ---------- */
.topbar { background: var(--light); font-size: 13px; color: var(--navy); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar__usp { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.topbar__usp li { display: inline-flex; align-items: center; gap: 6px; }
.topbar__usp li::before { content: "✓"; color: var(--price); font-weight: 700; }
.lang-switch { display: flex; gap: var(--space-1); align-items: center; }
.lang-switch a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 8px; border-radius: 6px; color: inherit; }
@media (hover: hover) { .lang-switch a:hover { background: rgba(8,17,36,.06); } }
.lang-switch a[aria-current] { font-weight: 700; }
.flag { width: 18px; height: 12px; display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.flag--nl { background: linear-gradient(#AE1C28 33.3%, #fff 33.3% 66.6%, #21468B 66.6%); }
.flag--de { background: linear-gradient(#000 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); }
.flag--be { background: linear-gradient(90deg, #000 33.3%, #FDDA24 33.3% 66.6%, #EF3340 66.6%); }
.flag--lu { background: linear-gradient(#EA141D 33.3%, #fff 33.3% 66.6%, #51ADDA 66.6%); }
.flag--at { background: linear-gradient(#C8102E 33.3%, #fff 33.3% 66.6%, #C8102E 66.6%); }
.flag--fr { background: linear-gradient(90deg, #002395 33.3%, #fff 33.3% 66.6%, #ED2939 66.6%); }
.flag--ie { background: linear-gradient(90deg, #169B62 33.3%, #fff 33.3% 66.6%, #FF883E 66.6%); }
.flag--it { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #CE2B37 66.6%); }
.flag--es { background: linear-gradient(#AA151B 25%, #F1BF00 25% 75%, #AA151B 75%); }
.flag--pt { background: linear-gradient(90deg, #006600 40%, #FF0000 40%); }
.flag--fi { background: linear-gradient(90deg, transparent 30%, #003580 30% 45%, transparent 45%), linear-gradient(#fff 40%, #003580 40% 60%, #fff 60%); }
.flag--gr { background: repeating-linear-gradient(#0D5EAF 0 11.1%, #fff 11.1% 22.2%); }

/* ---------- Header (sticky) ---------- */
/* De header zelf is transparant (klikken vallen door het lege vlak heen als het menu weggeschoven is);
   zoekbalk ligt boven het categoriemenu zodat dat er (desktop) onder weg kan schuiven */
.site-header { position: sticky; top: 0; z-index: 40; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.header { position: relative; z-index: 2; background: var(--white); }
.site-header.is-stuck .catnav, .site-header.is-stuck.is-nav-hidden .header { box-shadow: 0 6px 20px rgba(8,17,36,.08); }
.header .container { display: flex; align-items: center; gap: 16px 56px; padding-block: 14px; flex-wrap: wrap; }
.header .logo { flex: none; }
.menu-btn, .menu-backdrop, .catnav__head, .catnav__foot, .catnav__expand { display: none; }
.header .logo__full img { display: block; width: 190px; height: auto; }
.search { position: relative; flex: 1; display: flex; gap: 8px; min-width: min(100%, 320px); }
.search__field { position: relative; flex: 1; min-width: 0; display: flex; }
.search input {
    width: 100%; min-height: 50px; padding: 12px 16px 12px 44px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; color: var(--navy); background: var(--light) no-repeat 14px center / 18px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E636D' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--text-soft); }
.search input:focus { outline: none; background-color: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,58,169,.15); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search .btn { min-height: 50px; padding-inline: 24px; }
/* Leegmaken: eigen knop (live-search.js, .has-clear) i.p.v. het kleine kruisje van de browser; 44px raakvlak */
.search.has-clear input { padding-right: 48px; }
.search.has-clear input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search__clear {
    position: absolute; top: 50%; right: 3px; transform: translateY(-50%); z-index: 1;
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-soft); cursor: pointer;
}
.search__clear[hidden] { display: none; }
@media (hover: hover) { .search__clear:hover { color: var(--navy); background: rgba(8,17,36,.06); } }
.search__clear:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.search__clear svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.search__submit-icon { display: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Budget naast het zoekvak (sites met cadeaus per prijsklasse, Site::giftBudgets): zelfde vorm als het zoekvak,
   eigen pijltje en de accentkleur als er een budget gekozen is */
.search__budget {
    appearance: none; -webkit-appearance: none;
    min-height: 50px; max-width: 160px; padding: 0 38px 0 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; color: var(--navy); cursor: pointer;
    background: var(--light) no-repeat right 14px center / 12px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235E636D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
@media (hover: hover) { .search__budget:hover { border-color: var(--blue); } }
.search__budget:focus { outline: none; background-color: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,58,169,.15); }
.search__budget:has(option:checked:not([value=""])) { border-color: var(--accent); background-color: var(--white); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- Categorie-menu ---------- */
.catnav { position: relative; z-index: 1; background: var(--navy); }
@media (min-width: 1181px) {
    .catnav { transition: transform .25s ease, visibility .25s; }
    .site-header.is-nav-hidden .catnav { transform: translateY(-100%); visibility: hidden; }
}
.catnav ul { list-style: none; margin: 0; padding: 0; }
.catnav__list { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 4px; margin-left: -14px !important; } /* links uitgelijnd (ook een tweede regel) met logo en inhoud */
.catnav__item { position: static; } /* mega menu hangt aan de hele balk */
.catnav__link {
    display: flex; align-items: center; gap: 8px; padding: 14px 14px;
    color: var(--white); text-decoration: none; white-space: nowrap;
    font-family: var(--font-head); font-weight: 700; font-size: 16px;
}
.catnav__link[aria-current] { color: var(--accent); }
.catnav .caret { width: 0; height: 0; border: 4.5px solid transparent; border-top-color: currentColor; margin-top: 5px; opacity: .8; }
.catnav__item:focus-within > .catnav__link { color: var(--accent); }
@media (hover: hover) { .catnav__item:hover > .catnav__link { color: var(--accent); } }
/* Mega menu (desktop): paneel over de volle breedte onder de balk, subcategorieën in kolommen met het derde niveau eronder.
   Kleine vertraging bij openen zodat het niet flitst als je met de muis over de balk beweegt; de rest van de pagina wordt gedimd. */
.catnav .sub {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: var(--white); border-top: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(8,17,36,.18), 0 0 0 100vmax rgba(8,17,36,.35); clip-path: inset(0 -100vmax -100vmax -100vmax);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .15s ease, visibility 0s linear .15s;
}
/* Zonder JS: openen bij hover. Met JS (.js-mega) bepaalt site.js wanneer (hover-intentie: niet wisselen terwijl je
   met de muis naar het paneel beweegt, ook als de balk twee regels is). Toetsenbord: altijd via focus. */
.catnav:not(.js-mega) .catnav__item:hover > .sub, .catnav__item:focus-within > .sub, .catnav__item.is-active > .sub {
    visibility: visible; opacity: 1; pointer-events: auto;
    transition: opacity .15s ease .12s, visibility 0s linear .12s;
}
.catnav.js-mega .catnav__item.is-active > .sub { transition: opacity .12s ease, visibility 0s; }
/* Escape sluit het paneel terwijl de focus op de hoofdlink blijft (anders hield :focus-within het open) */
@media (min-width: 1181px) { .catnav.js-mega .catnav__item.is-dismissed > .sub { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } }
@media (min-width: 1181px) { .catnav__item.is-active > .catnav__link { color: var(--accent); } }
/* "Meer": categorieën die niet op één regel passen (site.js) */
.catnav__more { border: 0; background: none; cursor: pointer; line-height: inherit; }
.catnav__item--more .mega__group-title { margin-bottom: 2px; }
@media (min-width: 1181px) { .catnav__item.is-overflow { display: none; } }
.mega__inner { max-width: var(--container); margin: 0 auto; padding: 24px var(--gutter) 28px; max-height: calc(100vh - 180px); overflow-y: auto; overscroll-behavior: contain; }
.mega__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.catnav .mega a { display: block; padding: 4px 0; border-radius: 0; color: var(--navy); text-decoration: none; font-size: 14px; }
@media (hover: hover) { .catnav .mega a:hover { background: none; color: var(--accent-text); text-decoration: underline; } }
.catnav .mega .mega__title { padding: 0; font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 24px; }
.catnav .mega .mega__all { padding: 0; font-weight: 600; color: var(--accent-text); }
.mega__cols { columns: 4 200px; column-gap: 40px; }
.mega__group { break-inside: avoid; margin-bottom: 20px; }
.catnav .mega .mega__group-title { font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 16px; }
.mega__links { margin-top: 2px !important; }
.catnav .mega__links a { color: var(--text); padding: 3px 0; }

/* ---------- Live search dropdown ---------- */
.suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
}
.suggest__head { padding: 12px 16px 4px; font-family: var(--font-head); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-soft); }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--navy); text-decoration: none; }
.suggest__item.is-active { background: var(--light); }
@media (hover: hover) { .suggest__item:hover { background: var(--light); } }
.suggest__item.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.suggest__item--brand .suggest__title { font-weight: 600; }
.suggest__thumb { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; }
.suggest__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.suggest__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__meta { font-size: 12px; color: var(--text-soft); }
.suggest__thumb--article { border-radius: var(--radius-sm); overflow: hidden; background: var(--light); }
.suggest__thumb--article img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.suggest__thumb--voucher { border-radius: 50%; background: #FFF4EB; color: var(--accent-text); font-family: var(--font-head); font-weight: 800; font-size: 20px; }
.suggest__badge { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--light); color: var(--navy); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Zoekresultatenpagina: koopgidsen/blogs en kortingscodes onder de producten */
/* Rasterkolom van de lijst mag smaller dan zijn inhoud: een .rail (ProductRows op /deals) liep anders breder dan het scherm */
.results { min-width: 0; }
.search-extra { margin-top: var(--space-8); }
.search-extra h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 var(--stack-head); }
.search-vouchers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.search-vouchers a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: var(--navy); text-decoration: none; }
@media (hover: hover) { .search-vouchers a:hover { border-color: var(--blue); } }
.search-vouchers .suggest__thumb { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.search-vouchers__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.search-vouchers__body span { font-size: 13px; color: var(--text-soft); }
.suggest__price { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--price); white-space: nowrap; }
.suggest__all {
    justify-content: center; border-top: 1px solid var(--border); margin-top: 6px; padding: 14px 16px;
    font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--accent-text);
    position: sticky; bottom: 0; background: var(--white);
}
.suggest__none { padding: 16px; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(90deg, #15171b 0%, #1d1f23 45%, #343434 100%); }
.hero::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(700px, 58%);
    background: url("/images/hero-carts.jpg") left center / cover no-repeat;
    background-image: image-set(url("/images/hero-carts.webp") type("image/webp"), url("/images/hero-carts.jpg") type("image/jpeg"));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
            mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.hero .container { position: relative; padding-block: clamp(48px, 8vw, 104px); }
.hero__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2vw, 26px); color: var(--accent); margin-bottom: 12px; }
.hero h1 { color: var(--white); max-width: 20ch; margin-bottom: 20px; }
.hero__text { max-width: 52ch; font-size: 17px; color: #D9DCE3; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn--outline { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
@media (hover: hover) { .hero__actions .btn--outline:hover { background: var(--white); color: var(--navy); } }
.hero__stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 36px 0 0; padding: 0; list-style: none; }
.hero__stats strong { display: block; font-family: var(--font-head); font-size: 30px; line-height: 1.15; color: var(--white); }
.hero__stats li > span { font-size: 13px; color: var(--muted-on-dark); }

/* ---------- Secties ---------- */
.section { padding-block: var(--section-y); }
.section--light { background: var(--light); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--stack-head); }
.section__head h2 { margin: 0; }
/* Stapel: label → kop → intro, met en zonder .section__head gelijk */
:is(.label, .ds-label, .sg-label) + h2 { margin-top: var(--stack-label); }
h2:has(+ :is(.ds-lead, .sg-lead)) { margin-bottom: 0; }
.section__link { color: var(--accent-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .section__link:hover { text-decoration: underline; } }

/* Categorietegels */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--grid-gap); }
.tile {
    display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5);
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    text-decoration: none; color: var(--navy); transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover: hover) { .tile:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); } }
.tile__name { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.1; }
.tile__count { font-size: 13px; color: var(--text-soft); }
.tile__subs { margin-top: var(--space-2); font-size: 13px; color: var(--text); line-height: 1.5; }

/* Merken */
.brand-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.brand-cloud a {
    display: inline-flex; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 999px;
    color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; background: var(--white);
}
@media (hover: hover) { .brand-cloud a:hover { border-color: var(--navy); } }

/* Hoe werkt het */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 24px 24px 24px 76px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); counter-increment: step; }
.steps li::before {
    content: counter(step); position: absolute; left: 24px; top: 22px; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: var(--accent); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 20px;
}
.steps h3 { font-size: 20px; margin-bottom: var(--space-1); }
.steps p { margin: 0; font-size: 14px; }
.disclosure { margin-top: var(--space-5); font-size: 13px; color: var(--text-soft); max-width: 90ch; }

/* ---------- Listing-kop (categorie/merk/zoeken) ---------- */
/* Merkthema's zetten --band-bg (config/sites.php); OHS: navy met dezelfde gloed als de homepagekop (Prijsprint) */
.band { background: var(--band-bg, radial-gradient(760px 340px at 88% 0%, #102049 0%, rgba(16, 32, 73, 0) 70%), var(--navy)); color: var(--white); }
.band .container { padding-block: 28px 32px; }
.band h1 { color: var(--white); font-size: clamp(32px, 4vw, 52px); margin: 10px 0 8px; }
.band__intro { max-width: 80ch; color: #E3E9F7; margin: 0; }
.band__summary { color: #E3E9F7; margin: 8px 0 0; font-size: 14px; }

.crumbs { font-size: 13px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { text-decoration: underline; } }
.band .crumbs { color: #DDE4F5; }
.crumbs--dark { color: var(--text-soft); }

.subcats { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; padding: 0; list-style: none; }
.subcats a {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255,255,255,.12); color: var(--white); text-decoration: none; font-size: 14px; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
@media (hover: hover) { .subcats a:hover { background: rgba(255,255,255,.22); } }
.subcats a[aria-current] { background: var(--white); color: var(--navy); }
.subcats small { opacity: .75; font-weight: 400; }

/* ---------- Listing: filters + resultaten ---------- */
.listing-wrap { background: var(--light); }
.listing { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-6); padding-block: 24px 56px; }
.filters { align-self: start; position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border-radius: var(--radius); padding: 18px 18px 8px; border: 1px solid var(--border); }
.filters h2 { font-size: 22px; margin: 0; }
.filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.filters__close { display: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--navy); background: none; border: 0; padding: var(--space-1) var(--space-2); }
.filter-group { border-top: 1px solid var(--border); padding: 14px 0; }
.filter-group h3 { font-size: 17px; margin: 0 0 var(--space-2); }
.facet { list-style: none; margin: 0; padding: 0; }
.facet label { display: flex; align-items: center; gap: 10px; padding: var(--space-1) 0; min-height: 32px; cursor: pointer; color: var(--navy); font-size: 14px; }
@media (hover: hover) { .facet label:hover .facet__label { color: var(--accent-text); } }
.facet label.is-empty { opacity: .5; }
.facet input { accent-color: var(--blue); width: 18px; height: 18px; margin: 0; flex: none; }
.facet__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet__count { font-size: 12px; color: var(--text-soft); }
.more summary { cursor: pointer; color: var(--accent-text); font-weight: 600; font-size: 14px; padding: 6px 0 0; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { display: none; }
.price-range { display: flex; align-items: center; gap: var(--space-2); }
.price-range label { flex: 1; }
.price-range input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; color: var(--navy); }
.filter-apply { width: 100%; margin: var(--space-1) 0 var(--space-3); }

.swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.swatch--black { background: #111; } .swatch--white { background: #fff; } .swatch--grey { background: #8a8f98; }
.swatch--silver { background: linear-gradient(135deg, #eee, #b5b8bd); } .swatch--blue { background: #2463d1; }
.swatch--red { background: #d42a2a; } .swatch--green { background: #2f9e4f; } .swatch--yellow { background: #f2c94c; }
.swatch--orange { background: #FF7715; } .swatch--pink { background: #f28dbd; } .swatch--purple { background: #8a4fd1; }
.swatch--brown { background: #7a4b2a; } .swatch--beige { background: #e6d5b8; } .swatch--gold { background: linear-gradient(135deg, #f6e27a, #c99a2e); }
.swatch--transparent { background: repeating-linear-gradient(45deg, #fff 0 3px, #e3e5ea 3px 6px); }
.swatch--multicolor { background: conic-gradient(#d42a2a, #f2c94c, #2f9e4f, #2463d1, #8a4fd1, #d42a2a); }

.toolbar { display: flex; align-items: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar__count { flex: 1; color: var(--navy); font-weight: 600; }
.sort { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 14px; }
.sort select { min-height: 42px; padding: 8px 36px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; color: var(--navy); background-color: var(--white); }
.filter-open { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: 999px;
    background: var(--white); border: 1px solid var(--border); color: var(--navy); text-decoration: none; font-size: 13px; font-weight: 600;
}
@media (hover: hover) { .chip:hover { border-color: var(--navy); } }
.chip--clear { background: transparent; border-color: transparent; color: var(--accent-text); }
.empty { padding: var(--space-9) var(--space-4); text-align: center; background: var(--white); border-radius: var(--radius); }

/* ---------- Productkaarten ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--grid-gap); }
.card {
    position: relative; display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-3); transition: box-shadow .2s, border-color .2s;
}
@media (hover: hover) { .card:hover { box-shadow: var(--shadow); border-color: #d4d8e0; } }
.card__img { display: block; aspect-ratio: 1; min-height: 0; overflow: hidden; /* Chrome: anders rekt de afbeelding het vak op in een flex-kaart */ padding: var(--space-2); border-radius: var(--radius-sm); background: var(--white); }
.card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
@media (hover: hover) { .card:hover .card__img img { transform: scale(1.03); } }
.card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.card__body { padding: 10px 2px 0; display: flex; flex-direction: column; flex: 1; }
.card__brand { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.card__title {
    margin: 2px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--navy); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.4em);
}
/* hele kaart klikbaar, knoppen blijven los klikbaar */
.card__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
@media (hover: hover) { .card__title:hover { color: var(--blue); } }
.card__price { margin-top: auto; font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1; color: var(--price); }
.card__price small { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-soft); margin-right: var(--space-1); }
.card__ship { margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--text-soft); overflow-wrap: anywhere; }
.card__ship--free { color: var(--price); font-weight: 600; } /* 5.4:1 op wit */
.card__meta { margin: var(--space-1) 0 var(--space-3); font-size: 13px; color: var(--text-soft); }
.card .btn { position: relative; z-index: 1; width: 100%; font-size: 15px; min-height: 42px; padding: var(--space-2) var(--space-3); }

/* ---------- Paginering (pagination::bootstrap-4) ---------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: var(--space-7) 0 0; }
.pagination li > span, .pagination li > a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white);
    color: var(--navy); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 17px;
}
@media (hover: hover) { .pagination li > a:hover { border-color: var(--navy); } }
.pagination .active > span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination .disabled > span { color: var(--text-soft); opacity: .6; }

/* ---------- Productpagina ---------- */
.product { padding-block: var(--page-top) 0; }
.product .crumbs { margin-bottom: var(--space-5); }
.product__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.product__gallery { position: sticky; top: 96px; }
.product__media {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
}
.product__media img { max-height: 100%; width: auto; object-fit: contain; }
/* Fotogalerij: horizontale slider (vegen/scrollen werkt zonder JS), pijlen + miniaturen via site.js */
.gallery__track { justify-content: flex-start; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gallery__slide { position: relative; flex: 0 0 100%; align-self: stretch; min-width: 0; overflow: hidden; scroll-snap-align: center; }
/* Foto absoluut in het vierkante vak + object-fit: percentage-hoogtes in dit flex/grid-vak werken niet betrouwbaar
   (staande foto's liepen er in Chrome en Firefox onder/boven uit) */
.gallery__slide img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); max-width: none; max-height: none; object-fit: contain; }
/* Zoom met de muis (site.js): vergroten op de plek van de cursor; alleen als de foto scherp genoeg is (is-zoomable) */
.gallery__slide.is-zoomable { cursor: zoom-in; }
.gallery__slide img { transition: transform .18s ease-out; will-change: auto; }
.gallery__slide.is-zooming img { transform: scale(var(--zoom, 2)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .gallery__slide img { transition: none; } }
.gallery__nav { position: absolute; top: calc(50% - 22px - 40px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--white); color: var(--navy); border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer; opacity: .9; }
.product__gallery:not(:has(.gallery__thumbs)) .gallery__nav { top: calc(50% - 22px); }
.gallery__nav::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(135deg); margin-left: var(--space-1); }
.gallery__nav--next::before { transform: rotate(-45deg); margin: 0 var(--space-1) 0 0; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
@media (hover: hover) { .gallery__nav:hover { color: var(--blue); opacity: 1; } }
.gallery__nav[hidden] { display: none; }
.gallery__count { position: absolute; top: 12px; right: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(8,17,36,.65); color: #fff; font-size: 12px; font-weight: 600; }
.gallery__thumbs { display: flex; gap: var(--space-2); margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--space-1); }
.gallery__thumb { flex: none; width: 64px; height: 64px; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__thumb[aria-selected="true"] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.gallery__thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.product__gallery { isolation: isolate; }
.product__gallery > .gallery__nav, .product__gallery > .gallery__count { z-index: 2; }
@media (hover: none) { .gallery__nav { width: 36px; height: 36px; opacity: .8; } .gallery__nav--prev { left: 6px; } .gallery__nav--next { right: 6px; } } /* touch: vegen kan, pijlen tonen dat er meer foto's zijn */
.product__brand { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); text-decoration: none; }
@media (hover: hover) { .product__brand:hover { color: var(--accent-text); } }
.product h1 { font-size: clamp(28px, 3.2vw, 44px); margin: 6px 0 12px; }
/* Eigen regel per zustersite onder de titel (lang/nl/sites/*.php 'shop.product_lead', 2026-10-24) */
.product__lead { margin: -4px 0 var(--space-3); max-width: 62ch; color: var(--text-soft); }
.product__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

.buybox { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); background: var(--white); box-shadow: var(--shadow); }
.buybox__label { font-size: 13px; color: var(--text-soft); margin: 0 0 2px; }
.buybox__price { font-family: var(--font-head); font-weight: 700; font-size: clamp(36px, 4vw, 48px); line-height: 1; color: var(--navy); margin: 0 0 var(--space-1); }
.buybox__shop { margin: 0 0 var(--space-4); font-size: 14px; }
.buybox__note { margin: 10px 0 0; font-size: 12px; color: var(--text-soft); }

.offers { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.buybox__last { margin: var(--space-1) 0 var(--space-3); color: var(--text-soft); font-size: 14px; }
.buybox__last a { margin-inline-start: var(--space-1); }
/* Niet leverbaar: laatst bekende prijs per winkel (geen links) */
.last-seen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.last-seen li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
.last-seen li + li { border-top: 1px solid var(--border); }
.last-seen strong { flex: 1 1 140px; min-width: 0; }
.last-seen__price { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.last-seen small { flex-basis: 100%; color: var(--text-soft); }
@media (min-width: 768px) { .last-seen small { flex-basis: auto; } }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--white); }
.offer + .offer { border-top: 1px solid var(--border); }
.offer--best { background: #F2FAF5; }
.offer__shop { font-weight: 600; color: var(--navy); }
.offer__meta { display: block; font-size: 12px; font-weight: 400; color: var(--text-soft); }
.offer__price { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--navy); white-space: nowrap; }
.offer--best .offer__price { color: var(--price); }
.offers__note { margin: var(--space-2) 0 0; font-size: 12px; color: var(--text-soft); }
.offers-title { font-size: 24px; margin: var(--space-7) 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.offer__price--unknown { color: var(--text-soft); text-align: right; line-height: 1.1; }
.offer__unknown { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; }
.offers-title small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-soft); }

.specs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: var(--space-5) 0 0; font-size: 14px; }
.specs dt { font-weight: 600; color: var(--navy); }
.specs dd { margin: 0; }
.specs a { color: var(--blue); }

.prose { max-width: 75ch; }
/* Tussenkoppen in lopende tekst (hubs, juridische pagina's): ruimte erboven, anders plakken ze aan een tabel of alinea */
.prose > h2:not(:first-child) { margin-top: var(--stack-block); }
.prose p { white-space: pre-line; }
/* Scheidingslijn precies tussen twee blokken (was: onderpadding + bovenmarge = dubbele ruimte boven de lijn, enkele eronder) */
.product-section { padding-block: var(--section-y-sm) 0; border-top: 1px solid var(--border); margin-top: var(--section-y-sm); }
.product-section:last-child { padding-bottom: var(--section-y-sm); }
.product-section h2 { font-size: clamp(26px, 2.6vw, 34px); }

/* Horizontale rij (gerelateerde producten), scroll-snap */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((100% - 4 * 12px) / 5); } }
.rail-wrap { position: relative; }
.rail-btn { position: absolute; top: calc(50% - 26px); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--white); color: var(--navy); box-shadow: var(--shadow-lg); cursor: pointer; display: grid; place-items: center; }
.rail-btn::before { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(135deg); margin-left: var(--space-1); }
.rail-btn--next::before { transform: rotate(-45deg); margin: 0 var(--space-1) 0 0; }
.rail-btn--prev { left: -14px; }
.rail-btn--next { right: -14px; }
@media (hover: hover) { .rail-btn:hover { color: var(--blue); } }
.rail-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rail-btn[hidden] { display: none; }
@media (hover: none) { .rail-btn { display: none; } } /* touch: gewoon vegen */

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: var(--muted-on-dark); margin-top: 0; }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); padding-block: 56px; }
.footer h2 { color: var(--white); font-size: 18px; margin: 0 0 var(--space-4); }
.footer p { font-size: 14px; max-width: 46ch; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 var(--space-2); }
.footer a { text-decoration: none; }
@media (hover: hover) { .footer a:hover { color: var(--accent); } }
.footer .logo img { width: 190px; height: auto; display: block; margin: var(--space-2) 0 var(--space-5); }
/* Footer: landen/talen onder elkaar (in de topbalk staan ze naast elkaar) */
.footer .lang-switch { flex-direction: column; align-items: flex-start; gap: 2px; margin-left: -8px; }
@media (hover: hover) { .footer .lang-switch a:hover { background: rgba(255,255,255,.08); } }
.footer__disclosure { font-size: 12px; color: var(--muted-on-dark); border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--space-5); }
.footer__disclosure p { margin: 0; max-width: none; }
.footer__disclosure p + p { margin-top: var(--space-2); }
.copyright { background: var(--navy-2); font-size: 13px; }
.copyright .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-block: var(--space-5); }

/* ---------- Foutpagina ---------- */
.error-page { padding-block: clamp(56px, 10vw, 120px); text-align: center; }
.error-page__code { font-family: var(--font-head); font-weight: 700; font-size: clamp(80px, 14vw, 160px); line-height: 1; color: var(--accent); }
.error-page p { max-width: 52ch; margin-inline: auto; }
.error-page .search { max-width: 640px; margin: 24px auto 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    /* Hamburger + uitschuifmenu van rechts i.p.v. een horizontaal scrollende balk */
    .header .container { flex-wrap: nowrap; gap: 16px; }
    .search { min-width: 0; }
    /* Cadeausites (budget + verlanglijstje + account): op één regel werd het zoekvak een postzegel en schoof de knop over
       "Verlanglijstje". Daarom twee regels: logo + knoppen, daaronder zoekvak + budget + Zoeken over de volle breedte. */
    .header .container:has(.search__budget) { flex-wrap: wrap; row-gap: 10px; }
    .header .container:has(.search__budget) .logo { margin-right: auto; }
    .header .container:has(.search__budget) :is(.wish-link, .menu-btn) { order: 1; }
    .header .container:has(.search__budget) .search { order: 2; flex: 1 1 100%; }
    .menu-btn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-right: -8px; border-radius: var(--radius-sm); color: var(--navy); cursor: pointer; }
    @media (hover: hover) { .menu-btn:hover { background: var(--light); } }
    .menu-btn:focus-visible, .catnav__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
    .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; }
    .menu-btn__bars { position: relative; }
    .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
    .menu-btn__bars::before { top: -7px; }
    .menu-btn__bars::after { top: 7px; }
    .menu-toggle:checked ~ .menu-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(8,17,36,.5); }
    html:has(.menu-toggle:checked) { overflow: hidden; }
    .catnav {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(380px, 88vw);
        display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
        background: var(--white); box-shadow: var(--shadow-lg);
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
        transform: translateX(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
    }
    .menu-toggle:checked ~ .catnav { transform: none; visibility: visible; }
    .catnav__head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px;
        background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 18px;
    }
    .catnav__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; }
    @media (hover: hover) { .catnav__close:hover { background: rgba(255,255,255,.1); } }
    .catnav .container { width: 100%; margin: 0; padding: 0; }
    .catnav__list { flex-direction: column; flex-wrap: nowrap; }
    .catnav__item { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
    .catnav__list { margin-left: 0 !important; }
    .catnav__link { flex: 1; padding: 14px 20px; color: var(--navy); font-size: 16px; white-space: normal; }
    .catnav__link[aria-current] { color: var(--accent-text); }
    .catnav__item:focus-within > .catnav__link { color: var(--navy); }
    @media (hover: hover) { .catnav__item:hover > .catnav__link { color: var(--navy); } }
    .catnav .caret { display: none; }
    .catnav__expand { display: grid; place-items: center; flex: none; width: 52px; border: 0; border-left: 1px solid var(--border); background: none; color: var(--navy); cursor: pointer; }
    .catnav__expand::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
    .catnav__expand[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
    .catnav__item:hover > .sub, .catnav__item:focus-within > .sub, .catnav .sub {
        position: static; display: none; flex-basis: 100%; min-width: 0; padding: 0 12px 10px; box-shadow: none; border-radius: 0;
    }
    .catnav__item--more { display: none !important; }
    .catnav .sub, .catnav__item:hover > .sub, .catnav__item:focus-within > .sub, .catnav__item.is-active > .sub { visibility: visible; opacity: 1; pointer-events: auto; transition: none; box-shadow: none; clip-path: none; border-top: 0; }
    .catnav .catnav__item.is-open > .sub { display: block; }
    /* In het hamburgermenu: alleen de subcategorieën als lijst (het derde niveau staat op de categoriepagina) */
    .mega__inner { max-width: none; max-height: none; padding: 0; overflow: visible; }
    .mega__head, .mega__links { display: none; }
    .mega__cols { columns: auto; }
    .mega__group { margin: 0; }
    .catnav .mega .mega__group-title, .catnav .sub a { padding: 10px 12px; font-family: var(--font-body); font-weight: 400; font-size: 15px; border-radius: 6px; }
    .catnav__foot { display: block; margin-top: auto; padding: 16px 12px; border-top: 1px solid var(--border); color: var(--navy); }
    .catnav__foot .lang-switch { flex-wrap: wrap; }
    .catnav__foot:not(:has(*)) { display: none; } /* merk met één site: geen land-/taalwissel, geen lege balk */
    .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
    .listing { grid-template-columns: 1fr; padding-top: var(--space-4); }
    .filter-open { display: inline-flex; }
    .filters__close { display: block; }
    .filters {
        /* align-self: stretch, anders maakt "start" (desktop-sidebar) het vaste paneel zo hoog als de inhoud en scrollt het niet */
        position: fixed; inset: 0 auto 0 0; top: 0; align-self: stretch; width: min(360px, 90vw); max-height: none; z-index: 70; border-radius: 0 var(--radius) var(--radius) 0;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 0 0 100vmax rgba(8,17,36,.5); transform: translateX(-105%); visibility: hidden; transition: transform .25s, visibility .25s;
    }
    .filter-toggle-input:checked ~ .filters { transform: none; visibility: visible; }
    .product__top { grid-template-columns: minmax(0, 1fr); }
    .product__gallery { position: relative; top: auto; max-width: 480px; width: 100%; margin-inline: auto; }
}
@media (max-width: 767px) {
    body { font-size: 15px; }
    /* Eén regel: favicon, live zoekbalk, hamburger (taalwissel zit in het menu en de footer) */
    .topbar { display: none; }
    /* Kop in twee regels: logo + knoppen (44px raakvlak), daaronder de zoekbalk over de volle breedte. Alleen de zoekbalk
       blijft plakken: de bovenste regel (6 + 44px) schuift weg via de negatieve top, 6px lucht boven het zoekvak blijft;
       bij omhoog scrollen komt hij terug (is-scrolling-up). */
    .site-header { top: -50px; transition: top .2s ease; }
    /* Omhoog scrollen (site.js): de bovenste regel schuift weer in beeld, met logo, verlanglijst en menu */
    .site-header.is-scrolling-up { top: 0; }
    .site-header.is-stuck .header { box-shadow: 0 6px 20px rgba(8,17,36,.08); }
    .header .container { flex-wrap: wrap; column-gap: 2px; row-gap: 6px; padding-block: 6px 10px; }
    .header .logo { order: 0; flex: 1 1 0; min-width: 0; overflow: hidden; height: 44px; display: flex; align-items: center; margin-right: auto; }
    .header .logo__full img { width: clamp(132px, 40vw, 168px); }
    .header .brandmark { gap: 7px; }
    .header .brandmark__icon { width: 32px; height: 32px; }
    .header .brandmark__text { font-size: clamp(15px, 4.2vw, 19px); }
    .header .brandmark--svg svg { height: 34px; max-width: 100%; }
    .header .wish-link, .header .menu-btn { order: 1; width: 44px; height: 44px; margin: 0; padding: 0; justify-content: center; }
    .header .menu-btn { margin-right: -6px; }
    .search { order: 2; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; min-width: 0; }
    .search input { min-height: 48px; padding-block: 10px; font-size: 16px; } /* 16px: iOS zoomt niet in bij focus */
    .header .search__submit { flex: none; width: 48px; min-height: 48px; padding: 0; }
    .header .search__submit-icon { display: block; }
    .header .search__submit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Budget (cadeausites): eigen regel onder het zoekvak zodra je zoekt of als er een budget gekozen is, anders weg */
    .header .search__budget { display: none; order: 3; flex: 1 1 100%; max-width: none; min-height: 44px; padding: 0 38px 0 14px; background-position: right 14px center; }
    .header .search:focus-within .search__budget, .header .search__budget:has(option:checked:not([value=""])) { display: block; }
    .hero::before { width: 100%; opacity: .3; }
    .toolbar__count { display: none; }
    .toolbar { justify-content: space-between; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .card { padding: var(--space-2); }
    .card__price { font-size: 20px; }
    .card .btn { font-size: 14px; }
    .offer { grid-template-columns: minmax(0, 1fr) auto; }
    .offer .btn { grid-column: 1 / -1; }
    .footer .cols { grid-template-columns: 1fr; gap: 28px; }
    /* Suggesties onder het zoekvak over de volle breedte (tot en met de zoekknop: 8px + 48px); bij cadeausites onder de
       budgetregel, die zichtbaar is zolang je in het formulier bezig bent */
    .header .suggest { top: calc(100% + 6px); left: 0; right: -56px; max-height: calc(100dvh - 140px); }
    .header .search:has(.search__budget) .suggest { top: calc(100% + 58px); max-height: calc(100dvh - 192px); }
}

@media (max-width: 359px) { .header .brandmark__text { display: none; } } /* heel smal (320px): alleen het beeldmerk */

/* Mobiel: vaste "beste prijs"-balk onderaan de productpagina */
.sticky-buy { display: none; }
@media (max-width: 1024px) {
    .sticky-buy {
        display: flex; align-items: center; gap: var(--space-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--white); box-shadow: 0 -6px 20px rgba(8,17,36,.12);
        transform: translateY(110%); transition: transform .25s;
    }
    .sticky-buy.is-visible { transform: none; }
    .sticky-buy__price { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--navy); line-height: 1; }
    .sticky-buy__shop { font-size: 12px; color: var(--text-soft); }
    .sticky-buy .btn { margin-left: auto; }
    .sticky-buy__price { white-space: nowrap; }
    /* "Via Online Hardware Shop" (zustersite, 2026-10-23) is langer dan "Naar winkel": kleiner, zodat de prijs heel blijft */
    .sticky-buy .btn--via { flex: 0 1 auto; max-width: 55%; min-height: 38px; padding: 8px 14px; font-size: 15px; }
}

/* ---------- Beweging ---------- */
/* Geen cross-document view transitions: alleen Chrome deed dat, gaf "Transition was aborted"-fouten bij snel klikken
   en liet bij elke navigatie een momentopname (bv. met open menu) overvloeien. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .topbar, .site-header, .catnav, .filters, .toolbar, .footer, .sticky-buy, .pagination { display: none !important; }
}
.card__heading { margin: 0; font: inherit; }

/* ---------- Skeletons: grijze, glanzende vlakken zolang iets laadt ----------
   .is-sk: afbeelding nog niet binnen (site.js, live-search.js); [data-skeleton].is-loading: productraster tijdens filteren/sorteren/bladeren;
   .suggest__sk: live search wacht op resultaten. */
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.is-sk,
.suggest__sk-img, .suggest__sk-line,
.is-loading .card :is(.card__img, .card__brand, .card__title, .card__price, .card__meta, .btn) {
    background: linear-gradient(100deg, #ECEFF4 40%, #F7F8FB 50%, #ECEFF4 60%) 0 0 / 300% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
}
img.is-sk { color: transparent; /* geen alt-tekst door het vlak heen */ }
.is-sk { border-radius: var(--radius-sm); }
[data-skeleton].is-loading .grid { pointer-events: none; }
.is-loading .card { box-shadow: none; }
.is-loading .card :is(.card__brand, .card__title, .card__price, .card__meta, .btn) {
    color: transparent !important; border-color: transparent; box-shadow: none; border-radius: 6px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.is-loading .card .card__brand { display: inline-block; min-width: 40%; }
.is-loading .card .card__price { align-self: flex-start; min-width: 45%; }
.is-loading .card :is(.card__img img, .card__badges, .card__price small, .card__was, .card__ship, .card__compare, .card__wish) { visibility: hidden; }
.is-loading .card .card__img--empty { background-image: linear-gradient(100deg, #ECEFF4 40%, #F7F8FB 50%, #ECEFF4 60%); }
.suggest__sk { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.suggest__sk-img { width: 48px; height: 48px; flex: none; border-radius: var(--radius-sm); }
.suggest__sk-text { flex: 1; display: grid; gap: 8px; }
.suggest__sk-line { height: 12px; border-radius: 6px; }
.suggest__sk-line + .suggest__sk-line { width: 40%; }
@media (prefers-reduced-motion: reduce) {
    .is-sk, .suggest__sk-img, .suggest__sk-line, .is-loading .card :is(.card__img, .card__brand, .card__title, .card__price, .card__meta, .btn) { animation: none; }
}

/* Geen (bruikbare) productafbeelding: neutraal vlak met icoon */
.card__img--empty { background: var(--light) no-repeat center / 40%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B1B7C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 15-5-5L5 18'/%3E%3C/svg%3E"); }

@media (max-width: 767px) {
    /* Subcategorieën als één horizontaal scrollbare rij i.p.v. een halve pagina chips */
    .subcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
    .subcats::-webkit-scrollbar { display: none; }
    .subcats li { flex: none; scroll-snap-align: start; }
    .band .container { padding-block: 20px 24px; }
}

/*
 * Kopband OHS (categorie, merk, zoeken, winkels, gidsen, prijsdalers, Black Friday; 2026-10-24): dezelfde taal als de
 * homepagekop (Prijsprint, home-hero.css): navy printplaat, koperen banen in oranje, wit als tekst. Alleen .brand-ohs; de
 * zustersites houden hun eigen band (dealsite.css, shopguide.css, festive-sinterklaas.css).
 * Printplaat: één statische SVG rechtsboven (inline data-URI, ±0,6 kB gzip, geen extra verzoek: de band is vaak het LCP-element),
 * naar links uitgefaded zodat er geen lijnen achter de tekst lopen. Pulsen: drie pseudo-elementen die met alleen transform/opacity over de drie
 * koperbanen lopen (compositor, geen JS, geen repaint), na elkaar, en in de via "landen". Alleen met html.motion
 * (site-core, vóór de eerste paint; ontbreekt bij "minder beweging"), anders staat de plaat stil.
 * Contrast op #081124 (op de gloed #102049): wit 18,8 (15,9), #E3E9F7 15,5 (13,0), --muted-on-dark 9,4 (7,9),
 * oranje 7,1 (6,0); navy op oranje 7,1.
 */
.brand-ohs .band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    background: linear-gradient(var(--band-dim, transparent), var(--band-dim, transparent)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='320' viewBox='0 0 760 320' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x2='1'%3E%3Cstop offset='.08' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Cpath fill='url(%23f)' d='M0 0h760v320H0z'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath stroke='%23fff' stroke-opacity='.1' d='M760 34H595l-32 32H470M760 58H605l-32 32H380M712 162h-27l-40-40H525l-20 20H400M760 224H645l-40-40H440M760 248H635l-40-40H500M760 300H560l-24-24H330M760 12H690l-12 12H560M440 184v60M704 126h8M704 138h8M704 174h8'/%3E%3Cg fill='%23081124' stroke='%23fff' stroke-opacity='.16'%3E%3Ccircle cx='470' cy='66' r='3.5'/%3E%3Ccircle cx='380' cy='90' r='3.5'/%3E%3Ccircle cx='400' cy='142' r='3.5'/%3E%3Ccircle cx='440' cy='184' r='3.5'/%3E%3Ccircle cx='500' cy='208' r='3.5'/%3E%3Ccircle cx='330' cy='276' r='3.5'/%3E%3Ccircle cx='560' cy='24' r='3.5'/%3E%3Ccircle cx='440' cy='244' r='3.5'/%3E%3C/g%3E%3Cpath stroke='%23FF7715' stroke-opacity='.45' stroke-width='2' d='M760 46H600l-32 32H420M712 150h-22l-40-40H520l-20 20H380M760 236H640l-40-40H470'/%3E%3Cg fill='%23081124' stroke='%23FF7715' stroke-opacity='.65' stroke-width='2'%3E%3Ccircle cx='420' cy='78' r='4.5'/%3E%3Ccircle cx='380' cy='130' r='4.5'/%3E%3Ccircle cx='470' cy='196' r='4.5'/%3E%3C/g%3E%3Crect x='712' y='118' width='60' height='64' rx='4' fill='%23050B1A' stroke='%23fff' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E") right top / 760px 320px no-repeat,
        var(--band-bg, radial-gradient(760px 340px at 88% 0%, #102049 0%, rgba(16, 32, 73, 0) 70%), var(--navy));
}
.brand-ohs .band .container { padding-block: 24px 28px; }
.brand-ohs .band h1 { font-size: clamp(30px, 3.4vw, 46px); margin: 8px 0 6px; }
/* De standaard focusring (blauw) valt weg op navy: oranje, 7:1 */
.brand-ohs .band :focus-visible { outline-color: var(--accent); }
.brand-ohs .band .crumbs { color: var(--muted-on-dark); }
.brand-ohs .band .crumbs a { color: #E3E9F7; text-decoration: underline; text-decoration-color: rgba(227, 233, 247, .35); text-underline-offset: 3px; }
@media (hover: hover) { .brand-ohs .band .crumbs a:hover { color: var(--white); text-decoration-color: currentColor; } }
.brand-ohs .band__intro { max-width: 75ch; color: #E3E9F7; }
.brand-ohs .band__summary { color: var(--muted-on-dark); }
.brand-ohs .band__summary a, .brand-ohs .band .category-guides a, .brand-ohs .band__intro a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.brand-ohs .band__summary--verdict { color: var(--white); }
.brand-ohs .band .category-guides { color: var(--muted-on-dark); }
/* "Bekijk de beste …": oranje zoals de kicker in de homepagekop */
.brand-ohs .band .best-link a { color: var(--accent); text-decoration-color: rgba(255, 119, 21, .45); text-underline-offset: 3px; }
@media (hover: hover) { .brand-ohs .band :is(.best-link, .band__summary, .category-guides) a:hover { text-decoration-color: currentColor; } }
.brand-ohs .band .drop-stats dt { color: var(--muted-on-dark); }
.brand-ohs .band .drop-stats dd { color: var(--accent); }
/* Subcategorieën als printplaat-chips: donker met een dunne rand, de huidige in oranje (zoals de %-badges in de hero) */
.brand-ohs .band .subcats a { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: box-shadow .15s, background-color .15s; }
@media (hover: hover) { .brand-ohs .band .subcats a:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--accent); } }
.brand-ohs .band .subcats a[aria-current] { background: var(--accent); color: var(--navy); box-shadow: none; }
.brand-ohs .band .subcats a[aria-current] small { opacity: .85; }

.motion .brand-ohs .band::before,
.motion .brand-ohs .band::after,
.motion .brand-ohs .band > .container::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(100% - 760px); /* oorsprong van de SVG (rechtsboven, 760 px breed) */
    top: 0;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 119, 21, .45), 0 0 14px 3px rgba(255, 119, 21, .6);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation: band-pulse-1 9s linear 1.2s infinite;
}
.motion .brand-ohs .band::after { animation-name: band-pulse-2; animation-delay: 4.2s; }
.motion .brand-ohs .band > .container::after { animation-name: band-pulse-3; animation-delay: 7.2s; }
/* Hoekpunten = de knikken in de SVG; tijd evenredig met de lengte (34% van de ronde onderweg, daarna rust) */
@keyframes band-pulse-1 {
    0% { transform: translate(760px, 46px) scale(1); opacity: 0; }
    3% { opacity: 1; }
    15.4% { transform: translate(600px, 46px) scale(1); }
    19.8% { transform: translate(568px, 78px) scale(1); }
    34% { transform: translate(420px, 78px) scale(1); opacity: 1; }
    40%, 100% { transform: translate(420px, 78px) scale(2.4); opacity: 0; }
}
@keyframes band-pulse-2 {
    0% { transform: translate(712px, 150px) scale(1); opacity: 0; }
    2.1% { transform: translate(690px, 150px) scale(1); opacity: 1; }
    7.5% { transform: translate(650px, 110px) scale(1); }
    19.9% { transform: translate(520px, 110px) scale(1); }
    22.6% { transform: translate(500px, 130px) scale(1); }
    34% { transform: translate(380px, 130px) scale(1); opacity: 1; }
    40%, 100% { transform: translate(380px, 130px) scale(2.4); opacity: 0; }
}
@keyframes band-pulse-3 {
    0% { transform: translate(760px, 236px) scale(1); opacity: 0; }
    3% { opacity: 1; }
    13.3% { transform: translate(640px, 236px) scale(1); }
    19.6% { transform: translate(600px, 196px) scale(1); }
    34% { transform: translate(470px, 196px) scale(1); opacity: 1; }
    40%, 100% { transform: translate(470px, 196px) scale(2.4); opacity: 0; }
}
/* Smal: de plaat loopt achter de tekst, dus gedimd (banen en pulsen), zodat de tekst rustig leesbaar blijft */
@media (max-width: 1023px) {
    .brand-ohs .band { --band-dim: rgba(8, 17, 36, .62); }
    .motion .brand-ohs .band::before, .motion .brand-ohs .band::after, .motion .brand-ohs .band > .container::after {
        background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px rgba(255, 119, 21, .25), 0 0 10px 2px rgba(255, 119, 21, .3);
    }
}
@media (max-width: 767px) {
    .brand-ohs .band .container { padding-block: 18px 22px; }
    .brand-ohs .band h1 { font-size: 30px; margin: 6px 0 6px; }
    .brand-ohs .band__intro { font-size: 14px; line-height: 1.55; }
    .brand-ohs .band__summary { font-size: 13px; line-height: 1.5; }
}

/* ---------- Cookiebanner (site-core: vendor/site-core/consent.css) in de huisstijl van elk merk ---------- */
:root {
    --consent-bg: var(--white); --consent-text: var(--text); --consent-accent: var(--navy); --consent-on-accent: #fff;
    --consent-border: var(--border); --consent-radius: var(--radius); --consent-overlay: rgba(8, 17, 36, .72);
}
.consent-fab { transition: transform .15s, color .15s; }
@media (hover: hover) { .consent-fab:hover { color: var(--accent-text); transform: scale(1.06); } }
body:has(.sticky-buy.is-visible) .consent-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* boven de koopbalk (mobiel) */
.footer__link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
@media (hover: hover) { .footer__link-button:hover { color: var(--accent); } }
.footer__social { margin-top: var(--space-4) !important; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.footer__social li { margin: 0; }

/* ======================================================================
   Merken (devoordeelzoeker.nl, dewinkelwijzer.nl): zelfde site, eigen thema.
   Kleuren/fonts komen als CSS-variabelen uit config/sites.php (brands.*.theme).
   ====================================================================== */
@font-face { /* De Voordeelzoeker – variabel 700–900 */
    font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap;
    src: url("/fonts/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* De Winkelwijzer – variabel 600–800 */
    font-family: "Manrope"; font-style: normal; font-weight: 600 800; font-display: swap;
    src: url("/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Variabelen die de merkthema's kunnen zetten; standaard = OHS */
h1, h2, h3, h4, .btn, .tile__name, .card__price, .buybox__price, .offer__price, .label, .catnav__link {
    font-weight: var(--head-weight, 700); letter-spacing: var(--head-tracking, normal);
}
@media (hover: hover) { .btn:hover { box-shadow: 0 6px 16px var(--accent-glow, rgba(255,119,21,.28)); } }
@media (hover: hover) { .btn--navy:hover, .btn--outline:hover { box-shadow: none; } }
.hero { background: var(--hero-bg, linear-gradient(90deg, #15171b 0%, #1d1f23 45%, #343434 100%)); }
.hero::before { background-image: var(--hero-image, image-set(url("/images/hero-carts.webp") type("image/webp"), url("/images/hero-carts.jpg") type("image/jpeg"))); }

/* Woordmerk-logo's (inline SVG + tekst in het merkfont) */
.brandmark { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; line-height: 1; }
.brandmark__icon { width: 44px; height: 44px; flex: none; }
.brandmark__text { font-family: var(--font-head); font-weight: var(--head-weight, 800); font-size: 26px; letter-spacing: var(--head-tracking, normal); white-space: nowrap; }
.brandmark__text small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
.brandmark__text b { color: var(--blue); font-weight: inherit; }
.brandmark--white { color: var(--white); }
.brandmark--white .brandmark__text b { color: var(--accent); }
.brandmark--white .brandmark__text small { color: var(--muted-on-dark); }
.footer .logo .brandmark { margin: var(--space-2) 0 var(--space-5); }
.brandmark--svg svg { display: block; height: 48px; width: auto; max-width: 240px; }
.brandmark--svg text { font-family: var(--font-head); }
@media (max-width: 767px) {
    .brandmark__icon { width: 36px; height: 36px; }
    .brandmark__text { font-size: 21px; }
    .brandmark--svg svg { height: 40px; max-width: 190px; }
}

/* De Voordeelzoeker: speels, rond, gele accenten */
.brand-voordeelzoeker .hero h1 { max-width: 18ch; }
.brand-voordeelzoeker .label { border-radius: 999px; padding: var(--space-1) var(--space-3); }
.brand-voordeelzoeker .card__price { color: var(--price); }
.brand-voordeelzoeker .offer--best { background: #FFF8E1; }
.brand-voordeelzoeker .hero::after { /* decoratieve euro-badges in de hero */
    content: "€"; position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(-12deg);
    width: clamp(140px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: var(--navy); font: 900 clamp(80px, 13vw, 180px)/1 var(--font-head);
    box-shadow: 0 0 0 18px rgba(255,200,61,.18), 0 0 0 42px rgba(255,200,61,.08);
}
/* De Winkelwijzer: strak, redactioneel, koraal als wegwijzer */
.brand-winkelwijzer .hero::after { /* decoratieve kompasroos in de hero */
    content: ""; position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
    width: clamp(160px, 24vw, 320px); aspect-ratio: 1; border-radius: 50%;
    background:
        conic-gradient(from 0deg, transparent 0 40deg, rgba(255,255,255,.06) 40deg 50deg, transparent 50deg 130deg, rgba(255,255,255,.06) 130deg 140deg, transparent 140deg 220deg, rgba(255,255,255,.06) 220deg 230deg, transparent 230deg 310deg, rgba(255,255,255,.06) 310deg 320deg, transparent 320deg),
        radial-gradient(circle, transparent 58%, rgba(255,255,255,.12) 59% 60%, transparent 61%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.brand-winkelwijzer .hero .container::after { /* kompasnaald */
    content: ""; position: absolute; right: calc(7% + clamp(160px, 24vw, 320px) / 2 - 14px); top: 50%;
    width: 28px; height: clamp(120px, 18vw, 240px); transform: translateY(-50%) rotate(35deg);
    background: linear-gradient(var(--accent) 0 50%, rgba(255,255,255,.85) 50% 100%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.brand-winkelwijzer .label { background: transparent; color: var(--accent-text); padding: 0; letter-spacing: .14em; } /* koraal als tekst haalt op wit geen 4.5:1 */
.brand-winkelwijzer .band .label { color: #FFD3CC; }
.brand-winkelwijzer .card { border-top: 3px solid transparent; }
@media (hover: hover) { .brand-winkelwijzer .card:hover { border-top-color: var(--accent); } }
.brand-winkelwijzer .offer--best { background: #FFF1EE; }
@media (max-width: 900px) {
    .brand-voordeelzoeker .hero::after, .brand-winkelwijzer .hero::after, .brand-winkelwijzer .hero .container::after { display: none; }
}
@media (max-width: 767px) {
    /* Zonder taalwissel (merken met één site) is de topbar op mobiel leeg: verbergen */
    .topbar:not(:has(.lang-switch)) { display: none; }
}

/* ---------- Prijsgeschiedenis (productpagina) ---------- */
.buybox__badge { margin: 4px 0 10px; }
.price-history__summary { margin: -4px 0 14px; color: var(--navy); }
/* Veelgestelde vragen (productpagina) */
.faq__list { display: grid; gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.faq__item { padding: var(--space-4) var(--space-5); }
.faq__item + .faq__item { border-top: 1px solid var(--border); }
.faq__item dt { font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 17px; color: var(--navy); margin-bottom: var(--space-1); }
.faq__item dd { margin: 0; }
.listing-faq { margin-block: var(--stack-block) var(--space-9); }
.listing-faq h2 { margin: 0 0 var(--stack-head); }
/* Koopadvies + veelgestelde vragen onder een categorie (eigenaar 2026-10-24: "ziet er beetje random erin geplakt uit"):
   één kaart over de containerbreedte (zelfde randen als filters + raster), vanaf 1100px advies links op leesbare
   regellengte en de vragen rechts ernaast; kopjes en ritme zoals de andere secties */
.listing-info { padding-bottom: var(--space-9); }
.listing-info__card { display: grid; gap: var(--stack-block) var(--space-9); padding: clamp(20px, 4vw, 40px); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.listing-info h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 var(--stack-head); }
.listing-info .prose { max-width: 70ch; }
.listing-guide h3 { font-size: 20px; margin: var(--space-6) 0 var(--space-2); }
.listing-guide :is(p, ul, ol) { margin: 0 0 var(--space-4); }
.listing-guide :is(ul, ol) { padding-left: 1.25em; }
.listing-guide li + li { margin-top: var(--space-1); }
.listing-guide > :last-child { margin-bottom: 0; }
.listing-faq--in-card { margin: 0; }
.listing-info__card--split .listing-faq { padding-top: var(--stack-block); border-top: 1px solid var(--border); }
@media (min-width: 1100px) {
    .listing-info__card--split { grid-template-columns: minmax(0, 70ch) minmax(0, 1fr); align-items: start; }
    .listing-info__card--split .listing-faq { position: sticky; top: 96px; padding-top: 0; border-top: 0; }
}
.price-history__empty, .price-history__note { color: var(--text-soft); font-size: 14px; }
.price-history__tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.price-history__tabs > label {
    display: inline-flex; padding: 6px 14px; margin: 0 var(--space-1) var(--space-3) 0; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--navy); background: var(--white);
}
.price-history__tabs > input:checked + label { background: var(--navy); border-color: var(--navy); color: var(--white); }
.price-history__tabs > input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.price-history__panel { display: none; }
#ph-90:checked ~ .price-history__panel[data-period="90"],
#ph-365:checked ~ .price-history__panel[data-period="365"] { display: block; }
.price-history__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); }
.price-history__stats div { background: var(--light); border-radius: var(--radius-sm); padding: 10px 12px; }
.price-history__stats dt { font-size: 12px; color: var(--text-soft); }
.price-history__stats dd { margin: 0; line-height: 1.2; font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 20px; color: var(--navy); }
.price-history__stats dd.is-low { color: var(--price); }
.price-history__chart { position: relative; margin: 0; padding-left: 56px; }
.price-history__chart svg { width: 100%; height: 220px; display: block; overflow: visible; }
.price-history__chart .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.price-history__chart .area { fill: var(--price); opacity: .08; }
/* Laagste prijs (groen, de prijskleur) en hoogste prijs (grijs) met een band ertussen, zoals Tweakers */
.price-history__chart .band { fill: var(--price); opacity: .12; }
.price-history__chart .line { fill: none; stroke: var(--price); stroke-width: 2.5; stroke-linejoin: round; }
.price-history__chart .line--high { stroke: var(--text-soft); stroke-width: 1.75; }
.price-history__cursor { position: absolute; top: 0; bottom: 24px; width: 1px; background: var(--navy); opacity: .35; pointer-events: none; }
.price-history__tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--white);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 13px; line-height: 1.45; color: var(--navy); pointer-events: none; }
.price-history__tip strong { display: block; margin-bottom: 2px; }
.price-history__tip .is-low { color: var(--price); font-weight: 700; }
.price-history__tip .is-high { color: var(--text-soft); }
.price-history__chart[data-series] svg { cursor: crosshair; touch-action: pan-y; }
.price-history__legend { display: flex; gap: var(--space-4); flex-wrap: wrap; list-style: none; margin: 10px 0 0; padding: 0 0 0 56px; font-size: 13px; color: var(--text-soft); }
.price-history__legend li::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; background: var(--price); }
.price-history__legend li.is-high::before { background: var(--text-soft); }
.price-history__y { position: absolute; left: 0; top: 0; bottom: 24px; width: 52px; font-size: 12px; color: var(--text-soft); }
.price-history__y span { position: absolute; transform: translateY(-50%); }
.price-history__x { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-soft); margin-top: 6px; }
@media (max-width: 767px) { .price-history__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Artikelen (koopgidsen / blog) ---------- */
.container--narrow { max-width: 820px; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap-lg); }
.acard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.acard__img { display: block; aspect-ratio: 16 / 9; background: var(--light) center / 30% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B1B7C6' stroke-width='1.5'%3E%3Cpath d='M4 4h16v16H4zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.acard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acard__body { padding: var(--card-pad) var(--card-pad-lg) var(--card-pad-lg); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.acard__type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.acard__title { font-size: 22px; margin: 0; }
.acard__title a { text-decoration: none; color: var(--navy); }
.acard__title a::after { content: ""; position: absolute; inset: 0; }
.acard { position: relative; }
@media (hover: hover) { .acard__title a:hover { color: var(--blue); } }
.acard__excerpt { margin: 0; font-size: 14px; }
.acard__meta { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--text-soft); }

.article__head { padding-block: var(--page-top) var(--space-2); }
.article__head .crumbs { margin-bottom: var(--space-5); }
.article h1 { font-size: clamp(32px, 4.2vw, 52px); margin: 10px 0 12px; }
.article__lead { font-size: 19px; line-height: 1.55; color: var(--navy); }
.article__meta { font-size: 14px; color: var(--text-soft); }
.article__cover { width: 100%; height: auto; border-radius: var(--radius); margin: var(--space-2) 0 var(--space-6); }
.article__cta { margin: var(--space-7) 0 0; }
.prose-article { font-size: 17px; line-height: 1.75; color: var(--text); }
.prose-article h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 1.6em 0 .5em; }
.prose-article h3 { font-size: 22px; margin: 1.4em 0 .4em; }
.prose-article p, .prose-article ul, .prose-article ol { margin: 0 0 1.1em; }
.prose-article li { margin-bottom: .35em; }
.prose-article a { color: var(--blue); }
.prose-article img { border-radius: var(--radius-sm); margin: 1em 0; }
.prose-article blockquote { margin: 1.4em 0; padding: var(--space-3) var(--space-5); border-left: 4px solid var(--accent); background: var(--light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--navy); }
.prose-article table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; display: block; overflow-x: auto; }
.prose-article th, .prose-article td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.prose-article th { background: var(--light); color: var(--navy); }
.preview-bar { background: var(--accent); color: var(--navy); text-align: center; font-weight: 700; padding: var(--space-2) var(--space-4); }
.category-guides { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: #E3E9F7; font-size: 14px; }
.category-guides a { color: var(--white); font-weight: 600; }

/* ---------- Prijsdalers ---------- */
.badge--drop { background: #FDE8E4; color: #A1261A; }
.card__was { margin-left: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text-soft); }

/* ===== Verzendkosten per winkel ===== */
.shipping { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--text-soft); }
.shipping__cost--free { color: var(--price); font-weight: 600; }
.shipping__cost--unknown { font-style: italic; }
.shipping__total { color: var(--navy); }
.buybox__shipping { margin: 2px 0 10px; font-size: 13px; }

/* ===== Prijsalarm ===== */
.alert-box { margin-top: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.alert-box > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--navy); list-style: none; }
.alert-box > summary::-webkit-details-marker { display: none; }
.alert-box > summary::before { content: "🔔 "; }
.alert-form { padding: 0 var(--space-4) var(--space-4); }
.alert-form__intro, .alert-form__privacy { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; }
.alert-form__privacy { margin: 10px 0 0; font-size: 12px; }
.alert-form__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
/* Prijsalarm als CTA in het Black Friday-seizoen (2026-10-24): navy knopvorm, wit op navy 18,8:1 */
.alert-box--cta > summary { background: var(--navy); color: var(--white); border-radius: var(--radius-sm); }
.alert-box--cta[open] > summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.alert-cta { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-left: 4px solid var(--navy); border-radius: var(--radius-sm); background: var(--light); color: var(--navy); }
.alert-cta h2 { margin: 0 0 var(--space-1); font-size: 18px; }
.alert-cta p { margin: 0; font-size: 14px; color: var(--text); }
.card__alert { display: inline-block; margin: var(--space-2) 0 0; font-size: 13px; font-weight: 600; color: var(--blue); text-underline-offset: 2px; }
@media (hover: hover) { .card__alert:hover { color: var(--blue-dark); } }

/* "Echte korting?" (App\Support\PriceVerdicts, 2026-10-24). Vaste donkere tinten op lichte vlakken, los van de accentkleur:
   echt #145C33 op #E3F4EA 7,0:1, gewoon navy op #EEF0F4 16,5:1, eerst duurder #6B4200 op #FFF1CC 7,8:1 (AA, ook kleine tekst) */
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.verdict__badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.verdict--real .verdict__badge { background: #E3F4EA; color: #145C33; box-shadow: inset 0 0 0 1px #A7D7B8; }
.verdict--regular .verdict__badge { background: #EEF0F4; color: var(--navy); box-shadow: inset 0 0 0 1px #CDD2DC; }
.verdict--raised .verdict__badge { background: #FFF1CC; color: #6B4200; box-shadow: inset 0 0 0 1px #E8C770; }
.verdict__spark { display: inline-flex; width: 96px; height: 24px; color: #5E636D; }
.verdict--real .verdict__spark { color: #1A7A43; }
.verdict__spark .mo-spark { width: 100%; height: 100%; }
.verdict__text { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.verdict__source { display: block; margin-top: 2px; font-size: 12px; color: var(--text-soft); }
.verdict__source a { color: var(--blue); }
.verdict--compact { margin: auto 0 var(--space-2); } /* op de kaart: vlak boven de prijs, prijs blijft onderaan */
.verdict--compact + .card__price { margin-top: 0; }
.verdict--compact .verdict__badge { font-size: 12px; padding: 2px 8px; }
.verdict--compact .verdict__spark { width: 60px; height: 20px; }
.verdict-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.verdict-legend .verdict { margin: 0; }
.band__summary--verdict { color: var(--white); font-weight: 600; }
.band__summary--verdict a { color: var(--white); }
.alert-form label > span:first-child { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-1); }
.alert-form input[type=number], .alert-form input[type=email] { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.alert-form__euro { position: relative; display: block; }
.alert-form__euro::before { content: "€"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-soft); }
.alert-form__euro input { padding-left: var(--space-6) !important; }
.alert-form__msg { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.alert-form__msg.is-ok { color: var(--price); }
.alert-form__msg.is-error { color: #B42318; }
@media (max-width: 480px) { .alert-form__row { grid-template-columns: 1fr; } }

/* ===== Specificaties ===== */
.spec-groups { display: grid; gap: var(--space-3); }
.spec-group { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.spec-group > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--navy); }
.spec-group > summary small { font-weight: 400; color: var(--text-soft); margin-left: 6px; }
.spec-table { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; padding: 0 var(--space-4) var(--space-3); }
.spec-table dt, .spec-table dd { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--border); font-size: 14px; }
.spec-table dt { color: var(--text-soft); padding-right: var(--space-3); }
.spec-table dd { color: var(--navy); overflow-wrap: anywhere; }
.spec-source { font-size: 12px; color: var(--text-soft); margin-top: var(--space-2); }
.spec-source a { color: inherit; text-decoration: underline; }

/* ===== Categorie + merk-links, "Beste"-link, sorteer-uitleg ===== */
.combo-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-4) 0; }
.combo-links__title { font-weight: 700; color: var(--navy); margin-right: var(--space-1); }
.combo-links a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--navy); font-size: 14px; text-decoration: none; }
@media (hover: hover) { .combo-links a:hover { border-color: var(--blue); } }
.combo-links small { color: var(--text-soft); }
.combo-links a.combo-links__extra { border-style: dashed; }
.best-link { margin: var(--space-3) 0 0; }
.best-link a { color: var(--white); font-weight: 700; }
.toolbar__how { font-size: 13px; color: var(--text-soft); }

/* ===== "Beste ... van 2026" ===== */
.best-list { list-style: none; padding-block: var(--space-2) 0; display: grid; gap: var(--grid-gap); }
.best-item { display: grid; grid-template-columns: 2.5rem 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--card-pad); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.best-item__rank { font-family: var(--font-head); font-weight: 800; font-size: 28px; color: var(--accent-text); text-align: center; }
.best-item__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.best-item__title { font-size: 18px; margin: 2px 0 6px; }
.best-item__title a { color: var(--navy); text-decoration: none; }
.best-item__specs { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--navy); }
.best-item__specs span { color: var(--text-soft); }
.best-item__specs span::after { content: ":"; }
.best-item__meta { font-size: 13px; color: var(--text-soft); margin: 0; }
.best-item__buy { display: grid; justify-items: end; gap: var(--space-2); text-align: right; }
.best-item__price { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--price); white-space: nowrap; }
.best-item__price small { font-size: 13px; color: var(--text-soft); font-weight: 400; }
.best-item__compare { font-size: 13px; }
.best-more { margin: var(--space-5) 0 0; }
.best-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-6); }
.best-index ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 6px; }
@media (max-width: 720px) {
    .best-item { grid-template-columns: 2rem 6rem minmax(0, 1fr); }
    .best-item__buy { grid-column: 2 / -1; justify-items: start; text-align: left; }
}

/* ===== Winkels & kortingscodes ===== */
.shop-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--grid-gap); }
.shop-tile a { display: grid; gap: 6px; justify-items: start; padding: var(--card-pad); height: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); color: var(--navy); text-decoration: none; }
@media (hover: hover) { .shop-tile a:hover { border-color: var(--blue); } }
.shop-tile img { max-height: 40px; width: auto; object-fit: contain; }
.shop-tile span { font-size: 13px; color: var(--text-soft); }
.shop-head { display: flex; gap: 18px; align-items: center; }
.shop-head__logo { background: var(--white); border-radius: var(--radius-sm); padding: var(--space-2); max-height: 64px; width: auto; }
.shop-mark, .shop-tile .shop-mark { display: inline-grid; place-items: center; width: 48px; height: 40px; border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--white); }
.shop-mark--lg, .shop-tile .shop-mark--lg { width: 72px; height: 64px; font-size: 26px; }
.shop-mark--0 { background: var(--navy); } .shop-mark--1 { background: var(--blue); } .shop-mark--2 { background: var(--accent-text); }
.shop-mark--3 { background: var(--price); } .shop-mark--4 { background: #5B3FA8; }
.band .btn.ext { margin-top: 14px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--stack-block); align-items: start; }
.shop-layout h2 { margin-top: 0; }
.shop-layout .grid { margin-bottom: var(--stack-block); }
.shop-facts { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad-lg); position: sticky; top: 90px; }
.shop-facts h2 { font-size: 18px; }
.shop-facts h3 { font-size: 15px; margin: 16px 0 6px; }
.shop-facts dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.shop-facts dt { color: var(--text-soft); }
.shop-facts dd { margin: 0; color: var(--navy); }
.shop-cats { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); font-size: 14px; }
.shop-cats small { color: var(--text-soft); }
.vouchers { list-style: none; padding: 0; margin: 0 0 var(--stack-block); display: grid; gap: var(--grid-gap); }
.voucher { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--card-pad) var(--card-pad-lg); background: var(--white); border: 2px dashed var(--border); border-radius: var(--radius); }
.voucher--exclusive { border-color: var(--accent); }
.voucher h3 { margin: var(--space-1) 0; font-size: 17px; color: var(--navy); }
.voucher p { margin: 0 0 var(--space-1); font-size: 14px; }
.voucher__meta { color: var(--text-soft); font-size: 13px !important; }
.voucher__terms summary { cursor: pointer; font-size: 13px; color: var(--text-soft); }
.voucher__code { display: inline-block; padding: 10px 16px; border: 2px dashed var(--accent); border-radius: var(--radius-sm); font-size: 18px; font-weight: 700; letter-spacing: .05em; color: var(--navy); background: var(--light); user-select: all; }
.voucher__code[hidden], .voucher__reveal[hidden] { display: none; } /* code pas tonen na klik op "Toon code", daarna de knop weg */
.voucher--expired { border-style: solid; background: var(--light); }
.voucher--expired h3, .voucher--expired p { color: var(--text-soft); }
.voucher__expired { display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--border); color: var(--navy); font-weight: 700; font-size: 14px; }
.voucher-signpost { margin: -4px 0 16px; } /* naar de kortingscodepagina op de dealsite (2026-10-24) */
.voucher-signpost a { color: var(--blue); font-weight: 600; }
@media (max-width: 860px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-facts { position: static; }
    .voucher { grid-template-columns: 1fr; }
}
.prose--narrow { max-width: 760px; }

/* ===== Privacy / cookies / Impressum ===== */
.legal h2 { margin-top: var(--space-7); }
.legal__table { overflow-x: auto; margin: var(--space-3) 0; }
.legal__table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.legal__table thead th { background: var(--light); color: var(--navy); }
.consent__more { color: inherit; text-decoration: underline; }

/* ===== Amazon (tijdelijk, zonder prijs) ===== */
.amazon-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.amazon-box strong { display: block; color: var(--navy); }
.amazon-box span { font-size: 13px; color: var(--text-soft); }

/* ===== Nieuw <-> refurbished ===== */
.variants { margin-top: var(--space-4); }
.variants__title { font-size: 16px; margin: 14px 0 8px; color: var(--navy); }
.variants__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.variants__list li + li { border-top: 1px solid var(--border); }
.variants__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 14px; color: var(--navy); text-decoration: none; }
@media (hover: hover) { .variants__list a:hover { background: var(--light); } }
.variants__name { font-size: 14px; }
.variants__name .badge { margin-right: 6px; }
.variants__name small { color: var(--text-soft); margin-left: 6px; }
.variants__price { font-family: var(--font-head); font-weight: 700; white-space: nowrap; color: var(--price); }
.variants__price small { font-weight: 400; color: var(--text-soft); font-size: 12px; }
.variants__save { margin-left: 6px; font-size: 12px; color: #A1261A; background: #FDE8E4; padding: 1px 6px; border-radius: 999px; }
.bundle-parent { margin: var(--space-3) 0 0; font-size: 14px; color: var(--text-soft); }
.section__sub { margin: 0; color: var(--text-soft); font-size: 14px; flex-basis: 100%; }

/* ===== Besproken product in een artikel ===== */
.aprod { margin: var(--stack-block) 0 0; padding: var(--card-pad-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.aprod + .aprod { margin-top: var(--space-5); }
.aprod__label { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.aprod__top { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-bottom: var(--space-4); }
.aprod__img { display: block; aspect-ratio: 1; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.aprod__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aprod__title { font-size: 22px; line-height: 1.25; margin: 2px 0 8px; }
.aprod__title a { color: var(--navy); text-decoration: none; }
@media (hover: hover) { .aprod__title a:hover { color: var(--blue); } }
.aprod__specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 10px 0 0; font-size: 13px; }
.aprod__specs dt { color: var(--text-soft); }
.aprod__specs dd { margin: 0; color: var(--navy); }
.aprod__price { margin: var(--space-3) 0 0; font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1; color: var(--price); }
.aprod__price small { display: block; margin-bottom: var(--space-1); font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-soft); }
.aprod__more { margin-top: var(--space-2); }
.aprod__more > summary { cursor: pointer; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--blue); }
.aprod__note, .aprod__none { margin: 10px 0 0; font-size: 12px; color: var(--text-soft); }
.aprod__none { font-size: 15px; color: var(--navy); }
.aprod__link { margin-top: 14px; }
@media (max-width: 560px) {
    .aprod { padding: var(--space-4); }
    .aprod__top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
    .aprod__title { font-size: 18px; }
    .aprod__price { font-size: 24px; }
}

/* ===== Blog: onderwerpen, uitgelicht, zijbalk, verder lezen ===== */
.topic-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-4) 0; scrollbar-width: none; }
.topic-chips::-webkit-scrollbar { display: none; }
.topic-chips a { flex: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--white);
    color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.topic-chips a small { color: var(--text-soft); font-weight: 400; margin-left: 2px; }
@media (hover: hover) { .topic-chips a:hover { border-color: var(--blue); } }
.topic-chips a[aria-current] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.topic-chips a[aria-current] small { color: var(--muted-on-dark); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--stack-block); align-items: start; }
.blog-main > .acard--lead { margin-bottom: var(--grid-gap-lg); }
.acard--lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.acard--lead .acard__img { aspect-ratio: auto; min-height: 100%; }
.acard--lead .acard__body { padding: 24px 28px; justify-content: center; }
.acard--lead .acard__title { font-size: clamp(24px, 2.4vw, 32px); }
.acard--lead .acard__excerpt { font-size: 16px; }
.blog-aside { display: flex; flex-direction: column; gap: var(--grid-gap-lg); position: sticky; top: 96px; }
.blog-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad-lg); }
.blog-box h2 { font-size: 20px; margin: 0 0 var(--space-3); }
.popular-list { margin: 0; padding: 0; list-style: none; counter-reset: pop; }
.popular-list li { counter-increment: pop; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); padding: 9px 0; border-top: 1px solid var(--border); }
.popular-list li:first-child { border-top: 0; padding-top: 0; }
.popular-list li::before { content: counter(pop); font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 22px; line-height: 1; color: var(--accent-text); }
.popular-list a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.4; }
@media (hover: hover) { .popular-list a:hover { color: var(--blue); } }
.topic-list { margin: 0; padding: 0; list-style: none; }
.topic-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
.topic-list li:first-child { border-top: 0; padding-top: 0; }
.topic-list a { color: var(--navy); text-decoration: none; font-weight: 600; }
.topic-list span { color: var(--text-soft); white-space: nowrap; }
.label--link { margin-left: 6px; text-decoration: none; }
@media (hover: hover) { .label--link:hover { text-decoration: underline; } }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--stack-block); }
.article-nav a { display: block; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
    color: var(--navy); text-decoration: none; font-weight: 600; line-height: 1.35; }
.article-nav a small { display: block; margin-bottom: var(--space-1); color: var(--text-soft); font-weight: 400; font-size: 13px; }
@media (hover: hover) { .article-nav a:hover { border-color: var(--blue); } }
.article-nav__newer { text-align: right; grid-column: 2; }
@media (max-width: 960px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-aside { position: static; }
    .acard--lead { grid-template-columns: 1fr; }
    .acard--lead .acard__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) { .article-nav { grid-template-columns: 1fr; } .article-nav__newer { grid-column: 1; text-align: left; } }

/* ===== Seizoensrapporten (prijsindex) ===== */
.season-banner { display: block; background: var(--accent); color: var(--navy); text-decoration: none; }
.season-banner .container { display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap; padding-block: var(--space-3); }
.season-banner .label { background: var(--navy); color: var(--white); }
.season-banner strong { font-family: var(--font-head); font-size: 18px; }
.season-banner .chev { margin-left: auto; font-weight: 700; }
@media (hover: hover) { .season-banner:hover strong { text-decoration: underline; } }
.season__headline { font-size: clamp(24px, 2.6vw, 32px); margin: var(--space-2) 0 var(--space-3); }
.season-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.season-stats div { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); }
.season-stats dt { font-size: 13px; color: var(--text-soft); }
.season-stats dd { margin: var(--space-1) 0 0; font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 30px; color: var(--navy); }
.season-stats .is-good, .season-list .is-good { color: var(--price); }
.season-stats .is-bad, .season-list .is-bad { color: #B42318; }
.season-chart { margin: var(--space-6) 0; padding: var(--space-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.season-chart figcaption { font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.season-chart svg { width: 100%; height: 200px; display: block; }
.season-chart__line { fill: none; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.season-chart__base { stroke: var(--border); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.season-chart__axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-soft); margin-top: 6px; }
.season-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.season-list li + li { border-top: 1px solid var(--border); }
.season-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: 10px 14px; color: var(--navy); text-decoration: none; }
@media (hover: hover) { .season-list a:hover .season-list__title { color: var(--blue); } }
.season-list__img img { width: 48px; height: 48px; object-fit: contain; display: block; }
.season-list__title { font-weight: 600; font-size: 14px; }
.season-list__price { font-size: 14px; white-space: nowrap; }
.season-list__price s { color: var(--text-soft); margin-right: var(--space-1); }
.season-list__pct { font-family: var(--font-head); font-weight: 700; font-size: 18px; white-space: nowrap; }
.season-how, .season-cite { margin-top: var(--space-7); }
.season-cite { padding: var(--card-pad-lg); background: var(--light); border-radius: var(--radius); }
.season-cite code { display: block; margin-top: var(--space-2); padding: 10px 12px; background: var(--white); border-radius: var(--radius-sm); font-size: 13px; word-break: break-all; }
.season-row { display: grid; gap: var(--space-1); padding: var(--card-pad-lg); margin-bottom: var(--grid-gap); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.season-row strong { font-family: var(--font-head); font-size: 22px; color: var(--navy); }
.season-row .label { justify-self: start; }
@media (hover: hover) { .season-row:hover { border-color: var(--blue); } }
@media (max-width: 560px) { .season-list a { grid-template-columns: 40px minmax(0, 1fr) auto; } .season-list__price { display: none; } }

/* ---------- Producten vergelijken (public/js/compare.js, /vergelijk) ---------- */
.compare-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
    margin-top: 10px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--navy); cursor: pointer;
}
@media (hover: hover) { .compare-btn:hover { color: var(--blue); } }
.compare-btn__box { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; display: inline-grid; place-items: center; flex: none; }
.compare-btn[aria-pressed="true"] { color: var(--blue); }
.compare-btn[aria-pressed="true"] .compare-btn__box { background: var(--blue); border-color: var(--blue); }
.compare-btn[aria-pressed="true"] .compare-btn__box::after { content: ""; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.buybox__compare { margin-top: 14px; }

.compare-bar {
    position: fixed; left: 50%; bottom: 16px; z-index: 40; transform: translateX(-50%);
    width: min(960px, calc(100% - 2 * var(--gutter))); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: 10px 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(8,17,36,.18);
}
.compare-bar[hidden] { display: none; }
.compare-bar__items { display: flex; gap: var(--space-2); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.compare-bar__item { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 4px 4px 6px; background: var(--light); border-radius: var(--radius-sm); font-size: 13px; color: var(--navy); }
.compare-bar__item img { width: 32px; height: 32px; object-fit: contain; background: var(--white); border-radius: 4px; flex: none; }
.compare-bar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-bar__remove { flex: none; width: 28px; height: 28px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--text-soft); cursor: pointer; border-radius: 50%; }
@media (hover: hover) { .compare-bar__remove:hover { background: var(--white); color: var(--navy); } }
.compare-bar__msg { margin: 0; font-size: 13px; color: var(--accent-text); }
.compare-bar__msg:empty { display: none; }
.compare-bar__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.compare-bar__go.is-disabled { opacity: .5; cursor: not-allowed; }
.compare-bar__clear { border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-soft); text-decoration: underline; cursor: pointer; }
body.has-compare-bar { padding-bottom: 96px; }
@media (max-width: 1024px) {
    .compare-bar { bottom: 8px; }
    .compare-bar__item span { display: none; } /* alleen de foto's op een smal scherm */
    body.has-compare-bar .sticky-buy.is-visible ~ .compare-bar,
    body:has(.sticky-buy.is-visible) .compare-bar { bottom: 84px; }
}

.compare__notice { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: #FFF4EB; border-radius: var(--radius-sm); color: var(--navy); }
.compare__diff { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-weight: 600; color: var(--navy); cursor: pointer; }
.compare__diff input { width: 18px; height: 18px; accent-color: var(--blue); }
.compare__scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.compare__scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.compare__note { margin-top: var(--space-3); font-size: 13px; color: var(--text-soft); }
.compare-table { width: 100%; min-width: calc(180px + var(--cols) * 180px); border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.compare-table th, .compare-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.compare-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 180px; background: var(--white); font-weight: 600; color: var(--navy); }
.compare-table__corner { position: sticky; left: 0; z-index: 1; width: 180px; background: var(--white); }
.compare-table thead th { position: relative; padding-top: 28px; }
.compare-table__link { display: grid; gap: var(--space-2); justify-items: center; text-align: center; color: var(--navy); font-weight: 600; text-decoration: none; }
.compare-table__link img { width: 120px; height: 120px; object-fit: contain; }
@media (hover: hover) { .compare-table__link:hover span { color: var(--blue); } }
.compare-table__remove { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--text-soft); text-decoration: none; }
@media (hover: hover) { .compare-table__remove:hover { background: var(--light); color: var(--navy); } }
.compare-table__price { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--price); }
.compare-table__price small { font-family: var(--font-body); font-size: 12px; color: var(--text-soft); }
.compare-table__group th { position: sticky; left: 0; background: var(--light); font-family: var(--font-head); font-size: 17px; color: var(--navy); }
.compare-table__nospecs { color: var(--text-soft); font-size: 13px; }
.compare-table tr[data-same] td { color: var(--text-soft); }
.compare-table.is-diff-only tr[data-same] { display: none; }
.compare-yes { color: var(--price); font-weight: 700; font-size: 18px; }
.compare-no { color: #B42318; font-weight: 700; font-size: 18px; }
.compare-unknown { color: var(--text-soft); }
@media (max-width: 640px) {
    .compare-table { min-width: calc(120px + var(--cols) * 150px); font-size: 13px; }
    .compare-table tbody th[scope="row"], .compare-table__corner { width: 120px; }
    .compare-table__link img { width: 80px; height: 80px; }
}

/* Touchscreens: tekstlinks in lijsten (footer, kruimelpad) groter tikbaar, min. 24px hoog (WCAG 2.2 doelgrootte) */
@media (pointer: coarse) {
    .footer li a, .footer__link-button, .crumbs a, .toolbar__how { display: inline-block; padding-block: 6px; }
    .crumbs { align-items: center; }
    .footer li { margin-bottom: 2px; }
}

/* Telefoon: categorietegels compact in twee kolommen (14 tegels onder elkaar was ~2.000px scrollen tot de aanbiedingen) */
@media (max-width: 520px) {
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .tile { padding: 14px; }
    .tile__name { font-size: 17px; }
    .tile__subs { display: none; }
}

/* ---------- Verlanglijstjes (public/js/wishlist.js, /verlanglijstje) ---------- */
.wish-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-top: 6px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--navy); cursor: pointer;
}
@media (hover: hover) { .wish-btn:hover { color: var(--accent-text); } }
.wish-btn__icon { fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.wish-btn[aria-pressed="true"] { color: #C0263D; }
.wish-btn[aria-pressed="true"] .wish-btn__icon { fill: currentColor; }
.wish-btn:disabled { opacity: .6; cursor: progress; }
.buybox__wish { margin-top: var(--space-1); }
/* Favoriet (Mijn account → Favorieten): zelfde vorm als de verlanglijstje-knop, ster gevuld als hij aan staat */
.fav-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: var(--space-1) 0; margin-top: var(--space-1); background: none; border: 0;
    color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .fav-btn:hover { color: var(--accent-text); } }
.fav-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-sm); }
.fav-btn__icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.fav-btn.is-on .fav-btn__icon { fill: #B7791F; stroke: #B7791F; }
.alert-form__account { font-size: 14px; color: var(--text); margin: 0 0 10px; }
.account-fav { display: flex; gap: 14px; align-items: flex-start; }
.account-fav__img { width: 80px; height: 80px; object-fit: contain; flex: none; border-radius: var(--radius-sm); background: #fff; }
.account-fav__down { color: var(--price); }
.wish-link { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; text-decoration: none; padding: var(--space-2); border-radius: var(--radius-sm); }
@media (hover: hover) { .wish-link:hover { background: var(--light); } }
/* Mijn account (site-core v1.4): knop in de kop zoals de verlanglijstje-link, accountpagina's in de OHS-kleuren */
.account-link { margin-left: var(--space-1); }
.wish-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sc-account { --sc-account-ink: var(--navy); --sc-account-radius: var(--radius); }
.account-list h2 { margin-bottom: var(--space-1); }
.account-list__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: var(--space-2); }
.account-list__actions .sc-account__button { margin-top: 0; }
.account-list__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.account-list__price label { width: 100%; font-weight: 600; font-size: .925rem; }
.account-list__price input { width: 8rem; min-height: 44px; padding: 8px 10px; font: inherit; border: 1px solid #71717a; border-radius: var(--radius-sm); }
/* Eén account voor al onze websites (site-core v1.43): blokje in Mijn account en de regel "ook op …" */
.account-family__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.account-family__list a { display: inline-flex; align-items: center; min-height: 44px; }
.account-elsewhere { margin-top: var(--space-4); }
.account-list__delete summary { min-height: 44px; display: inline-flex; align-items: center; }
.account-list__delete form { margin-top: var(--space-2); }
.wish-link svg { fill: none; stroke: currentColor; stroke-width: 2; }
.wish-link__count { position: absolute; top: 0; left: 22px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--navy); font-size: 11px; line-height: 18px; text-align: center; }
.wish-toast {
    position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    padding: 10px 16px; border-radius: var(--radius-sm); background: var(--navy); color: var(--white); font-size: 14px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(8,17,36,.25); transition: opacity .2s, transform .2s;
}
.wish-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.has-compare-bar .wish-toast { bottom: 96px; }
.wish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--stack-block); align-items: start; }
.wish-layout:not(:has(.wish-owner:not([hidden]))) { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.wish-owner { order: 2; position: sticky; top: 100px; padding: var(--card-pad-lg); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); font-size: 14px; }
.wish-owner h2 { font-size: 18px; margin: 18px 0 6px; }
.wish-owner__note { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--light); }
.wish-owner label { display: block; font-weight: 600; margin-bottom: 6px; }
.wish-owner__row { display: flex; gap: var(--space-2); }
.wish-owner__row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.wish-owner__buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 10px 0 0; }
.wish-owner__edit { margin-top: var(--space-4); }
.wish-owner__edit summary { cursor: pointer; font-weight: 600; }
.wish-owner__edit h2 { margin-top: 0; font-size: 16px; }
.wish-owner__edit p { margin: 0 0 10px; }
.wish-owner__msg { min-height: 1.2em; margin: 10px 0 0; color: var(--price); }
.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); }
.wish-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.wish-item__img img { display: block; width: 96px; height: 96px; object-fit: contain; }
.wish-item__title { font-size: 16px; margin: 2px 0 4px; }
.wish-item__title a { color: inherit; text-decoration: none; }
@media (hover: hover) { .wish-item__title a:hover { color: var(--blue); } }
.wish-item__price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.wish-item__now { margin: 0; font-size: 20px; font-weight: 700; color: var(--price); }
.wish-item__now small { font-size: 12px; font-weight: 400; color: var(--text-soft); }
.wish-item__remove { border: 0; background: none; padding: 2px; font: inherit; font-size: 13px; color: var(--text-soft); text-decoration: underline; cursor: pointer; }
.wish-change { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.wish-change--down { color: var(--price); }
.wish-change--up { color: #C0263D; }
.wish-muted { margin: 0; font-size: 13px; color: var(--text-soft); }
.band .wish-muted { color: inherit; opacity: .8; }
.wish-legend { margin-top: var(--space-4); }
.wish-cta { margin-top: var(--space-6); }
/* Gast-herinnering: lijstje staat alleen in deze browser, account = nooit kwijt (2026-10-24). Navy/--text op wit/light ≥ 7:1 */
.wish-account { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); padding: var(--card-pad); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--light); color: var(--navy); }
.wish-account[hidden] { display: none; }
.wish-account p { flex: 1 1 260px; margin: 0; }
.wish-hint { position: fixed; z-index: 61; right: 16px; bottom: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; align-items: start; width: min(380px, calc(100% - 32px));
    padding: 14px 8px 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); color: var(--navy); font-size: 14px; box-shadow: 0 10px 30px rgba(8,17,36,.25); }
.wish-hint p { grid-column: 1; margin: 0; }
.wish-hint .btn { grid-column: 1; justify-self: start; }
.wish-hint__close { grid-column: 2; grid-row: 1; width: 44px; height: 44px; margin: -10px 0 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--navy); font-size: 24px; line-height: 1; cursor: pointer; }
.wish-hint__close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) { .wish-hint__close:hover { background: var(--light); } }
@media (max-width: 900px) {
    .wish-layout { grid-template-columns: minmax(0, 1fr); }
    .wish-owner { order: 0; position: static; }
}
@media (max-width: 767px) {
    /* Alleen het pictogram, de naam blijft voor schermlezers (anders heeft de link geen toegankelijke naam) */
    .wish-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .wish-link { padding: 6px; }
    .wish-link__count { top: 3px; left: auto; right: 1px; font-weight: 700; }
    .wish-item { grid-template-columns: 72px minmax(0, 1fr); }
    .wish-item__img img { width: 72px; height: 72px; }
    .wish-item__price { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
}

/* ---------- Advertenties (partials/ad-slot.blade.php) ----------
   Herkenbaar (label), nooit hoger dan ~een kwart scherm, ruimte vooraf gereserveerd, geen sticky/pop-up. */
.ad-slot { margin: var(--space-6) auto; max-width: 970px; }
.ad-slot[hidden], .ad[hidden] { display: none; }
.ad-slot__label { display: block; margin-bottom: 6px; text-align: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.ad a { display: block; width: min(100%, var(--ad-iw, 100%)); margin-inline: auto; border-radius: var(--radius); overflow: hidden; line-height: 0;
    border: 1px solid var(--border); background: var(--white); transition: box-shadow .2s; }
.ad a:focus-visible { box-shadow: var(--shadow-lg); }
@media (hover: hover) { .ad a:hover { box-shadow: var(--shadow-lg); } }
.ad img { display: block; width: 100%; height: auto; } /* breedte uit --ad-iw (partials/ad-slot): max. 260 px hoog */
.ad__frame { width: min(100%, var(--ad-w, 100%)); aspect-ratio: var(--ad-ratio, auto); margin-inline: auto; overflow: hidden; }
.ad__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Bannercode van een netwerk zet cookies: zonder toestemming niet tonen (site.js laadt hem pas na "Alles accepteren") */
html:not(.consent-granted) .ad--html { display: none; }
/* Tussen de producten: over de volle breedte van het raster */
.grid > .ad-slot { grid-column: 1 / -1; margin: 0; max-width: none; } /* de rastergap is de ruimte, net als tussen de kaarten */
.ad-slot--product { margin: var(--space-6) 0 0; max-width: none; }
.ad-slot--product .ad-slot__label { text-align: start; } /* smalle kolom: banner vult de breedte */
.ad-slot--home { margin-block: var(--space-2) var(--space-7); }
/* Zo groot als een productkaart: één vak in het raster, rekt mee met de rijhoogte; de afbeelding vult het vak (aanbevolen 300×500) */
.grid > .ad-slot--card { grid-column: auto; margin: 0; display: flex; flex-direction: column; min-width: 0; }
.ad-slot--card .ad-slot__label { margin: 0 0 var(--space-1); text-align: start; }
.ad-slot--card .ad:not([hidden]) { flex: 1; display: flex; min-height: 0; }
.ad-slot--card .ad a { flex: 1; width: 100%; }
.ad-slot--card .ad picture { display: block; height: 100%; }
.ad-slot--card .ad img { height: 100%; object-fit: cover; }
@media (max-width: 767px) {
    .ad-slot { margin-block: var(--space-4); }
    .ad a { width: min(100%, var(--ad-iw-m, var(--ad-iw, 100%))); } /* max. 200 px hoog */
    .grid > .ad-slot--card { margin: 0; }
    .ad-slot--card .ad a { width: 100%; }
    .ad__frame { width: min(100%, var(--ad-w-m, var(--ad-w, 100%))); aspect-ratio: var(--ad-ratio-m, var(--ad-ratio, auto)); }
}

/* ---------- Cadeaus per prijsklasse (/cadeaus-tot/10-euro) ---------- */
.catnav__item--gifts > .catnav__link { color: var(--accent); }
/* Uitschuifmenu (wit): goud haalt daar geen AA, dus de donkere accenttint */
@media (max-width: 1180px) { .catnav__item--gifts > .catnav__link, .catnav__item--gifts:focus-within > .catnav__link { color: var(--accent-text); } }
.gift-search { display: flex; gap: var(--space-2); max-width: 560px; margin: 18px 0 0; }
.gift-search input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--radius-sm); font: inherit; color: var(--navy); }
.gift-search input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.gift-budgets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: var(--space-1); }
.gift-budgets > span { font-weight: 600; opacity: .85; }
.gift-budgets .subcats { margin-top: 10px; }

/* ---------- Alle merken A–Z (/merken) ---------- */
.brands-index__tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    padding: var(--space-3) 0; background: var(--white); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.brands-index__filter { flex: 0 1 280px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; background: var(--light); }
.brands-index__filter:focus { outline: none; background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,58,169,.15); }
.az { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.az a { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: var(--radius-sm);
    font-weight: 700; color: var(--navy); text-decoration: none; background: var(--light); }
.az a:focus-visible { background: var(--accent); color: var(--navy); }
@media (hover: hover) { .az a:hover { background: var(--accent); color: var(--navy); } }
.az-group { padding: 18px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 130px; }
.az-group__letter { font-family: var(--font-head); font-size: 28px; margin: 0 0 10px; color: var(--blue); }
.az-group__list { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: var(--space-6); }
.az-group__list li { break-inside: avoid; display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.az-group__list a { color: var(--navy); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .az-group__list a:hover { color: var(--blue); text-decoration: underline; } }
.az-group__count { color: var(--text-soft); font-size: 13px; white-space: nowrap; }
.section.brands-index { padding-top: var(--space-6); }
/* Zoekformulier om het filtervak (?q=) en de actieve letterpagina (2026-10-23) */
.brands-index__search { display: flex; flex: 0 1 280px; }
.brands-index__search .brands-index__filter { flex: 1 1 auto; min-width: 0; font-size: max(16px, 1em); }
.az a[aria-current="page"] { background: var(--navy); color: var(--white); }

/* "A vs B"-vergelijkingen (versus/show): twee kaarten, conclusie, verschillen, links op product- en toplijstpagina's */
.versus { display: grid; gap: var(--space-7); }
.versus > *, .versus__card { min-width: 0; }
.versus h2 { font-size: 1.35rem; margin: 0 0 var(--space-3); }
.versus__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.versus__card { display: grid; gap: var(--space-2); align-content: start; justify-items: start; padding: var(--space-5); background: var(--white, #fff); border: 1px solid var(--border); border-radius: 16px; }
.versus__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-height: 220px; }
.versus__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.versus__name { font-size: 1.05rem !important; margin: 0 !important; line-height: 1.3; }
.versus__name a { color: var(--navy); text-decoration: none; }
@media (hover: hover) { .versus__name a:hover { text-decoration: underline; } }
.versus__price { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--price); }
.versus__price small { font-size: .8rem; font-weight: 500; color: var(--text-soft); }
.versus__shops { margin: 0; color: var(--text-soft); font-size: .9rem; }
.versus__verdict { padding: var(--space-5) var(--space-6); background: var(--light); border-radius: 16px; border-left: 4px solid var(--blue); }
.versus__verdict ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--navy); }
.versus__diffs dl { margin: 0; display: grid; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.versus__diffs dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); padding: 10px 16px; }
.versus__diffs dl > div:nth-child(odd) { background: var(--light); }
.versus__diffs dt { font-weight: 600; color: var(--navy); }
.versus__diffs dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.versus__vs { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--text-soft); }
.versus__related ul, .versus-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.versus__related a, .versus-links a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: 12px; color: var(--navy); text-decoration: none; font-weight: 600; }
@media (hover: hover) { .versus__related a:hover, .versus-links a:hover { border-color: var(--blue); color: var(--blue); } }
@media (max-width: 640px) {
    .versus__cards { gap: 10px; }
    .versus__card { padding: var(--space-3); }
    .versus__card .btn { padding-inline: var(--space-3); white-space: normal; text-align: center; }
    .versus__price { font-size: 1.2rem; }
    .versus__diffs dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Beweging (site-core Motion: koppen, cijfers, prijsverloop) ----------
   motion.css van site-core doet de beweging zelf (alleen transform/opacity, stil bij "minder beweging"); hier alleen
   wat OHS laat bewegen en hoe het eruitziet. */

/* Prijsdalers in cijfers (kop van /prijsdalers): cijfer boven, uitleg eronder */
.drop-stats { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin: 18px 0 0; }
.drop-stats div { display: flex; flex-direction: column-reverse; }
.drop-stats dt { font-size: 13px; color: #E3E9F7; }
.drop-stats dd { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight, 700); font-size: 30px; line-height: 1.15; color: var(--white); }

/* Koopblok: daling en verloop van de laagste prijs (3 maanden), klik naar de prijsgeschiedenis */
.buybox__trend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; color: var(--text-soft); text-decoration: none; }
.buybox__trend s { font-size: 14px; }
.buybox__spark { flex: 1 1 100%; color: var(--price); }
.buybox__spark .mo-spark { height: 36px; }
.buybox__trend-label { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .buybox__trend:hover .buybox__trend-label { color: var(--navy); } }

/* Prijsgeschiedenis: de grafiek loopt van links (oudste dag) naar rechts (vandaag) in beeld, ook bij het wisselen van
   periode. clip-path i.p.v. stroke-dasharray: dat botst in Chrome met vector-effect="non-scaling-stroke" */
.motion .price-history__chart svg { clip-path: inset(-8px -8px -8px 0); transition: clip-path calc(var(--mo-duration) * 2) var(--mo-ease); }
.motion [data-motion]:not(.is-inview) .price-history__chart svg { clip-path: inset(-8px 100% -8px 0); transition: none; }

/* Prijzen en tabellen met cijfers van gelijke breedte: kolommen en "vanaf"-prijzen springen niet bij elke prijs (playbook 08, 2026-10-23) */
.card__price, .offer__price, .buybox__price, .sticky-buy__price, .best-item__price, .versus__price, .season-list__price, .aprod__price,
.account-list__price, .wish-item__price, .variants__price, .compare-table__price, .suggest__price, .last-seen__price,
.compare-table, .az-group__count, table { font-variant-numeric: tabular-nums; }

/* Menuknoppen: site.js maakt van de labels echte <button>s; zelfde uiterlijk als het label (2026-10-23) */
button.menu-btn, button.catnav__close { border: 0; background-color: transparent; padding: 0; font-family: inherit; }
button.catnav__close { color: inherit; }

/* Sinterklaas-hubs (2026-10-23): antwoord met bron, datumtabel, links tussen de hubs */
.hub-source { display: block; margin-top: 6px; font-size: 14px; }
.hub-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.hub-table table { min-width: 0; }
.hub-table th { width: 40%; font-weight: 600; color: var(--navy); }
.hub-table td { font-variant-numeric: tabular-nums; }
.hub-nav h2 { margin: 0 0 var(--stack-head); }
.hub-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hub-nav__list a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--border); }
@media (hover: hover) { .hub-nav__list a:hover { box-shadow: inset 0 0 0 2px var(--blue); } }
.hub-nav__list a[aria-current] { background: var(--navy); color: var(--white); box-shadow: none; }
/* Budgetknoppen boven de cadeaurijen op de homepage: alleen op mobiel (desktop heeft het menu "Cadeaus" en de budgetkeuze) */
.home-budgets { padding-block: var(--space-4); } /* ook ruimte onder de knoppen: ze raakten de volgende (gekleurde) sectie */
.home-budgets .hub-nav__list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: var(--space-1); }
.home-budgets .hub-nav__list a { white-space: nowrap; }
@media (min-width: 768px) { .home-budgets { display: none; } }
/* ---------- Amazon-boeken zonder prijs (AmazonBooks, 2026-10-23) ---------- */
/* Omslag staand (3:4); zonder omslag een getekende kaft met de titel: kleuren uit het thema, contrast ≥ 7:1 (wit/navy, navy/accent) */
.card__img--book, .book-media { aspect-ratio: 3 / 4; }
.book-media { padding: var(--space-4); }
.card__img--book img, .book-media img { height: 100%; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.book-cover {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); height: 100%; aspect-ratio: 3 / 4; max-width: 100%;
    margin-inline: auto; padding: 14% 10% 10%; border-radius: 4px 8px 8px 4px; overflow: hidden; overflow-wrap: anywhere;
    background: var(--navy); color: var(--white); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .18), var(--shadow);
}
.book-cover__brand { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.book-cover__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(15px, 1.6vw, 22px); line-height: 1.15; }
.book-cover--c1 { background: var(--navy-2); }
.book-cover--c2 { background: var(--light); color: var(--navy); box-shadow: inset 6px 0 0 var(--border), inset 0 0 0 1px var(--border); }
.book-cover--c3 { background: var(--accent); color: var(--navy); }
.book-attribution, .book-source { margin-top: var(--space-2); font-size: 13px; color: var(--text-soft); }
.book-attribution a, .book-source a { color: inherit; }
.buybox--amazon .buybox__note { margin-bottom: var(--space-3); color: var(--text); }
.buybox--amazon .buybox__disclosure { margin-top: 10px; font-size: 13px; color: var(--text-soft); }
.book-description { margin-bottom: var(--space-5); }
.book-facts h2 { font-size: 20px; margin-bottom: 10px; }
.book-facts dl { display: grid; gap: 0; border-top: 1px solid var(--border); }
.book-facts dl > div { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.book-facts dt { color: var(--text-soft); }
.book-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.amazon-books { margin-top: var(--stack-block); }
.amazon-books h2 { margin-bottom: 6px; }
.amazon-books__text { margin: 0 0 var(--space-4); font-size: 14px; color: var(--text-soft); max-width: 80ch; }
.rail + .amazon-books__text { margin-top: var(--space-3); }
.listing:has(.results--books) { grid-template-columns: minmax(0, 1fr); }
.results--books .amazon-books { margin-top: 0; }

/* ---------- Sinterklaas-hubs: menu-item, homepagekaarten, footergroep (sinterklaasvoordeel, 2026-10-24) ----------
   Eigenaar: "Staan die links ook ergens duidelijk? Of alleen in de footer?". Basis hier (werkt ook als het feestthema in
   /admin uit staat); de papierknipsel-look staat in festive-sinterklaas.css (blok "Sinterklaas-hubs"). */
.catnav__item--sint > .catnav__link { color: var(--accent); }
@media (max-width: 1180px) { .catnav__item--sint > .catnav__link, .catnav__item--sint:focus-within > .catnav__link { color: var(--accent-text); } }
.catnav .mega .mega__group-title[aria-current] { color: var(--accent-text); }
/* Desktop: de drie hubs + budgetten naast elkaar (kolommen zouden "Lootjes" onder "Sinterklaas" zetten) */
@media (min-width: 1181px) { .catnav__item--sint .mega__cols { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; } }
.mega__desc { margin: 2px 0 0; max-width: 40ch; color: var(--text); font-size: 14px; line-height: 1.5; }
.mega__budgets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.catnav .mega .mega__budgets a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--white); color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .catnav .mega .mega__budgets a:hover { background: var(--light); border-color: var(--navy); } }
@media (max-width: 1180px) { .mega__desc { display: none; } } /* uitschuifmenu: alleen de (beschrijvende) links */
.catnav__item--sint .mega__group > span.mega__group-title { display: block; padding: 4px 0; color: var(--navy); }
@media (max-width: 1180px) { .catnav__item--sint .mega__group:has(> span.mega__group-title) { display: none; } } /* budgetten staan al onder "Cadeaus" */

.sk-hubs { padding-block: var(--space-5) var(--space-2); }
.sk-hubs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 899px) { .sk-hubs__list { grid-template-columns: minmax(0, 1fr); } }
.sk-hub {
    position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px;
    padding: var(--card-pad); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
}
.sk-hub:not(:has(.sk-hub__art)) { grid-template-columns: minmax(0, 1fr); } /* feestthema uit: zonder illustratie */
.sk-hub__art { width: 88px; height: 72px; object-fit: contain; } /* vaste maat: geen verspringen bij laden */
.sk-hub__body { min-width: 0; }
.sk-hub__title { margin: 0; font-size: 19px; line-height: 1.25; color: var(--navy-2); }
.sk-hub__text { margin: 2px 0 6px; font-size: 14px; line-height: 1.5; color: var(--text); }
.sk-hub__link { display: inline; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: break-word; }
.sk-hub__link.chev::after { margin-left: var(--space-1); text-decoration: none; display: inline-block; } /* pijltje direct achter de tekst, ook als die afbreekt */
.sk-hub__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* hele kaart klikbaar */
.sk-hub__link:focus-visible { outline: none; }
.sk-hub:has(.sk-hub__link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) { .sk-hub:hover .sk-hub__link { text-decoration-thickness: 2px; } }
@media (max-width: 380px) { .sk-hub { grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); } .sk-hub__art { width: 56px; height: 48px; } }

.footer .cols:has(.footer__sint) { grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 1180px) { .footer .cols:has(.footer__sint) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .footer .cols:has(.footer__sint) { grid-template-columns: 1fr; } }

/* ---------- Lootjes trekken (Mijn account + pagina van een deelnemer, 2026-10-24; App\Support\Lootjes) ---------- */
/* Velden die site-core's accountformulier nog niet opmaakt (datum, tekstvak) in dezelfde stijl; inputs ≥ 16px (iOS zoomt niet) */
.lootjes .sc-account__form :is(input[type=date], textarea), .lootjes-form textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, 1rem); color: var(--navy); background: var(--white);
    border: 1px solid #71717a; border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px;
}
.lootjes textarea, .lootjes-form textarea { resize: vertical; line-height: 1.5; }
.lootjes .sc-account__form :is(input, select, textarea)[aria-invalid="true"], .lootjes-form textarea[aria-invalid="true"] { border: 2px solid #b91c1c; }
.lootjes__row { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); }
.lootjes__row > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
@media (min-width: 640px) { .lootjes__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lootjes__hint { margin: 2px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
/* Melding bij de knop die een account maakt (site-core v1.58 AgeCheck::notice, i.p.v. een vinkje) */
.lootjes-page .sc-account__notice { margin: var(--space-1) 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.5; }
.lootjes-page .sc-account__notice a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.lootjes__field-error { margin: 2px 0 0; color: #991b1b; font-weight: 600; font-size: 15px; }
.lootjes__notice { margin: 0 0 var(--space-3); padding: 10px 14px; border-radius: var(--radius-sm); background: #fffbeb; color: #78350f; border: 1px solid #fcd34d; }
.lootjes__privacy { margin: 14px 0 0; color: var(--text-soft); font-size: 15px; max-width: 42rem; }
.lootjes__privacy a { color: inherit; }
.lootjes__back { margin: 0; }
.lootjes__count { color: var(--text-soft); font-weight: 400; }
.lootjes__groups, .lootjes__people { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.lootjes__group { display: grid; gap: 2px; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.lootjes__group:first-child { border-top: 0; padding-top: var(--space-1); }
.lootjes__group-name { font-size: 1.05rem; overflow-wrap: anywhere; }
.lootjes__group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lootjes__badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.lootjes__badge--waiting { background: #FEF3C7; color: #78350F; }
.lootjes__badge--drawn { background: #DCFCE7; color: #14532D; }
.lootjes__badge--past { background: #E5E7EB; color: #374151; }
.lootjes__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.lootjes__actions form { margin: 0; }
.lootjes__manage-title { margin: var(--space-6) 0 var(--space-2); }
.lootjes__badge--wishlist { background: #DBEAFE; color: #1E3A8A; }
.lootjes__type { border: 0; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; }
.lootjes__type legend { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.lootjes__share-url { display: grid; gap: 4px; }
.lootjes__share-url input { width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, 1rem); padding: 10px 12px; border: 1px solid #71717a; border-radius: var(--radius-sm); }
.lootjes-share-form { display: grid; gap: var(--space-3); text-align: left; justify-self: stretch; }
.lootjes-share-form input[type=text], .lootjes-share-form input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, 1rem); padding: 10px 12px; min-height: 44px; border: 1px solid #71717a; border-radius: var(--radius-sm); }
.lootjes-share-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lootjes-cta__count { margin: 0 0 var(--space-3); font-weight: 700; color: var(--navy); }
.wish-paper__claim { font-size: 14px; font-weight: 700; color: #14532D; background: #DCFCE7; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.wish-paper__claim--mine { color: #1E3A8A; background: #DBEAFE; }
.lootje-live .lootjes-card__lead { text-align: center; font-weight: 700; }
.lootje-live__now { justify-self: center; }
.lootjes__person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: 10px 0; border-top: 1px solid var(--border); }
.lootjes__person:first-child { border-top: 0; }
.lootjes__person form { margin: 0; }
.lootjes__person .sc-account__link-button { min-height: 44px; }
.lootjes__who { display: grid; gap: 1px; min-width: 0; flex: 1 1 14rem; }
.lootjes__name { font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.lootjes__you { font-weight: 400; color: var(--text-soft); }
.lootjes__email, .lootjes__state { color: var(--text-soft); font-size: 15px; overflow-wrap: anywhere; }
.lootjes__add { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.lootjes__reset { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.lootjes__drawn-name { margin: 0; font-family: var(--font-head); font-size: clamp(28px, 6vw, 40px); font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.lootjes__wish { white-space: pre-line; overflow-wrap: anywhere; margin: 0; color: var(--text); }
.lootjes__status { margin: 0 0 var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm); background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.lootjes__secret { margin: 18px 0 0; font-weight: 600; color: var(--navy); }

/* Pagina van een deelnemer: smalle kolom met kaarten */
.lootjes-page { max-width: 44rem; display: grid; gap: var(--space-5); }
.lootjes-page__band .container { padding-block: 20px 24px; }
.lootjes-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(18px, 4vw, 32px); min-width: 0; }
.lootjes-card > :first-child { margin-top: 0; }
.lootjes-card__lead { font-size: 18px; margin: 0 0 var(--space-4); color: var(--navy); overflow-wrap: anywhere; }
.lootjes-card__label { margin: 0; font-weight: 600; color: var(--text-soft); }
.lootjes-card__name { margin: var(--space-1) 0 var(--space-4); font-family: var(--font-head); font-size: clamp(34px, 9vw, 56px); line-height: 1.05; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.lootjes-card__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 var(--space-2); }
.lootjes-card__facts div { min-width: 0; }
.lootjes-card__facts dt { font-size: 14px; color: var(--text-soft); }
.lootjes-card__facts dd { margin: 0; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.lootjes-card__h { font-size: 20px; margin: 22px 0 6px; }
.lootjes-card__link { color: var(--navy); font-weight: 700; }
.lootjes-form { display: grid; gap: var(--space-2); }
.lootjes-form .lootjes-card__h { margin-top: 0; }
/* Nieuwe groep: de organisator staat er standaard bij (deelnemer #1), met een vinkje om alleen te organiseren */
.lootjes__self-join { margin: var(--space-2) 0; padding: 12px 14px; border: 1px dashed #D8C3A0; border-radius: 6px; }
.lootjes__self-line { margin: 0; display: flex; flex-wrap: wrap; column-gap: 8px; }
.lootjes-form__check { display: flex; gap: 10px; align-items: flex-start; margin: var(--space-1) 0; }
.lootjes-form__check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: #b91c1c; }
.lootjes-form__button, .lootjes-card__button, .lootjes-form__danger { justify-self: start; }
.lootjes-form__danger { background: #b91c1c; color: var(--white); }
@media (hover: hover) { .lootjes-form__danger:hover { background: #991b1b; box-shadow: none; } }
.lootjes-page :is(a, button, input, textarea):focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lootjes-form :is(.wish-links__field, .wish-editor__combo, .wish-editor__text) :is(input[type=text], textarea), .wish-editor__combo input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, 1rem); color: var(--navy); background: var(--white);
    border: 1px solid #71717a; border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px;
}
.lootjes-form [aria-invalid="true"] { border: 2px solid #b91c1c !important; }
/* Verlanglijstje (2026-10-24, App\Support\WishLinks): editor (zoeken, link, tekst) en het lijstje als gelinieerd papier */
.wish-editor { display: grid; gap: var(--space-4); }
.wish-editor > form { display: grid; gap: 6px; }
.wish-editor label, .wish-links__legend { font-weight: 700; color: var(--navy); }
.wish-links__fieldset { border: 0; margin: 0; padding: var(--space-3) 0 0; border-top: 1px dashed var(--border); min-width: 0; display: grid; gap: var(--space-2); }
.wish-links__legend { padding: 0; font-size: 17px; }
.wish-links__field { display: grid; gap: 4px; min-width: 0; }
.lootjes__optional { font-weight: 400; color: var(--text-soft); }
.wish-editor__combo { position: relative; }
.wish-editor__options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--white);
    border: 1px solid #71717a; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; }
.wish-editor__option { display: flex; gap: 10px; align-items: center; padding: 8px; min-height: 44px; border-radius: 6px; cursor: pointer; color: var(--navy); }
.wish-editor__option img, .wish-editor__found img { width: 40px; height: 40px; object-fit: contain; flex: none; background: var(--white); }
.wish-editor__option[aria-selected="true"] { background: #E8EEFB; outline: 2px solid var(--blue); outline-offset: -2px; }
@media (hover: hover) { .wish-editor__option:hover { background: #E8EEFB; } }
.wish-editor__go { justify-self: start; }
.wish-editor__found { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wish-editor__found form { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.wish-editor__found-title { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--navy); }
.wish-editor__text textarea { min-height: 88px; }
.wish-editor .lootjes-form__button { justify-self: start; }
/* Verlanglijstje als een vel papier (eigenaar 2026-10-25: geen schoolschriftlijnen meer): genummerd, een stippellijn tussen
   elke wens; alleen de titel in de koptekstletter. Nummer #9B1C26 op #FFFDF7 7,9:1 */
.wish-paper { position: relative; margin: var(--space-3) 0 0; padding: var(--space-3); background: #FFFDF7; border: 1px solid #E6DCC8;
    border-radius: 4px; box-shadow: 0 1px 0 #E6DCC8, 0 6px 16px rgba(62,36,22,.08); }
.wish-paper__title { margin: 0 0 var(--space-1); font-family: var(--font-head); font-size: 22px; color: var(--navy); }
.wish-paper__list { list-style: none; counter-reset: wish; margin: 0; padding: 0; }
.wish-paper__item { counter-increment: wish; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); min-height: 48px; line-height: 1.35; padding: 6px 0; }
.wish-paper__item + .wish-paper__item { border-top: 2px dashed #E3CBA8; }
.wish-paper__item::before { content: counter(wish) "."; flex: none; min-width: 1.6em; text-align: right; color: #9B1C26; font-weight: 700; }
.wish-paper__item--text::before { content: "\2022"; }
.wish-paper__item.is-dragging { opacity: .5; }
.wish-paper__item[draggable="true"] { cursor: grab; }
.wish-paper__text { flex: 1 1 11em; min-width: 0; /* smal scherm: knoppen eronder i.p.v. de naam in een smal kolommetje */ display: flex; flex-wrap: wrap; column-gap: 8px; overflow-wrap: anywhere; }
.wish-paper__name, .wish-paper__link { color: var(--navy); font-weight: 600; }
.wish-paper__link { text-decoration: underline; text-underline-offset: 2px; }
.wish-paper__meta { color: var(--text-soft); font-size: 15px; font-weight: 400; }
.wish-paper__tools { display: flex; gap: 2px; margin: 0 0 0 auto; flex: none; }
.wish-paper__tool { min-width: 44px; min-height: 44px; border: 1px solid transparent; background: transparent; color: var(--navy); font-size: 20px; border-radius: 6px; cursor: pointer; }
@media (hover: hover) { .wish-paper__tool:hover { border-color: var(--border); background: var(--white); } }
.wish-paper__tool--remove { color: #991b1b; }
.wish-paper__empty { margin: 0; color: var(--text-soft); }
.wish-links__disclosure { margin: var(--space-2) 0 0; color: var(--text-soft); font-size: 14px; }
/* Dicht lootje (CSS-papier) en spannend openen (lootjes._reveal): 3-2-1, openvouwen, confetti/pepernoten */
.lootjes-card--closed { text-align: center; display: grid; justify-items: center; gap: var(--space-3); }
.lootjes-card--closed .lootjes-card__lead { text-align: left; justify-self: stretch; }
.lootje-paper { position: relative; width: 168px; height: 120px; perspective: 600px; margin: var(--space-2) auto; }
.lootje-paper__body { position: absolute; inset: 0; background: #FBF4E8; border: 1px solid #D8B78C; border-radius: 3px; box-shadow: 0 8px 18px rgba(62,36,22,.18); }
.lootje-paper__flap { position: absolute; left: 0; right: 0; top: 0; height: 50%; background: #F1E3C8; border: 1px solid #D8B78C; border-radius: 3px 3px 0 0;
    transform-origin: bottom center; transition: transform .6s cubic-bezier(.3,1.4,.5,1); box-shadow: inset 0 -2px 0 rgba(62,36,22,.08); }
.lootje-paper__seal { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #B3202E; box-shadow: inset 0 0 0 4px #9B1C26; transition: transform .3s, opacity .3s; }
.lootje-reveal { display: grid; justify-items: center; }
.lootje-reveal__stage { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) 0; }
.lootje-reveal__count { margin: 0; min-height: 1.1em; font-family: var(--font-head); font-size: clamp(56px, 16vw, 96px); line-height: 1; font-weight: 700; color: #9B1C26; }
.lootje-reveal__count.is-tick { animation: lootje-tick .7s ease-out; }
.lootje-reveal__stage.is-open .lootje-paper__flap { transform: rotateX(180deg); }
.lootje-reveal__stage.is-open .lootje-paper__seal { transform: scale(0); opacity: 0; }
.lootje-reveal__stage.is-open .lootje-paper { animation: lootje-shake .5s ease-in-out; }
[data-lootje-card].is-waiting { visibility: hidden; height: 0; overflow: hidden; padding: 0; border: 0; margin: 0; }
[data-lootje-card].is-revealed { animation: lootje-pop .55s cubic-bezier(.2,1.3,.4,1); }
[data-lootje-card] [data-lootje-name]:focus { outline: 3px solid var(--blue); outline-offset: 4px; }
.lootje-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.lootje-confetti span { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: lootje-fall 2.6s cubic-bezier(.3,.6,.5,1) forwards; }
.lootje-confetti .lootje-confetti__nut { width: 14px; height: 14px; border-radius: 50%; background: #8B5A2B !important; box-shadow: inset -2px -2px 0 rgba(0,0,0,.2); }
@keyframes lootje-tick { from { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }
@keyframes lootje-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes lootje-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lootje-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lootje-fall { to { transform: translate(var(--drift, 0), 105vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
    .lootje-reveal__count.is-tick, .lootje-reveal__stage.is-open .lootje-paper, .lootje-confetti span { animation: none; }
    .lootje-paper__flap, .lootje-paper__seal { transition: none; }
    [data-lootje-card].is-revealed { animation: lootje-fade .3s ease-out; }
}

/* Link naar Lootjes trekken op de Sinterklaas-hubs en de homepage */
.lootjes-cta { padding-block: var(--space-6); }
.lootjes-cta--compact { padding-block: var(--space-2) var(--space-6); }
.lootjes-cta__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--card-pad-lg) var(--space-6);
    background: var(--light); border: 1px solid var(--border); border-radius: var(--radius); }
.lootjes-cta__card:not(:has(.lootjes-cta__art)) { grid-template-columns: minmax(0, 1fr); }
.lootjes-cta__art { width: 120px; height: 96px; object-fit: contain; }
.lootjes-cta__body { min-width: 0; }
.lootjes-cta__title { margin: 0 0 var(--space-1); font-size: clamp(20px, 2.4vw, 26px); }
.lootjes-cta__text { margin: 0 0 var(--space-3); max-width: 60ch; }
@media (max-width: 520px) { .lootjes-cta__card { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .lootjes-cta__art { width: 88px; height: 70px; } }

/* ---------- CMS-pagina's met blokken (site-core v1.54, App\Support\OhsCmsPages / OhsBlocks) ---------- */
.block-ohs__intro { margin: var(--space-2) 0 0; color: var(--text); max-width: 70ch; }
.block-ohs__versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); align-items: center; max-width: 720px; }
.block-ohs__vs { font: 700 1.5rem/1 var(--font-head); color: var(--navy); text-transform: uppercase; }
.block-ohs__table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
.block-ohs__table:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.block-ohs__table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem; }
.block-ohs__table th, .block-ohs__table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); color: var(--navy); }
.block-ohs__table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text); background: var(--light); }
.block-ohs__table tbody tr:last-child > * { border-bottom: 0; }
.block-ohs__table a { color: var(--blue); }
.block-ohs__late { color: #9F1239; font-weight: 600; } /* 7.3:1 op wit */
.block-ohs__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin: 0; }
.block-ohs__stats > div { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--light); }
.block-ohs__stats dt { color: var(--text); font-size: .9rem; }
.block-ohs__stats dd { margin: var(--space-1) 0 0; font: 700 2rem/1.1 var(--font-head); color: var(--navy); font-variant-numeric: tabular-nums; }
/* Generieke blokken van site-core (tekst, FAQ, kaarten, aftellen, inhoudsopgave) in de OHS-huisstijl */
.cms-page .block { margin-block: var(--space-7); }
.cms-page .block > h2 { margin: 0 0 var(--space-4); }
.cms-page .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cms-page li.card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.cms-page li.card h3 { margin: 0 0 var(--space-2); font-size: 1.1rem; }
.cms-page li.card a { color: var(--blue); }
.cms-page .muted { color: var(--text-soft); font-size: .875rem; margin: 0; }
.cms-page .block--countdown { padding: var(--space-6); border-radius: var(--radius); background: var(--navy); color: var(--white); }
.cms-page .block--countdown h2 { color: var(--white); }
.cms-page .block--countdown .muted { color: var(--muted-on-dark); } /* 9.6:1 op navy */
.cms-page .countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin: 0; }
.cms-page .countdown__part strong { font: 700 clamp(2rem, 7vw, 3rem)/1 var(--font-head); color: var(--accent); font-variant-numeric: tabular-nums; } /* 6.9:1 op navy */
.cms-page .block--toc { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--light); }
.cms-page .block--toc ol { margin: var(--space-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.cms-page .block--toc a { color: var(--blue); }
@media (max-width: 520px) {
    .block-ohs__versus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .block-ohs__vs { display: none; }
}

/* ---------- EU-energielabel (EPREL, 2026-10-29): pijl in de kleur van de klasse bij de prijs. Donkere tekst op elke kleur
   (contrast ≥ 5:1), alleen op rood wit (5:1). Geen beweging, vaste hoogte: geen verschuiving bij het laden. ---------- */
.energy { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; text-decoration: none; color: var(--text); font-size: 13px; line-height: 1.2; }
.energy__arrow {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 46px; height: 26px; padding: 0 16px 0 8px;
    font-family: var(--font-head); font-weight: 800; font-size: 15px; letter-spacing: .02em; color: #111; background: var(--energy-bg, #ED1C24);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.energy--0 { --energy-bg: #00A651; } .energy--1 { --energy-bg: #50B848; } .energy--2 { --energy-bg: #BFD730; } .energy--3 { --energy-bg: #FFF200; }
.energy--4 { --energy-bg: #FDB913; } .energy--5 { --energy-bg: #F37021; } .energy--6 { --energy-bg: #ED1C24; }
.energy--6 .energy__arrow { color: #fff; }
.energy__scale { font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.energy__text { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .energy:hover .energy__text { text-decoration-thickness: 2px; } }
.energy:focus-visible .energy__text { text-decoration-thickness: 2px; }
.energy:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.energy--compact { gap: 0; min-height: 0; }
.energy--compact .energy__arrow { height: 22px; min-width: 38px; font-size: 13px; padding: 0 14px 0 7px; }
.buybox__energy { margin: 0 0 var(--space-3); }