/* ---------------------------------------------------------------------------
 * main.css — ontwerptokens, basistypografie, header en footer (baserules 6)
 *
 * Wordt op elke pagina ingeladen, direct na reset.css en fonts.css. Alles wat
 * hier staat komt op élke pagina voor: de tokens, de tekstbasis, de header en
 * de footer. Wat bij één template hoort staat in inc/css/<template>.css
 * (baserules 8) — voeg dat hier niet toe, hoe klein het ook is.
 *
 * Klassenamen in camelCase (baserules 2).
 *
 * DE KLEUREN KOMEN VAN DE DOELSITE
 * --------------------------------
 * Niet zelf bedacht maar uitgelezen uit boxspringgekte.nl (baserules 14):
 *
 *   USP-balk    rgba(16,16,16,.05) op desktop, #101010cf op mobiel
 *   header      #fbfaf7 — warm gebroken wit, geen zuiver wit
 *   navigatie   #fbfaf7, dezelfde band
 *   footer      #212121
 *   winkelwagen #101010 gevuld, hover #242424
 *   accent      #23a892, het vinkje in de USP-balk is #4bb28f
 *
 * Wijk hier niet van af zonder de doelsite er weer bij te pakken.
 * --------------------------------------------------------------------------- */

:root {
    /* Overgenomen van boxspringgekte.nl. */
    --kleurAccent:        #23a892;
    --kleurAccentLicht:   #4bb28f;
    --kleurAccentDonker:  #1b8574;

    /**
     * Het merkgroen zo diep dat er wit op kan. Niet overgenomen maar
     * uitgerekend: op --kleurAccent haalt wit maar 2,6:1 en moest de tekst dus
     * zwart zijn, en zwarte letters op een verzadigd groen vlak lezen als een
     * vergissing. Op #14675a zit wit op 6,4:1 — ruim boven de 4,5:1 van WCAG AA
     * en genoeg voor de kleine letters van een lead. Alleen het afsluitende
     * blok van de homepage gebruikt hem; --kleurAccent blijft de kleur van
     * streepjes, vinkjes en voortgang.
     */
    --kleurAccentDiep:    #14675a;
    --kleurTekst:         #414141;
    --kleurTekstSterk:    #212121;
    --kleurTekstZacht:    #6b6b6b;
    --kleurWit:           #ffffff;
    --kleurRand:          #e4e6e5;
    --kleurVlak:          #f6f7f7;
    --kleurKorting:       #cf2e2e;

    /* Het warme gebroken wit van de header- en navigatiebalk. */
    --kleurPapier:        #fbfaf7;

    /* Het bijna-zwart van de doelsite, en de tinten die eruit volgen: de
       lichte USP-balk, de icoonknoppen en hun tekst. */
    --kleurZwart:         #101010;
    --kleurZwartHover:    #242424;
    --kleurZwartVlak:     rgb(16 16 16 / .05);
    --kleurZwartTekst:    rgb(16 16 16 / .7);

    /* De footer. */
    --kleurFooter:        #212121;
    --kleurFooterTekst:   #b7b7b7;
    --kleurFooterRand:    rgb(255 255 255 / .1);

    --kleurAccentRing:    rgb(35 168 146 / .18);

    /* Typografie. Urbanist voor koppen, Work Sans voor lopende tekst; beide
       lokaal (baserules 10, zie fonts.css). De fallback-stack is met opzet een
       systeemfont: valt het webfont uit, dan schuift de tekst niet. */
    --fontKop:  'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --fontTekst: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Traploze maten: klein op mobiel, groot op desktop, zonder breakpoint. */
    --maatBasis:   1rem;
    --maatKlein:   .875rem;
    --maatMini:    .75rem;
    --maatH1:      clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
    --maatH2:      clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
    --maatH3:      clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
    --maatH4:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

    /* Ruimte in een vaste reeks, zodat marges optellen tot iets herkenbaars. */
    --ruimte1: .25rem;
    --ruimte2: .5rem;
    --ruimte3: .75rem;
    --ruimte4: 1rem;
    --ruimte5: 1.5rem;
    --ruimte6: 2rem;
    --ruimte7: 3rem;
    --ruimte8: 4rem;
    --ruimte9: 6rem;

    /* Layout. De doelsite houdt 1370px aan als binnenbreedte. */
    --breedteMax:    1370px;
    --breedteTekst:  68ch;
    --randRadius:    8px;
    --randRadiusKlein: 4px;
    --randRadiusGroot: 12px;
    --randRadiusPil: 999px;

    --schaduwZacht: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
    --schaduwKaart: 0 4px 16px rgb(0 0 0 / .08);
    --schaduwHoog:  0 18px 40px rgb(16 16 16 / .14), 0 2px 8px rgb(16 16 16 / .06);

    --overgang: 180ms cubic-bezier(.4, 0, .2, 1);
    --overgangTraag: 260ms cubic-bezier(.4, 0, .2, 1);

    /* De uitschuiflade, op een telefoon (.navMobiel) en op een smal venster
       (.navBalk onder 62rem). Dezelfde curve als de zoeklade en motionInit.js,
       zodat de site één beweging heeft en geen drie. */
    --overgangLade: 520ms cubic-bezier(.22, 1, .36, 1);

    /* Hoogte van de hoofdbalk, en waar hij naar krimpt zodra de pagina beweegt. */
    --hoogteHeader:     84px;
    --hoogteHeaderVast: 66px;

    /* Wat er tijdens het scrollen plakt is meer dan die balk: de navigatiebalk
       zit er in de <header> onder en plakt mee. Wie een anker of een sticky
       element onder de header wil laten uitkomen, moet dus met dit getal
       rekenen en niet met --hoogteHeaderVast — anders blijft het halverwege
       onder het menu hangen.

       navigatie.js meet de header en overschrijft deze waarde; hieronder staat
       de terugval voor het geval dat script er niet is. Die rekent met de
       volle --hoogteHeader en niet met --hoogteHeaderVast, want krimpen doet
       de balk alleen mét dat script: zonder JS is 84px de hoogte die hij de
       hele pagina lang houdt. Het uitklapmenu hangt aan dezelfde waarde (zie
       .navSub), dus een te lage terugval zou het paneel over de menubalk
       leggen. */
    --hoogteHeaderPlak: calc(var(--hoogteHeader) + 3.5rem);
}

/* Op een telefoon staat de navigatiebalk niet in de HTML (domZichtbaarheid),
   dus daar plakt alleen de balk zelf. .isMobiel staat op de <body>, vandaar
   :has() — zo blijft de waarde op :root staan en kan navigatie.js hem met een
   inline style overschrijven. */
:root:has(.isMobiel) {
    --hoogteHeaderPlak: 56px;
}

/* --------------------------------------------------------------------------
 * Basis
 * -------------------------------------------------------------------------- */

body {
    font-family: var(--fontTekst);
    font-size: var(--maatBasis);
    font-weight: 400;
    line-height: 1.65;
    color: var(--kleurTekst);
    background: var(--kleurWit);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fontKop);
    color: var(--kleurTekstSterk);
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: var(--maatH1); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--maatH2); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: var(--maatH3); font-weight: 600; }
h4 { font-size: var(--maatH4); font-weight: 600; }
h5, h6 { font-size: var(--maatBasis); font-weight: 600; }

a {
    color: var(--kleurAccent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--overgang);
}

a:hover {
    color: var(--kleurAccentDonker);
}

strong, b { font-weight: 600; }

/* Anker-doelen schuiven onder de plakkende header uit. */
:target {
    scroll-margin-top: calc(var(--hoogteHeaderPlak) + var(--ruimte5));
}

/* --------------------------------------------------------------------------
 * Layout-hulpklassen
 * -------------------------------------------------------------------------- */

/* De padding staat ook als token, want er zijn twee soorten opmaak die hem
   moeten kennen: een blok dat over de padding heen tot de vensterrand doorloopt
   (margin-inline: calc(var(--omhulselPad) * -1), zonder 100vw en dus zonder
   schuifbalk) en een streepje dat precies op de rand van de inhoud moet staan.
   Die stonden op --ruimte4 en klopten daarmee alleen onder 48rem — daarboven is
   de padding --ruimte5 en zaten ze er acht pixels naast. */
.omhulsel {
    --omhulselPad: var(--ruimte4);
    width: 100%;
    max-width: var(--breedteMax);
    margin-inline: auto;
    padding-inline: var(--omhulselPad);
}

@media (min-width: 48rem) {
    .omhulsel { --omhulselPad: var(--ruimte5); }
}

.siteHoofd {
    display: block;
    min-height: 40vh;
}

/* --------------------------------------------------------------------------
 * Pictogrammen
 *
 * De set in bg_icoon() is lijnwerk: één stijl, één lijndikte, overal dezelfde
 * ronde uiteinden. Eén regel hier scheelt die drie eigenschappen bij elk
 * pictogram apart.
 * -------------------------------------------------------------------------- */

.uspBalk svg,
.siteHeader svg,
.navMobiel svg,
.siteFooter svg,
.kruimels svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * Het woordmerk
 * -------------------------------------------------------------------------- */

.woordmerk {
    font-family: var(--fontKop);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--kleurTekstSterk);
    white-space: nowrap;
}

.woordmerk span {
    color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Knoppen
 * -------------------------------------------------------------------------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
    padding: var(--ruimte3) var(--ruimte5);
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: var(--randRadius);
    transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang), transform var(--overgang);
}

.knopPrimair {
    background: var(--kleurAccent);
    color: var(--kleurWit);
}

.knopPrimair:hover {
    background: var(--kleurAccentDonker);
    color: var(--kleurWit);
}

.knopSecundair {
    background: transparent;
    color: var(--kleurTekstSterk);
    border: 1px solid var(--kleurRand);
}

.knopSecundair:hover {
    background: var(--kleurVlak);
    color: var(--kleurTekstSterk);
    border-color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * De balk boven de header
 *
 * Op de doelsite is dit een lichte strook met de vier verkoopargumenten
 * gecentreerd, en op mobiel een donkere. Die omslag zit hier in de body-klasse
 * die domZichtbaarheid meegeeft, niet in een media query: op mobiel wordt er
 * ook maar één punt gerenderd, dus het gaat om het apparaat en niet om de
 * beschikbare breedte.
 * -------------------------------------------------------------------------- */

.uspBalk {
    background: var(--kleurZwartVlak);
    color: var(--kleurZwartTekst);
    font-size: var(--maatMini);
}

.isMobiel .uspBalk {
    background: var(--kleurZwart);
    color: rgb(255 255 255 / .82);
}

.uspBalkLijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte1) var(--ruimte6);
    min-height: 38px;
    padding-block: var(--ruimte2);
}

.uspBalkItem {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
}

.uspBalkItem svg {
    width: .75rem;
    height: .75rem;
    flex: none;
    stroke: var(--kleurAccentLicht);
    stroke-width: 2.8;
}

/* --------------------------------------------------------------------------
 * Header
 * -------------------------------------------------------------------------- */

