/* Den bakker, Sint-Joris-Weert. Website door Deallos.
 *
 * ⛔ DIT BESTAND IS DE GOEDGEKEURDE VORMGEVING, ONGEWIJZIGD OVERGENOMEN UIT DE DEMO.
 *    Het is de reden dat de site eruitziet zoals de zaakvoerder hem gekozen heeft.
 *    Wat WooCommerce erbovenop nodig heeft, staat in winkelbrug.css. Zet daar bij wat
 *    met de winkel te maken heeft, en hier alleen wat over de vormgeving zelf gaat.
 *
 *
 * ⛔ HET PALET KOMT UIT DE DEMO DIE DE ZAAKVOERDER GOEDGEKEURD HEEFT, niet uit een eigen
 * keuze. Ik had eerst marineblauw en paars uit hun logo gepipetteerd, maar hij vindt het
 * ontwerp van de vorige demo goed en dat blijft dus staan. Deze vijf zijn letterlijk
 * overgenomen uit het Tailwind-thema van die build (assets/index-Bm3HOcxb.css):
 *   cream #faf6ef, ink #2b2118, aubergine #5e2a66, amber #c98a3b, sage #6e8898.
 * Wat er WEL uit moest zijn de AI-foto's, de verzonnen aantallen en de verzonnen claims.
 */

:root{
  --cream:#faf6ef;
  --cream-2:#f5eadc;
  --ink:#2b2118;
  --aubergine:#5e2a66;
  --aubergine-licht:#7a3a84;
  --amber:#c98a3b;
  --amber-licht:#d9a05a;
  --sage:#6e8898;
  --groen:#3e7a4e;
  --kaart:#fff;
  --lijn:#e8ddcc;
  --grijs:#7a6a5c;
  --rond:16px;
  --breed:1280px;
  --lade:420px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body.vast{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.6vw,4rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:1.1rem;font-family:Inter,sans-serif;font-weight:600;letter-spacing:0}
p{margin:0 0 1em}
.wikkel{max-width:var(--breed);margin:0 auto;padding:0 24px}
.lood{font-size:1.09rem;color:var(--grijs);max-width:60ch}
.fijn{font-size:.86rem;color:var(--grijs)}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:-9999px;background:var(--aubergine);color:#fff;padding:10px 16px;z-index:99}
.overslaan:focus{left:12px;top:12px}
:where(a,button,input,select):focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}

/* het opschrift boven elke kop: amber, klein, gespatieerd. Zo doet de goedgekeurde demo het. */
.opschrift{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  font-weight:600;margin-bottom:14px}
.opschrift a{text-decoration:none}

/* ── meldingsbalk ───────────────────────────────────────────────────────── */
.melding{background:var(--aubergine);color:#fff;text-align:center;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;height:40px;padding:0 16px}
.melding__venster{height:20px;overflow:hidden}
.melding__rol{animation:meldrol 18s infinite}
.melding__rol b{display:block;height:20px;line-height:20px;font-weight:500}
@keyframes meldrol{0%,44%{transform:translateY(0)}50%,94%{transform:translateY(-20px)}100%{transform:translateY(-40px)}}

/* ── kop ────────────────────────────────────────────────────────────────── */
.balk{position:sticky;top:0;z-index:40;background:var(--cream);
  border-bottom:1px solid var(--lijn)}
.balk__in{display:flex;align-items:center;gap:26px;min-height:78px}
.merk img{width:170px;height:auto}
.hoofdnav{display:flex;gap:28px;margin-left:auto;font-size:.96rem;font-weight:500}
.hoofdnav a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.hoofdnav a:hover{color:var(--aubergine)}
.hoofdnav a[aria-current]{color:var(--aubergine);border-bottom-color:var(--amber)}
.balk__acties{display:flex;align-items:center;gap:4px;margin-left:auto}
.pict{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;
  border-radius:50%;color:var(--ink);transition:.16s;position:relative;text-decoration:none}
.pict:hover{background:var(--cream-2)}
.pict svg{width:21px;height:21px}
.telpil{position:absolute;top:3px;right:2px;min-width:19px;height:19px;border-radius:999px;
  background:var(--amber);color:#fff;font-size:.7rem;font-weight:700;display:none;place-items:center;padding:0 5px}
.telpil.aan{display:grid}
.hamburger{display:none}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:.25s}
.hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobielmenu{display:none;flex-direction:column;padding:8px 24px 22px;background:var(--cream);
  border-bottom:1px solid var(--lijn)}
.mobielmenu a{text-decoration:none;padding:14px 0;border-bottom:1px solid var(--lijn);font-weight:500}

/* ── knoppen ────────────────────────────────────────────────────────────── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  border-radius:999px;border:1.5px solid var(--aubergine);background:transparent;color:var(--aubergine);
  font:600 .96rem/1 Inter,sans-serif;text-decoration:none;cursor:pointer;transition:.18s;min-height:50px}
.knop:hover{background:var(--aubergine);color:#fff}
.knop--vol{background:var(--aubergine);color:#fff}
.knop--vol:hover{background:var(--aubergine-licht);border-color:var(--aubergine-licht)}
.knop--amber{background:var(--amber);border-color:var(--amber);color:#fff}
.knop--amber:hover{background:var(--amber-licht);border-color:var(--amber-licht);color:#fff}
.knop--licht{border-color:rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.08)}
.knop--licht:hover{background:#fff;color:var(--ink)}
.knop--klein{padding:10px 18px;min-height:42px;font-size:.87rem}
.knop--breed{width:100%}

/* ── held ───────────────────────────────────────────────────────────────── */
.held{position:relative;min-height:min(78vh,640px);display:flex;align-items:center;
  color:#fff;overflow:hidden;background:var(--ink)}
.held__beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.held::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(43,33,24,.94) 0%,rgba(43,33,24,.88) 26%,rgba(43,33,24,.55) 52%,rgba(43,33,24,.2) 78%,rgba(43,33,24,.06) 100%),
    linear-gradient(0deg,rgba(43,33,24,.42) 0%,rgba(43,33,24,.1) 40%,rgba(43,33,24,0) 70%)}
.held__in{position:relative;z-index:2;padding-block:78px;width:100%}
.held__blok{max-width:650px}
.held .opschrift{color:var(--amber-licht)}
.held h1{color:#fff;margin-bottom:.3em;text-shadow:0 2px 22px rgba(0,0,0,.3)}
.held__tekst{color:rgba(255,255,255,.92);font-size:1.14rem;max-width:38ch}
.held__knoppen{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
/* ⚠️ `.held__pillen` is weg: dat waren de kerncijfers in de held (aantal producten, aantal
   collecties, zondag aan huis). Geschrapt, zie delen/held.php. */

/* ── strook ─────────────────────────────────────────────────────────────── */
/* ⚠️ De gewone achtergrond en niet de zachte: de collectiestrook eronder is zacht, en twee
   dezelfde vlakken onder elkaar lezen als één blok. De rand onderaan houdt het band-gevoel. */
.strook{background:var(--cream);border-bottom:1px solid var(--lijn)}
.strook__in{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:26px 24px}
.strook__kop{display:block;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-weight:600;margin-bottom:5px}
.strook p{margin:0;font-size:.95rem;color:var(--ink)}

/* ── secties ────────────────────────────────────────────────────────────── */
.sectie{padding:76px 0}
.sectie--zacht{background:var(--cream-2)}
.sectie--donker{background:var(--ink);color:var(--cream)}
.sectie--donker .lood{color:rgba(250,246,239,.76)}
.sectie--donker .fijn{color:rgba(250,246,239,.58)}
.sectiekop{margin-bottom:34px}
.sectiekop--rij{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.sectiekop h2{margin:0 0 .3em}
.meer{font-weight:600;font-size:.93rem;color:var(--aubergine);text-decoration:none;
  border-bottom:1.5px solid var(--amber);padding-bottom:3px;white-space:nowrap}
.paginakop{padding:52px 0 0}
.kruimel{padding-top:22px;font-size:.85rem;color:var(--grijs)}
.kruimel a{text-decoration:none}
.kruimel a:hover{color:var(--aubergine)}
.kruimel span{margin:0 7px;opacity:.5}
.terug{margin-top:38px}
.terug a{font-weight:600;color:var(--aubergine)}

/* ── categorierooster ───────────────────────────────────────────────────── */
.catrooster{list-style:none;padding:0;margin:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.catrooster a{display:block;text-decoration:none;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--rond);overflow:hidden;transition:.22s}
.catrooster a:hover{transform:translateY(-4px);box-shadow:0 18px 38px -22px rgba(94,42,102,.4);
  border-color:var(--amber)}
.catrooster img{aspect-ratio:1;object-fit:cover;width:100%}
.catrooster__naam{display:block;font-family:Fraunces,serif;font-weight:600;padding:14px 16px 2px;
  font-size:1.05rem;line-height:1.25;min-height:calc(2 * 1.25em + 16px)}
.catrooster__aantal{display:block;padding:0 16px 15px;font-size:.83rem;color:var(--grijs)}

/* ── productkaart ───────────────────────────────────────────────────────── */
.rooster{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.rooster__cel{display:contents}
.rooster__cel[hidden]{display:none}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s;position:relative}
.kaart:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(94,42,102,.42)}
.kaart__link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1}
.kaart__foto{display:block;background:var(--cream-2);position:relative;border-radius:var(--rond) var(--rond) 0 0;overflow:hidden}
.kaart__foto img{aspect-ratio:1;object-fit:cover;width:100%}
.label{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--groen);
  font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:999px;z-index:2;
  box-shadow:0 2px 8px rgba(43,33,24,.1)}
.label--sage{color:var(--sage)}
.kaart__tekst{display:flex;flex-direction:column;gap:4px;padding:16px 68px 16px 17px;flex:1}
.kaart__cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600}
.kaart__naam{font-family:Fraunces,serif;font-weight:600;line-height:1.25;font-size:1.06rem}
.kaart__prijs{margin-top:auto;padding-top:9px;font-weight:600;font-size:1.05rem;color:var(--ink)}
/* ⚠️ de ronde plusknop half over de fotorand, precies zoals in de goedgekeurde demo */
.plus{position:absolute;right:13px;bottom:10px;width:46px;height:46px;border-radius:50%;
  background:var(--aubergine);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(94,42,102,.55);transition:.18s;z-index:3}
.plus:hover{background:var(--amber);transform:scale(1.08)}
.plus svg{width:20px;height:20px}

/* ── filters ────────────────────────────────────────────────────────────── */
.filterblok{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:20px 22px;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.chip{border:1.5px solid var(--lijn);background:var(--cream);border-radius:999px;padding:9px 17px;
  font:500 .88rem Inter,sans-serif;cursor:pointer;transition:.16s;min-height:40px;color:var(--ink)}
.chip:hover{border-color:var(--amber)}
.chip--aan{background:var(--aubergine);color:#fff;border-color:var(--aubergine)}
.filterrij{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--lijn);padding-top:16px}
.sorteer{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--grijs)}
.sorteer select{border:1.5px solid var(--lijn);border-radius:10px;padding:9px 12px;background:var(--cream);
  font:500 .9rem Inter,sans-serif;color:var(--ink);min-height:42px;cursor:pointer}
.telling{font-size:.92rem;color:var(--grijs);margin:0}
.telling b{color:var(--ink)}

/* ── plaatshouder ───────────────────────────────────────────────────────── */
.geenfoto{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;
  aspect-ratio:1;background:linear-gradient(140deg,var(--cream-2),#efe2cf);text-align:center;padding:18px}
.geenfoto span{font-family:Fraunces,serif;font-size:1rem;color:var(--ink);font-weight:600;
  line-height:1.25;opacity:.6}
.geenfoto em{font-style:normal;font-size:.75rem;color:var(--grijs)}
.geenfoto--cat{aspect-ratio:1}
.geenfoto--groot{aspect-ratio:4/3;border-radius:var(--rond)}
.geenfoto--groot span{font-size:1.5rem}
/* ⚠️ Een merkje, GEEN foto. 7 van de 14 categorieen hebben op hun eigen site geen enkele
   productfoto; een broodfoto uit een ANDERE categorie lenen zou een product tonen dat de
   klant niet krijgt. */
.korenmerk{width:44px;height:44px;color:var(--amber);opacity:.5;flex:none}
.geenfoto--groot .korenmerk{width:70px;height:70px}

/* ── productpagina ──────────────────────────────────────────────────────── */
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:start}
.product__foto img{border-radius:var(--rond);width:100%;object-fit:cover;aspect-ratio:4/3;
  box-shadow:0 26px 54px -30px rgba(43,33,24,.45)}
.product__prijs{font-family:Fraunces,serif;font-size:2.1rem;font-weight:700;color:var(--aubergine);margin:.1em 0 .6em}
.product__bestel{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0 24px}
.hoeveel{display:inline-flex;align-items:center;border:1.5px solid var(--lijn);border-radius:999px;background:var(--kaart)}
.hoeveel input{width:48px;border:0;text-align:center;font:600 1rem Inter,sans-serif;background:none;
  -moz-appearance:textfield;padding:0}
.hoeveel input::-webkit-outer-spin-button,.hoeveel input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hoeveel__knop{width:44px;height:48px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--aubergine)}
.eenheid{display:inline-block;background:var(--cream-2);color:var(--grijs);border-radius:999px;
  padding:6px 14px;font-size:.85rem;font-weight:500;margin:0 0 6px}

