/*
 * main.css — ontwerptokens, typografie, header en footer.
 *
 * Wordt na reset.css op elke pagina ingeladen. Alles wat op élke pagina staat
 * hoort hier: de variabelen, de fonts, de header en de footer. Alles wat maar
 * op één soort pagina staat hoort in het CSS-bestand van die template.
 *
 * Klassenamen zijn camelCase (baserules regel 2).
 */

/* ==================================================================
 * Fonts
 *
 * Geomanist, lokaal geserveerd uit inc/fonts/. Geen Google Fonts en geen CDN:
 * geen extra DNS-lookup en geen bezoekersgegevens naar een derde partij.
 *
 * De gewichtsindeling is die van de bestaande site: book staat op 600, niet
 * op 400. woff2 eerst, woff alleen als vangnet.
 * ================================================================== */

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src:
        url("../fonts/geomanist-light.woff2") format("woff2"),
        url("../fonts/geomanist-light.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("../fonts/geomanist-regular.woff2") format("woff2"),
        url("../fonts/geomanist-regular.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src:
        url("../fonts/geomanist-medium.woff2") format("woff2"),
        url("../fonts/geomanist-medium.woff") format("woff");
}

@font-face {
    font-family: "Geomanist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src:
        url("../fonts/geomanist-book.woff2") format("woff2"),
        url("../fonts/geomanist-book.woff") format("woff");
}

/* ==================================================================
 * Tokens
 * ================================================================== */

:root {
    /* --- Kleuren -------------------------------------------------- */
    --kleurBlauw: #237eb3;
    --kleurBlauwDonker: #215073;
    --kleurBlauwDiep: #003764;
    --kleurOranje: #f58b00;
    --kleurOranjeDonker: #d97b00;
    --kleurGroen: #08b815;
    --kleurTekst: #0f184a;
    --kleurTekstZacht: #7a8896;
    --kleurWit: #fff;
    --kleurVlak: #eef5f9;
    --kleurVlakKoel: #ecf1f6;
    --kleurLijn: #dadbe3;
    --kleurLijnZacht: #eaeaea;

    /*
     * Drie kleuren die alleen in de header en het mobiele menu voorkomen, met de
     * namen die ze daar hebben: de tekstkleur van de balken (#2C3642), de lijn in
     * het mobiele menu (#E4E4E4) en de rand van het uitklapmenu (#ECEDF1).
     */
    --kleurTekstBalk: #2c3642;
    --kleurLijnMenu: #e4e4e4;
    --kleurLijnPaneel: #ecedf1;
    --kleurGroenOpen: #3f9609;

    /*
     * De footer. Twee blauwen uit de merkfamilie, en niet meer de bijna zwarte
     * diepblauwen die er eerst stonden: de donkere vlakken van dit thema — de
     * hero en het slotblok op de voorpagina — zijn helder blauw, en de footer is
     * het laatste van die vlakken. De bovenkant is precies de kleur waarop het
     * slotblok eindigt, zodat de twee op de voorpagina zonder naad in elkaar
     * overlopen (front-page.css, --vpFooterAansluiting).
     *
     * Alles wat op dat vlak een lijn of een vulling is, is doorzichtig wit en
     * geen eigen kleur: dan blijft het kloppen over het hele verloop heen.
     *
     * De twee tekstkleuren staan hoger dan op het oude diepblauw. Dat is geen
     * smaak maar rekenwerk: op #072e4d haalde 70% wit nog 6,1:1, op dit lichtere
     * vlak zakt datzelfde grijs naar 3,5:1 en dat is onder de 4,5:1 die WCAG AA
     * voor tekst van deze grootte vraagt. Een lichter vlak vraagt lichtere
     * tekst.
     */
    --kleurFooter: #17699e;
    --kleurFooterDiep: #0f4f7b;
    --kleurLijnFooter: rgb(255 255 255 / 16%);
    --kleurFooterTekst: rgb(255 255 255 / 92%);
    --kleurFooterTekstZacht: rgb(255 255 255 / 88%);

    /*
     * De header: drie rijen met elk hun eigen kleur, van lichtblauw via wit naar
     * merkblauw. Er stond hier eerst één diepblauw vlak in dezelfde drie tinten
     * als de footer — zie het hoofdstuk Header hieronder voor waarom dat weg is.
     *
     * --kleurHeaderNav is het merkblauw (#237eb3) een tikje donkerder. Dat is met
     * opzet: wit op #237eb3 komt op 4,46:1 uit en haalt daarmee de 4,5:1 van WCAG
     * AA voor tekst van veertien pixels net niet. Met het oog is het verschil
     * tussen de twee niet te zien, in de meting wel.
     */
    --kleurHeaderRail: #eaf3fa;
    --kleurHeaderRailLijn: #d5e6f2;
    --kleurHeaderNav: #2079ac;
    --kleurHeaderNavDonker: #1a688f;
    --kleurHeaderLijn: rgb(15 24 74 / 9%);

    /* --- Typografie ----------------------------------------------
     * Basis is 15px, net als op de bestaande site. In rem uitgedrukt zodat de
     * browserinstelling van de bezoeker blijft werken.
     * ------------------------------------------------------------- */
    --fontBasis: "Geomanist", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
    --tekstXs: 0.8125rem;
    --tekstSm: 0.875rem;
    --tekstBasis: 0.9375rem;
    --tekstMd: 1.0625rem;
    --tekstLg: 1.25rem;
    --tekstH3: 1.5rem;
    --tekstH2: 1.75rem;
    --tekstH1: 2.75rem;

    /* --- Ritme ---------------------------------------------------- */
    --ruimteXs: 0.25rem;
    --ruimteSm: 0.5rem;
    --ruimteMd: 1rem;
    --ruimteLg: 1.5rem;
    --ruimteXl: 2.5rem;
    --ruimte2xl: 4rem;

    /* --- Maten ---------------------------------------------------- */
    /*
     * 1220px met 20px padding aan weerszijden geeft een inhoudsbreedte van
     * 1180px. Dat is precies de containerbreedte van de bestaande site
     * (.elementor-section-boxed > .elementor-container: max-width 1180px, met
     * 20px sectiepadding erbuiten). Op elke vensterbreedte komt de linkerrand
     * van de inhoud daarmee op dezelfde plek te liggen als daar.
     */
    --breedteMax: 1220px;

    /*
     * De hoekafrondingen van de bestaande site: 7px op vlakken en knoppen,
     * 5px op het uitklapmenu, en 12px waar dit thema iets ronder mag.
     */
    --randSm: 5px;
    --randMd: 7px;
    --randLg: 12px;
    --randRond: 999px;

    /* --- Schaduwen ------------------------------------------------ */
    --schaduwZacht: 0 1px 3px rgb(15 24 74 / 8%);
    --schaduwMd: 0 4px 16px rgb(15 24 74 / 10%);
    --schaduwLg: 0 8px 32px rgb(15 24 74 / 16%);

    /* --- Beweging ------------------------------------------------- */
    --duurSnel: 120ms;
    --duurMd: 220ms;
    --versnelling: cubic-bezier(0.33, 1, 0.68, 1);

    /* --- Header --------------------------------------------------
     * De hoogte van de hoofdbalk, en daarmee het enige deel van de header dat
     * bij het terugscrollen over de inhoud heen komt. reset.css gebruikt hem
     * voor scroll-padding-top, zodat een anker niet onder die balk landt.
     *
     * Een vaste waarde en geen meting: die balk is in alle drie de weergaven
     * 58 pixels hoog. inc/js/archive-product.js leest hem uit, dus hij hoort
     * gelijk te blijven aan de hoogte van .headerContainer.
     * ------------------------------------------------------------- */
    --headerHoogte: 58px;
}

/* ==================================================================
 * Basis
 * ================================================================== */

body {
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-family: var(--fontBasis);
    font-size: var(--tekstBasis);
    font-weight: 400;
    line-height: 1.6;
}

/* ==================================================================
 * Bouwstenen die header, footer en elke template delen
 * ================================================================== */

/*
 * De enige plek die de horizontale marge van de site bepaalt. Secties zetten
 * zelf geen padding-inline: dan zou het bij elkaar opgeteld worden en zou de
 * inhoud per sectie kunnen verschuiven.
 */
.omhulsel {
    width: 100%;
    max-width: var(--breedteMax);
    margin-inline: auto;
    padding-inline: 20px;
}

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimteSm);
    padding: 0.6875rem 1.375rem;
    border: 1px solid transparent;
    border-radius: var(--randMd);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.knop:hover,
.knop:focus-visible {
    background-color: var(--kleurOranjeDonker);
}

.knopBlauw {
    background-color: var(--kleurBlauw);
}

.knopBlauw:hover,
.knopBlauw:focus-visible {
    background-color: var(--kleurBlauwDonker);
}

.knopOmlijnd {
    border-color: var(--kleurBlauw);
    background-color: transparent;
    color: var(--kleurBlauw);
}

.knopOmlijnd:hover,
.knopOmlijnd:focus-visible {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

/* ==================================================================
 * Header
 *
 * Drie rijen boven elkaar, samen 128 pixels, elk met zijn eigen kleur:
 *
 *   .topBar       de rail, 30px — lichtblauw; telefoonnummer, USP's, links
 *   .headerMain   de hoofdbalk, 58px — wit; logo, zoekveld en winkelwagen
 *   .hoofdNav     de categoriebalk, 40px — merkblauw; het hoofdmenu
 *
 * Dit blijft een afwijking van baserules regel 14, maar een kleinere dan
 * hiervoor. De bestaande site heeft drie rijen met drie achtergronden — wit,
 * middenblauw, wit — en zet de gekleurde band dus in het midden, met het logo
 * in wit daarop. Hier staat de gekleurde band onderaan en is de rij met het logo
 * wit. Dezelfde opbouw van drie rijen, dezelfde kleuren, andere verdeling: de
 * navigatie is het gekleurde blok in plaats van de balk met het logo. De
 * bestaande site gebruikt er 166 pixels voor (48 + 77 + 41); dit zijn er 128.
 *
 * Hier stond één diepblauw vlak met een ruitpatroon erin en een bijna zwarte
 * rail. Dat las als één ding, maar dat ene ding was het eerste wat een bezoeker
 * van de pagina zag, en het was donker en grauw. Drie redenen voor deze opbouw,
 * en alle drie gaan ze over hoe het overkomt:
 *
 *   1. De rail is lichtblauw en leest daarmee als een terzijde: bijzaken in
 *      kleine letters op een rustig vlak. Het groene vinkje van de bestaande
 *      site kan er weer bij — op diepblauw valt dat groen weg, en daarom stond
 *      er oranje.
 *   2. De hoofdbalk is wit. Het logo is daarmee het eerste wat opvalt, en de
 *      oranje winkelwagenknop knalt van de balk af in plaats van te moeten
 *      concurreren met een achtergrond die zelf al om aandacht vroeg.
 *   3. De categoriebalk is merkblauw en zet de navigatie neer als één blok,
 *      met wit erop en het oranje streepje eronder.
 *
 * Terugdraaien naar het diepblauw kost meer dan drie waarden — de tekst-, lijn-
 * en iconenkleuren van de drie rijen rekenen nu op een lichte achtergrond.
 *
 * Wat bij een weergave niet hoort, staat niet in de HTML: de mu-plugin
 * samit-apparaat rendert één van drie varianten (baserules regel 16). Deze
 * stylesheet hoeft dus niets weg te `display: none`-en — de media queries
 * onderaan gaan alleen over maten die binnen een variant meebewegen.
 * ================================================================== */

/*
 * Geen verloop, geen ruitpatroon en geen gloeden: drie effen rijen. Wat er aan
 * kleur in de header zit, zit in de rijen zelf.
 *
 * De schaduw is zacht en alleen naar onderen. Hij is er voor de pagina's waar
 * de inhoud wit is en de header dus zonder rand aan de pagina vast zou zitten;
 * op de voorpagina, waar de blauwe hero er direct onder begint, valt hij weg.
 */
.siteHeader {
    position: relative;
    z-index: 9;
    background-color: var(--kleurWit);
    box-shadow: 0 10px 26px -20px rgb(15 24 74 / 40%);
    color: var(--kleurTekst);
}

/* --- De rail -----------------------------------------------------
 *
 * De bovenste 30 pixels: links waar je ons bereikt, rechts wat we beloven en
 * waar je verder kunt kijken. Lichtblauw, met een haarlijn eronder die de
 * scheiding met de witte balk doet.
 *
 * De snelkoppelingen (Veelgestelde vragen, Blog) stonden op de bestaande site
 * in de blauwe balk, naast het zoekveld. Ze staan hier omdat het bijzaken zijn:
 * in de hoofdbalk vroegen ze evenveel aandacht als de winkelwagen, en die
 * ruimte heeft het zoekveld beter nodig.
 * ------------------------------------------------------------------ */

.topBar {
    background-color: var(--kleurHeaderRail);
    box-shadow: inset 0 -1px 0 var(--kleurHeaderRailLijn);
}

.topBarInner {
    display: flex;
    height: 30px;
    align-items: center;
    column-gap: 28px;
    color: var(--kleurTekstBalk);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
}

.topBarVragen {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.topBarFoto {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--randRond);
    box-shadow:
        0 0 0 2px var(--kleurWit),
        0 1px 4px rgb(15 24 74 / 20%);
}

/*
 * Het groene bolletje rechtsonder op de foto. Een pseudo-element en geen tweede
 * afbeelding: het is een statusindicator van acht pixels, daar hoort geen
 * HTTP-verzoek bij.
 *
 * Het randje eromheen is de kleur van de rail zelf. Dat kan nu die rail effen
 * lichtblauw is; toen hij een verloop van donker naar licht was, moest het
 * doorzichtig zwart zijn, want een vaste kleur klopte daar maar op één plek in.
 *
 * Alleen als die foto er ook werkelijk is, en dat is met `:has()` en niet met
 * een extra klasse uit PHP: het is een opmaakgevolg van wat ernaast staat.
 * De `left: 15px` hieronder rekent namelijk op de 22 pixels van de foto. Is het
 * veld *Contactfoto* leeg — het is een optioneel veld, en de rail staat er ook
 * zonder — dan valt het bolletje bovenóp de tekst en leest de rail als
 * "Vra●en? Bel 085 303 57 45". Een statusbolletje zonder iets om de status van
 * te zijn hoort er dan gewoon niet te staan.
 */
.topBarVragen:has(.topBarFoto)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: var(--randRond);
    background-color: var(--kleurGroen);
    box-shadow: 0 0 0 2px var(--kleurHeaderRail);
}

