/* Thema Boelangerie: alle voorkant-CSS (contract §4.3, §14). Breekpunten: max-width 374px, min-width 700px
   en 980px ("telefoon" = onder 980 px). 1 = aliassen en WordPress-basis, 2 = prototype, 3 = blokmarkup. */

/* ===== 1. Aliassen en WordPress-basis ===== */
:root{
  --korst:var(--wp--preset--color--korst);--korst-donker:var(--wp--preset--color--korst-donker);--bruin:var(--wp--preset--color--bruin);
  --terracotta:var(--wp--preset--color--terracotta);--terracotta-donker:var(--wp--preset--color--terracotta-donker);
  --goud:var(--wp--preset--color--goud);--room:var(--wp--preset--color--room);--papier:var(--wp--preset--color--papier);
  --papier-licht:var(--wp--preset--color--papier-licht);--lijn:var(--wp--preset--color--lijn);--tekst:var(--wp--preset--color--tekst);
  --tekst-zacht:var(--wp--preset--color--tekst-zacht);--mosterd:var(--wp--preset--color--mosterd);
  --bord-tekst:var(--wp--preset--color--bord-tekst);--stip:var(--wp--preset--color--stip);
  --slab:var(--wp--preset--font-family--slab);--sans:var(--wp--preset--font-family--sans);
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  /* WooCommerce-blokken gebruiken deze core-presets; nooit onder 16 px (spec §1.3). */
  --wp--preset--font-size--x-small:1rem;--wp--preset--font-size--small:1rem;--wp--preset--font-size--medium:1.125rem;
}
@media (min-width:980px){:root body{--wp--style--root--padding-right:2.5rem;--wp--style--root--padding-left:2.5rem}}
.wp-site-blocks>*,.wp-site-blocks>main>*{margin-block-start:0}
/* In de secties van het prototype regelen de klassen de witruimte, niet de blokafstand van WordPress. */
:is(.hero,.bestellen,.werkt,.ambacht,.bakker,.abonnement,.bezorging,.slot,.paginakop,.leeg-plank,.product,.kop,.voet,.lade,.kassa-main,.melding-sectie) :where(.is-layout-flow,.is-layout-constrained)>*{margin-block-start:0;margin-block-end:0}
[class*="wp-block-boelangerie-"]:not(.is-interactief) .alleen-js,.is-interactief .zonder-js{display:none!important}

/* ===== 2. Prototype (ontwerp/site/mockup/site.css, omgezet) ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--papier) var(--korrel);color:var(--tekst);font:400 18px/1.55 var(--sans)}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--slab);color:var(--korst);margin:0;line-height:1.1;font-weight:700;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
a{color:var(--terracotta-donker);font-weight:600;text-underline-offset:3px;text-decoration-thickness:1.5px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding-block:42px}
[hidden]{display:none!important}

/* ---------- knoppen: één primaire (terracotta), de rest licht ---------- */
:is(.knop,.wp-block-button__link){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border:0;border-radius:12px;
  background:var(--terracotta);color:#FFF7E8;font:700 18px/1.15 var(--sans);letter-spacing:.01em;text-decoration:none;
  box-shadow:0 3px 0 var(--terracotta-donker);cursor:pointer;text-align:center}
:is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){width:100%;min-height:56px;font-size:19px}
:is(.knop.licht,.is-style-licht>.wp-block-button__link){background:var(--papier-licht);color:var(--korst);box-shadow:0 2px 0 var(--lijn);border:2px solid var(--korst)}
:is(.knop,.wp-block-button__link).klein{min-height:44px;padding:8px 16px;font-size:17px}
.tekstlink{display:inline-flex;align-items:center;min-height:44px}
.links-rij{display:flex;flex-wrap:wrap;gap:0 22px}

/* ---------- bouwstenen ---------- */
/* Uithangbordje: plank in terracotta-donker, crème slab-kapitalen, lichte binnenlijn en twee koperen spijkertjes. */
:is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)){position:relative;display:inline-block;font:700 16px/1.1 var(--slab);letter-spacing:.1em;text-transform:uppercase;color:var(--bord-tekst);
  background:linear-gradient(180deg,#A44B0C,var(--terracotta-donker) 60%,#86390a);border-radius:3px;padding:8px 24px 7px;
  box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(238,217,174,.55),0 2px 0 var(--korst),0 5px 10px rgba(42,23,11,.18)}
:is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):before,:is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FBE1A6,var(--goud) 45%,#9C6A1C)}
:is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):before{left:9px}:is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):after{right:9px}
.kop-sectie{margin-bottom:24px}
.kop-sectie :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)){margin-bottom:14px}
.kop-sectie h2{font-size:clamp(29px,7.4vw,46px)}
:is(.ondertitel,.is-style-ondertitel){font:600 19px/1.3 var(--slab);color:var(--terracotta-donker);margin-top:8px}
.intro{margin-top:10px;font-size:18px;color:var(--tekst-zacht);max-width:36em}

/* Kader = de rand van de logo-badge: korst buiten, goud binnen. */
:is(.kader,.is-style-kader,.is-style-medaillon){display:block;border:3px solid var(--korst);border-radius:18px;padding:5px;background:var(--goud);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 14px 28px -10px rgba(42,23,11,.35);overflow:hidden}
:is(.kader,.is-style-kader,.is-style-medaillon) img{width:100%;height:100%;object-fit:cover;border-radius:11px}
:is(.medaillon,.is-style-medaillon){border-radius:50%;padding:4px;aspect-ratio:1/1}
:is(.medaillon,.is-style-medaillon) img{border-radius:50%}

/* Bon: papier-licht, terracotta bovenrand, stippelregels, dubbele streep boven het totaal, gekartelde onderkant. */
:is(.bon,.is-style-bon){position:relative;background:var(--papier-licht);border-top:5px solid var(--terracotta);border-radius:4px 4px 0 0;padding:16px 18px 18px;margin-bottom:10px;
  filter:drop-shadow(0 0 1px rgba(91,49,24,.45)) drop-shadow(0 8px 10px rgba(58,34,19,.10))}
:is(.bon,.is-style-bon):after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:linear-gradient(135deg,var(--papier-licht) 50%,transparent 50%) 0 0/18px 9px repeat-x,
             linear-gradient(-135deg,var(--papier-licht) 50%,transparent 50%) 0 0/18px 9px repeat-x}
.bon-kop{font:700 21px/1.2 var(--slab);color:var(--korst);margin-bottom:6px}
.regel{display:flex;align-items:baseline;gap:8px;font-size:17px;line-height:1.3;margin:8px 0}
.regel .stip{flex:1;min-width:16px;border-bottom:2px dotted var(--stip);transform:translateY(-4px)}
.regel b,.regel .bedrag{font:700 18px var(--slab);color:var(--korst);white-space:nowrap}
.regel small{display:block;font-size:16px;color:var(--tekst-zacht)}
.regel.totaal{margin-top:12px;padding-top:10px;border-top:4px double var(--lijn);font-weight:700}
.regel.totaal b{font-size:23px}
:is(.stempel,.is-style-stempel){display:inline-block;font:700 16px/1 var(--slab);text-transform:uppercase;letter-spacing:.07em;background:var(--goud);color:var(--korst);
  border:2px solid var(--korst);border-radius:6px;padding:7px 10px 6px;transform:rotate(-4deg);box-shadow:0 3px 0 rgba(42,23,11,.25);white-space:nowrap}
:is(.stempel,.is-style-stempel).room{background:var(--papier-licht)}

/* Sierlijn: korst en goud, met een ruitje in het midden. */
/* ---------- deadlinebalk ---------- */
.deadline{display:block;min-height:44px;padding:11px 12px;background:var(--korst-donker);color:var(--room);
  font:600 16px/1.3 var(--sans);text-align:center;text-decoration:none;border-bottom:3px solid var(--terracotta)}
.deadline b{color:var(--goud);font-weight:700}
.deadline .lang{display:none}

/* ---------- kop ---------- */
.kop{background:var(--papier-licht);border-bottom:1px solid var(--lijn);box-shadow:0 1px 0 #fff inset}
.kop .wrap{display:flex;align-items:center;gap:8px;min-height:68px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.merk img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px var(--papier-licht),0 0 0 3.5px var(--bruin)}
.merk span{font:700 23px/1 var(--slab);color:var(--korst);letter-spacing:.005em}
.kopknop{min-height:44px;padding:6px 16px;font-size:17px;box-shadow:0 2px 0 var(--terracotta-donker)}
.kopknop .vol-tekst{display:none;flex-direction:column;align-items:flex-start;line-height:1.05}
.kopknop .vol-tekst small{font:600 16px/1.05 var(--sans);opacity:.92}
.kopknop .vol-tekst b{font:700 18px/1.1 var(--slab)}
.heeft-briefje .kopknop .leeg-tekst{display:none}
.heeft-briefje .kopknop .vol-tekst{display:flex}
.heeft-briefje .kopknop{padding:4px 14px}
html:not(.heeft-briefje) body.post-type-archive-product .kopknop{display:none}
.menu-knop{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:6px;border:0;border-bottom:3px solid var(--goud);background:transparent;
  font:700 18px/1 var(--slab);color:var(--bruin);cursor:pointer}
.hoofdmenu,.kop .lang{display:none}
.kop.kassa .wrap{justify-content:space-between}
.kop.kassa .tekstlink{font-size:17px}

/* ---------- menulade ---------- */
.lade-kop{padding:16px 16px 10px;background:var(--korst) var(--korrel);border-bottom:3px solid var(--terracotta)}
.lade-kop img{width:100%;border-radius:4px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.lade-sluit{display:flex;margin:8px 0 0 auto;min-height:44px;align-items:center;padding:0 2px;background:none;border:0;border-bottom:3px solid var(--goud);
  font:700 18px var(--slab);color:var(--room);cursor:pointer}
.lade div.lade-menu{padding:6px 16px 0}
.lade .lade-menu .wp-block-navigation-item__content{display:block;color:inherit;padding:11px 0 10px;border-bottom:2px dotted var(--stip);text-decoration:none;min-height:44px}
.lade .wp-block-navigation-item__label{display:block;font:700 21px/1.2 var(--slab);color:var(--korst)}
.lade .lade-menu .wp-block-navigation-item__description{display:block;font:600 16px/1.3 var(--slab);color:var(--terracotta-donker);margin-top:2px}
.lade-voet{padding:18px 16px 24px;margin-top:auto;display:grid;gap:4px}
.lade-voet :is(.knop,.wp-block-button__link){margin-bottom:6px}

/* ---------- uithangbord (hero) ---------- */
.hero{padding-block:10px 36px}
.hero .wrap{display:grid;gap:14px}
.boekplaat{position:relative;margin:0}
.hero-beeld{aspect-ratio:3/1}
.hero-beeld img{object-position:50% 30%}
:is(.zegel,.is-style-zegel){display:none}
:is(.bovenregel,.is-style-bovenregel){font:600 18px/1.3 var(--slab);color:var(--terracotta-donker);display:flex;align-items:center;gap:10px;white-space:nowrap}
:is(.bovenregel,.is-style-bovenregel):before{content:"";width:22px;height:2px;background:var(--goud);box-shadow:0 1px 0 var(--korst);flex:0 0 22px}
.hero h1{font-size:clamp(31px,8.6vw,56px);margin-top:8px;letter-spacing:-.005em}
.hero .lead{display:none}
:is(.feiten,.is-style-feitenkaartje){list-style:none;margin:14px 0 18px;padding:0}
:is(.feiten,.is-style-feitenkaartje) li{display:flex;gap:10px;padding:6px 0;border-top:2px dotted var(--stip);font-size:18px;line-height:1.3;white-space:nowrap}
:is(.feiten,.is-style-feitenkaartje) li:last-child{border-bottom:2px dotted var(--stip)}
:is(.feiten,.is-style-feitenkaartje) b{color:var(--korst);font-family:var(--slab);font-size:19px}
.hero .tekstlink{font-size:17px}

/* postcodecheck die op de plek uitklapt */
.pc-check{margin-top:4px}
.pc-check summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--terracotta-donker);
  text-decoration:none;font-size:17px}
