/* ==========================================================================
   B-RYAN — hoofdstijlblad
   Mobile first. De media queries breiden uit naar grotere schermen.

   Inhoud
   1.  Ontwerptokens
   2.  Basis en typografie
   3.  Layouthulpjes
   4.  Knoppen en formulieren
   5.  Ticker, header en navigatie
   6.  Meldingen
   7.  Hero en homepage-secties
   8.  Productkaarten en rasters
   9.  Shoppagina met filters
   10. Productdetailpagina
   11. Winkelwagen en afrekenen
   12. Tekstpagina's en contact
   13. Service-strip en footer
   14. Media queries
   ========================================================================== */

/* 1. Ontwerptokens ========================================================
   Kleuren overgenomen uit demo 1 (cloud / ink / flame / steel). De tokennamen
   blijven ongewijzigd, zodat de opmaak van demo 2 exact hetzelfde blijft;
   alleen de waarde achter elke naam is vervangen.
       --pine / --pine-diep / --pine-licht  ->  ink-soft / ink / steel
       --paper -> cloud, --zand + --pine-mist -> cloud-dim
       --stone + --lijn -> line, --gedempt -> steel, --signal -> flame       */
:root {
    --pine:        #232B3A;
    --pine-diep:   #161C26;
    --pine-licht:  #4C5B72;
    --pine-mist:   #EAE6DA;
    --ink:         #161C26;
    --paper:       #F4F2EC;
    --chalk:       #FFFFFF;
    --stone:       #DDD8CC;
    --zand:        #EAE6DA;
    --gedempt:     #4C5B72;
    --lijn:        #DDD8CC;
    --signal:      #FF5A2B;
    --signal-diep: #E04A1E;   /* flame-dark uit demo 1, voor hover op oranje */
    --succes:      #1F7A4D;   /* success uit demo 1 */

    --display: "Bodoni Moda", "Times New Roman", Georgia, serif;
    --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --ruimte-1: 0.4rem;
    --ruimte-2: 0.8rem;
    --ruimte-3: 1.2rem;
    --ruimte-4: 1.8rem;
    --ruimte-5: 2.6rem;
    --ruimte-6: 4rem;
    --ruimte-7: 6rem;

    --breedte: 1320px;
    --radius:  2px;
    --soepel:  180ms cubic-bezier(0.4, 0, 0.2, 1);
    --kop-hoogte: 62px;
}

/* 2. Basis en typografie ================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kop-hoogte) + 20px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* De width- en height-attributen op een <img> gelden als opmaakhint. Zodra CSS
   alleen de breedte overschrijft, blijft de hoogte uit het attribuut staan en
   wordt de foto uitgerekt. height: auto zet dat recht en laat de browser de
   verhouding uit de attributen halen. Regels met een eigen hoogte (de vlakken
   met object-fit, het logo) zijn specifieker en blijven gewoon werken. */
img { height: auto; }

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--ruimte-3);
}

h1 { font-size: clamp(2.3rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--ruimte-3); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--pine); }

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

/* Uppercase labeltekst: de terugkerende typografische maat van de site */
.eyebrow,
.label {
    font-family: var(--body);
    font-size: 0.688rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gedempt);
    margin: 0 0 var(--ruimte-2);
}

.eyebrow--pine { color: var(--pine); }

.lood { font-size: 1.05rem; color: #3A4557; max-width: 62ch; }

.visueel-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 200;
    background: var(--pine);
    color: var(--chalk);
    padding: 0.8rem 1.2rem;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--chalk); }

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

/* 3. Layouthulpjes ======================================================== */
.omhulsel {
    width: 100%;
    max-width: var(--breedte);
    margin-inline: auto;
    padding-inline: var(--ruimte-3);
}

.sectie { padding-block: var(--ruimte-6); }
.sectie--kaal { padding-block: var(--ruimte-5); }
.sectie--wit { background: var(--chalk); }
.sectie--pine { background: var(--pine); color: var(--paper); }
.sectie--pine h2, .sectie--pine h3 { color: var(--chalk); }

