/* ---------------------------------------------------------------------------
 * main.css — ontwerptokens, basistypografie, header en footer (baserules 6)
 *
 * Op elke pagina, na reset.css en fonts.css. Wat bij één template hoort gaat
 * in inc/css/<template>.css (baserules 8); welke dat is zegt bg_templateNaam()
 * in inc/assets.php.
 *
 * DE TOKENS KOMEN UIT HET ONTWERP
 * -------------------------------
 * Uitgelezen uit Claude Design, project 'Boxspring Gekte website redesign',
 * vooral 'Boxspring Gekte v2' (de homepage) — niet uit het bijgevoegde
 * 'Modernist'-systeem, dat de pagina's niet volgen. Het ontwerp schrijft alles
 * inline; hier staat elke waarde één keer, met een naam. Waar het ontwerp
 * tien bijna-gelijke waarden had (hoeken 6–32px, vijf grijzen) is er een
 * kleinere reeks van gemaakt; staat er in een template toch een andere
 * waarde nodig, zet hem dan hier erbij en niet los in dat bestand.
 *
 * TWEE AFWIJKINGEN, OM DE TOEGANKELIJKHEID
 * ----------------------------------------
 *   focus    het ontwerp heeft 3px #2aa585. Op de ondergrond #f1f7f5 is dat
 *            2,85:1 — onder de 3:1 die WCAG 1.4.11 vraagt. --kleurFocus is
 *            #1e8f71 (3,7:1 op de ondergrond, 4,0:1 op wit).
 *   knoppen  wit op #2aa585 is 3,1:1. Dat mag alleen voor grote tekst
 *            (≥ 19px vet). De groene knoppen in het ontwerp hebben 15–16px
 *            vet: daar is --kleurActieDiep (#1e5b4c, 7,9:1) de veilige keus,
 *            of inkt op groen (6,0:1). Beslissen bij de eerste knop; zie
 *            OPZET-V2.md.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

:root {
    /* — Kleur ------------------------------------------------------------- */

    /* Ondergrond en vlakken */
    --kleurGrond:        #f1f7f5;   /* de pagina: licht mintgrijs */
    --kleurWit:          #ffffff;   /* kaarten, header, invoer */
    --kleurVlak:         #eaf0ee;   /* neutraal vlak op de ondergrond */
    --kleurMint:         #e3f4ee;   /* groen getint vlak, cadeauregels */
    --kleurMintRand:     #cfe6dd;

    /* Tekst */
    --kleurInkt:         #141414;   /* koppen, lopende tekst, zwarte knop */
    --kleurTekst:        #141414;   /* dezelfde; de naam is er voor style.css */
    --kleurTekstZacht:   #4a4740;   /* inleidingen, uitleg (8,9:1 op wit) */
    --kleurTekstMeta:    #5f5c55;   /* datums, specregels (6,2:1 op de grond) */
    --kleurTekstStil:    #8a8780;   /* alleen ≥ 18px of decoratief: 3,6:1 */

    /* Groen: één familie */
    --kleurActie:        #2aa585;   /* het accent: vlakken, iconen, kopaccent */
    --kleurActieHover:   #1e8f71;
    --kleurActieDiep:    #1e5b4c;   /* USP-balk, donkere vlakken, tekst op mint */
    --kleurActieLicht:   #5cc8a6;   /* vinkjes en accent óp donker */
    --kleurActieRing:    rgb(42 165 133 / .25);

    /* Randen */
    --kleurRand:         #dfe5e3;
    --kleurRandSterk:    #cfd6d4;   /* invoervelden, filtervakjes */

    /* Geel: stickers, sterren, de aanbiedingsbadge */
    --kleurGeel:         #ffd23f;
    --kleurGeelDiep:     #f2b705;
    --kleurGeelVlak:     #fff6d6;

    /* Melding */
    --kleurFout:         #b3261e;

    /* Footer */
    --kleurFooter:       #141414;
    --kleurFooterTekst:  #b9c0be;   /* 9,9:1 op de footer */

    /* Focus — zie de kop */
    --kleurFocus:        #1e8f71;

    /* — Letter ------------------------------------------------------------ */

    --fontTekst:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fontKop:    var(--fontTekst);
    --fontAccent: 'Sedgwick Ave', 'Segoe Print', 'Bradley Hand', cursive;

    /* Groottes. Het ontwerp schrijft px; hier rem (16px = 1rem), zodat een
       grotere standaardletter in de browser meeschaalt. */
    --maatMini:    .8125rem;  /* 13px — labels, voetnoten */
    --maatKlein:   .875rem;   /* 14px */
    --maatTekst:   1rem;      /* 16px — de lopende tekst */
    --maatGroot:   1.125rem;  /* 18px — inleidingen */
    --maatKaart:   1.375rem;  /* 22px — kaarttitels */
    --maatH3:      clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);  /* 26–36px */
    --maatH2:      clamp(2rem, 1.3rem + 2.2vw, 3rem);         /* 32–48px */
    --maatH1:      clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);    /* 36–56px */
    --maatHero:    clamp(3rem, 1.6rem + 4.4vw, 5.5rem);       /* 48–88px, alleen de homepage */

    --spatieKop:   -.035em;   /* letter-spacing op koppen */
    --spatieHero:  -.055em;
    --spatieLabel: .04em;     /* labels in kapitalen */

    --regelTekst:  1.55;
    --regelKop:    1.05;

    /* — Ruimte en maat ---------------------------------------------------- */

    --ruimte1: .25rem;
    --ruimte2: .5rem;
    --ruimte3: .75rem;
    --ruimte4: 1rem;
    --ruimte5: 1.5rem;
    --ruimte6: 2rem;
    --ruimte7: 3rem;
    --ruimte8: 4.5rem;
    --ruimte9: 7rem;

    --breedteMax:   1280px;
    --goot:         clamp(1.25rem, 4vw, 3rem);   /* zijmarge, 20–48px */
    --breedteTekst: 60ch;

    /* Hoeken. Het ontwerp gebruikt 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28
       en 32px; dit zijn er vijf. Pillen voor knoppen en chips. */
    --hoekKlein:  8px;    /* badges, kleine vakjes */
    --hoek:       16px;   /* kaarten, invoer */
    --hoekGroot:  24px;   /* blokken, lades */
    --hoekVlak:   32px;   /* grote vlakken: hero, keuzehulp, donkere banden */
    --hoekPil:    999px;

    /* Schaduwen — de zachte, groen getinte uit het ontwerp */
    --schaduwHeader: 0 1px 0 var(--kleurRand);
    --schaduwHeaderVast: 0 1px 0 var(--kleurRand), 0 10px 30px rgb(20 60 50 / .08);
    --schaduwKaart:  0 24px 48px rgb(20 40 35 / .12), 0 0 0 1px var(--kleurVlak);
    --schaduwKnop:   0 10px 24px rgb(42 165 133 / .3);
    --schaduwPil:    0 2px 8px rgb(0 0 0 / .08);    /* actieve pil in een schakelaar */
    --schaduwLade:   0 0 60px rgb(0 0 0 / .18);
    --schaduwBalk:   0 -1px 0 var(--kleurRand), 0 -12px 30px rgb(20 60 50 / .08);

    /* Beweging */
    --curve:          cubic-bezier(.2, .7, .2, 1);
    --curveVeer:      cubic-bezier(.3, 1.5, .5, 1);   /* stickers, badges */
    --overgang:       200ms var(--curve);
    --overgangTraag:  600ms var(--curve);
    --overgangLade:   320ms cubic-bezier(.2, .8, .2, 1);

    /* Header. Zodra de header plakt, meet een script hem en zet
       --hoogteHeaderPlak inline op <html>; dit is de terugval. */
    --hoogteHeaderPlak: 8rem;
    --plakBoven:        calc(var(--hoogteHeaderPlak) + var(--ruimte4));
}