.pc-check summary .t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.pc-check summary::-webkit-details-marker{display:none}
.pc-check summary .pijl{display:inline-block;margin-left:6px;transition:transform .15s;text-decoration:none}
.pc-check[open] summary .pijl{transform:rotate(90deg)}
.pc-paneel{margin-top:6px;padding:14px;background:var(--papier-licht);border:1.5px solid var(--lijn);border-left:4px solid var(--goud);border-radius:12px}
.pc-paneel label{display:block;font-size:17px;font-weight:600;margin-bottom:8px}
.pc-paneel .rij{display:flex;gap:8px}
.veld{min-height:52px;padding:10px 14px;font:600 18px var(--sans);border:1.5px solid var(--veldrand);border-radius:12px;background:#FFFDF8;color:var(--tekst);width:100%}
.pc-paneel .veld{flex:1;min-width:0;width:0;text-transform:uppercase}
.pc-antwoord{margin-top:12px;font-size:17px;line-height:1.4}
.pc-antwoord b{font-family:var(--slab);color:var(--korst);font-size:18px}
.pc-antwoord :is(.knop,.wp-block-button__link){margin-top:10px}

/* stand "welkom terug" */
.is-terug .hero-nieuw{display:none}
html:not(.is-terug) .hero-terug,html:not(.is-terug) .alleen-terug{display:none}
.herhaal{margin:12px 0 14px;padding:12px 14px 14px}
.herhaal .bon-kop{font-size:23px;margin-bottom:8px}
.herhaal-regel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:2px dotted var(--stip)}
.herhaal-regel b{display:block;font:700 18px/1.2 var(--slab);color:var(--korst)}
.herhaal-regel small{display:block;font-size:16px;color:var(--tekst-zacht)}
.herhaal-dag{padding-top:10px}
.herhaal-dag .lbl{display:block;font-size:16px;font-weight:600;color:var(--tekst-zacht);margin-bottom:6px}
.hero-terug :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){margin-top:2px}
.abo-stap{display:block;padding:11px 0 9px;font-size:17px;line-height:1.4}
.abo-stap span{white-space:nowrap}
.hero-terug .tekstlink{font-size:17px}

/* ---------- keuzeknoppen (chips) ---------- */
.groep{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 13px;border-radius:10px;border:1.5px solid var(--veldrand);background:transparent;color:var(--tekst);font:600 17px/1 var(--sans);cursor:pointer}
/* gekozen: papier-licht, korstrand van 2 px en een gouden onderstreep (geen vol blok) */
.chip[aria-checked=true]{background:var(--papier-licht);border:2px solid var(--korst);color:var(--korst);font-weight:700;box-shadow:inset 0 -4px 0 var(--goud)}
.daglijst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip.dag{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:6px 4px}
.chip.dag b{font:700 18px/1 var(--slab)}
.chip.dag span{font-size:16px;line-height:1}
.chip.dag.compact{min-height:48px}

.stepper{display:inline-flex;align-items:center;border:2px solid var(--korst);border-radius:12px;overflow:hidden;background:var(--papier-licht)}
.stepper button{width:48px;height:44px;border:0;background:transparent;font:700 24px/1 var(--slab);color:var(--korst);cursor:pointer}
.stepper output{min-width:34px;text-align:center;font:700 21px/1 var(--slab);color:var(--korst)}

/* ---------- bestelblok: etalage ---------- */
.bestellen{background:var(--papier-licht);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.kaarten{display:grid}
.kaart{position:relative;display:grid;grid-template-columns:150px 1fr;gap:14px 16px;padding:18px 0 22px;align-items:start}
.kaart + .kaart{border-top:2px dotted var(--stip)}
.portret{position:relative}
.portret :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:4/3;padding:4px;border-radius:14px;background:var(--goud)}
.portret :is(.kader,.is-style-kader,.is-style-medaillon) img{border-radius:9px;background:var(--mosterd)}
/* prijs als goudkleurig prijskaartje in stempelvorm, op de hoek van het portret */
.prijskaartje{position:absolute;right:-10px;bottom:-14px;z-index:2;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(180deg,#F3C266,var(--goud));color:var(--korst);border:2px solid var(--korst);border-radius:7px;padding:5px 9px 4px 14px;
  transform:rotate(-5deg);box-shadow:0 3px 0 rgba(42,23,11,.3)}
.prijskaartje:before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--papier-licht);border:1.5px solid var(--korst)}
.prijskaartje b{font:700 23px/1 var(--slab);white-space:nowrap}
.prijskaartje small{font:600 16px/1.1 var(--sans)}
.portret :is(.stempel,.is-style-stempel){position:absolute;left:-6px;top:-12px;z-index:2;font-size:16px;padding:6px 8px 5px}
.portret .stempel-briefje,.portret .stempel-vorige{display:none}
.kaart.in-briefje .stempel-briefje{display:inline-block}
.is-terug .kaart.vorige .stempel-vorige{display:inline-block}
.is-terug .kaart.vorige.in-briefje .stempel-vorige{display:none}
.kaart h3{font-size:22px;line-height:1.1}
.feit{font-size:17px;color:var(--tekst-zacht);margin-top:4px;line-height:1.3}
.omschrijving{display:none}
.kaart .meer{font-size:16px;min-height:44px}
.keuzes{grid-column:1/-1;display:flex;gap:10px 14px;flex-wrap:wrap}
.keuze-label{display:block;font-size:16px;font-weight:600;color:var(--tekst-zacht);margin-bottom:4px;line-height:1.2}
.kaart-actie{grid-column:1/-1}
.kaart-actie .stepper{width:100%;justify-content:space-between}
.kaart-actie .stepper button{width:64px;height:52px}
.kaart-actie .stepper output{flex:1;font-size:19px}
.kaart-actie .stepper output small{font:600 16px var(--sans);color:var(--tekst-zacht);margin-left:4px}
.kaart .stepper{display:none}
.kaart.in-briefje .stepper{display:flex}
.kaart.in-briefje .toevoegen{display:none}
/* zodra er iets in het briefje zit, is Afrekenen de enige volle knop; Toevoegen wordt licht */
.heeft-briefje .kaart .toevoegen{background:var(--papier-licht);color:var(--korst);border:2px solid var(--korst);box-shadow:0 2px 0 var(--lijn)}

/* briefje voor de bakker, met de bezorgdag erin */
.briefje{margin-top:26px;padding:18px 18px 20px}
.briefje-kop{font-size:24px}
.briefje .dag-kop{font:700 18px/1.2 var(--slab);color:var(--korst);margin:12px 0 8px}
.briefje .regels{margin-top:14px;padding-top:4px;border-top:2px dotted var(--stip)}
.briefje .leeg{color:var(--tekst-zacht);font-size:17px;padding:10px 0 2px}
.briefje :is(.knop,.wp-block-button__link){margin-top:16px}
:is(.zeker,.is-style-zeker){list-style:none;margin:12px 0 0;padding:0;font-size:16px;color:var(--tekst-zacht);line-height:1.4}
:is(.zeker,.is-style-zeker) li{position:relative;padding:3px 0 3px 18px}
:is(.zeker,.is-style-zeker) li:before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;transform:rotate(45deg);background:var(--goud);box-shadow:0 0 0 1px var(--korst)}
.allergenen{margin-top:12px;padding-top:10px;border-top:2px dotted var(--stip);font-size:16px}
.allergenen a{display:inline-flex;min-height:44px;align-items:center}
.na-briefje{margin-top:18px;display:flex;flex-wrap:wrap;gap:0 22px}
.bakker-mini{display:none}

/* ---------- zo werkt het: een route met drie halteplaatsen ---------- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:20px;position:relative;counter-reset:s}
.stappen:before{content:"";position:absolute;left:45px;top:40px;bottom:40px;border-left:3px dotted var(--terracotta)}
.stappen .stap{position:relative;display:grid;grid-template-columns:94px 1fr;gap:16px;align-items:center}
.stappen :is(.medaillon,.is-style-medaillon){width:94px}
.stappen .halte{position:relative;display:block}
.stappen .halte:after{counter-increment:s;content:counter(s);position:absolute;right:-6px;bottom:-4px;width:34px;height:34px;border-radius:50%;
  background:var(--terracotta-donker);color:var(--bord-tekst);font:700 19px/30px var(--slab);text-align:center;border:2px solid var(--papier)}
.stappen h3{font-size:21px}
.stappen p{font-size:17px;color:var(--tekst-zacht);margin-top:4px}

/* ---------- ambacht ---------- */
.ambacht{background:var(--papier-licht);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.strook{margin:4px 0 26px}
.strook :is(.kader,.is-style-kader,.is-style-medaillon){padding:4px;border-radius:14px}
.strook :is(.kader,.is-style-kader,.is-style-medaillon) img{border-radius:9px}
.labels{counter-reset:l;list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;text-align:center;font:700 17px/1.2 var(--slab);color:var(--korst)}
.labels li:before{counter-increment:l;content:counter(l) " ";color:var(--terracotta-donker)}
.ambacht .tekst p{max-width:36em}
.erin{max-width:560px;margin-top:24px}

/* ---------- bakker ---------- */
.bakker .wrap{display:grid;gap:22px}
.bakker :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:4/3;max-width:520px}
.bakker :is(.kader,.is-style-kader,.is-style-medaillon) img{object-position:60% 20%}
.bakker p.tekst{margin-top:14px}
.handtekening{font:600 22px/1 var(--slab);color:var(--bruin);margin-top:14px}