.sectiekop {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--ruimte-2);
    margin-bottom: var(--ruimte-4);
}
.sectiekop h2 { margin: 0; }
.sectiekop__link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* Dubbele lijn: verwijzing naar de belijning van een tennisbaan */
.baanlijn {
    border: 0;
    border-top: 1px solid var(--pine);
    border-bottom: 1px solid var(--pine);
    height: 3px;
    opacity: 0.28;
    margin: 0;
}

/* 4. Knoppen en formulieren =============================================== */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    border: 1px solid var(--pine);
    border-radius: var(--radius);
    background: transparent;
    color: var(--pine);
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--soepel), color var(--soepel), border-color var(--soepel);
}
.knop:hover { background: var(--pine); color: var(--chalk); }

.knop--vol { background: var(--pine); color: var(--chalk); }
.knop--vol:hover { background: var(--pine-diep); border-color: var(--pine-diep); color: var(--chalk); }

.knop--licht { background: var(--chalk); border-color: var(--chalk); color: var(--pine); }
.knop--licht:hover { background: transparent; color: var(--chalk); }

.knop--omtrek-licht { border-color: var(--paper); color: var(--paper); }
.knop--omtrek-licht:hover { background: var(--paper); color: var(--pine); }

.knop--breed { width: 100%; }
.knop--klein { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.7rem; }

.knop[disabled],
.knop--uit {
    border-color: var(--lijn);
    background: var(--lijn);
    color: var(--gedempt);
    cursor: not-allowed;
    pointer-events: none;
}

.tekstknop {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--body);
    font-size: 0.78rem;
    color: var(--gedempt);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tekstknop:hover { color: var(--signal); }

label { display: block; }

.veld { margin-bottom: var(--ruimte-3); }
.veld > label,
.veldlabel {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pine);
    margin-bottom: 0.4rem;
}

.invoer,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], textarea, select {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--chalk);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1rem;
    transition: border-color var(--soepel);
}
textarea { min-height: 140px; resize: vertical; }

.invoer:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--pine);
    outline: none;
    box-shadow: 0 0 0 3px rgba(35, 43, 58, 0.14);
}

.invoer--fout { border-color: var(--signal); }

.veldfout {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--signal);
}

.veldrij { display: grid; gap: 0 var(--ruimte-3); }

.hulp { font-size: 0.8rem; color: var(--gedempt); margin-top: 0.35rem; }

.keuzerij {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
}
.keuzerij input { width: auto; min-height: 0; margin-top: 0.25rem; }

/* 5. Ticker, header en navigatie ========================================== */
.ticker {
    background: var(--pine);
    color: var(--paper);
    overflow: hidden;
    padding-block: 0.45rem;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ticker__spoor {
    display: flex;
    width: max-content;
    animation: schuif 38s linear infinite;
}
.ticker__set {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    padding-right: 2.2rem;
    white-space: nowrap;
}
.ticker__set span[aria-hidden] { opacity: 0.45; }

@keyframes schuif {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.kop {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--chalk);
    border-bottom: 1px solid var(--lijn);
}

.kop__binnen {
    display: flex;
    align-items: center;
    gap: var(--ruimte-2);
    max-width: var(--breedte);
    margin-inline: auto;
    padding: 0 var(--ruimte-3);
    min-height: var(--kop-hoogte);
}

.kop__menuknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin-left: -10px;
    border: 0;
    background: none;
    cursor: pointer;
}
.hamburger { display: block; width: 20px; }
.hamburger i {
    display: block;
    height: 1.6px;
    background: var(--ink);
    margin: 4px 0;
    transition: transform var(--soepel), opacity var(--soepel);
}

.logo { display: block; line-height: 1; margin-right: auto; }
/* Beeldlogo in dezelfde plek als het vroegere tekstlogo; hoogte gelijk aan de
   oude woord + subregel, zodat de kophoogte niet verspringt. */
.logo__beeld { display: block; width: auto; height: 36px; }
.voet__merk .logo { margin-bottom: var(--ruimte-2); }
.voet__merk .logo__beeld { height: 44px; }
.logo__woord {
    display: block;
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pine);
}
.logo__sub {
    display: block;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--gedempt);
    margin-top: 2px;
}
.logo--licht .logo__woord { color: var(--chalk); }
.logo--licht .logo__sub { color: rgba(244, 242, 236, 0.6); }