.topBarVragenTekst {
    white-space: nowrap;
}

.topBarTelefoon {
    color: var(--kleurBlauwDonker);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--duurSnel) ease;
}

/*
 * Bij hover het donkere oranje en niet --kleurOranje: dat laatste haalt op deze
 * lichtblauwe rail de 4,5:1 niet, en een telefoonnummer is tekst die gelezen
 * moet worden.
 */
.topBarTelefoon:hover,
.topBarTelefoon:focus-visible {
    color: var(--kleurOranjeDonker);
}

.topBarRechts {
    display: flex;
    align-items: center;
    margin-left: auto;
    column-gap: 22px;
}

.uspLijst {
    display: flex;
    align-items: center;
    column-gap: 22px;
}

.usp {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.uspIcoon {
    width: 9px;
    height: 6.66px;
    flex: none;
    margin-right: 8px;
}

/*
 * Het woord met nadruk in een USP-regel: vet en in de tekstkleur, zoals op de
 * bestaande site. Toen de rail diepblauw was kon dat niet — daar was helderder
 * wit het enige verschil dat overbleef.
 */
.usp strong {
    color: var(--kleurTekst);
    font-weight: 600;
}

.railLinks {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

/*
 * Het streepje tussen de USP's en de snelkoppelingen. Een pseudo-element van de
 * lijst en geen border op de eerste link: zo staat de scheiding er ook als er
 * één snelkoppeling in het menu staat, en verdwijnt hij mee als het menu leeg is.
 *
 * De aangrenzende selector is er omdat de USP's in de mobiele weergave niet
 * gerenderd worden. Zonder die voorwaarde staat het streepje daar in zijn eentje
 * links van de snelkoppelingen, en scheidt het twee dingen waarvan er één weg is.
 */
.uspLijst + .railLinks::before {
    content: "";
    width: 1px;
    height: 14px;
    flex: none;
    background-color: var(--kleurHeaderLijn);
}

.railLink {
    color: inherit;
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duurSnel) ease;
}

.railLink:hover,
.railLink:focus-visible {
    color: var(--kleurBlauw);
}

/* --- De hoofdbalk ------------------------------------------------
 *
 * De houder eromheen bewaart de 58px in de pagina. Bij het terugscrollen komt
 * de balk zelf los en schuift hij als vaste balk in beeld; zonder houder zou de
 * inhoud op dat moment 58 pixels omhoog springen. Op de bestaande site gebeurt
 * dat laatste ook — daar zit de houder er wel, maar zonder hoogte.
 * ------------------------------------------------------------------ */

.headerPlakker {
    min-height: 58px;
}

/*
 * In de rij heeft de balk geen eigen achtergrond nodig: .siteHeader is wit en
 * die kleur komt er doorheen. Losgekomen van de pagina staat hij over de inhoud
 * heen en heeft hij die wel nodig — zie .headerMainVast.
 */
.headerMain {
    color: var(--kleurTekst);
}

/*
 * De vaste balk. `transform` en niet `top`, want een transform kost de browser
 * geen herberekening van de layout — hij schuift alleen een laag op.
 *
 * De schaduw is hier steviger dan die van .siteHeader: deze balk zweeft
 * werkelijk over de inhoud, en op een witte pagina is een schaduw het enige
 * waaraan te zien is dat hij daar niet vastzit.
 */
.headerMainVast {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--kleurWit);
    box-shadow: 0 10px 28px -14px rgb(15 24 74 / 34%);
    opacity: 0;
    transform: translateY(-100%);
    transition:
        transform 350ms ease,
        opacity 250ms ease;
}

.headerMainZichtbaar {
    opacity: 1;
    transform: translateY(0);
}

.headerContainer {
    display: flex;
    height: 58px;
    align-items: center;
    column-gap: 24px;
}

.siteLogo {
    flex: none;
    line-height: 0;
}

/*
 * Alleen de hoogte, met de breedte op auto: dan houdt elk logo zijn eigen
 * verhouding — het meegeleverde SVG én een logo dat later via de customizer
 * wordt ingesteld.
 */
.siteLogo img,
.siteLogo svg {
    width: auto;
    height: 34px;
    max-width: 100%;
}

/* --- Het zoekveld in de balk -------------------------------------
 *
 * Het veld heeft geen vaste breedte maar neemt wat er tussen het logo en de
 * winkelwagen overblijft, tot 470 pixels. Met `margin-inline: auto` gaat de
 * ruimte die dan nog over is naar beide kanten, dus staat het veld midden in de
 * balk — op elke vensterbreedte, zonder een tweede maat in een media query.
 *
 * De pil is lichtblauw gevuld zolang er niets in gebeurt en wordt wit zodra hij
 * de aandacht heeft. Dat hangt aan :focus-within van het formulier en niet aan
 * :focus-visible van het veld: klikken met de muis hoort hetzelfde te doen als
 * er met de tab naartoe gaan, en het suggestiepaneel eronder is ook wit — samen
 * zijn ze dan één ding.
 *
 * Toen de balk blauw was, was de vulling doorzichtig wit en de tekst erin wit.
 * Op een witte balk kan dat niet: een veld met dezelfde kleur als de balk
 * eromheen is geen veld meer. Vandaar de vulling en de rand van de rest van het
 * thema — dezelfde als het ruime veld op /blog/ (onderdelen/zoekveld.css).
 * ------------------------------------------------------------------ */

.zoekFormulier {
    position: relative;
    display: flex;

    /*
     * Twee kleuren die alleen in het zoekveld en zijn suggestiepaneel
     * voorkomen, en die hier staan omdat ze gemeten zijn:
     *
     *   --zoekGrijs  de tweede regel van een suggestie en "niet op voorraad".
     *                Niet --kleurTekstZacht: dat haalt op wit 3,63:1, en de
     *                specificaties onder een productnaam zijn hier geen
     *                bijschrift maar de inhoud waarop gekozen wordt. Dit grijs
     *                haalt 5,3:1 op wit en 4,8:1 op het vlak van de aangewezen
     *                regel.
     *   --zoekGroen  "op voorraad" als tekst. --kleurGroen (#08b815) haalt op
     *                wit 2,67:1 en is daarmee goed voor een stip maar niet voor
     *                elf pixels tekst; dit groen haalt 5,5:1 op wit en 5,0:1 op
     *                dat vlak.
     */
    --zoekGrijs: #5f6d7c;
    --zoekGroen: #0e7a17;
}

/*
 * Chrome en Safari zetten in een type="search" hun eigen kruisje. Zodra het
 * script draait staat het onze er (.zoekWissen), en twee kruisjes naast elkaar
 * is één te veel. Zonder script blijft dat van de browser staan.
 */
.jsAan .zoekVeld::-webkit-search-cancel-button {
    display: none;
    appearance: none;
}

.zoekVeld {
    width: 338px;
    max-width: 100%;
    flex: 1 1 auto;
    padding: 11px 26px;
    border: 0;
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-size: 0.8125rem;
    line-height: 1.2308;
}

.zoekVeld::placeholder {
    color: #bbb;
}

.zoekVeld:focus-visible {
    outline: 2px solid var(--kleurOranje);
    outline-offset: -2px;
}

.headerZoeken {
    min-width: 0;
    max-width: 470px;
    flex: 1 1 auto;
    margin-inline: auto;
}

.headerZoeken .zoekFormulier {
    width: 100%;
}

.headerZoeken .zoekVeld {
    width: 100%;
    height: 40px;
    padding: 0 42px 0 20px;
    border: 1px solid var(--kleurLijn);
    background-color: var(--kleurVlak);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    transition:
        background-color var(--duurMd) var(--versnelling),
        border-color var(--duurMd) var(--versnelling),
        box-shadow var(--duurMd) var(--versnelling);
}

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

.headerZoeken .zoekFormulier:hover .zoekVeld {
    border-color: #c2ccd6;
    background-color: var(--kleurWit);
}

/*
 * Bij aandacht wit met een blauwe rand en een zachte ring eromheen. Die ring is
 * een box-shadow en geen outline: de outline is voor :focus-visible, dus voor
 * het toetsenbord, en die twee horen elkaar niet in de weg te zitten.
 */
.headerZoeken .zoekFormulier:focus-within .zoekVeld {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurWit);
    box-shadow: 0 0 0 3px rgb(35 126 179 / 14%);
}

/* De ring hoort buiten de pil te vallen en niet erin. */
.headerZoeken .zoekVeld:focus-visible {
    outline-offset: 2px;
}

/* --- Het kruisje dat het veld leegmaakt --------------------------
 *
 * Zit in de rechterkant van het veld, vóór de loep. Hij komt er pas als er
 * iets in het veld staat: een leeg veld met een kruisje erin belooft iets om
 * weg te halen wat er niet is.
 *
 * De maten staan per variant van het veld, want de loep waar hij vóór komt te
 * staan is in de header 30 pixels, in het ruime veld 38 en in het mobiele menu
 * niet in beeld.
 * ------------------------------------------------------------------ */

.zoekWissen {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--randRond);
    background-color: transparent;
    color: var(--zoekGrijs);
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.zoekWissen svg {
    width: 9px;
    height: 9px;
}