/* ---------- abonnement: korstband ---------- */
.abonnement{background:var(--korst) var(--korrel);color:var(--room);border-top:4px solid var(--goud);box-shadow:inset 0 4px 0 var(--korst-donker)}
.abonnement .wrap{display:grid;gap:22px}
.abonnement :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)){background:linear-gradient(180deg,#F0BC5E,var(--goud) 60%,#D69A35);color:var(--korst);box-shadow:inset 0 0 0 4px rgba(58,34,19,.25),0 2px 0 var(--korst-donker)}
.abonnement :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):before,.abonnement :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):after{background:radial-gradient(circle at 35% 35%,#8a5a2b,var(--korst))}
.abonnement h2{color:var(--papier-licht)}
.abonnement :is(.ondertitel,.is-style-ondertitel){color:var(--goud)}
.punten{list-style:none;margin:18px 0 0;padding:0}
.punten li{padding:10px 0 10px 26px;border-top:2px dotted rgba(238,217,174,.3);font-size:18px;position:relative}
.punten li:before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;transform:rotate(45deg);background:var(--goud)}
.punten li:last-child{border-bottom:2px dotted rgba(238,217,174,.3)}
.punten b{color:var(--papier-licht)}
.abonnement .knoppen{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin-top:22px}
.abonnement .knoppen :is(.knop,.wp-block-button__link){width:100%}
.abonnement a.tekstlink{color:var(--goud)}
.abonnement :is(.medaillon,.is-style-medaillon){width:150px;margin:0;order:-1;border-color:var(--goud);background:var(--korst-donker)}

/* ---------- bezorging ---------- */
.dorpen{list-style:none;margin:4px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:12px 10px}
.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)){font-size:16px;letter-spacing:.07em;padding:8px 20px 7px;background:linear-gradient(180deg,#F8E6C2,#EED6A8);color:var(--bruin);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(91,49,24,.25),0 2px 0 var(--bruin),0 4px 8px rgba(42,23,11,.12)}
.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):before,.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)):after{background:radial-gradient(circle at 35% 35%,#c08a4a,var(--bruin))}
.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)).aanvraag{background:transparent;color:var(--terracotta-donker);box-shadow:none;border:2px dashed var(--terracotta-donker)}
.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)).aanvraag:before,.dorpen :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)).aanvraag:after{display:none}
.tabel{position:relative;margin:30px 0 24px;max-width:600px;padding-top:22px}
.tabel .regel.volgende span:first-child,.tabel .regel.volgende span:last-child{font-weight:700;color:var(--korst)}
.tabel>:is(.stempel,.is-style-stempel){position:absolute;right:14px;top:-16px}
.vragen{margin-top:26px;max-width:760px}
.vragen h3{font-size:24px;margin-bottom:6px}
:is(.vragen details,details.is-style-vraag){border-bottom:2px dotted var(--stip)}
:is(.vragen,details.is-style-vraag) summary{cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 18px/1.25 var(--slab);color:var(--korst);list-style:none;padding:6px 0}
:is(.vragen,details.is-style-vraag) summary::-webkit-details-marker{display:none}
:is(.vragen,details.is-style-vraag) summary:after{content:"+";flex:0 0 32px;height:32px;border-radius:50%;border:2px solid var(--terracotta-donker);font:700 22px/27px var(--slab);text-align:center;color:var(--terracotta-donker)}
:is(.vragen details,details.is-style-vraag)[open] summary:after{content:"–"}
:is(.vragen details,details.is-style-vraag) p{padding:0 0 14px;font-size:17px}
.vragen .groepkop{font:700 16px/1 var(--slab);letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-donker);margin:28px 0 4px}

/* ---------- slot ---------- */
.slot{text-align:center;padding-block:48px 56px}
.slot img.bord{margin:0 auto 20px;width:min(600px,100%);filter:drop-shadow(0 8px 10px rgba(42,23,11,.25));border-radius:3px}
.slot .groot{font:700 clamp(34px,9vw,60px)/1.05 var(--slab);color:var(--korst)}
.slot .vertaling{font-size:17px;color:var(--tekst-zacht);margin-top:8px}
.slot :is(.knop,.wp-block-button__link){margin-top:22px;width:100%;max-width:340px}
.slot .rij{display:flex;flex-direction:column;align-items:center;margin-top:8px}

/* ---------- voet ---------- */
.voet{background:var(--korst-donker) var(--korrel);color:var(--room);padding-block:38px 34px;font-size:17px;border-top:4px solid var(--terracotta)}
.voet a{color:var(--room);font-weight:600;display:inline-flex;align-items:center;min-height:44px;text-decoration-color:rgba(238,217,174,.4)}
.voet h3{color:var(--goud);font-size:20px;margin-bottom:4px}
.voet .kolommen{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.voet .breed,.voet .breed-mobiel{grid-column:1/-1}
.voet .contact-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.voet .contact-knoppen a{border:2px solid rgba(238,217,174,.65);border-radius:12px;padding:0 16px;min-height:48px;text-decoration:none}
.voet .contact-knoppen a.app{background:var(--room);color:var(--korst);border-color:var(--room)}
.voet .breed-mobiel ul{display:flex;flex-wrap:wrap;gap:0 22px}
.voet ul{list-style:none;margin:0;padding:0}
.voet .tekst{padding:4px 0;line-height:1.45}
.voet .onderste{margin-top:28px;padding-top:22px;border-top:1px solid rgba(238,217,174,.22);display:flex;gap:16px;align-items:center;font-size:16px;line-height:1.5;color:#E4CDA0}
.voet .onderste img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--goud);flex:0 0 76px}
.voet .onderste b{font-family:var(--slab);color:var(--room);font-size:18px}

/* ---------- vaste bestelbalk (telefoon) ---------- */
.balk{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--korst) var(--korrel);color:var(--room);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:8px;box-shadow:0 -6px 18px rgba(42,23,11,.28);border-top:3px solid var(--goud)}
.balk.zichtbaar{display:flex}
.is-vol .balk{display:none!important}
.balk .info{flex:1;line-height:1.2;min-width:0}
.balk .info strong{display:block;font:700 18px/1.2 var(--slab);color:var(--papier-licht);white-space:nowrap}
.balk .info span{display:block;font-size:16px;white-space:nowrap}
.balk .app{color:var(--room);border:2px solid rgba(238,217,174,.7);border-radius:12px;min-height:48px;padding:0 12px;font:700 17px var(--sans);text-decoration:none;display:inline-flex;align-items:center;background:transparent}
.balk :is(.knop,.wp-block-button__link){min-height:48px;padding:8px 16px;font-size:17px;white-space:nowrap}
.balk .gevuld,.heeft-briefje .balk .leeg{display:none}
.heeft-briefje .balk .gevuld{display:flex}
.balk .gevuld,.balk .leeg{align-items:center;gap:8px;flex:1;min-width:0}
.balk .leeg{display:flex}

/* ---------- pagina's onder de voorpagina ---------- */
.paginakop{padding-block:14px 6px}
.paginakop :is(.bovenregel,.is-style-bovenregel){margin-bottom:4px}
.paginakop h1{font-size:clamp(34px,9vw,56px)}
.paginakop .regel-klein{font-size:17px;color:var(--tekst-zacht);margin-top:8px;line-height:1.45}
.paginakop .regel-klein b{color:var(--korst);font-family:var(--slab);font-size:18px}
.paginakop.ruim{padding-block:30px 10px}
.paginakop .intro{margin-top:12px}
.paginakop :is(.bordje,.is-style-uithangbordje,.dorpen>:where(li)){margin-bottom:14px}
body.post-type-archive-product .bestellen{border:0;padding-top:0;background:transparent}
.terug-kort{margin:12px 0 4px;padding:12px 14px 12px}
.terug-kort .regel{margin:4px 0 10px}
.terug-kort :is(.knop,.wp-block-button__link){min-height:52px}

/* productpagina */
.product .koop{display:grid;gap:18px}
.product .portret :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:4/3}
.product .prijskaartje{right:10px;bottom:-16px}
.product .prijskaartje b{font-size:26px}
.product h1{font-size:clamp(34px,9vw,52px)}
.product .feit{font-size:18px;margin-top:6px}
.product .keuzes{margin-top:16px}
.koop-rij{display:flex;align-items:flex-end;gap:14px;margin-top:14px}
.koop :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){margin-top:16px}
.koop :is(.knop.licht,.is-style-licht>.wp-block-button__link).vol{margin-top:10px;font-size:18px}
.koop .regel-klein{font-size:17px;color:var(--tekst-zacht);margin-top:12px}
.blokken{display:grid;gap:26px}
.blok h2{font-size:26px;margin-bottom:8px}
.blok p{font-size:18px}
.mini-kaarten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini-kaart{text-decoration:none;color:inherit;display:block}
.mini-kaart :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:4/3;padding:3px;border-radius:12px}
.mini-kaart :is(.kader,.is-style-kader,.is-style-medaillon) img{border-radius:8px}
.mini-kaart b{display:block;font:700 18px/1.2 var(--slab);color:var(--korst);margin-top:8px}
.mini-kaart span{font-size:16px;color:var(--tekst-zacht)}