.hoofdnav { display: none; }
.hoofdnav ul { display: flex; gap: 1.6rem; }
.hoofdnav a {
    display: block;
    padding: 0.4rem 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1.5px solid transparent;
    transition: border-color var(--soepel);
}
.hoofdnav a:hover,
.hoofdnav a.is-hier { border-bottom-color: var(--pine); }
.nav-sale { color: var(--signal); }
.nav-sale:hover { color: var(--signal-diep); border-bottom-color: var(--signal-diep); }

.kop__acties { display: flex; align-items: center; gap: 0.15rem; }

.icoonknop {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.icoonknop svg {
    width: 21px; height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icoonknop:hover { color: var(--pine); }

.wagenteller {
    position: absolute;
    top: 5px; right: 3px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--signal);
    color: var(--chalk);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.zoekbalk {
    border-top: 1px solid var(--lijn);
    background: var(--chalk);
}
.zoekbalk__form {
    display: flex;
    gap: var(--ruimte-2);
    max-width: var(--breedte);
    margin-inline: auto;
    padding: var(--ruimte-3);
}

/* Mobiel menu */
.mobielmenu {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(22, 28, 38, 0.45);
}
.mobielmenu[hidden] { display: none; }

.mobielmenu__paneel {
    width: min(88%, 380px);
    height: 100%;
    background: var(--chalk);
    padding: var(--ruimte-3);
    overflow-y: auto;
    animation: schuifIn 220ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    gap: var(--ruimte-3);
}
@keyframes schuifIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.mobielmenu__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--ruimte-2);
    border-bottom: 1px solid var(--lijn);
}
.mobielmenu__titel {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gedempt);
}

.mobielmenu__zoek { display: flex; }
.mobielmenu__zoek input { border-right: 0; }
.mobielmenu__zoek button {
    display: grid;
    place-items: center;
    width: 48px;
    border: 1px solid var(--lijn);
    border-left: 0;
    background: var(--pine);
    cursor: pointer;
}
.mobielmenu__zoek svg {
    width: 19px; height: 19px;
    fill: none; stroke: var(--chalk);
    stroke-width: 1.6; stroke-linecap: round;
}

.mobielmenu__lijst a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--lijn);
    font-family: var(--display);
    font-size: 1.3rem;
}
.mobielmenu__aantal {
    font-family: var(--body);
    font-size: 0.7rem;
    color: var(--gedempt);
}
.mobielmenu__lijst--klein a {
    font-family: var(--body);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 0.4rem 0;
}

body.menu-open { overflow: hidden; }

/* 6. Meldingen ============================================================ */
.meldingen {
    max-width: var(--breedte);
    margin: var(--ruimte-3) auto 0;
    padding-inline: var(--ruimte-3);
    display: grid;
    gap: 0.5rem;
}
.melding {
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--pine);
    background: var(--pine-mist);
    font-size: 0.9rem;
}
.melding--fout { border-left-color: var(--signal); background: #FCEBE3; }
.melding--info { border-left-color: var(--gedempt); background: var(--zand); }

/* 7. Hero en homepage-secties ============================================= */
.hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 78vh;
    background: var(--pine-diep) center/cover no-repeat;
    color: var(--paper);
    isolation: isolate;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 21, 30, 0.15) 0%, rgba(16, 21, 30, 0.72) 100%);
    z-index: -1;
}
.hero__binnen {
    width: 100%;
    max-width: var(--breedte);
    margin-inline: auto;
    padding: var(--ruimte-6) var(--ruimte-3) var(--ruimte-5);
}
.hero__eyebrow { color: rgba(244, 242, 236, 0.72); }
.hero h1 {
    color: var(--chalk);
    text-transform: uppercase;
    letter-spacing: 0.005em;
    max-width: 14ch;
}
.hero__tekst {
    max-width: 42ch;
    color: rgba(244, 242, 236, 0.85);
    margin-bottom: var(--ruimte-4);
}
.hero__knoppen { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); }

/* Categorietegels */
.tegels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}
/* Beeldverhouding via padding: werkt in elke browser, ook zonder
   ondersteuning voor aspect-ratio. 133.33% = verhouding 3:4. */