.zoekWissen:hover {
    background-color: var(--kleurVlakKoel);
    color: var(--kleurTekst);
}

.zoekWissen:focus-visible {
    outline: 2px solid var(--kleurBlauw);
    outline-offset: 1px;
}

/*
 * Ruimte voor het kruisje. Alleen bij een gevuld veld: in een leeg veld zou de
 * plaatshouder er onnodig door ingekort worden, en daar staat het kruisje ook
 * niet. Zonder deze regel schuift de getypte tekst eronderdoor.
 */
.zoekGevuld .zoekVeld {
    padding-right: 44px;
}

.headerZoeken .zoekWissen {
    right: 36px;
}

/*
 * In het smalle veld (het mobiele menu, de 404 en het blok "niets gevonden")
 * komt de verzendknop pas in beeld als hij focus krijgt, en dan neemt hij rechts
 * in de rij zijn eigen ruimte in — precies waar het kruisje staat. Dan schuift
 * het kruisje er links van. In de header en in het ruime veld staat die knop
 * altijd op dezelfde plek, dus daar speelt dit niet.
 */
.mobielMenuZoeken .zoekFormulier:has(.zoekKnop:focus-visible) .zoekWissen,
.foutZoeken .zoekFormulier:has(.zoekKnop:focus-visible) .zoekWissen,
.geenResultatenZoeken .zoekFormulier:has(.zoekKnop:focus-visible) .zoekWissen {
    right: 52px;
}

.headerZoeken .zoekGevuld .zoekVeld {
    padding-right: 68px;
}

/*
 * De zoekknop. Op de bestaande site staat hier `display: none` op en zoek je met
 * Enter; hier is het een echte knop die ook te zien is. Dat scheelt een
 * bezoeker die met een schermlezer of alleen een toetsenbord werkt het gokwerk,
 * en het is dezelfde loep als op het brede veld van /blog/ (onderdelen/zoekveld.css).
 */
.zoekKnop {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

.zoekKnop:focus-visible {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    align-items: center;
    padding-inline: 0.875rem;
    border-radius: 0 var(--randRond) var(--randRond) 0;
    background-color: var(--kleurOranje);
    clip-path: none;
    color: var(--kleurWit);
}

.zoekKnop svg {
    width: 17px;
    height: 17px;
}

.headerZoeken .zoekKnop {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    overflow: visible;
    border-radius: var(--randRond);
    background-color: transparent;
    clip-path: none;
    color: var(--kleurBlauw);
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.headerZoeken .zoekKnop svg {
    width: 15px;
    height: 15px;
}

/*
 * Bij hover een oranje rondje met een witte loep erin. Eén regel voor beide
 * standen van het veld: de vulling eronder is nu in rust en bij focus allebei
 * licht, dus is er geen tweede kleur voor de loep meer nodig. Toen de balk blauw
 * was waren dat twee sets regels: doorzichtig wit op blauw wordt onzichtbaar
 * zodra de pil eronder wit wordt.
 */
.headerZoeken .zoekKnop:hover {
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

/*
 * De knop blijft op zijn plek staan als hij focus krijgt. Zonder deze regel
 * geldt .zoekKnop:focus-visible hierboven, en die zet hem terug in de rij —
 * midden in het zoekveld.
 */
.headerZoeken .zoekKnop:focus-visible {
    position: absolute;
    top: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    clip-path: none;
    color: var(--kleurWit);
    outline: 2px solid var(--kleurWit);
    outline-offset: 2px;
    transform: translateY(-50%);
}

/* --- Suggesties onder het zoekveld -------------------------------
 *
 * Het paneel dat tijdens het typen onder het veld verschijnt. De HTML komt uit
 * de <template>'s in searchform.php en wordt door inc/js/main.js opgebouwd, dus
 * zonder JavaScript staat er niets van dit alles in de pagina.
 *
 * De opmaak staat in main.css en niet in een onderdeel: het zoekveld zit in de
 * header en de header staat op elke pagina. Zou dit in onderdelen/zoekveld.css
 * staan, dan had de suggestielijst alleen op /blog/ en de zoekpagina opmaak — en
 * op de andere pagina's, waar hij net zo goed opengaat, niet.
 *
 * Drie dingen bepalen hoe een regel eruitziet, en alle drie zijn ze er omdat
 * tien suggesties in één oogopslag te overzien horen te zijn:
 *
 *   1. Elke regel begint met een vakje van 44 pixels. Een product heeft daar
 *      zijn foto, een categorie, een artikel of een eerdere zoekopdracht een
 *      icoon. Zo liggen alle regels op dezelfde linkerrand; eerst viel dat
 *      vakje weg bij alles zonder foto, en dan las het paneel als twee lijsten.
 *   2. De titel staat op één regel en de specificaties eronder. De feed levert
 *      "HP 840 G8 – Intel Core i5-1145G7 – 256GB NVMe – 16GB", en dat is op één
 *      regel van 270 pixels precies tot en met "Intel Core" te lezen — het
 *      model, waar iemand op zoekt, viel als eerste weg.
 *   3. De prijs staat rechts en niet als bijschrift onder de titel. Rechts
 *      uitgelijnd staan de prijzen van tien suggesties op één lijn onder elkaar
 *      en zijn ze te vergelijken zonder ze te hoeven lezen.
 *
 * Wat hier bewust níet staat is de hoogte van het paneel bij het openklappen.
 * Dat is een animatie van 0 naar "zoveel als de inhoud nodig heeft" en die kan
 * CSS niet (baserules regel 7); die loopt via Motion. Wat CSS wel kan — de
 * hover op een regel, het pijltje dat opschuift — staat hieronder.
 * ------------------------------------------------------------------ */

.zoekPaneel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--kleurLijnPaneel);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwLg);
    color: var(--kleurTekst);
    text-align: left;
}

/*
 * Het paneel is minstens zo breed als het veld en groeit door tot 480 pixels.
 * Het groeit naar links, want daar ligt tussen het logo en het veld de ruimte;
 * rechts staat de winkelwagen.
 */
.headerZoeken .zoekPaneel {
    left: auto;
    width: max(100%, 480px);
    max-width: calc(100vw - 40px);
    border-color: transparent;
    box-shadow: 0 22px 48px -20px rgb(1 36 63 / 55%);
}

/*
 * Een eigen schuifgebied en niet de hele pagina laten meegroeien: bij tien
 * suggesties zou het paneel anders tot onder de vouw doorlopen. overscroll-behavior
 * houdt de pagina eronder stil zodra de lijst aan zijn eind is, en de
 * scroll-padding houdt de aangewezen regel van de rand af als de pijltjestoetsen
 * hem in beeld schuiven.
 */
.zoekLijst {
    max-height: min(60vh, 452px);
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 6px;
}

/*
 * Een haarlijn tussen twee groepen en niet boven elke groep: de eerste groep
 * sluit tegen de bovenrand van het paneel aan en heeft er geen nodig.
 */
.zoekGroep + .zoekGroep {
    margin-top: 5px;
    padding-top: 3px;
    border-top: 1px solid var(--kleurLijnZacht);
}

/*
 * Hetzelfde labeltje als boven een kolom in de footer: klein, kapitalen, met
 * letterruimte. Het is een aanduiding en geen kop, en dat hoort te zien te zijn.
 */
.zoekGroepKop {
    padding: 8px 10px 5px;
    color: var(--zoekGrijs);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
 * De regel is een raster met drie kolommen en heeft zijn eigen afronding: de
 * aangewezen regel is daarmee een blokje in het paneel in plaats van een band
 * van rand tot rand. Vandaar ook de 6 pixels padding op de lijst hierboven —
 * die ruimte is de marge waar de afronding in valt.
 */
.zoekOptie {
    display: grid;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--randMd);
    color: inherit;
    column-gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    text-decoration: none;
    transition: background-color var(--duurSnel) ease;
}

/*
 * De aangewezen regel. Twee selectors en één opmaak: met de muis is dat :hover,
 * met het toetsenbord zet het script aria-selected. Zo is er één stand in beeld
 * en hoeft er geen eigen klasse naast de ARIA-toestand bijgehouden te worden —
 * dezelfde afweging als bij aria-current in de inhoudsopgave van een artikel.
 */
.zoekOptie:hover,
.zoekOptie[aria-selected="true"] {
    background-color: var(--kleurVlak);
}

.zoekOptie:focus-visible {
    outline: 2px solid var(--kleurBlauw);
    outline-offset: -2px;
}

.zoekOptieBeeld {
    display: grid;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--kleurLijnZacht);
    border-radius: var(--randSm);
    background: linear-gradient(180deg, #fff 0%, #f7fbfd 100%);
    place-items: center;
}