/* kassa */
.kassa-main .titel{padding:18px 0 4px}
.kassa-main h1{font-size:36px}
.kassa-main .titel p{font-size:18px;color:var(--tekst-zacht);margin-top:4px}
.kassa-bon{margin:16px 0 22px}
.kassa-bon .bon-kop{display:flex;justify-content:space-between;align-items:center}
.kassa-bon .bon-kop a{font:600 17px var(--sans)}
fieldset{border:0;margin:0 0 6px;padding:18px 0 4px;border-top:2px dotted var(--stip)}
legend{display:flex;align-items:center;gap:10px;font:700 22px/1.2 var(--slab);color:var(--korst);padding:0;margin-bottom:6px;float:left;width:100%}
legend+*{clear:both}
.nr{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--terracotta-donker);color:var(--bord-tekst);font:700 18px var(--slab);flex:0 0 32px}
.label{display:block;font-weight:600;font-size:17px;margin:14px 0 6px}
.label .opt{font-weight:400;color:var(--tekst-zacht)}
.hulp{font-size:16px;color:var(--tekst-zacht);margin-top:6px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc-twee{display:grid;grid-template-columns:130px 1fr;gap:10px}
select.veld{appearance:none;padding-right:42px}
.keuzelijst{position:relative;display:block}
.keuzelijst:after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2.5px solid var(--korst);border-bottom:2.5px solid var(--korst);transform:rotate(45deg);pointer-events:none}
textarea.veld{min-height:96px;font-weight:400;resize:vertical}
.vink{display:flex;gap:12px;align-items:center;margin-top:14px;font-size:17px;min-height:44px}
.vink input{width:24px;height:24px;accent-color:var(--terracotta);margin:0;flex:0 0 24px}
.bez-regel{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding:10px 14px;background:var(--papier-licht);border-radius:10px;font-size:17px}
.bez-regel b{font-family:var(--slab);color:var(--korst)}
.methode{display:flex;gap:12px;align-items:center;padding:12px 14px;margin-top:10px;border:1.5px solid var(--veldrand);border-radius:12px;background:#FFFDF8;min-height:60px;cursor:pointer}
.methode.aan{border:2px solid var(--korst);background:var(--papier-licht);box-shadow:inset 4px 0 0 var(--goud)}
.methode input{width:22px;height:22px;accent-color:var(--terracotta);margin:0}
.methode b{display:block;font:700 18px var(--slab);color:var(--korst)}
.methode small{display:block;font-size:16px;color:var(--tekst-zacht)}
.kassa-main .klein{font-size:16px;color:var(--tekst-zacht);margin-top:16px;line-height:1.45}
.kassa-main :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){margin-top:16px}
.kassa-main .na{text-align:center;margin-top:6px}
.snel{margin:0 0 4px}
.snel .groep{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wallet{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:12px;background:var(--korst-donker);color:#fff;font:700 18px var(--sans)}
.snel .hulp{text-align:center}
.of-lijn{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--tekst-zacht);margin:16px 0 4px}
.of-lijn:before,.of-lijn:after{content:"";flex:1;border-top:2px dotted var(--stip)}
.zij{display:none}

/* bevestiging */
.dank h1{font-size:clamp(30px,8vw,48px)}
.dank :is(.bovenregel,.is-style-bovenregel){margin-bottom:6px}
.nu-stappen{list-style:none;margin:8px 0 0;padding:0;counter-reset:n}
.nu-stappen li{position:relative;padding:6px 0 12px 48px;font-size:18px}
.nu-stappen li:before{counter-increment:n;content:counter(n);position:absolute;left:0;top:4px;width:32px;height:32px;border-radius:50%;background:var(--terracotta-donker);color:var(--bord-tekst);font:700 18px/32px var(--slab);text-align:center}
.vervolg{display:grid;gap:12px;margin-top:6px}
.vervolg a{display:block;padding:14px 16px;border:1.5px solid var(--lijn);border-left:4px solid var(--goud);border-radius:12px;background:var(--papier-licht);text-decoration:none;color:var(--tekst);font-weight:400}
.vervolg a b{display:block;font:700 19px/1.25 var(--slab);color:var(--korst)}
.vervolg a span{font-size:17px;color:var(--tekst-zacht)}
.groet{display:flex;align-items:center;gap:16px;margin-top:26px}
.groet :is(.medaillon,.is-style-medaillon){width:96px;flex:0 0 96px}
.groet p{font:600 22px/1.3 var(--slab);color:var(--bruin)}

/* abonnementpagina */
.abo-kop .wrap{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:14px 16px}
.abo-kop .abo-beeld{width:104px}
.abo-kop .abo-boven{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.abo-kop .abo-boven :is(.ondertitel,.is-style-ondertitel){margin-top:6px}
.abo-kop h1,.abo-kop .intro,.abo-kop :is(.knop,.wp-block-button__link),.abo-kop .vast,.abo-kop .tekstlink{grid-column:1/-1}
.abo-kop .intro{margin-top:-2px}
.vast{font:600 17px/1.35 var(--slab);color:var(--terracotta-donker);margin-top:-4px;display:flex;gap:10px;align-items:center}
.vast:before{content:"";width:8px;height:8px;transform:rotate(45deg);background:var(--goud);box-shadow:0 0 0 1px var(--korst);flex:0 0 8px}
.al-abonnee{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding:8px 14px;margin-bottom:18px;border:1.5px dashed var(--veldrand);border-radius:12px;font-size:17px}
.al-abonnee span{font-weight:600;color:var(--tekst-zacht);margin-right:4px}
.al-abonnee a{display:inline-flex;align-items:center;min-height:44px}
.al-abonnee i{font-style:normal;color:var(--stip)}
.kop-klein{font-size:26px;margin-bottom:16px}
.route{list-style:none;margin:0 0 30px;padding:0;counter-reset:r;position:relative}
.route:before{content:"";position:absolute;left:16px;top:20px;bottom:30px;border-left:3px dotted var(--terracotta)}
.route li{position:relative;padding:4px 0 16px 50px;font-size:18px}
.route li:before{counter-increment:r;content:counter(r);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--terracotta-donker);color:var(--bord-tekst);font:700 19px/34px var(--slab);text-align:center;box-shadow:0 0 0 4px var(--papier)}
.route b{font-family:var(--slab);color:var(--korst);font-size:19px}
.eerlijk{max-width:560px}
.eerlijk .regel{flex-wrap:wrap}
.abo-form{background:var(--papier-licht);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.formulier{background:#FFFCF6;border:1.5px solid var(--lijn);border-radius:18px;padding:18px 16px 22px;box-shadow:0 8px 20px -12px rgba(58,34,19,.3)}
.stap-kop{display:flex;align-items:center;gap:10px;font:700 21px/1.2 var(--slab);color:var(--korst);margin:22px 0 10px;padding-top:18px;border-top:2px dotted var(--stip)}
.stap-kop:first-of-type{margin-top:0;padding-top:0;border-top:0}
.broodrij{display:grid;grid-template-columns:72px 1fr auto;gap:10px 14px;align-items:center;padding:12px 0;border-bottom:1px solid #EADBC0}
.broodrij .etiket{width:72px;aspect-ratio:4/3;border-radius:8px;border:2px solid var(--bruin);overflow:hidden;background:var(--mosterd)}
.broodrij .etiket img{width:100%;height:100%;object-fit:cover}
.broodrij b{display:block;font:700 18px/1.15 var(--slab);color:var(--korst)}
.broodrij small{display:block;font-size:16px;color:var(--tekst-zacht);margin-top:2px}
.broodrij .stepper button{width:42px}
.broodrij .stepper output{min-width:26px}
.broodrij .keuzes{padding:2px 0 4px}
.broodrij:not(.in-briefje) .rij-keuzes{display:none}
.is-terug .kaart .toevoegen{background:var(--papier-licht);color:var(--korst);border:2px solid var(--korst);box-shadow:0 2px 0 var(--lijn)}
.broodrij:has(+ .stap-kop),.broodrij:last-of-type{border-bottom:0}
.abo-bon{margin:18px 0 6px;padding:14px 16px 16px}
.abo-bon .bon-kop{font-size:19px}
.abo-bon .samenvatting{font:700 19px/1.35 var(--slab);color:var(--korst)}
.abo-bon .regel{margin:6px 0}
.formulier :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){margin-top:18px}
.privacy{font-size:16px;color:var(--tekst-zacht);margin-top:16px}
.of{text-align:center;margin-top:6px}
.abo-vragen{padding-top:40px}

/* overige pagina's */
.verhaal p{margin-top:14px;max-width:36em}
.panelen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.panelen figure{margin:0}
.panelen :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:358/691;padding:3px;border-radius:12px}
.panelen :is(.kader,.is-style-kader,.is-style-medaillon) img{border-radius:8px}
.panelen figcaption{text-align:center;font:700 17px/1.2 var(--slab);color:var(--korst);margin-top:8px}
.panelen figcaption span{display:block;font:400 16px/1.3 var(--sans);color:var(--tekst-zacht);margin-top:3px}
.feitenbalk p{margin:0}
.feitenbalk{display:grid;gap:4px;margin-top:20px;padding:14px 16px;background:var(--papier-licht);border:1.5px solid var(--lijn);border-radius:12px;font-size:16px;color:var(--tekst-zacht)}
.contact-groot{display:grid;gap:12px;margin-top:22px}
.contact-groot :is(.knop,.wp-block-button__link){justify-content:space-between;min-height:64px;padding:10px 18px}
.contact-groot :is(.knop,.wp-block-button__link) small{font:600 16px var(--sans);opacity:.9}
.mail-kaart{padding:14px 16px;border:2px solid var(--korst);border-radius:12px;background:var(--papier-licht)}
.mail-kaart b{display:block;font:700 19px var(--slab);color:var(--korst)}
.mail-kaart a{display:flex;align-items:center;min-height:44px}
.mail-kaart span{font-size:16px;color:var(--tekst-zacht)}
.tabs{display:flex;gap:6px;overflow:hidden;flex-wrap:wrap;margin:16px 0 20px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--veldrand);text-decoration:none;color:var(--tekst);font-size:17px}
.tabs a[aria-current]{background:var(--papier-licht);border:2px solid var(--korst);color:var(--korst);font-weight:700;box-shadow:inset 0 -4px 0 var(--goud)}
.bestelling{margin-bottom:22px}
.bestelling .bon-kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bestelling .bon-kop small{font:600 16px var(--sans);color:var(--tekst-zacht)}
.bestelling :is(.knop,.wp-block-button__link){margin-top:12px}
.leeg-plank{text-align:center;padding-block:28px 8px}
.leeg-plank :is(.kader,.is-style-kader,.is-style-medaillon){max-width:280px;margin:0 auto 22px;aspect-ratio:1/1}
.leeg-plank h1{font-size:clamp(32px,8.6vw,52px)}
.leeg-plank p{margin-top:10px;color:var(--tekst-zacht)}
.leeg-plank :is(.knop,.wp-block-button__link){margin-top:20px;width:100%;max-width:340px}
.leeg-plank .links-rij{justify-content:center;margin-top:6px}

/* ---------- smal (onder 375 px): bovenregels en feiten op één regel ---------- */
@media (max-width:374px){
  :is(.bovenregel,.is-style-bovenregel){font-size:16.5px;gap:8px}
  :is(.bovenregel,.is-style-bovenregel):before{width:16px;flex-basis:16px}
  :is(.feiten,.is-style-feitenkaartje) li{font-size:16.5px;gap:8px}
  :is(.feiten,.is-style-feitenkaartje) b{font-size:17px}
  .merk img{width:42px;height:42px}
  .merk span{font-size:21px}
  .kaart{grid-template-columns:132px 1fr;gap:14px 14px}
  .chip{padding:0 10px;font-size:16px}
  .keuzes{gap:8px 10px}
  .balk{padding-left:12px;padding-right:12px;gap:6px}
  .balk :is(.knop,.wp-block-button__link){padding:8px 12px}
  .balk .app{padding:0 10px}
  .balk .info strong{font-size:16px}
}

@media (min-width:700px){
  .stappen{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .stappen:before{left:16%;right:16%;top:76px;bottom:auto;border-left:0;border-top:3px dotted var(--terracotta)}
  .stappen .stap{grid-template-columns:1fr;text-align:center;justify-items:center;align-content:start}
  .stappen .halte{width:156px;max-width:100%}
  .stappen :is(.medaillon,.is-style-medaillon){width:156px;height:156px}
  .stappen .halte:after{right:2px;bottom:2px}
  .voet .kolommen{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .voet .breed,.voet .breed-mobiel{grid-column:auto}
  .voet .breed-mobiel ul{display:block}
  .mini-kaarten{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  section{padding-block:84px}
  .deadline .kort{display:none}.deadline .lang{display:inline}
  .kop .wrap{min-height:84px;gap:28px}
  .merk img{width:56px;height:56px}
  .merk span{font-size:28px}
  .hoofdmenu{display:flex;gap:26px}
  .hoofdmenu a{color:var(--tekst);text-decoration:none;font-weight:600;font-size:17px;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
  .hoofdmenu a:hover{border-bottom-color:var(--goud)}
  .kop .kort,.menu-knop{display:none}.kop .lang{display:inline}
  .kopknop{padding:8px 20px;min-height:48px}
  .heeft-briefje .kopknop .vol-tekst{flex-direction:row;align-items:baseline;gap:8px}
  .heeft-briefje .kopknop .vol-tekst small{font-size:17px}
  .hero{padding-block:60px 92px}
  .hero .wrap{grid-template-columns:11fr 12fr;align-items:center;gap:72px}
  .hero h1{font-size:52px}
  .boekplaat{order:2}
  .hero-beeld{aspect-ratio:16/9}
  :is(.zegel,.is-style-zegel){display:block;position:absolute;left:-36px;top:-36px;width:124px;height:124px;border-radius:50%;border:5px solid var(--papier-licht);box-shadow:0 0 0 2px var(--bruin),0 10px 22px rgba(42,23,11,.32);z-index:2}
  :is(.bovenregel,.is-style-bovenregel){font-size:20px}
  .hero .lead{display:block;font-size:20px;margin-top:18px;color:var(--tekst-zacht);max-width:30em}
  .hero :is(.feiten,.is-style-feitenkaartje){max-width:480px;margin:24px 0 28px}
  :is(.feiten,.is-style-feitenkaartje) li{padding:9px 0}
  .hero :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){width:auto;padding:14px 36px}
  .hero-terug :is(.bon,.is-style-bon){max-width:500px}
  .hero-terug :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link){width:100%;max-width:500px}
  .kop-sectie h2{font-size:46px}
  .kop-sectie.midden{text-align:center}
  /* etalage links, briefje als vaste rechterkolom */
  .etalage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
  .kaart{grid-template-columns:240px 1fr;gap:6px 28px;padding:26px 0 28px}
  .kaart .portret{grid-row:1/span 3}
  .kaart h3{font-size:27px}
  .omschrijving{display:block;font-size:17px;color:var(--tekst);margin-top:6px;max-width:34em}
  .keuzes,.kaart-actie{grid-column:2}
  .keuzes{margin-top:8px}
  .kaart-actie{margin-top:6px}
  .kaart-actie :is(.knop.vol,.wp-block-button__width-100>.wp-block-button__link),.kaart-actie .stepper{max-width:360px}
  .prijskaartje b{font-size:26px}
  .zijkolom{position:sticky;top:20px}
  .briefje{margin-top:0}
  .bakker-mini{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-top:30px;padding-top:24px;border-top:2px dotted var(--stip)}
  .bakker-mini :is(.medaillon,.is-style-medaillon){width:96px}
  .bakker-mini p{font-size:17px}
  .bakker-mini .links-rij a{font-size:17px}
  .strook{margin:30px 0 30px}
  .labels{font-size:20px}
  .ambacht .onder{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
  .erin{margin-top:0}
  .bakker .wrap{grid-template-columns:5fr 7fr;align-items:center;gap:72px}
  .bakker :is(.kader,.is-style-kader,.is-style-medaillon){aspect-ratio:5/6}
  .bakker .tekst-blok{max-width:34em}
  .abonnement .wrap{grid-template-columns:7fr 5fr;align-items:center;gap:72px}
  .abonnement .knoppen :is(.knop,.wp-block-button__link){width:auto;padding:14px 32px}
  .abonnement :is(.medaillon,.is-style-medaillon){order:0;width:min(400px,100%);border-radius:18px;padding:5px;aspect-ratio:auto}
  .abonnement :is(.medaillon,.is-style-medaillon) img{border-radius:11px}
  .bezorging .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
  .bezorging .kop-sectie{grid-column:1/-1}
  .tabel{margin-top:16px}
  .vragen{margin-top:0}
  .slot{padding-block:92px 100px}
  .slot .rij{flex-direction:row;justify-content:center;gap:0 28px}
  .voet{padding-block:56px 40px}
  .balk{display:none!important}
  .paginakop{padding-block:44px 10px}
  body.post-type-archive-product .bestellen{padding-top:20px}
  .product .koop{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .kassa-main .rooster{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:start}
  .kassa-main .kassa-bon.boven{display:none}
  .zij{display:block;position:sticky;top:20px;margin-top:30px}
  .abo-kop .wrap{grid-template-columns:1fr 340px}
  .abo-kop .abo-beeld{width:340px;grid-column:2;grid-row:1/span 6}
  .abo-kop .abo-boven,.abo-kop h1,.abo-kop .intro,.abo-kop :is(.knop,.wp-block-button__link),.abo-kop .vast,.abo-kop .tekstlink{grid-column:1}
  .abo-kop :is(.knop,.wp-block-button__link){width:auto;justify-self:start;padding:14px 34px}
  .formulier{max-width:680px}
}
form > fieldset:first-of-type{border-top:0;padding-top:4px}
/* eerlijk geregeld: label boven, waarde eronder (lange waarden lopen anders door de stippels) */
.eerlijk .regel{display:block;margin:0;padding:8px 0;border-bottom:2px dotted var(--stip)}
.eerlijk .regel .stip{display:none}
.eerlijk .regel>span:first-child{display:block;font-size:16px;color:var(--tekst-zacht)}
.eerlijk .regel b{display:block;white-space:normal;margin-top:2px}
.eerlijk .regel.totaal{border-bottom:0;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.broodrij .stepper button{width:40px}
.broodrij .stepper output{min-width:22px}
@media (min-width:980px){
  .strook{max-width:960px}
  .etalage + .na-briefje{display:none}
}

/* ===== 3. Blokmarkup van WordPress, WooCommerce en de plugin ===== */
/* Veldrand (contract §4.2): rand van bedienbare onderdelen (velden, keuzeknoppen, betaalkaarten, tabbladen). De chiprand van het prototype haalt
   maar 2,3 tot 2,6:1 tegen papier en veldachtergrond; #856842 haalt 4,5:1 of meer tegen #FFFDF8, #F7EFE0 en #FCF7EE (WCAG 1.4.11). */
:root{--veldrand:#856842}
figure.wp-block-image{margin:0}
/* Een medaillon is standaard hoogstens 200 px breed en nooit breder dan zijn omgeving; stelt de eigenaar in de editor een breedte in (is-resized, width op de afbeelding), dan
   krimpt de figure om die afbeelding heen. Zonder deze regels vult het medaillon de hele breedte (rond 750 px). :where() geeft de regels specificiteit 0: de omgevingen met een
   eigen breedte (.groet, .stappen, .abonnement, .bakker-mini, de voet) winnen altijd. */
:where(figure.wp-block-image.is-style-medaillon){width:200px;max-width:100%}
:where(figure.wp-block-image.is-style-medaillon.is-resized){width:fit-content}
.wp-block-buttons{gap:10px}
.wp-block-button__link{text-decoration:none}
.is-style-korstband{background:var(--korst) var(--korrel);color:var(--room)}
.is-style-korstband :is(h1,h2,h3){color:var(--papier-licht)}
hr.wp-block-separator.is-style-sierlijn{position:relative;width:min(73.75rem,calc(100% - 2rem));height:12px;margin:0 auto;border:0;opacity:1;
  background:linear-gradient(var(--korst),var(--korst)) left 3px/calc(50% - 20px) 2px no-repeat,linear-gradient(var(--goud),var(--goud)) left 7px/calc(50% - 20px) 1px no-repeat,
  linear-gradient(var(--korst),var(--korst)) right 3px/calc(50% - 20px) 2px no-repeat,linear-gradient(var(--goud),var(--goud)) right 7px/calc(50% - 20px) 1px no-repeat}
hr.wp-block-separator.is-style-sierlijn::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-7px 0 0 -7px;transform:rotate(45deg);background:var(--goud);border:2px solid var(--korst)}
/* bonregel als alinea: waarde in <strong>, stippels met ::after (contract §4.7) */
p.regel strong{order:2;font:700 18px var(--slab);color:var(--korst);white-space:nowrap}
p.regel::after{content:"";order:1;flex:1;min-width:16px;border-bottom:2px dotted var(--stip);transform:translateY(-4px)}
p.regel.totaal strong{font-size:23px}
/* kop en menu (core-navigatie, contract §4.8) */
.kop .wp-block-navigation{flex-wrap:nowrap}
.kop .hoofdmenu .wp-block-navigation__container{gap:26px}
.kop .hoofdmenu .wp-block-navigation-item__content{display:inline-flex;align-items:center;min-height:44px;color:var(--tekst);font-weight:600;font-size:17px;text-decoration:none;border-bottom:2px solid transparent}
.kop .hoofdmenu .wp-block-navigation-item__content:hover{border-bottom-color:var(--goud)}
.kop .menulade .wp-block-navigation__responsive-container-open{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:6px;border:0;border-bottom:3px solid var(--goud);background:transparent;font:700 18px/1 var(--slab);color:var(--bruin);cursor:pointer}
.menulade .wp-block-navigation__responsive-container.is-menu-open{background:rgba(42,23,11,.55)!important;padding:0!important}
.menulade .is-menu-open .wp-block-navigation__responsive-close,.menulade .is-menu-open .wp-block-navigation__responsive-dialog{height:100%}
.menulade .is-menu-open .wp-block-navigation__responsive-container-content{margin:0 auto 0 0;width:min(372px,92vw);min-height:100%;padding:0!important;background:var(--papier-licht) var(--korrel);border-right:4px solid var(--goud);box-shadow:10px 0 30px rgba(42,23,11,.35)}
.lade{display:flex;flex-direction:column;min-height:calc(100vh - var(--balk-hoogte,0px));min-height:calc(100dvh - var(--balk-hoogte,0px))}
.lade-kop img{height:auto}
.lade div.lade-menu{display:block}
.lade .lade-menu .wp-block-navigation__container{display:block}
.lade .wp-block-navigation-item{display:block}
.lade .lade-sluit .wp-block-navigation-overlay-close__text{display:inline}
.lade-voet p{margin:0}
@media (min-width:980px){.kop .menulade{display:none}}
/* Tussen 980 en 1199 px is de kop krap (logo, vijf menu-items en de knop): de menu-items breken niet af in twee regels (en de knop niet onder het menu), maar worden iets
   kleiner en komen dichter bij elkaar (eindcontrole VD-1). */
.kop .hoofdmenu .wp-block-navigation-item__content{white-space:nowrap}
@media (min-width:980px) and (max-width:1199px){
  .kop .wrap{gap:16px}
  .kop .merk span{font-size:24px}
  .kop .hoofdmenu .wp-block-navigation__container{gap:14px}
  .kop .hoofdmenu .wp-block-navigation-item__content{font-size:16px}
  .kop .kopknop{padding-inline:14px}
}
/* Staat er een mand met brood maar is de knop nog niet gevuld (een pagina zonder bestelblok), dan staan "Je briefje (n)" en de knop naast elkaar en passen ze tot 1099 px
   niet naast logo en menu: de merknaam gaat dan, net als op de telefoon, alleen visueel weg (de link houdt zijn naam, WCAG 2.4.4 en 4.1.2). */
@media (min-width:980px) and (max-width:1099px){
  html:not(.heeft-briefje) .kop:has(.briefje-link) .merk span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap}
}
/* Met een briefje in de kop past de merknaam niet: alleen visueel verbergen, zodat de link zijn naam houdt (WCAG 2.4.4, 4.1.2). */
.kop:has(.briefje-link) .merk span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap}
@media (min-width:980px){.kop:has(.briefje-link) .merk span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}}
/* Met een gevuld briefje (html.heeft-briefje, gezet door het script van het bestelblok) zegt de knop al "Je briefje" met het bedrag: de tekstlink "Je briefje (n)" is
   dan overbodig en verborgen, en de merknaam staat vanaf 360 px weer naast het logo. Zonder heeft-briefje (een pagina zonder bestelblok) blijft alles zoals het was. */
html.heeft-briefje .kop .briefje-link{display:none}
/* Met de merknaam ernaast is er op 360 en 375 px weinig plek: de knop houdt zijn tekst op één regel (anders drie regels, 61 px hoog) en de naam geeft mee. */
html.heeft-briefje .kop .kopknop{white-space:nowrap}
@media (min-width:360px){html.heeft-briefje .kop:has(.briefje-link) .merk span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}}
/* Op een smalle telefoon (tot 389 px) is de merknaam iets kleiner (21 in plaats van 23 px): naast de knop met het briefje stond hij op 360 en 375 px op 3 px van die knop
   en in de kassa brak "← Terug naar je brood" (sinds thema 0.1.8 "← Terug naar je briefje") af in twee regels (eindcontrole V6 en V1). Onder 340 px past de naam in de kassakop niet meer: hij gaat dan alleen visueel weg. */
@media (max-width:389px){.kop .merk span{font-size:21px}}
/* Op 360 px blijft dan nog 3 px over tussen de naam en de knop: de knop krijgt wat minder opvulling en het menu ligt dichter bij de knop (nog steeds 44 px hoog en 80 px breed). */
@media (max-width:374px){
  html.heeft-briefje .kop .kopknop{padding-inline:10px}
  .kop .menulade .wp-block-navigation__responsive-container-open{margin-left:0}
}
.kop.kassa .tekstlink{white-space:nowrap}
@media (max-width:339px){.kop.kassa .merk span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap}}
.kassa-bon .bon-kop a{display:inline-flex;align-items:center;min-height:44px}
/* Terug-stand van de voorpagina: de stepper krimpt niet mee met de tekst van de regel (die breekt af), zijn knoppen blijven minstens 44 px breed. */
.herhaal-regel>span{min-width:0;overflow-wrap:break-word}
.herhaal-regel .stepper{flex:none}
.herhaal-regel .stepper button{flex:none;min-width:44px}
.briefje-link{font-size:17px;white-space:nowrap}
/* Meldingen van WooCommerce (accountpagina's, product, kassa): vlak, rand en pictogram in het thema, tekst minstens 16 px; de knop in een melding is een gewone
   themaknop (.knop). De blokmelding (wc-block-components-notice-banner, WooCommerce 11.2.1) en de klassieke (.woocommerce-info, -message, -error) krijgen dezelfde vorm.
   WooCommerce zet achtergrond, kleur en padding van de knop met !important: de regels hieronder hebben een hogere specificiteit en dus ook !important; de dubbele klasse
   van de blokmelding wint van `.wc-block-components-notice-banner.is-info` en de andere soorten. */
body .wc-block-components-notice-banner.wc-block-components-notice-banner{align-items:flex-start;border:1.5px solid var(--lijn);border-left:4px solid var(--goud);border-radius:12px;background:var(--papier-licht);color:var(--tekst);font-size:17px;line-height:1.45}
body .wc-block-components-notice-banner.wc-block-components-notice-banner.is-error{border-left-color:var(--terracotta-donker)}
body .wc-block-components-notice-banner.wc-block-components-notice-banner>svg{align-self:flex-start;width:24px;height:24px;background:var(--korst);fill:var(--papier-licht)}
body .wc-block-components-notice-banner.wc-block-components-notice-banner.is-error>svg{background:var(--terracotta-donker)}
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content{padding-right:0}
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content:has(>.button){display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error){position:relative;margin:16px 0;padding:14px 16px 14px 52px;border:1.5px solid var(--lijn);border-left:4px solid var(--goud);border-radius:12px;background:var(--papier-licht);color:var(--tekst);font-size:17px;line-height:1.45;list-style:none}
body .woocommerce-error{border-left-color:var(--terracotta-donker)}
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)::before{content:"i";position:absolute;left:16px;top:14px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--korst);color:var(--papier-licht);font:700 16px/1 var(--slab)}
body .woocommerce-error::before{content:"!";background:var(--terracotta-donker)}
body :is(.woocommerce-info,.woocommerce-message):has(>.button){display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error)::after{display:none}
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content :is(.button,.wc-forward),
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) .button.button{order:2;display:inline-flex;align-items:center;justify-content:center;float:none;margin:0;
  min-height:52px;padding:12px 22px!important;border:0;border-radius:12px;background:var(--terracotta)!important;color:#FFF7E8!important;font:700 18px/1.15 var(--sans);letter-spacing:.01em;
  text-decoration:none;text-align:center;opacity:1;box-shadow:0 3px 0 var(--terracotta-donker)}
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content :is(.button,.wc-forward):is(:hover,:focus),
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) .button.button:is(:hover,:focus){background:var(--terracotta-donker)!important}
/* Focusring met het toetsenbord: donkere korst rond de knop, ruim boven 3:1 tegen het papier van de melding (WCAG 1.4.11, 2.4.7). */
body .wc-block-components-notice-banner>.wc-block-components-notice-banner__content :is(.button,.wc-forward):focus-visible,
body :is(.woocommerce-info,.woocommerce-message,.woocommerce-error) .button.button:focus-visible{outline:3px solid var(--korst);outline-offset:3px}
/* voorpagina */
.hero .wp-block-buttons{margin-top:2px}
.abonnement .knoppen .wp-block-buttons{width:100%}
@media (max-width:979px){.abonnement .wrap>.is-style-medaillon{width:200px}}
@media (min-width:980px){:is(.hero,.abonnement) .wp-block-buttons>.wp-block-button__width-100{width:auto;flex-basis:auto}}
.stappen .halte{overflow:visible}
.ambacht .tegels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 26px}
.ambacht .tegels figure{overflow:hidden}
.ambacht .tegels img{aspect-ratio:1/1;height:auto}
.ambacht .tegels figcaption{margin:0;padding:6px 0 2px;text-align:center;font:700 17px/1.2 var(--slab);color:var(--korst)}
.ambacht .strook{display:none}
@media (min-width:980px){.ambacht .tegels{display:none}.ambacht .strook{display:block}}
.slot figure.bord{margin:0 auto 20px;width:min(600px,100%)}
.slot figure.bord img{filter:drop-shadow(0 8px 10px rgba(42,23,11,.25));border-radius:3px}
.slot .wp-block-buttons,.leeg-plank .wp-block-buttons{justify-content:center}
.leeg-plank .is-style-bovenregel{justify-content:center}
.melding-sectie{padding-block:0}
.slot .wp-block-button,.leeg-plank .wp-block-button{max-width:340px}
.dorpen .is-geraakt{box-shadow:inset 0 0 0 3px var(--goud),0 2px 0 var(--bruin)}
.voet .onderste figure{flex:0 0 76px;width:76px}
/* Het voetbeeld zit in een medaillon-figure (rand 3 px, ruimte 4 px): de img vult die binnenruimte als vierkant, zonder eigen rand en zonder krimp. De regel
   `.voet .onderste img` van het prototype (76 x 76 px, rand 3 px, flex 76 px) gaf met `max-width:100%` een afgeknipt ovaal in een tweede ring. */