.siteHeader {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--kleurPapier);
    transition: box-shadow var(--overgang);
}

/* Zodra de pagina van boven af beweegt: iets lager, en een schaduw eronder.
   navigatie.js zet de klasse. */
.siteHeader.isVast {
    box-shadow: 0 6px 24px rgb(16 16 16 / .08);
}

.headerBalk {
    display: flex;
    align-items: center;
    gap: var(--ruimte4);
    min-height: var(--hoogteHeader);
    transition: min-height var(--overgang);
}

.siteHeader.isVast .headerBalk {
    min-height: var(--hoogteHeaderVast);
}

.isMobiel .headerBalk {
    gap: var(--ruimte2);
    min-height: 62px;
}

.isMobiel .siteHeader.isVast .headerBalk {
    min-height: 56px;
}

.headerLogo {
    flex: none;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.headerLogo img {
    width: auto;
    max-width: 210px;
    max-height: 52px;
}

.isMobiel .headerLogo img {
    max-width: 150px;
    max-height: 40px;
}

.headerLogoTekst {
    font-size: 1.375rem;
}

.isMobiel .headerLogoTekst {
    font-size: 1.125rem;
}

/* Blog / FAQ, naast het zoekveld — net als op de doelsite. */
.headerSnel {
    display: flex;
    align-items: center;
    flex: none;
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

.headerSnel li + li::before {
    content: '/';
    margin-inline: var(--ruimte2);
    color: var(--kleurRand);
}

.headerSnel li {
    display: inline-flex;
    align-items: center;
}

.headerSnelLink {
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.headerSnelLink:hover {
    color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Zoekformulier en de zoeklade
 *
 * Het veld is dat van de doelsite: een pil met een zwarte ronde knop erin. Wat
 * eronder uitklapt is van ons, en spreekt de taal van de homepage — een
 * liniaal langs de bovenrand, haarlijnen in plaats van kaders, genummerde
 * koppen uit een CSS-teller en cijfers op tabelbreedte.
 *
 * OPEN EN DICHT IS CSS
 * --------------------
 * De lade komt tevoorschijn op :focus-within, niet op een klasse. Dat is met
 * opzet: zonder JavaScript moet de bezoeker de soortknoppen kunnen bereiken,
 * en dat zijn echte submitknoppen (zie searchform.php). Escape zet er een
 * .isDicht overheen — die selector staat hieronder en is één klasse zwaarder,
 * anders zou :focus-within hem overrulen zolang de cursor in het veld staat.
 *
 * Verbergen gaat met visibility en niet met display:none, want het script moet
 * de knoppen kunnen opmeten om de markering eronder op zijn plek te zetten.
 *
 * WAT HIER GEEN BEGINTOESTAND HEEFT
 * ---------------------------------
 * De rijen in de lijst staan nergens op opacity:0. Ze komen op met motion.dev
 * (inc/js/zoeken.js), en valt die uit dan staan ze er gewoon meteen — dezelfde
 * afspraak als in motionInit.js.
 * -------------------------------------------------------------------------- */

.headerZoeken {
    flex: 1 1 auto;
    max-width: 32rem;
    margin-left: var(--ruimte5);
}

.zoekForm {
    position: relative;
    display: block;
}

.zoekRegel {
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: .3125rem .3125rem .3125rem var(--ruimte4);
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadiusPil);
    transition: border-color var(--overgang), box-shadow var(--overgang);
}

/* Niet .zoekRegel:focus-within: de soortknoppen staan in de lade en dus buiten
   deze regel, en het veld hoort ook dán omrand te blijven. */
.zoekForm:focus-within .zoekRegel {
    border-color: var(--kleurAccent);
    box-shadow: 0 0 0 3px var(--kleurAccentRing);
}

.zoekVeld {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: .5rem;
    background: transparent;
    border: 0;
    font-size: .9375rem;
    appearance: none;
}

.zoekVeld::placeholder {
    color: var(--kleurTekstZacht);
}

.zoekVeld:focus-visible {
    outline: 0;
}

/* Het kruisje dat browsers zelf in een zoekveld zetten. */
.zoekVeld::-webkit-search-cancel-button {
    appearance: none;
}

/* Ons eigen kruisje: staat er alleen als er iets te wissen valt, en alleen met
   JavaScript — zonder script doet het niets. */
.zoekWissen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    color: var(--kleurTekstZacht);
    border-radius: var(--randRadiusPil);
    transition: color var(--overgang), background-color var(--overgang);
}

.zoekWissen:hover {
    color: var(--kleurTekstSterk);
    background: var(--kleurVlak);
}

.zoekWissen svg {
    width: .875rem;
    height: .875rem;
    stroke-width: 2.4;
}

.zoekKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex: none;
    background: var(--kleurZwart);
    color: var(--kleurWit);
    border-radius: var(--randRadiusPil);
    transition: background-color var(--overgang);
}

.zoekKnop:hover {
    background: var(--kleurZwartHover);
}

.zoekKnop svg {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2;
}

/* --------------------------------------------------------------------------
 * De lade
 * -------------------------------------------------------------------------- */

.zoekLade {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 30;
    width: 100%;
    overflow: hidden;
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadiusGroot);
    box-shadow: var(--schaduwHoog);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition:
        opacity var(--overgang),
        transform var(--overgang),
        visibility 0s linear var(--overgang);
}

.zoekForm:focus-within .zoekLade {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity var(--overgangTraag),
        transform var(--overgangTraag),
        visibility 0s;
}

/* Escape. Eén klasse zwaarder dan de regel hierboven, want de cursor staat dan
   nog gewoon in het veld. */
.zoekForm.isDicht:focus-within .zoekLade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
}

/* De liniaal langs de bovenrand: een doorlopende lijn met een streepje per
   9 pixels eronder. Twee achtergrondlagen, geen enkel element in de HTML —
   hetzelfde trucje als de bovenrand van de footer. */
.zoekLiniaal {
    position: relative;
    height: 6px;
    overflow: hidden;
    background:
        repeating-linear-gradient(to right, var(--kleurRand) 0 1px, transparent 1px 9px) bottom left / 100% 4px no-repeat,
        linear-gradient(var(--kleurRand), var(--kleurRand)) top left / 100% 1px no-repeat;
}

/* Het streepje dat tijdens het zoeken over de liniaal loopt. CSS en geen
   motion.dev: het is een lus zonder maten, en hij moet het al doen op het
   moment dat motion.dev zelf nog onderweg is. */
.zoekScan {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 22%;
    background: linear-gradient(to right, transparent, var(--kleurAccent), transparent);
    opacity: 0;
    transform: translateX(-100%);
}

.zoekLade.isZoekend .zoekScan {
    opacity: 1;
    animation: zoekScan 1.05s linear infinite;
}

@keyframes zoekScan {
    from { transform: translateX(-100%); }
    to   { transform: translateX(460%); }
}

/* Zonder beweging geen loopje: dan staat er een rustige balk zolang er gezocht
   wordt. reset.css zet de duur van élke animatie op vrijwel nul, dus zonder
   deze regel zou het streepje aan het eind van zijn baan blijven staan — dat
   wil zeggen: buiten beeld, en dus zonder enige terugkoppeling. */
@media (prefers-reduced-motion: reduce) {
    .zoekLade.isZoekend .zoekScan {
        animation: none;
        width: 100%;
        transform: none;
        opacity: .3;
    }
}

/* --------------------------------------------------------------------------
 * De soortknoppen
 * -------------------------------------------------------------------------- */

.zoekBereik {
    position: relative;
    display: flex;
    padding-inline: var(--ruimte3);
    border-bottom: 1px solid var(--kleurRand);
    overflow-x: auto;
    scrollbar-width: none;
}

.zoekBereik::-webkit-scrollbar {
    display: none;
}

.zoekBereikKnop {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    flex: none;
    padding: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--kleurTekstZacht);
    white-space: nowrap;
    transition: color var(--overgang), opacity var(--overgang);
}

.zoekBereikKnop:hover,
.zoekBereikKnop.isActief {
    color: var(--kleurTekstSterk);
}

/* Een soort zonder resultaat blijft klikbaar — de bezoeker mag zien dát er
   niets is — maar hij dringt zich niet op. */
.zoekBereikKnop.isLeeg {
    opacity: .45;
}

.zoekBereikAantal {
    font-family: var(--fontTekst);
    font-size: .625rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--kleurTekstZacht);
}

.zoekBereikKnop.isActief .zoekBereikAantal {
    color: var(--kleurAccentDonker);
}

/* Schuift van knop naar knop; inc/js/zoeken.js meet en beweegt hem. Zonder
   script staat hij op nul breedte en dus nergens — de actieve knop is dan te
   herkennen aan zijn kleur. */
.zoekBereikMarkering {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--kleurAccent);
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
 * De lijst
 * -------------------------------------------------------------------------- */

.zoekScroll {
    position: relative;
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* De markering achter de rij waar je met de pijltjes staat. Absoluut in de
   scroller, dus hij schuift mee met de inhoud; inc/js/zoeken.js rekent met
   offsetTop en daarom mag niets ertussen position krijgen. */
.zoekMarkering {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--kleurVlak);
    border-left: 2px solid var(--kleurAccent);
    opacity: 0;
    pointer-events: none;
}

.zoekLijst {
    counter-reset: zoekGroep;
}

.zoekGroep {
    padding-block: var(--ruimte3);
}

.zoekGroep + .zoekGroep {
    border-top: 1px solid var(--kleurRand);
}

/* 01 PRODUCTEN ────────────────── 3
   Het nummer komt uit een teller: valt een groep weg omdat er niets in zit,
   dan schuift de nummering mee. */
.zoekGroepKop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    margin-bottom: var(--ruimte2);
    padding-inline: var(--ruimte4);
    counter-increment: zoekGroep;
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--kleurTekstSterk);
}

.zoekGroepKop::before {
    content: counter(zoekGroep, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurAccent);
}

.zoekGroepKop::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--kleurRand);
}

/* Het aantal hoort achter de haarlijn, en ::after is altijd het laatste kind —
   vandaar order in plaats van een derde element. */
.zoekGroepAantal {
    order: 1;
    font-family: var(--fontTekst);
    font-size: var(--maatMini);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--kleurTekstZacht);
}

/* --------------------------------------------------------------------------
 * Eén rij
 * -------------------------------------------------------------------------- */

.zoekRij {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    padding: var(--ruimte2) var(--ruimte4);
    color: var(--kleurTekst);
    text-decoration: none;
}

.zoekRijBeeld {
    flex: none;
    display: block;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    background: var(--kleurVlak);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadiusKlein);
}

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

/* Geen foto: een leeg vakje met een schuine haarlijn erdoor. Dat is hoe een
   leeg veld op een bouwtekening wordt aangegeven, en het leest als 'hier hoort
   iets' — een grijs blok leest als een fout. */
.zoekRijBeeldLeeg {
    background:
        linear-gradient(to top right,
            transparent calc(50% - .5px),
            var(--kleurRand) calc(50% - .5px),
            var(--kleurRand) calc(50% + .5px),
            transparent calc(50% + .5px));
}