.zoekOptieFoto {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

/*
 * Het icoon in het vakje: blauw voor een categorie, een artikel of een eerdere
 * zoekopdracht. Een product zonder foto krijgt hetzelfde vakje met het
 * pakketicoon erin, maar dan in het grijs van een lege plek: dat is geen soort
 * maar een gemis, en dat hoort geen merkkleur te dragen.
 */
.zoekOptieIcoon {
    width: 17px;
    height: 17px;
    color: var(--kleurBlauw);
}

.zoekOptieLeeg .zoekOptieIcoon {
    width: 20px;
    height: 20px;
    color: #b9c6d2;
}

.zoekOptieTekst {
    min-width: 0;
}

.zoekOptieTitel {
    display: block;
    overflow: hidden;
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Het stukje dat overeenkomt met wat er getypt is. Een <mark> en geen eigen
 * span: dan weet een schermlezer ook dat dit de treffer is.
 */
.zoekOptieTitel mark,
.zoekOptieMeta mark {
    border-radius: 3px;
    background-color: rgb(245 139 0 / 20%);
    color: var(--kleurTekst);
    font-weight: 600;
}

/*
 * De tweede regel: de specificaties van een product, het aantal producten in
 * een categorie of de datum van een artikel.
 */
.zoekOptieMeta {
    display: block;
    margin-top: 1px;
    overflow: hidden;
    color: var(--zoekGrijs);
    font-size: var(--tekstXs);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zoekOptieMeta:empty {
    display: none;
}

/*
 * Een regel zonder tweede regel mag zijn titel over twee regels zetten in
 * plaats van hem af te kappen. Dat is de helft van de producten (die zonder
 * streepje in de titel: een monitor heet "HP S5 Pro 524pn 24″ IPS WUXGA 16:10
 * Monitor", en daarvan is op één regel niet meer dan "16:10" te lezen), en
 * verder elke categorie, elk artikel en elke eerdere zoekopdracht. Het
 * beeldvakje ernaast is 44 pixels hoog en blijft de maat van de rij, dus er
 * wordt niets hoger van.
 */
.zoekOptie:has(.zoekOptieMeta:empty) .zoekOptieTitel {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* De zijkolom met de prijs en de voorraad; leeg bij alles wat geen product is. */
.zoekOptieZij {
    display: grid;
    justify-items: end;
    row-gap: 2px;
}

.zoekOptiePrijs {
    font-size: var(--tekstSm);
    font-weight: 600;
    white-space: nowrap;
}

/*
 * De voorraad: een stip met het woord ernaast. Eerst stond hier alleen de stip,
 * met de tekst voor een schermlezer erbij — maar een groene stip zonder tekst
 * moet je maar weten, en juist bij refurbished apparaten (één stuk per toestel)
 * is leverbaarheid wat de keuze bepaalt. Op elf pixels in de zijkolom vraagt hij
 * niet meer aandacht dan de prijs erboven.
 */
.zoekOptieVoorraad {
    display: flex;
    align-items: center;
    color: var(--zoekGroen);
    column-gap: 5px;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.zoekOptieVoorraad::before {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentcolor;
    content: "";
}

.zoekOptieVoorraadNee {
    color: var(--zoekGrijs);
}

/*
 * "Niets gevonden voor ‘…’". Staat boven de lijst, want wat eronder staat is
 * de terugval: de treffers van het eerste deel van de zoekterm, of anders wat
 * er veel bekeken wordt.
 */
.zoekLeeg {
    margin: 0;
    padding: 14px 16px 4px;
    font-size: var(--tekstSm);
    font-weight: 500;
}

/* --- De voet -----------------------------------------------------
 *
 * Twee dingen die elkaar afwisselen: de weg naar de zoekpagina zodra er iets
 * getypt is, en de knop die de eigen zoekgeschiedenis wist zolang het veld nog
 * leeg is. Dat is dezelfde plek voor twee dingen die nooit tegelijk nodig zijn.
 * Zijn ze allebei niet nodig, dan zet het script de voet zelf op `hidden` — een
 * lege strook met een streep erboven is geen voet.
 * ------------------------------------------------------------------ */

.zoekVoet {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px;
    border-top: 1px solid var(--kleurLijnZacht);
    column-gap: 6px;
}

.zoekAlles {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
    column-gap: 10px;
    font-size: var(--tekstSm);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duurSnel) ease;
}

.zoekAlles:hover {
    background-color: #e1edf5;
    color: var(--kleurBlauwDonker);
}

.zoekAlles:focus-visible {
    outline: 2px solid var(--kleurBlauw);
    outline-offset: -2px;
}

.zoekAllesTekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zoekAllesPijl {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform var(--duurSnel) ease;
}

.zoekAlles:hover .zoekAllesPijl {
    transform: translateX(3px);
}

.zoekWisRecent {
    padding: 8px 10px;
    border: 0;
    border-radius: var(--randMd);
    background-color: transparent;
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--tekstXs);
    font-weight: 500;
    transition: background-color var(--duurSnel) ease;
}

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

.zoekWisRecent:focus-visible {
    outline: 2px solid var(--kleurBlauw);
    outline-offset: 1px;
}

/*
 * Onder de 768 pixels staat het veld in het uitschuifpaneel van de header en is
 * het paneel rond de 300 pixels breed. Dan is elke pixel voor de naam en de
 * specificaties er een: het beeldvakje wordt vier pixels smaller en het woord
 * naast de voorraadstip gaat uit beeld. De stip blijft staan en de tekst blijft
 * bestaan, dus een schermlezer leest de voorraad nog steeds voor.
 *
 * 767 is samitApparaat::BREEKPUNT_SMAL; die twee horen gelijk te blijven.
 */
@media (max-width: 767px) {
    .zoekOptie {
        column-gap: 10px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .zoekOptieBeeld {
        width: 40px;
        height: 40px;
    }

    .zoekOptieFoto {
        max-width: 34px;
        max-height: 34px;
    }

    .zoekOptieVoorraadTekst {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.headerLinks {
    display: flex;
    flex: none;
    align-items: center;
    column-gap: 16px;
    color: var(--kleurWit);
}

/* --- De winkelwagenknop ------------------------------------------
 *
 * Een oranje pil van 40 pixels, even hoog als het zoekveld ernaast: twee
 * elementen van dezelfde maat in één balk staan rustiger dan twee die elk hun
 * eigen hoogte hebben.
 *
 * De teller staat ín de knop en niet als schijfje op de linkerbovenhoek. Dat
 * schijfje is op de bestaande site 25 pixels wit en overlapt de rand van de
 * knop, waardoor de knop geen rechthoek meer is maar een vorm met een deuk. En
 * hij staat er ook bij een lege wagen, met een 0 erin.
 * ------------------------------------------------------------------ */

.winkelwagenKnop {
    display: flex;
    height: 40px;
    flex: none;
    align-items: center;
    justify-content: center;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    box-shadow: 0 8px 18px -10px rgb(245 139 0 / 95%);
    color: var(--kleurWit);
    column-gap: 9px;
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--duurSnel) ease,
        box-shadow var(--duurSnel) ease;
}

.winkelwagenKnop:hover,
.winkelwagenKnop:focus-visible {
    background-color: var(--kleurOranjeDonker);
    box-shadow: 0 10px 22px -10px rgb(245 139 0 / 100%);
}

.winkelwagenIcoon {
    width: 17px;
    height: 14.548px;
    flex: none;
}

/*
 * Het aantal, als chip in de knop. `min-width` en niet `width`: bij twaalf
 * artikelen hoort het rondje een ovaal te worden in plaats van de twee cijfers
 * over de rand te duwen.
 */
.winkelwagenAantal {
    display: grid;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 26%);
    color: var(--kleurWit);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    place-items: center;
}

/*
 * Een lege wagen krijgt geen chip. De klasse komt uit PHP en wordt door
 * inc/js/cart.js bijgewerkt zodra er zonder herladen iets bij komt of af gaat;
 * het element zelf blijft staan, want dat is waar dat script de teller in zet.
 */
.winkelwagenKnopLeeg .winkelwagenAantal {
    display: none;
}

/* --- De mobiele menuknop -----------------------------------------
 *
 * Een vierkant van 40 op een lichtblauw vlakje, even hoog als de
 * winkelwagenknop aan de andere kant van de balk. Dat vlakje is er om te laten
 * zien dát het een knop is: drie streepjes zonder achtergrond zien er in een
 * balk uit als een pictogram.
 *
 * Bij hover wordt het vlakje blauw en het icoon wit — dezelfde omslag als de
 * loep in het zoekveld ernaast maakt.
 * ------------------------------------------------------------------ */

.menuKnop {
    display: grid;
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    place-items: center;
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.menuKnop:hover,
.menuKnop:focus-visible {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.menuKnop svg {
    width: 18px;
    height: 12.522px;
}

/* --- De categoriebalk --------------------------------------------
 *
 * De onderste rij: een effen vlak in het merkblauw. Op de bestaande site is dit
 * een witte balk onder de blauwe hoofdbalk; hier is de hoofdbalk wit en is deze
 * rij het gekleurde vlak. Zo staat de navigatie als één blok in beeld en is de
 * onderkant van de header meteen de scheiding met de pagina.
 *
 * Het lichte verloop bovenin is drie procent wit dat naar niets uitloopt. Geen
 * versiering: het houdt de bovenrand van de balk een tikje lichter dan de
 * onderrand, en daarmee ligt de balk op de pagina in plaats van erin.
 * ------------------------------------------------------------------ */

.hoofdNav {
    /*
     * Positioneringscontext voor de megamenu. Die band loopt van vensterrand
     * tot vensterrand en rekent dus met deze balk en niet met het menu-item
     * waaronder hij hangt — zie het hoofdstuk De megamenu hieronder.
     *
     * Geen `overflow: hidden` erop: dat zou de band eronder afknippen.
     */
    position: relative;
    background-color: var(--kleurHeaderNav);
    background-image: linear-gradient(180deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 0%) 100%);

    /*
     * De haarlijn onderaan is er voor de voorpagina. Daar begint de hero direct
     * onder deze balk in bijna dezelfde blauwe tint, en zonder die lijn lopen de
     * twee in elkaar over tot één blauw blok van 240 pixels waarin de navigatie
     * niet meer als balk te lezen is. Op de andere pagina's is de inhoud eronder
     * wit en doet de kleurovergang dat werk zelf.
     */
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 22%);
    color: var(--kleurWit);
}

/*
 * De negatieve marge haalt de padding van de eerste link weg, zodat de eerste
 * categorie precies boven de linkerrand van de inhoud begint.
 */
.navLijst {
    display: flex;
    align-items: center;
    column-gap: 6px;
    margin-inline: -14px 14px;
}

.navItem {
    position: relative;
    display: flex;
    height: 40px;
    align-items: center;
}

/* "Contact" staat rechts in de balk. */
.navItemRechts {
    margin-left: auto;
}

/*
 * Vol wit en niet 82%. Op het diepblauw van hiervoor was dat gedimde wit nog
 * ruim leesbaar en gaf het een verschil tussen rust en hover; op dit lichtere
 * blauw komt 82% wit op 3,9:1 uit en dat is onder de 4,5:1 van WCAG AA. Het
 * verschil tussen rust en hover doet daarom het streepje eronder, en dat is
 * bovendien duidelijker dan een tint wit.
 */
.navLink {
    position: relative;
    display: flex;
    align-items: center;
    padding: 13px 14px;
    color: var(--kleurWit);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * Het oranje streepje onder de link. Het groeit van links open in plaats van er
 * ineens te staan: één eigenschap van A naar B, dus CSS-werk en geen reden om
 * Motion aan te spreken (baserules regel 7).
 *
 * Drie pixels en geen twee: dit streepje is het enige verschil tussen een link
 * in rust en een link waar de muis op staat, nu de tekst in beide standen vol
 * wit is.
 */
.navLink::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--kleurOranje);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duurMd) var(--versnelling);
}

.navLink:hover::after,
.navLink:focus-visible::after,
.navItem[data-open="true"] > .navLink::after,
.navItemActief > .navLink::after {
    transform: scaleX(1);
}

/*
 * Het chevronnetje draait een halve slag als het menu openstaat. Op de bestaande
 * site verandert alleen de kleur; een pijl die niet meebeweegt met wat hij
 * aankondigt laat de bezoeker zelf uitzoeken of het menu nu open is.
 */
.navPijl {
    width: 10px;
    height: 5.714px;
    flex: none;
    margin-left: 8px;
    opacity: 0.7;
    transition:
        opacity var(--duurSnel) ease,
        transform var(--duurMd) var(--versnelling);
}

.navItem[data-open="true"] > .navLink .navPijl,
.navItemOuder > .navLink:hover .navPijl,
.navItemOuder > .navLink:focus-visible .navPijl {
    opacity: 1;
    transform: rotate(180deg);
}

/* --- De megamenu -------------------------------------------------
 *
 * Wat er onder een categorie in de balk openklapt is een band over de volle
 * breedte van het venster, met de inhoud op dezelfde container van 1180 pixels
 * als de rest van de pagina. Drie kolommen, gescheiden door haarlijnen die van
 * de bovenkant tot de onderkant doorlopen:
 *
 *   .megaIndex     de naam van de categorie, één regel uitleg, twee
 *                  kengetallen en de link naar het hele overzicht
 *   .megaTegels    de onderliggende categorieën, elk met een foto van een
 *                  toestel dat er werkelijk in staat
 *   .megaVitrine   één uitgelicht toestel, op het lichtblauwe vlak
 *
 * Drie keuzes zitten hierachter, en alle drie gaan ze over hoe het overkomt.
 *
 *   1. Een band en geen zwevende kaart. De header ís het blok waaruit dit
 *      openklapt; een paneel dat van rand tot rand loopt leest als "de header
 *      gaat open" in plaats van als een tweede laag die eroverheen komt. De
 *      enige schaduw zit onder de hele band en niet om de losse onderdelen.
 *   2. Haarlijnen in plaats van kaartjes. De kolommen worden gescheiden door
 *      één pixel lijn die over de volle hoogte doorloopt, en de tegels
 *      onderling door een lichtere. Dat is de vormentaal van een
 *      specificatieblad — en dat is precies wat hier verkocht wordt. Geen
 *      afgeronde kaartjes met een schaduw eronder, geen vlakken die zweven.
 *   3. Wit als grondvlak, blauw voor de vitrine, oranje in echte elementen:
 *      het streepje voor een labeltje en de lijn die bij hover over de bovenkant
 *      van een tegel opengroeit. Geen verlopen over de band en geen patroon
 *      erin.
 *
 * De haarlijnen komen uit `gap` met een achtergrondkleur eronder en niet uit
 * `border` op de kinderen: dan lopen ze over de volle hoogte van de hoogste
 * kolom mee zonder dat er een hoogte in de CSS staat. Vandaar ook dat de
 * ruimte boven en onder de band op `.megaBinnen` staat en niet op het raster:
 * padding op het raster zou in de lijnkleur staan.
 *
 * Twee uitvoeringen: `.megaPaneelBand` hierboven, en `.megaPaneelLijst` voor
 * een menu-item waaronder geen productcategorie zit. Welke van de twee het
 * wordt beslist de inhoud, in PHP — zie de kop van inc/class-samitmegamenu.php.
 * ------------------------------------------------------------------ */

/*
 * Het item dat een band krijgt is géén positioneringscontext: de band rekent
 * met `.hoofdNav` en loopt daarmee van vensterrand tot vensterrand. Het item
 * dat een lijst krijgt is dat wél, want die hangt onder het item zelf.
 */
.navItemMega {
    position: static;
}

.navItemLijst {
    position: relative;
}

.megaPaneel {
    /*
     * Zichtbaarheid loopt via visibility en niet via display: display is niet
     * animeerbaar. Voor een schermlezer is visibility: hidden even onzichtbaar
     * als display: none, dus er lekt niets weg.
     *
     * content-visibility staat ernaast om een andere reden: die zet de hele
     * deelboom uit, en daarmee blijven de `loading="lazy"`-foto's in een dicht
     * paneel ongevraagd. Zonder die regel haalt elke bezoeker de foto's van
     * alle zes de menu's op — bij dit menu ruim driehonderd kilobyte voor iets
     * wat op de meeste pagina's ongezien blijft.
     *
     * De vertraging op visibility laat het paneel bij het dichtgaan nog even
     * staan om weg te kunnen faden; bij het opengaan staat hij op 0.
     */
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    content-visibility: hidden;
    transition:
        opacity var(--duurMd) var(--versnelling),
        transform var(--duurMd) var(--versnelling),
        visibility 0s linear var(--duurMd);
}

/*
 * content-visibility is een discrete eigenschap: zonder allow-discrete springt
 * hij bij het dichtgaan meteen om en is de fade eruit niet te zien. Met de
 * regel erbij wacht hij tot het eind van de overgang, net als visibility.
 *
 * In een @supports en niet los, want een onbekende waarde in de
 * transition-shorthand maakt de hele declaratie ongeldig — en dan zou ook de
 * fade van opacity en transform wegvallen.
 */
@supports (transition-behavior: allow-discrete) {
    .megaPaneel {
        transition:
            opacity var(--duurMd) var(--versnelling),
            transform var(--duurMd) var(--versnelling),
            visibility 0s linear var(--duurMd),
            content-visibility var(--duurMd) allow-discrete;
    }
}

/*
 * data-open wordt door main.js gezet, met een korte vertraging bij het
 * wegbewegen van de muis. :hover en :focus-within staan ernaast als vangnet:
 * zonder JS klapt het paneel nog steeds open, en met het toetsenbord werkt het
 * ook.
 */
.navItem[data-open="true"] > .megaPaneel,
.navItem:hover > .megaPaneel,
.navItem:focus-within > .megaPaneel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    content-visibility: visible;
    transition-delay: 0s;
}

/* --- De band ------------------------------------------------------ */

.megaPaneelBand {
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    left: 0;
    border-bottom: 1px solid var(--kleurLijn);
    background-color: var(--kleurWit);
    /*
     * Alleen naar onderen, en zacht. De band hoort op de pagina te liggen en
     * niet erboven te zweven; een schaduw rondom zou er een kaart van maken.
     */
    box-shadow: 0 26px 44px -30px rgb(15 24 74 / 42%);
    color: var(--kleurTekst);
}

.megaBinnen {
    padding-block: 26px 28px;
}

.megaRaster {
    /*
     * De lijnkleur staat onder het raster en de kolommen erop; de gaten van één
     * pixel zijn daarmee de haarlijnen. Twee gewichten: --megaLijn tussen de
     * kolommen en --megaLijnZacht tussen de tegels, zodat de hoofdindeling
     * zwaarder weegt dan de onderverdeling.
     */
    --megaLijn: var(--kleurLijn);
    --megaLijnZacht: var(--kleurLijnPaneel);
    --megaBoven: 18px;

    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 268px;
    background-color: var(--megaLijn);
    gap: 1px;
}

/* Geen uitgelicht toestel — dan is er geen derde kolom om ruimte voor te laten. */
.megaRaster--zonderVitrine {
    grid-template-columns: 232px minmax(0, 1fr);
}

/* --- Het labeltje ------------------------------------------------
 *
 * Dezelfde vorm als .overzichtLabel op een overzichtspagina en .winkelLabel in
 * de winkel: kapitalen in het merkblauw met een oranje streepje ervoor. Hier
 * een maat kleiner, want dit staat in een menu en niet boven een pagina.
 * ------------------------------------------------------------------ */

.megaLabel {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--kleurBlauw);
    column-gap: 10px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.megaLabelStreep {
    width: 20px;
    height: 2px;
    flex: none;
    border-radius: 2px;
    background-color: var(--kleurOranje);
}

/* --- Kolom 1: de index -------------------------------------------- */

/*
 * De drie kolommen beginnen op dezelfde hoogte: --megaBoven. Dat is er niet om
 * de ruimte te verdelen maar om de twee labeltjes op één lijn te krijgen —
 * "Assortiment" links en "Uitgelicht" rechts. Staan die twee niet gelijk, dan
 * leest de band als drie losse blokken naast elkaar in plaats van als één blad.
 */
.megaIndex {
    display: flex;
    flex-direction: column;
    padding: var(--megaBoven) 28px var(--megaBoven) 0;
    background-color: var(--kleurWit);
}

.megaIndexTitel {
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.16;
}

.megaIndexUitleg {
    margin-top: 10px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.5;
}

/*
 * De kengetallen. Een <dl> met CSS-grid eronder: het zijn paren van een naam en
 * een waarde, en die horen op één regel met de waarde rechts uitgelijnd. Twee
 * haarlijnen eromheen maken er een blok van dat bij de rest van de band hoort.
 */
.megaCijfers {
    display: grid;
    align-items: baseline;
    /*
     * margin-top: auto zet dit blok met de link eronder tegen de onderkant van
     * de kolom. Die kolom is even hoog als de tegels ernaast en dat is meer dan
     * zijn eigen inhoud nodig heeft; met de kengetallen erboven en de link
     * eronder stond het gat er middenin. Nu staat de naam bovenaan, de cijfers
     * onderaan en de lucht ertussen — twee zwaartepunten in plaats van een gat.
     */
    margin-top: auto;
    padding-top: 20px;
    border-block: 1px solid var(--kleurLijn);
    padding-block: 13px;
    column-gap: 14px;
    grid-template-columns: 1fr auto;
    row-gap: 8px;
}

.megaCijfers dt {
    color: var(--kleurTekstZacht);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.megaCijfers dd {
    color: var(--kleurTekst);
    /* Cijfers van gelijke breedte, zodat de twee getallen onder elkaar staan. */
    font-size: var(--tekstBasis);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-align: right;
}

/*
 * Direct onder de kengetallen: die twee horen bij elkaar. Het blok erboven zet
 * ze samen tegen de onderkant van de kolom.
 */
.megaAlles {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    color: var(--kleurBlauw);
    column-gap: 10px;
    font-size: var(--tekstSm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duurSnel) ease;
}

.megaAlles:hover,
.megaAlles:focus-visible {
    color: var(--kleurBlauwDonker);
    text-decoration: underline;
    text-decoration-color: var(--kleurOranje);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.megaAllesPijl {
    width: 18px;
    height: 12px;
    flex: none;
    transition: transform var(--duurMd) var(--versnelling);
}

.megaAlles:hover .megaAllesPijl,
.megaAlles:focus-visible .megaAllesPijl {
    transform: translateX(3px);
}

/* --- Kolom 2: de tegels ------------------------------------------
 *
 * Twee lagen: .megaTegels is de witte kolom met zijn ruimte eromheen, en
 * .megaTegelRaster het raster met de haarlijnen erin. Zonder die tweede laag
 * zou de ruimte om het raster in de lijnkleur staan — zie de kop hierboven.
 * ------------------------------------------------------------------ */

.megaTegels {
    padding: var(--megaBoven) 28px;
    background-color: var(--kleurWit);
}

.megaTegelRaster {
    display: grid;
    background-color: var(--megaLijnZacht);
    gap: 1px;
    grid-template-columns: repeat(var(--megaKolommen, 3), minmax(0, 1fr));
}

.megaTegel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 13px;
    background-color: var(--kleurWit);
    color: inherit;
    row-gap: 12px;
    text-decoration: none;
    transition: background-color var(--duurSnel) ease;
}

/*
 * Het oranje streepje over de bovenkant van een tegel groeit van links open —
 * hetzelfde motief als het streepje onder een categorielink in de balk, hier
 * een kwartslag gedraaid. Eén eigenschap van A naar B, dus CSS-werk en geen
 * reden om Motion aan te spreken (baserules regel 7).
 */
.megaTegel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background-color: var(--kleurOranje);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duurMd) var(--versnelling);
}