.voet .onderste figure img{width:100%;height:100%;max-width:none;border:0;border-radius:50%;flex:none}
.voet .contact-knoppen{margin:6px 0 8px}
/* plugin-blokken (contract §6.2, §7.5) */
.deadline.is-aftellen{background:var(--korst)}
/* Op een telefoon breekt de balk gelijkmatig af, zonder weesregel; een browser zonder balance valt terug op pretty, anders op gewoon afbreken. */
.deadline{text-wrap:pretty;text-wrap:balance}
.melding{max-width:47.5rem;margin:18px auto 0;padding:14px 16px;background:var(--papier-licht);border-left:4px solid var(--terracotta);border-radius:4px}
/* De blokafstand van WordPress zet de bovenmarge van de melding op 0: met de sectie erbij blijft er 16 px tussen kop en melding. */
.melding-sectie .melding{margin-top:16px}
.tabel .gesloten{margin-top:10px;font-size:16px;color:var(--tekst-zacht)}
.wp-block-boelangerie-eerstvolgende .zin{margin:6px 0 4px}
.pc-antwoord .knop{display:flex;width:fit-content}
body.post-type-archive-product .na-briefje{display:none}
.na-bestellen{margin-top:18px}
.koop .zonder-js .keuze-label{margin-top:12px}
.dank .tip{margin-top:6px;color:var(--tekst-zacht)}
.dank .tip b{color:var(--korst)}
.dank h2{font-size:26px;margin-top:34px}
.dank .bon{margin-top:22px}
.dank .vervolg{margin-top:26px}
.wp-block-woocommerce-order-confirmation-create-account{margin-top:26px}
/* Melding bij een mislukte of geannuleerde bestelling (.dank-melding): witruimte voor de knop, die op een breed scherm niet de hele kolom vult. */
.dank-melding p:has(>.knop){margin-top:22px}
.dank-melding p:has(>.tekstlink){margin-top:4px}
.dank-melding .knop.vol{max-width:360px}
/* Uitverkocht (bestelblok en productkoop): het portret gedimd en zonder prijskaartje of stempel, "Uitverkocht" als pil in korst en papier; naam en tekst blijven leesbaar. */
.kaart.is-uitverkocht .portret .kader{opacity:.55;filter:grayscale(.6)}
.kaart.is-uitverkocht :is(.prijskaartje,.stempel,.is-style-stempel){display:none!important}
p.uitverkocht{display:flex;align-items:center;justify-self:start;width:fit-content;min-height:36px;margin:0;padding:6px 16px;border:2px solid var(--korst);border-radius:999px;
  background:var(--korst);color:var(--papier-licht);font:700 16px/1.1 var(--slab);text-transform:uppercase;letter-spacing:.07em}
