/* Webshop-componenten — huisstijl docs/11 (B20): wit, zwart, accent #1E1984,
   radius 0, geen schaduwen, hover = onderstreping/blauw.
   LUCHTIG (10-06-2026): geen hokjes/omkaderingen — structuur komt van wit,
   typografie en horizontale haarlijnen; randen alleen waar functioneel
   (invoervelden, knoppen, kleurstalen, tabellen, dialoog). */

/* ── Verfijning (subtiel/secuur/chic): ruim wit, rustige maatvoering ── */
.hero { padding: 4rem 1.5rem 2.5rem; }
.hero h1 { font-size: 2.1rem; margin-bottom: .75rem; }
.hero p { max-width: 46rem; color: var(--body); }
.page-section { padding: 2.75rem 1.5rem; }

/* ── Shop-header: zoekbalk + lijstje ── */
.shop-search {
    display: flex;
    flex: 1;
    min-width: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    position: relative;
}
/* Zoekfocus: de onderlijn veegt blauw vol (B29) */
.shop-search::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease-out;
}
.shop-search:focus-within::after { transform: scaleX(1); }
.shop-search input {
    flex: 1;
    border: none;
    min-width: 0;
}
.shop-search input:focus { outline-offset: -2px; }
.shop-search button {
    display: inline-flex;
    align-items: center;
    border: none;
    background: var(--bg);
    padding: 0 1.2rem;
    cursor: pointer;
    color: var(--ink);
}
.shop-search button svg { width: 18px; height: 18px; }
.shop-search button:hover { color: var(--brand); }

