/* =====================================================================
   Lettertypes, lokaal geserveerd.
   Opgehaald bij Google Fonts en hier neergezet zodat er geen
   verbinding met een derde partij nodig is om de site te tonen.
   Oswald en Source Sans 3 staan onder de SIL Open Font License.
   ===================================================================== */

/* Oswald 500 normal — latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Oswald 500 normal — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald 600 normal — latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Oswald 600 normal — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 400 italic — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 400 italic — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 400 normal — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 400 normal — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-sans-3-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 600 normal — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 600 normal — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Sans 3 700 normal — latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Source Sans 3 700 normal — latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/source-sans-3-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Electro speciaalzaak Verjaal
   Huisstijl: logorood (#d6201c) en bedrijfsblauw op wit.

   Het blauw is niet gekozen maar gemeten: uit de eigen advertentie van
   Verjaal (de blauwe curve onder het logo) komt #1867ac. Daaruit is een
   trap van vijf stappen op dezelfde tint (208 graden) opgebouwd, zodat
   het blauw zich als materiaal gedraagt in plaats van als losse kleur.
   Diep blauw draagt de topbalk en de voet, het merkblauw de accenten.

   Vormtaal: rechte hoeken, dunne lijnen, condensed koppen in kapitalen.
   Geen schaduwfeest, geen verloopjes: een nuchtere vakzaak.
   ===================================================================== */

:root {
    --rood: #d6201c;
    --rood-donker: #a81512;

    /* Bedrijfsblauw, tint 208 graden — trap van diep naar licht.
       Contrast met wit gemeten: 17,1 / 14,7 / 11,2 / 8,4 / 6,0 op 1. */
    --blauw-950: #0c1d2c;   /* topbalk en voet */
    --blauw-900: #102a41;   /* koppen, knoppen, randen */
    --blauw-800: #153d60;   /* uspbalk */
    --blauw-700: #175082;
    --blauw-600: #1766ab;   /* merkblauw, gemeten uit hun eigen drukwerk */
    --blauw-100: #e5eef5;   /* licht vlak */
    --blauw-050: #f4f8fb;

    --donker: var(--blauw-900);
    --inkt: #26303a;
    --grijs: #64707c;
    --lijn: #d3dae1;
    --lijn-licht: #e6ebf0;
    --vlak: #f4f6f8;
    --wit: #ffffff;
    --kop: "Oswald", "Arial Narrow", sans-serif;
    --tekst: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    /* Verbreed van 1180 naar 1400: op een 1600px-scherm bleef 26 procent
       van de breedte ongebruikt wit en pasten er maar drie productkolommen.
       Lopende tekst krijgt hieronder een eigen leesgrens, want een regel van
       1400px leest niet. */
    --maxw: 1400px;
    --leesmaat: 72ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--tekst);
    font-size: 16.5px;
    color: var(--inkt);
    background: var(--wit);
    line-height: 1.55;
}

/* height:auto is essentieel: staan er width- én height-attributen op een
   <img>, dan liggen beide maten vast en negeert de browser de aspect-ratio
   uit de CSS. Zonder deze regel rekt een foto uit tot zijn attribuuthoogte. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--rood); text-decoration: none; }
a:hover { color: var(--rood-donker); text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--kop);
    font-weight: 500;
    color: var(--donker);
    line-height: 1.15;
    margin: 0 0 .45em;
    text-transform: uppercase;
    letter-spacing: .015em;
}
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); }
h3 { font-size: 1.05rem; letter-spacing: .04em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--donker); color: #fff;
    padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Kicker: dun rood streepje boven een kop, vaste stijlgreep van de site */
.kicker {
    display: block; width: 44px; height: 4px; background: var(--rood); margin-bottom: 14px;
}

/* ---------- Knoppen: rechthoekig, kapitalen, stevig ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: 12px 24px; font-family: var(--kop); font-weight: 500; font-size: .88rem;
    text-transform: uppercase; letter-spacing: .08em;
    border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    text-decoration: none; white-space: nowrap; border-radius: 0;
}
.btn:hover { text-decoration: none; }
.btn--rood { background: var(--rood); color: #fff; }
.btn--rood:hover { background: var(--rood-donker); color: #fff; }
.btn--donker { background: var(--donker); color: #fff; }
.btn--donker:hover { background: var(--blauw-950); color: #fff; }
.btn--lijn { background: transparent; color: var(--donker); border-color: var(--donker); }
.btn--lijn:hover { background: var(--donker); color: #fff; }
.btn--lijn-wit { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--lijn-wit:hover { background: #fff; color: var(--donker); }
.btn--sm { padding: 8px 16px; font-size: .78rem; }
.btn--lg { padding: 15px 32px; font-size: .95rem; }

/* ---------- Topbalk: diepblauw, zakelijk ---------- */
.topbar { background: var(--blauw-950); color: #aebecd; font-size: .84rem; }
.topbar__inner { display: flex; align-items: center; gap: 26px; min-height: 36px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__rechts { margin-left: auto; color: #8ba0b4; }

/* ---------- Header: wit, logo, kapitalen-nav ---------- */
.site-header { background: var(--wit); border-bottom: 3px solid var(--donker); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; gap: 30px; min-height: 84px; }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; }

.mainnav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.mainnav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: stretch; }
.mainnav__list > li { display: flex; }
.mainnav__list > li > a {
    font-family: var(--kop); font-size: .92rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .06em; color: var(--donker); padding: 10px 13px; text-decoration: none;
    border-bottom: 3px solid transparent; display: inline-flex; align-items: center;
}
.mainnav__list > li > a:hover { color: var(--rood); }
.mainnav__list > li > a.is-active { border-bottom-color: var(--rood); color: var(--rood); }

/* Dropdown assortiment: paneel met de productgroepen in kolommen.
   Het paneel scrollt zelf zodra het niet meer in beeld past, zodat je
   niet eerst naar de onderkant van de pagina hoeft. */
.has-dropdown { position: relative; }
.dropdown {
    position: absolute; top: 100%; right: -120px;
    background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--rood);
    padding: 20px; width: 760px; max-width: 94vw;
    max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 60;
    box-shadow: 0 10px 30px rgba(16,42,65,.16);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; }