/* ── lijsten en blokken ─────────────────────────────────────────────────── */
.vinkjes{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.vinkjes li{padding-left:29px;position:relative;color:var(--grijs)}
.vinkjes li::before{content:"";position:absolute;left:0;top:.5em;width:15px;height:8px;
  border-left:2.4px solid var(--amber);border-bottom:2.4px solid var(--amber);transform:rotate(-45deg)}
.vinkjes--klein li{font-size:.9rem}
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.drieluik{list-style:none;padding:0;margin:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.drieluik li{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);padding:26px}
.drieluik h3{font-family:Fraunces,serif;font-size:1.16rem;font-weight:600}
.drieluik p{margin:0;color:var(--grijs)}
.uren{border-collapse:collapse;width:100%;max-width:340px}
.uren th,.uren td{text-align:left;padding:11px 0;border-bottom:1px solid var(--lijn);font-weight:500}
.uren td{text-align:right;font-variant-numeric:tabular-nums}
.sectie--donker .uren th,.sectie--donker .uren td{border-color:rgba(250,246,239,.18)}
.uurblok{background:rgba(255,255,255,.06);border-radius:var(--rond);padding:30px}
.uurblok--groot{background:var(--kaart);border:1px solid var(--lijn)}
.fotoblok img{border-radius:var(--rond);width:100%;object-fit:cover;aspect-ratio:4/3}
/* ⛔ De ingebedde kaart woog 1,9 MB van de 2,36 MB die de homepagina ophaalde, bij ELKE
   bezoeker, ook wie nooit tot daar scrolt. Nu een knop die hem pas laadt op een klik. */
/* ══ Het kaartje bij "Kom langs" ══════════════════════════════════════════════
 * ⚠️ Een vaste verhouding en geen vaste hoogte: op een telefoon is 16 op 9 te plat om een
 *    straat in te herkennen, op een laptop is een vierkant te hoog. 4 op 3 werkt op allebei.
 * ⛔ De iframe moet `display:block` krijgen. Een iframe is standaard inline, en dan zet de
 *    browser er een paar pixels ruimte onder waar de rand van het vak omheen valt.
 */
/**
 * ⛔ EEN VASTE HOOGTE EN GEEN VERHOUDING MET EEN PLAFOND. Met `aspect-ratio` plus
 *    `max-height` knelt dat plafond ook de BREEDTE af: het kaartje werd 409 pixels breed in
 *    een kolom van 636 en stond daardoor smaller dan de foto erboven. Met een hoogte in
 *    pixels loopt het altijd van rand tot rand en blijft het laag.
 *
 * ⚠️ Op 4 op 3 was het 477 pixels hoog en dan werd deze kolom (gevel, adres, telefoon,
 *    merktekens én kaart) twee keer zo lang als de tekst ernaast. Een kaartje hoeft alleen
 *    te tonen wélke straat het is; wie de route wil, tikt de schakel eronder.
 */
.kaartvak{position:relative;margin-top:14px;border-radius:var(--rond);overflow:hidden;
  border:1px solid var(--lijn);background:var(--cream-2);height:200px}
/* ⛔ `inset:0` en niet `height:100%`. Een percentagehoogte tegen een vak dat zijn hoogte uit
   `aspect-ratio` haalt, wordt door de browser niet opgelost: de kaart bleef op haar eigen
   hoogte staan en er bleef een derde van het vak leeg onderaan. Gemeten: vak 477 hoog,
   kaart 316. */
.kaartvak iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.kaartvak__noot{margin:8px 0 0}
/* ⛔ DEZE REGEL IS WEG EN DAT MOEST. Ze hoorde bij de kaart die vroeger pas na een klik
   ingeladen werd, en ze stond LATER in dit bestand dan `.kaartvak iframe` met dezelfde
   specificiteit. Dus won zij: de kaart bleef op 300 pixels hangen in een vak van 477 en er
   bleef een derde leeg onderaan. Precies het soort regel dat blijft rondslingeren nadat het
   onderdeel eruit is. */

/* ── winkelmandlade ─────────────────────────────────────────────────────── */
.sluier{position:fixed;inset:0;background:rgba(43,33,24,.55);opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:60}
.sluier.aan{opacity:1;pointer-events:auto}
.lade{position:fixed;top:0;right:0;bottom:0;width:min(var(--lade),100vw);background:var(--cream);
  z-index:61;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,.28,1);box-shadow:-20px 0 60px -20px rgba(43,33,24,.4)}
.lade.aan{transform:none}
/* ⚠️ 22 pixels lucht boven en onder is voor een kop van een lade te royaal: dat is 44
   pixels die niet naar de artikelen gaan. 12 volstaat, en de sluitknop van 44 bepaalt
   toch al de ondergrens van de hoogte. */
.lade__kop{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 24px;border-bottom:1px solid var(--lijn)}
.lade__kop h2{font-size:1.35rem;margin:0;flex:1}
.lade__telpil{background:var(--cream-2);color:var(--ink);border-radius:999px;
  min-width:26px;height:26px;display:grid;place-items:center;font-size:.82rem;font-weight:700;padding:0 8px}
.lade__sluit{width:40px;height:40px;border:0;background:none;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;color:var(--ink)}
.lade__sluit:hover{background:var(--cream-2)}
.lade__sluit svg{width:20px;height:20px}
.voortgang{padding:16px 24px;background:var(--cream-2);border-bottom:1px solid var(--lijn)}
.voortgang p{margin:0 0 9px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:7px}
.voortgang p svg{width:16px;height:16px;flex:none}
.voortgang.behaald p{color:var(--groen)}
.voortgang__baan{height:5px;border-radius:999px;background:rgba(43,33,24,.12);overflow:hidden}
.voortgang__vul{height:100%;background:var(--amber);border-radius:999px;transition:width .35s;width:0}
.lade__lijst{padding:6px 24px}
.lade__leeg{padding:44px 0;text-align:center;color:var(--grijs)}
.regel{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--lijn)}
.regel__foto{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--cream-2)}
.regel__naam{font-family:Fraunces,serif;font-weight:600;font-size:1rem;line-height:1.25;margin:0 0 9px}
.regel__prijs{font-weight:600;white-space:nowrap}
.regel__weg{border:0;background:none;cursor:pointer;color:var(--grijs);padding:4px;border-radius:6px}
.regel__weg:hover{color:#a3372f}
.regel__weg svg{width:17px;height:17px}
.mini{display:inline-flex;align-items:center;border:1.5px solid var(--lijn);border-radius:999px;background:var(--kaart)}
.mini button{width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--aubergine);font-size:1rem}
.mini span{min-width:26px;text-align:center;font-weight:600;font-size:.9rem}
.samen{padding:18px 24px 4px;border-top:1px solid var(--lijn)}
.samen h3{font-family:Fraunces,serif;font-size:1.02rem;font-weight:600;margin-bottom:12px}
.samenrij{display:flex;align-items:center;gap:12px;padding:9px 0}
.samenrij img,.samenrij .geenfoto{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;aspect-ratio:auto;padding:0}
.samenrij .korenmerk{width:22px;height:22px}
.samenrij .geenfoto span,.samenrij .geenfoto em{display:none}
.samenrij div{flex:1;min-width:0}
.samenrij b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.samenrij small{color:var(--grijs);font-size:.82rem}
.lade__voet{border-top:1px solid var(--lijn);padding:18px 24px 22px;background:var(--cream-2)}
.subtotaal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.subtotaal span{font-weight:600}
.subtotaal b{font-family:Fraunces,serif;font-size:1.5rem;font-weight:700}
/* ══ De merktekens onder de afrekenknop ═══════════════════════════════════════
 * ⚠️ Eén regel, pictogram NAAST de tekst. In de vorige vorm stond het pictogram erboven,
 *    in drie kolommen, en dat kostte 37 pixels plus marge. Zo is het er ongeveer 20, en
 *    blijft de ruimte in de lade waar ze hoort: bij de artikelen.
 * ⛔ `flex-wrap` staat er met opzet NIET: valt dit over twee regels, dan is de winst weg.
 *    Wordt de tekst langer, maak hem korter in plaats van hem te laten omslaan.
 */
.troost{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 8px;font-size:.7rem;color:var(--grijs);line-height:1.2}
.troost span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;min-width:0;flex:0 1 auto}
/* ⛔ Vangnet: valt er ooit een langere tekst in, dan krimpt hij weg in plaats van de regel
   over te laten lopen. Overlopen zag er kapot uit: het merkteken lag over "Vers gebakken"
   heen en "Zondag aan huis" viel half van het scherm. */
.troost span{overflow:hidden;text-overflow:ellipsis}
.troost svg:not(.troost__betaal){width:13px;height:13px;color:var(--amber);flex:0 0 auto}
.betaalrij{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.betaalrij span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grijs);font-weight:600}
.betaalrij svg{height:24px;width:auto;border-radius:3px}
.verder{display:block;text-align:center;margin-top:12px;font-size:.92rem;color:var(--grijs);
  background:none;border:0;width:100%;cursor:pointer;font-family:inherit;text-decoration:none}
.verder:hover{color:var(--aubergine)}

/* ── afrekenen ──────────────────────────────────────────────────────────── */
.stappen{display:flex;align-items:center;justify-content:center;margin:44px 0 40px}
.stap{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.85rem;color:var(--grijs)}
.stap b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);color:var(--grijs);font-weight:700;font-size:.95rem;border:1.5px solid var(--lijn)}
.stap--aan b,.stap--klaar b{background:var(--aubergine);color:#fff;border-color:var(--aubergine)}
.stap--aan{color:var(--ink);font-weight:600}
.stap svg{width:17px;height:17px}
.stapstreep{width:clamp(46px,12vw,150px);height:2px;background:var(--lijn);margin:0 6px 26px}
.stapstreep--aan{background:var(--amber)}
.demowaarschuwing{background:var(--cream-2);border:1px solid var(--amber);border-radius:var(--rond);
  padding:18px 22px;margin-bottom:34px;font-size:.94rem;display:flex;gap:12px;align-items:flex-start}
.demowaarschuwing svg{width:20px;height:20px;color:var(--amber);flex:none;margin-top:2px}
.demowaarschuwing p{margin:0}
.kassa{display:grid;grid-template-columns:1.35fr .85fr;gap:32px;align-items:start}
.blok{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);padding:28px;margin-bottom:24px}
.blok h2{font-size:1.35rem;margin-bottom:20px}
.keuzes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.keuze{display:flex;align-items:center;gap:13px;border:1.5px solid var(--lijn);border-radius:14px;
  padding:17px 18px;cursor:pointer;background:var(--cream);transition:.16s;text-align:left;font-family:inherit}