.zoekRijTekst {
    flex: 1 1 auto;
    min-width: 0;
}

.zoekRijTitel {
    display: block;
    overflow: hidden;
    font-family: var(--fontKop);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--overgang);
}

.zoekRij:hover .zoekRijTitel,
.zoekRij.isActief .zoekRijTitel {
    color: var(--kleurAccentDonker);
}

.zoekRijOnder {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte2);
    min-width: 0;
    margin-top: .0625rem;
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
}

.zoekRijMeta {
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 'Actie' of 'Uitverkocht' bij een product. */
.zoekRijLabel {
    flex: none;
    padding: .0625rem .375rem;
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kleurAccentDonker);
    background: var(--kleurAccentRing);
    border-radius: var(--randRadiusKlein);
}

/* Bij een blogartikel is het label de categorie, en dat is geen keurmerk maar
   een woord in de regel. */
.zoekRijPost .zoekRijLabel {
    padding: 0;
    font-size: var(--maatMini);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kleurTekstZacht);
    background: none;
}

.zoekRijPost .zoekRijLabel::after {
    content: '·';
    margin-left: var(--ruimte2);
    color: var(--kleurRand);
}

.zoekRijPrijs {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.zoekRijAdvies {
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
    text-decoration: line-through;
}

.zoekRijBedrag {
    font-family: var(--fontKop);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--kleurTekstSterk);
}

/* Een pagina heeft geen foto en geen prijs; daar is het pad het nuttigste dat
   naast de titel kan staan. Het streepje ervoor is de aanwijslijn van de
   tekening. */
.zoekRijPage::before {
    content: '';
    flex: none;
    width: .75rem;
    height: 1px;
    background: var(--kleurRand);
    transition: width var(--overgang), background-color var(--overgang);
}

.zoekRijPage:hover::before,
.zoekRijPage.isActief::before {
    width: 1.25rem;
    background: var(--kleurAccent);
}

.zoekRijPage .zoekRijTekst {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimte4);
}

.zoekRijPage .zoekRijOnder {
    flex: 0 1 auto;
    margin-top: 0;
}

.zoekRijPage .zoekRijMeta {
    color: var(--kleurAccentDonker);
}

/* --------------------------------------------------------------------------
 * Chips: de categorieën, de recente en de voorgestelde zoekopdrachten
 * -------------------------------------------------------------------------- */

.zoekChips,
.zoekVoorstelRij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte2);
    padding-inline: var(--ruimte4);
}

.zoekChip,
.zoekVoorstelLink {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    padding: .3125rem .625rem;
    font-size: var(--maatKlein);
    color: var(--kleurTekstSterk);
    text-decoration: none;
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadiusPil);
    transition: color var(--overgang), border-color var(--overgang), background-color var(--overgang);
}

.zoekChip:hover,
.zoekChip.isActief,
.zoekVoorstelLink:hover {
    color: var(--kleurAccentDonker);
    border-color: var(--kleurAccent);
    background: var(--kleurAccentRing);
}

.zoekChipAantal {
    font-size: var(--maatMini);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

/* De voorstellen zoals ze zonder JavaScript in de lade staan. Met JavaScript
   verhuizen ze naar de lijst — zie inc/js/zoeken.js — zodat de pijltjes er ook
   langs kunnen. */
.zoekVoorstel {
    padding-block: var(--ruimte3) var(--ruimte4);
}

.zoekVoorstelKop {
    margin-bottom: var(--ruimte2);
    padding-inline: var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--kleurTekstSterk);
}

/* --------------------------------------------------------------------------
 * 'Alle producten bekijken' onderaan een groep
 * -------------------------------------------------------------------------- */

.zoekMeer {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ruimte2);
    margin-top: var(--ruimte1);
    padding: var(--ruimte2) var(--ruimte4);
    font-size: var(--maatMini);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kleurAccentDonker);
    text-decoration: none;
}

/* Een groeiende haarlijn in plaats van een pijltje: dezelfde beweging als bij
   een maatlijn die zich uittrekt. */
.zoekMeer::after {
    content: '';
    flex: none;
    width: .875rem;
    height: 1px;
    background: currentcolor;
    transition: width var(--overgang);
}

.zoekMeer:hover::after,
.zoekMeer.isActief::after {
    width: 1.5rem;
}

/* --------------------------------------------------------------------------
 * Wat er staat als er niets is
 * -------------------------------------------------------------------------- */

.zoekBoodschap {
    padding: var(--ruimte5) var(--ruimte4);
}

.zoekBoodschapKop {
    font-family: var(--fontKop);
    font-size: var(--maatH4);
    font-weight: 600;
    color: var(--kleurTekstSterk);
}

.zoekBoodschapUitleg {
    margin-top: var(--ruimte1);
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
}

/* Wat er gevonden is, onderstreept in plaats van omkaderd — een gele blok over
   een titel is luider dan de titel zelf. */
.zoekLijst mark {
    color: inherit;
    background: linear-gradient(transparent 62%, var(--kleurAccentRing) 62%);
}

/* --------------------------------------------------------------------------
 * De voet van de lade
 * -------------------------------------------------------------------------- */

.zoekVoet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte3);
    padding: var(--ruimte2) var(--ruimte4);
    background: var(--kleurPapier);
    border-top: 1px solid var(--kleurRand);
}

.zoekVoetHulp {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    color: var(--kleurTekstZacht);
}

.zoekVoetHulp kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: .25rem;
    font-family: var(--fontTekst);
    font-size: .625rem;
    color: var(--kleurTekstSterk);
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadiusKlein);
}

.zoekVoetAlles,
.zoekVoetWissen {
    flex: none;
    margin-left: auto;
    font-size: var(--maatMini);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    border-bottom: 1px solid var(--kleurRand);
    transition: color var(--overgang), border-color var(--overgang);
}

.zoekVoetAlles:hover,
.zoekVoetWissen:hover {
    color: var(--kleurAccentDonker);
    border-color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * Op een telefoon
 *
 * Daar zit het veld achter een knop in de hoofdbalk (zie header.php), dus de
 * lade hangt onder een strook die zelf al plakt. Hij mag het scherm vullen
 * maar niet overlopen — vandaar dvh en niet vh: met vh blijft er een strook
 * onder de adresbalk verstopt.
 * -------------------------------------------------------------------------- */

.headerZoekpaneel {
    padding-bottom: var(--ruimte3);
}

.isMobiel .zoekLade {
    top: calc(100% + .375rem);
    border-radius: var(--randRadius);
}

.isMobiel .zoekScroll {
    max-height: min(24rem, calc(100dvh - var(--hoogteHeaderPlak) - 8rem));
}

/* Niet verbergen maar krimpen: de prijs is op een telefoon net zo goed het
   antwoord op de vraag, en wegmoffelen met display:none is precies wat
   baserules 16 niet wil. De titel kapt af, de prijs blijft staan. */
.isMobiel .zoekRij {
    gap: var(--ruimte2);
    padding-inline: var(--ruimte3);
}

.isMobiel .zoekRijBedrag {
    font-size: var(--maatKlein);
}

/* --------------------------------------------------------------------------
 * De knoppen rechts in de header
 *
 * De doelsite zet het pictogram in een rond vlakje: grijs voor account, zwart
 * gevuld voor de winkelwagen. Dat verschil is de hele hiërarchie — de
 * winkelwagen is de enige knop met kleur.
 * -------------------------------------------------------------------------- */

.headerActies {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    margin-left: auto;
    flex: none;
}

.headerKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    background: var(--kleurZwartVlak);
    color: var(--kleurZwartTekst);
    border-radius: var(--randRadiusPil);
    text-decoration: none;
    transition: background-color var(--overgang), color var(--overgang);
}

.headerKnop:hover {
    background: var(--kleurZwart);
    color: var(--kleurWit);
}

.headerKnop svg {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
}

/* Met tekst ernaast wordt de knop een rond vlakje plus een label. */
.headerKnopMetTekst {
    width: auto;
    height: auto;
    background: none;
    color: var(--kleurTekstSterk);
    border-radius: 0;
}

.headerKnopMetTekst:hover {
    background: none;
    color: var(--kleurAccent);
}

.headerKnopIcoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    background: var(--kleurZwartVlak);
    color: var(--kleurZwartTekst);
    border-radius: var(--randRadiusPil);
    transition: background-color var(--overgang), color var(--overgang);
}

.headerKnopMetTekst:hover .headerKnopIcoon {
    background: var(--kleurZwart);
    color: var(--kleurWit);
}

.headerKnopTekst {
    font-size: var(--maatKlein);
    font-weight: 500;
    white-space: nowrap;
}

.headerWinkelwagen {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    color: var(--kleurTekstSterk);
    text-decoration: none;
}

.headerWinkelwagenIcoon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    background: var(--kleurZwart);
    color: var(--kleurWit);
    border-radius: var(--randRadiusPil);
    transition: background-color var(--overgang);
}

.headerWinkelwagen:hover .headerWinkelwagenIcoon {
    background: var(--kleurZwartHover);
}

.headerWinkelwagen svg {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
}

.headerWinkelwagenAantal {
    position: absolute;
    top: -.125rem;
    right: -.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: .1875rem;
    background: var(--kleurAccent);
    color: var(--kleurWit);
    border: 2px solid var(--kleurPapier);
    border-radius: var(--randRadiusPil);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
}