.kaart.is-uitverkocht .uitverkocht{grid-column:1/-1}
.koop p.uitverkocht{margin:14px 0}
@media (min-width:980px){.kaart.is-uitverkocht .uitverkocht{grid-column:2}}
/* Eerste scherm op de telefoon (spec §8.7): ook met een deadlinebalk van twee regels blijft de eerste broodkaart op /winkel/ binnen 600 px. */
@media (max-width:979px){
  .deadline{padding:8px 12px;line-height:1.25}
  .kop .wrap{min-height:60px}
  .kaart{row-gap:14px}
  /* Het prijskaartje hangt 8 px (was 14 px) onder het portret: daardoor raakte het op 360 px het label "Gewicht" eronder (eindcontrole V5). */
  .kaart .prijskaartje{bottom:-8px}
  body.post-type-archive-product .paginakop{padding-top:8px}
  body.post-type-archive-product .paginakop .regel-klein{margin-top:6px;line-height:1.35}
  body.post-type-archive-product .pc-check{margin-top:0}
  body.post-type-archive-product .kaart:first-child{padding-top:8px}
}
/* Hulpklassen voor de paginapatronen: per breekpunt tonen of verbergen (telefoon = onder 980 px). */
@media (max-width:979px){.alleen-desktop{display:none!important}}
@media (min-width:980px){.alleen-telefoon{display:none!important}}
/* Titel van een gewone pagina (templates/page.html): als de h1 van een paginakop, met ruimte onder de kop van de site. Heeft de inhoud zelf een h1
   (een paginakop), dan blijft die de enige en is deze titel verborgen. De selector van de marge is zo zwaar omdat WordPress het eerste kind van een
   constrained groep op margin 0 zet (:root :where(.is-layout-constrained) > :first-child). */
main h1.paginatitel.wp-block-post-title{margin:28px 0 14px;font-size:clamp(34px,9vw,56px)}
main:has(.wp-block-post-content h1) .paginatitel{display:none}
@media (min-width:980px){main h1.paginatitel.wp-block-post-title{margin-top:44px}}
/* Een pagina zonder h1 in de inhoud (dezelfde pagina's die hierboven de paginatitel tonen) heeft zelf geen opvulling onderaan: de tekst zou tegen de voet eindigen.
   Een paginakop heeft eigen opvulling en blijft zoals hij is. */
main:has(h1.paginatitel):not(:has(.wp-block-post-content h1)){padding-bottom:40px}
@media (min-width:980px){main:has(h1.paginatitel):not(:has(.wp-block-post-content h1)){padding-bottom:56px}}
/* Pagina Abonnement (inhoud/paginas/abonnement.html). De regel "Je zit nergens aan vast" heeft in het prototype een negatieve marge omdat daar de knop erboven ruimte meebrengt;
   in de pagina staat hij direct onder de knop en lag er dan overheen. En in de bon "Eerlijk geregeld" liep een lange waarde met white-space:nowrap op een telefoon buiten beeld
   (plan D taak 6 stap 7): hij breekt nu af en staat rechts. */
.paginakop .wp-block-buttons+.vast{margin-top:16px}
.eerlijk .regel strong{white-space:normal;text-align:right}
/* De laatste regel van de bon ("Bezorging: gratis in de negen dorpen, Ede op aanvraag") heeft een lange waarde: die staat onder het label, zonder stippellijn die nergens heen loopt (eindcontrole VD-12). */
.eerlijk .regel.totaal::after{display:none}
.eerlijk .regel.totaal strong{display:block;flex:0 0 100%;margin-top:2px;font-size:20px;text-align:left}
/* Een pagina die op zo'n sectie eindigt (de lege plank van de 404 en de lege winkelwagen, de paginakop van Contact) had geen opvulling onderaan: de laatste knop of kaart
   stond op 8 tot 10 px van de voet, terwijl de andere pagina's er 42 px (84 px op een computer) hebben (eindcontrole V2 en VD-3). */