.tegel {
    position: relative;
    display: block;
    padding-top: 133.33%;
    overflow: hidden;
    background: var(--zand);
}
.tegel img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.tegel:hover img { transform: scale(1.05); }
.tegel__naam {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    padding: 0.7rem 0.8rem;
    background: linear-gradient(180deg, transparent, rgba(22, 28, 38, 0.75));
    color: var(--chalk);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Clubblok */
.club {
    display: grid;
    background: var(--pine);
    color: var(--paper);
}
.club__beeld { position: relative; min-height: 260px; }
.club__beeld img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.club__tekst { padding: var(--ruimte-5) var(--ruimte-4); }
.club__tekst h2 { color: var(--chalk); }
.club__lijst { display: grid; gap: 0.6rem; margin-bottom: var(--ruimte-4); }
.club__lijst li {
    display: flex;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: rgba(244, 242, 236, 0.88);
}
.club__lijst li::before {
    content: "—";
    color: var(--stone);
    flex: none;
}

/* Verhalenblok */
.verhaal { display: grid; gap: var(--ruimte-4); align-items: center; }
.verhaal__beeld img { width: 100%; }

/* 8. Productkaarten en rasters ============================================ */
.productraster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-3) var(--ruimte-2);
}

.kaart { position: relative; display: flex; flex-direction: column; }

.kaart__beeld {
    position: relative;
    display: block;
    padding-top: 125%;              /* verhouding 4:5 */
    overflow: hidden;
    background: var(--zand);
    margin-bottom: 0.7rem;
}
.kaart__beeld img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 320ms ease;
}
.kaart__beeld img + img { opacity: 0; }
.kaart:hover .kaart__beeld img + img { opacity: 1; }

/* Zit buiten de afbeeldingslink, maar wordt eroverheen gepositioneerd
   ten opzichte van .kaart (die position: relative heeft). */
.kaart__vlaggen {
    position: absolute;
    top: 0.6rem; left: 0.6rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
}
.kaart__vlaggen:empty { display: none; }
.vlag {
    padding: 0.22rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--pine);
    color: var(--chalk);
}
.vlag--sale { background: var(--signal); }
.vlag--op { background: var(--ink); }

.kaart__cat {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gedempt);
    margin-bottom: 0.2rem;
}
.kaart__naam {
    font-family: var(--display);
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
}
.kaart__naam a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.kaart__prijs {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.kaart__oud {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--gedempt);
    text-decoration: line-through;
}
.kaart__nu { color: var(--signal); }

.kleurstippen { display: flex; gap: 4px; margin-top: 0.45rem; }
.kleurstip {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(22, 28, 38, 0.22);
}

/* Horizontaal schuivende rij (bestsellers op mobiel) */
.schuifrij {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--ruimte-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--ruimte-2);
    margin-inline: calc(var(--ruimte-3) * -1);
    padding-inline: var(--ruimte-3);
    scrollbar-width: thin;
}
.schuifrij > * { scroll-snap-align: start; }

/* 9. Shoppagina =========================================================== */
.shopkop {
    background: var(--chalk);
    border-bottom: 1px solid var(--lijn);
    padding-block: var(--ruimte-5) var(--ruimte-4);
}

.chips {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    margin-inline: calc(var(--ruimte-3) * -1);
    padding-inline: var(--ruimte-3);
}
.chip {
    flex: none;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--lijn);
    border-radius: 100px;
    background: var(--chalk);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all var(--soepel);
}
.chip:hover { border-color: var(--pine); color: var(--pine); }
.chip.is-hier { background: var(--pine); border-color: var(--pine); color: var(--chalk); }

.filterbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-2);
    padding-block: var(--ruimte-3);
}
.filterbalk__telling { font-size: 0.82rem; color: var(--gedempt); }
.filterbalk form { display: flex; align-items: center; gap: 0.5rem; }
.filterbalk select {
    min-height: 42px;
    width: auto;
    padding-right: 2rem;
    font-size: 0.8rem;
}

.leeg {
    padding: var(--ruimte-6) 0;
    text-align: center;
}
.leeg h2 { margin-bottom: var(--ruimte-2); }