/* --------------------------------------------------------------------------
 * Basis
 *
 * Het ontwerp zet geen regelhoogte op de body ('normal') en geeft elk blok
 * tekst zijn eigen; hier dus ook. Koppen krijgen hun maat per blok in de CSS
 * van de template — de reset zet ze op de lettergrootte van hun ouder.
 *
 * LET OP BIJ HET OVERNEMEN UIT HET ONTWERP: daar staat geen box-sizing, dus
 * alles is content-box. Hier is alles border-box (reset.css). Een breedte of
 * hoogte uit het ontwerp met padding of een rand erbij moet dus opgeteld
 * worden: 'min-height:600px; padding:48px' is hier 696px. Bij een <button>
 * niet — die is in de browser al border-box.
 * -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--plakBoven);
}

body {
    background: var(--kleurGrond);
    color: var(--kleurTekst);
    font-family: var(--fontTekst);
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
    outline: 3px solid var(--kleurFocus);
    outline-offset: 2px;
}

::selection {
    background: var(--kleurMint);
    color: var(--kleurInkt);
}

/* De binnenbreedte: 1280px tekst met een goot die meeschaalt. */
.binnen {
    width: 100%;
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin-inline: auto;
    padding-inline: var(--goot);
}

/* Het deel van een kop in handschrift (bg_kopAccent()). */
.kopAccent {
    display: inline-block;
    font-family: var(--fontAccent);
    font-weight: 400;
    font-size: .92em;
    letter-spacing: 0;
    color: var(--kleurActie);
    white-space: nowrap;
}