.headerWinkelwagenTotaal {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Hoofdnavigatie
 *
 * Dezelfde band als de hoofdbalk, met een haarlijn ertussen. Geen grijze pil
 * onder de muis maar een accentlijn onder het woord: dezelfde lijn die het
 * actieve item aanwijst.
 *
 * DE BALK IS EEN RAIL, GEEN LIJST DIE AFBREEKT
 * --------------------------------------------
 * Er hangen elf categorieën in het hoofdmenu, met namen als 'Boxspring met
 * opbergruimte' erbij — samen meer tekst dan er op één regel van 1322 pixels
 * past. Met flex-wrap werd dat een tweede regel: een header die per breedte
 * van hoogte verschilt en de pagina naar beneden duwt, en bij een bredere
 * letter (de webfont nog onderweg, een ander besturingssysteem) liep de rij de
 * band uit.
 *
 * Wat ervoor in de plaats komt is één regel die nooit afbreekt en schuift
 * zodra hij niet past — dezelfde oplossing die hieronder al voor de tablet
 * stond, nu op elke breedte. Zonder JavaScript is dat de gewone schuifbalk:
 * vegen, wieltje en trackpad doen het allemaal. navigatie.js zet er twee
 * knoppen naast en laat de rij met een animatie een blad opschuiven.
 *
 * De maten zijn een slag kleiner dan ze waren (.875rem in plaats van .9375rem,
 * en var(--ruimte2) opzij in plaats van var(--ruimte3)), zodat de elf
 * categorieën op een blad van volle breedte gewoon naast elkaar staan en er
 * geen knop nodig is. Hoeveel er precies past hangt van de letter af; wat er
 * overloopt vangt de rail.
 * -------------------------------------------------------------------------- */

.navBalk {
    background: var(--kleurPapier);
    border-top: 1px solid var(--kleurRand);
}

/* De rail: de strook met de twee knoppen erover. Ze liggen erop en staan er
   niet naast — anders verspringt de hele rij op het moment dat er een knop bij
   komt of weggaat. */
.navRail {
    position: relative;
}

/* Het schuifgebied zit op de <nav> en niet op de <ul>.
   De negatieve marge zit er ook op, en dat is de reden: een schuifgebied knipt
   af wat er aan de beginkant buiten valt, en daar valt niet naartoe te
   schuiven. Zat die marge op de lijst, dan lag de linkerhelft van het eerste
   item (zijn padding, zijn focusring) buiten bereik. Nu steekt de strook zelf
   var(--ruimte2) naar buiten, staat het eerste woord nog steeds op de
   rasterlijn en ligt élk item er helemaal in. */
.navPrimair {
    /* De focusring van reset.css staat vijf pixels buiten de link (3px outline
       en 2px offset), en een schuifgebied knipt af wat erbuiten valt — zonder
       deze ruimte zou die ring boven en onder afgesneden worden. Wat de strook
       hier krijgt gaat er bij de link weer af, dus de balk blijft even hoog. */
    --navFocusRuimte: 6px;

    overflow-x: auto;
    /* Doorschuiven naar de pagina erachter zodra de rij aan het eind is hoort
       hier niet: dan scrollt het blad mee tijdens het vegen. */
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--ruimte2) * -1);
    padding-block: var(--navFocusRuimte);
    /* Plus ruimte voor de schuifbalk, zodat die niet over de woorden valt.
       Zodra het script de knoppen aanzet is de schuifbalk overbodig en gaat
       die ruimte er weer af (.isRail hieronder). */
    padding-bottom: calc(var(--navFocusRuimte) + var(--ruimte1));
    scrollbar-width: thin;
}

.navPrimairLijst {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Niet krimpen: zonder dit knijpt de flexbox de items samen tot ze passen en
   schuift de rij dus nooit. Dezelfde regel als bij .blogOnderwerpenLijst. */
.navPrimairItem {
    position: relative;
    flex: none;
}

.navPrimairLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte1);
    padding: calc(var(--ruimte4) - var(--navFocusRuimte)) var(--ruimte2);
    font-family: var(--fontKop);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.navPrimairTekst {
    position: relative;
}

/* De aanwijzer. Groeit vanuit het midden en zit onder het woord zelf, niet
   onder het hele klikvlak — dan volgt de lijn de lengte van het item. */
.navPrimairTekst::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.4375rem;
    height: 2px;
    border-radius: 2px;
    background: var(--kleurAccent);
    transform: scaleX(0);
    transition: transform var(--overgang);
}

.navPrimairItem:hover > .navPrimairLink,
.navPrimairItem:focus-within > .navPrimairLink,
.navPrimairItem.isHuidig > .navPrimairLink {
    color: var(--kleurAccentDonker);
}

.navPrimairItem:hover > .navPrimairLink .navPrimairTekst::after,
.navPrimairItem:focus-within > .navPrimairLink .navPrimairTekst::after,
.navPrimairItem.isHuidig > .navPrimairLink .navPrimairTekst::after {
    transform: scaleX(1);
}

.navPrimairPijl {
    width: .5rem;
    height: .5rem;
    flex: none;
    stroke-width: 2.4;
    transition: transform var(--overgang);
}

.navPrimairItem:hover > .navPrimairLink .navPrimairPijl,
.navPrimairItem:focus-within > .navPrimairLink .navPrimairPijl {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * De twee knoppen van de rail
 *
 * Ze staan met hidden in de HTML en navigatie.js haalt dat weg zodra er aan
 * die kant werkelijk iets buiten beeld staat. Een knop die niets doet hoort er
 * niet te staan — dezelfde afspraak als bij de prijsschuif (shopFilters.js) en
 * de afdrukknop (informatie.js), alleen andersom: het pictogram komt hier uit
 * bg_icoon() en de tekst uit een vertaalbare string, dus schrijft de PHP hem
 * en zet het script hem aan.
 *
 * Geen kader en geen schaduw: een vlak in papierkleur dat naar de woorden toe
 * wegloopt, zodat te zien is dát de rij doorloopt. De pijl staat tegen de
 * rasterlijn aan, net als het eerste woord.
 * -------------------------------------------------------------------------- */

.navRailKnop {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    /* De strook steekt var(--ruimte2) naar buiten; de knop dekt dat mee af en
       zet het met zijn eigen padding weer recht, zodat de pijl op de
       rasterlijn staat en niet ernaast. */
    width: calc(3rem + var(--ruimte2));
    border: 0;
    color: var(--kleurTekstSterk);
    cursor: pointer;
    transition: color var(--overgang);
}

/* De UA-regel [hidden]{display:none} verliest van de display hierboven, dus
   staat hij er expliciet bij (zie de noot in product.css). */
.navRailKnop[hidden] {
    display: none;
}

.navRailKnopLinks {
    left: calc(var(--ruimte2) * -1);
    justify-content: flex-start;
    padding: 0 0 0 var(--ruimte2);
    background: linear-gradient(to right, var(--kleurPapier) 2rem, transparent);
}

.navRailKnopRechts {
    right: calc(var(--ruimte2) * -1);
    justify-content: flex-end;
    padding: 0 var(--ruimte2) 0 0;
    background: linear-gradient(to left, var(--kleurPapier) 2rem, transparent);
}

.navRailKnop:hover {
    color: var(--kleurAccentDonker);
}

.navRailPijl {
    width: 1rem;
    height: 1rem;
    flex: none;
    stroke-width: 2;
    transition: transform var(--overgang);
}

.navRailKnopLinks:hover .navRailPijl {
    transform: translateX(-2px);
}

.navRailKnopRechts:hover .navRailPijl {
    transform: translateX(2px);
}

/* Zodra het script de rail overneemt is de schuifbalk overbodig: de knoppen
   zeggen hetzelfde, en een schuifbalk onder de menubalk is een streep die er
   in deze tekening niet hoort. Het schuiven zelf blijft gewoon werken.

   Alleen boven 62rem, want daaronder staan die knoppen er niet (zie het blok
   onderaan deze sectie) en is de schuifbalk het enige wat verraadt dat de rij
   doorloopt. */
@media (min-width: 62rem) {
    .navRail.isRail .navPrimair {
        padding-bottom: var(--navFocusRuimte);
        scrollbar-width: none;
        /* Een item dat de focus krijgt hoort niet onder een knop te belanden. */
        scroll-padding-inline: 3rem;
    }

    .navRail.isRail .navPrimair::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
 * Het uitklapmenu
 *
 * Kolommen in plaats van een sliert: het aantal komt als --navKolommen uit de
 * walker, die telt hoeveel items eronder hangen. Nodig hier: onder 'Boxsprings'
 * hangen tien maten en onder 'Matrassen' twintig. Op hover én op focus-within,
 * zodat het met het toetsenbord bereikbaar is.
 *
 * WAAROM position: fixed EN NIET absolute
 * ---------------------------------------
 * De rij schuift, en een schuifgebied knipt af wat erbuiten valt — ook naar
 * beneden. Een paneel dat absoluut onder zijn item hangt, zou dus een streepje
 * van niets worden; dat is precies waarom het uitklapmenu hier vroeger op de
 * tablet uit stond. Een vast gepositioneerd element hangt aan het venster en
 * niet aan de strook, en ontsnapt daarmee aan die schaar. Het paneel is
 * daarmee ook op een smal blad weer te gebruiken.
 *
 * Fixed betekent wel dat de CSS niet meer weet waar het item staat. Twee
 * getallen komen daarom uit navigatie.js, allebei met een terugval voor het
 * geval dat script er niet is:
 *
 *   --navSubY  de onderkant van de navigatiebalk. Niet --hoogteHeaderPlak:
 *              dat is de hoogte van de header zelf, en bovenaan de pagina
 *              staat de USP-balk daar nog boven. De terugval is die hoogte
 *              wél, want een beter getal heeft de CSS niet — zonder script
 *              legt het paneel bovenaan de pagina dus de balk onder zich.
 *   --navSubX  de linkerkant van het item waar het paneel bij hoort, al
 *              afgekapt tegen de vensterrand. Zonder script staat er de
 *              linkerkant van het blad: dan opent elk paneel op de rasterlijn
 *              in plaats van onder zijn eigen woord — niet hetzelfde, wel
 *              bruikbaar.
 * -------------------------------------------------------------------------- */

.navSub {
    position: fixed;
    top: var(--navSubY, var(--hoogteHeaderPlak));
    left: var(--navSubX, max(var(--omhulselPad), calc((100vw - var(--breedteMax)) / 2 + var(--omhulselPad))));
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(var(--navKolommen, 1), minmax(8.5rem, 1fr));
    gap: 0 var(--ruimte4);
    max-width: calc(100vw - var(--omhulselPad) * 2);
    padding: var(--ruimte3);
    background: var(--kleurWit);
    border: 1px solid var(--kleurRand);
    border-top: 2px solid var(--kleurAccent);
    border-radius: 0 0 var(--randRadiusGroot) var(--randRadiusGroot);
    box-shadow: var(--schaduwHoog);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity var(--overgang), transform var(--overgang), visibility var(--overgang);
}

.navPrimairItem:hover > .navSub,
.navPrimairItem:focus-within > .navSub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navSubLink {
    display: block;
    padding: var(--ruimte2) var(--ruimte3);
    font-size: var(--maatKlein);
    color: var(--kleurTekst);
    text-decoration: none;
    border-radius: var(--randRadiusKlein);
    transition: background-color var(--overgang), color var(--overgang);
}

.navSubLink:hover {
    background: var(--kleurVlak);
    color: var(--kleurAccentDonker);
}

/* De regel onderaan het paneel: terug naar de categorie zelf. */
.navSubAlles {
    grid-column: 1 / -1;
    margin-top: var(--ruimte2);
    padding-top: var(--ruimte2);
    border-top: 1px solid var(--kleurRand);
}

.navSubAllesLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte2) var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
    color: var(--kleurAccentDonker);
    text-decoration: none;
}

.navSubAllesPijl {
    width: .875rem;
    height: .875rem;
    flex: none;
    stroke-width: 2;
    transition: transform var(--overgang);
}

