/*
 * Draken — de storefront.
 *
 * Geen bouwstap, geen framework. Cascade-lagen zodat de volgorde in het
 * bestand niet bepaalt wie wint, maar de laag.
 */

@layer basis, opmaak, onderdelen, winkel, hulpmiddelen;

/* ═══════════════════════════════════════════════════════════════ basis ══ */

@layer basis {
    *, *::before, *::after { box-sizing: border-box; }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: 96px;
    }

    body {
        margin: 0;
        min-height: 100dvh;
        background: var(--grond);
        color: var(--inkt);
        font-family: var(--tekst-font);
        font-size: var(--tekst-m);
        line-height: var(--regel-normaal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: hidden;
    }

    h1, h2, h3, h4 {
        margin: 0;
        font-family: var(--kop-font);
        font-weight: 700;
        line-height: var(--regel-kop);
        letter-spacing: var(--spatie-titel);
        text-wrap: balance;
    }

    h1 { font-size: var(--tekst-3xl); letter-spacing: var(--spatie-kop); }
    h2 { font-size: var(--tekst-2xl); }
    h3 { font-size: var(--tekst-xl); }

    p { margin: 0; text-wrap: pretty; }

    a {
        color: inherit;
        text-decoration: none;
        transition: color var(--duur-snel) var(--soepel);
    }

    img, svg, video { display: block; max-width: 100%; }
    img { height: auto; }

    button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
    button { cursor: pointer; background: none; border: none; padding: 0; }

    ul, ol { margin: 0; padding: 0; list-style: none; }

    /*
     * De focusring. Geel op inkt, inkt op geel — hij moet zichtbaar zijn op
     * élke achtergrond die dit thema kent, en dat is precies waarom hij
     * dubbel is: een donkere kern met een gele gloed eromheen.
     */
    :focus-visible {
        outline: 2px solid var(--inkt);
        outline-offset: 2px;
        box-shadow: 0 0 0 5px var(--accent-waas);
        border-radius: var(--radius-s);
    }

    :focus:not(:focus-visible) { outline: none; }

    ::selection { background: var(--accent); color: var(--op-accent); }

    /* De overslaan-link. Onzichtbaar tot iemand op tab drukt, en dan het
       eerste wat er staat. Verplicht voor toegankelijkheid en bijna altijd
       vergeten. */
    .sla-over {
        position: absolute;
        left: var(--ruimte-4);
        top: -100px;
        z-index: var(--laag-melding);
        padding: var(--ruimte-3) var(--ruimte-5);
        background: var(--inkt);
        color: var(--grond);
        border-radius: var(--radius-m);
        font-weight: 600;
        transition: top var(--duur-normaal) var(--soepel);
    }

    .sla-over:focus { top: var(--ruimte-4); }
}

/* ══════════════════════════════════════════════════════════════ opmaak ══ */