.icoon {
    flex-shrink: 0;
}

.sterren {
    display: inline-block;
    color: var(--kleurGeel);
    letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
 * Knoppen en labels die op meer pagina's terugkomen
 * -------------------------------------------------------------------------- */

.knopGroen,
.knopZwart,
.knopRand {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    border-radius: var(--hoekPil);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--overgang), color var(--overgang);
}

.knopGroen {
    height: 58px;
    padding: 0 30px;
    background: var(--kleurActie);
    color: var(--kleurWit);
    font-size: 18px;
}

.knopGroen:hover {
    background: var(--kleurActieHover);
    color: var(--kleurWit);
}

.knopZwart {
    height: 52px;
    padding: 0 24px;
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.knopZwart:hover {
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

.knopRand {
    height: 52px;
    padding: 0 26px;
    border: 2px solid var(--kleurInkt);
    font-size: 16px;
}

.knopRand:hover {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.tekstLink {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Het gele pillabel met een glinstering ervoor ('Zo gaat het'). */
.pilLabel {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurGeel);
    color: var(--kleurInkt);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

.rondePijl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--kleurActie);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * De lichte band bovenaan een pagina: kruimelpad, kop, inleiding
 *
 * Komt in het ontwerp op acht pagina's terug (Stofstalen, Zoekresultaten,
 * Klantenservice, Over ons, Categorie, Blog, Mijn account, Veelgestelde
 * vragen), elke keer met dezelfde band, hetzelfde kruimelpad en dezelfde kop.
 * Alleen de ruimte onder de band verschilt per pagina, en die zet de CSS van
 * de template (.stalenBand, .zoekKop …). Het kruimelpad schrijft
 * bg_kruimelpad() in inc/weergave.php.
 * -------------------------------------------------------------------------- */

.paginaBand {
    background: linear-gradient(180deg, var(--kleurMint) 0%, var(--kleurGrond) 100%);
}

.paginaBandBinnen {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 22px;
}

.kruimel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--kleurTekstMeta);
    font-size: 14px;
}

/* In het ontwerp staat de kleur inline op de link, dus kleurt hij niet mee
   bij hover. */
.kruimel a,
.kruimel a:hover {
    color: var(--kleurTekstMeta);
}

.kruimelHier {
    color: var(--kleurInkt);
    font-weight: 600;
}