.keuze:hover{border-color:var(--amber)}
.keuze--aan{border-color:var(--aubergine);background:#fff;box-shadow:0 0 0 3px rgba(94,42,102,.1)}
.keuze__bol{width:34px;height:34px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;flex:none}
.keuze--aan .keuze__bol{background:var(--aubergine);color:#fff}
.keuze__bol svg{width:17px;height:17px}
.keuze b{display:block;font-size:.98rem;font-weight:600}
.keuze small{color:var(--grijs);font-size:.84rem}
.noot{display:flex;gap:11px;align-items:flex-start;background:var(--cream-2);border-radius:12px;
  padding:15px 17px;margin-top:16px;font-size:.9rem;color:var(--grijs)}
.noot svg{width:18px;height:18px;color:var(--amber);flex:none;margin-top:1px}
.velden{display:grid;gap:18px}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label.veld{display:block}
label.veld > span{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px}
label.veld input{width:100%;border:1.5px solid var(--lijn);border-radius:12px;padding:14px 16px;
  font:400 1rem Inter,sans-serif;background:var(--cream);color:var(--ink);min-height:52px}
label.veld input:focus{border-color:var(--aubergine);background:#fff}
.samenvatting{position:sticky;top:100px}
.samenvatting .regel{grid-template-columns:52px 1fr auto;padding:13px 0}
.samenvatting .regel__foto{width:52px;height:52px}
.totalen{border-top:1px solid var(--lijn);margin-top:6px;padding-top:16px}
.totalen div{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem}
.totalen .eind{border-top:1px solid var(--lijn);margin-top:10px;padding-top:14px;font-size:1.05rem;font-weight:600}
.totalen .eind b{font-family:Fraunces,serif;font-size:1.55rem;font-weight:700}
.gelukt{text-align:center;max-width:560px;margin:0 auto;padding:40px 0 20px}
.gelukt__bol{width:78px;height:78px;border-radius:50%;background:var(--groen);color:#fff;
  display:grid;place-items:center;margin:0 auto 26px}
.gelukt__bol svg{width:38px;height:38px}

/* ── voet ───────────────────────────────────────────────────────────────── */
.voet{background:var(--ink);color:rgba(250,246,239,.8);padding:64px 0 0}
.voet a{color:var(--cream);text-decoration:none}
.voet a:hover{color:var(--amber-licht)}
.voet__in{display:grid;grid-template-columns:1.25fr 1fr 1fr .8fr;gap:44px;padding-bottom:44px}
.voet__logo{background:#fff;border-radius:10px;padding:9px 12px;width:150px}
.voet__leus{font-family:Fraunces,serif;font-style:italic;font-size:1.3rem;color:var(--amber-licht);margin:18px 0 14px}
.voet h3{color:var(--cream);font-family:Fraunces,serif;font-size:1.12rem;font-weight:600;margin-bottom:16px}
.voet__lijst{list-style:none;padding:0;margin:0;font-size:.92rem;line-height:2.1}
.voet .uren{max-width:none}
.voet .uren th,.voet .uren td{border-color:rgba(250,246,239,.14);padding:8px 0;font-size:.9rem}
.voet .fijn{color:rgba(250,246,239,.55)}
.voet__sociaal{display:flex;gap:10px;margin-top:4px}
.voet__sociaal a{width:40px;height:40px;border-radius:50%;background:rgba(250,246,239,.1);
  display:grid;place-items:center}
.voet__sociaal a:hover{background:var(--amber)}
.voet__sociaal svg{width:18px;height:18px}
.voet__onder{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid rgba(250,246,239,.14);padding-top:22px;padding-bottom:28px;font-size:.85rem}
.voet__onder p{margin:0}
.voet__merk{background:rgba(250,246,239,.1);border-radius:999px;padding:5px 14px;font-size:.8rem}

/* ── melding rechtsonder ────────────────────────────────────────────────── */
.mandje{position:fixed;right:18px;bottom:18px;z-index:59;background:var(--ink);color:var(--cream);
  padding:14px 22px;border-radius:999px;font-size:.92rem;font-weight:500;
  box-shadow:0 14px 34px -12px rgba(43,33,24,.6);transform:translateY(160%);
  /* ⛔ OOK OP DOORZICHTIG, NIET ALLEEN WEGSCHUIVEN. Het wegschuiven alleen werkte zolang
     deze melding 18px van de onderrand stond: 160% van haar hoogte bracht ze onder het
     scherm. Sinds ze op een telefoon hoger staat (162px, boven de mandknop) schoof ze bij
     het verdwijnen niet meer weg maar precies BOVENOP die mandknop, en bleef ze daar
     staan. Gezien op een schermafdruk: de melding lag over het mandje heen.
     Met opacity erbij verdwijnt ze waar ze ook staat. */
  opacity:0;
  transition:transform .32s cubic-bezier(.2,1,.3,1),opacity .28s ease}
.mandje.aan{transform:none;opacity:1}

/* ── mobiel ─────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .tweeluik,.product,.kassa{grid-template-columns:1fr;gap:36px}
  .strook__in{grid-template-columns:1fr;gap:18px}
  .voet__in{grid-template-columns:1fr 1fr;gap:34px}
  .samenvatting{position:static}
  .sectie{padding:56px 0}
}
@media (max-width:760px){
  .hoofdnav{display:none}
  .hamburger{display:grid;place-items:center}
  .mobielmenu:not([hidden]){display:flex}
  .balk__in{min-height:66px;gap:8px}
  .merk img{width:136px}
  .held{min-height:auto}
  .held__in{padding-block:56px}
  .rooster{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
  .catrooster{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
  .keuzes,.veldrij{grid-template-columns:1fr}
  .voet__in{grid-template-columns:1fr}
  .plus{width:44px;height:44px;bottom:8px;right:9px}
  .kaart__tekst{padding:14px 60px 14px 13px}
  .lade{--lade:100vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── nieuwe secties op de homepagina ────────────────────────────────────────
   ⛔ De homepagina was de winkel nog eens: een categorierooster en een productrooster
   en verder bijna niets. De goedgekeurde demo heeft dertien secties. Deze blokken
   vullen dat gat met materiaal dat WEL van hen is. */
.sectiekop--midden{text-align:center;max-width:640px;margin-inline:auto}
.sectiekop--midden .lood{margin-inline:auto}
.sectie--smal{padding:60px 0}
.luikmerk{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--cream-2);color:var(--amber);margin-bottom:16px}
.luikmerk svg{width:23px;height:23px}
.drieluik li{text-align:left}

/* het broodblokje naast de tekst */
.broodrooster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.broodrooster a{text-decoration:none;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--rond);overflow:hidden;display:block;transition:.2s}
.broodrooster a:hover{transform:translateY(-3px);border-color:var(--amber);
  box-shadow:0 16px 32px -20px rgba(94,42,102,.4)}
.broodrooster img{aspect-ratio:1;object-fit:cover;width:100%}
.broodrooster span{display:block;padding:11px 14px;font-weight:600;font-size:.93rem}

/* zo werkt het */
.stappenrij{list-style:none;padding:0;margin:0;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:s}
.stappenrij li{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:30px 26px;position:relative}
.stappenrij b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--aubergine);color:#fff;font-family:Fraunces,serif;font-size:1.15rem;margin-bottom:16px}
.stappenrij h3{font-family:Fraunces,serif;font-size:1.2rem;font-weight:600}
.stappenrij p{margin:0;color:var(--grijs)}
.stappenrij a{color:var(--aubergine);font-weight:600}

/* nieuwsbrief */
.sectie--brief{background:var(--ink);color:var(--cream);padding:62px 0}
.sectie--brief .lood{color:rgba(250,246,239,.75)}
.sectie--brief .fijn{color:rgba(250,246,239,.5)}
.briefblok{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* ⛔ `.briefvorm` WAS ZELF HET RASTER MET HET VELD EN DE KNOP. Sinds er ook een melding en
   een toestemmingsvinkje in staan, kan dat niet meer: die zouden dan als derde en vierde
   kolom naast de knop komen. Het raster zit nu op de rij eronder. */
.briefvorm{display:block}
.briefvorm__rij{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.briefvorm__veld{display:block}
.briefvorm input[type=email]{width:100%;border:1.5px solid rgba(250,246,239,.24);border-radius:999px;
  padding:15px 22px;font:400 1rem Inter,sans-serif;background:rgba(250,246,239,.08);color:var(--cream);
  min-height:52px}
.briefvorm input[type=email]::placeholder{color:rgba(250,246,239,.45)}
.briefvorm input[type=email]:focus{border-color:var(--amber);background:rgba(250,246,239,.14)}
/* ⚠️ Het vinkje moet leesbaar blijven op de donkere strook: een standaard vinkje tekent de
   browser in de systeemkleur en dat verdwijnt hier bijna. `accent-color` laat de browser
   zijn eigen vinkje houden en alleen de kleur wisselen. */
.briefvorm__akkoord{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;
  font-size:.86rem;line-height:1.5;color:rgba(250,246,239,.62);cursor:pointer}
.briefvorm__akkoord input{accent-color:var(--amber);width:18px;height:18px;margin:2px 0 0;flex:none}
/* ⛔ EEN LINK IN EEN ZIN IS OP EEN TELEFOON EEN DOELWIT VAN 16 PIXELS HOOG. Gemeten in de
   controle over alle pagina's: dit was het enige raakvlak op de hele site onder de 44 die
   Apple en Google als minimum aanhouden. Met opvulling ERBIJ en een even grote marge ERAF
   groeit het raakvlak zonder dat de regel verspringt. */
.briefvorm__akkoord a{color:var(--cream);text-underline-offset:3px;
  display:inline-block;padding:14px 6px;margin:-14px -6px}
.briefvorm__gelukt,.briefvorm__fout{padding:12px 16px;border-radius:12px;margin:0 0 14px;
  font-size:.92rem;line-height:1.5}
.briefvorm__gelukt{background:rgba(226,178,88,.16);border:1px solid rgba(226,178,88,.5);color:var(--cream)}
.briefvorm__fout{background:rgba(214,110,110,.16);border:1px solid rgba(214,110,110,.5);color:var(--cream)}

@media (max-width:980px){
  .briefblok{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  .briefvorm__rij{grid-template-columns:1fr}
  .broodrooster{gap:11px}
}

/* ══ REVIEWS ═══════════════════════════════════════════════════════════════
   ⚠️ Dit is de derde versie. Wat er in de vorige twee mis was:
     v1: "deze drie zijn voorbeelden" terwijl het er zes zijn, de pijlen hingen los onder
         de kop, het label was een brede grijze balk, en op de telefoon werd de kaart
         loodrecht hoog.
     v2: het aanhalingsteken werd bovenaan afgeknipt en botste met het label; de pijlen
         stonden onderaan, ver van de kop waar niemand ze zoekt.
   Nu: pijlen rechtsboven naast de kop, waar iedereen ze verwacht. Sterren en label op
   EEN regel bovenin de kaart, zodat het citaat de kaart draagt en niet het label. Een
   koraalstreep links als merkteken. En het citaat groter, want dat is waarom iemand hier
   kijkt. */
.reviewrij{display:flex;gap:16px;margin:0;
  padding:0 max(24px,calc((100vw - var(--breed)) / 2 + 24px))}
/**
 * ⛔ DE KAART LEEST VAN BOVEN NAAR BENEDEN ALS EEN BEOORDELING, NIET ALS EEN CITAAT.
 *    Eerst wie het zegt en waar het vandaan komt, dan pas wat er staat. Andersom leest het
 *    als een uitspraak van de bakker over zichzelf.
 *
 * ⚠️ Geen vaste hoogte en geen amberen balk aan de zijkant meer: dat maakte er een
 *    aanhaling van in plaats van een kaartje. Een lichte rand en een zachte schaduw is
 *    genoeg; de inhoud moet het doen.
 */
/**
 * ⛔ `margin:0` IS HIER GEEN OPRUIMWERK MAAR EEN FOUT DIE ERUIT MOEST. Een `<figure>` krijgt
 *    van de browser standaard `margin: 1em 40px` mee. Die 40px links én rechts kwamen boven
 *    op de gap van de rij: de tussenruimte was gemeten 100 pixels terwijl er 20 gevraagd
 *    was. Zo is het gemeld: "de gaten tussen de beoordelingen zijn te groot".
 */
.review{margin:0;flex:0 0 min(340px,78vw);scroll-snap-align:start;position:relative;
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 2px rgba(43,33,24,.04);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.review:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(94,42,102,.4)}

/* ── wie het zegt ─────────────────────────────────────────────────────────── */
.review__wie{display:flex;align-items:center;gap:11px}
.review__naam{flex:1;min-width:0}
.review__naam b{font-weight:600;font-size:.94rem;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review__naam small{color:var(--grijs);font-size:.8rem;display:block}
/* ⚠️ Het g-logo klein en rechts: het hoort erbij als bron, niet als merkreclame. */
.review__wie .googleg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.review__kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sterren{display:flex;gap:3px;color:var(--amber)}
.sterren svg{width:17px;height:17px}
/* het label hoort erbij maar mag de kaart niet dragen */
.voorbeeldlabel{font-style:normal;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grijs);border:1px solid var(--lijn);border-radius:999px;padding:4px 10px;
  font-weight:600;white-space:nowrap}
/**
 * ⚠️ DE TEKST IN DE LEESLETTER EN NIET IN DE TITELLETTER. Fraunces op 1,14rem en vetjes
 *    maakte van elke beoordeling een uitspraak in koeienletters; zes daarnaast is een muur.
 *    Wat een klant schrijft leest als gewone tekst, want dat is het ook. De aanhalingstekens
 *    van 9,5rem in de hoek zijn weg om dezelfde reden.
 */
.review blockquote{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink)}
.rondje{width:38px;height:38px;border-radius:50%;background:var(--aubergine);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}

/* ── het cijfer in de sectiekop ───────────────────────────────────────────── */
/* ⚠️ Deze regel is een SCHAKEL naar hun Google-vermelding, dus ze heeft een raakvlak nodig
   dat een duim kan halen: 44 pixels hoog. Gemeten zonder deze regel: 30. */
.scoreregel{display:inline-flex;align-items:center;gap:9px;margin-top:8px;min-height:44px;
  text-decoration:none;color:inherit;flex-wrap:wrap}
.scoreregel .googleg{width:19px;height:19px}
.scoreregel b{font-size:1.12rem;font-weight:700}
.scoreregel__noot{color:var(--grijs);font-size:.9rem}
.scoreregel:hover .scoreregel__noot{color:var(--ink)}
.reviews__noot{margin:24px 0 0}

/* ══ INSTAGRAM ═══════════════════════════════════════════════════════════════
   ⚠️ Dit zijn de ECHTE ingebedde berichten van Instagram, geen plaatjes. Instagram levert
   ze in een iframe met een vaste breedte, dus de hoogte staat vast en de baan schuift. */
.schuifbaan--ig{padding:8px 0 4px}
.igrij{list-style:none;margin:0;display:flex;gap:18px;
  padding:0 max(24px,calc((100vw - var(--breed)) / 2 + 24px))}
/* ⛔ DE HOOGTE MOET BIJ HET BERICHT PASSEN, ANDERS WORDT HET AFGEKNIPT. Wij laden het
   script van Instagram niet (dat zou nog een derde partij zijn), dus niemand rekent de
   hoogte voor ons uit en moeten wij ze zelf opgeven. Een insluiting bestaat uit een kop
   (56), de foto (bij een staand bericht 1,25 keer de breedte) en de knoppenrij met het
   aantal likes (ongeveer 100). Voor 338 breed is dat 578; op 558 viel de onderste regel
   eraf en leek het alsof de kaarten in elkaar overliepen. Met marge: 620. */
.igrij li{flex:0 0 340px;scroll-snap-align:start;background:var(--kaart);
  border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;height:690px}
.igrij iframe{width:100%;height:100%;border:0;display:block}
.knop svg{width:18px;height:18px}

/* ══ SCHUIVENDE COLLECTIES ═════════════════════════════════════════════════
   ⛔ Het collectierooster nam elf schermhoogtes in beslag op de telefoon: veertien
   tegels onder elkaar. Nu een baan die horizontaal schuift, met scroll-snap zodat
   hij netjes op een tegel stopt. */
.schuifknoppen{display:flex;align-items:center;gap:10px}
.schuifknoppen--midden{justify-content:center;margin-top:20px}
.schuifknop{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--lijn);
  background:var(--kaart);color:var(--aubergine);cursor:pointer;display:grid;place-items:center;transition:.16s}
.schuifknop:hover:not(:disabled){background:var(--aubergine);color:#fff;border-color:var(--aubergine)}
.schuifknop:disabled{opacity:.35;cursor:default}
.schuifknop svg{width:19px;height:19px}
.schuifbaan{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding:6px 0 10px;
  scroll-padding-inline:max(24px,calc((100vw - var(--breed)) / 2 + 24px))}
.schuifbaan::-webkit-scrollbar{display:none}
.catrij{list-style:none;margin:0;display:flex;gap:18px;
  padding:0 max(24px,calc((100vw - var(--breed)) / 2 + 24px))}
.catrij li{flex:0 0 210px;scroll-snap-align:start}
.catrij a{display:block;text-decoration:none;background:var(--kaart);border:1px solid var(--lijn);
  border-radius:var(--rond);overflow:hidden;transition:.22s;height:100%}
.catrij a:hover{transform:translateY(-4px);border-color:var(--amber);
  box-shadow:0 18px 38px -22px rgba(94,42,102,.4)}
.catrij img{aspect-ratio:1;object-fit:cover;width:100%}

/* ⚠️ De baan met producten deelt alles met .catrij behalve de breedte van een tegel: een
   productkaart draagt een categorie, een naam van twee regels, een prijs en een plusknop,
   en die past niet in de 210px van een collectietegel. 238px is dezelfde maat als in het
   rooster van de winkel, zodat de kaarten overal even breed zijn. */
.versrij{list-style:none;margin:0;display:flex;gap:22px;
  padding:0 max(24px,calc((100vw - var(--breed)) / 2 + 24px))}
.versrij > li{flex:0 0 238px;scroll-snap-align:start;display:flex}
.versrij .kaart{width:100%}

/* ══ ZACHT INKOMEN. Geen enkele lus: de waarnemer doet zijn werk en zet zichzelf uit. ══ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.inbeeld{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}


@media (max-width:760px){
  .catrij li{flex:0 0 158px}
  .catrij{padding:0 24px;gap:12px}
  .versrij > li{flex:0 0 158px}
  .versrij{padding:0 24px;gap:14px}
  .igrij li{flex:0 0 300px;height:625px}
  .igrij{gap:12px;padding:0 24px}
  .reviewrij{gap:12px;padding:0 24px}
  .review{flex:0 0 84vw;padding:18px 18px 20px;gap:11px}
  .review blockquote{font-size:.95rem;line-height:1.55}
  .schuifknoppen .meer{display:none}
}

/* ⛔ RAAKVLAKKEN TE KLEIN OP DE TELEFOON. Gemeten: .meer 29px, .verder 20px, de links in
   de voet en de kruimel 15 tot 19px. Onder de 44px mist een vinger de helft van de tijd,
   en dat voelt als een site die niet reageert. Alleen op aanraakschermen, want op een
   muis is 44px onnodig veel lucht. */
@media (hover:none){
  .meer,.verder,.kruimel a,.voet__lijst a,.voet a,.terug a,.samenrij .knop,.fijn a{
    min-height:44px;display:inline-flex;align-items:center}
  .voet__lijst{line-height:1.6}
  .voet__lijst li{margin:2px 0}
  .kruimel{padding-top:14px}
  .kruimel a{padding:4px 0}
}

/* ══ INGEHOUDEN BEWEGING ═══════════════════════════════════════════════════
   ⚠️ Alles hieronder is EENMALIG of gebeurt alleen bij aanwijzen. Geen enkele lus die
   blijft draaien: uit het techniekonderzoek bleek dat een blijvende waarnemer op een
   telefoon 1234 ms kost zodra er ergens iets beweegt, ook als hij naar iets anders kijkt.
   Daarom kost deze pagina in rust nul. */

/* de kaarten in een rooster komen na elkaar binnen, niet allemaal tegelijk */
.rv.inbeeld .rooster > *,
.rv.inbeeld .catrij > li,
.rv.inbeeld .versrij > li,
.rv.inbeeld .reviewrij > *,
.rv.inbeeld .igrij > li,
.rv.inbeeld .stappenrij > li{animation:opkomen .62s cubic-bezier(.2,.8,.3,1) both}
@keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv.inbeeld .rooster > *:nth-child(1),.rv.inbeeld .catrij > li:nth-child(1),.rv.inbeeld .versrij > li:nth-child(1),
.rv.inbeeld .reviewrij > *:nth-child(1),.rv.inbeeld .igrij > li:nth-child(1),
.rv.inbeeld .stappenrij > li:nth-child(1){animation-delay:0s}
.rv.inbeeld .rooster > *:nth-child(2),.rv.inbeeld .catrij > li:nth-child(2),.rv.inbeeld .versrij > li:nth-child(2),
.rv.inbeeld .reviewrij > *:nth-child(2),.rv.inbeeld .igrij > li:nth-child(2),
.rv.inbeeld .stappenrij > li:nth-child(2){animation-delay:.07s}
.rv.inbeeld .rooster > *:nth-child(3),.rv.inbeeld .catrij > li:nth-child(3),.rv.inbeeld .versrij > li:nth-child(3),
.rv.inbeeld .reviewrij > *:nth-child(3),.rv.inbeeld .igrij > li:nth-child(3),
.rv.inbeeld .stappenrij > li:nth-child(3){animation-delay:.14s}
.rv.inbeeld .rooster > *:nth-child(4),.rv.inbeeld .catrij > li:nth-child(4),.rv.inbeeld .versrij > li:nth-child(4),
.rv.inbeeld .igrij > li:nth-child(4){animation-delay:.21s}
.rv.inbeeld .rooster > *:nth-child(n+5),.rv.inbeeld .catrij > li:nth-child(n+5),
.rv.inbeeld .igrij > li:nth-child(n+5){animation-delay:.28s}

/* de foto ademt heel licht mee bij het aanwijzen van een kaart */
.kaart__foto img{transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.kaart:hover .kaart__foto img{transform:scale(1.045)}
.catrij a img,.broodrooster img{transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.catrij a:hover img,.broodrooster a:hover img{transform:scale(1.045)}

/* het opschrift krijgt een streepje dat meegroeit wanneer de sectie binnenkomt */
.opschrift{display:inline-flex;align-items:center;gap:11px}
.opschrift::after{content:"";height:1.5px;width:0;background:currentColor;opacity:.5;
  transition:width .8s cubic-bezier(.2,.8,.3,1) .15s}
.rv.inbeeld .opschrift::after{width:34px}
.held .opschrift::after,.sectiekop--midden .opschrift::after{width:34px}
.sectiekop--midden .opschrift{justify-content:center}

/* de amberkleurige knop krijgt een zachte glans bij het aanwijzen */
.knop--amber{position:relative;overflow:hidden}
.knop--amber::after{content:"";position:absolute;inset:0;background:
  linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .7s ease}
.knop--amber:hover::after{transform:translateX(120%)}

@media (prefers-reduced-motion:reduce){
  .rv.inbeeld .rooster > *,.rv.inbeeld .catrij > li,.rv.inbeeld .reviewrij > *,
  .rv.inbeeld .igrij > li,.rv.inbeeld .stappenrij > li{animation:none}
  .opschrift::after{transition:none;width:34px}
}

/* ══ DE KOP KRIMPT BIJ HET SCROLLEN ════════════════════════════════════════
   ⚠️ Alleen twee waarden die veranderen op een klasse die er af en aan gaat. Geen
   scrollhandler die bij elk beeldje rekent: de waarnemer schakelt de klasse en verder
   doet CSS het werk. */
.balk{transition:box-shadow .3s ease}
.balk__in{transition:min-height .3s cubic-bezier(.2,.8,.3,1)}
.merk img{transition:width .3s cubic-bezier(.2,.8,.3,1)}
.balk.gekrompen{box-shadow:0 6px 24px -14px rgba(43,33,24,.34)}
.balk.gekrompen .balk__in{min-height:62px}
.balk.gekrompen .merk img{width:142px}

/* het mandje tikt eenmaal aan wanneer er iets bij komt */
@keyframes mandtik{0%,100%{transform:scale(1)}35%{transform:scale(1.22)}65%{transform:scale(.94)}}
.pict.tik svg{animation:mandtik .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes piltik{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.telpil.tik{animation:piltik .42s cubic-bezier(.3,1.5,.5,1)}

@media (max-width:760px){ .balk.gekrompen .merk img{width:120px} }
@media (prefers-reduced-motion:reduce){
  .balk__in,.merk img{transition:none}
  .pict.tik svg,.telpil.tik{animation:none}
}

/* ══ CATEGORIEKOP MET BANNER ═══════════════════════════════════════════════
   ⚠️ De goedgekeurde demo heeft een bannerfoto per collectie; die stond er bij mij
   helemaal niet. De 14 banners komen uit die build. */
.catkop{position:relative;min-height:300px;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--ink)}
.catkop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.catkop::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(43,33,24,.9) 0%,rgba(43,33,24,.5) 46%,rgba(43,33,24,.18) 100%)}
.catkop__in{position:relative;z-index:2;padding-block:44px 40px;width:100%}
.catkop .opschrift{color:var(--amber-licht)}
.catkop h1{color:#fff;margin-bottom:.25em}
.catkop__tekst{color:rgba(255,255,255,.86);margin:0;font-size:1.02rem}
@media (max-width:760px){ .catkop{min-height:230px} .catkop__in{padding-block:30px 26px} }

/* de winkelgevel in het contactblok */
.gevel{width:100%;border-radius:var(--rond);object-fit:cover;aspect-ratio:3/2;margin-bottom:22px;
  box-shadow:0 22px 46px -28px rgba(43,33,24,.42)}

/* de winkelgevel in het contactblok */
.gevel{width:100%;border-radius:var(--rond);object-fit:cover;aspect-ratio:3/2;margin-bottom:22px;
  box-shadow:0 22px 46px -28px rgba(43,33,24,.42)}

/* ══ DE VLUCHT DOOR DE BAKKERIJ ════════════════════════════════════════════
   Een hoge sectie met een vastgepinde laag erin. Terwijl u erdoor scrollt spoelt de
   video mee. Zie de grendels in script.js: video alleen waar het kan. */
.vlucht{position:relative;height:calc(var(--vh,4) * 100vh);background:var(--ink);color:var(--cream)}
.vl__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.vl__doek{position:absolute;inset:0}
.vl__laag{position:absolute;inset:0;opacity:0;will-change:opacity}
.vl__laag:first-child{opacity:1}
.vl__laag img,.vl__laag video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl__laag video{opacity:0;transition:opacity .4s ease}
.vl__laag.speelt video{opacity:1}
.vl__sluier{position:absolute;inset:0;z-index:11;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,33,24,.86) 0%,rgba(43,33,24,.5) 46%,rgba(43,33,24,.12) 100%),
             linear-gradient(0deg,rgba(43,33,24,.8) 0%,rgba(43,33,24,0) 48%)}
.vl__over{position:absolute;inset:0;z-index:12;display:flex;align-items:center}
.vl__intro{max-width:620px;will-change:opacity,transform}
.vl__intro h2{font-size:clamp(2.4rem,6vw,4.4rem);color:#fff;margin:.2em 0 .4em;
  text-shadow:0 2px 24px rgba(43,33,24,.6)}
.vl__intro .opschrift{color:var(--amber-licht)}
.vl__lood{color:rgba(250,246,239,.88);font-size:1.12rem;max-width:40ch;
  text-shadow:0 1px 14px rgba(43,33,24,.6)}
.vl__bijschrift{position:absolute;left:0;bottom:96px;margin:0;display:flex;gap:18px;
  align-items:flex-start;max-width:520px;opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.vl__bijschrift.aan{opacity:1;transform:none}
.vl__bijschrift b{font-family:Fraunces,serif;font-size:2.6rem;line-height:1;color:var(--amber);
  opacity:.9;flex:none}
.vl__bijschrift h3{font-family:Fraunces,serif;font-size:1.5rem;font-weight:600;color:#fff;margin:0 0 .3em}
.vl__bijschrift p{margin:0;color:rgba(250,246,239,.86);font-size:1rem;line-height:1.5}
.vl__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:13;
  display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,239,.68);
  transition:opacity .5s ease;pointer-events:none}
.vl__hint i{width:20px;height:32px;border:1.5px solid rgba(250,246,239,.5);border-radius:12px;
  position:relative;display:block}
.vl__hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;
  border-radius:2px;background:rgba(250,246,239,.8);transform:translateX(-50%);
  animation:muiswiel 1.9s ease-in-out infinite}
@keyframes muiswiel{0%,100%{transform:translate(-50%,0);opacity:1}55%{transform:translate(-50%,10px);opacity:.2}}
.vl__baan{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(250,246,239,.16);z-index:14}
.vl__vul{height:100%;width:0;background:var(--amber);transform-origin:left;will-change:width}

@media (max-width:900px){
  .vlucht{height:calc(var(--vh,4) * 78vh)}
  .vl__over{align-items:flex-start;padding-top:96px}
  .vl__bijschrift{bottom:74px;gap:13px;max-width:none;padding-right:24px}
  .vl__bijschrift b{font-size:2rem}
  .vl__bijschrift h3{font-size:1.22rem}
  .vl__bijschrift p{font-size:.93rem}
  .vl__hint{display:none}
}
/* ⚠️ met "beweging beperken" aan: geen vlucht, gewoon een beeld met de tekst erop */
@media (prefers-reduced-motion:reduce){
  .vlucht{height:auto}
  .vl__pin{position:static;height:min(80vh,620px)}
  .vl__laag{opacity:0}
  .vl__laag:first-child{opacity:1}
  .vl__hint{display:none}
  .vl__bijschrift{display:none}
  .vl__vul{animation:none}
}

/* ══ DE DRIE GETEKENDE ANIMATIES ═══════════════════════════════════════════
   ⛔ ALLES STAAT STIL ZONDER DE KLASSE `speelt`. Een lus die altijd doorloopt kost op
   een telefoon blijvend rekenkracht, ook wanneer niemand ernaar kijkt. Een waarnemer
   zet die klasse pas als de sectie in beeld komt en haalt hem er weer af. Zie script.js. */
.tk{width:100%;max-width:190px;height:auto;display:block;margin:0 auto 6px}
.stappenrij li{padding-top:24px;text-align:center}
.stappenrij b{margin:0 auto 14px}
.stappenrij h3,.stappenrij p{text-align:center}

/* 1. het mandje vult zich */
.tk-val{opacity:0}
.speelt .tk-val{animation:tkval 3.6s cubic-bezier(.4,0,.6,1) infinite}
.speelt .tk-val--2{animation-delay:.45s}
.speelt .tk-val--3{animation-delay:.9s}
@keyframes tkval{
  0%{opacity:0;transform:translateY(-16px) scale(.85)}
  8%{opacity:1;transform:translateY(0) scale(1)}
  20%{transform:translateY(22px) scale(.96)}
  26%,100%{opacity:0;transform:translateY(26px) scale(.9)}
}

/* 2. het brood zwelt, de gloed pulseert, de stoom kringelt op */
.speelt .tk-brood{animation:tkbrood 3.4s ease-in-out infinite;transform-origin:60px 78px}
@keyframes tkbrood{0%,100%{transform:scaleY(.9) scaleX(.97)}55%{transform:scaleY(1.06) scaleX(1.02)}}
.speelt .tk-gloed{animation:tkgloed 3.4s ease-in-out infinite}
@keyframes tkgloed{0%,100%{opacity:.6}55%{opacity:.95}}
.tk-stoom path{opacity:0}
.speelt .tk-stoom path{animation:tkstoom 2.6s ease-out infinite}
.speelt .tk-stoom--2{animation-delay:.5s}
.speelt .tk-stoom--3{animation-delay:1s}
@keyframes tkstoom{
  0%{opacity:0;transform:translateY(6px) scaleY(.7)}
  25%{opacity:.55}
  100%{opacity:0;transform:translateY(-16px) scaleY(1.15)}
}

/* 3. de wagen rijdt, de wielen draaien, de weg loopt door */
.speelt .tk-wagen{animation:tkveer 1.1s ease-in-out infinite}
@keyframes tkveer{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.tk-wiel{transform-box:fill-box;transform-origin:center}
.speelt .tk-wiel{animation:tkdraai 1.05s linear infinite}
@keyframes tkdraai{to{transform:rotate(360deg)}}
.speelt .tk-weg{animation:tkweg .78s linear infinite}
@keyframes tkweg{to{transform:translateX(-26px)}}

@media (max-width:760px){ .tk{max-width:158px} }
/* met "beweging beperken" aan staat er gewoon een tekening */
@media (prefers-reduced-motion:reduce){
  .speelt .tk-val,.speelt .tk-brood,.speelt .tk-gloed,.speelt .tk-stoom path,
  .speelt .tk-wagen,.speelt .tk-wiel,.speelt .tk-weg{animation:none}
  .tk-val,.tk-stoom path{opacity:1}
}

/* ⚠️ DE HELD-VIDEO. De foto blijft het posterbeeld en is het eerste beeldje van de film,
   dus de overgang is onzichtbaar. Zie script.js voor de grendels: geen video op een smal
   scherm, een trage lijn, met databesparing of met "beweging beperken" aan. */
.held__film{position:absolute;inset:0;z-index:0}
.held__film video{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  opacity:0;transition:opacity .9s ease}
.held__film video.aan{opacity:1}

/* ══ DE DAGKEUZE IN DE KASSA ═══════════════════════════════════════════════
   ⚠️ Geen kalender maar vier knoppen. Een bakker heeft maar drie mogelijke dagen per
   week; een volle maandkalender waarvan 80 procent grijs is, is meer werk voor de
   bezoeker en op een telefoon een ramp. Vier knoppen passen naast elkaar. */
.dagen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dag{border:1.5px solid var(--lijn);background:var(--cream);border-radius:14px;
  padding:14px 10px;cursor:pointer;text-align:center;font-family:inherit;transition:.16s;
  display:flex;flex-direction:column;gap:3px;min-height:78px;justify-content:center}
.dag:hover:not(:disabled){border-color:var(--amber)}
.dag b{font-weight:600;font-size:.95rem;color:var(--ink);text-transform:capitalize}
.dag span{font-size:.84rem;color:var(--grijs)}
.dag em{font-style:normal;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:#a3372f;font-weight:600;margin-top:2px}
.dag--aan{border-color:var(--aubergine);background:#fff;box-shadow:0 0 0 3px rgba(94,42,102,.1)}
.dag--dicht{opacity:.5;cursor:not-allowed;background:var(--cream-2)}
.dag--dicht b,.dag--dicht span{text-decoration:line-through;text-decoration-color:rgba(163,55,47,.5)}
@media (max-width:620px){
  .dagen{grid-template-columns:repeat(2,1fr);gap:10px}
  .dag{min-height:72px;padding:12px 8px}
}

/* ══ TELEFOON: RAAKVLAKKEN EN LEESBAARHEID ═════════════════════════════════
   ⛔ GEMETEN OP 390 PX, en dit stond overal fout:
     chips 40 px hoog, de sluitknop van de lade 40x40, de pictogramknoppen 44x38,
     het aantalveld 20 px hoog, de kruimel- en voetlinks 19 tot 20 px,
     en 71 tekstelementen op de winkelpagina onder de 12 px.
   Een vinger mist onder de 44 px, en tekst onder de 12 px dwingt iemand tot inzoomen.
   Alles hieronder geldt alleen op aanraakschermen: op een muis is 44 px onnodig veel lucht. */
@media (hover:none){
  .chip{min-height:44px;padding:11px 17px}
  .lade__sluit,.pict,.schuifknop,.hoeveel__knop{min-width:44px;min-height:44px}
  .hoeveel input{height:46px}
  .regel__weg{min-width:44px;min-height:44px;display:grid;place-items:center}
  /* ⛔ 38 PIXELS IS TE KLEIN, EN DIT STOND MIDDEN IN HET BLOK DAT JUIST 44 AFDWINGT.
     Uit de heatmap: 269 keer op de min-knop gedrukt zonder gevolg — de tik landde
     naast de knop op de omhullende laag. Nagemeten raakvlak: 36 × 36.

     ⚠️ De knop blijft er 38 uitzien; alleen het RAAKVLAK groeit, met een onzichtbaar
        vlak eromheen. Precies zoals bij `.upsellkaart .plus--klein` in winkelbrug.css,
        waar dat al zo opgelost was. Min en plus staan 26 px uit elkaar, dus 3 px naar
        elke kant kan zonder dat ze elkaars tik afvangen. */
  .mini button{width:38px;height:38px;position:relative}
  .mini button::after{content:"";position:absolute;inset:-3px;border-radius:50%}
  .dag{min-height:80px}

  /* niets kleiner dan 12 px: dat is de grens waaronder mensen gaan inzoomen */
  .kaart__cat,.label,.catrooster__aantal,.voorbeeldlabel,.strook__kop,.opschrift,
  .troost span,.betaalrij span,.fijn,.review figcaption small,.samenrij small,
  .voet__onder,.voet__merk,.telling,.kruimel{font-size:max(.76rem,12px)}
  .kaart__naam{font-size:1rem}

  /* inline links in lopende tekst krijgen hun eigen raakvlak zonder de regel te breken.
     ⚠️ min-height op 44, niet op breedte: een smal "Home" in de kruimel is prima zolang
     het maar hoog genoeg is om te raken. */
  /**
   * ⛔ ALLEEN LINKS IN LOPENDE TEKST, DUS ALLEEN LINKS ZONDER KLASSE.
   *
   *    Dit stond op `p a:not(.knop)` en `li a:not(.knop)`, en dat is veel te breed. Elk
   *    onderdeel dat toevallig een <li> of een <p> gebruikt kreeg er ongevraagd
   *    `display:inline-flex`, `padding:8px 0` en `min-height:44px` bij. Twee keer echt
   *    stukgegaan en allebei gemeten:
   *
   *      - de merktekens van Facebook en Instagram stonden 12 tot 13 pixels links van het
   *        midden van hun rondje, omdat inline-flex met alleen align-items niet horizontaal
   *        centreert;
   *      - de suggestietegels in de lade: hun link werd inline-flex, kromp niet mee met de
   *        tegel van 112 pixels, en de foto groeide door naar 147 en hing over de rand.
   *
   *    Een link in lopende tekst draagt geen klasse; elk onderdeel draagt er wel een.
   *    `:not([class])` is dus precies de scheidslijn die hier bedoeld was.
   *
   * ⚠️ De opgesomde onderdelen erna (.kruimel, .fijn, .voet__lijst, .verder) houden hun
   *    raakvlak van 44 pixels expliciet. Wie een nieuw onderdeel toevoegt dat een groter
   *    raakvlak nodig heeft, zet het erbij in plaats van de regel weer open te gooien.
   */
  p a:not([class]),li a:not([class]),.kruimel a,.fijn a,.voet a,.voet__lijst a,.verder{
    padding:8px 0;display:inline-flex;align-items:center;min-height:44px}
  /**
   * ⛔ DE CENTRERING MOET HIER OPNIEUW GEZET WORDEN, ANDERS STAAN DE MERKTEKENS SCHEEF.
   *
   *    De regel hierboven raakt ook deze schakels (ze staan in .voet) en zet er
   *    `display:inline-flex; align-items:center` op. Dat overschrijft de `display:grid;
   *    place-items:center` van de gewone regel, en inline-flex met alleen align-items
   *    centreert WEL verticaal en NIET horizontaal. Samen met de min-width van 44px werd
   *    het rondje breder dan het merkteken, en plakte dat tegen de linkerrand.
   *
   *    Nagemeten op een telefoon: het teken stond 12 tot 13 pixels links van het midden
   *    van de cirkel. Op het scherm van de laptop klopte het wel, want daar geldt deze
   *    media query niet.
   *
   * ⚠️ Ook een vaste hoogte, niet alleen min-height: met min-height alleen werd het rondje
   *    45 pixels hoog in plaats van 44, en dan is het geen cirkel meer maar een ei.
   */
  /**
   * ⚠️ `:not(.knop)` staat hier om de SPECIFICITEIT, niet om de knopklasse. De regel
   *    hierboven is `p a:not(.knop)`, en dat weegt zwaarder (0,1,2) dan `.voet__sociaal a`
   *    (0,1,1). Voor het paar in de leveringssectie, dat in een <p> staat, won die dus en
   *    bleven de merktekens links plakken. Met `:not(.knop)` erbij wordt het 0,2,1 en
   *    winnen wij. Gemeten voor deze regel: 12 tot 13 pixels links van het midden.
   */
  .voet__sociaal a:not(.knop){width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
    display:grid;place-items:center}
  .pict{min-width:46px}
  .verder{width:100%;justify-content:center}
  .meer{min-height:44px}
}

/* de mobiele baan heeft een kleinere inspringing, dus ook een kleinere snap-marge */
@media (max-width:760px){
  .schuifbaan{scroll-padding-inline:24px}
}

/* ⛔ DE RECHTEROPVULLING VAN EEN FLEXBAAN TELT NIET MEE. Gemeten bij Instagram: inhoud
   1518 terwijl vier tegels van 340 plus drie tussenruimtes plus twee keer 104 opvulling
   1622 zou moeten zijn. De browser laat de rechteropvulling van een scrollende flexrij
   gewoon vallen, dus plakt de laatste tegel tegen de schermrand en kun je er niet
   voorbij scrollen. Een leeg element aan het eind doet wat de opvulling zou moeten doen. */
.catrij::after,.reviewrij::after,.igrij::after{
  content:"";flex:0 0 max(1px,calc((100vw - var(--breed)) / 2));
}
@media (max-width:760px){
  .catrij::after,.reviewrij::after,.igrij::after{flex:0 0 12px}
}

/* ══ BREDE SCHERMEN ═══════════════════════════════════════════════════════════
 * ⚠️ DIT IS EEN LATERE AANPASSING, NA DE GOEDGEKEURDE DEMO. Die stond op een vaste
 *    1280 pixels, en dat is een gangbare keuze: het houdt tekstregels leesbaar. Maar op
 *    een laptop van 1440 gaf dat tachtig pixels wit aan elke kant, en op 1920 wel
 *    driehonderdtwintig. Dat las als een pagina die niet afgewerkt is.
 *
 * ⛔ ALLEEN DE BREEDTE VERANDERT, NIET DE OPMAAK. Alle tekstblokken hebben hun eigen
 *    bovengrens (.lood op 60 tekens, .sectiekop--midden op 640, .held__tekst op 38) en
 *    die blijven staan. Zonder die grenzen zouden de regels op een breed scherm zo lang
 *    worden dat je bij het terugspringen de volgende regel kwijtraakt. Wie hier verbreedt
 *    en die grenzen weghaalt, maakt de site breder én slechter leesbaar.
 *
 * ⚠️ Het productrooster gebruikt `auto-fill` met een minimum van 238 pixels. De extra
 *    ruimte wordt daardoor vanzelf MEER PRODUCTEN in plaats van bredere kaarten, en dat
 *    is precies de bedoeling: vier kolommen op 1280, zes op 1920.
 *
 * ⛔ NIETS ONDER 1340 PIXELS AANRAKEN. Daaronder blijft alles zoals het goedgekeurd is,
 *    inclusief de hele telefoon- en tabletopmaak.
 */
@media (min-width: 1340px) {
  :root {
    /* 64 pixels lucht in totaal, met een bovengrens: breder dan dit wordt een winkel
       een spreadsheet en moet het oog te ver reizen tussen logo en winkelmandje. */
    --breed: min(1840px, calc(100vw - 64px));
  }

  /**
   * ⛔ ALLEEN DE WINKEL KRIJGT MEER KOLOMMEN. Het rooster op de voorpagina en onder een
   *    product is een UITGELICHTE strook met een vast aantal artikelen (acht, en vier).
   *    Toen alles meegroeide werd dat op 1440 een rij van vijf met daaronder een rij van
   *    drie: een rafelrand die eruitziet alsof er iets ontbreekt.
   *
   *    De winkelpagina is het omgekeerde geval: daar staan honderd producten en dan is
   *    meer kolommen juist beter. Die is te herkennen aan `data-rooster`.
   */
  .rooster:not([data-rooster]) {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ⚠️ De insprong van de schuifbanen hing aan `100vw`, en dat telt de schuifbalk mee.
     Met een vaste 1280 viel dat verschil weg in de marge; nu de wikkel meegroeit werd
     het zichtbaar als een tegel die een paar pixels naast de rest begon. `100%` is de
     breedte van de baan zelf, zonder schuifbalk, en klopt dus altijd. */
  .schuifbaan {
    scroll-padding-inline: max(24px, calc((100% - var(--breed)) / 2 + 24px));
  }
}


/* ══ DE NIEUWE HELD ═══════════════════════════════════════════════════════════
 * ⛔ HET UITHANGBORD MOET IN HET EERSTE BEELD STAAN. De heldband is veel breder dan de
 *    film (ongeveer 2,6 tegen 1 tegenover 16 tegen 9), dus er wordt flink boven en onder
 *    weggesneden. Op de oude waarde van 52 procent viel de naam "den bakker" er precies
 *    af, en dan opent de site met een stuk gevel waar niets op staat. Nagemeten op vier
 *    waarden; 28 procent is de enige waarbij zowel de naam in het begin als de vitrine
 *    op het einde in beeld blijft.
 *
 * ⚠️ De foto en de film krijgen DEZELFDE waarde. Het is dezelfde uitsnede: de foto is
 *    het eerste beeldje van de film. Wie er één van de twee verzet, krijgt een sprongetje
 *    op het moment dat de film begint te spelen.
 */
/**
 * ⚠️ Bijna geen uitsnede meer nodig. De film is nu 21:9 (2,33:1) en de heldband is op een
 *    laptop 2,25:1: dat scheelt nog een paar procent in plaats van een derde. Op 50%
 *    blijft alles staan waar het hoort. Dit was 28% toen er een 16:9-film in een band van
 *    2,6:1 geperst werd en de naam er anders afviel; dat probleem is bij de bron opgelost.
 */
/**
 * ⚠️ 32 procent, dus naar boven. Nagemeten wat er werkelijk wegvalt:
 *      1280 en 1440 px  ->  niets verticaal, alleen 54 tot 177 px aan de zijkanten
 *      1920 px          ->  182 px verticaal, want de band houdt daar 640 px hoogte
 *    Op een breed scherm wordt er dus wél gesneden, en op 50 procent viel het uithangbord
 *    er precies af. Op 32 procent blijft de naam staan en is er op 1440 geen verschil,
 *    want daar wordt verticaal niets weggenomen.
 */
.held__beeld,
.held__film video { object-position: 50% 32%; }

/* ⚠️ De mobiele uitsnede is al op de winkel gekaderd; die hoeft niet nog eens omhoog
   geschoven te worden. Zonder deze regel erft hij de 28 procent van het brede beeld en
   verdwijnt de stoep. */
@media (max-width: 760px) {
  /* de staande uitsnede is al op de winkel gekaderd */
  .held__beeld,
  .held__film video { object-position: 50% 46%; }
}

/* ══ DE HAMBURGER ═════════════════════════════════════════════════════════════
 * ⛔ HET KRUISJE WAS EEN PIJL, EN DE OORZAAK LAG DIEPER DAN HET LEEK. De knop deelt de
 *    klasse `.pict` met de zoek- en mandknop, en die is `display:grid` om er een pictogram
 *    in te centreren. Daardoor werd elk streepje een EIGEN RIJ met een eigen hoogte, en
 *    stonden hun middens niet op gelijke afstand (gemeten: 1, 22 en 29 pixels). Een
 *    symmetrische verschuiving kan die dan nooit laten samenvallen: het bovenste en het
 *    onderste streepje kruisten elkaar naast het midden en vormden een ">".
 *
 *    Vandaar dat de knop hier een eigen, voorspelbare opmaak krijgt: een kolom met een
 *    vaste tussenruimte. Dan is de verschuiving gewoon uit te rekenen.
 *
 * ⚠️ 7 pixels = de tussenruimte (5) plus de hoogte van een streepje (2). Wie een van die
 *    twee verandert, moet dit getal opnieuw uitrekenen, anders staat de pijl er weer.
 */
.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger span { margin: 0; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ COLLECTIETEGEL OP DE TELEFOON ════════════════════════════════════════════
 * ⛔ DE NAAM VIEL WEG. Feedback van de partner: "hier miss naam van collectie ofzo".
 *    De tegel is op een telefoon zo hoog dat de foto de hele tegel vulde en de naam en
 *    het aantal eronder buiten beeld vielen. Een rij foto's zonder namen is geen keuze
 *    maar een raadsel.
 *
 * ⚠️ De foto krijgt een vaste verhouding in plaats van de resterende hoogte, zodat er
 *    altijd plaats overblijft voor de twee regels eronder.
 */
@media (max-width: 760px) {
  .catrij li a { display: flex; flex-direction: column; }
  .catrij img { aspect-ratio: 1/1; height: auto; flex: none; }
  .catrooster__naam { display: block; font-size: .95rem; line-height: 1.25; }
  .catrooster__aantal { display: block; }
}

/* de Google-strook onder de kerncijfers in de held */
.held__blok .googlebalk {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 7px 13px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff; text-decoration: none; font-size: .84rem;
  backdrop-filter: none;   /* ⛔ nooit: dit flikkerde op iPhone boven de heldvideo */
}
.held__blok .googlebalk__g svg { width: 14px; height: 14px; display: block; }
.held__blok .sterren { display: inline-flex; gap: 1px; color: #f0b429; }
.held__blok .sterren svg { width: 13px; height: 13px; }
.held__blok .ster--leeg { color: rgba(255, 255, 255, .35); }
.held__blok .googlebalk__tekst { opacity: .92; }

/* ══ De Social bakery run ═════════════════════════════════════════════════════
 * ⚠️ De affiche is staand (2:3) en de tekst ernaast is kort. Zonder maximum wordt de
 *    affiche op een breed scherm zo hoog dat de inschrijving eronder valt en niemand ze
 *    nog ziet. Vandaar een plafond op de hoogte in plaats van op de breedte.
 */
.tweeluik--omgekeerd .fotoblok{order:2}
/* ⛔ `aspect-ratio:auto` MOET HIER STAAN. `.fotoblok img` legt 4/3 op met object-fit:cover,
   en dat is juist voor de foto's van de winkel. De affiche is staand (2:3): in een 4/3-vak
   met object-fit:contain kwam ze als een postzegel in het midden te staan, ruim half zo
   breed als het vak. Nagemeten op 390px: 200 van de 390 pixels breed. */
/* ⛔ EEN UITGESCHREVEN VERHOUDING, GEEN `aspect-ratio:auto`. Met `auto` rekende de browser
   de hoogte uit tegen een bredere omhullende doos en klemde daarna alleen de BREEDTE af op
   `max-width:100%`. Nagemeten op een telefoon van 390px: 342 breed en 1500 hoog, bij een
   affiche die 2 op 3 is. Dat is vier schermen affiche voor de eerste zin tekst.
   Met de verhouding erbij volgt de hoogte altijd de breedte die er echt is. */
.evenement .fotoblok--affiche img{
  width:100%;height:auto;aspect-ratio:2 / 3;max-height:640px;object-fit:contain;border-radius:16px}

.loopfeiten{list-style:none;margin:22px 0;padding:0;display:grid;gap:10px}
.loopfeiten li{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.loopfeiten li:last-child{border-bottom:0}
.loopfeiten strong{min-width:104px;font-size:1.05rem}
.loopfeiten span{color:var(--zacht,#6b6560)}

.inschrijving{margin-top:26px;display:grid;gap:14px}
.inschrijving__rij{display:grid;grid-template-columns:1fr 110px;gap:14px}
.inschrijving__veld{display:grid;gap:6px}
.inschrijving__veld>span{font-size:.88rem;font-weight:600}
.inschrijving__veld select,.inschrijving__veld input{
  width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.18);border-radius:12px;
  font:inherit;font-size:1rem;background:#fff;color:inherit;
  /* ⛔ 16px of meer. Onder 16px zoomt Safari op een iPhone bij het aantikken van een veld
     in, en de bezoeker staat dan met een half scherm naar het formulier te kijken. */
}
.inschrijving__veld select:focus-visible,.inschrijving__veld input:focus-visible{
  outline:2px solid var(--merk,#4b2a52);outline-offset:1px}
.inschrijving .fijn{margin:0;font-size:.85rem;color:var(--zacht,#6b6560)}

@media (max-width:860px){
  /* ⚠️ Op een telefoon staat de affiche BOVEN de tekst. Ze is de aankondiging; wie eerst
     drie alinea's moet lezen weet nog niet waar het over gaat. */
  .tweeluik--omgekeerd .fotoblok{order:0}
  /* ⚠️ Op een telefoon mag de affiche groot zijn, maar niet zo groot dat de inschrijving
     onder de vouw verdwijnt. 68vh laat er altijd een stuk tekst onder zien. */
  .evenement .fotoblok--affiche img{max-height:68vh}
}

/* ══ Het contactformulier ══════════════════════════════════════════════════ */
.contactvorm{margin-top:34px}
.contactvorm__vorm{display:grid;gap:16px;max-width:620px}
.contactvorm__rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contactvorm__veld{display:grid;gap:6px}
.contactvorm__veld>span{font-size:.88rem;font-weight:600}
.contactvorm__veld input,.contactvorm__veld textarea{
  width:100%;padding:13px 14px;border:1px solid rgba(0,0,0,.18);border-radius:12px;
  font:inherit;font-size:1rem;background:#fff;color:inherit;resize:vertical}
.contactvorm__veld input:focus-visible,.contactvorm__veld textarea:focus-visible{
  outline:2px solid var(--merk,#4b2a52);outline-offset:1px}
.contactvorm__gelukt,.contactvorm__fout{padding:14px 16px;border-radius:12px;margin:0 0 20px}
.contactvorm__gelukt{background:#edf7ee;border:1px solid #bcdcc0}
.contactvorm__fout{background:#fdeeee;border:1px solid #e6bcbc}
.contactvorm .fijn{margin:0;font-size:.85rem;color:var(--zacht,#6b6560)}

/* ⛔ Het lokvinkje wegschuiven, NIET verbergen met display:none. Een deel van de
   invulrobots slaat verborgen velden juist over, en dan vangt de val niets. */
.contactvorm__val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:700px){ .contactvorm__rij{grid-template-columns:1fr} }

/* ⛔ Halve sterren: een tweede rij volle sterren die maar een stuk breed is. Zo klopt het
   beeld bij 4,5 en hoeft er geen aparte halve-ster-tekening te bestaan. */
.sterren--half{position:relative;display:inline-block;line-height:0}
.sterren--half .sterren__leeg{display:flex}
.sterren--half .sterren__vol{position:absolute;inset:0;display:flex;overflow:hidden;white-space:nowrap}
.sterren--half svg{flex:0 0 auto}


/* ⚠️ De Google-regel was 38px hoog en is een link naar hun vermelding. Onder de 44px is
   dat op een telefoon een gokje; hij staat bovendien vlak bij andere links in de held. */
.googlebalk--klein{min-height:44px}


/* ⚠️ Drie raakvlakken stonden op 40 tot 42 pixels, net onder de 44 die een duim nodig
   heeft. Het gaat om het logo in de kopbalk, de sorteerlijst van de winkel en de
   Google-regel. Alle drie gemeten op een telefoon van 390px. */
.merk{min-height:44px;display:inline-flex;align-items:center}
.woocommerce-ordering select,.orderby,.sorteer select{min-height:44px}
.googlebalk--breed{min-height:44px}

/* ══ De mandknop op duimhoogte ════════════════════════════════════════════════
 * ⛔ ALLEEN OP EEN TELEFOON. Op een laptop staat het mandje in de kopbalk altijd in beeld
 *    en zou deze knop een tweede mandje zijn dat over de inhoud ligt.
 */
.mandknop{display:none}

@media (max-width:860px){
  .mandknop{
    display:flex;align-items:center;justify-content:center;position:fixed;
    /* ⚠️ Verder naar de hoek gezet op vraag: 16 van rechts, 20 van onder. `env(safe-area-inset-bottom)`
       staat erbij voor de iPhone: daar ligt onderaan de balk van Safari over de pagina, en
       zonder die marge zit de knop er half achter. Op een toestel zonder zo'n balk telt
       die waarde nul en verandert er niets. */
    right:16px;bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:60;
    width:58px;height:58px;border:0;border-radius:50%;padding:0;cursor:pointer;
    background:var(--aubergine,#5e2a66);color:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.28);
    transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .22s ease;
  }
  .mandknop svg{width:23px;height:23px}
  .mandknop .telpil{
    position:absolute;top:-3px;right:-3px;min-width:23px;height:23px;padding:0 6px;
    display:flex;align-items:center;justify-content:center;border-radius:12px;
    background:var(--amber,#c8873c);color:#fff;font-size:.78rem;font-weight:700;
    border:2px solid var(--cream,#faf5ee);
  }

  /* ⛔ Leeg mandje: geen knop. Een rond knopje met een 0 erin is ruis boven op de winkel.
     ⚠️ `:not(.mandknop--toon)` staat er omdat het EERSTE product naar deze knop moet kunnen
        vliegen terwijl de teller nog op nul staat. Het script zet die klas bij de start van
        de vlucht en haalt hem weer weg als de teller leeg blijft. */
  .mandknop:has(.telpil--leeg):not(.mandknop--toon){opacity:0;pointer-events:none;transform:scale(.7)}

  /* ⚠️ Staat de lade open, dan hoort de knop weg: hij zou er bovenop liggen. */
  body.vast .mandknop{opacity:0;pointer-events:none}

  /* ⛔ Opzij wanneer hij op een plusknop ligt. 84px is net genoeg om uit de rechterkolom
     te stappen op een scherm van 390px, en de knop blijft in de onderste hoek waar de duim
     hem verwacht. */
  .mandknop--wijk{transform:translateX(-84px)}
  /* ⚠️ Omhoog wanneer opzij niet helpt: 84 pixels is net boven een knop van 56 met marge. */
  .mandknop--omhoog{transform:translateY(-84px)}
  .mandknop--omhoog.mand--tik{animation:none}
  .mandknop--wijk.mand--tik{animation:none}

  /* het tikje wanneer er iets aankomt */
  .mandknop.mand--tik{animation:mandtik .42s cubic-bezier(.2,.8,.3,1)}
}

@keyframes mandtik{
  0%{transform:scale(1)} 40%{transform:scale(1.22)} 70%{transform:scale(.94)} 100%{transform:scale(1)}
}

/* ⚠️ De melding rechtsonder mag niet onder de mandknop verdwijnen. */
/* ⚠️ De melding blijft boven de mandknop staan; die is mee naar beneden gegaan, dus deze
   mag mee zakken. 96px laat er nog altijd een vinger ruimte tussen. */
@media (max-width:860px){ .mandje{bottom:96px} }

/* ⛔ De melding mag GEEN tikken opvangen. Ze is een mededeling, niets om aan te raken, maar
   ze ligt wel over de mandknop heen. Gemeten met elementFromPoint: op verschillende
   scrollstanden was dit het bovenste element op de plek van de mandknop, en dan gaat de tik
   naar een tekstballon in plaats van naar het mandje. */
.mandje{pointer-events:none}

/* ══ De scorekaart in de recensiestrook ═══════════════════════════════════════
 * ⚠️ Deze kaart staat er ook wanneer er nog geen citaten zijn. Ze toont één ding dat
 *    zeker klopt: het cijfer dat op hun Google-vermelding staat. Zodra er citaten bij
 *    komen, schuift die baan er gewoon onder.
 */
.scorekaart{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--lijn,rgba(0,0,0,.09));border-radius:var(--rond,18px);
  padding:26px 30px;margin-top:6px}
.scorekaart__cijfer{display:flex;align-items:baseline;gap:8px;line-height:1}
.scorekaart__cijfer b{font-size:3.4rem;font-weight:700;letter-spacing:-.02em}
.scorekaart__cijfer span{font-size:1rem;color:var(--grijs,#6b6560)}
.scorekaart__rechts{display:grid;gap:12px;justify-items:start}
.scorekaart__zin{margin:0;color:var(--grijs,#6b6560)}

/* ⚠️ De Google-balk is hier een schakel binnen een kaart en hoeft geen eigen randje meer. */
.scorekaart .googlebalk{padding-left:0;padding-right:0;border:0;background:none;box-shadow:none}

@media (max-width:700px){
  .scorekaart{gap:16px;padding:22px}
  .scorekaart__cijfer b{font-size:2.8rem}
  .scorekaart__rechts{width:100%}
  .scorekaart__rechts .knop{width:100%;justify-content:center}
}


/* ══ De wettelijke regel en de beleidsschakels in de voet ═════════════════════
 * ⚠️ Klein maar leesbaar. Dit is verplichte informatie, geen kleine lettertjes om weg te
 *    moffelen: 12px is de ondergrens, en de kleur houdt genoeg contrast.
 */
.voet__wet{display:grid;gap:6px}
.voet__wet .fijn{opacity:.78;font-size:max(.78rem,12px);line-height:1.5}
.voet__beleid{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.voet__beleid a{font-size:max(.78rem,12px);text-decoration:underline;text-underline-offset:3px;opacity:.85}
.voet__beleid a:hover{opacity:1}

/* ⚠️ Het pilletje mag niet meerekken met de kolom ernaast. De voet is een flexrij en zonder
   dit strekt het merkje mee tot de volle hoogte van het wettelijke blok; dan staat er een
   grote ronde vlek in de hoek in plaats van een pilletje. */
.voet__merk{align-self:flex-start}

/* ⚠️ De schakel naar Deallos moet zichtbaar een schakel zijn, anders klikt niemand erop. */
.voet__merk a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .voet__onder{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ⚠️ De cookielijst: de naam van een cookie is lange technische tekst zonder spaties.
   Zonder afbreken duwt die de hele pagina breder dan het scherm. Gemeten op 390px: de
   tabel die hier eerst stond was 486px breed. */
.db-cookielijst li{margin-bottom:14px}
.db-cookielijst code{font-size:.86em;word-break:break-all;background:rgba(0,0,0,.05);
  padding:2px 6px;border-radius:6px}


/* ══ DE LADE OP EEN TELEFOON: RUIMTE VOOR DE ARTIKELEN ═══════════════════════
 * ⛔ Gemeten met drie artikelen op een scherm van 844 pixels: de kop nam er 92, de
 *    voortgangsbalk 70, de suggesties 253 en de voet 304. Voor de artikelen zelf bleef er
 *    69 over, en dus was er geen enkel artikel volledig te zien. Alles hieronder haalt
 *    pixels weg bij het omhulsel en geeft ze aan de inhoud.
 */
@media (max-width:860px){
  /**
   * ⛔ DE WITTE KOP WAS TE HOOG. Met 22 pixels lucht boven en onder, een titel van 1,35rem
   *    en een teller in een royale pil kwam die op 92 pixels; daarna al op 77. Elke pixel
   *    daar is een pixel die niet naar de artikelen gaat, en de kop hoeft alleen te zeggen
   *    waar je bent en hoeveel erin zit.
   *
   * ⚠️ De sluitknop blijft 44 bij 44: dat is het raakvlak dat een duim nodig heeft, en dat
   *    bepaalt vanaf hier de hoogte van de kop. Lager dan dit kan niet zonder die knop te
   *    verkleinen, en dat gebeurt niet.
   */
  .lade__kop{padding:8px 16px 8px 20px;gap:10px}
  .lade__kop h2{font-size:1.02rem;line-height:1.2}
  .lade__tel{font-size:.72rem;padding:4px 9px}
  .lade__sluit{width:44px;height:44px}

  /* de balk naar gratis levering hoeft niet zo royaal */
  .voortgang{padding:12px 20px}

  /* de voet: dezelfde inhoud, strakker gezet */
  .lade__voet{padding:14px 20px 16px}
  .lade__voet .knop--breed{margin-bottom:10px}
  .lade__voet .googlebalk{margin-top:8px}
  .verder{padding:6px 0}
}

/* ══ De kop van de winkelpagina's ═════════════════════════════════════════════
 * ⚠️ Zie page.php: op het afrekenen telt elke pixel boven het eerste veld. De titel blijft
 *    staan (je moet weten waar je bent) maar in de maat van een tussenkop, met de
 *    merktekens eronder in plaats van lege lucht.
 */
.sectie--kassa{padding-top:26px}
.sectie--kassa .sectiekop{margin-bottom:18px}
.sectie--kassa .sectiekop h1{font-size:1.5rem;margin-bottom:12px}
.sectie--kassa .troost{max-width:520px;margin-bottom:0;justify-content:flex-start;gap:18px}

@media (max-width:760px){
  .sectie--kassa{padding-top:18px;padding-bottom:34px}
  .sectie--kassa .sectiekop{margin-bottom:10px}
  .sectie--kassa .sectiekop h1{font-size:1.32rem}
  .sectie--kassa .troost{gap:10px;justify-content:space-between}
}

/* ⚠️ Op een telefoon staat er één beoordeling per keer in beeld, en dan is een kaart die
   even hoog is als de langste van de zes een half scherm wit. Daar mag elke kaart zijn
   eigen hoogte hebben. Op een breed scherm staan ze naast elkaar en blijft gelijke hoogte
   wel netter. */
/**
 * ⛔ ALLE KAARTEN EVEN HOOG, OP VRAAG. Ze hebben even daarvoor elk hun eigen hoogte gehad
 *    omdat een korte beoordeling anders een blad wit onder zich krijgt; dat is ingeruild
 *    voor een rij die netjes uitlijnt. `stretch` is de standaard van flex, dus het volstaat
 *    om er niets tegenin te zetten.
 *
 * ⚠️ De hoogte wordt bepaald door de LANGSTE beoordeling in de baan. Komt daar ooit een
 *    lap tekst bij, dan worden ze allemaal zo hoog; kort de tekst dan in bij Weergave →
 *    Beoordelingen in plaats van hier iets te forceren.
 */
.reviewrij{align-items:stretch}
/* ⚠️ De tekst pakt de overgebleven hoogte, zodat de witruimte ONDER de tekst valt en
   eruitziet als marge in plaats van als een gat tussen tekst en onderrand. */
.review blockquote{flex:1}

/* ⚠️ Op een telefoon viel "op Google, 59 beoordelingen" op een eigen regel onder het cijfer.
   Iets kleiner en de regel past in één keer, wat leest als één mededeling in plaats van twee. */
@media (max-width:520px){
  .scoreregel{gap:7px}
  .scoreregel__noot{font-size:.82rem}
  .scoreregel .sterren svg{width:15px;height:15px}
}

/* ⚠️ De zin en de korte beoordeling onder de afrekenknop zijn geschrapt; zie db_gerust().
   Wat er nog staat zijn de drie merktekens en het cijfer. */


/* ⚠️ Eén korte beoordeling, klein en cursief zodat ze leest als een aanhaling en niet
   concurreert met de afrekenknop erboven. */



/* ⚠️ Op een telefoon staat alles onder elkaar, dus daar telt elke pixel dubbel. */
@media (max-width:760px){ .kaartvak{height:165px} }

/* ══ De winkel: filters en indeling ═══════════════════════════════════════════
 * ⛔ De chips stonden om te slaan en werden op een telefoon ACHT rijen van samen 415
 *    pixels. Nu één regel die opzij schuift. `-webkit-overflow-scrolling` en de verborgen
 *    schuifbalk komen van de andere banen op deze site, zodat het overal hetzelfde voelt.
 */
.chipbaan{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -4px;padding:2px 4px 6px}
.chipbaan::-webkit-scrollbar{display:none}
.chipbaan .chips{display:flex;flex-wrap:nowrap;gap:8px;width:max-content}
.chip{white-space:nowrap}
/* ⚠️ Het aantal in de chip zelf: zo weet je voor je klikt of er drie of dertig in zitten. */
.chip small{margin-left:6px;opacity:.6;font-size:.85em}
.chip--aan small{opacity:.8}

/* ── de tussenkoppen in het rooster ──────────────────────────────────────────
 * ⛔ `grid-column:1/-1` MOET, anders wordt de kop een gewone cel van één kolom breed en
 *    schuift de hele indeling scheef.
 */
.rooster__kop{grid-column:1/-1;margin:26px 0 2px;font-size:1.28rem;
  display:flex;align-items:baseline;gap:10px}
.rooster__kop:first-child{margin-top:0}
.rooster__kop small{font-size:.62em;font-weight:500;color:var(--grijs);font-family:Inter,system-ui,sans-serif}
.rooster__kop[hidden]{display:none}

@media (max-width:760px){
  .rooster__kop{margin:20px 0 0;font-size:1.12rem}
}


/* ⚠️ Nu de teller weg is, hoeft de filterrij niet meer uit elkaar geduwd te worden. */
.filterrij{justify-content:flex-end}
@media (max-width:760px){ .filterrij{justify-content:flex-start} }

/* ⛔ GEEN ZWEVENDE MANDKNOP OP HET MANDJE EN OP DE KASSA. Daar staat het mandje al op het
   scherm; een knop die het mandje opent is daar geen hulp maar een ding dat over de
   kalender en de knoppen ligt. Gezien op een schermafdruk van de kalender. */
.woocommerce-checkout .mandknop,
.woocommerce-cart .mandknop{display:none}

/* ⚠️ De volledige omschrijving op een productpagina: leesbreedte en wat lucht erboven, en
   de tussenkoppen wat kleiner dan die van een sectie. */
.product__uitleg{margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn);max-width:60ch}
.product__uitleg h3{font-size:1.05rem;margin:18px 0 6px}
.product__uitleg ul{margin:0 0 4px;padding-left:20px}
.product__uitleg li{margin-bottom:4px}

/* ══ De bewaartip op een productpagina ════════════════════════════════════════
 * ⚠️ Dit is .noot met een andere marge en niets meer. Die bouwsteen stond hier al (zacht
 *    zandvlak, amberkleurig tekeningetje, tekst in het grijs) en dat is precies wat een
 *    hulpje nodig heeft. Een eigen kader met een felle kleur zou dit laten lezen als een
 *    waarschuwing, en er is niets aan de hand.
 * ⛔ GEEN GEEL EN GEEN ROOD. Het is een tip van de bakker, geen etiket met een gevaar erop.
 */
.bewaartip{margin:0 0 26px;line-height:1.6}
.bewaartip b{color:var(--ink);font-weight:600}
@media (max-width:760px){ .bewaartip{margin-bottom:20px} }

/* ══ De beoordelingen op een productpagina ════════════════════════════════════
 * ⚠️ Onder de bestelknop en de omschrijving, niet erboven: wie hier komt wil eerst weten
 *    wat het is en wat het kost. Het oordeel van anderen is wat hem over de streep trekt,
 *    en dat werkt op het einde beter dan aan het begin.
 */
.product__oordeel{margin-top:24px;padding-top:20px;border-top:1px solid var(--lijn);max-width:60ch}
.product__oordeel .googlebalk{margin:8px 0 0}
.product__oordeel .kortrevs{margin-top:14px;display:grid;gap:12px}
.product__oordeel .kortrev blockquote{margin:0;font-size:.94rem;line-height:1.55}
.product__oordeel .kortrev figcaption{margin-top:3px;font-size:.82rem;color:var(--grijs)}
.product__oordeel .fijn{margin:12px 0 0}

/* ⚠️ Een kop die er wel is voor een schermlezer en voor Google, maar niet op het scherm.
   Wegschuiven en niet verbergen: `display:none` haalt hem ook uit de voorleesvolgorde. */
.overslaan-tekst{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}


/* ⚠️ Op de winkelpagina staat alleen nog het opschrift in de kop; de titel en de zin zijn
   eruit. De ruime lucht die daarbij hoorde mag dan ook krimpen, anders blijft er een gat
   staan waar de titel stond. Op een collectiepagina (met titel en uitleg) blijft ze wel. */
.paginakop--kaal{padding:26px 0 0}
@media (max-width:760px){ .paginakop--kaal{padding:16px 0 0} }

/* ══ De twee pop-ups op de winkelpagina ═══════════════════════════════════════
 * ⚠️ Twee knoppen naast elkaar die zeggen wat er gekozen is, met de volledige lijst
 *    eronder in een paneel. Zie woocommerce/archive-product.php voor het waarom.
 */
.filterblok--knoppen{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.keuze{position:relative;flex:1 1 auto;min-width:0}
.keuzeknop{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;
  padding:8px 14px;border:1.5px solid var(--lijn);border-radius:12px;background:var(--kaart);
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.keuzeknop:hover{border-color:var(--amber)}
.keuzeknop__wat{font-size:.78rem;color:var(--grijs);flex:none}
.keuzeknop__nu{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keuzeknop svg{width:17px;height:17px;flex:none;opacity:.6}
.keuzeknop[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ⛔ `z-index` moet hoger dan de productkaarten, anders klapt het paneel eronder open en
   ziet het eruit alsof er niets gebeurt. */
.keuzepop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--kaart);border:1px solid var(--lijn);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(43,33,24,.35);padding:10px;
  max-height:min(60vh,420px);overflow-y:auto}
.keuzepop .chips{display:flex;flex-wrap:wrap;gap:8px}
.keuzeoptie{display:block;width:100%;text-align:left;min-height:44px;padding:10px 12px;
  border:0;border-radius:10px;background:none;font:inherit;color:inherit;cursor:pointer}
.keuzeoptie:hover{background:var(--cream-2)}
.keuzeoptie--aan{background:var(--aubergine);color:#fff;font-weight:600}

/* ⚠️ De echte keuzelijst blijft in de pagina staan zodat het sorteren ook zonder JavaScript
   werkt; wegschuiven en niet `display:none`, anders doet ze niet meer mee. */
.sorteer--verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (min-width:700px){ .keuze{flex:0 0 auto;min-width:230px} }

/* ⛔ HET WITTE KAARTJE OM DE FILTERS MAG WEG. Het was er om een rij chips en een keuzelijst
   bij elkaar te houden; nu staan er twee knoppen die zelf al een rand hebben, en dan is dat
   kaartje een tweede kader om een kader. Gemeten: 220 pixels hoog op een telefoon voor twee
   knoppen van 48. */
.filterblok--knoppen{background:none;border:0;border-radius:0;padding:0;margin-bottom:22px}
/* ⚠️ De chips in de pop-up hebben hun eigen ruimte; de marge van de oude rij hoort daar niet. */
.keuzepop .chips{margin-bottom:0}
/* ⚠️ Naast elkaar, ook op een telefoon: "Collectie" en "Sorteren" zijn allebei kort. */
.filterblok--knoppen .keuze{flex:1 1 0;min-width:0}
/* ⛔ OP EEN SMAL SCHERM ONDER ELKAAR, MET HET WOORDJE ERBIJ. Naast elkaar paste "Sorteren
   Aanbevolen" niet, en het woordje weglaten gaf twee knoppen met "Alles" en "Aanbevolen"
   erop: dan moet de bezoeker raden welke waarvoor dient. Twee regels is dat niet waard. */
@media (max-width:560px){
  .filterblok--knoppen{flex-direction:column}
  .filterblok--knoppen .keuze{width:100%;flex:0 0 auto}
}

/* ══ De varianten als knoppen ═════════════════════════════════════════════════
 * ⚠️ De keuzelijst en het etiket met de kenmerknaam ("Kleur") verdwijnen; de knoppen zeggen
 *    zelf wat ze zijn. De lijst wordt weggeschoven en niet verborgen: `display:none` haalt
 *    haar uit het formulier en dan weet WooCommerce niet meer welke variant gekozen is.
 */
/**
 * ⛔ `.product__info .variations .variantcel select` EN NIET `.variantcel select`. Er staat
 *    verderop al een regel `.product__info .variations select { width:100% }` voor de
 *    keuzelijst op een productpagina, en die weegt zwaarder. Met de korte selector bleef de
 *    lijst 100% breed terwijl ze absoluut gepositioneerd was, en dan steekt ze buiten het
 *    scherm: de productpagina van de loop scrolde zijwaarts, 414 pixels breed op een scherm
 *    van 390. Gemeten in de controle over alle pagina's.
 */
.product__info .variations .variantcel select,
.product__info .variations th,
.product__info .variations .reset_variations{position:absolute;width:1px;height:1px;
  min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.variantknoppen{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.variantknop{min-height:46px;padding:11px 20px;border:1.5px solid var(--lijn);
  border-radius:999px;background:var(--cream);font:inherit;font-weight:600;font-size:.95rem;
  color:inherit;cursor:pointer;transition:.18s}
.variantknop:hover{border-color:var(--amber)}
.variantknop[aria-pressed="true"]{background:var(--aubergine);border-color:var(--aubergine);color:#fff}

/* ⚠️ WooCommerce zet onder de variantkeuze een leeg vak voor de prijs en de voorraad van de
   gekozen variant. Bij deze donut staat daar niets in (beide kleuren kosten hetzelfde), en
   dan blijft er een gat van een halve knop tussen de kleuren en het bestellen. */
/* ⛔ `:empty` WERKT HIER NIET. Het vak van WooCommerce bevat witruimte en een lege div, en
   dan telt het niet als leeg. Gemeten: het vak zelf is 0 hoog, maar de omhullende
   `.single_variation_wrap` staat op 64 pixels en dat gaf een gat van 61 tussen de kleuren
   en het bestellen. De hoogte komt van een marge, niet van inhoud. */
/* ⚠️ `display:contents` haalt het omhulsel uit de opmaak zonder de inhoud te raken. Het vak
   zelf was 0 hoog en had geen marge, maar het omhulsel stond op 64 pixels omdat het als
   los vak meetelde in de ruimte tussen de onderdelen van het formulier. */
.product__info .single_variation_wrap{display:contents}
.product__info .woocommerce-variation{margin:0}
.product__info .variations{margin-bottom:10px}

/* ══ de molen ════════════════════════════════════════════════════════════════
 * Dit blok moet het zonder foto doen (zie delen/molen.php), dus dragen de letters het:
 * Fraunces in aubergine voor het cijfer, klein en gespatieerd eronder, met dunne lijnen
 * ertussen. Dezelfde bouwstenen als de rest van de site, alleen dichter op elkaar.
 */
.molen .sectiekop{margin-bottom:26px}
.molen__feiten{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:start;gap:14px 0}
.molen__feiten li{display:grid;gap:4px;padding:0 30px;text-align:center}
/* ⚠️ De scheiding hangt aan het volgende vak, niet aan het vorige: zo staat er geen streepje
   achter het laatste, en verdwijnt het vanzelf bij het item dat als eerste op een nieuwe
   regel terechtkomt zodra de rij te breed wordt. */
.molen__feiten li + li{border-left:1px solid var(--lijn)}
.molen__feiten strong{font-family:Fraunces,serif;font-size:1.35rem;font-weight:600;
  color:var(--aubergine);line-height:1.15}
.molen__feiten span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);font-weight:600}
.molen__link{margin:0;text-align:center}

@media (max-width:620px){
  /* ⚠️ `align-items` werkt in een kolom op de BREEDTE. Met de `start` van hierboven kropen
     de drie feiten tegen de linkerrand terwijl kop, tekst en knop gecentreerd stonden.
     Onder elkaar zijn verticale scheidingslijnen bovendien onzin; de ruimte doet het werk. */
  .molen__feiten{flex-direction:column;align-items:center;gap:16px}
  .molen__feiten li{padding:0;border-left:0}
  .molen__feiten li + li{border-left:0}
}

/* ── zoeken ─────────────────────────────────────────────────────────────────
 * ⛔ HET VERGROOTGLAS IN DE BALK WAS EEN SCHAKEL NAAR /winkel/ en geen zoekknop; er was
 *    nergens een veld. Deze balk klapt eronder open.
 *
 * ⚠️ De zoekbalk hoort BINNEN `.balk`, die sticky staat. Daardoor schuift hij mee naar
 *    beneden en blijft het veld in beeld terwijl de suggesties eronder staan. */
.zoekbalk{background:var(--cream);border-bottom:1px solid var(--lijn)}
.zoekbalk[hidden]{display:none}
.zoekbalk .wikkel{padding-top:14px;padding-bottom:16px}

/* ⚠️ NIET OVER DE VOLLE BREEDTE. Uitgerekt over 1250 pixels wordt het een leeg veld met
   zes suggesties die links tegen de rand plakken; er is dan meer wit dan tekst. */
.zoekform{position:relative;display:flex;align-items:center;gap:10px;
  max-width:620px;margin-inline:auto}
.zoekform__pict{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:var(--grijs);pointer-events:none}
.zoekform__pict svg{width:19px;height:19px}
.zoekform__veld{flex:1;min-width:0;height:52px;padding:0 16px 0 46px;font:inherit;font-size:1rem;
  color:var(--ink);background:#fff;border:1.5px solid var(--lijn);border-radius:999px;
  -webkit-appearance:none;appearance:none}
.zoekform__veld::placeholder{color:var(--grijs);opacity:.85}
.zoekform__veld:focus{outline:none;border-color:var(--aubergine)}
.zoekform__veld:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* ⚠️ Het kruisje dat Safari en Chrome zelf in een `type=search` zetten valt weg: het staat
   op de plek van onze eigen knop en is op een telefoon nauwelijks te raken. */
.zoekform__veld::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.zoekform__knop{flex:none}

/* de suggesties tijdens het typen */
.zoekform__uit{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--lijn);border-radius:var(--rond);overflow:hidden;
  box-shadow:0 18px 40px rgba(43,33,24,.13)}
.zoekform__uit[hidden]{display:none}
.zoektip{display:flex;align-items:center;gap:14px;padding:10px 14px;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--lijn)}
.zoektip:last-child{border-bottom:0}
.zoektip:hover,.zoektip--aan{background:var(--cream-2)}
.zoektip__foto{width:52px;height:52px;flex:none;border-radius:11px;object-fit:cover;
  background:var(--cream-2)}
.zoektip__naam{font-weight:600;line-height:1.3}
.zoektip__prijs{display:block;font-size:.87rem;color:var(--grijs);margin-top:2px}
/* de laatste regel: "alles bekijken" */
.zoektip--alles{justify-content:center;font-weight:700;color:var(--aubergine);
  background:var(--cream);padding:14px}
.zoekleeg{padding:16px;color:var(--grijs);font-size:.94rem}

/* ⚠️ Op de resultatenpagina staat hetzelfde formulier, maar dan niet in een balk: daar
   mag het rustig ademen en hoeft het niet over de volle breedte. */
.zoekform--pagina{max-width:560px;margin:22px 0 0}

.geenvondst{max-width:640px;display:grid;gap:18px}

@media(max-width:640px){
  .zoekform__knop{display:none}   /* op een telefoon volstaat de Enter-toets */
  .zoekform__veld{height:48px}
  .zoektip__foto{width:46px;height:46px}
}


/* ── uit de heatmap: klikbaar maken wat mensen tóch al aanklikten ──────────── */
.rooster__kop a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:.15s}
.rooster__kop a:hover{color:var(--aubergine);border-bottom-color:var(--amber)}
/* ⚠️ De affiche is nu een schakel; zonder dit krijgt hij de onderstreping en de kleur
   van een gewone link, en dat staat lelijk om een foto. */
a.fotoblok--affiche{display:block;text-decoration:none;color:inherit;transition:.2s}
a.fotoblok--affiche:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){a.fotoblok--affiche:hover{transform:none}}