@layer opmaak {
    .omhulsel {
        width: 100%;
        max-width: var(--breedte);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .omhulsel--smal { max-width: var(--breedte-smal); }

    .sectie { padding-block: clamp(var(--ruimte-12), 8vw, var(--ruimte-24)); }
    .sectie--krap { padding-block: var(--ruimte-10); }

    .stapel > * + * { margin-top: var(--ruimte-6); }
    .stapel-klein > * + * { margin-top: var(--ruimte-3); }
    .stapel-groot > * + * { margin-top: var(--ruimte-10); }

    .rij {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
    }

    .rij--tussen { justify-content: space-between; }
    .rij--wikkel { flex-wrap: wrap; }
    .rij--top { align-items: flex-start; }
    .duw { margin-left: auto; }

    /* ─────────────────────────────────────────────────────────── de kop ── */

    .siteKop {
        position: sticky;
        top: 0;
        z-index: var(--laag-plakkend);
        background: color-mix(in oklab, var(--grond) 88%, transparent);
        backdrop-filter: blur(14px) saturate(180%);
        border-bottom: 1px solid var(--lijn);
    }

    .siteKop__balk {
        display: flex;
        align-items: center;
        gap: var(--ruimte-5);
        height: 68px;
    }

    .merk {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: 1.0625rem;
        letter-spacing: var(--spatie-kop);
        white-space: nowrap;
    }

    .merk__vonk { color: var(--accent-tekst, var(--accent-diep)); flex-shrink: 0; }

    /* Het logo van de klant. De hoogte is een token zodat een thema met een
       breed liggend logo er meer ruimte aan kan geven zonder de kop te breken;
       de breedte volgt de verhouding en wordt afgetopt op smalle schermen. */
    .merk--beeld { gap: 0; }

    .merk__logo {
        height: var(--merk-hoogte, 44px);
        width: auto;
        max-width: min(62vw, 260px);
        object-fit: contain;
        display: block;
    }

    .siteVoet .merk__logo { height: var(--merk-hoogte-voet, 40px); }

    /*
     * Twee logo's, één zichtbaar. Het aangeleverde bestand is bijna altijd
     * zwarte letters op wit; op een donkere kop is dat een lichtbak met
     * onleesbare tekst. Staat er een tweede bestand klaar voor de donkere
     * stand, dan wisselt het hier. Is er geen, dan rendert het sjabloon het
     * tweede beeld niet en verandert er niets.
     */
    .merk__logo--licht { display: none; }

    /* Wisselen mag alleen als er ook echt twee bestanden zijn. Die klasse zet
       het sjabloon; zonder die controle verdween het logo van elke winkel die
       maar één bestand heeft, want dan werd het enige beeld verborgen. */
    .merk--twee .merk__logo--licht { display: none; }

    :root[data-thema="donker"] .merk--twee .merk__logo--donker { display: none; }
    :root[data-thema="donker"] .merk--twee .merk__logo--licht { display: block; }

    @media (prefers-color-scheme: dark) {
        :root:not([data-thema="licht"]) .merk--twee .merk__logo--donker { display: none; }
        :root:not([data-thema="licht"]) .merk--twee .merk__logo--licht { display: block; }
    }

    @media (max-width: 720px) {
        .merk__logo { height: calc(var(--merk-hoogte, 44px) * 0.8); }
    }

    :root[data-thema="donker"] .merk__vonk,
    :root:not([data-thema="licht"]) .merk__vonk { color: var(--accent); }

    .hoofdnav {
        display: flex;
        align-items: center;
        gap: var(--ruimte-1);
    }

    .hoofdnav__link {
        position: relative;
        padding: var(--ruimte-2) var(--ruimte-3);
        border-radius: var(--radius-m);
        font-weight: 550;
        font-size: var(--tekst-m);
        color: var(--inkt-zacht);
        white-space: nowrap;
        transition: color var(--duur-snel) var(--soepel), background-color var(--duur-snel) var(--soepel);
    }

    .hoofdnav__link:hover { color: var(--inkt); background: var(--grond-diep); }

    /*
     * De actieve navigatie. Het gele streepje is drie pixels hoog en zit
     * onder het woord — niet eromheen. Dat is het verschil tussen "gemarkeerd"
     * en "hier ben je", en het is een van de weinige plekken waar het geel
     * mag komen.
     */
    .hoofdnav__link[aria-current] { color: var(--inkt); }

    .hoofdnav__link[aria-current]::after {
        content: "";
        position: absolute;
        left: var(--ruimte-3);
        right: var(--ruimte-3);
        bottom: 2px;
        height: 3px;
        background: var(--accent);
        border-radius: 2px;
    }

    .kopActies {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--ruimte-1);
        min-width: 0;

        /* Zoeken, taal, wagen en menu zijn de vier deuren van de winkel; die
         * horen hun maat te houden. Ze stonden op `min-width: 0` en gaven dus
         * mee zodra de naam van de zaak te lang werd: op 320 px werd deze rij
         * tot 118 px geknepen en staken de knoppen 6 px voorbij de rand, zodat
         * de hele bladzijde zijwaarts schoof. Nu geeft de naam mee, niet de
         * knoppen. (19 september 2026) */
        flex: 0 0 auto;
    }

    /* De naam van de zaak is het enige in de kop dat mag inbinden. Zonder dit
       duwt een lange naam met `white-space: nowrap` de knoppen van het
       scherm af. */
    .siteKop__balk > .merk { min-width: 0; overflow: hidden; }

    /* En dan met drie puntjes, niet met een doorgesneden letter. */
    .siteKop__balk > .merk > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Op de smalste telefoons (320 px) is er na vier knoppen van 44 px niets
       over. Een krappere tussenruimte geeft de naam van de zaak die ruimte
       terug, zodat er meestal geen puntjes nodig zijn. */
    @media (max-width: 26.25rem) {
        .siteKop__balk { gap: var(--ruimte-3); }
    }

    /*
     * Het zoekveld krijgt ruimte zodra het opengaat.
     *
     * Het stond tussen de pictogrammen in en kreeg wat er overbleef: op een
     * laptop vierendertig pixels, op een telefoon vierennegentig. Je ziet dan
     * niet wat je zelf ingetypt hebt, en dat is precies wat er gemeld werd.
     * Open neemt het nu de ruimte van de kopbalk; op een telefoon zakt het
     * naar een eigen regel eronder en loopt het van rand tot rand.
     */
    .siteKop__balk { position: relative; }

    .kopActies form[data-zoekformulier] .invoer { width: 100%; }

    /* Het open veld legt zich over de balk heen in plaats van ertussen te
       moeten passen. Naast de pictogrammen is er eenvoudigweg geen ruimte:
       tussen het menu en het wagentje bleef er vierendertig pixels over.
       Rechts blijft er plek staan voor de knoppen, zodat het vergrootglas het
       veld ook weer kan sluiten. De hoogte van de balk verandert niet. */
    .kopActies form[data-zoekformulier]:not(.verborgen) {
        position: absolute;
        inset-inline: 0 var(--zoek-ruimte, 190px);
        top: 50%;
        translate: 0 -50%;
        max-width: none;
        z-index: 2;
    }

    /* Wat eronder ligt, gaat weg zolang er gezocht wordt. Anders steekt er een
       halve menuterm onder het veld uit en oogt de kop stuk. */
    .siteKop__balk:has(form[data-zoekformulier]:not(.verborgen)) .merk,
    .siteKop__balk:has(form[data-zoekformulier]:not(.verborgen)) .hoofdnav {
        visibility: hidden;
    }

    /* Op een telefoon staan de pictogrammen dicht op elkaar en is het
       vergrootglas het enige dat vrij hoeft te blijven. */
    @media (max-width: 900px) {
        .kopActies form[data-zoekformulier]:not(.verborgen) { --zoek-ruimte: 44px; }
    }

    /* De aankondigingsbalk. De enige plek waar het geel een vlak mag zijn,
       omdat hij twintig pixels hoog is en één zin bevat. */
    .aankondiging {
        background: var(--accent);
        color: var(--op-accent);
        font-size: var(--tekst-s);
        font-weight: 600;
        text-align: center;
        padding: var(--ruimte-2) var(--gutter);
        letter-spacing: 0.01em;
    }

    .aankondiging a { text-decoration: underline; text-underline-offset: 0.16em; }

    /* Een scherm met één boodschap: bevestigd, afgemeld, of een link die
       niet meer werkt. Bewust kaal — wie hier komt wil één ding weten. */
    .melding-scherm {
        display: grid;
        justify-items: center;
        text-align: center;
        gap: var(--ruimte-4);
    }

    .melding-scherm__vonk {
        display: grid;
        place-items: center;
        inline-size: 76px;
        block-size: 76px;
        border-radius: 50%;
        background: var(--accent-waas);
        color: var(--accent-tekst, var(--accent-diep));
        margin-bottom: var(--ruimte-2);
    }

    .omhulsel--smal { max-inline-size: var(--breedte-smal); }

    /* ── de taalkiezer ──
     *
     * Een popover en geen eigen uitklapmenu: de browser regelt het sluiten
     * bij een klik ernaast, de Escape-toets en de focus. Dat zijn precies de
     * drie dingen die in een zelfgebouwd menu vergeten worden.
     */
    .taalkiezer { position: relative; }

    .taalkiezer__knop {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-block-size: var(--knop-hoogte);
        padding-inline: var(--ruimte-3);
        border: 0;
        border-radius: var(--radius-m);
        background: none;
        color: var(--inkt-zacht);
        font: inherit;
        font-size: var(--tekst-s);
        font-weight: 600;
        cursor: pointer;
    }

    .taalkiezer__knop:hover { background: var(--grond-diep); color: var(--inkt); }

    .taalkiezer__lijst {
        position: absolute;
        inset: auto;
        margin: 0;
        padding: var(--ruimte-2);
        min-inline-size: 12rem;
        border: 1px solid var(--lijn);
        border-radius: var(--radius-l);
        background: var(--paneel);
        box-shadow: var(--schaduw-3);
    }

    /* De popover positioneren onder de knop. position-anchor is nog niet
       overal, dus dit is de terugval die het overal doet: het lijstje hangt
       aan de rechterkant van het scherm onder de kop. */
    .taalkiezer__lijst:popover-open {
        position: fixed;
        inset-block-start: 4.5rem;
        inset-inline-end: var(--gutter);
        inset-inline-start: auto;
    }

    .taalkiezer__optie {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        padding: var(--ruimte-2) var(--ruimte-3);
        border-radius: var(--radius-m);
        color: var(--inkt-zacht);
        font-size: var(--tekst-s);
        text-decoration: none;
    }

    .taalkiezer__optie:hover { background: var(--grond-diep); color: var(--inkt); }
    .taalkiezer__optie.aan { color: var(--accent-tekst, var(--accent-diep)); font-weight: 600; }

    .taalkiezer__code {
        font-size: var(--tekst-xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--inkt-flauw);
        inline-size: 2.2em;
    }

    /* ══════════════════════════════════════════════════════════ de voet ══
     *
     * Drie lagen: een band met de waarborgen, een rij losse gadgets, en
     * daaronder de gewone kolommen. Elk stuk is een eigen sjabloon en dus los
     * te verplaatsen of weg te laten.
     */

    .siteVoet {
        /* Zes eenheden en niet vierentwintig. Die vierentwintig kwam van een
           pagina met weinig inhoud, waar de voet anders tegen de laatste
           sectie plakte. Op een winkelpagina levert het een leeg vlak van een
           halve schermhoogte op, en dat leest als een pagina die niet af is. */
        margin-top: var(--ruimte-10);
        border-top: 1px solid var(--lijn);
        background: var(--grond-warm);
        padding-bottom: var(--ruimte-8);
    }

    /* Staat er hoger op de pagina al een waarborgblok — de startpagina heeft
       er een — dan verdwijnt deze band. Twee keer dezelfde vier beloftes
       onder elkaar leest als een sjabloon dat niemand nagekeken heeft.
       Met :has() hoeft de voet daar niets van te weten. */
    body:has(.waarborg) .siteVoet__band { display: none; }

    .siteVoet__band {
        background: var(--grond-diep);
        border-bottom: 1px solid var(--lijn);
        padding-block: var(--ruimte-5);
        margin-bottom: var(--ruimte-12);
    }

    .waarborgen {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: var(--ruimte-5);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .waarborgen li {
        display: flex;
        gap: var(--ruimte-3);
        align-items: flex-start;
        font-size: var(--tekst-s);
        color: var(--inkt-gedempt);
        line-height: 1.45;
    }

    .waarborgen strong {
        display: block;
        color: var(--inkt);
        font-weight: 600;
        margin-bottom: 1px;
    }

    .waarborgen__icoon {
        display: grid;
        place-items: center;
        inline-size: 34px;
        block-size: 34px;
        flex: 0 0 auto;
        border-radius: var(--radius-m);
        background: var(--accent-waas);
        color: var(--accent-tekst, var(--accent-diep));
    }

    /* ── de gadgetrij ── */

    .siteVoet__gadgets {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
        gap: var(--ruimte-6);
        margin-bottom: var(--ruimte-10);
    }

    @media (max-width: 900px) {
        .siteVoet__gadgets { grid-template-columns: 1fr; }
    }

    /*
     * Op een telefoon staan de blokken van de voet onder elkaar, en dan tellen
     * de marges op: tussen de waarborgband en de eerste gadget stond een gat
     * van twaalf eenheden, wat op een donkere winkel leest als een stuk pagina
     * dat niet geladen is. Naast elkaar is diezelfde ruimte lucht; onder elkaar
     * is het leegte.
     */
    @media (max-width: 700px) {
        .siteVoet { margin-top: var(--ruimte-8); padding-bottom: var(--ruimte-6); }
        .siteVoet__band { margin-bottom: var(--ruimte-6); }
        .siteVoet__gadgets { gap: var(--ruimte-4); margin-bottom: var(--ruimte-6); }
    }

    .gadget {
        display: flex;
        flex-direction: column;
        gap: var(--ruimte-3);
        padding: var(--ruimte-5);
        background: var(--paneel);
        border: 1px solid var(--lijn);
        border-radius: var(--radius-l);
    }

    .gadget__kop {
        display: flex;
        align-items: center;
        gap: var(--ruimte-2);
        font-family: var(--kop-font);
        font-weight: 600;
        font-size: var(--tekst-m);
        color: var(--inkt);
    }

    .gadget__kop svg { color: var(--accent-tekst, var(--accent-diep)); }
    .gadget p { margin: 0; }

    /* ── nieuwsbrief ── */

    .nieuwsbriefVeld {
        display: flex;
        gap: var(--ruimte-2);
        flex-wrap: wrap;
    }

    .nieuwsbriefVeld .invoer { flex: 1; min-inline-size: 12rem; }

    /* Het lokveld voor bots.
     *
     * Niet display:none en niet visibility:hidden — dat zijn precies de twee
     * dingen waar een fatsoenlijke bot op controleert. Dit staat gewoon
     * buiten beeld, is uit de tabvolgorde gehaald en heeft aria-hidden, dus
     * geen mens en geen schermlezer komt er ooit bij. */
    .lokveld {
        position: absolute;
        inset-inline-start: -9999px;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
    }

    /* ── openingsuren ── */

    .urenNu {
        display: flex;
        align-items: center;
        gap: var(--ruimte-2);
        font-size: var(--tekst-s);
    }

    .urenNu__stip {
        inline-size: 9px;
        block-size: 9px;
        border-radius: 50%;
        flex: 0 0 auto;
    }

    .urenNu--open .urenNu__stip {
        background: var(--goed);
        /* Een zachte pols. Eén per twee seconden en heel klein: dit is een
           bolletje dat zegt "we zijn open", geen alarm. */
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--goed) 60%, transparent);
        animation: pols 2.4s ease-out infinite;
    }

    .urenNu--open strong { color: var(--goed); }
    .urenNu--dicht .urenNu__stip { background: var(--inkt-flauw); }

    @keyframes pols {
        70% { box-shadow: 0 0 0 7px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }

    @media (prefers-reduced-motion: reduce) {
        .urenNu--open .urenNu__stip { animation: none; }
    }

    .urenLijst {
        display: grid;
        gap: 2px;
        margin: 0;
        font-size: var(--tekst-s);
        color: var(--inkt-gedempt);
    }

    .urenLijst > div {
        display: flex;
        justify-content: space-between;
        gap: var(--ruimte-4);
    }

    .urenLijst dt, .urenLijst dd { margin: 0; }
    .urenLijst dd { font-variant-numeric: tabular-nums; }

    /* ── betaalmiddelen ── */

    .betaalrij {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .betaalmerk {
        font-size: var(--tekst-xs);
        font-weight: 600;
        letter-spacing: 0.01em;
        padding: 5px var(--ruimte-3);
        border: 1px solid var(--lijn-sterk);
        border-radius: var(--radius-s);
        background: var(--grond);
        color: var(--inkt-zacht);
    }

    /* Een tikje kleur op de twee die hier het meest gebruikt worden. Niet op
       alle: dan is het weer een bonte rij en herken je er geen enkele. */
    .betaalmerk[data-merk="bancontact"] { border-color: #1E3A8A; color: #1E3A8A; }
    .betaalmerk[data-merk="ideal"] { border-color: #CC0066; color: #CC0066; }

    /* ── recent bekeken ── */

    .gadget--recent { margin-bottom: var(--ruimte-10); }

    .recentRij {
        display: flex;
        gap: var(--ruimte-3);
        overflow-x: auto;
        padding-bottom: var(--ruimte-2);
        scroll-snap-type: x proximity;
    }

    .recentKaart {
        flex: 0 0 auto;
        inline-size: 132px;
        scroll-snap-align: start;
        text-decoration: none;
        color: inherit;
    }

    .recentKaart img {
        inline-size: 132px;
        block-size: 132px;
        object-fit: contain;
        border-radius: var(--radius-m);
        background: var(--grond-diep);
    }

    .recentKaart span {
        display: block;
        font-size: var(--tekst-xs);
        line-height: 1.35;
        margin-top: var(--ruimte-2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* ── de kolommen ── */

    .siteVoet__raster {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
        gap: var(--ruimte-8) var(--ruimte-6);
    }

    @media (max-width: 900px) {
        .siteVoet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .siteVoet__over { grid-column: 1 / -1; }
    }

    .siteVoet__over { display: grid; gap: var(--ruimte-3); align-content: start; }
    .siteVoet__over address { font-style: normal; line-height: 1.6; }

    .siteVoet__kop {
        font-family: var(--kop-font);
        font-weight: 600;
        font-size: var(--tekst-s);
        margin-bottom: var(--ruimte-3);
    }

    .siteVoet__raster > div > a {
        display: block;
        font-size: var(--tekst-s);
        color: var(--inkt-gedempt);
        padding-block: 4px;
        text-decoration: none;
    }

    .siteVoet__raster > div > a:hover { color: var(--accent-tekst, var(--accent-diep)); }

    .kanalen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }

    .kanaal {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        font-size: var(--tekst-xs);
        padding: 5px var(--ruimte-3);
        border: 1px solid var(--lijn);
        border-radius: var(--radius-rond);
        color: var(--inkt-gedempt);
        text-decoration: none;
        transition: color var(--duur-snel) var(--soepel),
                    border-color var(--duur-snel) var(--soepel);
    }

    .kanaal:hover { color: var(--accent-tekst, var(--accent-diep)); border-color: var(--accent); }

    .siteVoet__onder {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-10);
        padding-top: var(--ruimte-5);
        border-top: 1px solid var(--lijn);
        font-size: var(--tekst-s);
        color: var(--inkt-gedempt);
    }

    /* Een item dat zichzelf voorop zet, krijgt de accentkleur: het is meestal
       het ding dat de klant net gekocht heeft en dat gevonden moet worden. */
    .hoofdnav__link--voorop { color: var(--accent-tekst); font-weight: 650; }

    @media (max-width: 900px) {
        .hoofdnav { display: none; }

        /* Op een telefoon verdwijnt het menu achter de uitklapknop. Wat een
           plugin voorop zet, blijft wel staan: dat is de vraag van Sven op
           10 september 2026, en ze is terecht — wie de cafetaria koopt, wil
           die knop zien en niet zoeken. */
        .hoofdnav:has(.hoofdnav__link--voorop) { display: flex; }
        .hoofdnav:has(.hoofdnav__link--voorop) > :not(.hoofdnav__link--voorop) { display: none; }
    }
}

/* ═════════════════════════════════════════════════════════ onderdelen ══ */

@layer onderdelen {

    /* ───────────────────────────────────────────────────────── knoppen ── */

    .knop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ruimte-2);
        height: var(--knop-hoogte);
        padding-inline: var(--ruimte-6);
        border: 1px solid transparent;
        border-radius: var(--radius-m);
        font-family: var(--kop-font);
        font-size: var(--tekst-m);
        font-weight: 600;
        letter-spacing: -0.005em;
        white-space: nowrap;
        user-select: none;
        transition: background-color var(--duur-snel) var(--soepel),
                    border-color var(--duur-snel) var(--soepel),
                    color var(--duur-snel) var(--soepel),
                    box-shadow var(--duur-normaal) var(--soepel),
                    scale var(--duur-snel) var(--soepel);
    }

    .knop:active:not(:disabled) { scale: 0.985; }

    .knop:disabled, .knop[aria-disabled="true"] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    /*
     * De hoofdknop. Inkt, niet geel — en dat is de belangrijkste beslissing
     * in dit hele thema.
     *
     * Geel op wit heeft een contrastverhouding van 1,2 en is als knop met
     * tekst onleesbaar. De oude site lost dat op met zwarte tekst óp geel, en
     * dat werkt, maar dan schreeuwt elke knop even hard. Hier is de knop
     * inkt met een gele gloed eronder: hij trekt de aandacht zonder de
     * pagina over te nemen, en hij is voor iedereen leesbaar.
     */
    .knop--hoofd {
        background: var(--inkt);
        color: var(--grond);
        box-shadow: 0 2px 0 var(--accent);
    }

    .knop--hoofd:hover {
        background: var(--inkt-zacht);
        box-shadow: 0 4px 0 var(--accent), var(--schaduw-2);
    }

    .knop--accent {
        background: var(--accent);
        color: var(--op-accent);
    }

    .knop--accent:hover { background: var(--accent-diep); box-shadow: var(--schaduw-2); }

    /* De rand van een knop zonder vulling is het enige waaraan iemand ziet dat
       het een knop is. --lijn-sterk is daar te zwak voor: op de donkere huid
       van een verhuurder haalt ze 1,07 tegen de achtergrond en op de lichte
       1,56, allebei onder de drie op een die de norm vraagt voor wat geen tekst
       is. Op een werf in de zon blijft er dan wat tekst over die zweeft.
       Gemengd uit de inkt van het thema haalt ze boven de drie in allebei de
       standen, en ze blijft de kleur van de klant. Gemeten op 19 september
       2026 op 390 en op 1280. */
    .knop--rand {
        border-color: color-mix(in srgb, var(--inkt) 45%, transparent);
        color: var(--inkt);
        background: var(--paneel);
    }

    .knop--rand:hover { border-color: var(--inkt); }

    .knop--stil { color: var(--inkt-zacht); }
    .knop--stil:hover { background: var(--grond-diep); color: var(--inkt); }

    .knop--icoon { width: var(--knop-hoogte); padding: 0; flex-shrink: 0; position: relative; }
    /* Een pictogram in een knop krimpt niet mee. Het beheer heeft deze regel
       al jaren; de winkel had ze niet. */
    .knop svg { flex: none; }
    .knop--klein { height: 34px; padding-inline: var(--ruimte-4); font-size: var(--tekst-s); }
    /* Zonder deze nul blijft de zijmarge van `.knop--klein` staan: tweemaal
       zestien pixels in een knop van vierendertig. Er blijft dan twee pixels
       over voor een pictogram van achttien, en dat pictogram krimpt naar nul.
       De knop staat er wel, ze is aan te klikken, en er is niets te zien. Zo
       verdween het kruisje waarmee je het filterscherm op de telefoon sluit,
       en zat een bezoeker in dat scherm vast. Dezelfde knop staat in een stuk
       of twintig schermen, het beheer inbegrepen. */
    .knop--klein.knop--icoon { width: 34px; padding-inline: 0; }
    .knop--groot { height: 52px; padding-inline: var(--ruimte-8); font-size: var(--tekst-l); }
    .knop--vol { width: 100%; }

    /* Het telletje op het wagenicoontje. */
    .knop__teller {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 17px;
        height: 17px;
        padding-inline: 4px;
        display: grid;
        place-items: center;
        background: var(--accent);
        color: var(--op-accent);
        border-radius: var(--radius-rond);
        font-size: 10px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    /* ─────────────────────────────────────────────────────────── velden ── */

    .veld { display: flex; flex-direction: column; gap: var(--ruimte-2); }
    .veld + .veld { margin-top: var(--ruimte-5); }

    .veld__label {
        font-size: var(--tekst-s);
        font-weight: 600;
        color: var(--inkt-zacht);
    }

    .veld__uitleg { font-size: var(--tekst-s); color: var(--inkt-gedempt); }
    .veld__fout {
        display: flex; align-items: center; gap: var(--ruimte-2);
        font-size: var(--tekst-s); color: var(--korting); font-weight: 550;
    }

    /* Een fieldset draagt van zichzelf een rand en een binnenmarge, en die
       zetten een groep vakjes in een kadertje dat niet bij de andere velden
       past. Het is een groep omdat een schermlezer de legende bij de vakjes
       moet horen, niet omdat er een doos omheen hoort. */
    fieldset.veld {
        border: 0;
        margin: 0;
        padding: 0;
        min-width: 0;
    }

    fieldset.veld > legend.veld__label { padding: 0; }

    /* De selectievakjes van een meervoudige keuze, en het ene vinkje eronder.
       Ze stonden hier los in de tekst: een vakje van dertien pixels met de
       woorden ernaast die midden in een keuze afbreken. Op een telefoon, met
       werkhandschoenen aan, is dat niet te raken en niet te lezen. Elke keuze
       is nu een eigen regel van vierenveertig pixels hoog die in haar geheel
       een tikdoel is. */
    .veld__vakjes {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--ruimte-1, .25rem);
    }

    @media (min-width: 40rem) {
        .veld__vakjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .vakje,
    .veld > .vinkje,
    label.veld:has(> .vinkje) {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        min-height: 44px;
        padding: var(--ruimte-2) var(--ruimte-3);
        border: 1px solid var(--lijn);
        border-radius: var(--radius-m);
        cursor: pointer;
    }

    .vakje:hover { border-color: var(--inkt-flauw); }

    .vakje:has(input:checked) {
        border-color: var(--accent);
        background: var(--accent-waas);
    }

    .vakje input,
    .vinkje {
        inline-size: 20px;
        block-size: 20px;
        flex: none;
        accent-color: var(--accent);
        cursor: pointer;
    }

    .vakje:has(input:focus-visible) {
        outline: 2px solid var(--inkt);
        outline-offset: 2px;
    }

    /* Het losse vinkje (het akkoord onderaan een formulier) staat naast zijn
       eigen label in plaats van eronder: een vakje zonder tekst ernaast leest
       als een knop zonder opschrift. */
    label.veld:has(> .vinkje) {
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: flex-start;
        padding: var(--ruimte-3);
    }

    label.veld:has(> .vinkje) > .veld__label { font-weight: 550; }

    .invoer {
        width: 100%;
        min-height: var(--veld-hoogte);
        padding: var(--ruimte-3) var(--ruimte-4);
        background: var(--paneel);
        /* Zie de opmerking bij .knop--rand: een invoerveld wordt herkend aan
           zijn rand en aan niets anders. */
        border: 1px solid color-mix(in srgb, var(--inkt) 45%, transparent);
        border-radius: var(--radius-m);
        font-size: var(--tekst-m);
        transition: border-color var(--duur-snel) var(--soepel),
                    box-shadow var(--duur-snel) var(--soepel);
    }

    .invoer::placeholder { color: var(--inkt-flauw); }
    .invoer:hover:not(:disabled) { border-color: var(--inkt-flauw); }

    .invoer:focus {
        outline: none;
        border-color: var(--inkt);
        box-shadow: 0 0 0 4px var(--accent-waas);
    }

    .invoer[aria-invalid="true"] { border-color: var(--korting); }

    textarea.invoer { min-height: 120px; resize: vertical; font-family: inherit; }

    select.invoer {
        appearance: none;
        padding-right: var(--ruimte-10);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6A5F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--ruimte-4) center;
    }

    /* ───────────────────────────────────────────────────────── badges ── */

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px var(--ruimte-2);
        border-radius: var(--radius-s);
        font-size: var(--tekst-xs);
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        background: var(--grond-diep);
        color: var(--inkt-zacht);
        white-space: nowrap;
    }

    .badge--korting { background: var(--korting); color: #fff; }
    .badge--nieuw { background: var(--inkt); color: var(--grond); }
    .badge--accent { background: var(--accent); color: var(--op-accent); }
    .badge--goed { background: var(--goed-waas); color: var(--goed); }
    .badge--op { background: var(--grond-diep); color: var(--inkt-gedempt); }

    .stip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

    /* ──────────────────────────────────────────────────── kruimelpad ── */

    .kruimels {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-2);
        font-size: var(--tekst-s);
        color: var(--inkt-gedempt);
        padding-block: var(--ruimte-5);
    }

    .kruimels a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 0.16em; }
    .kruimels__scheider { color: var(--inkt-flauw); user-select: none; }
    .kruimels [aria-current] { color: var(--inkt); font-weight: 550; }
}

/* ═════════════════════════════════════════════════════════════ winkel ══ */