.paginaKop {
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
 * De balk boven de header
 * -------------------------------------------------------------------------- */

.topBalk {
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

.topBalkBinnen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 28px;
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 9px var(--goot);
    font-size: 13px;
    font-weight: 500;
}

.topBalkLijst {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.topBalkPunt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topBalkPunt .icoon {
    color: var(--kleurActieLicht);
}

.topBalkScore {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kleurWit);
}

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

/* Ontwerp: wit vlakje met padding 2px 5px om een logo van 14px → 24 × 18. */
.topBalkLogo {
    display: flex;
    padding: 2px 5px;
    border-radius: 6px;
    background: var(--kleurWit);
}

.googleLogo {
    display: block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * De header
 * -------------------------------------------------------------------------- */

.siteHeader {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(255 255 255 / .97);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--kleurRand);
    transition: box-shadow var(--overgang);
}

.siteHeader.isGescrold {
    box-shadow: var(--schaduwHeaderVast);
}

.headerRij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px clamp(12px, 2.5vw, 28px);
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 12px var(--goot) 8px;
}

.headerHamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--kleurGrond);
    color: var(--kleurInkt);
}

.siteLogo {
    display: flex;
    flex-shrink: 0;
}

.siteLogoBeeld {
    width: auto;
    height: 44px;
}

.siteLogoTekst {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
}

/* Het zoekveld (searchform.php) */
.zoekVak {
    position: relative;
    display: flex;
    flex: 1 1 200px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 52px;
    padding: 0 6px 0 18px;
    border: 2px solid transparent;
    border-radius: var(--hoekPil);
    background: var(--kleurVlak);
    transition: border-color .2s, background .2s;
}

.zoekVak:hover,
.zoekVak:focus-within {
    border-color: var(--kleurActie);
    background: var(--kleurWit);
}

.zoekIcoon {
    color: var(--kleurTekstMeta);
}

.zoekVeld {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--kleurInkt);
    font-size: 16px;
}

.zoekLijst {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    padding: 8px;
    overflow: auto;
    border-radius: 20px;
    background: var(--kleurWit);
    box-shadow: 0 24px 48px rgb(20 40 35 / .18), 0 0 0 1px var(--kleurVlak);
}

.zoekLijst[hidden] {
    display: none;
}

.zoekGroepKop {
    padding: 8px 12px 4px;
    color: var(--kleurTekstStil);
    font-size: 13px;
    font-weight: 700;
}

.zoekChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px 10px;
}

.zoekChip {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurGrond);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 600;
    transition: background .15s;
}

.zoekChip:hover,
.zoekChip[aria-selected="true"] {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.zoekRegel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--kleurInkt);
    transition: background .15s;
}

.zoekRegel:hover,
.zoekRegel[aria-selected="true"] {
    background: var(--kleurGrond);
    color: var(--kleurInkt);
}

.zoekRegel .icoon {
    color: var(--kleurTekstStil);
}

.zoekDuim {
    flex-shrink: 0;
    width: 52px;
    height: 42px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--kleurVlak);
}

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

.zoekNaam {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 15px;
}

.zoekNaam strong {
    font-weight: 700;
}

.zoekNaam span {
    color: var(--kleurTekstMeta);
    font-size: 13px;
}