.navSubAllesLink:hover .navSubAllesPijl {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
 * De navigatiebalk op een smal scherm
 *
 * WAAROM DIT NODIG IS
 * -------------------
 * domZichtbaarheid kiest per apparaat welke navigatie er in de bron komt, en
 * een tablet telt daar als desktop: een iPad stuurt sinds iPadOS 13 de
 * User-Agent van een Mac, en een Android-tablet zegt Sec-CH-UA-Mobile: ?0. Daar
 * valt server-side weinig aan te doen — het is precies de grens die in de kop
 * van die mu-plugin staat. Hetzelfde geldt voor een telefoon met 'desktopsite
 * aanvragen' aan, en voor een smal venster op een gewone computer.
 *
 * Onder 62rem is de balk daarom precies wat hij altijd was: één rij die
 * horizontaal schuift, met de schuifbalk, de duim of het trackpad, en verder
 * niets. Geen knoppen en geen uitklapmenu:
 *
 *   1. de twee knoppen dekken samen ruim honderd pixels van een balk die er op
 *      een telefoon nog geen vierhonderd heeft — daar kost de bediening meer
 *      dan zij oplevert, en vegen doet het toch al;
 *   2. het paneel opent op :hover, en een aanraakscherm heeft geen hover. Wie
 *      erop tikt volgt de link — het is daar dus niet te bedienen.
 *
 * Er gaat niets verloren: de bovenliggende link gaat naar de categorie, en
 * bovenaan die pagina staat de rij onderliggende categorieën als liniaal (zie
 * shop.css). Dat is dezelfde lijst als in het paneel, op een plek waar hij wél
 * te bedienen is.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * De header op een smal venster
 *
 * WAAROM DIT BLOK BESTAAT
 * -----------------------
 * domZichtbaarheid kiest de header op apparaat en niet op vensterbreedte (zie
 * de kop van die mu-plugin). Een versmald desktopvenster, een iPad in
 * landschap en een telefoon met 'desktopsite aanvragen' krijgen dus de
 * desktopheader — logo van 210 pixels, zoekveld, Blog/FAQ, 'Inloggen /
 * Registreren' voluit, het winkelwagenbedrag, vier USP's en een balk met elf
 * categorieën. Op vierhonderd pixels loopt dat de band uit.
 *
 * Alles hieronder is een breedtekwestie en staat dus in CSS, niet in
 * bgToonOp(). Het maakt van diezelfde markup de header die een telefoon ook
 * krijgt: hamburger, logo, zoeken, winkelwagen — en verder niets.
 *
 * Er komt één element voor in de bron dat hier hoort en daarboven niet: de
 * knop. Dat is geen tweede navigatie (baserules 16) maar één bedieningselement
 * voor een breedte die de server niet kan weten; wat eronder uitklapt is
 * dezelfde <ul> als in de balk. Zonder JavaScript blijft hij hidden en blijft
 * de balk de schuivende rij die hij was.
 * -------------------------------------------------------------------------- */

/* Boven 62rem bestaat de knop niet. Hij staat bovendien met hidden in de HTML
   tot navigatie.js hem aanzet; die regel wint op specificiteit (0,2,0 tegen
   0,1,0) van de media query hieronder, ongeacht de volgorde. */
.navSmalKnop {
    display: none;
}

.navSmalKnop[hidden] {
    display: none;
}

@media (max-width: 61.9375rem) {
    /* ----- De hoofdbalk ------------------------------------------------- */

    .headerBalk {
        gap: var(--ruimte2);
        min-height: 62px;
    }

    .siteHeader.isVast .headerBalk {
        min-height: 56px;
    }

    .headerLogo img {
        max-width: 150px;
        max-height: 40px;
    }

    /* De hamburger, op de plek waar hij op een telefoon ook staat: links van
       het logo, even groot als de andere knoppen in de balk. */
    .bgSmalMenu .navSmalKnop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        flex: none;
        margin-left: calc(var(--ruimte2) * -1);
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--kleurTekstSterk);
        cursor: pointer;
    }

    .navSmalKnopIcoon {
        width: 1.5rem;
        height: 1.5rem;
        stroke-width: 1.8;
    }

    /* Wat op een telefoon ook niet in de balk staat. Blog en FAQ zitten in het
       hoofdmenu, het accountwoord staat al in het pictogram en het bedrag van
       de winkelwagen staat op de winkelwagenpagina. */
    .headerSnel,
    .headerKnopTekst,
    .headerWinkelwagenTotaal {
        display: none;
    }

    .headerZoeken {
        margin-left: var(--ruimte2);
    }

    .headerActies {
        gap: var(--ruimte2);
    }

    /* Vier verkoopargumenten naast elkaar worden hier vier regels. Op een
       telefoon rendert de server er één; dit is dezelfde keuze, op breedte. */
    .uspBalkItem:nth-child(n + 2) {
        display: none;
    }

    /* ----- De categoriebalk wordt een uitschuiflade --------------------- */

    /* Onder deze breedte is de balk geen balk meer maar dezelfde lade als op
       een telefoon: van links over de pagina, met een waas erover en de pagina
       eronder op slot.

       Het is nog steeds dezelfde <ul> als in de balk — er staat dus geen tweede
       navigatie in de bron (baserules 16), alleen een andere vorm. Dat is ook
       waarom dit blok zoveel overschrijft: wat de rail tot rail maakte moet er
       hier uit.

       Dicht met visibility en niet met display: een element dat display: none
       is animeert niet, en dan springt de lade er in één keer in. De visibility
       springt pas aan het eind van de overgang, zodat hij tijdens het
       inschuiven nog te zien is maar daarna niet in de toegankelijkheidsboom
       staat. Dezelfde constructie als .zoekLade.

       Alleen als het script de knop heeft aangezet (.bgSmalMenu). Zonder script
       blijft de balk de schuivende rij die hij altijd was en is er niets
       verloren gegaan. */
    .bgSmalMenu .navBalk {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        width: min(20rem, 86vw);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--kleurWit);
        border-top: 0;
        border-right: 1px solid var(--kleurRand);
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform var(--overgangLade),
            visibility 0s linear 520ms;
    }

    .bgSmalMenu.bgSmalOpen .navBalk {
        transform: none;
        visibility: visible;
        transition: transform var(--overgangLade), visibility 0s;
    }

    /* De waas. Hij hangt aan de header en niet aan de <body>, want de header is
       met z-index 50 een eigen stapelcontext: een waas daarbuiten zou over de
       lade heen komen te liggen in plaats van eronder. Klikken erop sluit
       (navigatie.js); het doelwit is dan de header zelf. */
    .bgSmalMenu .siteHeader::after {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 55;
        background: rgb(16 16 16 / .6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 360ms ease, visibility 0s linear 360ms;
    }

    .bgSmalMenu.bgSmalOpen .siteHeader::after {
        opacity: 1;
        visibility: visible;
        transition: opacity 360ms ease, visibility 0s;
    }

    /* De kop van de lade. Plakt aan de bovenkant, zodat het kruisje er nog
       staat als je halverwege de categorieën bent. Dezelfde band als de header
       erachter (--kleurPapier), net als bij de lade op een telefoon. */
    .bgSmalMenu .navSmalKop {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        height: 3.5rem;
        padding-inline: var(--ruimte5);
        background: var(--kleurPapier);
        border-bottom: 1px solid var(--kleurRand);
    }

    /* De UA-regel [hidden]{display:none} verliest van de display hierboven.
       Boven 62rem staat de kop er niet: daar is dit de categoriebalk. */
    .navSmalKop[hidden] {
        display: none;
    }

    /* De omhulsel-maten horen bij een pagina van 1370px, niet bij een lade van
       320. Ze gaan er hier uit zodat de regels van rand tot rand lopen. */
    .bgSmalMenu .navBalk > .omhulsel {
        --omhulselPad: 0;
        max-width: none;
    }

    /* Wat de rij een rail maakte: het schuiven, de knoppen en het pijltje dat
       in de balk aankondigt dat er een paneel onder hangt. In een lijst zegt de
       knop rechts dat al. */
    .bgSmalMenu .navRail {
        display: block;
    }

    .navRailKnop,
    .navPrimairPijl {
        display: none;
    }

    .bgSmalMenu .navPrimair {
        overflow: visible;
        margin-inline: 0;
        padding-block: 0;
    }

    .bgSmalMenu .navPrimairLijst {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* ----- De regels in de lade ----------------------------------------- */

    /* Dezelfde regel als in de lade op een telefoon: de link neemt alles op de
       knop na, en het submenu klapt er met order 3 ónder uit. */
    .bgSmalMenu .navPrimairItem {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--kleurRand);
    }

    .bgSmalMenu .navPrimairLink {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        min-height: 3.5rem;
        padding: var(--ruimte2) var(--ruimte5);
        font-size: .9375rem;

        /* In de balk mag een categorie niet afbreken, want dan wordt de rij
           twee regels hoog. In een lade van 320px moet het juist wél: op de
           knop na blijft er 216px over, en 'Boxspring met opbergruimte' past
           daar niet op één regel. */
        white-space: normal;
    }

    /* De accentlijn onder het woord hoort bij een balk; in een lijst wijst de
       regel zelf al aan waar je bent. */
    .bgSmalOpen .navPrimairTekst::after {
        display: none;
    }

    .bgSmalMenu .navPrimairItem.isHuidig > .navPrimairLink {
        color: var(--kleurAccent);
        box-shadow: inset 2px 0 0 var(--kleurAccent);
    }

    .bgSmalMenu .navPrimairItem:active > .navPrimairLink {
        background: var(--kleurVlak);
    }

    /* De focusring naar binnen halen: de regels lopen van rand tot rand en de
       lade schuift, dus een ring van 3px met 2px ruimte eromheen zou tegen de
       zijkant afgesneden worden. */
    .bgSmalMenu .navPrimairLink:focus-visible {
        outline-offset: -3px;
    }

    /* ----- De uitklapknop ----------------------------------------------- */

    .bgSmalMenu .navSmalSubKnop {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--kleurRand);
        background: transparent;
        color: var(--kleurTekstZacht);
        cursor: pointer;
        transition: color var(--overgang);
    }

    /* De UA-regel [hidden]{display:none} verliest van de display hierboven, dus
       staat hij hier nog een keer. Boven 62rem staat de knop er niet: daar
       opent het submenu op hover. */
    .navSmalSubKnop[hidden] {
        display: none;
    }

    .bgSmalMenu .navSmalSubKnop:hover {
        color: var(--kleurTekstSterk);
    }

    .bgSmalMenu .navSmalSubKnop svg {
        width: .75rem;
        height: .75rem;
        stroke-width: 2.4;
        transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
    }

    /* Open: het pijltje een kwart slag naar beneden en in het merkgroen. */
    .bgSmalMenu .navSmalSubKnop[aria-expanded="true"] {
        color: var(--kleurAccent);
    }

    .bgSmalMenu .navSmalSubKnop[aria-expanded="true"] svg {
        transform: rotate(90deg);
    }

    /* ----- Het submenu in de lade --------------------------------------- */

    /* Van zwevend paneel naar liniaal: een lijn op de rooilijn van de tekst
       erboven met per regel een streepje eraan, precies zoals in de lade op een
       telefoon en in home.css, shop.css en keuzehulp.css.

       height wordt door navigatie.js gezet en weer losgelaten. Alles wat het
       paneel deed — vast staan, kolommen, de schaduw, de accentrand — gaat hier
       uit. */
    .bgSmalMenu .navSub {
        --navSmalStreep: .5rem;

        position: static;
        display: block;
        flex: 1 1 100%;
        order: 3;
        overflow: hidden;
        max-width: none;
        margin-left: var(--ruimte5);
        padding: 0;
        background: var(--kleurVlak);
        border: 0;
        border-left: 1px solid var(--kleurRand);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: height 260ms cubic-bezier(.22, 1, .36, 1);
    }

    .bgSmalMenu .navSub[hidden] {
        display: none;
    }

    .bgSmalMenu .navSubItem {
        position: relative;
    }

    /* Het streepje aan de lijn: hangt op x = 0, en de padding van de tekst
       rekent ermee — anders loopt het streepje door de eerste letter. */
    .bgSmalMenu .navSubItem::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: var(--navSmalStreep);
        height: 1px;
        background: var(--kleurRand);
    }

    .bgSmalMenu .navSubLink {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: var(--ruimte2) var(--ruimte5) var(--ruimte2)
            calc(var(--navSmalStreep) + var(--ruimte3));
        border-radius: 0;
    }

    /* De regel 'Alles in …' onderaan het paneel hoort bij een zwevend paneel
       waar je met de muis weer uit moet. In een lijst staat de categorie zelf
       een regel hoger, met zijn eigen link. */
    .bgSmalMenu .navSubAlles {
        display: none;
    }
}