/* Taalkeuze: compacte dropdown (huidige taal op de knop, rest uitklapbaar).
   Zelfde rustige stijl als de zoek-loep. */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch__knop {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 1rem;
    border: none;
    border-left: 1px solid var(--brand);
    background: var(--bg);
    color: var(--brand);
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .08em;
    cursor: pointer;
}
.lang-switch__knop:hover,
.lang-switch__knop[aria-expanded="true"] { background: var(--brand); color: #fff; }
.lang-switch__pijl { font-size: .7rem; line-height: 1; }
.lang-switch__lijst {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    background: var(--bg);
    border: 1px solid var(--line);
    animation: sub-rijs .22s ease-out;
    min-width: 3.5rem;
}
.lang-switch__lijst a {
    display: block;
    padding: .6rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-decoration: none;
    color: var(--ink);
    transition: color .2s ease-out, background-color .2s ease-out;
}
.lang-switch__lijst a:hover { background: var(--brand); color: #fff; }

.lijstje-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: none;
    padding: .6rem 0;
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: .03em;
    white-space: nowrap;
}
.lijstje-link:hover { color: var(--brand); border-color: var(--brand); }
.lijstje-count {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    background: var(--brand);
    color: #fff;
    font-size: .85rem;
    padding: 0 .3em;
}

/* ── Categorienavigatie (onder de header) ──
   Subtiel en chic: kleine kapitalen met ruime letterspatiëring, licht
   gewicht. Rechts de maatwerk-CTA — hét belangrijkste vaste element. */
.cat-nav {
    /* Alleen een bovenrand: de onderrand komt al van de header zelf
       (main.css) — twee randen op elkaar gaf een dikkere onderlijn. */
    border-top: 1px solid var(--line);
    background: var(--bg);
}
.cat-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}
.cat-nav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    flex: 1;
}
.cat-nav__item { position: relative; }
.cat-nav__item > a {
    display: block;
    padding: .9rem 1.1rem;
    text-decoration: none;
    color: var(--ink);
    font-weight: 400;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cat-nav__maatwerk {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 1.6rem;
}
.cat-nav__maatwerk:hover { text-decoration: underline; color: #fff; }

/* Lijstje-knop naast de maatwerk-CTA — zelfde maatvoering, omgekeerde kleur */
.cat-nav__acties { display: flex; align-items: stretch; }
.lijstje-menu { position: relative; display: flex; }
.cat-nav__lijstje {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 0 1.4rem;
    /* Alleen zijranden (B28): de boven- en onderrand vielen samen met de
       cat-nav-/headerlijn en gaven een dubbele lijn. */
    border-left: 1px solid var(--brand);
    border-right: 1px solid var(--brand);
    color: var(--brand);
    background: var(--bg);
    text-decoration: none;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cat-nav__lijstje:hover { background: var(--brand); color: #fff; }
.cat-nav__lijstje:hover .lijstje-count { background: #fff; color: var(--brand); }
.hartje { font-size: 1.05rem; line-height: 1; letter-spacing: 0; }

/* Dropdown met de bewaarde items (hover/focus, alleen als er iets in zit) */
.lijstje-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 320px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1rem;
    animation: sub-rijs .22s ease-out;
}
.lijstje-menu:hover .lijstje-dropdown:not([hidden]),
.lijstje-menu:focus-within .lijstje-dropdown:not([hidden]) { display: block; }
.lijstje-dropdown__rij {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
}
.lijstje-dropdown__rij:first-child { border-top: none; padding-top: 0; }
.lijstje-dropdown__rij:hover { color: var(--brand); }
.lijstje-dropdown__rij img { width: 38px; height: 50px; object-fit: cover; background: #f4f4f4; flex: 0 0 auto; }
.lijstje-dropdown__rij .hartje { color: var(--brand); }
.lijstje-dropdown__meer { color: var(--muted); font-size: .85rem; padding: .4rem 0 .6rem; }
.lijstje-dropdown .btn { width: 100%; justify-content: center; margin-top: .75rem; }

/* Zoeken in de cat-nav: loep-knop (uiterst rechts) + dropdown met zoekveld.
   De knop volgt dezelfde stijl als de lijstje-ingang; de dropdown die van de
   lijstje-dropdown. */
.zoek-menu { position: relative; display: flex; }
.cat-nav__zoek {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.1rem;
    border: none;
    background: var(--bg);
    color: var(--brand);
    cursor: pointer;
}
.cat-nav__zoek:hover,
.cat-nav__zoek[aria-expanded="true"] { background: var(--brand); color: #fff; }
.zoek-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 320px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 1rem;
    animation: sub-rijs .22s ease-out;
}
/* Binnen de dropdown pakt het zoekveld de volle breedte. */
.zoek-dropdown .shop-search { width: 100%; }

/* Zwevende "Bekijk mijn lijstje" — popt dansend in beeld (B29) */
.lijstje-zweef {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    animation: zweef-pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes zweef-pop {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
}

/* Lijstje-toast (B22): levendige bevestiging bij bewaren — de enige plek
   waar iets mag dansen. Geen schaduw, geen ronding, wel een blij hartje. */
.shop-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--brand);
    color: #fff;
    padding: .85rem 1.5rem;
    font-weight: 500;
    letter-spacing: .03em;
    white-space: nowrap;
    animation: toast-in .35s ease-out;
}
.shop-toast .hartje {
    color: #fff;
    animation: hart-dans .9s ease-in-out;
}
.shop-toast--weg { opacity: 0; transition: opacity .3s ease; }
@keyframes toast-in {
    from { transform: translate(-50%, 1.25rem); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes hart-dans {
    0%, 100% { transform: scale(1) rotate(0); }
    20%      { transform: scale(1.4) rotate(-10deg); }
    45%      { transform: scale(.9) rotate(8deg); }
    70%      { transform: scale(1.2) rotate(-4deg); }
}

/* Hartje in de nav klopt en de teller popt zodra er iets bijkomt (B29) */
.hart-beat { display: inline-block; animation: hart-klop .6s ease-out; }
@keyframes hart-klop {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.45); }
    60%      { transform: scale(.92); }
    80%      { transform: scale(1.15); }
}
.tel-pop { animation: tel-pop .4s ease-out; }
@keyframes tel-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Dropdown en submenu's komen met een zachte fade-rijs binnen */
@keyframes sub-rijs {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* Onderstreep-sweep (B29) i.p.v. statische underline */
.cat-nav__item > a { position: relative; transition: color .2s ease-out; }
.cat-nav__item > a::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: .65rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease-out;
}
.cat-nav__item > a:hover,
.cat-nav__item > a[aria-current="true"] { color: var(--brand); }
.cat-nav__item > a:hover::after,
.cat-nav__item > a[aria-current="true"]::after { transform: scaleX(1); }
.cat-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 220px;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: .4rem 0;
    animation: sub-rijs .22s ease-out;
}
.cat-nav__item:hover .cat-nav__sub,
.cat-nav__item:focus-within .cat-nav__sub { display: block; }
.cat-nav__sub a {
    display: block;
    padding: .45rem 1rem;
    text-decoration: none;
    color: var(--ink);
    transition: color .2s ease-out, padding-left .2s ease-out;
}
.cat-nav__sub a:hover { color: var(--brand); padding-left: 1.25rem; }

/* Homefoto's (B40): eerste collectie-foto per categorie, geclipt en met
   dezelfde trage zoom als productkaarten; zonder foto blijft het blok
   tekst-only (wrapper blijft hidden — geen dummies). */
.home-cat__beeld {
    display: block;
    overflow: hidden;
    margin-bottom: .9rem;
}
.home-cat__beeld img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f4f4f4;
    transition: transform .6s ease-out;
    animation: rijs .45s ease-out;
}
.home-cat:hover .home-cat__beeld img { transform: scale(1.05); }

/* ── Homepage: categorie-wegwijzerblokken — open, haarlijn boven ── */
.home-cats {
    display: grid;
    /* Ondergrens omlaag van 200px naar 165px: met de ruimere gap hieronder
       pasten de vijf categorieën anders niet meer op een rij en viel
       Groepen als eenzame kaart op een tweede rij. */
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    /* Echte tussenruimte i.p.v. de zij-padding van de kaarten. De foto's staan
       vaak op een witte achtergrond en liepen daardoor visueel in elkaar over.
       De lijn onder de titel staat op deze container en blijft dus gewoon
       doorlopen, ongeacht de gap. */
    gap: 4rem 3.5rem;
    /* Doorlopende lijn onder de titel, over de volle breedte. */
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
}
.home-cat {
    /* Geen zij-padding meer: de foto's lijnen nu uit met de titel en de lijn
       erboven, en de ruimte ertussen komt uit de gap hierboven. */
    padding: 0;
    text-decoration: none;
    color: var(--ink);
}
.home-cat:hover h3 { color: var(--brand); text-decoration: underline; }
.home-cat h3 { margin-bottom: .6rem; font-size: 1.1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.home-cat p { color: var(--muted); font-size: .92rem; }

/* ── Homepage: "Zo werkt het" — genummerde stappen, haarlijn per stap ── */
.stappen {
    list-style: none;
    counter-reset: stap;
    margin: 1.5rem 0 0;
    padding: 0;
}
.stappen li {
    counter-increment: stap;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0 .75rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.stappen li::before {
    content: counter(stap);
    color: var(--brand);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ── Merk-hero: beeld voert, tekst volgt ──
   Klantwens 12-08-2026: minder tekst, meer branding. Eén kop, één zin, één
   knop naast een vierkante merkfoto. Vierkant, want het bronbeeld is dat ook;
   een breed uitgesneden hero zou de danseres halveren. */
.hero--merk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}
.hero--merk .hero__tekst { max-width: 30rem; }
.hero--merk h1 { font-size: 2.3rem; line-height: 1.15; margin-bottom: 1rem; }
.hero--merk p { color: var(--muted); margin-bottom: 1.75rem; }
.hero__beeld img {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f4f4f4;
}

/* Kerncijfers: het verhaal in één oogopslag i.p.v. drie alinea's. */
.kerncijfers { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.kerncijfers li { padding-right: 2.5rem; margin-right: 2.5rem; border-right: 1px solid var(--line); }
.kerncijfers li:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.kerncijfers strong { display: block; font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
.kerncijfers span { color: var(--muted); font-size: .85rem; }

/* Gelaagd tonen: wat niet meteen nodig is, zit achter een regel die je
   openklapt. Niets is verwijderd, alles is één klik diep. */
.meer { border-top: 1px solid var(--line); margin-top: 1.5rem; }
.meer > summary {
    cursor: pointer;
    padding: .9rem 0;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
}
.meer > summary::-webkit-details-marker { display: none; }
.meer > summary::after { content: "+"; color: var(--brand); font-size: 1.15rem; line-height: 1; margin-left: auto; }
.meer[open] > summary::after { content: "\2212"; }
.meer > summary:hover { color: var(--brand); }
.meer > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.meer__inhoud { padding: .25rem 0 1.5rem; max-width: 42rem; }
.meer__inhoud p + p { margin-top: .8rem; }

/* Winkels als kaartjes met een foto per winkel. */
.winkel-kaartjes { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
.winkel-kaartje__foto {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f4f4f4;
    margin-bottom: 1rem;
}
.winkel-kaartje h3 { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }
.winkel-kaartje p { margin-bottom: .25rem; font-size: .95rem; }
.winkel-kaartje .winkel-uren { color: var(--muted); font-size: .9rem; }

@media (max-width: 800px) {
    .hero--merk { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.25rem 2.5rem; }
    .hero--merk h1 { font-size: 1.8rem; }
    .winkel-kaartjes { grid-template-columns: 1fr; gap: 2.5rem; }
    /* Op gsm wrapten de drie cijfers halfslachtig: "75 jaar" kwam alleen op de
       eerste regel te staan met een verticale streep die nergens naartoe liep.
       Onder elkaar met een horizontale haarlijn leest rustiger. */
    .kerncijfers { display: block; }
    .kerncijfers li {
        padding: 0 0 .85rem;
        margin: 0 0 .85rem;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .kerncijfers li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;
    }
    .kerncijfers strong { font-size: 1.3rem; }
}

/* De winkelfilm: stilstaand beeld met een afspeelknop. Pas op klik wordt de
   video geladen (home.js) — geen autoplay, geen ongevraagde download. */
/* De film sluit aan onder de winkelkaartjes (klantwens 12-08-2026). */
.winkelfilm { margin-top: 2.5rem; }
.winkelfilm__start {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.winkelfilm__start img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f4f4f4;
    transition: opacity .3s ease;
}
.winkelfilm__start:hover img { opacity: .9; }
.winkelfilm__start:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Afspeeldriehoek: wit vlak met blauwe pijl, geen ronding (B20). */
.winkelfilm__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: var(--brand);
    font-size: 1.4rem;
    line-height: 1;
    padding: .9rem 1.4rem;
}
.winkelfilm__label {
    display: block;
    color: var(--muted);
    font-size: .88rem;
    padding-top: .6rem;
}
.winkelfilm__video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; }

@media (max-width: 800px) {
    .winkelverhaal { grid-template-columns: 1fr; gap: 1.5rem; }
    .winkelfilm { margin-top: 2rem; }
}

/* ── Sectieblokken — open, haarlijn boven ── */
.block {
    border-top: 1px solid var(--line);
    padding: 2.5rem 0;
    margin-top: 2.5rem;
}
.block h2 { margin-bottom: .75rem; }
.block .btn { margin-top: 1rem; }
.block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
    margin-top: 2rem;
}
.block-grid > div {
    padding: 1.75rem 0 2.25rem;
    border-top: 1px solid var(--line);
    /* Kolom-layout zodat de kaart onderaan kan uitlijnen, ook als de ene
       winkel meer openingsuren-regels heeft dan de andere. */
    display: flex;
    flex-direction: column;
}
/* Kaart naar de bodem duwen → beide winkelkaarten staan op dezelfde hoogte,
   ongeacht hoeveel tekst erboven staat. */
.block-grid > div .winkel-kaart { margin-top: auto; }

/* Actieve filters: spiegel van wat er aanstaat. Vooral nodig omdat de
   doelgroepkeuze onthouden wordt (B45) en zichzelf stil weer aanzet; zonder
   deze rij zag je alleen "5 van de 48 producten" zonder te weten waarom. */
.actieve-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.actieve-filters__kop { color: var(--muted); font-size: .85rem; margin-right: .15rem; }
.actief-filter {
    font: inherit;
    font-size: .85rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.actief-filter:hover { border-color: var(--brand); color: var(--brand); }
.actief-filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.actief-filter__x { color: var(--brand); font-size: 1rem; line-height: 1; }

/* Soort-snelfilters bovenaan de productlijst (Alles · Pakjes · Schoenen · …) */
.soort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
}
.soort-chip {
    font: inherit;
    font-size: .9rem;
    line-height: 1.2;
    padding: .45rem .9rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink, #111827);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.soort-chip:hover { border-color: var(--brand); color: var(--brand); }
.soort-chip.is-actief {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Collectiepagina: filters + grid ── */
.collectie-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
/* Kop, chips en filter staan als losse layout-kinderen zodat ze op mobile
   apart te herordenen zijn. Desktop: filters links (over alle rijen), kop +
   chips + producten in de rechterkolom. */
.collectie-layout > aside { grid-column: 1; grid-row: 1 / 4; }
.collectie-layout > .collectie-kop { grid-column: 2; grid-row: 1; }
.collectie-layout > .soort-chips { grid-column: 2; grid-row: 2; margin: 0 0 1.5rem; }
.collectie-layout > section { grid-column: 2; grid-row: 3; }
/* Kruimelpad uitlijnen met de collectie-inhoud (zelfde breedte + padding),
   want het staat als losse <nav> náást .collectie-layout, niet erin. */
main > .breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0;
}
.filters h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.filter-group { border-top: 1px solid var(--line); padding: 1rem 0; }
.filter-group h3 { font-size: .95rem; margin-bottom: .6rem; }
.filter-group label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem 0;
    font-size: .95rem;
    cursor: pointer;
}
.filter-group input[type="checkbox"],
.filter-group input[type="radio"] {
    width: 1rem; height: 1rem;
    accent-color: var(--brand);
    padding: 0;
}
/* B30: een cirkel is een cirkel — de focus-/selectiering volgt het rondje
   (brand.css tekent anders een vierkant kader om de radio). */
.filter-group input[type="radio"] {
    border-radius: 50%;
}
.filter-group input[type="radio"]:focus {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.filter-count { color: var(--muted); font-size: .85rem; }
/* "Meer kleuren" (B46): tekstknop in de filterkolom, alleen mobiel relevant */
.filter-meer {
    border: none;
    background: var(--bg);
    padding: .35rem 0;
    color: var(--brand);
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer;
}
.filters-toggle { display: none; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-content: start;
    /* B36: producten plakken nooit tegen elkaar — royale tussenruimte */
    gap: 3.5rem 2.5rem;
}
.product-card {
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* B29: kaarten rijzen gestaffeld op (keyframes `rijs` in main.css) */
    animation: rijs .45s ease-out both;
}
.product-grid .product-card:nth-child(2) { animation-delay: .05s; }
.product-grid .product-card:nth-child(3) { animation-delay: .1s; }
.product-grid .product-card:nth-child(4) { animation-delay: .15s; }
.product-grid .product-card:nth-child(5) { animation-delay: .2s; }
.product-grid .product-card:nth-child(6) { animation-delay: .25s; }
.product-grid .product-card:nth-child(7) { animation-delay: .3s; }
.product-grid .product-card:nth-child(8) { animation-delay: .35s; }
.product-card:hover .product-card__name { color: var(--brand); background-size: 100% 1px; }
/* Foto zoomt traag binnen zijn kader; de wrapper clipt (geen schaduw/ronding) */
.product-card__beeld { display: block; overflow: hidden; position: relative; }

/* Bewaar-hartje op de kaart (B37): linksboven op de foto, direct vanuit de
   collectie aan het lijstje toevoegen. Wit vierkantje met 1px rand; hover en
   bewaard = gevuld blauw. Het hartje danst bij toevoegen (B29). */
.kaart-hart {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--brand);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease-out, color .2s ease-out,
                border-color .2s ease-out, transform .15s ease-out;
}
.kaart-hart:hover,
.kaart-hart[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.kaart-hart:active { transform: scale(.88); }
.product-card__img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f4f4f4;
    transition: transform .6s ease-out;
}
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__name {
    font-weight: 500;
    letter-spacing: .02em;
    width: fit-content;
    /* Twee regels reserveren (ook bij een korte naam) zodat de prijs en de
       kleurstippen in élke kaart op dezelfde hoogte beginnen → nette uitlijning
       over de hele rij. Langere namen worden na 2 regels afgekapt. */
    line-height: 1.35;
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* Onderstreep-sweep i.p.v. statische underline */
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .3s ease-out, color .2s ease-out;
}
.product-card__price { color: var(--ink); }
.product-card__price .vanaf { color: var(--muted); font-size: .9rem; }
.color-dots { display: flex; gap: .3rem; }
.color-dot {
    width: 14px; height: 14px;
    border: 1px solid var(--line);
    display: inline-block;
}
.badge {
    display: inline-block;
    color: var(--brand);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    width: fit-content;
}
.grid-status { padding: 1.5rem; color: var(--muted); }
.collectie-intro { color: var(--muted); max-width: 44rem; margin: .5rem 0 1.5rem; }
/* Categoriemelding (offerte / kom-passen) — opvallend infoblok boven het grid */
.cat-notice {
    max-width: 44rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-soft, #f5f7fa);
    border-left: 3px solid var(--brand);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Verborgen (leeg) → écht niets tonen: het display:flex hierboven overrulet
   anders het hidden-attribuut, waardoor een lege box mét border-left blijft
   staan. */
.cat-notice[hidden] { display: none; }

/* ── Productdetail ── */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}
.product-detail .breadcrumbs { grid-column: 1 / -1; margin: 0; }

/* Een foto is zo hoog als hij is (klantfeedback 17-08-2026). Er stond een vast
   staand kader van 3/4 omheen met object-fit: contain, en de lookbookfoto's van
   het atelier zijn liggend. Die kregen daardoor een witte band boven én onder,
   alsof de foto ergens middenin zweefde. Geen kader meer: breedte volgen,
   hoogte laten volgen uit de verhouding van het beeld zelf. Afkappen doen we
   niet, want op een liggende atelierfoto valt dan net de helft van het kostuum
   weg. */
.product-photos img {
    width: 100%;
    height: auto;
    display: block;
}
.product-photos .thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.product-photos .thumbs img {
    width: 72px; height: 96px;
    cursor: pointer;
    /* Vast duimnagelformaat, dus hier wél bijsnijden: uitrekken zou de foto
       vervormen en contain zou de witte band terugbrengen. */
    object-fit: cover;
}
.product-photos .thumbs img.actief { border-color: var(--brand); outline: 1px solid var(--brand); }

/* ── Foto-carrousel (B47): swipebaar spoor, alleen bij meerdere foto's ── */
.product-photos { position: relative; }
.foto-spoor {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.foto-spoor::-webkit-scrollbar { display: none; }
.foto-spoor .foto-dia {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: center;
}
/* De dia's van één product komen uit dezelfde reeks en hebben dus dezelfde
   verhouding; het spoor lijnt ze bovenaan uit zodat een enkele afwijkende foto
   geen witte band onder de andere legt. */
.foto-spoor { align-items: flex-start; }
/* Pijlen: vierkant, 1px rand, hover gevuld blauw; verborgen op touch */
.foto-pijl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background-color .2s ease-out, color .2s ease-out;
}
.foto-pijl:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.foto-pijl--vorige { left: .5rem; }
.foto-pijl--volgende { right: .5rem; }
.foto-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .6rem; }
.foto-dot {
    width: .6rem;
    height: .6rem;
    border: 1px solid var(--brand);
    border-radius: 50%;
    background: var(--bg);
    padding: 0;
    cursor: pointer;
}
.foto-dot[aria-current="true"] { background: var(--brand); }

@media (hover: none) {
    /* Op touch swipe je gewoon; pijlen en thumbnails weg, stippen blijven */
    .foto-pijl { display: none; }
    .product-photos .thumbs { display: none; }
}

.product-info h1 { font-size: 1.7rem; margin-bottom: .5rem; }
.product-info .prijs { font-size: 1.3rem; font-weight: 700; margin: .5rem 0 .2rem; }
.product-info .prijs-uitleg { color: var(--muted); font-size: .9rem; margin-bottom: 1.25rem; }

/* ?-infoknop (B21): uitleg staat niet meer in beeld maar verschijnt bij klik.
   Vierkant, 1px rand, hover/open = gevuld blauw — conform de huisstijl. */
.info-knop {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    /* B30: het vraagtekentje staat in een cirkel — subtieler */
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
.info-knop {
    transition: background-color .2s ease-out, color .2s ease-out,
                border-color .2s ease-out, transform .15s ease-out;
}
.info-knop:active { transform: scale(.88); }
.info-knop:hover,
.info-knop[aria-expanded="true"] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.info-kop { display: flex; align-items: center; gap: .5rem; }
.info-kop h3 { margin-bottom: 0; }
/* Lucht onder de prijsrij: zonder prijs (maatwerk) blijft alleen het
   ?-knopje over en dat plakte tegen de scheidingslijn van het Maat-blok.
   Marge i.p.v. padding zodat hij samenvalt met de margin-top van de
   uitlegtekst wanneer die openklapt. */
.prijs-rij { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.prijs-rij .prijs { margin: .5rem 0 .2rem; }
.info-tekst { margin-top: .6rem; }

.keuze { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.keuze h3 { font-size: .95rem; margin-bottom: .6rem; }
.keuze .info-kop { margin-bottom: .6rem; }
.keuze .info-kop h3 { margin-bottom: 0; }
.keuze-opties { display: flex; flex-wrap: wrap; gap: .5rem; }
.keuze-optie {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: .45rem .8rem;
    cursor: pointer;
    font-size: .95rem;
    color: var(--ink);
    transition: background-color .2s ease-out, color .2s ease-out,
                border-color .2s ease-out, transform .15s ease-out;
}
.keuze-optie:active { transform: scale(.95); }
/* Gekozen optie doet een korte "pluk" (B29) */
.keuze-optie[aria-pressed="true"] { animation: pluk .32s ease-out; }
@keyframes pluk {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.09); }
    70%  { transform: scale(.97); }
    100% { transform: scale(1); }
}
.keuze-optie:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.keuze-optie[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.keuze-optie:hover .color-dot,
.keuze-optie[aria-pressed="true"] .color-dot { border-color: #fff; }
.keuze-optie .color-dot { vertical-align: -2px; margin-right: .35rem; }
.maat-hulp { font-size: .9rem; margin-top: .5rem; display: inline-block; }

.maat-gids-knop {
    margin-top: .6rem;
    background: var(--bg);
    border: none;
    padding: 0;
    color: var(--brand);
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Meetfiguur-overlay (B19): wit, kader, geen scrim/schaduw ── */
.maat-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg);
    overflow-y: auto;
    padding: 2rem 1rem;
}
.maat-overlay:not([hidden]) { animation: overlay-fade .2s ease-out; }
.maat-overlay:not([hidden]) .maat-overlay__paneel { animation: rijs .3s ease-out; }
@keyframes overlay-fade { from { opacity: 0; } }
.maat-overlay__paneel {
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid var(--line);
    padding: 2rem;
    position: relative;
}
.maat-overlay__sluit,
.deel-sluit {
    position: absolute;
    top: 0; right: 0;
    border: none;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    font-size: 1.4rem;
    line-height: 1;
    width: 2.6rem; height: 2.6rem;
    cursor: pointer;
    color: var(--ink);
}
.maat-overlay__sluit:hover,
.deel-sluit:hover { color: var(--brand); }

/* ── Deel-dialoog (B31): één custom share-popup voor product én lijstje ── */
.deel-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--bg);
    overflow-y: auto;
    padding: 2rem 1rem;
}
.deel-overlay:not([hidden]) { animation: overlay-fade .2s ease-out; }
.deel-overlay:not([hidden]) .deel-paneel { animation: rijs .3s ease-out; }
.deel-paneel {
    max-width: 460px;
    margin: 10vh auto 0;
    border: 1px solid var(--line);
    padding: 2rem;
    position: relative;
    background: var(--bg);
}
.deel-paneel h2 {
    font-size: 1.25rem;
    margin-bottom: .2rem;
    padding-right: 2.5rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.deel-paneel h2 .hartje {
    color: var(--brand);
    animation: hart-dans .9s ease-in-out;
}
.deel-onderwerp { color: var(--muted); margin-bottom: 1.5rem; }
.deel-opties { display: flex; flex-direction: column; gap: .6rem; }
.deel-opties .btn { width: 100%; justify-content: center; }
.deel-link {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}
.deel-link input { flex: 1; min-width: 0; font-size: .85rem; color: var(--muted); }
.maat-overlay__inhoud {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
    margin: 1.5rem 0 1rem;
}
.meetfiguur { width: 100%; height: auto; }
.meet-instructies {
    list-style: none;
    counter-reset: meetstap;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.meet-instructies li { counter-increment: meetstap; display: flex; gap: .7rem; align-items: baseline; }
.meet-instructies li::before {
    content: counter(meetstap);
    flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem;
    border: 1px solid var(--brand);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}
.maat-tabel {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    margin: 1rem 0;
    font-size: .92rem;
}
.maat-tabel th, .maat-tabel td {
    border: 1px solid var(--line);
    padding: .5rem .7rem;
    text-align: left;
}
.maat-tabel th { font-weight: 500; letter-spacing: .03em; }
/* Maattabel-disclaimer (geen retourbeleid, kom passen) — opvallend kader */
.maat-disclaimer {
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: var(--bg-soft, #f5f7fa);
    border-left: 3px solid var(--brand);
    font-size: .92rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .maat-overlay__inhoud { grid-template-columns: 1fr; }
    .meetfiguur { max-width: 220px; margin: 0 auto; }
}

.product-acties { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0; }
.product-beschrijving { border-top: 1px solid var(--line); padding: 1.5rem 0 .25rem; }

/* Alinea's uit de beschrijving blijven alinea's. De tekst gaat als één string
   via textContent de <p> in (nooit innerHTML, CLAUDE.md), dus zonder dit
   plakken de regels aan elkaar tot één blok. Speelt sinds de pointes-tekst van
   Pavlova (B65), die uit vijf alinea's en een opsomming bestaat. */
.product-beschrijving p { white-space: pre-line; }

/* Specificatietabel (B23): structuurrubrieken als rustige specs, haarlijnen */
.spec-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    font-size: .95rem;
}
.spec-tabel th,
.spec-tabel td {
    border-top: 1px solid var(--line);
    padding: .55rem .2rem;
    text-align: left;
    vertical-align: top;
}
.spec-tabel th {
    width: 7.5rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: capitalize;
    letter-spacing: .03em;
}

/* Maatwerk-brug: subtiel opvallend kadertje in de huisstijl — rechthoekig
   merkblauw kader met een zweem blauw als vulling. Geen radius/schaduw
   (brand.css), geen decoratieve accentlijn: het valt op via omkadering + tint. */
.winkel-brug {
    border: 1px solid var(--brand);
    background: color-mix(in srgb, var(--brand) 4%, #fff);
    padding: 1.5rem 1.6rem;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.winkel-brug p {
    flex-basis: 100%;
    margin: 0 0 .35rem;
    color: var(--brand);
    font-weight: 500;
}
/* Knoppen in het kadertje: lichte lila-blauwe vulling met blauw kader/tekst,
   zodat ze bij de accentkleur van het kader passen. Hover = zachte fade naar
   vol blauw (zelfde fade als alle knoppen). */
.winkel-brug .btn {
    background: #f6f5fa;
    color: #1e1984;
    border-color: #1e1984;
}
.winkel-brug .btn:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* Lijstje doorsturen naar de winkel (C1) */
.lijstje-stuur {
    border-top: 1px solid var(--line);
    padding: 1.75rem 0 0;
    margin-top: 2rem;
}
.lijstje-stuur h2 { margin-bottom: .4rem; }
.lijstje-stuur > p { color: var(--muted); max-width: 42rem; margin-bottom: 1.25rem; }
.lijstje-stuur select { max-width: 520px; padding: .5rem; border: 1px solid var(--line); }

.related { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.related h2 { margin-bottom: 1rem; }


/* ── Formulieren (maatwerk) ── */
.form-rij { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; max-width: 520px; }
.form-rij label { font-weight: 700; font-size: .95rem; }

/* ── Pointe-afspraakformulier (F2) ── */
.afspraak-form { max-width: 640px; }
.afspraak-form fieldset { border: 1px solid var(--line); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.5rem; }
.afspraak-form legend { font-family: var(--font-head); font-weight: 700; padding: 0 .4rem; }
.afspraak-form select { max-width: 520px; padding: .5rem; border: 1px solid var(--line); }
.af-check { display: flex; align-items: center; gap: .5rem; font-size: .95rem; margin-top: .5rem; }
.af-check input { width: auto; }
.afspraak-persoon { border: 1px solid var(--line); border-left: 3px solid var(--brand); padding: .85rem 1rem; margin-bottom: 1rem; background: var(--bg-soft, #f5f7fa); }
.afspraak-persoon__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.afspraak-persoon__nr { color: var(--brand); }
.afspraak-persoon .form-rij { margin-bottom: .6rem; }
.afspraak-persoon__hint { margin: 0 0 .6rem; color: var(--muted); font-size: .85rem; }
.afspraak-persoon .opt { color: var(--muted); font-weight: 400; font-size: .85em; }
.terug { margin-bottom: .5rem; }

/* ── Lijstje — luchtig (§8): ruime maten, intro in rustig grijs ── */
.lijstje-page { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem 2.5rem; }
.lijstje-page h1 + p { color: var(--muted); max-width: 42rem; }
.lijstje-items { margin: 2.25rem 0; }
.lijstje-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.6rem 0;
    border-top: 1px solid var(--line);
}
.lijstje-item img {
    width: 90px; height: 120px;
    object-fit: cover;
    background: #f4f4f4;
}
.lijstje-item .meta { color: var(--muted); font-size: .9rem; }
.lijstje-item button {
    border: none;
    background: var(--bg);
    padding: .4rem 0;
    cursor: pointer;
    color: var(--muted);
    text-decoration: underline;
}
.lijstje-item button:hover { color: var(--brand); }
.lijstje-leeg { padding: 2rem 0; color: var(--muted); }
/* Lege staat: een traag kloppend open hartje (B29) */
.lijstje-leeg::before {
    content: '\2661';
    display: block;
    width: fit-content;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--brand);
    margin-bottom: .75rem;
    animation: leeg-klop 1.8s ease-in-out infinite;
}
@keyframes leeg-klop {
    0%, 48%, 100% { transform: scale(1); }
    12%           { transform: scale(1.12); }
    24%           { transform: scale(1); }
    36%           { transform: scale(1.08); }
}

/* Paginering (B43): echte pagina's, geen "toon meer" — hergebruikt de
   keuze-optie-stijl; de huidige pagina staat gevuld blauw. */
.paginering {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: 2.5rem 0 1rem;
}
.paginering .keuze-optie[aria-current="page"] { cursor: default; }

/* ── Mobiel ── */
@media (max-width: 900px) {
    /* Eén kolom; grid-plaatsing terug naar auto zodat order geldt. */
    .collectie-layout { grid-template-columns: 1fr; grid-template-rows: none; }
    .collectie-layout > .collectie-kop,
    .collectie-layout > aside,
    .collectie-layout > .soort-chips,
    .collectie-layout > section { grid-column: auto; grid-row: auto; }
    /* Mobiele volgorde: titel/intro → soort-chips → filter(knop) → producten.
       Chips + filter staan zo net boven het productraster. */
    .collectie-layout > .collectie-kop { order: 1; }
    .collectie-layout > .soort-chips { order: 2; }
    .collectie-layout > aside { order: 3; }
    .collectie-layout > section { order: 4; }
    .filters-toggle {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 1rem;
    }
    .filters[hidden] { display: none; }
    .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
    .block-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .lang-switch__lijst a { padding: .6rem .8rem; font-size: .8rem; }

    /* Categorieën: soepel horizontaal vegen met de vinger i.p.v. wrappen.
       overscroll-behavior voorkomt dat de veeg de hele pagina meesleept;
       scroll-snap laat de chips netjes uitlijnen. */
    .cat-nav__inner { padding: 0; gap: 0; flex-wrap: wrap; }
    .cat-nav__list {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        touch-action: pan-x;
        scrollbar-width: none;
        padding: 0 .5rem;
    }
    .cat-nav__list::-webkit-scrollbar { display: none; }
    .cat-nav__item { scroll-snap-align: start; }
    .cat-nav__item > a {
        padding: .8rem .7rem;
        font-size: .78rem;
        letter-spacing: .08em;
        white-space: nowrap;
    }
    .cat-nav__item > a::after { left: .7rem; right: .7rem; bottom: .55rem; }
    /* Hover-submenu's en -dropdowns werken niet op touch en vallen buiten
       beeld — de link zelf navigeert gewoon naar de pagina. */
    .cat-nav__sub { display: none !important; }
    .lijstje-dropdown { display: none !important; }

    /* Maatwerk + lijstje + loep: samen één volle rij, netjes verdeeld.
       De taalkeuze wrapt naar een eigen regeltje eronder. */
    .cat-nav__acties { flex: 1 1 100%; border-top: 1px solid var(--line); flex-wrap: wrap; }
    .cat-nav__maatwerk, .lijstje-menu { flex: 1 1 0; }
    .cat-nav__maatwerk { justify-content: center; padding: .8rem 0; font-size: .78rem; }
    .cat-nav__lijstje {
        width: 100%;
        justify-content: center;
        padding: .8rem 0;
        font-size: .78rem;
        border-left: none;
        border-right: none;
    }
    .zoek-menu { flex: 0 0 auto; }
    .cat-nav__zoek { padding: .8rem 1.1rem; }
    /* Dropdown zoekveld op mobiel: volle breedte onder de rij i.p.v. smal blokje. */
    .zoek-dropdown { position: static; min-width: 0; width: 100%; border-left: none; border-right: none; }
    /* Taalknop blijft compact rechts naast de loep; de lijst klapt eronder uit. */
    .lang-switch { flex: 0 0 auto; }
    .lang-switch__knop { padding: .8rem 1rem; }
}

@media (max-width: 640px) {
    /* Rustiger maatvoering: zelfde luchtigheid, minder dode ruimte */
    .hero { padding: 2.5rem 1.25rem 1.75rem; }
    .hero h1 { font-size: 1.65rem; }
    .page-section { padding: 2rem 1.25rem; }
    .block { margin-top: 1.25rem; padding: 1.75rem 0; }
    .home-cat { padding: 1.25rem 0 1.5rem; }
    .aanbod-item { padding: 1.25rem 0 1.5rem; }

    /* Webshop-gevoel: twee kaarten naast elkaar */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.25rem; }
    .collectie-layout { padding: 1.5rem 1.25rem; }
    main > .breadcrumbs { padding: 1rem 1.25rem 0; }
    .related { padding: 0 1.25rem 2.5rem; }

    .product-detail { padding: 1.5rem 1.25rem 2.5rem; }
    .product-info h1 { font-size: 1.45rem; }
    /* Acties even breed onder elkaar — geen rafelige linkerlijn */
    .product-acties { flex-direction: column; }
    .product-acties .btn { width: 100%; justify-content: center; }

    /* Winkel-brug: maatwerk- en winkelknop naast elkaar (B46), kadertje behoudt
       zijn eigen padding op mobile. */
    .winkel-brug { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1.25rem; }
    .winkel-brug p { grid-column: 1 / -1; margin-bottom: .25rem; }
    .winkel-brug .btn { width: 100%; justify-content: center; }

    .lijstje-page { padding: 1.5rem 1.25rem; }
    .lijstje-item { grid-template-columns: 70px 1fr; gap: .25rem 1rem; padding: 1.25rem 0; }
    .lijstje-item img { width: 70px; height: 93px; grid-row: 1 / 3; }
    .lijstje-item button { grid-column: 2; justify-self: start; }

    /* Minder tekst-ruis op mobile: de kern (items + knoppen) moet opvallen, de
       toelichtende alinea's worden kleiner en subtieler. */
    .lijstje-page h1 { font-size: 1.55rem; margin-bottom: .35rem; }
    .lijstje-page > p {
        font-size: .82rem;
        line-height: 1.45;
        color: var(--muted);
    }
    /* De maatwerk-brug-tekst zit in het accentkadertje: kleiner maar blauw
       (niet grijs), zodat het kadertje ook op mobile consistent opvalt. */
    .winkel-brug p { font-size: .82rem; line-height: 1.45; }
    .winkel-brug { margin-top: 1.25rem; }

    .maat-overlay { padding: 1rem .75rem; }
    .maat-overlay__paneel, .deel-paneel { padding: 1.5rem 1.25rem; }
    .deel-paneel { margin-top: 5vh; }
    .maat-tabel { display: block; overflow-x: auto; }

    .shop-toast { max-width: calc(100vw - 2rem); white-space: normal; text-align: left; }
}

/* Openingsuren: compacte regels onder de winkelgegevens */
.winkel-uren { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.9; }

/* Winkel-blok met ingesloten kaart + route-knop (maatwerk-pagina) */
.winkel-kaart {
    margin: 1.25rem 0;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    overflow: hidden;
}
.winkel-kaart iframe { width: 100%; height: 100%; border: 0; display: block; }
.winkel-route { display: inline-block; }

/* ── Jargon-automaat (B45) ── */
.jargon {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    border-bottom: 1px dotted var(--brand);
    cursor: help;
}
.jargon:hover { color: var(--brand); }
.jargon-popover {
    position: absolute;
    background: #fff;
    border: 1px solid #000;
    max-width: 280px;
    padding: 1rem;
    z-index: 70;
    animation: sub-rijs .22s ease-out;
}
.jargon-popover__kop {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .35rem;
}
.jargon-popover__tekst { margin: 0; font-size: .92rem; line-height: 1.6; }

/* ── Zoeksuggesties (B45): dropdown onder de zoekbalk — wit, 1px zwarte
   rand, geen schaduw; hover/actief = blauw gevuld met witte tekst ── */
.zoek-suggesties {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--ink);
    animation: sub-rijs .22s ease-out;
}
.zoek-suggesties__optie {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    cursor: pointer;
    transition: background-color .2s ease-out, color .2s ease-out;
}
.zoek-suggesties__optie img {
    width: 32px;
    height: 42px;
    object-fit: cover;
    flex: none;
}
.zoek-suggesties__optie--actief,
.zoek-suggesties__optie:hover {
    background: var(--brand);
    color: #fff;
}

/* ── Taalsuggestie (B45): smalle balk bovenaan — wit, haarlijn onder ── */
.taal-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .5rem 1.5rem;
    font-size: .9rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.taal-hint a {
    color: var(--brand);
    text-decoration: underline;
}
.taal-hint__sluit {
    border: none;
    background: none;
    padding: 0 .25rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
    transition: color .2s ease-out;
}
.taal-hint__sluit:hover { color: var(--brand); }

/* ── Nooit-doodlopen-vangnet (B45): alternatieven + maatwerk-uitnodiging ── */
.vangnet { margin-top: 2rem; }
.vangnet__kop {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}
.vangnet__maatwerk {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.vangnet__maatwerk p { margin-bottom: 1rem; }

/* Budget-sleper — dubbele range (van–tot). Twee overlappende range-inputs met
   alleen zichtbare thumbs ("puntjes"); de track + gevulde balk zit in een aparte
   laag eronder. GEEN focus-border rond de thumb (klantfeedback), wel een
   subtiele focus-ring op het puntje zelf voor toegankelijkheid. */
.budget-slider {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.budget-slider__track {
    position: relative;
    height: 1.75rem;
    /* --thumb = de bolletjesbreedte; de baan begint/eindigt op de helft ervan,
       zodat baan én bolletjes precies samenvallen en er nooit een streepje
       vóór of voorbij een bolletje steekt. */
    --thumb: 20px;
}
/* De grijze baan — loopt van het midden van het linker- tot het rechter-
   uiterste bolletje (dus een halve thumb ingesprongen aan beide kanten),
   NIET van rand tot rand. */
.budget-slider__track::before {
    content: "";
    position: absolute;
    left: calc(var(--thumb) / 2);
    right: calc(var(--thumb) / 2);
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: #e0d5d9;
    border-radius: 2px;
}
/* De gevulde selectie tussen de twee bolletjes (positie via JS). */
.budget-slider__vulling {
    position: absolute;
    top: 50%; height: 4px;
    transform: translateY(-50%);
    background: var(--brand);
    border-radius: 2px;
}
/* Beide range-inputs liggen exact over elkaar. De JS knipt elke input met
   clip-path in tot z'n eigen helft (min = links, max = rechts van de grens
   tussen de twee bolletjes), zodat ze nooit om dezelfde plek vechten. */
.budget-slider__thumb {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;           /* input[type=range] heeft in sommige browsers een border */
    -webkit-appearance: none;
    appearance: none;
    height: 1.75rem;
    outline: none;
}
.budget-slider__thumb:focus,
.budget-slider__thumb:focus-visible { outline: none; }   /* nooit een kader om de slider */

/* De NATIVE tracks volledig onzichtbaar maken op alle browsers — anders tekent
   de browser z'n eigen grijze baan van rand tot rand (de streepjes voorbij de
   bolletjes). Wij tekenen de baan zelf via __track::before. */
.budget-slider__thumb::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: var(--thumb);   /* gelijk aan de thumb → thumb is vanzelf gecentreerd */
}
.budget-slider__thumb::-moz-range-track {
    background: transparent;
    border: none;
    height: var(--thumb);
}
.budget-slider__thumb::-moz-range-progress { background: transparent; }

/* Thumb = het bolletje. WebKit + Firefox apart. pointer-events terug aan.
   GEEN border en GEEN ring — alleen een egaal bolletje. Track-hoogte = thumb,
   dus geen margin-top-centrering nodig. */
.budget-slider__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: var(--thumb); height: var(--thumb);
    border-radius: 50%;
    background: var(--brand);
    border: none;
    box-shadow: none;
    cursor: pointer;
}
.budget-slider__thumb::-moz-range-thumb {
    pointer-events: auto;
    width: var(--thumb); height: var(--thumb);
    border-radius: 50%;
    background: var(--brand);
    border: none;
    box-shadow: none;
    cursor: pointer;
}

.budget-slider__waarde {
    font-weight: 700;
    color: var(--brand-dark);
    font-variant-numeric: tabular-nums;
}
.budget-slider__hint {
    margin: 0;
    font-size: .85rem;
    color: #666;
}