@layer winkel {

    /* ═══════════════════════════════════════════════════ de productkaart ══
     *
     * Het hardst werkende onderdeel van de hele site. Wat erin zit en wat
     * eruit blijft, is elke keer een afweging geweest:
     *
     *  - het beeld heeft een vaste verhouding en een vulkleur, zodat het
     *    raster niet verspringt terwijl de foto's binnenkomen
     *  - de titel mag twee regels en kapt daarna af, zodat alle kaarten in
     *    een rij even hoog blijven
     *  - de prijs staat onderaan, altijd op dezelfde hoogte, ook als de titel
     *    één regel is — dat doet de auto-marge
     *  - de knop verschijnt bij hover, maar op een touchscreen staat hij er
     *    gewoon: daar is hover een klik, en dan is een verborgen knop een
     *    verdwenen knop
     */

    .kaart {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--paneel);
        border: 1px solid var(--lijn);
        border-radius: var(--radius-l);
        overflow: hidden;
        transition: border-color var(--duur-normaal) var(--soepel),
                    box-shadow var(--duur-normaal) var(--soepel),
                    translate var(--duur-normaal) var(--soepel);
    }

    .kaart:hover {
        border-color: var(--lijn-sterk);
        box-shadow: var(--schaduw-3);
        translate: 0 -3px;
    }

    .kaart__beeld {
        position: relative;
        aspect-ratio: 1;
        background: var(--grond-diep);
        overflow: hidden;
    }

    .kaart__beeld img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--duur-traag) var(--soepel);
    }

    .kaart:hover .kaart__beeld img { scale: 1.04; }

    .kaart__vlaggen {
        position: absolute;
        top: var(--ruimte-3);
        left: var(--ruimte-3);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ruimte-1);
        z-index: 2;
    }

    .kaart__wens {
        position: absolute;
        top: var(--ruimte-3);
        right: var(--ruimte-3);
        z-index: 2;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: color-mix(in oklab, var(--paneel) 88%, transparent);
        backdrop-filter: blur(6px);
        border-radius: var(--radius-rond);
        color: var(--inkt-gedempt);
        opacity: 0;
        transition: opacity var(--duur-normaal) var(--soepel), color var(--duur-snel) var(--soepel);
    }

    .kaart:hover .kaart__wens,
    .kaart__wens:focus-visible,
    .kaart__wens[aria-pressed="true"] { opacity: 1; }

    .kaart__wens:hover { color: var(--korting); }
    .kaart__wens[aria-pressed="true"] { color: var(--korting); }

    .kaart__lijf {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: var(--ruimte-4);
        gap: var(--ruimte-1);
    }

    .kaart__merk {
        font-size: var(--tekst-xs);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--inkt-flauw);
    }

    .kaart__titel {
        font-family: var(--kop-font);
        font-size: var(--tekst-m);
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.008em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* Twee regels reserveren, ook bij één regel titel. Zo staan de
           prijzen in een rij allemaal op dezelfde hoogte. */
        min-height: calc(2 * 1.35em);
    }

    .kaart__kleuren {
        display: flex;
        gap: 4px;
        margin-top: var(--ruimte-1);
    }

    .kaart__kleur {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 1px solid rgb(0 0 0 / 0.14);
    }

    .kaart__prijsrij {
        display: flex;
        align-items: baseline;
        gap: var(--ruimte-2);
        margin-top: auto;
        padding-top: var(--ruimte-3);
    }

    .prijs {
        font-family: var(--kop-font);
        font-size: var(--tekst-l);
        font-weight: 700;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .prijs--was {
        font-size: var(--tekst-s);
        font-weight: 500;
        color: var(--inkt-flauw);
        text-decoration: line-through;
    }

    .prijs--korting { color: var(--korting); }

    .kaart__voorraad {
        font-size: var(--tekst-xs);
        color: var(--inkt-gedempt);
        display: flex;
        align-items: center;
        gap: var(--ruimte-1);
    }

    .kaart__voorraad--goed { color: var(--goed); }
    .kaart__voorraad--bijna { color: var(--let-op); }
    .kaart__voorraad--op { color: var(--inkt-flauw); }

    .kaart__actie {
        margin-top: var(--ruimte-3);
        opacity: 0;
        translate: 0 4px;
        transition: opacity var(--duur-normaal) var(--soepel), translate var(--duur-normaal) var(--soepel);
    }

    .kaart:hover .kaart__actie,
    .kaart:focus-within .kaart__actie { opacity: 1; translate: 0 0; }

    @media (hover: none) {
        .kaart__actie, .kaart__wens { opacity: 1; translate: 0 0; }
    }

    /* ═══════════════════════════════════════════════════════ het raster ══ */

    .raster {
        display: grid;
        gap: var(--ruimte-5);
        grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    }

    .raster--breed { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

    /*
     * Op een telefoon twee kolommen, altijd.
     *
     * Met auto-fill en een minimum van 240 pixels past er op een scherm van
     * 390 maar één kolom, en dan staat elk product op zijn eigen scherm. Twee
     * naast elkaar is wat elke winkel doet die het goed doet: de kaart wordt
     * kleiner dan de ontwerpmaat, en dat is precies de bedoeling — wie kiest,
     * wil vergelijken.
     */
    @media (max-width: 700px) {
        .raster,
        .raster--breed {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--ruimte-3);
        }
    }

    /*
     * ── de veegrij ──────────────────────────────────────────────────────
     *
     * Voor een rij op de startpagina, niet voor de catalogus. Twaalf producten
     * in een raster zijn op een telefoon zes rijen die niemand uitscrollt; als
     * veegrij is het één schermhoogte en veeg je door de rest. Dat is wat elke
     * grote winkel op een telefoon doet, en om dezelfde reden: de startpagina
     * is een etalage en geen catalogus.
     *
     * Op een breed scherm is het gewoon het raster. Daar is ruimte zat en is
     * een rij die je moet slepen juist lastiger dan alles in beeld.
     */
    @media (max-width: 700px) {
        .raster--rij {
            display: flex;
            gap: var(--ruimte-3);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            /* De gutter mee naar binnen trekken, zodat de eerste kaart tegen
               de rand van de tekst staat en de laatste netjes uitloopt. */
            margin-inline: calc(var(--gutter) * -1);
            padding-inline: var(--gutter);
            padding-block-end: var(--ruimte-2);
            scrollbar-width: none;
        }

        .raster--rij::-webkit-scrollbar { display: none; }

        .raster--rij > .kaart {
            /* Iets meer dan twee op een scherm: de derde die half meekijkt is
               wat zegt dat er nog meer is. Zonder dat stukje denkt de helft van
               de bezoekers dat de rij ophoudt. */
            flex: 0 0 42%;
            scroll-snap-align: start;
        }
    }

    /* ═════════════════════════════════════════════════ catalogus-opmaak ══ */

    .catalogus {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
        gap: var(--ruimte-10);
        align-items: start;
    }

    @media (max-width: 1000px) {
        .catalogus { grid-template-columns: minmax(0, 1fr); }
    }

    .filterkolom {
        position: sticky;
        top: 88px;
        max-height: calc(100dvh - 108px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: var(--ruimte-2);
    }

    @media (max-width: 1000px) {
        .filterkolom {
            position: fixed;
            inset: 0 auto 0 0;
            width: min(340px, 90vw);
            max-height: none;
            background: var(--grond);
            border-right: 1px solid var(--lijn);
            padding: var(--ruimte-6);
            z-index: var(--laag-lade);
            translate: -100% 0;
            transition: translate var(--duur-normaal) var(--soepel);
            box-shadow: var(--schaduw-4);
        }

        body[data-filters-open="ja"] .filterkolom { translate: 0 0; }
    }

    .facet + .facet {
        margin-top: var(--ruimte-5);
        padding-top: var(--ruimte-5);
        border-top: 1px solid var(--lijn);
    }

    .facet__kop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-block: var(--ruimte-1);
        font-family: var(--kop-font);
        font-size: var(--tekst-m);
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .facet__kop::-webkit-details-marker { display: none; }
    .facet__kop svg { transition: rotate var(--duur-normaal) var(--soepel); color: var(--inkt-flauw); }
    .facet[open] .facet__kop svg { rotate: 180deg; }

    .facet__lijf { padding-top: var(--ruimte-3); }

    .facet__optie {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        padding: var(--ruimte-2) var(--ruimte-2);
        margin-inline: calc(var(--ruimte-2) * -1);
        border-radius: var(--radius-m);
        font-size: var(--tekst-m);
        cursor: pointer;
        transition: background-color var(--duur-snel) var(--soepel);
    }

    .facet__optie:hover { background: var(--grond-diep); }

    .facet__optie input { position: absolute; opacity: 0; width: 0; height: 0; }

    .facet__vink {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        border: 1.5px solid var(--lijn-sterk);
        border-radius: var(--radius-s);
        display: grid;
        place-items: center;
        transition: background-color var(--duur-snel) var(--soepel),
                    border-color var(--duur-snel) var(--soepel);
    }

    .facet__vink svg { opacity: 0; color: var(--op-accent); }

    .facet__optie input:checked + .facet__vink {
        background: var(--accent);
        border-color: var(--accent-diep);
    }

    .facet__optie input:checked + .facet__vink svg { opacity: 1; }
    .facet__optie input:focus-visible + .facet__vink { outline: 2px solid var(--inkt); outline-offset: 2px; }

    .facet__label { flex: 1; min-width: 0; }
    .facet__aantal { font-size: var(--tekst-s); color: var(--inkt-flauw); font-variant-numeric: tabular-nums; }

    /* De optieregels hangen met een negatieve marge buiten hun lijst, zodat
       het hover-vlak tot aan de rand loopt. In een lijst die verticaal
       scrolt, levert dat een horizontale schuifbalk op waar niets te
       schuiven valt. Vandaar de padding ernaast en de rem erop. */
    [data-facet-lijst] {
        padding-inline: var(--ruimte-2);
        margin-inline: calc(var(--ruimte-2) * -1);
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    /* Maten als knopjes. Voor leeftijden en maten leest een raster van
       knoppen sneller dan een lijst met vinkjes — je scant de getallen in
       één blik. */
    .maatraster {
        display: grid;
        gap: var(--ruimte-2);
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    }

    .maatknop {
        display: grid;
        place-items: center;
        height: 40px;
        border: 1.5px solid var(--lijn);
        border-radius: var(--radius-m);
        font-size: var(--tekst-s);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        transition: border-color var(--duur-snel) var(--soepel),
                    background-color var(--duur-snel) var(--soepel);
    }

    .maatknop input { position: absolute; opacity: 0; }
    .maatknop:hover { border-color: var(--inkt-flauw); }

    .maatknop:has(input:checked) {
        border-color: var(--inkt);
        background: var(--inkt);
        color: var(--grond);
    }

    .maatknop--op {
        color: var(--inkt-flauw);
        border-style: dashed;
        cursor: not-allowed;
        position: relative;
        overflow: hidden;
    }

    /* Een uitverkochte maat wordt doorstreept in plaats van verborgen. Zo
       zie je dat hij bestaat, en dat is nuttige informatie. */
    .maatknop--op::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top left,
            transparent calc(50% - 1px), var(--lijn-sterk) 50%, transparent calc(50% + 1px));
    }

    /* Kleurstaaltjes. */
    .kleurraster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2);
    }

    .kleurstaal {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-rond);
        border: 2px solid transparent;
        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16);
        cursor: pointer;
        transition: scale var(--duur-snel) var(--veerkrachtig);
    }

    .kleurstaal:hover { scale: 1.1; }
    .kleurstaal input { position: absolute; opacity: 0; }
    .kleurstaal:has(input:checked) {
        border-color: var(--inkt);
        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.16), 0 0 0 2px var(--grond);
    }

    /* De prijsschuif. Twee gewone number-velden erbij, want een schuif
       alleen is onbruikbaar als je een exact bedrag wilt. */
    .prijsvelden {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--ruimte-2);
    }

    .prijsvelden .invoer { min-height: 38px; padding: var(--ruimte-2); text-align: center; font-size: var(--tekst-s); }

    /* ─────────────────────────────────────────────── de resultatenbalk ── */

    .resultatenbalk {
        display: flex;
        align-items: center;
        gap: var(--ruimte-4);
        flex-wrap: wrap;
        padding-bottom: var(--ruimte-5);
        border-bottom: 1px solid var(--lijn);
        margin-bottom: var(--ruimte-6);
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        padding: var(--ruimte-1) var(--ruimte-2) var(--ruimte-1) var(--ruimte-3);
        border: 1px solid var(--lijn-sterk);
        border-radius: var(--radius-rond);
        font-size: var(--tekst-s);
        background: var(--paneel);
        transition: border-color var(--duur-snel) var(--soepel);
    }

    .chip:hover { border-color: var(--inkt); }
    .chip button { display: grid; place-items: center; color: var(--inkt-flauw); }
    .chip button:hover { color: var(--korting); }

    /* ═════════════════════════════════════════════════ de productpagina ══ */

    .product {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(var(--ruimte-8), 5vw, var(--ruimte-16));
        align-items: start;
    }

    @media (max-width: 900px) {
        .product { grid-template-columns: minmax(0, 1fr); }
    }

    .galerij { position: sticky; top: 88px; }

    .galerij__hoofd {
        position: relative;
        aspect-ratio: 1;
        background: var(--grond-diep);
        border-radius: var(--radius-l);
        overflow: hidden;
        border: 1px solid var(--lijn);
    }

    .galerij__hoofd img { width: 100%; height: 100%; object-fit: cover; }

    /* De duimen wikkelen, ze schuiven niet. Zolang er één beeld per product
       was, viel dit nooit op; met de galerijen erbij wel. Een rij die
       zijwaarts schuift, snijdt de laatste duim doormidden op de rand, en dat
       leest als een fout en niet als "er is meer" — op 390 pixels bij vijf
       beelden, en op 1280 bij negen. Wikkelen kost een regel of drie en
       verbergt niets. Gezien op 19 september 2026. */
    .galerij__duimen {
        display: flex;
        gap: var(--ruimte-2);
        margin-top: var(--ruimte-3);
        flex-wrap: wrap;
        padding-bottom: var(--ruimte-1);
    }

    .galerij__duim {
        flex-shrink: 0;
        width: 68px;
        height: 68px;
        border-radius: var(--radius-m);
        overflow: hidden;
        border: 2px solid transparent;
        background: var(--grond-diep);
        transition: border-color var(--duur-snel) var(--soepel);
    }

    .galerij__duim[aria-current="true"] { border-color: var(--inkt); }
    .galerij__duim img { width: 100%; height: 100%; object-fit: cover; }

    .productinfo__merk {
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--inkt-gedempt);
    }

    .productinfo__titel {
        font-size: clamp(1.75rem, 3.2vw, 2.5rem);
        margin-top: var(--ruimte-2);
    }

    .productinfo__prijsblok {
        display: flex;
        align-items: baseline;
        gap: var(--ruimte-3);
        flex-wrap: wrap;
        margin-top: var(--ruimte-5);
    }

    .productinfo__prijs {
        font-family: var(--kop-font);
        font-size: var(--tekst-3xl);
        font-weight: 700;
        letter-spacing: var(--spatie-kop);
        font-variant-numeric: tabular-nums;
    }

    .keuzeblok + .keuzeblok { margin-top: var(--ruimte-6); }

    .keuzeblok__kop {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: var(--ruimte-3);
    }

    .keuzeblok__naam {
        font-family: var(--kop-font);
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
    }

    .keuzeblok__gekozen { font-size: var(--tekst-s); color: var(--inkt-gedempt); }

    /* De aantalkiezer: min, getal, plus. Groter dan een gewoon nummerveld,
       want dit wordt op een telefoon met een duim bediend. */
    .aantalkiezer {
        display: inline-grid;
        grid-template-columns: 44px 56px 44px;
        height: var(--knop-hoogte);
        border: 1px solid var(--lijn-sterk);
        border-radius: var(--radius-m);
        overflow: hidden;
    }

    .aantalkiezer button {
        display: grid;
        place-items: center;
        color: var(--inkt-zacht);
        transition: background-color var(--duur-snel) var(--soepel);
    }

    .aantalkiezer button:hover { background: var(--grond-diep); color: var(--inkt); }
    .aantalkiezer button:disabled { color: var(--inkt-flauw); cursor: not-allowed; }

    .aantalkiezer input {
        border: none;
        border-inline: 1px solid var(--lijn);
        text-align: center;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        background: transparent;
        -moz-appearance: textfield;
    }

    .aantalkiezer input::-webkit-outer-spin-button,
    .aantalkiezer input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .kopenrij {
        display: flex;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-6);
        flex-wrap: wrap;
    }

    .kopenrij .knop--hoofd { flex: 1; min-width: 200px; }

    .waarborg {
        display: grid;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-8);
        padding-top: var(--ruimte-6);
        border-top: 1px solid var(--lijn);
    }

    .waarborg__regel {
        display: flex;
        align-items: flex-start;
        gap: var(--ruimte-3);
        font-size: var(--tekst-s);
        color: var(--inkt-zacht);
    }

    .waarborg__regel svg { color: var(--inkt-flauw); flex-shrink: 0; margin-top: 2px; }

    /* De omschrijving. Beperkte leesbreedte, want een regel van 140 tekens
       leest niemand uit. */
    .prosa {
        max-width: 68ch;
        line-height: 1.75;
        color: var(--inkt-zacht);
    }

    .prosa > * + * { margin-top: var(--ruimte-4); }
    .prosa h2, .prosa h3 { color: var(--inkt); margin-top: var(--ruimte-8); }
    .prosa ul { padding-left: var(--ruimte-5); list-style: disc; }
    .prosa li + li { margin-top: var(--ruimte-2); }
    .prosa strong { color: var(--inkt); font-weight: 650; }

    .prosa a {
        color: var(--inkt);
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.18em;
    }

    /*
        De omschrijving naast de specificaties, en op een telefoon eronder.

        Dit stond als inline stijl op de sectie, met twee kolommen die ook op
        een telefoon twee kolommen bleven. De omschrijving kwam dan in een
        koker van honderdzeventig pixels en de specificatietabel liep buiten
        het scherm. Het viel niet op omdat die rechterkolom alleen verscheen
        bij een artikel met losse specificatietekst — sinds de kenmerken er
        ook in staan, is dat bijna elk artikel.

        Eén kolom tot 860 pixels; daarboven krijgt de tekst het ruimste deel.
    */
    .productinfo {
        display: grid;
        align-items: start;
        gap: var(--ruimte-8);
        grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 860px) {
        .productinfo--twee {
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
            gap: var(--ruimte-12);
        }
    }

    .specs {
        display: grid;
        gap: 0;
        border: 1px solid var(--lijn);
        border-radius: var(--radius-l);
        overflow: hidden;
    }

    .specs__rij {
        display: grid;
        grid-template-columns: minmax(120px, 34%) 1fr;
        gap: var(--ruimte-4);
        padding: var(--ruimte-3) var(--ruimte-5);
        font-size: var(--tekst-m);
    }

    .specs__rij:nth-child(odd) { background: var(--grond-warm); }
    .specs__rij dt { color: var(--inkt-gedempt); }
    .specs__rij dd { margin: 0; font-weight: 550; }

    /* ══════════════════════════════════════════════════ de winkelwagenlade ══ */

    .sluier {
        position: fixed;
        inset: 0;
        z-index: var(--laag-sluier);
        background: rgb(22 21 15 / 0.42);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--duur-normaal) var(--soepel);
    }

    body[data-lade-open="ja"] .sluier { opacity: 1; pointer-events: auto; }

    /* ═══════════════════════════════════════════════════════════ het rek ══
     *
     * De winkelwagen hangt aan een pin onder de kop en zakt naar beneden.
     *
     * Het rubbergevoel zit in drie waarden, en geen ervan vraagt een
     * bibliotheek:
     *
     *   --rek-y     hoever hij uitgetrokken is, in pixels. Het script zet dit
     *               tijdens het slepen rechtstreeks, en laat het daarna door
     *               een veer uitdempen.
     *   --rek-buik  hoeveel de onderrand doorzakt. Het is de verticale straal
     *               van een elliptische hoek — daardoor bolt de onderkant
     *               écht door in plaats van alleen ronder te worden.
     *   --rek-rek   de verticale uitrekking. Klein houden: boven de paar
     *               procent vervormt de tekst mee en dat oogt goedkoop.
     *
     * --rubber schaalt de laatste twee. Op nul blijft alleen de beweging over
     * en is dit een gewone lade die open- en dichtschuift.
     */

    .rek {
        position: fixed;
        inset-block-start: var(--rek-top, 0px);
        inset-inline: 0;
        z-index: var(--laag-lade);
        pointer-events: none;

        /* Wat boven deze rand uitsteekt, wordt niet getekend. Daardoor komt
           het paneel écht van achter de kop vandaan in plaats van eroverheen
           te liggen als het dicht is. De onderkant staat ruim open, want
           daar moet het paneel juist wél uit kunnen. */
        clip-path: inset(0 0 -200vh 0);

        /* De inhoud van het rek staat op dezelfde lijn als de pagina
           eronder. Dat is niet cosmetisch: een balk die vier centimeter naar
           links begint, leest als een venster dat over de site heen ligt in
           plaats van als een deel ervan. */
        --rek-marge: max(var(--gutter), calc((100% - var(--breedte)) / 2));
    }

    .rek__lijf {
        pointer-events: auto;
        translate: 0 calc(var(--rek-y, 0px) - var(--rek-h, 0px));
        will-change: translate;
    }

    /* Terwijl er gesleept wordt volgt hij de vinger op de pixel; zodra je
       loslaat neemt de veer het over. De overgang mag daar dus niet tussen
       zitten, en staat alleen aan als er niet geveerd wordt. */
    .rek[data-veert="nee"] .rek__lijf {
        transition: translate var(--duur-normaal) var(--soepel);
    }

    .rek__paneel {
        background: var(--grond);
        border-bottom: 1px solid var(--lijn);
        box-shadow: var(--schaduw-4);
        display: flex;
        flex-direction: column;

        /* De doorzakkende onderrand. Twee radiussen achter de schuine streep:
           horizontaal blijft hij netjes, verticaal groeit hij met --rek-buik
           mee. */
        border-end-start-radius: var(--radius-xl) calc(var(--radius-xl) + var(--rek-buik, 0px));
        border-end-end-radius: var(--radius-xl) calc(var(--radius-xl) + var(--rek-buik, 0px));

        scale: 1 calc(1 + var(--rek-rek, 0));
        transform-origin: 50% 0;
    }

    .rek__balk {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        padding-block: var(--ruimte-3);
        padding-inline: var(--rek-marge);
        border-bottom: 1px solid var(--lijn-zacht);
        color: var(--inkt-gedempt);
    }

    .rek__balk strong { color: var(--inkt); }

    /* ── de strook ──
     *
     * Precies één product hoog, en horizontaal scrollen. Een wagen die
     * verticaal doorgroeit tot halverwege het scherm is geen plank meer maar
     * een tweede pagina. */
    .rek__strook {
        display: flex;
        gap: var(--ruimte-5);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        padding-block: var(--ruimte-3);
        padding-inline: var(--rek-marge);
        block-size: var(--rek-hoogte, 168px);
        scrollbar-width: thin;
    }

    .rek__strook > .wagenregel {
        flex: 0 0 clamp(260px, 26vw, 330px);
        scroll-snap-align: start;
        padding-block: 0;
        align-items: center;
    }

    /* De lege stand hoort niet in een kolom van 330 px geperst te worden. */
    .rek__strook > .leegte {
        flex: 1;
        padding-block: 0 !important;
        justify-content: center;
    }

    .rek__voet {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-3) var(--ruimte-6);
        padding-block: var(--ruimte-3);
        padding-inline: var(--rek-marge);
        border-top: 1px solid var(--lijn);
        background: var(--grond-warm);
    }

    /* In de voet van het rek staan de totalen naast elkaar in plaats van
       onder elkaar. Dezelfde onderdelen als op de winkelwagenpagina, alleen
       anders gelegd — zo blijft er één sjabloon. */
    .rek__voet .totaalrij {
        display: flex;
        gap: var(--ruimte-2);
        align-items: baseline;
        border: 0;
        padding: 0;
        font-size: var(--tekst-s);
    }

    .rek__voet .totaalrij--eind { font-size: var(--tekst-l); font-weight: 650; }
    .rek__voet .verzendbalk { flex: 1; min-width: 200px; max-width: 320px; margin: 0; }
    .rek__voet .knop { margin: 0 !important; inline-size: auto !important; }
    .rek__voet > p { margin: 0; }

    /* ── de pin ──
     *
     * Hij hangt onder het paneel en is het enige wat je ziet als het rek
     * dicht is. Daarom staat de afrekenknop hier: die hoort altijd in beeld,
     * ook halverwege het trekken. */
    /* Zolang er niets in zit, is er geen pin. Zie het sjabloon voor het
       waarom; de wagen in de kop blijft de weg naar binnen. */
    .rek--leeg .rek__pin { display: none; }

    .rek__pin {
        display: flex;
        align-items: center;
        gap: var(--ruimte-3);
        inline-size: fit-content;
        margin-inline: auto;
        padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2) var(--ruimte-2);
        background: var(--grond);
        border: 1px solid var(--lijn);
        border-block-start: 0;
        border-end-start-radius: var(--radius-xl);
        border-end-end-radius: var(--radius-xl);
        box-shadow: var(--schaduw-3);
        max-inline-size: calc(100vw - var(--gutter) * 2);
    }

    .rek__greep {
        display: grid;
        place-items: center;
        inline-size: 34px;
        block-size: 34px;
        border: 0;
        background: none;
        cursor: grab;
        touch-action: none;
        color: var(--inkt-flauw);
    }

    .rek__greep:active { cursor: grabbing; }

    /* Het lusje moet eruitzien als iets waar je aan kunt trekken. Daarom
       geen chevron maar een dik streepje met een tweede eronder. */
    .rek__lus {
        display: block;
        inline-size: 22px;
        block-size: 4px;
        border-radius: var(--radius-rond);
        background: currentColor;
        box-shadow: 0 6px 0 -1px currentColor;
    }

    .rek__pintekst {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-inline-size: 0;
    }

    .rek__pinaantal { font-size: var(--tekst-xs); color: var(--inkt-gedempt); }
    .rek__pintotaal { font-weight: 650; font-size: var(--tekst-s); }

    @media (max-width: 720px) {
        .rek__strook {
            display: block;
            overflow-x: hidden;
            overflow-y: auto;
            block-size: min(58vh, 420px);
        }

        .rek__strook > .wagenregel { padding-block: var(--ruimte-3); }
        .rek__voet { flex-direction: column; align-items: stretch; }
        .rek__voet .knop { inline-size: 100% !important; }

        /* Op een telefoon is er geen plek voor drie dingen naast de greep.
           De afrekenknop blijft: die is het punt van de hele pin. */
        .rek__verder { display: none; }
    }

    /* Wie minder beweging wil, krijgt een lade die gewoon open en dicht gaat:
       geen doorzakken, geen uitrekken, geen naveren. */
    @media (prefers-reduced-motion: reduce) {
        .rek__paneel { scale: none; }
        .rek__lijf { will-change: auto; }
    }

    /* ── de winkelwagen ──
     *
     * De lijst en het totalenpaneel. Dit stond tot 19 september 2026 als
     * `style="grid-template-columns: minmax(0, 1fr) 340px"` in het sjabloon
     * zelf, en een stijl in een attribuut kan geen mediaquery dragen. Op een
     * telefoon van 390 px bleef die tweede kolom dus 340 px breed en kneep hij
     * de eerste tot nul: de producten, de aantalknoppen en het veld voor de
     * kortingscode waren er wel, maar onzichtbaar, en het paneel stak 6 px
     * voorbij de schermrand zodat de bladzijde zijwaarts schoof.
     *
     * Vandaar hier, met een stapel op smal en twee kolommen vanaf de breedte
     * waar ze passen. Dezelfde grens als de catalogus, zodat de winkel op één
     * punt van vorm verandert en niet op drie.
     */
    .wagenlayout {
        display: grid;
        gap: var(--ruimte-8);
        align-items: start;
    }

    .wagenlayout__totalen {
        padding: var(--ruimte-6);
        border: 1px solid var(--lijn);
        border-radius: var(--radius-l);
        background: var(--grond-warm);
    }

    @media (min-width: 1001px) {
        .wagenlayout {
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: var(--ruimte-10);
        }

        /* Meescrollen heeft alleen zin naast een lijst. Boven een gestapelde
           lijst zou het paneel de halve telefoon afdekken. */
        .wagenlayout__totalen {
            position: sticky;
            top: 88px;
        }
    }

    .wagenregel {
        display: grid;
        grid-template-columns: 72px 1fr auto;
        gap: var(--ruimte-3);
        padding-block: var(--ruimte-4);
    }

    .wagenregel + .wagenregel { border-top: 1px solid var(--lijn-zacht); }

    .wagenregel__beeld {
        width: 72px;
        height: 72px;
        border-radius: var(--radius-m);
        background: var(--grond-diep);
        overflow: hidden;
    }

    .wagenregel__beeld img { width: 100%; height: 100%; object-fit: cover; }

    /* De vooruitgangsbalk naar gratis verzending. Werkt: mensen leggen er
       iets bij om de balk vol te krijgen. */
    .verzendbalk { margin-bottom: var(--ruimte-4); }

    .verzendbalk__spoor {
        height: 6px;
        background: var(--grond-diep);
        border-radius: var(--radius-rond);
        overflow: hidden;
        margin-top: var(--ruimte-2);
    }

    .verzendbalk__vulling {
        height: 100%;
        background: var(--accent);
        border-radius: var(--radius-rond);
        transition: width var(--duur-traag) var(--soepel);
    }

    .totaalrij {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: var(--tekst-m);
    }

    .totaalrij + .totaalrij { margin-top: var(--ruimte-2); }

    .totaalrij--eind {
        margin-top: var(--ruimte-4);
        padding-top: var(--ruimte-4);
        border-top: 1px solid var(--lijn);
        font-family: var(--kop-font);
        font-size: var(--tekst-l);
        font-weight: 700;
    }

    /* ═══════════════════════════════════════════════════════════ leegte ══ */

    .leegte {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--ruimte-5);
        padding: var(--ruimte-20) var(--ruimte-6);
        text-align: center;
    }

    .leegte__icoon {
        width: 56px;
        height: 56px;
        display: grid;
        place-items: center;
        border-radius: var(--radius-l);
        background: var(--grond-diep);
        color: var(--inkt-flauw);
    }

    .leegte__tekst { color: var(--inkt-gedempt); max-width: 44ch; }

    /* ══════════════════════════════════════════════════════════ de hero ══ */

    /* ═══════════════════════════════════════════════════════════ hero ══
     *
     * Twee heroes in één blok CSS: de vlakke (inkt met geel, als er geen
     * beeld staat) en de fotohero. Die tweede wint zodra er een beeld in de
     * instellingen hangt.
     *
     * De fotohero loopt van rand tot rand en de tekst ligt erop. Dat werkt
     * alleen als de tekst gegarandeerd leesbaar blijft, dus er ligt een
     * verloop tussen — geen vlakke overlay over het hele beeld, want dan
     * verlies je precies de foto waar het om ging. Het verloop is aan de
     * tekstkant ondoorzichtig en aan de andere kant helemaal weg.
     */

    .hero {
        position: relative;
        overflow: hidden;

        /* Niet var(--inkt): dat is de tekstkleur, en die wordt in donkere
           stand crème. De hero stond dan crème op crème, en dan is de kop
           weg zonder dat er een foutmelding komt. */
        background: var(--banier);
        color: var(--op-banier);
        border-radius: var(--radius-xl);
        padding: clamp(var(--ruimte-10), 7vw, var(--ruimte-24)) var(--gutter);
        isolation: isolate;
    }

    /* Een gele lichtbron rechtsboven. Zeer zacht — het is de enige plek in
       het thema waar het geel groot mag zijn, en zelfs daar is het een gloed
       en geen vlak. */
    .hero::before {
        content: "";
        position: absolute;
        top: -40%;
        right: -10%;
        width: min(700px, 90%);
        aspect-ratio: 1;
        background: radial-gradient(circle, rgb(244 226 6 / 0.22) 0%, transparent 62%);
        z-index: -1;
    }

    .hero__oog {
        font-family: var(--kop-font);
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--accent);
    }

    .hero__titel {
        font-size: var(--tekst-5xl);
        line-height: 0.98;
        letter-spacing: -0.035em;
        margin-top: var(--ruimte-4);
        max-width: 16ch;
    }

    .hero__tekst {
        margin-top: var(--ruimte-5);
        font-size: var(--tekst-l);
        color: rgb(242 240 233 / 0.72);
        max-width: 48ch;
    }

    .hero .knop--rand {
        background: transparent;
        border-color: rgb(242 240 233 / 0.3);
        color: var(--op-banier);
    }

    .hero .knop--rand:hover { border-color: var(--op-banier); }

    /* ─────────────────────────────────────────── de hero mét fotografie ── */

    .hero--beeld {
        --hero-hoogte: clamp(30rem, 76svh, 46rem);

        background: var(--grond-diep);
        color: var(--inkt);
        border-radius: 0;
        padding: 0;
        min-height: var(--hero-hoogte);
        display: grid;
        /* Eén cel: beeld en tekst liggen op elkaar, niet naast elkaar. Zo
           blijft de compositie kloppen op elke breedte zonder tweede
           lay-out. */
        grid-template-areas: "hero";
        isolation: isolate;
        margin-block-end: var(--ruimte-10);
    }

    .hero--beeld::before { content: none; }

    .hero__doek {
        grid-area: hero;
        position: relative;
        overflow: hidden;
        z-index: 0;
    }

    .hero__foto {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Rechts uitlijnen: daar staat het kind. Bij het versmallen wordt er
           dus links weggesneden, waar toch alleen achtergrond zit. */
        object-position: 72% 40%;
        display: block;
    }

    /* Het leesverloop. Van de tekstkant naar het beeld, en op een smal
       scherm van onder naar boven — want daar staat de tekst ónder het
       kind in plaats van ernaast. */
    .hero--beeld::after {
        content: "";
        grid-area: hero;
        z-index: 1;
        background:
            linear-gradient(
                to top,
                var(--grond-diep) 0%,
                color-mix(in oklab, var(--grond-diep) 88%, transparent) 34%,
                transparent 72%
            );
    }

    /* Het omhulsel houdt de gutter en de maximumbreedte van de site aan; de
       tekstkolom zit erbinnen. Die twee scheiden is nodig, want anders vecht
       de auto-marge van het omhulsel met de breedte van de kolom en komt de
       tekst midden op de foto te staan in plaats van links ervan. */
    .hero__lijf {
        grid-area: hero;
        z-index: 2;
        align-self: end;
        padding-block: var(--ruimte-10) clamp(var(--ruimte-8), 6vw, var(--ruimte-12));
        display: flex;
    }

    .hero__inhoud {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 34rem;
    }

    @media (min-width: 861px) {
        .hero--beeld::after {
            background:
                linear-gradient(
                    to right,
                    var(--grond-diep) 0%,
                    var(--grond-diep) 24%,
                    color-mix(in oklab, var(--grond-diep) 82%, transparent) 40%,
                    color-mix(in oklab, var(--grond-diep) 30%, transparent) 56%,
                    transparent 72%
                );
        }

        .hero__lijf {
            align-self: center;
            padding-block: clamp(var(--ruimte-12), 7vw, var(--ruimte-16));
        }

        .hero__foto { object-position: 74% 42%; }
    }

    .hero--beeld .hero__oog {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        color: var(--inkt-gedempt);
    }

    .hero__vonk { color: var(--accent-diep); display: inline-grid; place-items: center; }

    .hero--beeld .hero__titel {
        /* Vloeiend van telefoon tot breedbeeld, en balance zodat de kop niet
           met één woord op de laatste regel eindigt. De bovengrens ligt op
           3,5rem: daarboven loopt deze kop in vier regels en duwt hij de
           knoppen van het scherm. */
        font-size: clamp(2.125rem, 4.4vw, 3.5rem);
        line-height: 1.0;
        letter-spacing: -0.035em;
        margin-top: var(--ruimte-3);
        text-wrap: balance;
        color: var(--inkt);
    }

    .hero--beeld .hero__tekst {
        color: var(--inkt-gedempt);
        max-width: 44ch;
        font-size: clamp(1rem, 1.6vw, var(--tekst-l));
        text-wrap: pretty;
    }

    .hero__acties {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-3);
        margin-top: var(--ruimte-6);
    }

    /* De tweede knop is glas: hij mag naast het geel staan zonder ermee te
       concurreren, en hij laat de foto erdoorheen zien. Op browsers zonder
       backdrop-filter valt hij terug op een vlakke tint. */
    .knop--glas {
        background: color-mix(in oklab, var(--paneel) 72%, transparent);
        border: 1px solid color-mix(in oklab, var(--inkt) 14%, transparent);
        color: var(--inkt);
        backdrop-filter: blur(14px) saturate(1.3);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
    }

    .knop--glas:hover {
        background: color-mix(in oklab, var(--paneel) 92%, transparent);
        border-color: color-mix(in oklab, var(--inkt) 26%, transparent);
    }

    /* ── de leeftijdsbalk ── */

    .hero__leeftijden { margin-top: clamp(var(--ruimte-6), 4vw, var(--ruimte-10)); }

    .hero__leeftijdlabel {
        display: block;
        font-family: var(--kop-font);
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--inkt-flauw);
        margin-bottom: var(--ruimte-3);
    }

    .leeftijdbalk {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2);
    }

    .leeftijdknop {
        display: grid;
        place-items: center;
        gap: 1px;
        min-width: 3.6rem;
        padding: var(--ruimte-2) var(--ruimte-3);
        border-radius: var(--radius-m);
        border: 1px solid color-mix(in oklab, var(--inkt) 12%, transparent);
        background: color-mix(in oklab, var(--paneel) 80%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        text-decoration: none;
        color: var(--inkt);
        transition:
            transform var(--duur-snel) var(--veerkrachtig),
            background var(--duur-snel) var(--soepel),
            border-color var(--duur-snel) var(--soepel);
    }

    .leeftijdknop:hover,
    .leeftijdknop:focus-visible {
        background: var(--accent);
        border-color: var(--accent-diep);
        transform: translateY(-2px);
    }

    .leeftijdknop__cijfer {
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: var(--tekst-l);
        line-height: 1;
    }

    .leeftijdknop__aantal {
        font-size: 0.6875rem;
        color: var(--inkt-flauw);
        font-variant-numeric: tabular-nums;
    }

    .leeftijdknop:hover .leeftijdknop__aantal,
    .leeftijdknop:focus-visible .leeftijdknop__aantal { color: var(--accent-inkt, #16150F); }

    /* ── de zwevende mascotte ──
       Traag, klein van uitslag, en alleen waar er plek voor is. Een mascotte
       die over de tekst danst is een mascotte die niemand meer ziet. */

    .hero__mascottes {
        grid-area: hero;
        z-index: 3;
        pointer-events: none;
        display: none;
    }

    @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
        .hero__mascottes { display: block; position: relative; }

        .mascotte {
            position: absolute;
            color: var(--accent-diep);
            filter: drop-shadow(0 8px 24px rgb(0 0 0 / 0.16));
        }

        .mascotte--een {
            left: 52%;
            top: 18%;
            animation: zweef 7s ease-in-out infinite;
        }
    }

    @keyframes zweef {
        0%, 100% { translate: 0 0; rotate: -4deg; }
        50% { translate: 0 -14px; rotate: 4deg; }
    }

    /* ── het binnenkomen ──
     *
     * Scrollgestuurd waar de browser het kent: de animatie hangt aan de
     * scrollpositie en draait op de samensteller, niet op de hoofddraad. Dat
     * is het verschil tussen soepel en schokkerig terwijl de rest van de
     * pagina nog laadt.
     *
     * De @supports eromheen is geen luxe: zonder die controle staat de
     * inhoud op opacity 0 in een browser die animation-timeline niet kent,
     * en dan is de pagina leeg. Standaard is dus zichtbaar; de animatie is
     * de uitzondering.
     */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .hero__lijf > * {
                animation: opkomen 1ms linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 40%;
            }

            /* Het beeld schuift trager dan de pagina. Klein gehouden — acht
               procent is genoeg om diepte te suggereren, meer wordt een
               kermisattractie. */
            .hero__foto {
                animation: diepte linear both;
                animation-timeline: view();
                animation-range: exit 0% exit 100%;
            }
        }
    }

    @keyframes opkomen {
        from { opacity: 0; translate: 0 18px; }
        to { opacity: 1; translate: 0 0; }
    }

    @keyframes diepte {
        from { scale: 1.06; translate: 0 0; }
        to { scale: 1.06; translate: 0 8%; }
    }

    /* ═════════════════════════════════════════════════════ sectiekoppen ══ */

    .sectiekop {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--ruimte-4);
        flex-wrap: wrap;
        margin-bottom: var(--ruimte-6);
    }

    .sectiekop h2 {
        font-size: clamp(1.5rem, 3vw, 2.125rem);
        letter-spacing: -0.02em;
        margin-top: var(--ruimte-1);
    }

    /* ═══════════════════════════════════════════════ de categorietegels ══
     *
     * Een asymmetrisch raster: de eerste tegel is dubbel zo breed en hoog.
     * Dat is geen sier — het geeft de belangrijkste categorie het gewicht dat
     * ze verdient, en het breekt de dodelijke regelmaat van zes gelijke
     * blokjes die elke webshop heeft.
     *
     * Alles staat op één laag: de foto vult de tegel, een verloop van onder
     * houdt de tekst leesbaar, en de tekst ligt erbovenop. Bij hover zoomt
     * alleen de foto — de tegel zelf blijft staan, want een tegel die
     * beweegt onder je muis maakt het klikken moeilijker.
     */

    /*
     * De beelden zijn vierkante productfoto's op een volvlakse achtergrond —
     * geen sfeerfoto's. Daar hoort dus geen donker verloop overheen: dat maakt
     * een felroze vlak met een teddybeer erop tot een grijze vlek.
     *
     * Vandaar: vierkante tegels, beeld gewoon vullend, en het label eronder op
     * een matglazen balk. De kleur van de foto is de kleur van de tegel.
     */

    .tegels {
        display: grid;
        gap: var(--ruimte-3);
        grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 45%), 1fr));
    }

    .tegel {
        position: relative;
        display: grid;
        grid-template-areas: "tegel";
        aspect-ratio: 1;
        border-radius: var(--radius-l);
        overflow: hidden;
        isolation: isolate;
        background: var(--grond-diep);
        text-decoration: none;
        color: var(--inkt);
        transition: transform var(--duur-normaal) var(--veerkrachtig),
                    box-shadow var(--duur-normaal) var(--soepel);
    }

    .tegel:hover, .tegel:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 18px 44px -20px rgb(22 21 15 / 0.4);
    }

    /* De drie lagen van een tegel liggen in hetzelfde vak van hetzelfde
     * raster. Een rasteritem mag standaard niet kleiner worden dan zijn
     * inhoud, en daar zit de valkuil: een foto van 198 px breed en een naam
     * die uit één lang woord bestaat ("Gezelschapsspellen") duwen dat ene vak
     * open tot voorbij de tegel. De tegel zelf blijft 173 px en staat op
     * `overflow: hidden`, dus de bladzijde schuift niet — het label, het
     * pijltje en de foto worden gewoon rechts afgesneden, en niemand ziet
     * waarom. `min-width: 0` haalt die ondergrens weg, zodat het vak de tegel
     * volgt in plaats van andersom. (19 september 2026)
     */
    .tegel > *,
    .tegel__tekst > * { min-width: 0; min-height: 0; }

    .tegel__doek { grid-area: tegel; overflow: hidden; }

    .tegel__foto {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--duur-traag) var(--soepel);
    }

    /* Zonder beeld: een rustig vlak met een streep van het accent, zodat een
       categorie zonder foto niet als een gat in het raster leest. */
    .tegel:not(:has(.tegel__foto)) .tegel__doek {
        background:
            radial-gradient(120% 100% at 20% 0%, var(--accent-waas) 0%, transparent 60%),
            var(--grond-warm);
    }

    .tegel__tekst {
        grid-area: tegel;
        align-self: end;
        z-index: 1;
        margin: var(--ruimte-2);
        padding: var(--ruimte-3) var(--ruimte-4);
        border-radius: var(--radius-m);
        background: color-mix(in oklab, var(--paneel) 88%, transparent);
        backdrop-filter: blur(12px) saturate(1.4);
        -webkit-backdrop-filter: blur(12px) saturate(1.4);
        display: grid;
        gap: 1px;
    }

    .tegel__naam {
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
        letter-spacing: -0.015em;
        line-height: 1.15;
        /* Een categorie heet soms in één woord: "Gezelschapsspellen",
           "Buitenspeelgoed". Zo'n woord past niet op één regel in een tegel
           van 173 px. Met een koppelteken leest dat als een afbreking; zonder
           valt er een losse letter op de tweede regel. `break-word` is het
           vangnet voor een woord waar geen afbreekpunt in zit. */
        hyphens: auto;
        overflow-wrap: break-word;
    }

    /* Op een telefoon is een tegel ongeveer 173 px breed en houdt het label
     * daar 125 px tekst van over. "Gezelschapsspellen" meet er 150. Een
     * krappere binnenmarge en een streepje kleiner zetten zo'n naam alsnog op
     * één regel, in plaats van hem af te breken op een losse letter. */
    @media (max-width: 26.25rem) {
        .tegel__tekst {
            margin: var(--ruimte-1);
            padding: var(--ruimte-3);
        }

        .tegel__naam { font-size: 0.875rem; }
    }

    .tegel__aantal {
        font-size: var(--tekst-s);
        color: var(--inkt-flauw);
    }

    .tegel__pijl {
        grid-area: tegel;
        z-index: 1;
        justify-self: end;
        align-self: start;
        margin: var(--ruimte-4);
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgb(255 255 255 / 0.16);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #fff;
        opacity: 0;
        translate: -6px 0;
        transition:
            opacity var(--duur-normaal) var(--soepel),
            translate var(--duur-normaal) var(--veerkrachtig),
            background var(--duur-snel) var(--soepel);
    }

    .tegel:hover .tegel__foto,
    .tegel:focus-visible .tegel__foto { scale: 1.05; }

    .tegel:hover .tegel__pijl,
    .tegel:focus-visible .tegel__pijl {
        opacity: 1;
        translate: 0 0;
        background: var(--accent);
        color: var(--op-accent);
    }

    @media (prefers-reduced-motion: reduce) {
        .tegel__foto, .tegel__pijl { transition: none; }
        .tegel:hover .tegel__foto { scale: 1; }
        .tegel__pijl { opacity: 1; translate: 0 0; }
    }

    /* ═══════════════════════════════════════════════════════ de speelhoek ══ */

    .speelhoek {
        display: grid;
        gap: var(--ruimte-3);
        grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    }

    @media (min-width: 901px) {
        .speelhoek { grid-template-columns: 1.4fr 1fr 1fr; }
    }

    .speelkaart {
        display: grid;
        align-content: start;
        gap: var(--ruimte-2);
        text-align: left;
        padding: var(--ruimte-6);
        border-radius: var(--radius-l);
        border: 1px solid var(--lijn);
        background:
            radial-gradient(120% 90% at 100% 0%, var(--accent-waas) 0%, transparent 58%),
            var(--paneel);
        text-decoration: none;
        color: inherit;
        transition:
            border-color var(--duur-normaal) var(--soepel),
            transform var(--duur-normaal) var(--veerkrachtig),
            box-shadow var(--duur-normaal) var(--soepel);
    }

    .speelkaart:hover,
    .speelkaart:focus-visible {
        border-color: var(--accent-diep);
        transform: translateY(-3px);
        box-shadow: 0 14px 40px -18px rgb(22 21 15 / 0.35);
    }

    .speelkaart__badge {
        justify-self: start;
        font-family: var(--kop-font);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        padding: 3px var(--ruimte-2);
        border-radius: 999px;
        background: var(--accent);
        color: var(--op-accent);
    }

    .speelkaart__titel {
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: clamp(1.125rem, 1.8vw, 1.5rem);
        letter-spacing: -0.02em;
        margin-top: var(--ruimte-1);
    }

    .speelkaart--breed .speelkaart__titel { font-size: clamp(1.375rem, 2.4vw, 2rem); }

    .speelkaart__tekst {
        color: var(--inkt-gedempt);
        font-size: var(--tekst-s);
        max-width: 40ch;
    }

    .speelkaart__knop {
        display: inline-flex;
        align-items: center;
        gap: var(--ruimte-2);
        margin-top: var(--ruimte-3);
        font-weight: 650;
        color: var(--accent-diep);
    }

    .speelkaart:hover .speelkaart__knop svg { translate: 3px 0; }
    .speelkaart__knop svg { transition: translate var(--duur-snel) var(--veerkrachtig); }

    /* ═══════════════════════════════════════════════════════ de waarborg ══ */

    .waarborg {
        display: grid;
        gap: var(--ruimte-5);
        grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
        padding: var(--ruimte-6);
        border-radius: var(--radius-l);
        background: var(--grond-warm);
        border: 1px solid var(--lijn-zacht);
    }

    .waarborg__punt { display: flex; gap: var(--ruimte-3); align-items: flex-start; }
    .waarborg__icoon { color: var(--accent-diep); flex-shrink: 0; margin-top: 2px; }
    .waarborg__kop { font-family: var(--kop-font); display: block; font-size: var(--tekst-m); }
    .waarborg__tekst { color: var(--inkt-gedempt); font-size: var(--tekst-s); }

    /* ══════════════════════════════════════════════════ de kadowijzer ══
     *
     * Een popover, geen zelfgebouwde overlay. Daardoor zorgt de browser voor
     * de bovenlaag, de focusval, de escape-toets en het klikken buiten het
     * venster — vier dingen die met de hand geschreven bijna altijd half af
     * zijn.
     *
     * De ::backdrop is onderdeel van de popover-API en dus geen extra div die
     * ergens in de DOM moet hangen.
     */

    .kadowijzer {
        border: none;
        padding: 0;
        background: transparent;
        max-width: min(46rem, 94vw);
        width: 100%;
        max-height: 92svh;
        margin: auto;
        overflow: visible;
        color: var(--inkt);
    }

    .kadowijzer::backdrop {
        background: rgb(16 15 11 / 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* @starting-style geeft een element een begintoestand vóórdat het in de
       DOM zichtbaar wordt. Zonder dat springt een popover er zonder overgang
       in, want er is geen "vorige" waarde om vanaf te animeren. */
    .kadowijzer {
        opacity: 0;
        scale: 0.96;
        transition:
            opacity var(--duur-normaal) var(--soepel),
            scale var(--duur-normaal) var(--veerkrachtig),
            display var(--duur-normaal) allow-discrete,
            overlay var(--duur-normaal) allow-discrete;
    }

    .kadowijzer:popover-open { opacity: 1; scale: 1; }

    @starting-style {
        .kadowijzer:popover-open { opacity: 0; scale: 0.96; }
    }

    .kadowijzer::backdrop {
        opacity: 0;
        transition:
            opacity var(--duur-normaal) var(--soepel),
            display var(--duur-normaal) allow-discrete,
            overlay var(--duur-normaal) allow-discrete;
    }

    .kadowijzer:popover-open::backdrop { opacity: 1; }

    @starting-style {
        .kadowijzer:popover-open::backdrop { opacity: 0; }
    }

    .kadowijzer__lijf {
        position: relative;
        background: var(--paneel);
        border-radius: var(--radius-xl);
        padding: clamp(var(--ruimte-6), 4vw, var(--ruimte-10));
        box-shadow: 0 40px 90px -30px rgb(16 15 11 / 0.55);
        max-height: 92svh;
        overflow-y: auto;
        display: grid;
        gap: var(--ruimte-5);
    }

    .kadowijzer__sluiten {
        position: absolute;
        top: var(--ruimte-4);
        right: var(--ruimte-4);
    }

    .kadowijzer__oog {
        font-family: var(--kop-font);
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--accent-diep);
    }

    .kadowijzer__titel {
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: clamp(1.375rem, 3vw, 1.875rem);
        letter-spacing: -0.02em;
        margin-top: var(--ruimte-1);
    }

    .kadowijzer__uitleg { color: var(--inkt-gedempt); margin-top: var(--ruimte-2); }

    .kadowijzer__voortgang {
        display: flex;
        gap: 6px;
        margin-top: var(--ruimte-5);
    }

    .kadowijzer__voortgang span {
        height: 4px;
        flex: 1;
        border-radius: 2px;
        background: var(--lijn);
        transition: background var(--duur-normaal) var(--soepel);
    }

    .kadowijzer__voortgang span.aan { background: var(--accent); }

    .kadowijzer__stap { border: none; padding: 0; margin: 0; min-width: 0; }

    .kadoraster {
        display: grid;
        gap: var(--ruimte-2);
        grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    }

    /* Ruimer dan het oogt nodig. "0-3 maanden" past niet in 5,25rem, en dan
       loopt het label over de rand van het vakje ernaast: op een telefoon
       stond er "0-3 maandenmaanden" in één regel. Liever één kolom minder. */
    .kadoraster--leeftijd { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
    .kadoraster--budget { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }

    .kadokaart {
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 2px;
        text-align: center;
        min-height: 5.25rem;
        padding: var(--ruimte-3);
        /* Zonder deze twee duwt een lang label de kaart breder dan zijn kolom
           in plaats van af te breken, en dan schuiven de kaarten over elkaar. */
        min-width: 0;
        overflow-wrap: anywhere;
        border: 1.5px solid var(--lijn);
        border-radius: var(--radius-m);
        cursor: pointer;
        transition:
            border-color var(--duur-snel) var(--soepel),
            background var(--duur-snel) var(--soepel),
            transform var(--duur-snel) var(--veerkrachtig);
    }

    .kadokaart:hover { border-color: var(--lijn-sterk); transform: translateY(-2px); }

    .kadokaart input { position: absolute; opacity: 0; width: 0; height: 0; }

    /* :has() laat de kaart zelf reageren op het vinkje erin. Vroeger was
       hiervoor een extra klasse en een stukje JavaScript nodig. */
    .kadokaart:has(input:checked) {
        border-color: var(--accent-diep);
        background: var(--accent-waas);
    }

    .kadokaart:has(input:focus-visible) {
        outline: 2px solid var(--inkt);
        outline-offset: 2px;
    }

    .kadokaart__groot {
        font-family: var(--kop-font);
        font-weight: 700;
        font-size: var(--tekst-l);
        line-height: 1.15;
    }

    .kadokaart--klein .kadokaart__groot { font-size: 1.375rem; }
    .kadokaart__klein { font-size: var(--tekst-s); color: var(--inkt-flauw); }
    .kadokaart--overslaan { border-style: dashed; }

    .kadowijzer__voet {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--ruimte-3);
        padding-top: var(--ruimte-4);
        margin-top: var(--ruimte-5);
        border-top: 1px solid var(--lijn-zacht);
    }

    /* Op een smal scherm past de knop niet naast de terugknop. Hij gaat dan
       over de volle breedte eronder staan in plaats van eruit te steken. */
    @media (max-width: 560px) {
        .kadowijzer__voet .knop--groot { flex: 1 1 100%; justify-content: center; }
        .kadowijzer__voet .duw { display: none; }
    }

    .kadowijzer__klein {
        font-size: var(--tekst-s);
        color: var(--inkt-flauw);
        text-align: center;
        margin-top: var(--ruimte-4);
    }

    @media (prefers-reduced-motion: reduce) {
        .kadowijzer, .kadowijzer::backdrop, .kadokaart { transition: none; }
    }

    /* ═══════════════════════════════════════════════════════ de speelhoek ══ */

    .speelkop { max-width: 60ch; margin-block: var(--ruimte-8) var(--ruimte-10); }

    /* Op een telefoon stond er tussen het kruimelpad en de eerste kop bijna
       een half scherm niets. Ruimte is daar duurder dan op een monitor. */
    @media (max-width: 700px) {
        .speelkop { margin-block: var(--ruimte-4) var(--ruimte-6); }
        .spel { margin-bottom: var(--ruimte-6); }
    }
    .speelkop h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.035em; margin-top: var(--ruimte-2); }
    .speelkop__tekst { margin-top: var(--ruimte-4); color: var(--inkt-gedempt); font-size: var(--tekst-l); }

    .spel {
        margin-bottom: var(--ruimte-12);
        padding: clamp(var(--ruimte-5), 3vw, var(--ruimte-8));
        border: 1px solid var(--lijn);
        border-radius: var(--radius-xl);
        background: var(--paneel);
        scroll-margin-top: 96px;
    }

    .spel__kop {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--ruimte-4);
        margin-bottom: var(--ruimte-6);
    }

    .spel__uitleg { color: var(--inkt-gedempt); margin-top: var(--ruimte-2); max-width: 52ch; }
    .spel__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }
    .spel__keuze .invoer { min-height: 40px; width: auto; }

    .spel__scherm { position: relative; display: grid; place-items: center; }

    [data-doolhof] {
        width: min(100%, 34rem);
        height: auto;
        aspect-ratio: 1;

        /* Scherpe hoeken, en enkel hier. Het doolhof is een tuin met rechte
           heggen tot tegen de rand; een afgeronde hoek knipt daar een stuk heg
           af en laat een driehoekje paneel zien. Elders op de bladzijde blijven
           de hoeken rond zoals overal. */
        border-radius: 0;
        background: var(--paneel);

        /* Nooit 'none': dan vangt het canvas ook het gebaar waarmee iemand de
           bladzijde verder wil lezen, en zit hij vast zodra zijn duim hier
           belandt. Verticaal scrollen blijft dus van de browser; links en
           rechts vegen is voor het spel, en op en neer doen de knoppen. */
        touch-action: pan-y;
    }

    [data-doolhof]:focus-visible { outline: 3px solid var(--accent-diep); outline-offset: 4px; }

    /* ── mep de mascottes ──
     *
     * Negen kisten in een raster. Elke mascotte staat in een vakje dat aan de
     * onderkant afknipt, zodat hij er echt uit lijkt te komen in plaats van
     * er gewoon te verschijnen.
     *
     * De beweging zit in één eigenschap: translate van 105% naar 0. Geen
     * hoogte animeren — dat herberekent de opmaak van het hele raster bij elk
     * beeld, en met negen vakjes tegelijk merk je dat.
     */

    /*
     * Het grasveld waar de kuilen in liggen.
     *
     * Zonder dit staan er negen bruine vierkanten op de bladzijde en is het
     * geen weide maar een raster. Het gras kost geen enkel beeldbestand: twee
     * lagen sprietjes onder een net iets andere hoek geven de warreling, en een
     * handvol bloemen erbovenop maakt er een veld van in plaats van tapijt.
     *
     * De maten staan in em en niet in pixels, zodat het gras meeschaalt met de
     * kuilen: op een telefoon wordt alles kleiner en blijven de verhoudingen
     * kloppen.
     */
    .mepveld {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(var(--ruimte-4), 4vw, var(--ruimte-8));
        max-inline-size: 34rem;
        margin-inline: auto;

        padding: clamp(var(--ruimte-4), 4vw, var(--ruimte-8));
        border-radius: var(--radius-xl, 1.5rem);

        background:
            /* de bloemen, met de hand geplaatst zodat er geen twee naast
               elkaar staan en er geen in een hoek valt */
            radial-gradient(circle at 6% 30%,  #FFF0A0 0 0.3em, transparent 0.32em),
            radial-gradient(circle at 50% 4%,  #FFFFFF 0 0.26em, transparent 0.28em),
            radial-gradient(circle at 95% 40%, #F9D2E6 0 0.28em, transparent 0.3em),
            radial-gradient(circle at 30% 97%, #FFFFFF 0 0.24em, transparent 0.26em),
            radial-gradient(circle at 72% 96%, #FFF0A0 0 0.26em, transparent 0.28em),
            radial-gradient(circle at 4% 68%,  #F9D2E6 0 0.22em, transparent 0.24em),

            /* twee lagen sprietjes: de hoeken verschillen twaalf graden, en juist
               dat verschil laat het gras warrelen in plaats van strepen. Grof
               genoeg om te zien: fijner loopt op een scherm in elkaar tot een
               egaal vlak, en dan is het geen gras maar verf. */
            repeating-linear-gradient(93deg,
                rgba(255, 255, 255, 0.11) 0 0.11em, transparent 0.11em 0.67em),
            repeating-linear-gradient(87deg,
                rgba(28, 62, 18, 0.15) 0 0.09em, transparent 0.09em 0.41em),
            repeating-linear-gradient(90deg,
                rgba(150, 190, 95, 0.20) 0 0.16em, transparent 0.16em 1.13em),

            /* Zachte plekken waar de zon door de bomen valt. Zonder deze is het
               gras overal even groen, en dan leest het als vilt in plaats van
               als een weide. */
            radial-gradient(46% 34% at 22% 30%, rgba(178, 210, 118, 0.34) 0%, transparent 70%),
            radial-gradient(38% 30% at 78% 66%, rgba(178, 210, 118, 0.28) 0%, transparent 72%),
            radial-gradient(40% 32% at 62% 12%, rgba(74, 118, 44, 0.26) 0%, transparent 74%),

            /* De grond zelf, lichter aan de bovenkant alsof de zon erop staat.
               Het geelgroen volgt de kuilen: die brengen hun eigen graspol mee,
               en twee soorten groen naast elkaar valt meteen op. */
            linear-gradient(178deg, #86B855 0%, #6D9E42 55%, #588A34 100%);

        box-shadow:
            inset 0 0 0 1px rgba(30, 70, 22, 0.35),
            inset 0 -0.6em 1.4em rgba(24, 56, 18, 0.28),
            0 0.5em 1.6em rgba(40, 60, 30, 0.18);

        /* Zolang het spel niet loopt, kan er niets aangetikt worden. Een
           kist die reageert terwijl er niets in staat, laat het spel kapot
           lijken. */
        pointer-events: none;
    }

    .mepveld[data-bezig="ja"] { pointer-events: auto; }

    .mepvak {
        position: relative;
        aspect-ratio: 1;
        border: 0;
        padding: 0;
        /* Een gat, en geen vakje. De ronde bovenkant met een vlakkere voet is
           de vorm van een hol in de grond; met vier gelijke hoeken blijft het
           een tegel, hoe donker je hem ook maakt. */
        border-radius: 46% 46% 16% 16% / 38% 38% 12% 12%;

        /* Donker in de keel, warmer naar de rand, met een groene zoom waar het
           gras over de kant valt. */
        background:
            radial-gradient(120% 90% at 50% 122%, #2A1B0B 42%, transparent 43%),
            radial-gradient(96% 82% at 50% 22%, #4A3218 0%, #6E4E2A 62%, #47331A 100%);
        box-shadow:
            inset 0 0 0 0.16em rgba(96, 145, 58, 0.9),
            inset 0 0.55em 1.3em rgba(18, 10, 4, 0.7),
            0 0.15em 0.4em rgba(30, 60, 20, 0.35);
        overflow: hidden;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mepveld[data-bezig="ja"] .mepvak:hover { box-shadow: inset 0 0 0 2px var(--accent); }
    .mepvak:focus-visible { outline: 3px solid var(--accent-diep); outline-offset: 3px; }

    /* De voorkant van de kuil, over de mascotte heen. Dit is wat het "eruit
       komen" doet: hij schuift er letterlijk achter vandaan.

       Sinds er gras rond de kuilen ligt, is dit een aarden walletje met een
       groene kam: het opgeworpen zand van wie er onder graaft. Zonder die kam
       eindigt de kuil in een rechte streep en dat leest als een doos. */
    .mepvak__rand {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        block-size: 24%;
        background:
            linear-gradient(180deg, #7CB24C 0 0.24em, #56421F 0.24em, #3A2A12 100%);
        border-block-start: 2px solid #2C4A1C;
        border-end-start-radius: 16%;
        border-end-end-radius: 16%;
    }

    .mepvak__mascotte {
        position: absolute;
        inset-inline: 12%;
        inset-block-end: 14%;
        display: block;
        translate: 0 118%;
        transition: translate 150ms var(--soepel);
    }

    .mepvak__mascotte svg {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    /* Omhoog met een veerkrachtige curve: hij schiet er net iets te ver uit
       en zakt terug. Dat is het verschil tussen "verschijnen" en "opduiken". */
    .mepvak[data-op="ja"] .mepvak__mascotte {
        translate: 0 0;
        transition: translate 190ms var(--veerkrachtig);
    }

    /* Geraakt: even indeuken en dan weg. Kort, want de volgende staat er al. */
    .mepvak[data-raak="ja"] .mepvak__mascotte {
        translate: 0 12%;
        scale: 0.86;
        transition: translate 120ms var(--soepel), scale 120ms var(--soepel);
    }

    .mepvak[data-raak="ja"] {
        background:
            radial-gradient(120% 90% at 50% 118%, var(--grond-diep) 40%, transparent 41%),
            var(--accent-waas);
    }

    /* Het mepspel heeft geen .spel__scherm, dus de melding hangt aan de
       sectie zelf. Die staat op relatief zodat hij onderin blijft. */
    #meppen { position: relative; }

    @media (prefers-reduced-motion: reduce) {
        .mepvak__mascotte,
        .mepvak[data-op="ja"] .mepvak__mascotte,
        .mepvak[data-raak="ja"] .mepvak__mascotte { transition: none; }
    }

    .spel__melding {
        position: absolute;
        inset-inline: 0;
        bottom: var(--ruimte-5);
        margin-inline: auto;
        width: fit-content;
        max-width: 90%;
        padding: var(--ruimte-3) var(--ruimte-5);
        border-radius: 999px;
        background: var(--inkt);
        color: var(--grond);
        font-weight: 600;
        text-align: center;
        box-shadow: var(--schaduw-3, 0 20px 50px -20px rgb(0 0 0 / 0.4));
    }

    .spel__voet {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-5);
        margin-top: var(--ruimte-5);
        padding-top: var(--ruimte-4);
        border-top: 1px solid var(--lijn-zacht);
    }

    .spel__teller { font-size: var(--tekst-s); color: var(--inkt-gedempt); font-variant-numeric: tabular-nums; }
    .spel__teller strong { color: var(--inkt); font-size: var(--tekst-m); }

    /*
     * Het pijltjeskruis, als één ding en niet als vier losse knopjes.
     *
     * Het was een raster van drie bij twee waarvan twee cellen leeg stonden.
     * Naast een toets tikken deed dan niets, en op een telefoon is dat de helft
     * van de keren: een duim is breder dan een pictogram. Nu is het een kruis
     * zoals op een spelbesturing, met een fond eronder zodat het één vlak is
     * waar je op mikt, en toetsen die tot tegen elkaar lopen.
     *
     * Het staat er in vier rijen van het raster zodat de vier richtingen op hun
     * natuurlijke plek liggen. De hoeken blijven leeg, maar ze zijn nu deel van
     * het fond en niet een gat in de bladzijde.
     */
    .dpad {
        margin-left: auto;
        display: grid;
        grid-template-columns: repeat(3, var(--dpad-toets, 46px));
        grid-template-rows: repeat(3, var(--dpad-toets, 46px));
        gap: 2px;
        padding: 6px;
        border-radius: var(--radius-rond);
        background:
            radial-gradient(72% 72% at 50% 34%, var(--grond-warm) 0%, var(--grond-diep) 100%);
        box-shadow:
            inset 0 0 0 1px var(--lijn),
            inset 0 2px 8px rgb(0 0 0 / 0.14),
            0 2px 6px rgb(0 0 0 / 0.10);
    }

    .dpad button {
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 8px;
        background: var(--paneel);
        color: var(--inkt);
        box-shadow:
            inset 0 0 0 1px var(--lijn),
            0 1px 0 rgb(255 255 255 / 0.6),
            0 2px 4px rgb(0 0 0 / 0.12);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition:
            background var(--duur-snel) var(--soepel),
            transform var(--duur-snel) var(--veerkrachtig),
            box-shadow var(--duur-snel) var(--soepel);
    }

    /* Ingedrukt zakt de toets weg in plaats van te krimpen: dat is wat een
       echte knop doet, en het leest ook zonder kleurverschil. */
    .dpad button:active {
        background: var(--accent);
        color: var(--op-accent, #fff);
        transform: translateY(1px);
        box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.3);
    }

    .dpad button:focus-visible {
        outline: 3px solid var(--accent-diep);
        outline-offset: 2px;
        z-index: 1;
    }

    .dpad button[data-richting="op"] { grid-column: 2; grid-row: 1; }
    .dpad button[data-richting="links"] { grid-column: 1; grid-row: 2; }
    .dpad button[data-richting="rechts"] { grid-column: 3; grid-row: 2; }
    .dpad button[data-richting="neer"] { grid-column: 2; grid-row: 3; }

    /* Het midden is geen toets maar het hart van het kruis: een nokje, zodat
       het geheel als één stuk leest in plaats van als vier eilandjes. */
    .dpad::before {
        content: '';
        grid-column: 2;
        grid-row: 2;
        border-radius: 50%;
        background: var(--grond-diep);
        box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.28);
        margin: 30%;
    }

    /* Op een telefoon is dit de enige besturing die er is, en dan hoort een
       toets de maat van een duim te hebben en niet die van een pictogram. */
    @media (max-width: 700px) {
        .dpad { --dpad-toets: 58px; margin-inline: auto; }
    }

    /* ── de kleurplaat ── */

    .kleurbak { display: grid; gap: var(--ruimte-5); }

    .kleurkiezer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ruimte-2);
        justify-content: center;
    }

    .kleurstip {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--stip);
        border: 2px solid var(--lijn);
        transition: transform var(--duur-snel) var(--veerkrachtig), box-shadow var(--duur-snel) var(--soepel);
    }

    .kleurstip:hover { transform: scale(1.1); }

    .kleurstip.aan {
        transform: scale(1.15);
        box-shadow: 0 0 0 3px var(--paneel), 0 0 0 5px var(--inkt);
    }

    .kleurplaat {
        display: grid;
        place-items: center;
        padding: var(--ruimte-4);
        border-radius: var(--radius-l);
        background: var(--grond-warm);
    }

    .kleurplaat__svg { width: min(100%, 44rem); height: auto; }
    .kleurplaat__svg [data-vlak] { transition: fill var(--duur-snel) var(--soepel); }
    .kleurplaat__svg [data-vlak]:hover { opacity: 0.86; }

    .speelvoet {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-5);
        padding: clamp(var(--ruimte-6), 4vw, var(--ruimte-10));
        border-radius: var(--radius-xl);
        background: radial-gradient(120% 120% at 0% 0%, var(--accent-waas) 0%, transparent 60%), var(--grond-diep);
        margin-bottom: var(--ruimte-10);
    }

    .speelvoet h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
    .speelvoet p { margin-top: var(--ruimte-2); max-width: 46ch; }

    @media (prefers-reduced-motion: reduce) {
        .kleurstip, .dpad button, .kleurplaat__svg [data-vlak] { transition: none; }
    }

    /* ═══════════════════════════════════ onder de lijst: de onderbouw ══ */

    /*
     * Het blok onder de resultaten: uitleg, doorverwijzingen en vragen.
     *
     * Het is bewust rustiger dan alles erboven. Wie hier komt, is klaar met
     * kijken en begint met lezen — dan helpt een smallere kolom, meer
     * regelafstand en geen enkele kleur die om aandacht vraagt.
     */

    .onderbouw {
        margin-top: var(--ruimte-12);
        padding-top: var(--ruimte-10);
        border-top: 1px solid var(--lijn);
        display: grid;
        gap: var(--ruimte-10);
    }

    /* Op een breed scherm naast elkaar: lezen links, vragen rechts. Onder de
       duizend pixels onder elkaar, want twee kolommen van dertig tekens leest
       niemand. */
    @media (min-width: 1001px) {
        .onderbouw {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: var(--ruimte-10) var(--ruimte-12);
            align-items: start;
        }

        .onderbouw > .vragen {
            grid-column: 2;
            grid-row: 1 / span 2;
        }

        /* Staan de vragen er alleen — zoals op een productpagina — dan hoort
           er geen lege kolom naast. Dan gaan ze gewoon links staan. */
        .onderbouw > .vragen:only-child {
            grid-column: 1;
            grid-row: 1;
        }
    }

    .uitleg { max-width: 68ch; }

    /* De feitenregel onder een categorietitel. Punten ertussen in plaats van
       komma's: het zijn losse feiten en geen opsomming, en met een punt
       leest het als een bijschrift in plaats van als een zin. */
    .kopfeiten {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ruimte-2) var(--ruimte-3);
        margin-top: var(--ruimte-3);
        color: var(--inkt-gedempt);
        font-size: var(--tekst-s);
    }

    .kopfeiten span + span::before {
        content: '·';
        margin-right: var(--ruimte-3);
        color: var(--inkt-flauw);
    }

    .uitleg__kop,
    .verder__kop,
    .vragen__kop {
        font-family: var(--kop-font);
        font-size: var(--tekst-xl);
        margin-bottom: var(--ruimte-4);
    }

    .uitleg p {
        color: var(--inkt-gedempt);
        line-height: 1.7;
        margin-bottom: var(--ruimte-4);
    }

    .uitleg p:last-child { margin-bottom: 0; }

    /* ── de vragen ── */

    .vragen { max-width: 78ch; }

    .vragen__lijst {
        border-top: 1px solid var(--lijn-zacht);
    }

    .vraag {
        border-bottom: 1px solid var(--lijn-zacht);
    }

    .vraag__kop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ruimte-4);
        padding: var(--ruimte-4) 0;
        cursor: pointer;
        list-style: none;
        font-family: var(--kop-font);
        font-weight: 600;
        font-size: var(--tekst-l);
    }

    .vraag__kop::-webkit-details-marker { display: none; }

    .vraag__kop svg {
        flex-shrink: 0;
        color: var(--inkt-flauw);
        transition: rotate var(--duur-normaal) var(--soepel);
    }

    .vraag[open] .vraag__kop svg { rotate: 180deg; }

    .vraag__kop:hover { color: var(--accent-diep); }

    .vraag__lijf {
        padding: 0 0 var(--ruimte-5);
        color: var(--inkt-gedempt);
        line-height: 1.7;
        max-width: 66ch;
    }

    @media (prefers-reduced-motion: reduce) {
        .vraag__kop svg { transition: none; }
    }
}

/* ═══════════════════════════════════════════════════════ hulpmiddelen ══ */

@layer hulpmiddelen {
    .gedempt { color: var(--inkt-gedempt); }
    .flauw { color: var(--inkt-flauw); }
    .klein { font-size: var(--tekst-s); }
    .kleiner { font-size: var(--tekst-xs); }
    .vet { font-weight: 650; }
    .kop-font { font-family: var(--kop-font); }
    .midden { text-align: center; }
    .rechts { text-align: right; }
    .nowrap { white-space: nowrap; }

    .afkap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

    .oog {
        font-family: var(--kop-font);
        font-size: var(--tekst-s);
        font-weight: 600;
        letter-spacing: var(--spatie-label);
        text-transform: uppercase;
        color: var(--inkt-gedempt);
    }

    .enkel-lezers {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .verborgen { display: none !important; }

    /* De knop-klassen zetten display:inline-flex, en dat wint van het
       standaardgedrag van het hidden-attribuut. Zonder deze regel blijft een
       knop met hidden gewoon staan. */
    [hidden] { display: none !important; }

    @media (min-width: 1001px) {
        .enkel-mobiel { display: none !important; }
    }
}

/* ═════════════════════════════════════════════════════════ de verlanglijst ══
 *
 * De pagina waar staat wat iemand opzij zette. Ze lijkt op de winkelwagen en
 * dat is met opzet: het is dezelfde handeling, alleen zonder haast.
 *
 * Het enige wat hier anders is dan in de wagen, is de prijsvergelijking. Staat
 * er iets voor minder dan toen het opzij ging, dan krijgt die regel een
 * accentrand en een badge. Dat is de reden waarom iemand deze pagina opnieuw
 * opent, dus het mag opvallen.
 */

.vl-lijst {
    display: grid;
    gap: var(--ruimte-3);
    margin-block: var(--ruimte-6);
}

.vl-regel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ruimte-4);
    padding: var(--ruimte-3);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    border-radius: var(--radius-m, 10px);
}

.vl-regel--goedkoper {
    border-color: var(--korting, var(--accent));
}

.vl-regel__beeld img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: var(--radius-s, 6px);
}