.megaTegel:hover,
.megaTegel:focus-visible {
    background-color: var(--kleurVlak);
}

.megaTegel:hover::before,
.megaTegel:focus-visible::before {
    transform: scaleX(1);
}

/*
 * Het fotokader is hetzelfde bijna-witte verloop als op een productkaart in de
 * winkel (onderdelen/productkaart.css). De foto's uit de migratie hebben zelf
 * een witte achtergrond; op het lichtblauw van de rest van de site zou daar een
 * wit blok in beeld staan met de rand van de foto eromheen.
 */
.megaTegelBeeld {
    display: flex;
    /*
     * Een verhouding en geen vaste hoogte: het aantal kolommen volgt uit het
     * aantal tegels (zie itemData() in inc/class-samitmegamenu.php), dus is een
     * tegel bij twee categorieën ruim anderhalf keer zo breed als bij zes. Met
     * een vaste hoogte wordt het fotokader daar een brievenbus. De grenzen
     * houden hem tussen 96 en 150 pixels: daarboven wordt de band hoger dan de
     * hero eronder, en dan is het geen menu meer maar een tweede pagina.
     */
    max-height: 150px;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: var(--randMd);
    aspect-ratio: 16 / 10;
    background: linear-gradient(180deg, #fff 0%, #f7fbfd 100%);
    box-shadow: inset 0 0 0 1px var(--megaLijnZacht);
}

.megaTegelBeeld img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Een categorie zonder producten heeft geen foto om te lenen. */
.megaTegelGeenBeeld {
    width: 32px;
    height: 32px;
    color: var(--kleurTekstZacht);
    opacity: 0.45;
}

.megaTegelTekst {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    row-gap: 6px;
}

.megaTegelNaam {
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.25;
    transition: color var(--duurSnel) ease;
}

.megaTegel:hover .megaTegelNaam,
.megaTegel:focus-visible .megaTegelNaam {
    color: var(--kleurBlauwDonker);
}

.megaTegelMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: var(--kleurTekstZacht);
    column-gap: 10px;
    font-size: var(--tekstXs);
}

.megaTegelPijl {
    width: 6px;
    height: 10px;
    flex: none;
    color: var(--kleurBlauw);
    opacity: 0;
    transform: translateX(-3px);
    transition:
        opacity var(--duurSnel) ease,
        transform var(--duurMd) var(--versnelling);
}

.megaTegel:hover .megaTegelPijl,
.megaTegel:focus-visible .megaTegelPijl {
    opacity: 1;
    transform: translateX(0);
}

/*
 * De brede uitvoering: foto links, tekst rechts. Een tegel die twee of drie
 * kolommen beslaat is te breed voor een foto met de naam eronder — dan staat er
 * een plaatje van 96 pixels midden in een vlak van zevenhonderd. Welke tegel
 * dat is volgt uit de volgorde van het menu; zie itemData() in
 * inc/class-samitmegamenu.php.
 */
.megaTegelBreed {
    flex-direction: row;
    align-items: center;
    padding: 18px;
    column-gap: 24px;
}