.leeg-plank,.paginakop.ruim:last-child{padding-bottom:42px}
@media (min-width:980px){.leeg-plank,.paginakop.ruim:last-child{padding-bottom:84px}}
/* "De andere broden" op een productpagina: op een computer twee kaarten van hoogstens 280 px, de breedte waarvoor het beeld is gemaakt (`sizes` van het blok). Zonder deze
   grens werden het 570 px brede beelden, opgerekt uit een bron van 300 px, groter dan het brood zelf (eindcontrole VD-4). */
@media (min-width:980px){.mini-kaarten{grid-template-columns:repeat(2,minmax(0,280px));justify-content:start}}
/* De tabel met bakdagen: het stempel "Eerstvolgende" hangt 16 px boven de tabel uit; met 16 px marge raakte het op een computer de chip "Ede: op aanvraag" erboven (eindcontrole
   VD-6). Op een pagina (Bezorging) staat de tabel onder de bon "Eerstvolgende bezorging" en is even breed als die bon in plaats van 600 px (eindcontrole VD-5). */
.tabel{margin-top:36px}
.wp-block-post-content .tabel{max-width:none}
/* De link onder het briefje op /winkel/ ("Liever elke week? Vraag een abonnement aan →") breekt gelijkmatig af: op 390 px stond alleen het pijltje op een eigen regel (eindcontrole V9). */
.na-bestellen{text-wrap:balance}
/* Contact en Abonnement: de twee contactknoppen staan op een computer naast elkaar met gecentreerde tekst, in plaats van twee lege balken van 760 px met links uitgelijnde tekst
   (eindcontrole VD-8 en PUB-4). */
@media (min-width:980px){
  .contact-groot.wp-block-buttons>.wp-block-button.wp-block-button__width-100{flex:1 1 calc(50% - 5px);width:auto;min-width:0}
  .contact-groot :is(.knop,.wp-block-button__link){justify-content:center;text-align:center}
}
/* Gekozen keuzeknop (Harm, 18 okt 2026, variant 2 van het keuzeknoppen-voorbeeld): korstbruine vulling met lichte tekst, de gouden onderrand blijft en een vinkje
   laat de keuze ook zien zonder kleur. Het vinkje is puur CSS, zodat de markup van de plugin gelijk blijft; de dagknoppen (.dag) krijgen alleen de vulling. Kleuren: korst, bord-tekst, goud. */