.vl-regel__titel {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.vl-regel__titel:hover {
    text-decoration: underline;
}

.vl-regel__prijs {
    margin-block: var(--ruimte-1) 0;
    display: flex;
    align-items: baseline;
    gap: var(--ruimte-2);
    flex-wrap: wrap;
}

.vl-regel__toen {
    text-decoration: line-through;
    color: var(--inkt-flauw);
    font-size: var(--tekst-s);
}

.vl-regel__voorraad {
    margin: var(--ruimte-1) 0 0;
    font-size: var(--tekst-s);
    color: var(--inkt-gedempt);
}

.vl-regel__acties {
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
}

.vl-regel__acties form {
    margin: 0;
}

/* De deelbare link. Selecteerbaar in één klik, want dat is wat ermee gebeurt. */
.deel-link {
    display: block;
    margin-top: var(--ruimte-2);
    padding: var(--ruimte-2) var(--ruimte-3);
    background: var(--grond-warm);
    border-radius: var(--radius-s, 6px);
    font-size: var(--tekst-s);
    user-select: all;
    overflow-wrap: anywhere;
}

.vl-voet {
    margin-top: var(--ruimte-8);
    padding-top: var(--ruimte-6);
    border-top: 1px solid var(--lijn-zacht);
    text-align: center;
}

/* Het hartje in de kop, met de teller erop. */
.vl-kopicoon {
    position: relative;
}

@media (max-width: 640px) {
    .vl-regel {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .vl-regel__acties {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .vl-regel__beeld img {
        width: 72px;
        height: 72px;
    }
}

/* ═════════════════════════════════════════════════════════════ de sfeerband ══
 *
 * Een illustratie over de volle breedte, tussen twee secties in. Ze verkoopt
 * niets en dat is de bedoeling: na twee rasters met kaarten lijkt elke webshop
 * op elke andere, en dit is de plek waar er iets staat dat van deze winkel is.
 *
 * De hoogte is een keuze van het sjabloon, niet van het beeld. Zo blijft de
 * pagina evenwichtig ook als de klant er morgen een andere illustratie in zet
 * met een andere verhouding.
 */

.sfeerband {
    position: relative;
    overflow: hidden;
    line-height: 0;
    margin-block: var(--ruimte-8);
}

.sfeerband--laag   { --sfeerband-hoogte: clamp(7rem, 14vw, 12rem); }
.sfeerband--midden { --sfeerband-hoogte: clamp(10rem, 20vw, 17rem); }
.sfeerband--hoog   { --sfeerband-hoogte: clamp(14rem, 28vw, 24rem); }

.sfeerband__beeld {
    display: block;
    width: 100%;
    height: var(--sfeerband-hoogte, 12rem);
    object-fit: contain;
    object-position: center;
}

.sfeerband--grond {
    background: var(--sfeerband-grond, var(--grond-warm));
}

/* Op een telefoon staat een brede illustratie te klein om nog iets te tonen.
   Dan snijdt hij liever bij dan dat hij een streepje wordt. */
@media (max-width: 640px) {
    .sfeerband__beeld {
        object-fit: cover;
        height: clamp(6rem, 34vw, 10rem);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
 *
 * DIEPTE — waarom een winkel die klopt toch plat kan ogen
 *
 * Alles hierboven staat op zijn plek: de raster klopt, de typografie klopt,
 * de kleuren halen hun contrast. En toch was het oordeel "te plat". Terecht,
 * en het is geen kwestie van meer versiering maar van drie dingen die in elke
 * winkel die geld verdient wél staan en hier niet stonden.
 *
 *   1. Ritme. De hele voorpagina stond op één wit vel. Zonder wisseling van
 *      ondergrond loopt het oog door zonder ergens te landen, en dan lijkt
 *      een pagina van vijf secties er één.
 *   2. Rust-diepte. De kaarten kwamen pas omhoog als je erover ging. Op een
 *      overzicht dat je niet aanraakt — een telefoon, een eerste blik — bleef
 *      er dus een vlak raster over in plaats van een tafel met dingen erop.
 *   3. Een overlap. Eén plek waar iets over iets anders heen valt, en het
 *      geheel leest meteen als ontworpen in plaats van gestapeld.
 *
 * Wat hier bewust níét staat: verlopen over de volle breedte, glans, en
 * schaduwen die groter zijn dan het ding dat ze werpt. Dat oogt duur op een
 * ontwerp en goedkoop in een winkel.
 */

@layer smidse.diepte {

    /* ── het ritme van de bladzijde ──────────────────────────────────────
     *
     * Om de andere sectie een halve toon donkerder. Niet met een klasse per
     * sectie, want dan moet iemand ze bijhouden bij elke wijziging aan een
     * sjabloon; met nth-of-type, zodat het klopt hoeveel secties er ook staan.
     */

    /* Met een klasse en niet met nth-of-type. Het is verleidelijk om de
       secties automatisch om en om te kleuren, maar dan verspringt de hele
       bladzijde zodra iemand er een sectie tussen zet — en dat gebeurt, want
       daar is een sjabloon voor. Wie een band wil, zegt het. */
    .sectie--band {
        background: var(--grond-warm);
    }

    /* De sectie is smal (omhulsel), de band hoort breed te zijn. Dit trekt de
       achtergrond tot aan beide randen zonder de inhoud te verplaatsen, en
       zonder een extra element in het sjabloon. */
    .omhulsel.sectie--band {
        box-shadow: -50vw 0 0 var(--grond-warm), 50vw 0 0 var(--grond-warm);
    }

    /* ── diepte in rust ──────────────────────────────────────────────────
     *
     * Een lichte schaduw op elke kaart, ook zonder muis. Twee lagen: een
     * scherpe van één pixel die de rand aanzet, en een zachte eronder die het
     * ding van de ondergrond tilt. Eén laag ziet er altijd uit als een filter.
     */

    /*
     * Alles wat als een ding op de bladzijde ligt, krijgt hetzelfde reliëf en
     * dezelfde diepte. Eén lijst, want zodra dat per onderdeel apart geregeld
     * wordt, loopt het na drie wijzigingen uit elkaar en heeft de ene kaart
     * een randje dat de andere niet heeft.
     */
    .kaart,
    .tegel,
    .speelkaart,
    .gadget,
    .kadokaart,
    .spel {
        box-shadow: var(--diepte-rust);
    }

    .kaart:hover,
    .tegel:hover,
    .speelkaart:hover,
    .kadokaart:hover {
        box-shadow: var(--diepte-op);
    }

    /*
     * De opkomst.
     *
     * Kaarten schuiven een klein stukje omhoog als ze in beeld komen, met een
     * vertraging per kaart zodat het een rij wordt en geen knal. Het is geen
     * effect om het effect: het zegt waar een raster begint en waar het eindigt,
     * en dat is op een telefoon de helft van de oriëntatie.
     *
     * Beginnen doen ze zichtbaar. Wie ze op nul dekking parkeert en op een
     * waarnemer wacht, levert een lege bladzijde op zodra dat script niet
     * loopt — en dat is precies wat er bij een deelvoorbeeld of een
     * schermafdruk gebeurt.
     */
    @media (prefers-reduced-motion: no-preference) {
        .tegels > *,
        .raster > .kaart,
        .speelhoek > * {
            animation: kaart-op 520ms cubic-bezier(.22, 1, .36, 1) backwards;
        }

        .tegels > *:nth-child(2),
        .raster > .kaart:nth-child(2),
        .speelhoek > *:nth-child(2) { animation-delay: 60ms; }

        .tegels > *:nth-child(3),
        .raster > .kaart:nth-child(3),
        .speelhoek > *:nth-child(3) { animation-delay: 120ms; }

        .tegels > *:nth-child(4),
        .raster > .kaart:nth-child(4) { animation-delay: 180ms; }

        .tegels > *:nth-child(5),
        .raster > .kaart:nth-child(5) { animation-delay: 240ms; }

        .tegels > *:nth-child(n+6),
        .raster > .kaart:nth-child(n+6) { animation-delay: 300ms; }
    }

    @keyframes kaart-op {
        from { opacity: 0; transform: translateY(14px) scale(0.985); }
        to   { opacity: 1; transform: none; }
    }

    /* ── de sectiekop krijgt een anker ───────────────────────────────────
     *
     * Een streepje in de accentkleur boven het oogje. Het kost niets en het
     * is het verschil tussen een kop die begint en een kop die er staat.
     */

    .sectiekop .oog::before,
    .sectiekop .oog::after {
        content: '';
        display: block;
        inline-size: 2.25rem;
        block-size: 3px;
        background: var(--accent);
        margin-block-end: var(--ruimte-2);
    }

    .sectiekop .oog::after { display: none; }

    /* ── de overlap ──────────────────────────────────────────────────────
     *
     * De eerste sectie onder de hero schuift er een stukje overheen, met een
     * ronding bovenaan. Eén plek, en niet meer: wie dit bij elke sectie doet,
     * krijgt een pagina van dakpannen.
     */

    .ban + .sectie--krap,
    .hero + .sectie--krap {
        position: relative;
        z-index: 2;
        margin-block-start: calc(var(--ruimte-8) * -1);
        padding-block-start: calc(var(--ruimte-10) + var(--ruimte-6));
        border-start-start-radius: var(--radius-xl, 22px);
        border-start-end-radius: var(--radius-xl, 22px);
        background: var(--grond);
    }

    .ban + .sectie--krap {
        box-shadow: 0 -18px 40px rgb(22 21 15 / 0.10);
    }

    /* Op een smal scherm kost de overlap meer dan ze oplevert: daar staat de
       hero al krap en schuift er inhoud over een beeld dat je nauwelijks ziet. */
    @media (max-width: 700px) {
        .ban + .sectie--krap,
        .hero + .sectie--krap {
            margin-block-start: 0;
            padding-block-start: var(--ruimte-10);
            border-start-start-radius: 0;
            border-start-end-radius: 0;
            box-shadow: none;
        }
    }

    /* ── de prijs mag zwaarder ───────────────────────────────────────────
     *
     * In een webshop is de prijs na het beeld het tweede waar iemand naar
     * kijkt. Hij stond in hetzelfde gewicht als de rest van de kaart.
     */

    .kaart__prijs,
    .prijs--nu {
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .prijs--was {
        color: var(--inkt-flauw);
        text-decoration: line-through;
        text-decoration-thickness: 1px;
        font-weight: 500;
    }
}

/* ═══════════════════════════════════════════════ de advertentieplekken ══

   De maat staat vast vóór er iets geladen is. Dat is de hele reden dat dit
   hier staat en niet bij de advertentiedienst: een blok dat pas een hoogte
   krijgt wanneer de advertentie binnenkomt, duwt de tekst weg op het moment
   dat iemand begint te lezen, en dat is de duurste halve seconde van de
   bladzijde.

   De maten komen als eigen waarden uit het sjabloon mee, zodat er per plek
   een andere doos staat zonder dat hier een klasse bij hoeft. */

.advies {
    display: block;
    width: 100%;
    max-width: var(--adv-bm);
    min-height: var(--adv-hm);
    margin-inline: auto;
    margin-block: clamp(2rem, 5vw, 3.25rem);
    contain: layout;
}

@media (min-width: 760px) {
    .advies {
        max-width: var(--adv-b);
        min-height: var(--adv-h);
    }
}

.advies__vak {
    display: block;
    width: 100%;
    min-height: inherit;
}

/* De lege toestand. Geen grijs vlak en geen woord "advertentie" in kapitalen:
   één fijne regel met een zin erin, in de kleur van de site. Ze oogt als een
   scheiding en niet als een gat. */
.advies__leeg {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: inherit;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-l, 14px);
    background:
        linear-gradient(var(--papier-op, #fff), var(--papier-op, #fff)) padding-box,
        repeating-linear-gradient(135deg,
            var(--lijn, #e6e6e6) 0 6px,
            transparent 6px 14px) border-box;
    border: 1px dashed transparent;
}

.advies__streep {
    flex: 1;
    height: 1px;
    background: var(--lijn, #e6e6e6);
}

.advies__woord {
    flex: 0 0 auto;
    font-size: .8125rem;
    letter-spacing: .02em;
    color: var(--inkt-flauw, #777);
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .advies__leeg { transition: opacity .3s ease; }
}

/* ═══════════════════════════════════════════════════════════════ mega menu ══

   De hele indeling van de winkel achter de streepjes links in de kop.

   Twee vormen, één stuk HTML. Boven 900 pixels is het een blad dat onder de
   kop uitklapt, met de hoofdrubrieken als kolommen die in elkaar schuiven —
   je ziet er een stuk of vijf tegelijk en je leest ze als een inhoudsopgave.
   Daaronder is het een vel over het hele scherm met rijen van 48 pixels die
   je openvouwt, want een duim is geen muisaanwijzer.

   De maten zijn niet gekozen op wat er netjes uitziet: 48 pixels is de rij
   waar een ouder met een kind op de arm naast mikt en toch raakt, en de
   vouwknop staat apart van de link omdat "erheen" en "eerst kijken" twee
   verschillende bedoelingen zijn.
*/

.siteKop__streepjes {
    flex-shrink: 0;
    margin-inline-start: calc(var(--ruimte-2) * -1);
}

.megamenu {
    position: fixed;
    inset: 0;
    z-index: var(--laag-lade);
}

.megamenu[hidden] { display: none; }

.megamenu__sluier {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: color-mix(in oklab, var(--inkt, #111) 45%, transparent);
    cursor: pointer;
}

.megamenu__blad {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: min(420px, 92vw);
    block-size: 100%;
    display: flex;
    flex-direction: column;
    background: var(--grond);
    border-inline-end: 1px solid var(--lijn);
    box-shadow: 0 0 60px color-mix(in oklab, var(--inkt, #111) 22%, transparent);
    overflow: hidden;
}

.megamenu__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-3);
    min-block-size: 68px;
    padding-inline: var(--gutter, 16px);
    border-bottom: 1px solid var(--lijn);
}

.megamenu__titel {
    font-family: var(--kop-font);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: var(--spatie-kop);
}

.megamenu__lijf {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--ruimte-8);
}

.megamenu__kolom + .megamenu__kolom { border-top: 1px solid var(--lijn); }

.megamenu__hoofdrij {
    display: flex;
    align-items: stretch;
}

/* 48 pixels hoog, en de hele rij is raakbaar. Een link van 20 pixels in een
   lijst van tweehonderd rijen is een link die je drie keer mist. */
.megamenu__hoofd {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
    min-block-size: 48px;
    padding-inline: var(--gutter, 16px);
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.megamenu__hoofd:hover,
.megamenu__hoofd:focus-visible { background: var(--vlak, rgba(0, 0, 0, .04)); }

.megamenu__aantal {
    margin-inline-start: auto;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--inkt-flauw, #777);
    font-variant-numeric: tabular-nums;
}

.megamenu__vouw {
    flex: 0 0 auto;
    inline-size: 48px;
    min-block-size: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-inline-start: 1px solid var(--lijn);
    background: none;
    color: var(--inkt-flauw, #777);
    cursor: pointer;
}

.megamenu__vouw:hover,
.megamenu__vouw:focus-visible { background: var(--vlak, rgba(0, 0, 0, .04)); color: inherit; }
.megamenu__vouw[aria-expanded="true"] svg { transform: rotate(180deg); }

.megamenu__kinderen {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 var(--ruimte-2);
    background: var(--vlak, rgba(0, 0, 0, .025));
}

.megamenu__hoofdrij:has(.megamenu__vouw[aria-expanded="true"]) + .megamenu__kinderen { display: block; }

.megamenu__kind > a {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: calc(var(--gutter, 16px) + var(--ruimte-4)) var(--gutter, 16px);
    text-decoration: none;
    color: inherit;
    font-size: .9375rem;
}

.megamenu__kind > a:hover,
.megamenu__kind > a:focus-visible { text-decoration: underline; }

/* Het derde niveau blijft op een telefoon weg. Drie niveaus onder elkaar is
   geen menu meer maar een inhoudstafel, en dan scrolt niemand nog. */
.megamenu__kleinkinderen { display: none; }

.megamenu__voet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-3);
    padding: var(--ruimte-5) var(--gutter, 16px) 0;
    border-top: 1px solid var(--lijn);
    margin-top: var(--ruimte-4);
}

@media (min-width: 900px) {
    /* Op een breed scherm hangt het blad onder de kop in plaats van ernaast:
       de winkel blijft zichtbaar en het menu is een blad, geen onderbreking.

       De bovenkant is geen vast getal. Er staat boven de kop soms een
       aankondigingsbalk, en die is één of twee regels hoog naargelang de tekst
       en de breedte. Op een vast getal van 68 pixels schoof het blad over de
       kop heen en was de knop waarmee je het weer dichtdoet onbereikbaar. Het
       script meet de onderkant van de kop en zet ze in --megamenu-top. */
    .megamenu__blad {
        inset-block-start: var(--megamenu-top, 68px);
        inline-size: 100%;
        block-size: auto;
        max-block-size: min(70vh, 640px);
        border-inline-end: 0;
        border-bottom: 1px solid var(--lijn);
    }

    .megamenu__kop { display: none; }

    .megamenu__lijf { padding: var(--ruimte-6) 0 var(--ruimte-8); }

    /* Een raster en geen kolommen. Met `columns` loopt een lijst van
       tweeëndertig rubrieken door naar een vijfde en een zesde kolom die
       buiten het blad vallen: je ziet er dan tien en de rest is onbereikbaar,
       want het blad scrolt naar beneden en niet opzij. Een raster vult de rij
       en gaat daarna netjes een regel lager. */
    .megamenu__kolommen {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--ruimte-6) var(--ruimte-8);
        align-items: start;
        padding-inline: max(var(--gutter, 16px), calc((100vw - 1200px) / 2));
    }

    .megamenu__kolom { border-top: 0 !important; }

    /* Hoogstens zes onderdelen per rubriek, en hoogstens vier daaronder.
       Niet om ruimte te sparen: in een raster bepaalt de langste kolom de
       hoogte van de hele rij, en één rubriek met zeventien onderdelen laat
       naast zich drie gaten van achthonderd pixels staan. Wie alles wil, klikt
       op de rubriek zelf — die staat er bovenaan als gewone link. Op een
       telefoon geldt deze grens niet: daar staat alles onder elkaar in het
       uitklapbare lijstje. */
    .megamenu__kinderen > .megamenu__kind:nth-child(n+7) { display: none; }
    .megamenu__kleinkinderen > li:nth-child(n+5) { display: none; }

    .megamenu__hoofd {
        min-block-size: 0;
        padding: 0 0 var(--ruimte-2);
        font-family: var(--kop-font);
        font-size: .9375rem;
        letter-spacing: var(--spatie-kop);
        border-bottom: 1px solid var(--lijn);
    }

    .megamenu__hoofd:hover,
    .megamenu__hoofd:focus-visible { background: none; color: var(--accent-diep, inherit); }

    /* Geen vouwknoppen op een breed scherm: alles staat al open. */
    .megamenu__vouw { display: none; }

    .megamenu__kinderen {
        display: block !important;
        background: none;
        padding: var(--ruimte-2) 0 0;
    }

    .megamenu__kind > a {
        min-block-size: 0;
        padding: var(--ruimte-1) 0;
        font-size: .875rem;
        color: var(--inkt-flauw, #777);
    }

    .megamenu__kind > a:hover,
    .megamenu__kind > a:focus-visible { color: inherit; text-decoration: none; }

    .megamenu__kleinkinderen {
        display: block;
        list-style: none;
        margin: 0 0 var(--ruimte-2);
        padding-inline-start: var(--ruimte-4);
    }

    .megamenu__kleinkinderen a {
        display: block;
        padding: 2px 0;
        font-size: .8125rem;
        color: var(--inkt-flauw, #777);
        text-decoration: none;
    }

    .megamenu__kleinkinderen a:hover { text-decoration: underline; }

    .megamenu__voet {
        padding-inline: max(var(--gutter, 16px), calc((100vw - 1200px) / 2));
        padding-block: var(--ruimte-5) 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .megamenu__vouw svg { transition: transform .18s ease; }
    .megamenu__blad { animation: megamenu-in .2s ease both; }

    @keyframes megamenu-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: none; }
    }
}

/* De winkel eronder staat stil zolang het menu open is. Zonder dit scrolt op
   een telefoon de bladzijde achter het menu weg, en sta je na het sluiten
   ergens anders dan waar je was. */
body[data-megamenu-open="ja"] { overflow: hidden; }