/* Onder 34rem houdt het op: hamburger, logo, account en winkelwagen zijn samen
   al ruim driehonderd pixels, en wat er voor het zoekveld overblijft is dan een
   vakje van veertig. Daar gaat het zoeken naar een eigen regel — één keer
   afbreken in plaats van een veld waar niets in past. Op een telefoon zit het
   achter een knop; die knop staat in de mobiele markup en hier niet, dus dit is
   het dichtstbijzijnde dat zonder extra markup kan. */
@media (max-width: 33.9375rem) {
    .headerBalk {
        flex-wrap: wrap;
        padding-bottom: var(--ruimte2);
        padding-top: var(--ruimte2);
    }

    .headerZoeken {
        order: 9;
        flex: 1 0 100%;
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
 * Mobiele navigatie
 *
 * De knop en het paneel staan alleen in de HTML als de bezoeker op een
 * mobiel toestel zit; de mu-plugin domZichtbaarheid regelt dat (baserules 16).
 *
 * Het paneel schuift van links binnen over de pagina heen in plaats van hem
 * naar beneden te duwen: een menu met tien categorieën dat de winkel wegdrukt,
 * kost bij het sluiten je plek in de lijst.
 *
 * Het schuiven zelf is dat van boxspringgekte.nl (baserules 14): een halve
 * seconde in cubic-bezier(.19, 1, .22, 1). Die curve legt ruim de helft van de
 * weg in het eerste kwart van de tijd en laat de laatste centimeters uitlopen —
 * het paneel komt tot stilstand in plaats van te stoppen. Dat is het verschil
 * met --overgangTraag (260 ms, symmetrisch) dat hier eerst stond.
 * -------------------------------------------------------------------------- */

.navSchakelaar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    margin-left: calc(var(--ruimte2) * -1);
    color: var(--kleurTekstSterk);
    border-radius: var(--randRadius);
}

.navSchakelaar svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.8;
}

/* --------------------------------------------------------------------------
 * Het uitschuifmenu op een telefoon
 *
 * Een lade die van links over de pagina schuift, in de taal van de rest van de
 * site: haarlijnen in plaats van kaders, nergens een schaduw of een afgeronde
 * hoek, en de submenu's hangen aan een liniaal net als de lijsten op de
 * homepage en de winkelvloer.
 *
 * DE OPBOUW
 * ---------
 * Vier blokken in één kolom (header.php), waarvan alleen de middelste schuift.
 * De kop en het zoekveld staan op --kleurPapier — dezelfde band als de header
 * erachter, zodat de lade leest als een verlengstuk daarvan en niet als een
 * los venster dat er toevallig overheen ligt. Daaronder is het wit: daar staat
 * de inhoud.
 *
 * WAT ER BEWEEGT
 * --------------
 *   waas       360ms, opacity
 *   lade       520ms cubic-bezier(.22, 1, .36, 1) — dezelfde curve als de
 *              zoeklade en motionInit.js, dus het voelt als één site
 *   de regels  340ms per stuk, 26ms na elkaar, en pas als de lade er bijna is
 *   submenu    260ms op height, gezet door navigatie.js
 *
 * De regels komen alleen gefaseerd binnen ónder .isOpen. Zonder die klasse
 * staat er dus niets klaar dat JavaScript moet weghalen: hun gewone staat is
 * gewoon zichtbaar. Bij prefers-reduced-motion haalt de regel in reset.css de
 * duur eruit en staat alles er meteen.
 * -------------------------------------------------------------------------- */

.navMobiel {
    --overgangPaneel: var(--overgangLade);
    --navMobielRegel: 3.5rem;
    --navMobielZij: var(--ruimte5);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

/* Het waas over de pagina. Hoort bij de lade, dus geen los element. Korter dan
   het schuiven: het donker hoort er al te liggen tegen de tijd dat de lade
   aankomt, niet er nog naartoe te werken. */
.navMobiel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(16 16 16 / .6);
    opacity: 0;
    transition: opacity 360ms ease;
}

.navMobiel.isOpen::before {
    opacity: 1;
}

/* De lade zelf schuift, de inhoud niet: één transform op dit element. Een
   haarlijn langs de rechterkant en verder niets — geen slagschaduw, want die
   staat in geen enkel ander blad van deze site. */
.navMobielPaneel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(20rem, 86vw);
    background: var(--kleurWit);
    border-right: 1px solid var(--kleurRand);
    transform: translateX(-100%);
    transition: transform var(--overgangPaneel);
    will-change: transform;
}

.navMobiel.isOpen .navMobielPaneel {
    transform: translateX(0);
}

/* De lade krijgt de focus bij het openen, zodat een schermlezer erin belandt en
   de focusval in navigatie.js iets heeft om aan vast te knopen. Het zoekveld
   focussen zou op een telefoon het toetsenbord opengooien over het menu heen. */
.navMobielPaneel:focus {
    outline: 0;
}

/* --------------------------------------------------------------------------
 * De kop en het zoekveld: samen de band van de lade
 * -------------------------------------------------------------------------- */

.navMobielKop,
.navMobielZoeken {
    flex: none;
    background: var(--kleurPapier);
}

.navMobielKop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--navMobielRegel);
    padding-inline: var(--navMobielZij);
}

/* Een technisch label en geen kop: klein, in kapitalen, ruim gespatieerd. Het
   zegt waar je bent, het roept niet.

   Twee klassen, want de lade komt in twee vormen voor: .navMobiel op een
   telefoon en .navBalk op een smal venster (zie het blok onder 62rem). Het is
   dezelfde kop, dus dezelfde regels. */
.navMobielLabel,
.navSmalLabel {
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

/* Het kruisje steekt een halve regel de kantlijn in, zodat het pictogram zelf
   op de rooilijn staat en niet het klikvlak eromheen. 44px blijft het,
   aanraken moet kunnen. */
.navMobielSluiten,
.navSmalSluiten {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    margin-right: calc(var(--ruimte3) * -1);
    color: var(--kleurTekstSterk);
    transition: color var(--overgang);
}

.navMobielSluiten:hover,
.navSmalSluiten:hover {
    color: var(--kleurAccent);
}

.navMobielSluiten svg,
.navSmalSluiten svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.8;
}

/* Het zoekformulier staat er in zijn gewone vorm in — dezelfde pil op dezelfde
   papierkleur als in de desktopheader. Alleen de haarlijn eronder komt erbij,
   want daar begint het menu. */
.navMobielZoeken {
    padding: 0 var(--navMobielZij) var(--ruimte4);
    border-bottom: 1px solid var(--kleurRand);
}

/* De suggestielade hangt hier in een kolom die zelf niet schuift; zonder marge
   sluit hij aan op het veld. */
.navMobielZoeken .zoekLade {
    top: calc(100% + .25rem);
    border-radius: 0;
}

/* --------------------------------------------------------------------------
 * Het menu
 * -------------------------------------------------------------------------- */

/* Het enige dat schuift. overscroll-behavior houdt de pagina eronder stil als
   je aan het eind van de lijst doorveegt — het slot in navigatie.js doet de
   rest. */
.navMobielInhoud {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Een regel is een flexrij van twee: de link en — als er kinderen zijn — de
   knop ernaast. Het submenu hoort bij dezelfde rij maar krijgt order 3, zodat
   het ónder allebei uitklapt en niet ernaast. */
.navMobielItem {
    display: flex;
    flex-wrap: wrap;
}

.navMobielLijst > .navMobielItem {
    border-bottom: 1px solid var(--kleurRand);
}

/* De regels komen kort na elkaar binnen, van links, terwijl de lade zelf nog
   onderweg is. --rij komt uit de walker; de vertraging begint pas op 180ms,
   want vóór die tijd staat de lade nog te ver naar links om iets te zien. */
.navMobiel.isOpen .navMobielLijst > .navMobielItem {
    animation: navMobielRegel 340ms cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(180ms + var(--rij, 0) * 26ms);
}

@keyframes navMobielRegel {
    from {
        opacity: 0;
        transform: translateX(-.75rem);
    }
}

/* De regel in reset.css haalt de duur eruit maar niet de vertraging, en dan
   ploppen de regels alsnog één voor één tevoorschijn. Hier dus helemaal uit. */
@media (prefers-reduced-motion: reduce) {
    .navMobiel.isOpen .navMobielLijst > .navMobielItem {
        animation: none;
    }
}

.navMobielLink {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-height: var(--navMobielRegel);
    padding: var(--ruimte2) var(--navMobielZij);
    font-family: var(--fontKop);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang), background-color var(--overgang);
}

/* Eén selector zwaarder dan de submenuregel verderop, anders wint de rustiger
   kleur daarvan van het oplichten bij aanwijzen. */
.navMobielItem > .navMobielLink:hover {
    color: var(--kleurAccent);
}

.navMobielItem:active > .navMobielLink {
    background: var(--kleurVlak);
}

/* Waar de bezoeker staat: de tekst in het merkgroen en een streepje van twee
   pixels in de kantlijn — dezelfde aanwijzing als de maatlijn naast een
   artikel gebruikt. */
.navMobielItem.isHuidig > .navMobielLink {
    color: var(--kleurAccent);
    box-shadow: inset 2px 0 0 var(--kleurAccent);
}

/* De knop naast een item dat een submenu heeft.

   Even hoog als de regel en met een haarlijn ervoor, zodat het een vakje aan
   het eind van de regel is en geen pijltje dat erboven zweeft. De link zelf
   blijft daardoor het hele klikvlak naar de categorie: wie op 'Matrassen' tikt
   komt bij de matrassen en krijgt geen lijst in zijn gezicht. */
.navMobielSubKnop {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--navMobielRegel);
    color: var(--kleurTekstZacht);
    border-left: 1px solid var(--kleurRand);
    transition: color var(--overgang);
}

.navMobielSubKnop:hover {
    color: var(--kleurTekstSterk);
}