/*
 * De foto van de brede tegel is fors groter dan die van de gewone. Zonder dat
 * verschil is de tegel die de nadruk hoort te krijgen juist de leegste van de
 * rij: een plaatje van honderd pixels in een vlak van zeshonderd, met een naam
 * ernaast en verder wit.
 */
.megaTegelBreed .megaTegelBeeld {
    width: 262px;
    max-height: none;
    height: 150px;
    flex: none;
    aspect-ratio: auto;
}

.megaTegelBreed .megaTegelTekst {
    row-gap: 10px;
}

.megaTegelBreed .megaTegelNaam {
    font-size: var(--tekstLg);
    letter-spacing: -0.012em;
}

/*
 * Op een gewone tegel staat het pijltje aan de rechterrand, want die tegel is
 * zo breed als de tekst. Op de brede tegel is dat driehonderd pixels van het
 * aantal af, en dan hoort het pijltje bij niets meer. Hier staat het er dus
 * direct achter.
 */
.megaTegelBreed .megaTegelMeta {
    justify-content: flex-start;
    column-gap: 12px;
}

/* --- Kolom 3: de vitrine ----------------------------------------- */

.megaVitrine {
    display: flex;
    flex-direction: column;
    padding: var(--megaBoven) 24px 22px;
    background-color: var(--kleurVlak);
    color: inherit;
    text-decoration: none;
}

.megaVitrineBeeld {
    display: flex;
    height: 156px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    transition: box-shadow var(--duurMd) var(--versnelling);
}

.megaVitrine:hover .megaVitrineBeeld,
.megaVitrine:focus-visible .megaVitrineBeeld {
    box-shadow: 0 12px 26px -18px rgb(15 24 74 / 45%);
}

.megaVitrineBeeld img {
    max-width: 88%;
    max-height: 134px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/*
 * De staat van het toestel. In een refurbished-webshop is dat het kenmerk waar
 * een bezoeker het eerst naar kijkt. Wit op het lichtblauwe vlak, en op één
 * regel: "Nieuw (verpakking geopend)" is de langste die de feed levert en die
 * mag niet over twee regels vallen.
 */
.megaVitrineStaat {
    max-width: 100%;
    align-self: flex-start;
    overflow: hidden;
    margin-bottom: 9px;
    padding: 4px 9px;
    border-radius: var(--randSm);
    background-color: var(--kleurWit);
    color: var(--kleurBlauwDonker);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Hoogstens twee regels. De namen uit de feed zijn lang ("HP EliteBook 840 G8 —
 * Intel Core i5-1135G7 — 512GB SSD — 16GB"), en drie regels drukken de prijs
 * uit de kolom.
 */
.megaVitrineNaam {
    display: -webkit-box;
    overflow: hidden;
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-clamp: 2;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color var(--duurSnel) ease;
}

.megaVitrine:hover .megaVitrineNaam,
.megaVitrine:focus-visible .megaVitrineNaam {
    color: var(--kleurBlauwDonker);
}

.megaVitrinePrijs {
    margin-top: 8px;
    color: var(--kleurBlauwDonker);
    font-size: var(--tekstMd);
    font-weight: 600;
}

/* Een afgeprijsd toestel: WooCommerce zet de oude prijs in een <del>. */
.megaVitrinePrijs del {
    margin-right: 7px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    font-weight: 400;
    text-decoration-thickness: 1px;
}

.megaVitrinePrijs ins {
    text-decoration: none;
}

.megaVitrineKnop {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    color: var(--kleurBlauw);
    column-gap: 9px;
    font-size: var(--tekstSm);
    font-weight: 500;
}

.megaVitrinePijl {
    width: 18px;
    height: 12px;
    flex: none;
    transition: transform var(--duurMd) var(--versnelling);
}

.megaVitrine:hover .megaVitrinePijl,
.megaVitrine:focus-visible .megaVitrinePijl {
    transform: translateX(3px);
}

/* --- De lijst ----------------------------------------------------
 *
 * Voor een menu-item waaronder geen productcategorie zit: geen foto's, geen
 * aantallen en geen prijs om een band van 1180 pixels mee te vullen. Dan een
 * gewone lijst onder het item zelf.
 * ------------------------------------------------------------------ */

.megaPaneelLijst {
    position: absolute;
    top: 100%;
    left: -6px;
    display: flex;
    min-width: 258px;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--kleurLijnPaneel);
    border-radius: var(--randLg);
    background-color: var(--kleurWit);
    box-shadow: 0 22px 44px -20px rgb(1 36 63 / 55%);
}

.megaLijstLink {
    display: block;
    padding: 9px 12px;
    border-radius: var(--randMd);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.megaLijstLink:hover,
.megaLijstLink:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
}

/* --- Smaller dan 1150 pixels -------------------------------------
 *
 * De band bestaat alleen in de desktopuitvoer — boven 1024 pixels, want daar
 * rendert samit-apparaat de categoriebalk (baserules regel 16). Tussen die
 * grens en 1150 pixels is de container te smal voor de maten hierboven: drie
 * tegels van 142 pixels met een foto van 100 hoog erin.
 * ------------------------------------------------------------------ */

@media (width <= 1150px) {
    .megaRaster {
        grid-template-columns: 196px minmax(0, 1fr) 234px;
    }

    .megaRaster--zonderVitrine {
        grid-template-columns: 196px minmax(0, 1fr);
    }

    .megaIndex {
        padding-right: 22px;
    }

    .megaIndexTitel {
        font-size: 1.25rem;
    }

    .megaTegels {
        padding-inline: 22px;
    }

    .megaTegel {
        padding: 13px 13px 11px;
    }

    .megaTegelBeeld {
        max-height: 150px;
        min-height: 84px;
    }

    .megaTegelBreed .megaTegelBeeld {
        width: 200px;
        height: 128px;
    }

    .megaVitrine {
        padding: 20px 20px 22px;
    }

    .megaVitrineBeeld {
        height: 132px;
    }

    .megaVitrineBeeld img {
        max-height: 112px;
    }
}

/*
 * Wie minder beweging vraagt, krijgt het paneel er meteen: geen fade, geen
 * verschuiving, en de streepjes en pijltjes staan in hun eindstand zodra de
 * muis erop komt.
 */
@media (prefers-reduced-motion: reduce) {
    .megaPaneel,
    .megaTegel,
    .megaTegel::before,
    .megaTegelNaam,
    .megaTegelPijl,
    .megaAlles,
    .megaAllesPijl,
    .megaVitrineBeeld,
    .megaVitrineNaam,
    .megaVitrinePijl,
    .megaLijstLink {
        transition: none;
    }
}

/* ==================================================================
 * Mobiel menupaneel
 *
 * Alleen aanwezig in de mobiele en de smalle uitvoer. Een <dialog> in plaats
 * van een eigen overlay: de browser regelt dan zelf de focusval, Escape en de
 * verduistering, en dat is minder code én beter toegankelijk.
 * ================================================================== */

/*
 * display staat op [open] en niet op het element zelf: een <dialog> zonder dat
 * attribuut is `display: none` in de browserstijl, en een eigen display-waarde
 * zet die regel buitenspel — dan staat het paneel dus altijd open in beeld.
 */
.mobielMenu[open] {
    display: flex;
}

.mobielMenu {
    max-width: 359px;
    width: 100%;
    height: 100%;
    max-height: none;
    flex-direction: column;
    margin: 0 auto 0 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
    background-color: var(--kleurWit);
    box-shadow: 0 3px 30px rgb(10 34 64 / 44%);
    color: var(--kleurTekst);
}

.mobielMenu::backdrop {
    background-color: rgb(15 24 74 / 55%);
}

/*
 * De sluitknop staat rechtsboven in het paneel en blijft daar staan als de
 * inhoud eronder scrollt. Op de bestaande site is dat een `position: fixed` met
 * een vaste `left` van 309px, wat op een scherm van 320 pixels naast het paneel
 * valt; sticky doet hetzelfde en houdt zich wel aan de paneelbreedte.
 */
.mobielMenuSluit {
    position: sticky;
    z-index: 1;
    top: 30px;
    width: 30px;
    align-self: flex-end;
    margin: 30px 30px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kleurTekst);
    line-height: 0;
}

.mobielMenuSluit svg {
    width: 19.828px;
    height: 19.828px;
}

.mobielMenuZoeken {
    padding: 20px 25px 0 35px;
}

/* Het zoekveld in het paneel staat op wit, dus het heeft een rand nodig. */
.mobielMenuZoeken .zoekVeld {
    width: 100%;
    border: 1px solid var(--kleurLijn);
}

.mobielNavLijst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 35px;
    padding: 20px 25px 30px 35px;
}

.mobielNavItem {
    width: 100%;
}

.mobielNavRij {
    display: flex;
    align-items: center;
    column-gap: var(--ruimteSm);
}

/*
 * De uitklapknop staat naast de link, niet eromheen: een categorie moet
 * aanklikbaar blijven zonder dat je hem eerst moet uitklappen. Op de bestaande
 * site is dat één element, waar de eerste tik het submenu opent en de tweede de
 * pagina laadt — wie de categorie wil, moet daar dus twee keer tikken.
 */
.mobielNavLink {
    color: inherit;
    font-size: var(--tekstBasis);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.mobielNavUitklap {
    display: flex;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--kleurTekstBalk);
}

.mobielNavUitklap svg {
    width: 4.37px;
    height: 7.621px;
    transform: rotate(90deg);
    transition: transform var(--duurMd) var(--versnelling);
}

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

/*
 * De hoogte wordt door Motion geanimeerd, dus staat er geen padding op dit
 * element: bij hoogte 0 zou die padding overblijven en zou het menu 40 pixels
 * open blijven staan. De lucht zit daarom op het eerste en het laatste item.
 */
.mobielSubNav {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
}

.mobielSubNav > li:first-child {
    padding-top: 20px;
}

.mobielSubNav > li:last-child {
    padding-bottom: 20px;
}

.mobielSubNavLink {
    color: inherit;
    font-size: var(--tekstSm);
    line-height: 1;
    text-decoration: none;
}

.mobielSubNavLink:hover,
.mobielSubNavLink:focus-visible {
    color: var(--kleurBlauw);
}

/* --- Openingsregel, voordelenblok en contactblok ------------------ */

.menuExtras {
    padding: 0 25px 75px 35px;
    color: var(--kleurTekst);
}

.openingsRegel {
    position: relative;
    margin-bottom: 36px;
    padding-bottom: 36px;
    padding-left: 20px;
    border-bottom: 1px solid var(--kleurLijnMenu);
    font-size: var(--tekstBasis);
    font-weight: 400;
    line-height: 1;
}

.openingsRegel::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: var(--randRond);
    background-color: var(--kleurGroenOpen);
}

.uspBlok {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
    padding: 20px;
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
}

.uspBlokKop {
    max-width: 161px;
    margin-bottom: 10px;
    font-size: var(--tekstMd);
    font-weight: 500;
    line-height: 1.1176;
}

.uspBlokNadruk {
    color: var(--kleurOranje);
}

.uspBlokLijst {
    display: flex;
    flex-direction: column;
    row-gap: 7px;
}

.uspBlokLijst li {
    display: flex;
    align-items: center;
    column-gap: 8.3px;
    font-size: var(--tekstSm);
    line-height: 1;
}

.uspBlokIcoon {
    width: 8.726px;
    height: 6.458px;
    flex: none;
}

/*
 * De foto valt met opzet 14 pixels buiten het blok: op de bestaande site is dat
 * een achtergrondafbeelding op een pseudo-element met dezelfde uitsnede.
 */
.uspBlokFoto {
    position: absolute;
    right: -14px;
    bottom: 0;
    width: 149px;
    height: 167px;
    object-fit: contain;
    object-position: bottom right;
}

.contactBlok {
    position: relative;
    padding: 22px 20px;
    border: 1px solid var(--kleurLijnMenu);
    border-radius: var(--randMd);
}

.contactBlokKop {
    margin-bottom: 13px;
    font-size: var(--tekstMd);
    font-weight: 500;
    line-height: 1;
}