/* 10. Productdetailpagina ================================================= */
.kruimels {
    padding-block: var(--ruimte-3);
    font-size: 0.72rem;
    color: var(--gedempt);
}
.kruimels a:hover { color: var(--pine); text-decoration: underline; }
.kruimels span { margin-inline: 0.4rem; opacity: 0.5; }

.detail { display: grid; gap: var(--ruimte-4); padding-bottom: var(--ruimte-6); }

.galerij__hoofd {
    position: relative;
    padding-top: 125%;
    background: var(--zand);
    overflow: hidden;
}
.galerij__hoofd img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.galerij__strip {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.galerij__mini {
    position: relative;
    width: 74px;
    height: 92px;
    border: 1px solid var(--lijn);
    background: var(--zand);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}
.galerij__mini img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.galerij__mini.is-hier { border-color: var(--pine); }

.detail__prijsrij {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.detail__btwnoot { font-size: 0.75rem; color: var(--gedempt); margin-bottom: var(--ruimte-3); }

.voorraad {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: var(--ruimte-3);
}
.voorraad::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.voorraad--ruim { color: var(--succes); }
.voorraad--laag { color: #B26B00; }
.voorraad--uitverkocht { color: var(--signal); }

.optiegroep { margin-bottom: var(--ruimte-3); }
.optieknoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.optie input { position: absolute; opacity: 0; pointer-events: none; }
.optie span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--chalk);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color var(--soepel), background var(--soepel);
}
.optie input:checked + span { border-color: var(--pine); background: var(--pine-mist); }
.optie input:focus-visible + span { outline: 2px solid var(--pine); outline-offset: 2px; }

.aantalkiezer {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--chalk);
}
.aantalkiezer button {
    width: 46px; height: 46px;
    border: 0;
    background: none;
    font-size: 1.2rem;
    color: var(--pine);
    cursor: pointer;
}
.aantalkiezer input {
    width: 46px;
    min-height: 46px;
    border: 0;
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
.aantalkiezer input::-webkit-outer-spin-button,
.aantalkiezer input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aantalkiezer input:focus { box-shadow: none; }

.koopblok {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ruimte-2);
    align-items: center;
    margin-block: var(--ruimte-3);
}
.koopblok .knop { flex: 1 1 200px; }

.uitklap { border-top: 1px solid var(--lijn); }
.uitklap summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after { content: "+"; font-size: 1.1rem; color: var(--gedempt); }
.uitklap[open] summary::after { content: "–"; }
.uitklap__inhoud { padding-bottom: var(--ruimte-3); font-size: 0.92rem; }

.spectabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.spectabel th, .spectabel td {
    padding: 0.55rem 0;
    text-align: left;
    border-bottom: 1px solid var(--lijn);
    vertical-align: top;
}
.spectabel th { width: 42%; font-weight: 600; color: var(--gedempt); }

/* 11. Winkelwagen en afrekenen ============================================ */
.paginakop {
    padding-block: var(--ruimte-5) var(--ruimte-3);
}
.paginakop h1 { margin-bottom: 0.4rem; }

.wagenlayout { display: grid; gap: var(--ruimte-4); padding-bottom: var(--ruimte-6); }

.wagenregel {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--ruimte-3);
    padding-block: var(--ruimte-3);
    border-bottom: 1px solid var(--lijn);
}
.wagenregel:first-child { border-top: 1px solid var(--lijn); }
.wagenregel__beeld {
    position: relative;
    display: block;
    padding-top: 125%;
    background: var(--zand);
    overflow: hidden;
}
.wagenregel__beeld img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.wagenregel__naam { font-family: var(--display); font-size: 1.1rem; margin: 0 0 0.2rem; }
.wagenregel__opties { font-size: 0.78rem; color: var(--gedempt); margin-bottom: 0.6rem; }
.wagenregel__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-2);
    margin-top: 0.6rem;
}
.wagenregel__prijs { font-weight: 600; }

.samenvatting {
    background: var(--chalk);
    border: 1px solid var(--lijn);
    padding: var(--ruimte-4);
    align-self: start;
}
.samenvatting h2 { font-size: 1.4rem; }
.samenvatting__rij {
    display: flex;
    justify-content: space-between;
    gap: var(--ruimte-2);
    padding-block: 0.45rem;
    font-size: 0.92rem;
}
.samenvatting__rij--totaal {
    margin-top: 0.6rem;
    padding-top: var(--ruimte-2);
    border-top: 1px solid var(--lijn);
    font-family: var(--display);
    font-size: 1.35rem;
}
.samenvatting__noot { font-size: 0.76rem; color: var(--gedempt); }