.navMobielSubKnop svg {
    width: .75rem;
    height: .75rem;
    stroke-width: 2.4;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

/* Open: het pijltje een kwart slag naar beneden en in het merkgroen. Geen
   gevuld vlak — de draai en de kleur zeggen het al, en een blok kleur naast
   elke open categorie maakt de lijst onrustig. */
.navMobielSubKnop[aria-expanded="true"] {
    color: var(--kleurAccent);
}

.navMobielSubKnop[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* Het submenu hangt aan een liniaal: een doorlopende lijn op de rooilijn van
   de tekst erboven, met per regel een streepje eraan. Dezelfde tekening als
   home.css, shop.css en keuzehulp.css.

   height wordt door navigatie.js gezet en weer losgelaten; overflow: hidden is
   wat het uitklappen zichtbaar maakt in plaats van de tekst te laten
   uitsteken. Zonder JavaScript staat het hidden-attribuut erop en komt er van
   dit alles niets aan te pas. */
.navMobielSub {
    --navMobielStreep: .5rem;

    flex: 1 1 100%;
    order: 3;
    overflow: hidden;
    margin-left: var(--navMobielZij);
    border-left: 1px solid var(--kleurRand);
    background: var(--kleurVlak);
    transition: height 260ms cubic-bezier(.22, 1, .36, 1);
}

.navMobielSub .navMobielItem {
    position: relative;
}

/* Het streepje aan de lijn. Hangt aan de lijn op x = 0, precies zoals bij de
   andere linialen, en de padding van de tekst hieronder rekent ermee. */
.navMobielSub .navMobielItem::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--navMobielStreep);
    height: 1px;
    background: var(--kleurRand);
}

.navMobielSub .navMobielLink {
    min-height: 2.75rem;
    padding-left: calc(var(--navMobielStreep) + var(--ruimte3));
    font-family: var(--fontTekst);
    font-size: var(--maatKlein);
    font-weight: 400;
    color: var(--kleurTekst);
}

/* Een submenu dat zelf weer een submenu heeft: de liniaal schuift mee naar
   binnen in plaats van dat er een tweede naast komt te staan. */
.navMobielSub .navMobielSub {
    margin-left: calc(var(--navMobielStreep) + var(--ruimte3));
    background: none;
}

/* --------------------------------------------------------------------------
 * De voet
 * -------------------------------------------------------------------------- */

.navMobielVoet {
    flex: none;
    display: grid;
    gap: var(--ruimte3);
    padding: var(--ruimte4) var(--navMobielZij) var(--ruimte5);
    border-top: 1px solid var(--kleurRand);
    background: var(--kleurPapier);
}

.navMobielVoetLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    font-size: var(--maatKlein);
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.navMobielVoetLink:hover {
    color: var(--kleurAccent);
}

.navMobielVoetLink svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: var(--kleurTekstZacht);
}

.navMobielBellen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
    padding: var(--ruimte3) var(--ruimte4);
    background: var(--kleurZwart);
    color: var(--kleurWit);
    text-decoration: none;
    transition: background-color var(--overgang);
}

.navMobielBellen:hover {
    background: var(--kleurZwartHover);
    color: var(--kleurWit);
}

.navMobielBellen svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.navMobielBellenNummer {
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
 * De pagina op slot
 *
 * Geldt voor allebei de lades: die op een telefoon (.navMobiel) en die op een
 * smal venster (.navBalk onder 62rem). navigatie.js zet de klasse.
 *
 * Twee regels, want overflow alleen is niet genoeg. Het houdt een muiswiel en
 * een schuifbalk tegen, maar een vinger die over de pagina veegt stuurt nog
 * steeds een scrollverzoek: touch-action zegt de browser dat daar niets te
 * schuiven valt. De lade zelf krijgt pan-y terug, anders staat ook zijn eigen
 * lijst vast.
 *
 * Met opzet géén position: fixed op de <body>. Dat is de andere manier om dit
 * te doen, maar dan is de sticky header zijn scrollend voorouderelement kwijt
 * en zakt hij terug naar zijn plek in het document — zichtbaar door de waas
 * heen. Zo blijft de pagina staan waar hij staat, zonder dat de scrollstand
 * bewaard en teruggezet hoeft te worden.
 * -------------------------------------------------------------------------- */

.bgMenuOpen,
.bgMenuOpen body {
    overflow: hidden;
    touch-action: none;
}

.bgMenuOpen .navMobielInhoud,
.bgMenuOpen .navBalk {
    touch-action: pan-y;
}

/* --------------------------------------------------------------------------
 * Kruimelpad
 * -------------------------------------------------------------------------- */

.kruimels {
    padding-block: var(--ruimte4);
    font-size: var(--maatMini);
    color: var(--kleurTekstZacht);
}

.kruimels ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte2);
}

.kruimels li::after {
    content: '/';
    margin-left: var(--ruimte2);
    color: var(--kleurRand);
}

.kruimels li:last-child::after {
    content: none;
}

.kruimels a {
    color: var(--kleurTekstZacht);
    text-decoration: none;
}

.kruimels a:hover {
    color: var(--kleurAccent);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Footer — het tekeningblad
 *
 * Dezelfde onderdelen als de doelsite en dezelfde kleur (#212121), maar niet
 * dezelfde indeling. Zes gelijke kolommen naast elkaar geven zes even luide
 * stemmen; hier draagt het merk de linkerkant, staan de vier lijsten rechts als
 * een raster van cellen, en sluit een stempel de tekening af — de vakjes met
 * KVK, BTW en betaalmethoden die op een bouwtekening rechtsonder staan.
 *
 * Het is de taal van de homepage, doorgetrokken naar de onderkant van de
 * pagina: een liniaal als bovenrand, haarlijnen in plaats van kaders, cijfers
 * op tabelbreedte, nergens een schaduw en nergens een afgeronde hoek. Elke
 * scheiding is een lijn van één pixel. Die staat in --haarlijn en draait mee
 * met de indeling: horizontaal zolang de kolommen onder elkaar staan,
 * verticaal zodra ze naast elkaar passen.
 * -------------------------------------------------------------------------- */

.siteFooter {
    --haarlijn: 1px solid var(--kleurFooterRand);

    margin-top: var(--ruimte9);
    background: var(--kleurFooter);
    color: var(--kleurFooterTekst);
    font-size: var(--maatKlein);
}

/* De liniaal als bovenrand: één doorlopende lijn met streepjes eronder, kort om
   de 40 pixels en lang om de 200 — dezelfde tekening als de maatbalk op de
   homepage, en zonder één element in de HTML. Drie lagen over elkaar: de lijn,
   de korte streepjes, de lange. */
.siteFooter::before {
    content: '';
    display: block;
    height: 10px;
    background-image:
        linear-gradient(rgb(255 255 255 / .16), rgb(255 255 255 / .16)),
        repeating-linear-gradient(to right, rgb(255 255 255 / .12) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(to right, rgb(255 255 255 / .22) 0 1px, transparent 1px 200px);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 5px, 100% 10px;
}

/* --- Het blad: het merk en de vier lijsten -------------------------------- */

.footerBlad {
    display: grid;
    padding-block: var(--ruimte7) var(--ruimte6);
}

.footerMerk {
    padding-block-end: var(--ruimte6);
}

.footerMerkBeeld {
    width: auto;
    max-width: 190px;
    max-height: 64px;
}

.footerMerkTekst {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--kleurWit);
}

.footerMerkTekst span {
    color: var(--kleurAccentLicht);
}

/* Het streepje boven de introtekst is hetzelfde streepje dat op de homepage
   boven elk kopje staat. */
.footerIntro {
    margin-top: var(--ruimte5);
    max-width: 36ch;
    line-height: 1.7;
    color: rgb(255 255 255 / .66);
}

.footerIntro::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-bottom: var(--ruimte4);
    background: var(--kleurAccentLicht);
}

.footerIntro p + p {
    margin-top: var(--ruimte3);
}

.footerContact {
    display: grid;
    justify-items: start;
    gap: var(--ruimte2);
    margin-top: var(--ruimte5);
}

.footerContactItem {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
}

.footerContactItem svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex: none;
    color: var(--kleurAccentLicht);
}

.footerContactLink {
    font-family: var(--fontKop);
    font-size: var(--maatBasis);
    font-weight: 600;
    color: var(--kleurWit);
    text-decoration: none;
    transition: color var(--overgang);
}

.footerContactLink:hover {
    color: var(--kleurAccentLicht);
}

.footerBereikbaar {
    margin-top: var(--ruimte4);
    font-size: var(--maatMini);
    color: rgb(255 255 255 / .5);
}

.footerBereikbaar .footerCelLabel {
    display: block;
    margin-bottom: var(--ruimte1);
}

/* --- De vier lijsten ------------------------------------------------------ */

.footerLinks {
    display: grid;
    row-gap: var(--ruimte5);
    counter-reset: footerKolom;
}

.footerKolom {
    counter-increment: footerKolom;
    padding-block-start: var(--ruimte5);
    border-block-start: var(--haarlijn);
}

.footerKolomTitel {
    display: flex;
    align-items: baseline;
    gap: var(--ruimte3);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kleurWit);
}

/* 01 t/m 04. Op de doelsite heten twee kolommen 'Snel naar' en twee 'Winkelen';
   het nummer houdt die paren uit elkaar. Ontbreekt er een menu, dan schuift de
   nummering mee — dezelfde teller als bij de blokken op de homepage. */
.footerKolomTitel::before {
    content: counter(footerKolom, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurAccentLicht);
}

.footerKolomLijst {
    margin-top: var(--ruimte4);
    font-size: .9375rem;
}

.footerKolomLijst li + li {
    margin-top: var(--ruimte3);
}

.footerKolomLink {
    position: relative;
    display: inline-block;
    color: var(--kleurFooterTekst);
    text-decoration: none;
    transition: color var(--overgang);
}

/* Onderstrepen doet een haarlijn die van links uitloopt. De tekst zelf beweegt
   niet: een link die opzij springt is lastig aanwijzen. */
.footerKolomLink::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -.125rem;
    height: 1px;
    background: var(--kleurAccentLicht);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--overgang);
}

.footerKolomLink:hover {
    color: var(--kleurWit);
}

.footerKolomLink:hover::after {
    transform: scaleX(1);
}

.footerKolomItem.isHuidig .footerKolomLink {
    color: var(--kleurWit);
}

.footerKolomItem.isHuidig .footerKolomLink::after {
    background: rgb(255 255 255 / .3);
    transform: scaleX(1);
}

@media (min-width: 36rem) {
    .footerLinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--ruimte5);
    }

    /* Twee naast elkaar: de bovenlijn blijft, en tussen de twee komt er een
       verticale bij. */
    .footerKolom:nth-child(2n) {
        padding-inline-start: var(--ruimte5);
        border-inline-start: var(--haarlijn);
    }
}