.dropdown__groepen { columns: 3; column-gap: 26px; }
.dropdown__groep { break-inside: avoid; margin-bottom: 16px; }
.dropdown__groepkop {
    display: block; font-family: var(--kop); text-transform: uppercase;
    font-size: .78rem; letter-spacing: .07em; color: var(--blauw-600);
    padding: 0 4px 5px; margin-bottom: 3px; border-bottom: 1px solid var(--blauw-600);
    text-decoration: none;
}
.dropdown__groepkop:hover { color: var(--rood); border-bottom-color: var(--rood); text-decoration: none; }
.dropdown__groep > a:not(.dropdown__groepkop) {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 5px 4px; color: var(--inkt); font-size: .9rem; text-decoration: none;
}
.dropdown__groep > a:not(.dropdown__groepkop):hover { color: var(--rood); }
.dropdown__count { color: var(--grijs); font-size: .74rem; }
.dropdown__alles { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lijn); text-align: right; }
.dropdown__alles a { font-family: var(--kop); text-transform: uppercase; font-size: .82rem; letter-spacing: .06em; }

/* Knop om het paneel op mobiel open te klappen; op desktop overbodig. */
.dropdown-toggle { display: none; }

/* Zoekveld */
.navsearch { display: flex; border: 2px solid var(--donker); }
.navsearch input {
    border: 0; padding: 8px 12px; font-size: .9rem; outline: none; width: 160px; font-family: var(--tekst);
}
.navsearch button {
    border: 0; background: var(--donker); color: #fff; padding: 8px 14px; cursor: pointer;
    font-family: var(--kop); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em;
}
.navsearch button:hover { background: var(--rood); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin-left: auto; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--donker); margin: 5px 0; }

/* ---------- Home: intro ---------- */
.intro { padding: 58px 0 50px; border-bottom: 1px solid var(--lijn); }
/* Twee even brede kolommen: de gevelfoto komt dan ongeveer even hoog uit
   als de tekst ernaast, waardoor het midden-uitlijnen geen gat meer laat. */
.intro__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.intro h1 { margin-bottom: .4em; }
.intro__lead { font-size: 1.06rem; margin: 0 0 26px; max-width: 56ch; }
.intro__acties { display: flex; gap: 14px; flex-wrap: wrap; }
/* margin:0 — een <figure> krijgt van de browser standaard 40px marge
   links en rechts, waardoor de foto smaller uitviel dan zijn kolom. */
.intro__foto { margin: 0; border: 1px solid var(--lijn); padding: 10px; background: var(--wit); }
.intro__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.intro__foto figcaption { font-size: .82rem; color: var(--grijs); padding: 10px 4px 2px; }