.zoekPrijs {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.zoekGeen {
    padding: 14px 12px;
    color: var(--kleurTekstZacht);
    font-size: 15px;
}

.zoekAlles {
    justify-content: space-between;
    margin-top: 4px;
    border-top: 2px solid var(--kleurGrond);
    border-radius: 0 0 12px 12px;
    color: var(--kleurActieDiep);
    font-weight: 700;
}

/* Service, inloggen, winkelwagen */
.headerActies {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
}

.headerActie {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wagenKnop {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px 0 6px;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    color: var(--kleurWit);
    font-size: 16px;
    font-weight: 700;
    transition: transform .15s;
}

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

.wagenKnop:active {
    transform: scale(.96);
}

.wagenKnopRond {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--kleurWit);
    color: var(--kleurActieDiep);
}

.wagenKnopAantal {
    position: absolute;
    top: -5px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--hoekPil);
    background: var(--kleurGeel);
    color: var(--kleurInkt);
    font-size: 13px;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
 * Smal en breed
 *
 * Het ontwerp schakelt op de vensterbreedte: tot en met 760px (47,5rem) is
 * het de telefoon. Beide varianten van de header staan in de bron
 * (header.php); .alleenSmal en .alleenBreed kiezen. Ook als je het venster
 * smaller maakt zonder te herladen.
 * -------------------------------------------------------------------------- */

@media (width > 47.5rem) {
    .alleenSmal {
        display: none !important;
    }
}

@media (max-width: 47.5rem) {
    .alleenBreed {
        display: none !important;
    }

    /* Eén belofte, in het midden. */
    .topBalkBinnen {
        justify-content: center;
    }

    .headerRij {
        padding: 10px clamp(16px, 4vw, 48px);
    }

    .siteLogoBeeld {
        height: 36px;
    }

    .zoekVak {
        flex-basis: 100%;
        order: 3;
    }

    /* Alleen de iconen; de woorden blijven voor schermlezers. */
    .headerActieTekst,
    .wagenKnopTotaal {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wagenKnop {
        padding: 0 6px;
    }
}

/* Onder 352px (kleine Androids, de eerste iPhone SE) past hamburger, logo,
   iconen en winkelwagen met de maten van het ontwerp niet meer op één regel
   en zakten de iconen naar een tweede. Dan iets krapper. */
@media (max-width: 22rem) {
    .headerRij {
        column-gap: 10px;
    }

    .headerActies {
        gap: 10px;
    }

    .siteLogoBeeld {
        height: 30px;
    }
}

/* --------------------------------------------------------------------------
 * De menubalk en het megamenu (breder dan 760px, .alleenBreed)
 *
 * Het paneel hangt aan de header (die is sticky, dus gepositioneerd) en niet
 * aan het item: daardoor valt het buiten de overflow van de balk, die op een
 * smal venster horizontaal schuift. Open op hover en op focus-within, zodat
 * het met het toetsenbord net zo werkt; navigatie.js voegt Escape toe.
 * -------------------------------------------------------------------------- */

.navRij {
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 0 var(--goot);
}

.navLijst {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 16px;
    font-weight: 600;
}

.navLink {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 11px;
    color: var(--kleurInkt);
    white-space: nowrap;
}

.navLink::after {
    content: "";
    position: absolute;
    right: 11px;
    bottom: 5px;
    left: 11px;
    height: 3px;
    border-radius: 3px;
    background: var(--kleurActie);
    transform: scaleX(0);
    transition: transform .3s var(--curve);
}

.navPijl {
    transition: transform .25s;
}

.navItem:hover > .navLink,
.navItem:focus-within > .navLink,
.navLink.isHuidig {
    color: var(--kleurActieDiep);
}

.navItem:hover > .navLink::after,
.navItem:focus-within > .navLink::after,
.navLink.isHuidig::after {
    transform: scaleX(1);
}

.navItem.heeftMega:hover .navPijl,
.navItem.heeftMega:focus-within .navPijl {
    transform: rotate(180deg);
}

.megaPaneel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    background: var(--kleurWit);
    box-shadow: 0 24px 48px rgb(20 20 20 / .12);
    font-weight: 400;
}

.navItem:hover > .megaPaneel,
.navItem:focus-within > .megaPaneel {
    display: block;
}

.navItem.isDicht > .megaPaneel {
    display: none;
}

.megaBinnen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 32px;
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 28px var(--goot) 32px;
}

.megaKolom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.megaKop {
    font-size: 16px;
    font-weight: 800;
}

.megaLink {
    color: var(--kleurTekstZacht);
    font-size: 16px;
    transition: transform .2s;
}

.megaLink:hover {
    color: var(--kleurActieDiep);
    transform: translateX(4px);
}

.megaPromo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 214px;
    padding: 22px;
    border-radius: var(--hoekGroot);
    background: var(--kleurActie);
    color: var(--kleurWit);
}

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