@media (min-width: 62rem) {
    .footerBlad {
        grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
        column-gap: var(--ruimte6);
        padding-block: var(--ruimte8) var(--ruimte6);
    }

    .footerMerk {
        padding-block-end: 0;
    }

    .footerLinks {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: var(--ruimte5);
    }

    /* Naast elkaar draaien de lijnen een kwartslag mee. Ook de eerste kolom
       houdt er een: dat is de lijn tussen het merk en de lijsten. Ze lopen van
       boven tot onder omdat de rij zich uitrekt over het hele blad. */
    .footerKolom,
    .footerKolom:nth-child(2n) {
        padding-block-start: 0;
        padding-inline-start: var(--ruimte5);
        border-block-start: 0;
        border-inline-start: var(--haarlijn);
    }
}

/* --- Het stempel ---------------------------------------------------------- */

.footerStempel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte5) var(--ruimte6);
    padding-block: var(--ruimte5) var(--ruimte6);
    border-block-start: var(--haarlijn);
}

/* De cellen rekken zich uit tot dezelfde hoogte, zodat de haarlijnen ertussen
   even lang zijn — anders hangt elke lijn op een andere hoogte. */
.footerGegevens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte4) 0;
}

.footerCel + .footerCel {
    padding-inline-start: var(--ruimte5);
    margin-inline-start: var(--ruimte5);
    border-inline-start: var(--haarlijn);
}

.footerCelLabel {
    font-family: var(--fontKop);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / .4);
}

/* De marge komt van de UA-stijl voor <dd> af; daarna pas de eigen ruimte. */
.footerCelWaarde {
    margin: var(--ruimte2) 0 0;
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--kleurWit);
}

.footerBetaalBeeld {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 26px;
}

.footerVoet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ruimte4) var(--ruimte5);
}

.footerRegel {
    font-size: var(--maatMini);
    letter-spacing: .02em;
    color: rgb(255 255 255 / .5);
}

.footerBoven {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: var(--ruimte2) var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatMini);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kleurWit);
    text-decoration: none;
    border: var(--haarlijn);
    transition: color var(--overgang), background-color var(--overgang), border-color var(--overgang);
}

/* De pijl uit de set wijst naar rechts; hier wijst hij omhoog. */
.footerBoven svg {
    width: 1rem;
    height: 1rem;
    transform: rotate(-90deg);
    transition: transform var(--overgang);
}

.footerBoven:hover {
    color: var(--kleurZwart);
    background: var(--kleurAccentLicht);
    border-color: var(--kleurAccentLicht);
}

.footerBoven:hover svg {
    transform: rotate(-90deg) translateX(3px);
}

/* --------------------------------------------------------------------------
 * Paginering — komt op meerdere overzichten voor, dus hier en niet per template
 * -------------------------------------------------------------------------- */

.paginering {
    margin-top: var(--ruimte7);
}

.paginering .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte2);
}

.paginering .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: var(--ruimte2);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    border: 1px solid var(--kleurRand);
    border-radius: var(--randRadius);
    transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}

.paginering .page-numbers:hover {
    border-color: var(--kleurAccent);
    color: var(--kleurAccent);
}

.paginering .page-numbers.current {
    background: var(--kleurAccent);
    border-color: var(--kleurAccent);
    color: var(--kleurWit);
}

.widgetTitel {
    margin-bottom: var(--ruimte3);
    font-size: var(--maatH4);
}

/* --------------------------------------------------------------------------
 * Het call-to-action-blok
 *
 * Staat hier en niet in een template-CSS omdat bg_cta() op de homepage, op
 * pagina's én onder berichten kan staan. Eén keer hier is minder CSS dan drie
 * keer hetzelfde in home.css, page.css en single.css — dat is wat baserules 8
 * met 'zo optimaal en klein mogelijk' bedoelt.
 * -------------------------------------------------------------------------- */

.paginaCta {
    padding-bottom: var(--ruimte8);
}

.paginaCtaBinnen {
    padding: var(--ruimte7) var(--ruimte5);
    background: var(--kleurAccent);
    border-radius: var(--randRadius);
    text-align: center;
    color: var(--kleurWit);
}

.paginaCtaTitel {
    color: var(--kleurWit);
}

.paginaCtaTekst {
    max-width: 48ch;
    margin: var(--ruimte3) auto 0;
}

.paginaCtaActie {
    margin-top: var(--ruimte5);
}

/* Witte knop op het groene vlak: de primaire knop zou hier onzichtbaar zijn. */
.paginaCtaActie .knop {
    background: var(--kleurWit);
    color: var(--kleurAccentDonker);
}

.paginaCtaActie .knop:hover {
    background: var(--kleurVlak);
    color: var(--kleurAccentDonker);
}

/* --------------------------------------------------------------------------
 * De cookietoestemming
 *
 * Staat in main.css en niet in een eigen bestand: de balk kan op élke pagina
 * verschijnen, net als de zoekbalk en de header (baserules 6 en 8). Hij staat
 * alleen in de HTML zolang er niets gekozen is (baserules 16), dus deze regels
 * doen op de meeste paginaweergaven niets.
 *
 * Het is dezelfde tekening als de rest van de site: een blad dat tegen de
 * onderrand ligt, een liniaal als bovenrand, haarlijnen in plaats van kaders,
 * geen schaduw en geen afgeronde hoek. Geen donkere waas over de pagina — die
 * zegt 'eerst dit' terwijl de bezoeker gewoon verder mag lezen.
 * ----------------------------------------------------------------------- */

.toestemmingBalk {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /*
     * Boven alles, ook boven het mobiele menupaneel (z-index 100) en de
     * koopbalk op de productpagina (40). Dat die koopbalk er even onder
     * verdwijnt is de bedoeling en geen ongeluk: zolang er geen keuze is, is de
     * keuze het enige wat telt — en na twee tikken is de balk voorgoed weg.
     */
    z-index: 110;
    background: var(--kleurPapier);
    /* De liniaal: één doorlopende lijn met streepjes eronder, als
     * achtergrondlagen — geen enkel element in de HTML, net als bij de footer
     * en de zoeklade. */
    background-image:
        linear-gradient(to right, var(--kleurRand) 0 1px, transparent 1px 100%),
        linear-gradient(to bottom, var(--kleurRand) 0 1px, transparent 1px 100%);
    background-repeat: repeat-x, no-repeat;
    background-position: 0 0, 0 0;
    background-size: 5rem 0.5rem, 100% 1px;
    padding-block: var(--ruimte5) var(--ruimte4);
    box-shadow: none;
}

/*
 * De binnenkant gebruikt .omhulsel uit de HTML voor zijn breedte en zijpadding,
 * zodat de balk op dezelfde lijn uitlijnt als de rest van de pagina. Die
 * padding staat als --omhulselPad op .omhulsel zelf en niet op :root, dus hem
 * hier overnemen zou een lege variabele zijn.
 */

.toestemmingFormulier {
    display: grid;
    gap: var(--ruimte4);
}

.toestemmingKop {
    margin: 0 0 var(--ruimte2);
    font-family: var(--fontKop);
    font-size: var(--maatH4, 1.125rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--kleurTekstSterk);
}

.toestemmingUitleg {
    margin: 0;
    max-width: 64ch;
    font-size: var(--maatKlein, 0.9375rem);
    line-height: 1.6;
    color: var(--kleurTekst);
}

.toestemmingLink {
    color: var(--kleurTekstSterk);
    text-decoration: underline;
    text-decoration-color: var(--kleurAccent);
    text-underline-offset: 0.25em;
}

/* De vakjes zitten in een <details>: dicht is de eerste indruk. */
.toestemmingKeuzes {
    border-top: 1px solid var(--kleurRand);
    padding-top: var(--ruimte3);
}

.toestemmingSamenvatting {
    cursor: pointer;
    font-family: var(--fontKop);
    font-size: var(--maatKlein, 0.9375rem);
    font-weight: 600;
    color: var(--kleurTekstSterk);
}

.toestemmingVeldgroep {
    margin: var(--ruimte3) 0 0;
    padding: 0;
    border: 0;
}

.toestemmingLegenda {
    padding: 0;
    /* De legenda is er voor de schermlezer; boven de rij zou hij de kop
     * herhalen die er al staat. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.toestemmingRegel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ruimte2) var(--ruimte3);
    align-items: start;
    padding-block: var(--ruimte3);
    border-top: 1px solid var(--kleurRand);
}

.toestemmingRegel:first-of-type {
    border-top: 0;
}

.toestemmingVakje {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1rem 0 0;
    accent-color: var(--kleurAccent);
}

.toestemmingLabel {
    display: grid;
    gap: 0.15rem;
    cursor: pointer;
}

.toestemmingVakje:disabled + .toestemmingLabel {
    cursor: default;
    color: var(--kleurTekstZacht);
}

.toestemmingNaam {
    font-family: var(--fontKop);
    font-size: var(--maatKlein, 0.9375rem);
    font-weight: 600;
    color: var(--kleurTekstSterk);
}

.toestemmingOmschrijving {
    font-size: var(--maatMini, 0.875rem);
    line-height: 1.5;
    color: var(--kleurTekstZacht);
}

.toestemmingKnoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte2);
}

/* Rechte hoeken en zwart: de knopkleur van de doelsite. Het accentgroen is op
 * deze site de kleur van streepjes en vinkjes; als het ook een knopkleur is
 * meet het niets meer. */
.toestemmingKnop {
    flex: 1 1 12rem;
    padding: var(--ruimte3) var(--ruimte4);
    font-family: var(--fontKop);
    font-size: var(--maatKlein, 0.9375rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--kleurTekstSterk);
    background: transparent;
    border: 1px solid var(--kleurRand);
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--overgang), border-color var(--overgang), color var(--overgang);
}

.toestemmingKnop:hover {
    border-color: var(--kleurTekstSterk);
    background: var(--kleurVlak);
}

/* Wit op het zwart, zoals elke andere zwarte knop van deze site (.zoekKnop,
 * .headerWinkelwagenIcoon). Niet --kleurZwartTekst: dat is
 * inkt vóór de lichte USP-balk (5% zwart) en dus dezelfde kleur als dit vlak. */
.toestemmingKnopZwart {
    color: var(--kleurWit);
    background: var(--kleurZwart);
    border-color: var(--kleurZwart);
}

.toestemmingKnopZwart:hover {
    color: var(--kleurWit);
    background: var(--kleurZwartHover);
    border-color: var(--kleurZwartHover);
}

/* De link in de voettekst waarmee de keuze te wijzigen is. */
.footerCookies {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--kleurFooterRand, currentColor);
    text-underline-offset: 0.25em;
}

/* Vanaf een tablet past de tekst naast de knoppen; de vakjes blijven eronder,
 * want die zijn een uitklap en geen kolom. */
@media (min-width: 48rem) {
    .toestemmingFormulier {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--ruimte6);
    }

    .toestemmingKeuzes {
        grid-column: 1 / -1;
        order: 3;
    }

    .toestemmingKnoppen {
        flex-wrap: nowrap;
        align-self: center;
    }

    .toestemmingKnop {
        flex: 0 0 auto;
    }
}

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