.voortgang {
    height: 4px;
    background: var(--stone);
    margin-block: 0.5rem var(--ruimte-2);
    overflow: hidden;
}
.voortgang__vulling { height: 100%; background: var(--pine); }

.kassalijst { border-top: 1px solid var(--lijn); margin-bottom: var(--ruimte-3); }
.kassaregel {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: var(--ruimte-2);
    align-items: center;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--lijn);
    font-size: 0.86rem;
}
.kassaregel img { width: 52px; height: 65px; object-fit: cover; background: var(--zand); }
.kassaregel__meta { color: var(--gedempt); font-size: 0.76rem; }

.stappen {
    display: flex;
    gap: var(--ruimte-3);
    padding-block: var(--ruimte-2);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gedempt);
}
.stappen li.is-hier { color: var(--pine); }
.stappen li.is-klaar { color: var(--pine); opacity: 0.6; }

.blokkop {
    font-family: var(--display);
    font-size: 1.3rem;
    margin: var(--ruimte-4) 0 var(--ruimte-3);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lijn);
}
.blokkop:first-child { margin-top: 0; }

.bevestiging {
    max-width: 640px;
    margin-inline: auto;
    padding-block: var(--ruimte-6);
    text-align: center;
}
.bevestiging__nummer {
    display: inline-block;
    margin-block: var(--ruimte-2) var(--ruimte-3);
    padding: 0.6rem 1.2rem;
    background: var(--pine);
    color: var(--chalk);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

/* 12. Tekstpagina's en contact ============================================ */
.tekst { max-width: 74ch; padding-bottom: var(--ruimte-6); }
.tekst h2 { margin-top: var(--ruimte-5); font-size: 1.6rem; }
.tekst h3 { margin-top: var(--ruimte-4); font-size: 1.15rem; }
.tekst ul { margin: 0 0 var(--ruimte-3); padding-left: 1.1rem; list-style: disc; }
.tekst li { margin-bottom: 0.35rem; }
.tekst a { text-decoration: underline; text-underline-offset: 3px; }

.inhoudsopgave {
    background: var(--chalk);
    border-left: 3px solid var(--pine);
    padding: var(--ruimte-3);
    margin-bottom: var(--ruimte-4);
}
.inhoudsopgave ul { list-style: none; padding: 0; margin: 0; }
.inhoudsopgave a { font-size: 0.9rem; }

.contactlayout { display: grid; gap: var(--ruimte-5); padding-bottom: var(--ruimte-6); }
.contactkaart {
    background: var(--chalk);
    border: 1px solid var(--lijn);
    padding: var(--ruimte-4);
}
.contactfeiten { display: grid; gap: var(--ruimte-3); margin-bottom: var(--ruimte-4); }
.contactfeit__label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gedempt);
}
.contactfeit__waarde { font-size: 1rem; }

.cijfers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-3);
    margin-block: var(--ruimte-4);
}
.cijfer__getal {
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--pine);
}
.cijfer__label { font-size: 0.78rem; color: var(--gedempt); }

/* 13. Service-strip en footer ============================================= */
.service {
    background: var(--chalk);
    border-top: 1px solid var(--lijn);
    padding-block: var(--ruimte-5);
}
.service__raster { display: grid; gap: var(--ruimte-4); }
.service__item svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--pine);
    stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    margin-bottom: 0.6rem;
}
.service__item h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.service__item p { font-size: 0.86rem; color: var(--gedempt); margin: 0; }