.chip[aria-checked=true]{background:var(--korst);border-color:var(--korst);color:var(--bord-tekst)}
.chip[aria-checked=true]:not(.dag){display:inline-flex;align-items:center;justify-content:center;gap:8px}
.chip[aria-checked=true]:not(.dag)::before{content:"";flex:none;width:6px;height:11px;margin-top:-3px;border:solid var(--goud);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* ---------- de ene vaste bestelbalk (Harm, 18 okt 2026) ----------
   Onder 980 px: één balk onderin op elke pagina (markup uit de plugin, includes/balk.php), altijd zichtbaar, met links de menuknop, daarnaast de
   belofte of het briefje, App en Bestel/Afrekenen. De deadlinebalk bovenin vervalt op de telefoon: de balk neemt de belofte over. Vanaf 980 px
   blijft alles zoals het was, met een vaste kop. Deze regels staan na site.css en winnen daarvan met `body .balk[data-balk]`. */
@media (max-width:979px){
  a.wp-block-boelangerie-deadlinebalk.deadline{display:none}
  /* Variant B (Harm, 3 nov 2026): één rij met links de menuknop, in het midden de twee korte regels en rechts Bestel of Afrekenen. Geen App-knop meer in de balk
     (App Harm staat in de menulade en de voet). De regels breken nooit af: nowrap, en de breedte per scherm is gemeten (c_thema.py --balk). */
  body .balk[data-balk]{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"menu info knop";
    align-items:center;column-gap:10px;row-gap:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .balk[data-balk] .info{grid-area:info;display:flex;flex-direction:column;justify-content:center;min-width:0}
  .balk[data-balk] .info strong{display:block;font:700 17px/1.3 var(--sans);color:var(--papier-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .balk[data-balk] .info strong b{color:var(--goud);font-weight:700}
  .balk[data-balk] .info span{display:block;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .balk[data-balk] .info span:empty{display:none}
  .balk[data-balk] .menu{grid-area:menu;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:2px solid rgba(238,217,174,.7);border-radius:12px;background:transparent;cursor:pointer}
  .balk[data-balk] .streepjes{display:block;position:relative;width:22px;height:3px;border-radius:2px;background:var(--room);box-shadow:0 -7px 0 var(--room),0 7px 0 var(--room)}
  /* Staat de lade open, dan is de menuknop een kruisje (aria-label "Menu sluiten", aria-expanded="true", gezet door balk.js) en sluit een tweede tik de lade. */
  .balk[data-balk] .menu.is-open{border-color:var(--goud)}
  .balk[data-balk] .menu.is-open .streepjes{background:transparent;box-shadow:none}
  .balk[data-balk] .menu.is-open .streepjes::before,.balk[data-balk] .menu.is-open .streepjes::after{content:"";position:absolute;left:0;top:0;width:22px;height:3px;border-radius:2px;background:var(--room)}
  .balk[data-balk] .menu.is-open .streepjes::before{transform:rotate(45deg)}
  .balk[data-balk] .menu.is-open .streepjes::after{transform:rotate(-45deg)}
  .balk[data-balk] .knop{grid-area:knop;min-height:48px;padding:8px 14px;font-size:17px;white-space:nowrap}
  .balk[data-balk] :is(.menu,.knop):focus-visible{outline:3px solid var(--goud);outline-offset:2px}
  body.heeft-balk .voet{padding-bottom:calc(var(--balk-hoogte,72px) + 24px)}
}
/* Op een heel smalle telefoon (320 px) iets krapper, zodat menu, twee regels en knop nog op één rij staan zonder te overlappen. */
@media (max-width:359px){
  body .balk[data-balk]{grid-template-columns:44px minmax(0,1fr) auto;column-gap:6px;padding-left:6px;padding-right:6px}
  .balk[data-balk] .menu{width:44px;height:44px}
  .balk[data-balk] .info strong{font-size:16px}
  .balk[data-balk] .knop{padding:8px 8px}
}
/* Past een regel toch niet (een lange tekst zoals "Bakpauze t/m 14 november", of een groot briefje op een heel smalle telefoon), dan zet balk.js is-lang
   op de balk: de regels breken dan af in plaats van met puntjes afgekapt te worden. De gewone regels passen altijd en breken dus nooit. */
@media (max-width:979px){
  .balk[data-balk].is-lang .info :is(strong,span){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
@media (min-width:980px){
  .balk[data-balk]{display:none!important}
  /* Vaste kop op de computer: deadlinebalk en kop blijven bovenin staan bij scrollen. De deadlinebalk heeft hier een vaste hoogte, zodat de kop er precies onder
     kan blijven plakken; ankerlinks krijgen scroll-padding zodat ze niet onder de kop verdwijnen. */
  html{scroll-padding-top:140px}
  html:has(body.admin-bar){scroll-padding-top:172px}
  .wp-site-blocks>.wp-block-template-part:has(>.deadline){position:sticky;top:env(safe-area-inset-top,0px);z-index:31}
  .deadline{box-sizing:border-box;height:47px;min-height:0;padding-block:0;display:flex;align-items:center;justify-content:center}
  .wp-site-blocks>.wp-block-template-part:has(>.kop){position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
  .wp-site-blocks:has(>.wp-block-template-part>.deadline)>.wp-block-template-part:has(>.kop){top:calc(47px + env(safe-area-inset-top,0px))}
  body.admin-bar .wp-site-blocks>.wp-block-template-part:has(>.deadline){top:calc(32px + env(safe-area-inset-top,0px))}
  body.admin-bar .wp-site-blocks>.wp-block-template-part:has(>.kop){top:calc(32px + env(safe-area-inset-top,0px))}
  body.admin-bar .wp-site-blocks:has(>.wp-block-template-part>.deadline)>.wp-block-template-part:has(>.kop){top:calc(79px + env(safe-area-inset-top,0px))}
}
/* De pop-up bij de knop App met een leeg briefje. */
.briefje-pop{padding:0;border:3px solid var(--korst);border-radius:16px;background:var(--papier-licht) var(--korrel);color:var(--tekst);width:min(420px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(42,23,11,.4)}
.briefje-pop::backdrop{background:rgba(42,23,11,.55)}
.briefje-pop .pop-inhoud{padding:24px 20px 18px;display:grid;gap:16px}
.briefje-pop .pop-kop{font:700 21px/1.25 var(--slab);color:var(--korst);text-wrap:balance}
.briefje-pop .pop-acties{display:grid;gap:8px;justify-items:center}
.briefje-pop .pop-acties .knop{width:100%}
.briefje-pop .tekstlink{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:16px}
.briefje-pop .pop-sluit{min-height:44px;min-width:44px;padding:0 18px;border:2px solid var(--korst);border-radius:12px;background:transparent;color:var(--korst);font:700 16px var(--sans);cursor:pointer}
.briefje-pop :is(.knop,.tekstlink,.pop-sluit):focus-visible{outline:3px solid var(--terracotta-donker);outline-offset:2px}
/* Het echte merklogo (badge met vlag, brood en naam) in de voet en bij De Lunterse ziel (Harm, 18 okt 2026: niet de vlagtekening). De badge heeft al een eigen ring: geen medaillonrand eromheen. */
figure.wp-block-image.merklogo{margin:0;width:150px;max-width:100%}
figure.wp-block-image.merklogo img{display:block;width:100%;height:auto;border:0;border-radius:50%;background:transparent}
.groet figure.wp-block-image.merklogo{width:120px;flex:0 0 120px}
.voet .onderste figure.wp-block-image.merklogo{flex:0 0 84px;width:84px}
.voet .onderste figure.wp-block-image.merklogo img{height:auto}
/* BELLEN (assets/js/bellen.js): de pop-up buiten de bereikbaarheidstijden, op de stijl van .briefje-pop. */
.bel-pop .bel-wanneer{margin:0;font:700 19px/1.3 var(--sans);color:var(--tekst);text-wrap:balance}
.bel-pop .bel-duur{margin:0;font:400 18px/1.3 var(--sans);color:var(--tekst-zacht)}
.bel-pop :is(.bel-wanneer,.bel-duur):empty{display:none}
.bel-pop .pop-kop:focus{outline:none}
.bel-pop .pop-acties .knop{display:flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;text-align:center;text-decoration:none}
.bel-pop .pop-acties [hidden]{display:none}

/* ---------- PWA: uitnodiging "Zet Boelangerie op je beginscherm" en de knop Naar boven (18 okt 2026) ----------
   Markup en logica uit de plugin (includes/app.php, assets/js/app.js en naarboven.js). Strook en knop staan onder 980 px boven de vaste bestelbalk
   (--balk-hoogte, gezet door balk.js) en de knop ook boven de strook (--strook-hoogte, gezet door app.js); vanaf 980 px staat alleen de knop
   rechtsonder in de hoek. Zonder bestelbalk (404 en pagina's zonder broden) staat alles op de onderrand met ruimte voor de safe-area. */
.app-strook{display:none}
.naar-boven{position:fixed;right:12px;bottom:calc(var(--balk-hoogte,0px) + var(--strook-hoogte,0px) + 12px);z-index:18;box-sizing:border-box;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:3px solid var(--korst);border-radius:50%;background:var(--papier-licht);color:var(--korst);box-shadow:0 4px 14px rgba(42,23,11,.3);cursor:pointer;
  visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
.naar-boven.is-zichtbaar{visibility:visible;opacity:1;transition:opacity .25s ease}
.naar-boven:focus-visible{outline:3px solid var(--terracotta-donker);outline-offset:3px}
body:not(.heeft-balk) .naar-boven{bottom:calc(var(--strook-hoogte,0px) + 12px + env(safe-area-inset-bottom))}
main[tabindex="-1"]:focus{outline:none}
@media (max-width:979px){
  .app-strook:not([hidden]){display:flex;align-items:center;gap:6px;position:fixed;left:0;right:0;bottom:var(--balk-hoogte,0px);z-index:19;box-sizing:border-box;min-height:56px;column-gap:6px;padding:6px 12px;
    background:var(--papier-licht) var(--korrel);color:var(--korst);border-top:3px solid var(--korst);box-shadow:0 -4px 14px rgba(42,23,11,.18);animation:app-strook-in .25s ease both}
  body:not(.heeft-balk) .app-strook{bottom:0;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .app-strook .app-tekst{flex:1;min-width:0;margin:0;font:700 16px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-strook .app-tekst .lang{display:none}
  .app-strook .app-actie{flex:none;min-height:44px;padding:8px 12px;font-size:16px;white-space:nowrap}
  .app-strook .app-later{flex:none;min-width:44px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--korst);font:700 16px var(--sans);text-decoration:underline;cursor:pointer}
  .app-strook :is(.app-actie,.app-later):focus-visible{outline:3px solid var(--terracotta-donker);outline-offset:2px}
  html.heeft-strook body .voet{padding-bottom:calc(var(--balk-hoogte,0px) + var(--strook-hoogte,0px) + 24px)}
}
@media (min-width:600px) and (max-width:979px){
  .app-strook .app-tekst .lang{display:inline}
  .app-strook .app-tekst .kort{display:none}
}
@media (min-width:980px){
  .naar-boven,body:not(.heeft-balk) .naar-boven{right:24px;bottom:24px}
}
@keyframes app-strook-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .naar-boven,.naar-boven.is-zichtbaar{transition:none}
  .app-strook:not([hidden]){animation:none}
}
/* De pop-up met de drie stappen voor iOS: onderin met een pijl omlaag (Safari op iPhone), anders bovenin met een pijl omhoog (Chrome en Edge). */
.app-pop{overflow:visible}
.app-pop .app-stappen{margin:0;padding-left:1.4em;display:grid;gap:10px;font-size:17px;line-height:1.4}
.app-pop .pop-delen{vertical-align:-4px;color:var(--korst)}
.app-pop .pop-acties{justify-items:stretch}
.app-pop[data-pijl=onder]{margin:auto auto 34px}
.app-pop[data-pijl=boven]{margin:34px 12px auto auto}
.app-pop .pop-pijl{position:absolute;width:0;height:0;border:14px solid transparent}
.app-pop[data-pijl=onder] .pop-pijl{top:100%;left:50%;margin:3px 0 0 -14px;border-top-color:var(--papier-licht);border-bottom-width:0}
.app-pop[data-pijl=boven] .pop-pijl{bottom:100%;right:24px;margin-bottom:3px;border-bottom-color:var(--papier-licht);border-top-width:0}
/* INLOGKAART (plugin includes/inlogkaart.php): inloggen, account maken en wachtwoord vergeten in één kaart op /mijn-account/. Kaartvorm van .formulier, velden en knoppen
   zijn .veld en .knop. Zonder JavaScript staan de drie panelen gestapeld; .inlog-js op <html> (uit de kop, alleen met JavaScript) toont er één, gekozen met data-toon. */
.inlogkaart{max-width:520px;margin:12px auto 40px;box-sizing:border-box;background:#FFFCF6;border:1.5px solid var(--lijn);border-radius:18px;padding:22px 18px 18px;box-shadow:0 8px 20px -12px rgba(58,34,19,.3)}
:root:not(.inlog-js) body .inlogkaart section.inlogkaart__paneel+section.inlogkaart__paneel{margin-top:28px;padding-top:24px;border-top:1.5px solid var(--lijn)}
html.inlog-js .inlogkaart .inlogkaart__paneel{display:none}
body .inlogkaart section.inlogkaart__paneel{padding-block:0;margin-block:0}
html.inlog-js .inlogkaart[data-toon=inloggen] .inlogkaart__paneel[data-paneel=inloggen],html.inlog-js .inlogkaart[data-toon=registreren] .inlogkaart__paneel[data-paneel=registreren],html.inlog-js .inlogkaart[data-toon=wachtwoord] .inlogkaart__paneel[data-paneel=wachtwoord]{display:block}
body .inlogkaart form:is(.login,.register,.lost_reset_password,.woocommerce-form){margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.inlogkaart .inlogkaart__kop{margin:0 0 14px;font:700 28px/1.15 var(--slab);color:var(--korst)}
.inlogkaart .inlogkaart__kop:focus{outline:none}
.inlogkaart .woocommerce-notices-wrapper:empty{display:none}
.inlogkaart .woocommerce-notices-wrapper{margin-bottom:14px}
.inlogkaart .inlogkaart__rij{float:none;width:100%;margin:0 0 14px;padding:0}
.inlogkaart .inlogkaart__rij label{display:block;margin:0 0 6px;font:700 17px/1.3 var(--sans);color:var(--tekst)}
.inlogkaart .inlogkaart__rij .password-input{display:block;position:relative}
.inlogkaart .inlogkaart__uitleg{margin:0 0 14px;font-size:17px;line-height:1.45;color:var(--tekst-zacht)}
.inlogkaart .woocommerce-privacy-policy-text{margin:0 0 14px}
.inlogkaart .woocommerce-privacy-policy-text p{margin:0;font-size:16px;line-height:1.45;color:var(--tekst-zacht)}
.inlogkaart .inlogkaart__knoprij{margin:4px 0 0;padding:0}
.inlogkaart .inlogkaart__knoprij .knop{width:100%}
.inlogkaart .inlogkaart__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;margin-top:6px}
body .inlogkaart label.woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;font:600 17px var(--sans);color:var(--tekst);cursor:pointer}
.inlogkaart .woocommerce-form-login__rememberme input{flex:none;width:24px;height:24px;margin:0;padding:0;position:static;accent-color:var(--korst)}
.inlogkaart .woocommerce-form-login__rememberme span{display:inline;margin:0;padding:0}
.inlogkaart .inlogkaart__wissel{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px;font:700 17px var(--sans);color:var(--korst);text-decoration:underline;text-underline-offset:3px}
.inlogkaart .lost_password{margin:0}
.inlogkaart .inlogkaart__voet{margin-top:14px;padding-top:8px;border-top:1.5px solid var(--lijn);text-align:center}
.inlogkaart .inlogkaart__wisselregel{margin:0;font:600 17px/1.3 var(--sans);color:var(--tekst)}
.inlogkaart .inlogkaart__voet .regel-klein{margin:4px 0 6px;font-size:16px;line-height:1.45;color:var(--tekst-zacht)}
.inlogkaart .inlogkaart__gelukt p{margin:0 0 10px;font-size:17px;line-height:1.45;color:var(--tekst)}
.inlogkaart .inlogkaart__gelukt p:first-child{font-size:19px;color:var(--korst)}
@media (min-width:620px){.inlogkaart{padding:28px 28px 22px}}

/* Broodkaart op de telefoon (onder 600 px): het label (Gewicht, Vorm) staat links naast de keuzeknoppen in plaats van erboven. Scheelt twee
   regels, zodat de bestelknop van het eerste brood op /winkel/ op 390x664 binnen 600 px blijft (strenge meting); er gaat niets weg. */
/* Stepper in een broodrij (abonnementsformulier op /abonnement/): het prototype geeft de knoppen 40 px breed; tikdoel minstens 44 px. */
.broodrij .stepper button{flex:none;min-width:44px}
/* Gewicht en vorm van een gekozen brood krijgen de hele breedte van de rij; in de eerste kolom (72 px, die van het etiket) stonden de knoppen
   onder elkaar en brak "550 g" af (sinds fase E). */
.broodrij .rij-keuzes{grid-column:1/-1}

/* Adresformulier in Mijn account (edit-address): voornaam en achternaam onder elkaar op een smal scherm. Naast elkaar past
   "Achternaam (optioneel)" (WooCommerce zet er een harde spatie in) op 360 px niet in een halve kolom: 6 px overbreedte. */
@media (max-width:479px){
  .woocommerce form .form-row:is(.form-row-first,.form-row-last){float:none;width:100%}
}
@media (max-width:599px){
  .kaart .keuzes{row-gap:10px}
  .kaart .keuzes > div{flex:1 1 100%;display:flex;align-items:center;gap:10px}
  .kaart .keuzes > div > .keuze-label{flex:0 0 4.6em;margin:0}
}

/* Artikelen uit de bakkerskast op het briefje (briefje v2): onder de naam de verpakking en de levertijd ("komt los en later"), met een
   tikdoel van minstens 44 px om het artikel van het briefje te halen. Alleen artikelen op het briefje = geen bezorgdag kiezen (PostNL). */
.briefje .regel.artikel > span:first-child{min-width:0}
.briefje .regel.artikel .weg{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 2px;font:700 16px var(--sans);color:var(--korst);text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer}
.briefje .regel.artikel .weg:focus-visible{outline:3px solid var(--terracotta-donker);outline-offset:2px}
.alleen-artikelen :is(.dag-kop,.dag-uitleg,.dag-keuze){display:none!important}
.kassa-bon .regel small{overflow-wrap:anywhere}
/* Kassa met alleen artikelen: er is geen stap Wanneer, dus Betalen is stap 3 in plaats van 4. */
body .kassa-main:has(#bl-kassa[data-soort="artikel"]) .wc-block-checkout__form--with-step-numbers #payment-method .wc-block-components-checkout-step__title:before{content:"3"}

/* ===== MENULADE VAN LINKS (Harm, 3 nov 2026) =====
   De lade schuift van links in, waar de menuknop van de onderbalk zit. De lade laat de onderbalk vrij (bottom = --balk-hoogte, gezet door balk.js):
   de menuknop blijft zichtbaar en bedienbaar, wordt een kruisje en sluit de lade bij een tweede tik. Het kruisje links bovenin de lade is de tweede
   manier (en de enige op pagina's zonder onderbalk). Escape, een tik naast de lade en een gekozen link sluiten ook (assets/js/balk.js). */
@media (max-width:979px){
  .menulade .wp-block-navigation__responsive-container.is-menu-open{bottom:var(--balk-hoogte,0px);height:auto;animation:lade-achter-in .2s ease-out both}
  .menulade .is-menu-open .wp-block-navigation__responsive-container-content{animation:lade-in .24s ease-out both}
}
@keyframes lade-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes lade-achter-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .menulade .wp-block-navigation__responsive-container.is-menu-open,.menulade .is-menu-open .wp-block-navigation__responsive-container-content{animation:none}
}
.lade-kop{display:flex;align-items:center;gap:12px}
.lade-kop img{flex:1 1 0;min-width:0;width:auto;max-width:100%}
.lade .lade-sluit{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;min-height:48px;margin:0;padding:0;border:2px solid rgba(238,217,174,.7);border-radius:12px;background:transparent;color:var(--room);cursor:pointer}
.lade .lade-sluit svg{display:block;width:26px;height:26px;fill:currentColor}
.lade .lade-sluit:focus-visible{outline:3px solid var(--goud);outline-offset:2px}