/* ---------- USP-balk: middelblauw, één stap lichter dan de topbalk ---------- */
.uspbalk { background: var(--blauw-800); color: #fff; }
.uspbalk__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp { padding: 22px 24px; border-left: 1px solid rgba(255,255,255,.16); }
.usp:first-child { border-left: 0; }
.usp strong { display: block; font-family: var(--kop); text-transform: uppercase; font-weight: 500; letter-spacing: .05em; font-size: .95rem; }
.usp span { color: #b9cbdb; font-size: .88rem; }

/* ---------- Secties ---------- */
.sectie { padding: 54px 0; }
.sectie--vlak { background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.sectie__kop { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.sectie__kop h2 { margin: 0; }
.sectie__link { font-family: var(--kop); text-transform: uppercase; font-size: .84rem; letter-spacing: .07em; }

/* ---------- Categorie-tegels ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.cat {
    background: var(--wit); border: 1px solid var(--lijn); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px; text-decoration: none; transition: border-color .12s;
}
.cat:hover { border-color: var(--donker); text-decoration: none; }
.cat b { font-family: var(--kop); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--donker); font-size: .92rem; }
.cat:hover b { color: var(--rood); }
.cat i { font-style: normal; color: var(--grijs); font-size: .8rem; }

/* ---------- Producten ---------- */
.producten { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 14px; }
.product {
    background: var(--wit); border: 1px solid var(--lijn); display: flex; flex-direction: column;
    text-decoration: none; color: inherit; transition: border-color .12s;
}
.product:hover { border-color: var(--donker); text-decoration: none; }
/* Vast vierkant kader. De foto staat er absoluut in: een foto in de normale
   stroom met height:100% valt bij een ouder zonder vaste hoogte terug op
   auto, neemt dan zijn eigen verhouding aan en rekt het kader open. Staande
   productfoto's maakten de kaart daardoor veel hoger dan de rest. */
.product__foto {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--wit); border-bottom: 1px solid var(--lijn-licht);
}
.product__foto img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain; padding: 14px;
}
.product__label {
    position: absolute; top: 0; left: 0; background: var(--rood); color: #fff;
    font-family: var(--kop); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    padding: 4px 10px;
}
.product__info { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* De regels merk, naam en categorie hebben een vaste hoogte, zodat de
   productnamen in een rij kaarten allemaal op dezelfde lijn beginnen —
   ook bij een product zonder merk of met een naam van één regel. */
.product__merk {
    font-size: .72rem; font-weight: 700; color: var(--grijs);
    text-transform: uppercase; letter-spacing: .09em;
    min-height: 1.1em; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Precies twee regels: korte namen krijgen de ruimte gereserveerd, lange
   namen worden afgebroken. Zo begint de naam in elke kaart op dezelfde
   hoogte en staat alles eronder ook gelijk. De volledige naam blijft
   beschikbaar als tooltip en op de productpagina zelf. */
.product__naam {
    font-size: .98rem; font-weight: 600; color: var(--donker); line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.product:hover .product__naam { color: var(--rood); }
.product__cat {
    font-size: .8rem; color: var(--grijs); min-height: 1.2em; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product__prijs { margin-top: auto; padding-top: 10px; }
.product__prijs b { color: var(--rood); font-size: 1.15rem; font-weight: 700; }
.product__prijs i { font-style: normal; display: block; color: var(--grijs); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }

/* ---------- Twee-koloms infoblok (reparatie + regio) ---------- */
.infoduo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--lijn); }
.infoduo > div { padding: 34px 36px; }
.infoduo > div + div { border-left: 1px solid var(--lijn); background: var(--vlak); }
.infoduo p { margin: 0 0 14px; }
.regio { columns: 2; column-gap: 28px; list-style: none; margin: 10px 0 0; padding: 0; font-size: .95rem; }
.regio li { padding: 3px 0 3px 16px; position: relative; break-inside: avoid; }
.regio li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--rood); }

/* ---------- CTA-band: rood ---------- */
.ctaband { background: var(--rood); color: #fff; padding: 40px 0; }
.ctaband__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ctaband h2 { color: #fff; margin: 0 0 4px; }
/* Wit op logorood haalt 5,14:1; het roze dat hier stond bleef op 3,96 steken.
   Het onderscheid met de kop komt daarom uit de tekstgrootte, niet uit kleur. */
.ctaband p { margin: 0; color: #ffffff; font-size: .95rem; }

/* ---------- Paginakop ---------- */
.pagekop { background: var(--vlak); border-bottom: 1px solid var(--lijn); padding: 32px 0; }
.pagekop--smal { padding: 16px 0; }
.pagekop h1 { margin: 8px 0 2px; }
.pagekop__sub { color: var(--grijs); margin: 0; }
.crumbs { font-size: .82rem; color: var(--grijs); text-transform: uppercase; letter-spacing: .05em; font-family: var(--kop); }
.crumbs a { color: var(--grijs); text-decoration: none; }
.crumbs a:hover { color: var(--rood); }
.crumbs span { margin: 0 6px; color: var(--lijn); }

/* ---------- Assortiment met zijbalk ---------- */
.met-zijbalk { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
/* De categorielijst is met 32 ingangen bijna 2000px hoog en past dus niet
   op een scherm. Een sticky blok dat hoger is dan het venster blijft bij het
   scrollen stilstaan, waardoor alles onder de vouw onbereikbaar werd: je
   moest eerst de hele pagina afscrollen. Daarom begrenzen we de hoogte tot
   het venster en laat de zijbalk zichzelf scrollen. */
.zijbalk {
    position: sticky;
    top: 104px;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
}
/* Rustige scrollbalk die bij de huisstijl past. */
.zijbalk { scrollbar-width: thin; scrollbar-color: var(--lijn) transparent; }
.zijbalk::-webkit-scrollbar { width: 8px; }
.zijbalk::-webkit-scrollbar-track { background: transparent; }
.zijbalk::-webkit-scrollbar-thumb { background: var(--lijn); }
.zijbalk::-webkit-scrollbar-thumb:hover { background: var(--grijs); }
.zijbalk__zoek { display: flex; border: 2px solid var(--donker); margin-bottom: 22px; }
.zijbalk__zoek input { flex: 1; min-width: 0; border: 0; padding: 9px 11px; font-size: .9rem; outline: none; font-family: var(--tekst); }
.zijbalk__zoek button { border: 0; background: var(--donker); color: #fff; padding: 0 14px; cursor: pointer; font-family: var(--kop); text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; }
.zijbalk__zoek button:hover { background: var(--rood); }
.zijbalk h2 { font-size: .82rem; letter-spacing: .1em; color: var(--grijs); margin-bottom: 8px; }
.zijbalk ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.zijbalk li a {
    display: flex; justify-content: space-between; gap: 8px; padding: 7px 6px;
    border-bottom: 1px solid var(--lijn-licht); color: var(--inkt); font-size: .93rem; text-decoration: none;
}
.zijbalk li a:hover { color: var(--rood); }
.zijbalk li a.is-active { color: var(--rood); font-weight: 700; border-left: 3px solid var(--rood); padding-left: 8px; }
.zijbalk .aantal { color: var(--grijs); font-size: .78rem; }

.leeg { text-align: center; padding: 70px 20px; color: var(--grijs); border: 1px dashed var(--lijn); }
.leeg .btn { margin-top: 16px; }

/* ---------- Productdetail ---------- */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.detail__foto { border: 1px solid var(--lijn); background: var(--wit); }
.detail__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 26px; }
.detail__merk { font-size: .8rem; font-weight: 700; color: var(--grijs); text-transform: uppercase; letter-spacing: .1em; }
.detail h1 { text-transform: none; font-family: var(--tekst); font-weight: 700; font-size: 1.7rem; letter-spacing: 0; }
.detail__prijs { margin: 18px 0 4px; }
.detail__prijs b { font-size: 2rem; color: var(--rood); font-weight: 700; }
.detail__prijs i { font-style: normal; display: block; color: var(--grijs); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.specs { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--lijn); }
.specs li { padding: 7px 2px; border-bottom: 1px solid var(--lijn-licht); font-size: .96rem; }
.kassabon {
    background: var(--vlak); border-left: 4px solid var(--rood); padding: 14px 18px;
    margin: 20px 0; font-size: .93rem;
}
.detail__acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.chip {
    display: inline-block; border: 1px solid var(--lijn); color: var(--grijs);
    padding: 4px 12px; font-size: .8rem; text-decoration: none; text-transform: uppercase;
    letter-spacing: .05em; font-family: var(--kop);
}
.chip:hover { border-color: var(--rood); color: var(--rood); text-decoration: none; }

/* ---------- Diensten ---------- */
.diensten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dienst { border: 1px solid var(--lijn); padding: 28px 30px; background: var(--wit); }
.dienst h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 12px; }
.dienst h2 svg { flex: none; }
.dienst p { margin: 0; color: var(--inkt); font-size: .96rem; }
.dienst--vol { grid-column: 1 / -1; background: var(--vlak); }

/* ---------- Over ons ---------- */
.verhaal { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.verhaal p { margin: 0 0 16px; font-size: 1.02rem; }
.verhaal__foto { margin: 0; border: 1px solid var(--lijn); padding: 10px; background: var(--wit); }
.verhaal__foto img { width: 100%; }
.verhaal__foto figcaption { font-size: .82rem; color: var(--grijs); padding: 10px 4px 2px; }
.jaartal { font-family: var(--kop); font-size: 3rem; color: var(--rood); line-height: 1; }
.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.waarde { border-top: 4px solid var(--rood); background: var(--vlak); padding: 20px 22px; }
.waarde h3 { margin-bottom: 6px; }
.waarde p { margin: 0; font-size: .92rem; color: var(--inkt); }

/* ---------- Contact ---------- */
.contactgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.contactblok { margin-bottom: 26px; }
.contactblok h2 { font-size: 1rem; }
.contactblok p { margin: 0; }
.kaart { border: 1px solid var(--lijn); min-height: 430px; }
.kaart iframe { width: 100%; height: 100%; min-height: 430px; border: 0; display: block; }
.tijden { list-style: none; margin: 0; padding: 0; max-width: 360px; }
.tijden li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 2px; border-bottom: 1px solid var(--lijn-licht); }
.tijden li b { font-weight: 600; }

/* ---------- Footer: diepblauw ----------
   Vier kolommen die niet mogen afknappen: elke kolomkop staat op een
   eigen regel en de kolommen krijgen min-width 0, zodat "Over ons"
   naast "Contact" niet meer wordt afgesneden. */
.site-footer { background: var(--blauw-950); color: #a9bbcb; margin-top: 56px; font-size: .94rem; }
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 30px 28px; padding: 50px 0 38px;
}
.site-footer__grid > div { min-width: 0; }
.site-footer h3 { color: #fff; font-size: .9rem; letter-spacing: .08em; margin-bottom: 14px; white-space: nowrap; }
.site-footer h3::after { content: ""; display: block; width: 26px; height: 3px; background: var(--rood); margin-top: 8px; }
.site-footer a { color: #dce6ee; }
.site-footer a:hover { color: #fff; }
.site-footer__logo img { height: 34px; width: auto; background: #fff; padding: 6px 10px; }
.site-footer__over { margin-top: 16px; }
.flinks { list-style: none; margin: 0; padding: 0; }
.flinks li { padding: 3px 0; }
.ftijden { list-style: none; margin: 0; padding: 0; }
.ftijden li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.site-footer__balk { border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; color: #8098ad; }
.site-footer__balk .container { display: flex; justify-content: space-between; gap: 14px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }

/* ---------- Responsief ---------- */
@media (max-width: 940px) {
    .intro__inner { grid-template-columns: 1fr; gap: 30px; }
    .uspbalk__grid { grid-template-columns: 1fr 1fr; }
    .usp { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
    .detail { grid-template-columns: 1fr; }
    .contactgrid { grid-template-columns: 1fr; }
    .met-zijbalk { grid-template-columns: 1fr; }
    /* Op smallere schermen staat de zijbalk boven de producten en scrollt
       hij gewoon mee; dan is een eigen scrollgebied juist hinderlijk. */
    .zijbalk {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    .infoduo { grid-template-columns: 1fr; }
    .infoduo > div + div { border-left: 0; border-top: 1px solid var(--lijn); }
    .verhaal { grid-template-columns: 1fr; }
    .waarden { grid-template-columns: 1fr; }
    .diensten { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Omslagpunt gemeten, niet geschat: de balk met logo, zeven menu-items en het
   zoekveld heeft 1025px nodig. Stond dit op 780px, dan paste de balk tussen
   780 en ~1030px niet en kreeg de pagina een horizontale schuifbalk — precies
   wat je ziet in een venster op een half scherm. */
@media (max-width: 1040px) {
    .nav-toggle { display: block; }
    .mainnav {
        position: fixed; inset: 84px 0 auto 0; background: var(--wit);
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px;
        border-bottom: 3px solid var(--donker);
        transform: translateY(-130%); transition: transform .2s; margin: 0; max-height: calc(100vh - 84px); overflow: auto;
    }
    .mainnav.is-open { transform: translateY(0); }
    .mainnav__list { flex-direction: column; }
    .mainnav__list > li { position: relative; flex-wrap: wrap; }
    .mainnav__list > li > a { padding: 13px 4px; border-bottom: 1px solid var(--lijn-licht); width: 100%; }

    /* Assortiment dichtgeklapt: anders staan alle 31 categorieën in het
       menu en kun je pas onderaan de pagina verder scrollen. */
    .has-dropdown > a { width: calc(100% - 52px) !important; }
    .dropdown-toggle {
        display: block; position: absolute; top: 0; right: 0;
        width: 52px; height: 50px; background: none; border: 0;
        border-bottom: 1px solid var(--lijn-licht); cursor: pointer;
    }
    .dropdown-toggle span {
        display: block; width: 11px; height: 11px; margin: 0 auto;
        border-right: 2px solid var(--donker); border-bottom: 2px solid var(--donker);
        transform: rotate(45deg) translate(-3px, -3px); transition: transform .18s;
    }
    .dropdown-toggle[aria-expanded="true"] span { transform: rotate(-135deg) translate(-3px, -3px); }

    .dropdown {
        position: static; opacity: 1; visibility: visible; box-shadow: none;
        border: 0; width: auto; max-width: none; max-height: none; overflow: visible;
        padding: 0 0 8px 10px; display: none;
    }
    .has-dropdown.is-uitgeklapt .dropdown { display: block; }
    .dropdown__groepen { columns: 1; }
    .navsearch { margin-top: 14px; width: 100%; }
    .navsearch input { flex: 1; width: auto; }
    .topbar__rechts { display: none; }
}

@media (max-width: 480px) {
    .producten { grid-template-columns: 1fr 1fr; gap: 9px; }
    .product__naam { font-size: .88rem; }
    .uspbalk__grid { grid-template-columns: 1fr; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .regio { columns: 1; }
}

/* =====================================================================
   Onderdelen toegevoegd na de terugkoppeling van de opdrachtgever
   ===================================================================== */

/* ---------- Sorteren en filteren (wens 3 en 5) ---------- */
.werkbalk {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
    padding-bottom: 14px; border-bottom: 2px solid var(--donker);
}
.werkbalk__tel { color: var(--grijs); font-size: .92rem; }
.werkbalk__tel b { color: var(--donker); }
.sorteer { display: flex; align-items: center; gap: 9px; }
.sorteer label {
    font-family: var(--kop); text-transform: uppercase; font-size: .76rem;
    letter-spacing: .08em; color: var(--grijs);
}
.sorteer select, .filterveld select, .filterveld input {
    border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt);
    padding: 8px 11px; font-family: var(--tekst); font-size: .92rem; border-radius: 0;
}
.sorteer select:focus, .filterveld select:focus, .filterveld input:focus {
    outline: 2px solid var(--blauw-600); outline-offset: -2px;
}

.filterblok { border-top: 1px solid var(--lijn); padding-top: 16px; margin-top: 18px; }
.filterblok h2 { font-size: .82rem; letter-spacing: .1em; color: var(--grijs); margin-bottom: 10px; }
.filterveld { margin-bottom: 12px; }
.filterveld label {
    display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--grijs); margin-bottom: 4px; font-family: var(--kop);
}
.filterveld input, .filterveld select { width: 100%; }
.prijsvak { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filteracties { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.filteracties .btn { flex: 1; }

/* Actieve filters als verwijderbare labels */
.actiefilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.actiefilter {
    display: inline-flex; align-items: center; gap: 7px; background: var(--blauw-100);
    border: 1px solid var(--lijn); color: var(--blauw-900);
    padding: 4px 10px; font-size: .84rem; text-decoration: none;
}
.actiefilter:hover { border-color: var(--rood); color: var(--rood); text-decoration: none; }
.actiefilter b { font-weight: 700; }
.actiefilter span { font-size: 1.1em; line-height: 1; }

/* ---------- Categorieen met foto (wens 6d) ---------- */
.cats--foto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cats--foto .cat { padding: 0; overflow: hidden; }
.cat__foto {
    position: relative;
    aspect-ratio: 4 / 3; background: var(--vlak);
    border-bottom: 1px solid var(--lijn-licht); overflow: hidden;
}
/* Zelfde reden als bij de productfoto: absoluut geplaatst, zodat een
   staande foto het 4:3-kader niet kan oprekken. */
.cat__foto img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain; padding: 12px;
}
.cat__tekst { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 2px; }

/* Productgroep-kop boven een rij categorieen */
.groepkop {
    font-family: var(--kop); text-transform: uppercase; letter-spacing: .06em;
    font-size: 1.05rem; color: var(--donker); margin: 34px 0 12px;
    padding-bottom: 7px; border-bottom: 2px solid var(--blauw-600);
}
.groepkop:first-child { margin-top: 0; }

/* Zijbalk: groep met inspringende categorieen */
.zijbalk__groep {
    font-family: var(--kop); text-transform: uppercase; font-size: .78rem;
    letter-spacing: .08em; color: var(--blauw-600); padding: 14px 6px 5px;
    border-bottom: 1px solid var(--lijn);
}
.zijbalk__groep:first-child { padding-top: 0; }
.zijbalk li.is-kind a { padding-left: 14px; }

/* ---------- Categorie-introductie (wens 14) ---------- */
.catintro {
    background: var(--blauw-050); border-left: 4px solid var(--blauw-600);
    padding: 22px 26px; margin-bottom: 26px;
}
.catintro p { margin: 0 0 12px; }
.catintro p:last-child { margin-bottom: 0; }

/* Categoriefoto naast de introtekst. De foto houdt zijn eigen verhouding —
   geen vaste aspect-ratio, want de bronbeelden lopen van vierkant tot breed
   en croppen snijdt er apparaten af. */
.catintro--foto { display: flex; gap: 24px; align-items: flex-start; }
/* flex-basis auto plus width:auto op de foto: het kader krimpt mee met een
   klein bronbeeld in plaats van het op te rekken. Grote beelden worden door
   max-width afgetopt. Zo staat er nooit een uitvergrote, wazige foto. */
.catintro__foto {
    margin: 0; flex: 0 0 auto; max-width: clamp(160px, 26%, 280px);
    background: var(--wit); border: 1px solid var(--lijn);
}
.catintro__foto img { width: auto; max-width: 100%; height: auto; display: block; }
.catintro__tekst { flex: 1 1 0; min-width: 0; }
@media (max-width: 760px) {
    .catintro--foto { flex-direction: column; gap: 16px; }
    .catintro__foto { max-width: min(280px, 100%); }
}
.catintro__meer {
    background: none; border: 0; padding: 0; margin-top: 6px; cursor: pointer;
    font-family: var(--kop); text-transform: uppercase; font-size: .8rem;
    letter-spacing: .07em; color: var(--rood);
}
.catintro__meer:hover { text-decoration: underline; }
.catintro.is-ingeklapt .catintro__rest { display: none; }

/* ---------- Productfotos: galerij en vergroten (wens 8 en 9) ---------- */
.galerij { display: flex; flex-direction: column; gap: 10px; }
.galerij__hoofd {
    border: 1px solid var(--lijn); background: var(--wit); position: relative;
    cursor: zoom-in;
}
.galerij__hoofd img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 26px; }
.galerij__hint {
    position: absolute; right: 10px; bottom: 10px; background: rgba(12,29,44,.82);
    color: #fff; font-size: .74rem; padding: 5px 10px; letter-spacing: .04em;
    pointer-events: none;
}
.galerij__strip { display: flex; gap: 8px; flex-wrap: wrap; }
.galerij__mini {
    width: 74px; border: 1px solid var(--lijn); background: var(--wit);
    padding: 0; cursor: pointer; flex: none;
}
.galerij__mini img { width: 100%; height: 72px; object-fit: contain; padding: 6px; }
.galerij__mini.is-actief { border-color: var(--rood); border-width: 2px; }
.galerij__mini:focus-visible { outline: 2px solid var(--blauw-600); outline-offset: 2px; }
.galerij__label {
    display: block; font-size: .7rem; text-align: center; color: var(--grijs);
    padding: 0 3px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lightbox {
    position: fixed; inset: 0; background: rgba(12,29,44,.94); z-index: 200;
    display: none; align-items: center; justify-content: center; padding: 40px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; object-fit: contain; }
.lightbox__sluit, .lightbox__vorige, .lightbox__volgende {
    position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
    font-size: 2rem; line-height: 1; padding: 14px 18px;
}
.lightbox__sluit { top: 8px; right: 12px; }
.lightbox__vorige { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__volgende { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__sluit:hover, .lightbox__vorige:hover, .lightbox__volgende:hover { color: var(--rood); }
.lightbox__bijschrift {
    position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
    color: #cfdbe6; font-size: .9rem;
}

/* ---------- Merken (wens 4) ---------- */
.merken { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.merk {
    border: 1px solid var(--lijn); padding: 24px 26px; background: var(--wit);
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    border-top: 4px solid var(--blauw-600); transition: border-color .12s;
}
.merk:hover { border-top-color: var(--rood); text-decoration: none; }
.merk h3 { font-size: 1.25rem; margin-bottom: 8px; }
.merk p { margin: 0; font-size: .93rem; color: var(--inkt); }
.merk__meer {
    margin-top: 14px; font-family: var(--kop); text-transform: uppercase;
    font-size: .78rem; letter-spacing: .07em; color: var(--rood);
}
.merkverhaal { max-width: 68ch; }
.merkverhaal p { font-size: 1.04rem; margin: 0 0 16px; }
.merkverhaal blockquote {
    margin: 22px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--rood);
    font-size: 1.15rem; font-style: italic; color: var(--donker);
}

/* ---------- Certificaten en beeldmerken (wens 6c) ---------- */
.certificaten {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    padding: 22px 26px; border: 1px solid var(--lijn); background: var(--wit);
}
.certificaat { display: flex; align-items: center; gap: 13px; }
.certificaat img { height: 34px; width: auto; }
.certificaat span { font-size: .88rem; color: var(--inkt); line-height: 1.3; }
.certificaat b { display: block; font-family: var(--kop); text-transform: uppercase; letter-spacing: .04em; color: var(--donker); }

/* ---------- Historie (wens 7) ---------- */
.historie { max-width: 74ch; }
.historie h2 {
    margin-top: 40px; padding-bottom: 7px; border-bottom: 2px solid var(--blauw-600);
    font-size: 1.2rem;
}
.historie h2:first-of-type { margin-top: 0; }
.historie p { margin: 0 0 15px; }
.historie__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 34px 0; }
.historie__fotos figure { margin: 0; border: 1px solid var(--lijn); padding: 9px; background: var(--wit); }
.historie__fotos img { width: 100%; cursor: zoom-in; }
.historie__fotos figcaption { font-size: .8rem; color: var(--grijs); padding-top: 8px; }

/* ---------- Home: winkelpand ---------- */
.pand { margin: 0; }
.pand img { width: 100%; }
.pand figcaption { font-size: .82rem; color: var(--grijs); padding: 10px 4px 2px; }

@media (max-width: 940px) {
    .werkbalk { flex-direction: column; align-items: stretch; }
    .sorteer { justify-content: space-between; }
    .sorteer select { flex: 1; }
}

/* ---------- Productdetail: typenummer, categorielabels, merkblok ---------- */
.detail__type { color: var(--grijs); font-size: .92rem; margin: 2px 0 12px; }
.detail__type b { color: var(--inkt); font-weight: 700; letter-spacing: .02em; }
.detail__chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 6px; }

.merkblok {
    border: 1px solid var(--lijn); border-left: 4px solid var(--blauw-600);
    background: var(--blauw-050); padding: 18px 22px; margin: 22px 0;
}
.merkblok h2 { font-size: 1rem; margin-bottom: 8px; }
.merkblok p { margin: 0; font-size: .94rem; }
.merkblok .merk__meer { display: inline-block; margin-top: 10px; }

/* ---------- Merkenoverzicht met logo ---------- */
/* De merkkaart is een flexkolom, dus een afbeelding erin rekt standaard mee
   met de kaartbreedte. Met een vaste hoogte erbij werd élk logo 219x40,
   ongeacht de bronverhouding — Moccamaster (433x35) werd daardoor tweemaal
   zo hoog als het hoort. align-self haalt het uit de rek; max-height in
   plaats van height laat brede logo's op breedte schalen en hoge op hoogte. */
.merk__logo {
    align-self: flex-start;
    width: auto; height: auto;
    max-height: 40px; max-width: 100%;
    object-fit: contain;
    margin-bottom: 14px;
}
.merk__aantal { color: var(--grijs); font-size: .84rem; margin-top: 10px; }

/* ---------- Tekstpagina (privacybeleid, leveringsvoorwaarden) ---------- */
.tekstpagina { max-width: 68ch; }
.tekstpagina h2 {
    font-size: 1.15rem; margin: 34px 0 12px;
    padding-bottom: 7px; border-bottom: 2px solid var(--blauw-600);
}
.tekstpagina h2:first-child { margin-top: 0; }
.tekstpagina p { margin: 0 0 15px; }
.tekstlijst { list-style: none; margin: 0 0 18px; padding: 0; }
.tekstlijst li { padding: 5px 0 5px 20px; position: relative; }
.tekstlijst li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 7px; height: 7px; background: var(--rood);
}
.site-footer__juridisch { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Stappenlijst en veelgestelde vragen (landingspagina's) ---------- */
.stappen { counter-reset: stap; list-style: none; margin: 10px 0 18px; padding: 0; }
.stappen li {
    counter-increment: stap; position: relative; padding: 6px 0 6px 34px;
}
.stappen li::before {
    content: counter(stap); position: absolute; left: 0; top: 6px;
    width: 22px; height: 22px; background: var(--blauw-600); color: #fff;
    font-family: var(--kop); font-size: .8rem; display: flex;
    align-items: center; justify-content: center;
}
.faq { max-width: 72ch; border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary {
    cursor: pointer; padding: 15px 2px; font-weight: 600; color: var(--donker);
    list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rood); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--rood); }
.faq p { margin: 0 0 16px; padding-right: 30px; }

/* ==================================================================
   Sluitingsmelding, WhatsApp, slottekst en varianten
   ================================================================== */

/* Sluitingsbalk boven de topbalk. Aangekondigd = rustig blauw,
   vandaag daadwerkelijk dicht = rood, want dat is de dag dat iemand
   voor niets zou komen. */
.sluitmelding {
    background: var(--blauw-100); color: var(--blauw-950);
    font-size: .9rem; padding: 9px 0; text-align: center;
    border-bottom: 1px solid var(--lijn);
}
.sluitmelding strong { font-family: var(--kop); font-weight: 600; margin-right: 8px; }
.sluitmelding--nu { background: var(--rood-donker); color: #fff; border-bottom-color: var(--rood-donker); }

/* WhatsApp-knop. Niet het felle merkgroen: wit op #25D366 haalt maar
   1,9:1. Het donkere groen uit hun eigen huisstijl haalt wél de norm;
   gemeten in de pagina, zie de README. */
.btn--whatsapp {
    display: inline-flex; align-items: center; gap: 9px;
    background: #0b6b5f; color: #fff; border: 1px solid #0b6b5f;
}
.btn--whatsapp:hover, .btn--whatsapp:focus-visible { background: #085249; border-color: #085249; color: #fff; }
.btn--whatsapp svg { flex: none; }

.sluit__kop { font-size: .95rem; margin: 18px 0 8px; }
.tijden--sluiting b { color: var(--rood-donker); }

/* Slottekst onder de producten van een categorie. */
.catoutro {
    margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lijn);
    max-width: 68ch;
}
.catoutro h2 { font-size: 1.1rem; margin: 0 0 10px; }
.catoutro p { margin: 0 0 12px; }

/* Prijs-eenheid, bijvoorbeeld "per jaar, per apparaat". */
.detail__prijseenheid { display: block; font-size: .85rem; color: var(--grijs); margin-top: 2px; }

/* Andere uitvoeringen van hetzelfde product. */
.varianten { margin: 22px 0 4px; }
.varianten__kop { font-size: 1rem; margin: 0 0 10px; }
.varianten__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.varianten__lijst a {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    border: 1px solid var(--lijn); background: var(--wit); padding: 8px 12px 8px 8px;
    color: var(--inkt);
}
.varianten__lijst a:hover, .varianten__lijst a:focus-visible { border-color: var(--blauw-600); }
.varianten__lijst img { width: 44px; height: 44px; object-fit: contain; flex: none; background: var(--vlak); }
.varianten__naam { font-weight: 600; }
.varianten__prijs { color: var(--grijs); font-size: .88rem; }
@media (max-width: 520px) { .varianten__lijst a { width: 100%; } }

/* Vergroten binnen het vergrootvenster. */
.lightbox img {
    transform-origin: center center;
    transition: transform .12s ease-out;
    cursor: zoom-in;
    touch-action: none;
    will-change: transform;
}
/* De overgang alleen uitzetten tijdens het slepen, niet op basis van de
   zoomstand: dat zette transition in hetzelfde beeld aan en uit, waarna de
   schaal bleef hangen op de vorige waarde bij het terugzetten naar 100%. */
.lightbox img.is-slepend { transition: none; }
.lightbox__hint {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
    color: #fff; background: rgba(12,29,44,.82); font-size: .8rem;
    padding: 6px 12px; pointer-events: none;
}

/* Lettergrootte binnen beheerteksten. */
.tekst--groot { font-size: 1.22em; }
.tekst--klein { font-size: .85em; }

/* Productvideo onder de foto. */
.productvideo { margin-top: 22px; }
.productvideo__kader {
    position: relative; aspect-ratio: 16 / 9; background: var(--blauw-950);
    border: 1px solid var(--lijn);
}
.productvideo__kader iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Actieprijs: gewone prijs doorgestreept, actieprijs eronder. */
.detail__oudeprijs {
    display: block; color: var(--grijs); font-size: 1.1rem; text-decoration: line-through;
}
.detail__prijs--actie b { color: var(--rood); }

/* Leesgrens voor lopende tekst. De container mag breed zijn voor roosters
   en foto's, maar een alinea van 1400px breed dwingt de lezer met zijn hoofd
   heen en weer. Alleen tekstblokken worden begrensd, niet de roosters. */
.intro__lead,
.catoutro,
.merkverhaal p,
.site-footer__over { max-width: var(--leesmaat); }

/* ==================================================================
   Nooit zijwaarts kunnen schuiven
   ------------------------------------------------------------------
   Steekt er ergens toch iets buiten het document — een vaste balk die
   zich op de vensterbreedte inclusief schuifbalk richt, een lange
   productnaam zonder spaties — dan levert dat op een telefoon een wit
   vlak op zodra je opzij veegt.

   clip en niet hidden: hidden maakt van het wortelelement een
   scrollcontainer en breekt daarmee position:sticky, dat hier op de
   kopbalk, de filterkolom en het beheerformulier zit. clip knipt
   alleen af en laat sticky met rust. Voor oudere browsers die clip
   niet kennen valt het terug op hidden, maar dan alleen op body,
   zodat de sticky kopbalk op html-niveau blijft werken.
   ================================================================== */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
    body { overflow-x: hidden; }
}

/* Lange woorden zonder spaties (typenummers, e-mailadressen) mogen de
   opmaak niet uit elkaar duwen. */
body { overflow-wrap: break-word; }

/* Op zeer brede schermen mag de inhoud verder meegroeien. Niet tot de rand:
   tekst en knoppen tegen de schermrand lezen slecht en op een 27-inch
   monitor moet je hoofd dan heen en weer. 1600px laat op 1920 nog 8 procent
   marge over in plaats van 26 procent. */
@media (min-width: 1700px) {
    :root { --maxw: 1600px; }
}