.contactBlokLijst {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.contactBlokLijst li {
    max-width: 179px;
    padding-top: 9px;
    border-top: 1px solid var(--kleurLijnMenu);
    font-size: 0.6875rem;
    line-height: 1;
}

.contactBlokLijst a {
    color: var(--kleurTekst);
    text-decoration: underline;
}

.contactBlokLijst a:hover,
.contactBlokLijst a:focus-visible {
    color: var(--kleurBlauw);
}

.contactBlokFoto {
    position: absolute;
    top: 19.3px;
    right: -13.8px;
    width: 128.06px;
    height: 128.06px;
    object-fit: contain;
}

/* ==================================================================
 * Footer
 *
 * Eén raster met vier vlakken. Op een breed scherm staat de kaart met de
 * contactknoppen rechts over de volle hoogte, en staan het merk en de vier
 * menukolommen daar links van; onder allebei ligt de balk met het copyright, de
 * betaallogo's en de credits.
 *
 *   ┌───────────────────────┬──────────────┐
 *   │ .footerMerk           │ .footerHulp  │
 *   ├───────────────────────┤              │
 *   │ .footerKolommen       │              │
 *   ├───────────────────────┴──────────────┤
 *   │ .footerBalk                          │
 *   └──────────────────────────────────────┘
 *
 * Een raster met vaste plaatsen en geen flexrij met vier max-widths, zoals de
 * bestaande site doet: dan liggen de kolommen op één lijn en blijven de
 * tussenruimtes gelijk, ook als er een menu bij komt of afvalt. Valt de kaart
 * weg omdat er geen telefoonnummer en geen e-mailadres is, dan verdwijnt de
 * tweede kolom en houdt het raster één kolom over.
 * ================================================================== */

.siteFooter {
    position: relative;
    overflow: hidden;
    background-color: var(--kleurFooter);
    background-image: linear-gradient(180deg, var(--kleurFooter) 0%, var(--kleurFooterDiep) 100%);
    color: var(--kleurWit);
    font-size: var(--tekstSm);
    line-height: 1.6;
    isolation: isolate;
}

/* --- Het decor ---------------------------------------------------
 *
 * Dezelfde oranje gloed als de hero en het slotblok op de voorpagina, hier een
 * niveau zachter. Eén lege span en geen achtergrond op .siteFooter zelf: de
 * gloed en het verloop van het vlak zitten elkaar op één element in de weg.
 *
 * Het ruitpatroon dat hier naast stond is eruit. Op een donker vlak leest zo'n
 * raster van haarlijntjes als vuil in plaats van als textuur, en het was
 * precies wat dit vlak grauw maakte. Wat er nu ligt is één warme gloed op een
 * blauw verloop, en dat is genoeg.
 *
 * De gloed staat stil, en hij is een verloop dat op transparant eindigt — geen
 * filter: blur() en geen mix-blend-mode. Wat er beweegt mag die twee niet
 * hebben, en wat er stilstaat heeft ze hier niet nodig.
 * ------------------------------------------------------------------ */

.footerDecor {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

/*
 * Lichtblauw en niet oranje, en iets sterker dan de 13% van hiervoor omdat het
 * vlak eronder lichter is geworden.
 *
 * Die kleurwissel is een gemeten keuze, dezelfde als bij de hero en het slotblok
 * op de voorpagina: met een oranje gloed kwam de linkeronderhoek van de footer
 * op #305A6E uit — verzadiging 0,39, waar de rest van het vlak op 0,75 staat.
 * Oranje heeft geen blauw in zich, dus haalt het over blauw de verzadiging eruit.
 * De warmte in de footer komt van de oranje streepjes boven de kolomkoppen en de
 * oranje iconen in de contactknoppen.
 */
.footerGloed {
    position: absolute;
    bottom: -320px;
    left: -220px;
    width: 760px;
    height: 700px;
    border-radius: 100%;
    background-image: radial-gradient(circle, rgb(86 178 236 / 26%) 0%, rgb(86 178 236 / 0%) 68%);
}

/* --- Het raster --------------------------------------------------- */

.footerRaster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    column-gap: clamp(40px, 5vw, 76px);
    row-gap: 48px;
    padding-block: 72px 26px;
}

.footerMerk {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
}

/*
 * De kaart staat naast het merk én de kolommen, maar hij rekt niet mee met de
 * hoogte van die twee. Dat deed hij eerst wel, en omdat zijn eigen inhoud een
 * stuk korter is dan die linkerkolom bleef er een gat van negentig pixels in
 * het midden staan — tussen de openingsregel en de knoppen. Zonder de rek is de
 * kaart precies zo hoog als wat erin staat.
 */
.footerHulp {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: start;
}

.footerKolommen {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
}

.footerBalk {
    grid-row: 3;
    grid-column: 1 / -1;
}

/* --- Het merk ----------------------------------------------------- */

.footerLogo {
    display: inline-block;
    line-height: 0;
}

.footerLogo img,
.footerLogo svg {
    width: auto;
    height: 34px;
}

.footerClaim {
    max-width: 44ch;
    margin-top: 22px;
    color: var(--kleurFooterTekst);
    font-size: var(--tekstBasis);
    line-height: 1.7;
}

.footerAdres {
    margin-top: 14px;
    color: var(--kleurFooterTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.7;
}

/* --- De kaart met de contactknoppen -------------------------------
 *
 * Waar de kaart in het raster staat, staat hierboven bij *Het raster*; hier
 * staat alleen hoe hij eruitziet.
 *
 * De vulling is doorzichtig wit en geen `backdrop-filter`: boven op een vlak dat
 * toch al een verloop is zie je het verschil alleen als je de twee naast elkaar
 * legt, en een backdrop-filter kost elke frame werk.
 * ------------------------------------------------------------------ */

.footerHulp {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--kleurLijnFooter);
    border-radius: var(--randLg);
    background-image: linear-gradient(152deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 3%) 100%);
}

/*
 * De foto staat rechtsboven náást de kop en niet over de knoppen heen, dus houdt
 * dit blok er ruimte voor vrij. De ruimte rechts is die van de foto plus twaalf
 * pixels. Nauwer kan niet: de
 * kop heeft 193 pixels nodig en de openingsregel 184, en dat zijn de twee regels
 * die niet mogen afbreken — een kop van twee regels naast een foto van 88 pixels
 * laat de kaart scheef staan. De minimumhoogte is die van de foto, zodat de
 * knoppen er nooit onder komen te staan.
 */
.footerHulpTekst {
    min-height: 84px;
    padding-right: 92px;
}

.footerHulpKop {
    font-size: var(--tekstLg);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.footerOpen {
    position: relative;
    margin-top: 10px;
    padding-left: 17px;
    color: var(--kleurFooterTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.5;
}

/*
 * Het groene bolletje voor de openingsregel, met een ring eromheen — hetzelfde
 * teken als in het mobiele menu, hier op donker. Een pseudo-element en geen
 * tweede afbeelding: dat is negen pixels, daar hoort geen HTTP-verzoek bij.
 */
.footerOpen::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: var(--randRond);
    background-color: var(--kleurGroen);
    box-shadow: 0 0 0 3px rgb(8 184 21 / 22%);
}

/*
 * Het beeld is een portret dat in de bron bij de hals ophoudt, dus zou er een
 * kaarsrechte streep onder zijn kin staan. Hetzelfde verloopmasker als bij Sam
 * in de hero laat hem uitdoven in plaats van afgesneden worden. De lege
 * transparante rand die om dit bestand heen zat is eruit getrimd — die zette
 * het beeld acht pixels lager dan zijn kader en liet er negentien onderaan
 * leeg, en dan staat niets meer op één lijn met de kop ernaast.
 */
.footerHulpFoto {
    position: absolute;
    top: 16px;
    right: 22px;
    width: 76px;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
}

/*
 * De knoppen staan direct onder de kop met een scheidingslijn ertussen. Hier
 * stond `margin-top: auto` om ze naar de onderkant van een uitgerekte kaart te
 * duwen; die rek is er nu af (zie .footerHulp), dus zou dat alleen nog het gat
 * terugbrengen dat het moest oplossen.
 */
.footerActies {
    display: grid;
    margin-top: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--kleurLijnFooter);
    row-gap: 12px;
}

.footerActie {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--kleurLijnFooter);
    border-radius: 10px;
    background-color: rgb(255 255 255 / 6%);
    color: inherit;
    column-gap: 12px;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease;
}

.footerActie:hover,
.footerActie:focus-visible {
    border-color: rgb(255 255 255 / 26%);
    background-color: rgb(255 255 255 / 12%);
}

/*
 * Het vlakje is doorzichtig wit en het icoon erin oranje, en niet andersom.
 * Oranje op lage dekking over dit diepblauw wordt olijfgroen: die kleur heeft
 * geen blauw in zich, dus blijft het blauw van de achtergrond staan. Wit maakt
 * het vlak alleen lichter, en dáárop is het oranje icoon meteen oranje.
 */
.footerActieIcoon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    background-color: rgb(255 255 255 / 10%);
    color: var(--kleurOranje);
    place-items: center;
}

.footerActieIcoon svg {
    width: 15px;
    height: 15px;
}

.footerActieTekst {
    min-width: 0;
}

.footerActieLabel {
    display: block;
    color: var(--kleurFooterTekstZacht);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.footerActieWaarde {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footerActiePijl {
    width: 5px;
    height: 8px;
    flex: none;
    margin-left: auto;
    color: rgb(255 255 255 / 45%);
    transition: transform var(--duurMd) var(--versnelling);
}

.footerActie:hover .footerActiePijl {
    transform: translateX(3px);
}

/* --- De vier menukolommen ----------------------------------------
 *
 * Vier kolommen naast elkaar, want vier menu's van drie tot vijf items zijn even
 * zwaar. De kop is een labeltje in de vormentaal van de rest van de site — klein
 * en met een oranje streepje — en dus juist kleiner dan de links eronder. Op de
 * bestaande site is die kop 20 pixels en de link 13, waardoor het oog de kolom
 * leest als een titel met een voetnoot.
 * ------------------------------------------------------------------ */

/*
 * `auto` en niet `1fr`: vier gelijke kolommen laten "Merken" met drie korte
 * items een gat van tweehonderd pixels naast zich houden. Met auto-sporen en
 * space-between krijgt elke kolom de breedte van zijn langste link en gaat de
 * ruimte die overblijft naar de tussenruimtes — de laatste kolom eindigt dan op
 * de rechterrand van dit vlak. Wordt een menu-item ooit te lang, dan kan een
 * auto-spoor nog krimpen en breekt de tekst af; max-content zou dat niet doen.
 */
/*
 * Vier gelijke kolommen, en dat is het hele punt van dit raster. Hier stond
 * `repeat(4, auto)` met `space-between`: dan is elke kolom zo breed als zijn
 * eigen langste link en wordt de ruimte die overblijft ertussen verdeeld. Het
 * resultaat waren vier ongelijke kolommen met ongelijke tussenruimtes — op
 * 900 pixels 144, 151, 135 en 55 breed — en dat is precies de indeling die de
 * bestaande site heeft en die hier rechtgetrokken hoort te zijn (zie de kop van
 * dit hoofdstuk). Met `1fr` staan de koppen én de links van alle vier de
 * kolommen op één raster.
 */
.footerKolommen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 34px;
}

.footerKop {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

/* Het oranje streepje boven de kop, en niet ernaast: naast de kop zou de tekst
   van de kop niet meer op één lijn staan met de links eronder. */
.footerKop::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-bottom: 16px;
    border-radius: 2px;
    background-color: var(--kleurOranje);
}

.footerLijst {
    margin-top: 18px;
}

.footerLijst li + li {
    margin-top: 11px;
}

.footerLink {
    color: var(--kleurFooterTekst);
    text-decoration: none;
    transition: color var(--duurSnel) ease;
}

/*
 * De onderstreping is oranje en staat vier pixels lager. Geen verschuiving van
 * de tekst zelf bij hover: een lijstje van vijf links waarin er telkens één
 * opzij springt, leest als een storing.
 */
.footerLink:hover,
.footerLink:focus-visible {
    color: var(--kleurWit);
    text-decoration: underline;
    text-decoration-color: var(--kleurOranje);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

/* --- De balk onderaan --------------------------------------------- */

.footerBalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
    border-top: 1px solid var(--kleurLijnFooter);
    gap: 16px 32px;
    color: var(--kleurFooterTekstZacht);
    font-size: var(--tekstXs);
}

/*
 * Copyright, KvK en btw op één regel, met een puntje ertussen. Het puntje staat
 * in CSS: het is een scheidingsteken en geen inhoud, dus een schermlezer hoeft
 * het niet voor te lezen en het komt niet mee bij kopiëren.
 */
.footerFijn {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
}

.footerFijn li + li::before {
    margin-right: 10px;
    color: rgb(255 255 255 / 30%);
    content: "·";
}

.betaalMethoden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 7%);
    column-gap: 18px;
    row-gap: 8px;
}