.voet {
    background: var(--pine);
    color: rgba(244, 242, 236, 0.78);
    padding-block: var(--ruimte-5) var(--ruimte-3);
    font-size: 0.88rem;
}
.voet a:hover { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.voet__boven { display: grid; gap: var(--ruimte-5); }
.voet__pitch { max-width: 40ch; }

.nieuwsbrief label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--chalk);
    margin-bottom: 0.5rem;
}
.nieuwsbrief__rij { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nieuwsbrief input {
    flex: 1 1 200px;
    background: transparent;
    border-color: rgba(244, 242, 236, 0.35);
    color: var(--chalk);
}
.nieuwsbrief input::placeholder { color: rgba(244, 242, 236, 0.5); }
.nieuwsbrief input:focus {
    border-color: var(--chalk);
    box-shadow: 0 0 0 3px rgba(244, 242, 236, 0.14);
}

.voet__kolommen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ruimte-4);
}
.voet__kolom h4 {
    font-family: var(--body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--chalk);
    margin-bottom: var(--ruimte-2);
}
.voet__kolom li { margin-bottom: 0.45rem; }

.voet__onder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimte-2);
    margin-top: var(--ruimte-5);
    padding-top: var(--ruimte-3);
    border-top: 1px solid rgba(244, 242, 236, 0.18);
    font-size: 0.76rem;
}
.voet__onder p { margin: 0; }

.betaalwijzen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.betaalwijzen li {
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(244, 242, 236, 0.3);
    border-radius: var(--radius);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

/* 14. Media queries ======================================================= */
@media (min-width: 600px) {
    .omhulsel { padding-inline: var(--ruimte-4); }
    .kop__binnen, .zoekbalk__form, .meldingen { padding-inline: var(--ruimte-4); }
    .schuifrij, .chips { margin-inline: calc(var(--ruimte-4) * -1); padding-inline: var(--ruimte-4); }

    .productraster { grid-template-columns: repeat(3, 1fr); gap: var(--ruimte-4) var(--ruimte-3); }
    .tegels { grid-template-columns: repeat(3, 1fr); }
    .service__raster { grid-template-columns: repeat(2, 1fr); }
    .veldrij--twee { grid-template-columns: 1fr 1fr; }
    .cijfers { grid-template-columns: repeat(4, 1fr); }
    .schuifrij { grid-auto-columns: 38%; }
    .wagenregel { grid-template-columns: 110px 1fr; }
}

@media (min-width: 900px) {
    :root { --kop-hoogte: 74px; }

    .kop__menuknop { display: none; }
    .hoofdnav { display: block; margin-inline: auto; }
    .logo { margin-right: 0; }
    .logo__woord { font-size: 1.6rem; }

    .hero { min-height: 88vh; }
    .hero__binnen { padding-bottom: var(--ruimte-6); }

    /* Eén kolom per categorie, zodat de tegelrij één rij blijft. */
    .tegels { grid-template-columns: repeat(6, 1fr); }
    .productraster { grid-template-columns: repeat(4, 1fr); }
    .schuifrij {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(5, 1fr);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }

    .club { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .club__beeld { min-height: 100%; }
    .club__tekst { padding: var(--ruimte-6); align-self: center; }

    .verhaal { grid-template-columns: 1fr 1fr; gap: var(--ruimte-6); }

    .detail { grid-template-columns: 1.1fr 1fr; gap: var(--ruimte-6); align-items: start; }
    .detail__info { position: sticky; top: calc(var(--kop-hoogte) + 24px); }

    .wagenlayout { grid-template-columns: 1.7fr 1fr; align-items: start; }
    .samenvatting { position: sticky; top: calc(var(--kop-hoogte) + 24px); }

    .contactlayout { grid-template-columns: 1.2fr 1fr; align-items: start; }

    .service__raster { grid-template-columns: repeat(4, 1fr); }
    .voet__boven { grid-template-columns: 1fr 1.35fr; gap: var(--ruimte-6); }
    .voet__kolommen { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
    .detail { grid-template-columns: 1.25fr 1fr; }

    /* Meer lucht langs de randen op brede schermen */
    .omhulsel, .kop__binnen, .zoekbalk__form, .meldingen { padding-inline: var(--ruimte-5); }
    .schuifrij, .chips { margin-inline: calc(var(--ruimte-5) * -1); padding-inline: var(--ruimte-5); }
}

/* Respecteer de systeeminstelling voor minder beweging */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ticker__spoor { animation: none; }
}

/* Afdrukweergave: alleen de inhoud, geen navigatie */
@media print {
    .ticker, .kop, .mobielmenu, .service, .voet, .koopblok { display: none; }
    body { background: #fff; }
}