.megaPromoLabel {
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--kleurGeel);
    color: var(--kleurInkt);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.megaPromoTekst {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.megaPromoMeer {
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
 * De menulade tot en met 760px (inc/parts/lade.php)
 *
 * Zonder JavaScript gaat hij open met :target (de hamburger is een link naar
 * #mobielMenu); navigatie.js zet in plaats daarvan .isOpen en houdt de
 * pagina op slot.
 * -------------------------------------------------------------------------- */

.lade {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: none;
}

.lade:target,
.lade.isOpen {
    display: block;
}

/* Breder dan de telefoon is er geen lade (ook niet als hij openstond en het
   venster breder werd; navigatie.js haalt dan het slot van de pagina). */
@media (width > 47.5rem) {
    .lade:target,
    .lade.isOpen {
        display: none;
    }
}

.ladeWaas {
    position: absolute;
    inset: 0;
    background: rgb(20 20 20 / .45);
}

.ladePaneel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(360px, 88%);
    overflow: auto;
    background: var(--kleurWit);
    box-shadow: 24px 0 60px rgb(0 0 0 / .18);
}

.ladeKop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 2px solid var(--kleurGrond);
}

.ladeLogo img {
    width: auto;
    height: 36px;
}

.ladeSluit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--kleurGrond);
    color: var(--kleurInkt);
}

.ladeLijst {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
}

.ladeLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 14px;
    color: var(--kleurInkt);
    font-size: 17px;
    font-weight: 700;
}

.ladeLink:active {
    background: var(--kleurGrond);
}

.ladePijl {
    color: var(--kleurTekstStil);
}

.ladeTegels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 18px;
}

.ladeTegel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    background: var(--kleurMint);
    color: var(--kleurInkt);
    font-size: 15px;
    font-weight: 800;
}

.ladeTegel:first-child {
    background: var(--kleurGeel);
}

.ladeTegel span {
    font-size: 13px;
    font-weight: 500;
}

.ladeVoet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding: 18px;
    border-top: 2px solid var(--kleurGrond);
}

.ladeAccount {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 700;
}

.ladeBel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    color: var(--kleurWit);
    font-weight: 800;
}

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

.ladeTijden {
    color: var(--kleurTekstMeta);
    font-size: 13px;
    text-align: center;
}

/* Pagina op slot terwijl de lade open is (navigatie.js). */
.isOpSlot {
    position: fixed;
    right: 0;
    left: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
 * De footer
 * -------------------------------------------------------------------------- */

.siteFooter {
    background: var(--kleurFooter);
    color: var(--kleurFooterTekst);
}

.footerBinnen {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 64px);
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--goot) 0;
}

.footerBoven {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 40px;
    padding-bottom: clamp(32px, 4vw, 48px);
    border-bottom: 1px solid #2c2c2a;
}

.footerMerk {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 440px;
}

.footerLogo {
    align-self: flex-start;
    width: auto;
    height: 54px;
}

.footerLogoTekst {
    color: var(--kleurWit);
    font-size: 26px;
    font-weight: 800;
}

.footerIntro {
    font-size: 16px;
    line-height: 1.6;
}

.footerContact {
    display: flex;
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
}

.footerKaart {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #2c2c2a;
    border-radius: 18px;
    background: #1f1f1d;
    color: var(--kleurWit);
    transition: border-color .2s, background .2s;
}

.footerKaart:hover {
    border-color: var(--kleurActie);
    background: #232321;
    color: var(--kleurWit);
}

.footerKaartIcoon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--kleurActie);
    color: var(--kleurWit);
}

.footerKaartTekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
}

.footerKaartTekst span:first-child {
    color: #7d8482;
    font-size: 13px;
}

.footerTijden {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.footerStip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kleurActie);
    box-shadow: 0 0 0 4px rgb(42 165 133 / .25);
}

.footerKolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 36px 32px;
}

.footerKolom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    font-size: 15px;
}

.footerKop {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--kleurWit);
    font-size: 15px;
    font-weight: 800;
}

.footerKop span {
    color: var(--kleurActieLicht);
}

.footerLijst {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footerLink {
    display: inline-block;
    color: var(--kleurFooterTekst);
    line-height: 1.35;
    transition: color .2s, transform .2s;
}

.footerLink:hover {
    color: var(--kleurWit);
    transform: translateX(3px);
}

.footerOnder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px 40px;
    padding: 28px 0;
    border-top: 1px solid #2c2c2a;
}

.footerGegevens {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
}

.footerGegevens div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footerGegevens dt,
.footerBetalenKop {
    color: #7d8482;
    font-size: 13px;
    font-weight: 700;
}