.betaalIcoon {
    flex: none;
}

/*
 * Het slotje met "Altijd veilig betalen" staat in dezelfde pil als de logo's,
 * achter een streepje. Zo is het één blok in de balk in plaats van twee losse
 * dingen die elk hun eigen ruimte vragen.
 */
.betaalVeilig {
    display: flex;
    align-items: center;
    padding-left: 18px;
    border-left: 1px solid rgb(255 255 255 / 16%);
    color: var(--kleurFooterTekst);
    font-weight: 400;
}

.betaalVeiligIcoon {
    width: 9px;
    height: 12px;
    flex: none;
    margin-right: 8px;
}

.footerCredits p {
    margin: 0;
}

.footerCredits a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duurSnel) ease;
}

.footerCredits a:hover,
.footerCredits a:focus-visible {
    color: var(--kleurWit);
    text-decoration: underline;
    text-decoration-color: var(--kleurOranje);
    text-underline-offset: 4px;
}

/* ==================================================================
 * Inhoudsgebied
 * ================================================================== */

/*
 * De front-page zet deze marge op 0: daar begint de hero direct onder de header,
 * met zijn eigen padding. De andere templates hebben hem wel nodig.
 */
.siteInhoud {
    display: block;
    padding-top: var(--ruimteXl);
}

/* ==================================================================
 * Losse elementen in de header
 * ================================================================== */

/*
 * De laatste terugval van het logo: de sitenaam als tekst, als er geen logo in
 * de customizer staat én het SVG-bestand niet te lezen is.
 *
 * Twee kleuren, want deze tekst staat op twee achtergronden: in de header op de
 * witte balk en in de footer op het blauwe vlak. Het gekleurde en het witte
 * SVG-logo lossen dat met twee bestanden op (zie samitLogoAfbeelding); tekst
 * heeft daar geen bestand voor nodig.
 */
.siteLogoTekst {
    color: var(--kleurTekst);
    font-size: var(--tekstLg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.footerLogo .siteLogoTekst {
    color: var(--kleurWit);
}

/* ==================================================================
 * Melding van de apparaatweergave
 *
 * Verschijnt alleen als het venster tijdens het bezoek voorbij het breekpunt
 * gaat, dus als de gerenderde uitvoer niet meer bij het scherm past. Zie de
 * mu-plugin samit-apparaat.
 * ================================================================== */

.apparaatMelding {
    position: fixed;
    z-index: 500;
    right: var(--ruimteMd);
    bottom: var(--ruimteMd);
    left: var(--ruimteMd);
    display: flex;
    max-width: 460px;
    align-items: center;
    gap: var(--ruimteMd);
    margin-inline: auto;
    padding: 0.75rem var(--ruimteMd);
    border-radius: var(--randMd);
    background-color: var(--kleurTekst);
    box-shadow: var(--schaduwLg);
    color: var(--kleurWit);
    font-size: var(--tekstSm);
}

.apparaatMeldingKnop {
    flex: none;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--randMd);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
    font-size: var(--tekstXs);
    font-weight: 500;
}

.apparaatMeldingSluit {
    flex: none;
    padding: 0 0.25rem;
    border: 0;
    color: rgb(255 255 255 / 70%);
    font-size: 1.125rem;
    line-height: 1;
}

.apparaatMeldingSluit:hover,
.apparaatMeldingSluit:focus-visible {
    color: var(--kleurWit);
}

/* ==================================================================
 * Toegankelijkheid en WordPress-uitvoer
 *
 * Deze klassen stonden eerst in style.css. Dat bestand wordt niet ingeladen
 * (baserules regel 4), waardoor .screenReaderText geen opmaak had en elke
 * verborgen linktekst zichtbaar in de pagina stond. Ze horen hier: het is
 * opmaak die op elke pagina nodig is.
 * ================================================================== */

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

/*
 * Skiplink: onzichtbaar tot hij focus krijgt, dan linksboven in beeld. Een
 * toetsenbordgebruiker moet de hele navigatie kunnen overslaan.
 */
.screenReaderText:focus {
    z-index: 100000;
    top: 0.5rem;
    left: 0.5rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1.25rem;
    clip-path: none;
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwMd);
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    text-decoration: none;
}

/* Uitlijnklassen uit de klassieke editor en uit wp_get_attachment_image(). */
.alignleft {
    float: left;
    margin: 0 var(--ruimteLg) var(--ruimteMd) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--ruimteMd) var(--ruimteLg);
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.alignnone {
    margin: 0;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: var(--ruimteLg);
}

.wp-caption img {
    display: block;
}

.wp-caption-text,
.galleryCaption {
    margin: var(--ruimteSm) 0 0;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
}

/* Klassen die WordPress op <body> of op een post zet. */
.stickyPost {
    border-left: 4px solid var(--kleurOranje);
}

.byPostAuthor {
    font-weight: 500;
}

/* ==================================================================
 * Responsief
 *
 * Alleen maten die binnen één weergave meebewegen. Elementen die bij een
 * schermbreedte niet horen zijn er niet: die worden server-side niet gerenderd
 * (baserules regel 16). De grenzen hieronder zijn dezelfde als op de bestaande
 * site, en 1024 en 767 zijn ook de twee grenzen in samitApparaat — wijken die
 * af, dan krijgt een bezoeker rond die breedte de ene HTML met de andere CSS.
 * ================================================================== */

/*
 * De rail is de rij die het eerst te vol wordt: telefoonnummer, twee USP-regels
 * en twee snelkoppelingen. Onder 1140 pixels krimpen de tussenruimtes mee.
 */
@media (width <= 1140px) {
    .topBarInner,
    .topBarRechts,
    .uspLijst {
        column-gap: 18px;
    }

    .railLinks {
        column-gap: 16px;
    }
}

@media (width <= 1080px) {
    :root {
        --tekstH1: 2.125rem;
        --tekstH2: 1.5rem;
    }

    /*
     * Zes categorieën lopen onder 1080 pixels van de balk af. De ruimte komt uit
     * de padding van de links, zodat de tekst blijft staan waar hij staat — en
     * het streepje eronder schuift mee, want dat rekent met dezelfde waarde.
     */
    .navLink {
        padding-inline: 10px;
    }

    .navLink::after {
        right: 10px;
        left: 10px;
    }

    .navLijst {
        column-gap: 2px;
        margin-inline: -10px 10px;
    }
}

/* --- Footer: de kaart gaat onder het merk staan --------------------
 *
 * De kaart naast vier kolommen van 176 pixels past hier niet meer, dus komt hij
 * onder het merk te staan — in de DOM staat hij daar al achter, dus dat is de
 * volgorde die het raster van zichzelf aanhoudt. Hij houdt een maximum: over de
 * volle breedte van 900 pixels zouden twee knoppen in een leeg vlak staan.
 * ------------------------------------------------------------------- */

@media (width <= 1024px) {
    .footerRaster {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
        padding-block: 60px 24px;
    }

    .footerMerk,
    .footerHulp,
    .footerKolommen,
    .footerBalk {
        grid-row: auto;
        grid-column: 1;
    }

    /*
     * De volle breedte, gelijk aan het merk, de kolommen en de balk eronder. Hij
     * stond op 700 pixels omdat de kaart toen uitgerekt werd en er twee knoppen
     * in een leeg vlak stonden; nu hij om zijn inhoud sluit is een kaart die 160
     * pixels smaller is dan alles eronder juist wat er scheef uitziet.
     */
    .footerHulp {
        max-width: none;
    }

    /* Op deze breedte is er ruimte voor de twee knoppen naast elkaar. */
    .footerActies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
    }
}

/* --- Onder 768: de mobiele balk en de gestapelde footer ----------- */

@media (width <= 767px) {
    :root {
        --ruimte2xl: 2.5rem;
        --ruimteXl: 1.75rem;
    }

    /*
     * Drie dingen in de balk: de menuknop links, de winkelwagen rechts en het
     * logo daartussen. Met een automatische marge aan beide kanten valt het
     * logo precies in het midden van wat er overblijft, ook als de twee knoppen
     * niet even breed zijn.
     */
    .headerContainer {
        column-gap: 12px;
    }

    .siteLogo {
        margin-inline: auto;
    }

    .siteLogo img,
    .siteLogo svg {
        height: 30px;
    }

    /*
     * Alleen het icoon: het woord ernaast staat als schermlezertekst in de HTML.
     * De knop wordt daarmee een rondje van 40, even groot als de menuknop aan de
     * andere kant — en groeit als er een aantal in staat.
     */
    .winkelwagenKnop {
        min-width: 40px;
        padding-inline: 11px;
        column-gap: 7px;
    }

    .winkelwagenIcoon {
        width: 16px;
        height: 13.692px;
    }

    .winkelwagenAantal {
        min-width: 18px;
        height: 18px;
        padding-inline: 5px;
    }

    /*
     * Twee menukolommen in plaats van vier, en links uitgelijnd. Niet
     * gecentreerd, zoals de bestaande site doet: bij een gecentreerde lijst
     * begint elke regel op een andere plek, en dan is een kolom van vijf links
     * niet meer als kolom te lezen.
     */
    .footerRaster {
        row-gap: 36px;
        padding-block: 52px 22px;
    }

    .footerKolommen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: normal;
        column-gap: 24px;
        row-gap: 30px;
    }

    .footerHulp {
        max-width: none;
        padding: 24px;
    }

    /* Zonder foto ernaast mag de kop de volle breedte hebben. */
    .footerHulpTekst {
        min-height: 0;
        padding-right: 0;
    }

    /*
     * De kaart is hier zo hoog als zijn inhoud, dus `margin-top: auto` levert
     * geen ruimte op en staat de streep vlak onder de openingsregel.
     */
    .footerActies {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 6px;
        padding-top: 20px;
    }

    .footerLogo img,
    .footerLogo svg {
        height: 30px;
    }

    .footerClaim {
        margin-top: 18px;
    }

    .footerBalk {
        justify-content: flex-start;
        padding-top: 22px;
        gap: 18px 24px;
    }

    .betaalMethoden {
        justify-content: flex-start;
        column-gap: 14px;
    }

    /*
     * Vijf logo's plus de tekst passen hier niet op één regel, dus valt de tekst
     * op een tweede. Dan hoort het streepje ervoor er niet meer te staan: dat
     * scheidt twee dingen die niet meer naast elkaar staan.
     */
    .betaalVeilig {
        padding-left: 0;
        border-left: 0;
    }
}

@media (width <= 560px) {
    :root {
        --tekstH1: 1.75rem;
    }
}

/* ==================================================================
 * Print
 * ================================================================== */

@media print {
    .siteHeader,
    .siteFooter,
    .mobielMenu {
        display: none;
    }

    body {
        color: #000;
        font-size: 11pt;
    }
}