.footerGegevens dd {
    color: var(--kleurWit);
    font-size: 15px;
    letter-spacing: .03em;
}

/* De herroepingsknop (kern/herroepen.php): verplicht en dus goed te zien,
   een omlijnde pil naast de bedrijfsgegevens. */
.footerHerroepen {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid #4a4f4d;
    border-radius: var(--hoekPil);
    color: var(--kleurWit);
    font-size: 14px;
    font-weight: 700;
    transition: border-color var(--overgang), background var(--overgang);
}

.footerHerroepen:hover {
    border-color: var(--kleurActie);
    background: var(--kleurActie);
    color: var(--kleurWit);
}

.footerProfielen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.footerProfiel {
    color: var(--kleurFooterTekst);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.footerBetalen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footerBetaalLijst {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footerBetaalLijst li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 11px;
    font-weight: 800;
}

.footerStrook {
    background: #0d0d0c;
}

.footerStrookBinnen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: 18px var(--goot);
    font-size: 13px;
}

.footerCookies {
    color: var(--kleurFooterTekst);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.footerNaarBoven {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    margin-left: auto;
    padding: 0 18px;
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 700;
}

.footerNaarBoven:hover {
    background: var(--kleurActie);
    color: var(--kleurWit);
}

/* --------------------------------------------------------------------------
 * Een rij die opzij schuift (04-11-2026): de miniaturen op de productpagina
 * en de categorierij op de homepage. Het blok zelf zet de breedte van de
 * kolommen; hier staat wat ze delen.
 *
 * De rand vervaagt aan de kant waar nog iets staat: een masker met twee
 * breedtes, --schuifFadeL en --schuifFadeR. Zonder script alleen rechts;
 * schuifRij.js zet isBegin en isEind naar de schuifstand. @property maakt
 * ze animeerbaar, dus de fade glijdt in en uit. position: relative houdt
 * absoluut geplaatste kinderen (screen-reader-text) binnen het schuifvlak —
 * anders maken ze de hele pagina breder.
 *
 * Zonder script blijft de schuifbalk van de browser staan, dun en in de
 * kleuren van het thema; met script (heeftBalk) verdwijnt die en komt
 * eronder de smalle balk van 3px (.schuifBalk).
 * -------------------------------------------------------------------------- */

@property --schuifFadeL {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --schuifFadeR {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.schuifRij {
    --schuifFadeL: 0px;
    --schuifFadeR: 56px;
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--kleurActie) var(--kleurRand);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--schuifFadeL), #000 calc(100% - var(--schuifFadeR)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--schuifFadeL), #000 calc(100% - var(--schuifFadeR)), transparent 100%);
    transition: --schuifFadeL .3s ease, --schuifFadeR .3s ease;
}

.schuifRij:not(.isBegin) {
    --schuifFadeL: 56px;
}

.schuifRij.isEind {
    --schuifFadeR: 0px;
}

.schuifRij.heeftBalk {
    scrollbar-width: none;
}

.schuifRij.heeftBalk::-webkit-scrollbar {
    display: none;
}

.schuifRij > li {
    scroll-snap-align: start;
}

/* De balk: 3px hoog en smal, niet over de hele breedte. De duim is zo breed
   als het deel van de rij dat in beeld staat (--balkBreedte) en schuift mee
   (--balkStand), beide gezet door schuifRij.js. */
.schuifBalk {
    position: relative;
    display: block;
    width: min(30%, 140px);
    height: 3px;
    margin: 12px auto 0;
    overflow: hidden;
    border-radius: 3px;
    background: var(--kleurRand);
}

.schuifBalk[hidden] {
    display: none;
}

.schuifBalkDuim {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--balkBreedte, .4) * 100%);
    border-radius: 3px;
    background: var(--kleurActie);
    transform: translateX(calc(var(--balkStand, 0) * (100% / var(--balkBreedte, .4) - 100%)));
}

/* --------------------------------------------------------------------------
 * De melding na 'In winkelwagen'
 * -------------------------------------------------------------------------- */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 20px;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    box-shadow: 0 18px 48px rgb(0 0 0 / .25);
    font-size: 16px;
    font-weight: 600;
    transform: translateX(-50%);
}

.toast[hidden] {
    display: none;
}

.toastTekst {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toastTekst .icoon {
    color: var(--kleurActieLicht);
}

.toastKnop {
    padding: 10px 16px;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    color: var(--kleurWit);
    white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
 * De terugval (index.php) voor wat nog geen eigen template heeft
 * -------------------------------------------------------------------------- */

.terugval {
    max-width: calc(var(--breedteMax) + 2 * var(--goot));
    margin: 0 auto;
    padding: var(--ruimte8) var(--goot);
    line-height: var(--regelTekst);
    overflow-wrap: break-word;   /* 'Retourvoorwaarden' op 320px */
}

.terugval h1 {
    margin-bottom: var(--ruimte5);
    font-size: var(--maatH1);
    font-weight: 800;
    letter-spacing: var(--spatieKop);
    line-height: var(--regelKop);
}

.terugvalInhoud,
.terugvalLijst {
    max-width: var(--breedteTekst);
}

.terugvalInhoud > * + *,
.terugvalLijst > * + * {
    margin-top: var(--ruimte4);
}

.terugvalInhoud h2 {
    font-size: var(--maatH3);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
 * De cookiekeuze (mu-plugins/toestemming.php)
 *
 * Het ontwerp heeft er geen; dit is hem in de vormtaal van het ontwerp: een
 * witte kaart linksonder, zoals de lade en de zoeklijst, met de knoppen van de
 * site. De HTML komt uit de mu-plugin en werkt zonder JavaScript (drie
 * submitknoppen, <details> voor 'Zelf kiezen').
 * -------------------------------------------------------------------------- */

.toestemmingBalk {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 90;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 24px;
    background: var(--kleurWit);
    box-shadow: 0 24px 48px rgb(20 40 35 / .18), 0 0 0 1px var(--kleurVlak);
}

.toestemmingFormulier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.toestemmingTekstBlok {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toestemmingKop {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.toestemmingUitleg {
    color: var(--kleurTekstZacht);
    font-size: 15px;
    line-height: 1.55;
}

.toestemmingLink {
    color: var(--kleurActieDiep);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.toestemmingSamenvatting {
    color: var(--kleurInkt);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.toestemmingVeldgroep {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}

.toestemmingLegenda {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}

.toestemmingRegel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.toestemmingVakje {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--kleurActie);
}

.toestemmingLabel {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toestemmingNaam {
    font-size: 15px;
    font-weight: 700;
}

.toestemmingOmschrijving {
    color: var(--kleurTekstZacht);
    font-size: 14px;
    line-height: 1.45;
}

.toestemmingKnoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.toestemmingKnop {
    height: 46px;
    padding: 0 18px;
    border: 2px solid var(--kleurInkt);
    border-radius: var(--hoekPil);
    background: none;
    color: var(--kleurInkt);
    font-size: 15px;
    font-weight: 700;
    transition: background var(--overgang), color var(--overgang);
}

.toestemmingKnop:hover {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.toestemmingKnop.toestemmingKnopZwart {
    border-color: var(--kleurActie);
    background: var(--kleurActie);
    color: var(--kleurWit);
}

.toestemmingKnop.toestemmingKnopZwart:hover {
    border-color: var(--kleurActieHover);
    background: var(--kleurActieHover);
}

/* ---------------------------------------------------------------------------
 * Verplichte velden: een sterretje achter het label (feedback 11-11-2026).
 * Uit de HTML zelf (required), dus geen veld kan het vergeten; voor
 * schermlezers telt required, het sterretje is leeg voor hen. Een label dat
 * zijn veld omsluit zet het in de template (.verplicht); Woo's eigen sterretje
 * staat in kassa.css en account.css.
 * --------------------------------------------------------------------------- */
label:has(~ :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), textarea, select):required)::after,
.verplicht::after {
    content: "\a0*";
    content: "\a0*" / "";
    color: var(--kleurFout);
    font-weight: 700;
}