/* Joe's Groente en Fruit, ronde 6: de binnenpagina's. Zelfde plankenset (kist.css), elke pagina een eigen opbouw.
   Stencil (Stardos) alleen op planken en nooit kleiner dan 22px; Proza Libre voor tekst; League Gothic voor elk bedrag. */

main { display: block; }
.pagina { padding-bottom: 24px; }

/* ---------- de titelplank: de H1 van elke binnenpagina staat op een plank ---------- */
.titel-rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-top: 48px; }
.titelplank {
  display: inline-flex; align-items: center; min-height: var(--lat); padding: 10px 28px 12px;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 3.25rem); line-height: 1.02; --spatie: 0.01em; --nietje-in: 14px;
}
.titelplank .druk { display: inline; }
.titel-sub { font-size: 18px; max-width: 46ch; color: var(--inkt-zacht); padding-bottom: 10px; }
.titel-sub strong { color: var(--inkt); }
@media (max-width: 599.98px) {
  .titel-rij { margin-top: 32px; }
  .titelplank { font-size: 26px; padding: 10px 18px 12px; min-height: 56px; }
}

/* sectieplank: kleiner dan de titel, voor sectienamen op binnenpagina's */
.sectieplank { display: inline-flex; align-items: center; min-height: 56px; padding: 8px 22px 10px; font-size: clamp(22px, 1rem + 1vw, 32px); line-height: 1.05; --spatie: 0.02em; }
.sectieplank .druk { display: inline; }

/* kruimelpad */
.kruimel { margin-top: 28px; font-size: 16px; color: var(--inkt-zacht); }
.kruimel ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kruimel li { display: inline-flex; align-items: center; gap: 10px; }
.kruimel li + li::before { content: "/"; color: var(--grenen-diep); }
.kruimel a { color: var(--inkt-zacht); min-height: 44px; display: inline-flex; align-items: center; }
.kruimel [aria-current] { color: var(--inkt); font-weight: 600; }

/* leestekst */
.lees { max-width: 64ch; }
.lees p + p, .lees p + ul, .lees ul + p, .lees p + ol, .lees ol + p { margin-top: 1em; }
.lees h2 { font-size: 26px; font-weight: 800; line-height: 1.2; margin: 1.6em 0 .5em; letter-spacing: -0.01em; }
.lees h3 { font-size: 20px; font-weight: 800; line-height: 1.25; margin: 1.4em 0 .4em; }
.lees ul { display: grid; gap: .45em; padding-left: 0; }
.lees ul li { position: relative; padding-left: 26px; }
.lees ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 4px; border-radius: 1px; background: var(--grenen-diep); }
.lees ol { padding-left: 1.4em; list-style: decimal; display: grid; gap: .45em; }
.lees a { font-weight: 600; }

/* knoppen naast de rode koopknop: omlijnd, nooit gevuld */
.knop-lijn { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 2px var(--inkt); }
.knop-lijn:hover { background: var(--wit); }
.knop-blauw { background: var(--fust); color: var(--wit); }
.knop-blauw:hover { background: #08527F; }
.knop-rij { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ---------- formulieren: labels erboven, wit veld, fout direct onder het veld ---------- */
.veld { display: grid; gap: 6px; min-width: 0; }
.veld > label, .veld > .label, fieldset.veld > legend { font-size: 16px; font-weight: 600; padding: 0; }
.veld .hint { font-size: 15px; color: var(--inkt-zacht); }
.veld input:not([type="checkbox"]):not([type="radio"]), .veld select, .veld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 2px; background: var(--wit); color: var(--inkt);
  box-shadow: inset 0 0 0 1.5px #8C8794; font-size: 18px; line-height: 1.4;
}
.veld textarea { min-height: 128px; resize: vertical; }
.veld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A639B' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 44px; }
.veld input:hover, .veld select:hover, .veld textarea:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 3px solid var(--fust); outline-offset: 2px; box-shadow: inset 0 0 0 1.5px var(--inkt); }
.veld [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--appel-tekst) !important; }
.fout { font-size: 15px; font-weight: 600; color: var(--appel-tekst); display: flex; gap: 6px; align-items: flex-start; }
.fout:empty { display: none; }
.fout::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--appel-tekst); color: var(--wit); font-size: 13px; font-weight: 800; }
.veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 599.98px) { .veld-rij { grid-template-columns: minmax(0, 1fr); } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vink { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 17px; }
.vink input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--fust); }
.formulier-melding { font-weight: 600; }
.formulier-melding:empty { display: none; }
.formulier-melding.is-fout { color: var(--appel-tekst); }

/* de bevestiging na versturen: een plank met het resultaat */
.klaar { display: grid; gap: 16px; padding: 28px; background: var(--wit); box-shadow: 0 1px 1px rgb(var(--schaduw) / .1), 0 10px 24px -14px rgb(var(--schaduw) / .45); }
.klaar[hidden] { display: none; }
.klaar-plank { justify-self: start; display: inline-flex; align-items: center; min-height: 56px; padding: 8px 22px 10px; font-size: clamp(22px, 1rem + 1vw, 30px); line-height: 1.05; }
.klaar p { max-width: 60ch; }
.klaar .klein { font-size: 15px; color: var(--inkt-zacht); }

/* schakelaar (Alleen BIO, Kaartje erbij) */
.schakel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 17px; position: relative; }
.schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakel .baan { flex: none; width: 48px; height: 28px; border-radius: 14px; background: #6E6976; position: relative; transition: background-color .15s; }
.schakel .baan::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); transition: translate .2s var(--uit); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.schakel input:checked + .baan { background: var(--fust); }
.schakel input:checked + .baan::after { translate: 20px 0; }
.schakel input:focus-visible + .baan { outline: 3px solid var(--fust); outline-offset: 3px; }

/* ---------- de tegel (winkel, productpagina, eigen box) ---------- */
.schap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199.98px) { .schap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .schap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tg { position: relative; background: var(--wit); display: grid; grid-template-rows: auto 1fr; min-width: 0; box-shadow: 0 1px 1px rgb(var(--schaduw) / .10), 0 8px 18px -12px rgb(var(--schaduw) / .35); }
.tg-foto { display: block; aspect-ratio: 1; padding: 12%; background: var(--wit); }
.tg-foto img { width: 100%; height: 100%; object-fit: contain; }
.tg-foto-leeg { display: grid; place-items: center; padding: 18%; }
.tg-foto-leeg img { opacity: .9; }
.tg-tekst { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 0 18px 18px; align-content: end; }
.tg-naam { grid-column: 1 / -1; font-size: 17px; font-weight: 600; line-height: 1.3; }
.tg-naam a { color: var(--inkt); text-decoration: none; }
.tg-naam a::after { content: ""; position: absolute; inset: 0 0 76px 0; }
.tg-naam a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.tg-naam a:focus-visible { outline: none; }
.tg-naam a:focus-visible::after { outline: 3px solid var(--fust); outline-offset: -3px; }
.tg-sub { grid-column: 1 / -1; font-size: 15px; font-style: italic; color: var(--inkt-zacht); line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tg-eenheid { grid-column: 1 / -1; font-size: 15px; color: var(--inkt-zacht); margin-top: 2px; }
.tg-eenheid .bio { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 2px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--wit); background: var(--fust); line-height: 20px; vertical-align: 1px; }
.tg-prijs { font-size: 34px; margin-top: 14px; align-self: end; }
.tg-bedien { position: relative; z-index: 1; align-self: end; }
@media (max-width: 599.98px) {
  .tg-tekst { padding: 0 12px 12px; grid-template-columns: minmax(0, 1fr); }
  .tg-naam { font-size: 16px; }
  .tg-foto { padding: 9%; }
  .tg-prijs { font-size: 30px; margin-top: 10px; }
  .tg-bedien { justify-self: start; margin-top: 8px; }
  .tg-naam a::after { inset: 0 0 116px 0; }
}

/* ---------- DE WINKEL (bestellen.html) ---------- */
.winkel-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; margin-top: 48px; }
.winkel-kop .titelplank { justify-self: start; }
.winkel-tal { font-family: var(--f-prijs); font-size: 34px; line-height: 1; margin-left: 18px; letter-spacing: .02em; }
.winkel-regel { text-align: right; font-size: 17px; color: var(--inkt-zacht); max-width: 38ch; }
.winkel-regel strong { color: var(--inkt); }
@media (max-width: 767.98px) { .winkel-kop { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } .winkel-regel { text-align: left; } }

/* de kisten: zestien kopse kanten in vier rijen */
.kisten-wissel { display: none; }
.kisten { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kier); }
.kist-eind {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 16px 8px 18px;
  text-decoration: none; color: var(--brandmerk); font-size: 22px; line-height: 1.05; --spatie: 0.02em;
}
.kist-eind .druk { display: block; }
.kist-eind .tal { font-family: var(--f-prijs); font-size: 26px; line-height: 1; color: var(--brandmerk); opacity: .8; flex: none; }
.kist-eind:hover { filter: brightness(.97); }
.kist-eind[aria-current="page"] { background: var(--brandmerk); background-image: none; color: var(--grenen); box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.kist-eind[aria-current="page"] .druk { color: var(--grenen); -webkit-mask-image: none; mask-image: none; }
.kist-eind[aria-current="page"] .tal { color: var(--grenen); opacity: 1; }
@media (max-width: 1199.98px) { .kist-eind { font-size: 22px; } }
@media (max-width: 767.98px) {
  .kisten-wissel {
    display: flex; width: 100%; margin-top: 20px; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px 8px 18px; border: 0;
    font-size: 22px; --spatie: 0.02em; text-align: left;
  }
  .kisten-wissel .druk { display: block; }
  .kisten-wissel svg { width: 22px; height: 22px; flex: none; transition: rotate .2s var(--uit); color: var(--brandmerk); }
  .kisten-wissel[aria-expanded="true"] svg { rotate: 180deg; }
  .js .kisten { display: none; margin-top: var(--kier); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .kisten.open { display: grid; }
  .kisten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kist-eind { min-height: 56px; padding: 8px 12px; font-size: 22px; }
  .kist-eind .tal { font-size: 22px; }
}
@media (max-width: 399.98px) { .kist-eind { font-size: 22px; letter-spacing: 0; --spatie: 0; } }

/* filters */
.filters { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.filters .zoekterm { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.filters .zoekterm button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--fust); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.allergenen { position: relative; }
.allergenen > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 17px; cursor: pointer; color: var(--inkt); }
.allergenen > summary::-webkit-details-marker { display: none; }
.allergenen > summary svg { width: 18px; height: 18px; color: var(--fust); transition: rotate .2s var(--uit); }
.allergenen[open] > summary svg { rotate: 180deg; }
.allergenen > summary .aantal { font-family: var(--f-prijs); font-size: 22px; line-height: 1; color: var(--fust); }
.allergenen-paneel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(520px, calc(100vw - 32px)); padding: 18px 20px; background: var(--wit); box-shadow: 0 18px 40px -18px rgb(var(--schaduw) / .55), 0 0 0 1px rgb(var(--schaduw) / .1); }
.allergenen-paneel .uitleg { font-size: 15px; color: var(--inkt-zacht); margin-bottom: 10px; }
.allergenen-paneel .vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.allergenen-paneel .vink { font-size: 16px; }
.sorteer { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-weight: 600; }
.sorteer select { min-height: 44px; padding: 0 40px 0 12px; border: 0; border-radius: 2px; background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A639B' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; appearance: none; box-shadow: inset 0 0 0 1.5px #8C8794; font-size: 16px; }
@media (max-width: 767.98px) { .sorteer { margin-left: 0; } .allergenen { position: static; } .allergenen-paneel { left: var(--rand); right: var(--rand); width: auto; } .filters { position: relative; } }
.winkel-schap { margin-top: 24px; }
.winkel-meer { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.winkel-meer p { color: var(--inkt-zacht); font-size: 16px; }
.winkel-leeg { margin-top: 24px; display: grid; justify-items: start; gap: 14px; padding: 40px 0; }
.winkel-leeg[hidden] { display: none; }
.winkel-leeg .sectieplank { font-size: 26px; }
.winkel-staat { margin-top: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; }
.winkel-staat p { font-size: 18px; max-width: 56ch; }
@media (max-width: 767.98px) { .winkel-staat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PRODUCTPAGINA ---------- */
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; margin-top: 12px; align-items: start; }
/* de productfoto als foto, met zijn eigen ondergrond; nooit groter dan het origineel, nooit uitgerekt */
.product-foto { margin: 0; display: flex; justify-content: center; align-items: flex-start; }
.product-foto img { width: auto; height: auto; max-width: 100%; max-height: min(78vh, 760px); box-shadow: 0 1px 1px rgb(var(--schaduw) / .1), 0 14px 30px -18px rgb(var(--schaduw) / .45); }
.product-voor { display: grid; gap: var(--kier); position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); }
.product-naam { padding: 18px 24px 20px; font-size: clamp(26px, 1rem + 1.4vw, 40px); line-height: 1.06; --spatie: 0.01em; }
.product-naam .druk { display: inline; }
.product-sub { padding: 0 2px; font-size: 18px; font-style: italic; color: var(--inkt-zacht); }
.product-prijsplank { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 24px 16px; }
.product-prijsplank .prijs { font-size: clamp(64px, 3rem + 3vw, 104px); color: var(--brandmerk); }
.product-prijsplank .eenheid { font-size: 18px; font-weight: 600; color: var(--brandmerk); padding-bottom: 10px; text-align: right; }
.product-koop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.product-koop .teller { height: 52px; }
.product-koop .teller button { width: 52px; }
.product-koop .knop { flex: 1 1 200px; }
.product-staat { font-size: 16px; font-weight: 600; color: var(--inkt); min-height: 1.55em; }
.product-feiten { margin-top: 8px; display: grid; gap: 10px; font-size: 16px; }
.product-feiten li { position: relative; padding-left: 26px; }
.product-feiten li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 11px; height: 4px; border-radius: 1px; background: var(--grenen-diep); }
.product-feiten .bio { color: var(--fust); font-weight: 800; }
@media (max-width: 899.98px) {
  .product { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product-voor { position: static; }
  .product-foto img { max-height: 62vh; }
}
/* recept */
.recept { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 56px; }
.recept-kop { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.recept-meta { display: flex; gap: 10px 22px; flex-wrap: wrap; font-weight: 600; }
.recept-meta .prijs { font-size: 26px; }
.recept-intro { grid-column: 1 / -1; font-size: 20px; max-width: 62ch; }
.recept-ingr { align-self: start; padding: 22px 24px; background: var(--wit); }
.recept-ingr h3, .recept-stap h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.recept-ingr ul { display: grid; gap: 6px; font-size: 17px; }
.recept-ingr li { padding: 4px 0; box-shadow: 0 1px 0 var(--toonbank); }
.recept-stappen { display: grid; gap: 28px; }
.recept-stap ol { display: grid; gap: 14px; counter-reset: stap; }
.recept-stap li { counter-increment: stap; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.recept-stap li::before { content: counter(stap); font-family: var(--f-prijs); font-size: 34px; line-height: 1; color: var(--brandmerk); }
.recept-tip { padding: 16px 20px; box-shadow: inset 4px 0 0 var(--fust); background: rgb(255 255 255 / .55); font-size: 17px; }
.recept-bron { font-size: 15px; color: var(--inkt-zacht); }
@media (max-width: 899.98px) { .recept { grid-template-columns: minmax(0, 1fr); margin-top: 56px; } }
.meer-kist { margin-top: 88px; }
.meer-kist .rij { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.meer-kist .rij a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- UW KISTJE (mandje.html) ---------- */
.kistje { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; margin-top: 32px; align-items: start; }
.kistje-regels { display: grid; gap: var(--kier); }
.kistje-regel { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 12px 18px 12px 12px; }
.kistje-regel .foto { width: 88px; height: 88px; background: var(--wit); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(var(--schaduw) / .12); }
.kistje-regel .foto img { width: 74px; height: 74px; object-fit: contain; }
.kistje-regel h2 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--inkt); }
.kistje-regel h2 a { color: var(--inkt); text-decoration: none; }
.kistje-regel h2 a:hover { text-decoration: underline; }
.kistje-regel .stuk { font-size: 15px; color: var(--brandmerk); }
.kistje-regel .som { font-size: 32px; color: var(--brandmerk); min-width: 92px; text-align: right; }
.kistje-extra { margin-top: 32px; display: grid; gap: 28px; }
.kistje-paal { position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); display: grid; gap: 16px; padding: 28px 24px 24px; }
.kistje-paal .totaal-label { font-weight: 800; color: var(--brandmerk); font-size: 18px; }
.kistje-paal .totaal { font-size: 88px; color: var(--brandmerk); }
.kistje-paal .knop { width: 100%; }
.kistje-paal p { font-size: 15px; color: var(--brandmerk); }
.kistje-leeg { margin-top: 32px; display: grid; gap: 18px; justify-items: start; }
.kistje-leeg[hidden], .kistje[hidden] { display: none; }
.lege-krat { width: min(520px, 100%); aspect-ratio: 520 / 220; position: relative; }
.lege-krat .wand { position: absolute; inset: 0 0 auto 0; height: 46%; background: rgb(var(--schaduw) / .10); box-shadow: inset 0 18px 24px -18px rgb(var(--schaduw) / .45); border-radius: 2px; }
.lege-krat .voor { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; display: grid; grid-template-rows: 1fr 1fr; gap: var(--kier); }
.lege-krat .paal-l, .lege-krat .paal-r { position: absolute; bottom: 0; top: 8%; width: 9%; }
.lege-krat .paal-l { left: -2%; } .lege-krat .paal-r { right: -2%; }
@media (max-width: 899.98px) {
  .kistje { grid-template-columns: minmax(0, 1fr); }
  .kistje-paal { position: static; }
  .kistje-paal .totaal { font-size: 72px; }
}
@media (max-width: 599.98px) {
  .kistje-regel { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "f n n" "f t s"; gap: 8px 12px; padding: 10px 12px 10px 10px; }
  .kistje-regel .foto { grid-area: f; width: 64px; height: 64px; }
  .kistje-regel .foto img { width: 54px; height: 54px; }
  .kistje-regel > div:nth-child(2) { grid-area: n; }
  .kistje-regel .teller { grid-area: t; justify-self: start; }
  .kistje-regel .som { grid-area: s; font-size: 28px; min-width: 0; }
}

/* ---------- AFREKENEN ---------- */
.kassa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; margin-top: 32px; align-items: start; }
.kassa-stap { display: grid; gap: 18px; padding-bottom: 40px; }
.kassa-stap + .kassa-stap { padding-top: 8px; }
.kassa-stap > legend { float: left; width: 100%; padding: 0; margin-bottom: 18px; }
.kassa-stap > legend + * { clear: both; }
.stap-plank { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 22px 10px 16px; font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.05; }
.stap-plank .nr { font-family: var(--f-prijs); font-size: 1.4em; line-height: 1; color: var(--brandmerk); }
.stap-plank .druk { display: inline; }
.keuze-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.keuze { position: relative; display: block; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze .kaart { display: grid; gap: 4px; height: 100%; padding: 18px 20px 20px; background: var(--wit); box-shadow: inset 0 0 0 1.5px #8C8794; border-radius: 2px; transition: box-shadow .15s; }
.keuze .kaart strong { font-size: 20px; font-weight: 800; }
.keuze .kaart .prijs { font-size: 30px; }
.keuze .kaart span { font-size: 16px; color: var(--inkt-zacht); }
.keuze:hover .kaart { box-shadow: inset 0 0 0 2px var(--inkt); }
.keuze input:checked + .kaart { box-shadow: inset 0 0 0 3px var(--fust); }
.keuze input:checked + .kaart strong::after { content: ""; display: inline-block; width: 12px; height: 7px; margin-left: 10px; border: solid var(--fust); border-width: 0 0 3px 3px; rotate: -45deg; translate: 0 -4px; }
.keuze input:focus-visible + .kaart { outline: 3px solid var(--fust); outline-offset: 3px; }
@media (max-width: 599.98px) { .keuze-rij { grid-template-columns: minmax(0, 1fr); } }
/* de datum: veertien kratjes, open dagen vol, dichte dagen leeg */
.dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dagje { position: relative; display: block; cursor: pointer; }
.dagje input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dagje .kr { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 76px; padding: 6px 2px 8px; text-align: center; }
.dagje .wd { font-family: var(--f-druk); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1.1; color: var(--brandmerk); }
.dagje .dt { font-family: var(--f-prijs); font-size: 24px; line-height: 1; color: var(--brandmerk); }
.dagje .mn { font-size: 13px; font-weight: 600; color: var(--brandmerk); line-height: 1.2; }
.dagje:hover .kr { filter: brightness(.96); }
.dagje input:checked + .kr { background: var(--brandmerk); background-image: none; box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.dagje input:checked + .kr .wd, .dagje input:checked + .kr .dt, .dagje input:checked + .kr .mn { color: var(--grenen); }
.dagje input:focus-visible + .kr { outline: 3px solid var(--fust); outline-offset: 3px; }
.dagje.dicht { cursor: not-allowed; }
.dagje.dicht .kr { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--schaduw) / .25); }
.dagje.dicht .wd, .dagje.dicht .dt, .dagje.dicht .mn { color: #6E6976; }
.dagje.dicht .wd { -webkit-mask-image: none; mask-image: none; }
.dagen-uitleg { font-size: 15px; color: var(--inkt-zacht); }
@media (max-width: 599.98px) {
  .dagen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dagje .wd { font-size: 22px; }
}
.betaal { display: grid; gap: 4px; }
.betaal .vink { align-items: flex-start; padding: 10px 0; }
.betaal .vink input { margin-top: 3px; }
.betaal .vink span { display: grid; }
.betaal .vink small { font-size: 15px; color: var(--inkt-zacht); font-weight: 400; }
.kassa-overzicht { position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); display: grid; gap: var(--kier); }
.kassa-overzicht .lijst { background: var(--wit); padding: 18px 20px; display: grid; gap: 10px; font-size: 16px; max-height: 46vh; overflow: auto; }
.kassa-overzicht .lijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.kassa-overzicht .lijst .prijs { font-size: 22px; }
.kassa-overzicht .som { display: grid; gap: 4px; padding: 16px 20px 18px; }
.kassa-overzicht .som p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--brandmerk); font-weight: 600; }
.kassa-overzicht .som .prijs { font-size: 26px; }
.kassa-overzicht .som .eind .prijs { font-size: 56px; }
.kassa-overzicht .som .eind { font-weight: 800; font-size: 18px; }
.kassa-noot { font-size: 15px; color: var(--inkt-zacht); }
@media (max-width: 899.98px) { .kassa { grid-template-columns: minmax(0, 1fr); } .kassa-overzicht { position: static; order: -1; } .kassa-overzicht .lijst { max-height: none; } }

/* ---------- INLOGGEN ---------- */
.loket { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; margin-top: 40px; align-items: start; }
.loket-tabs { display: flex; gap: 0; }
.loket-tabs button { flex: 1 1 0; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 0; font-size: 22px; line-height: 1.05; --spatie: 0.02em; color: var(--brandmerk); }
.loket-tabs button:first-child { border-radius: 2px 0 0 2px; }
.loket-tabs button:last-child { border-radius: 0 2px 2px 0; }
.loket-tabs button + button { box-shadow: inset 1px 0 0 rgb(var(--schaduw) / .22), inset 0 0 0 1px rgba(179, 172, 144, .55); }
.loket-tabs button[aria-selected="true"] { background: var(--brandmerk); background-image: none; color: var(--grenen); box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.loket-tabs button[aria-selected="true"] .druk { color: var(--grenen); -webkit-mask-image: none; mask-image: none; }
.loket-tabs button:focus-visible { outline-offset: -3px; z-index: 1; }
.loket-paneel { padding: 28px 0 0; display: grid; gap: 20px; max-width: 560px; }
.loket-paneel[hidden] { display: none; }
.loket-noot { font-size: 15px; color: var(--inkt-zacht); }
.loket-zij { display: grid; gap: 16px; padding: 24px 24px 26px; }
.loket-zij h2 { font-size: 22px; line-height: 1.1; }
.loket-zij p { color: var(--brandmerk); font-size: 17px; }
.loket-zij a { font-weight: 600; }
@media (max-width: 899.98px) { .loket { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) {
  .loket-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .loket-tabs button { font-size: 22px; padding: 8px 6px; min-height: 56px; border-radius: 0 !important; }
  .loket-tabs button:last-child { grid-column: 1 / -1; box-shadow: inset 0 1px 0 rgb(var(--schaduw) / .22), inset 0 0 0 1px rgba(179, 172, 144, .55); }
  .loket-tabs button[aria-selected="true"] { box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
}

/* ---------- EIGEN BOX ---------- */
.eb-podium { position: relative; margin-top: 24px; }
.eb-foto { position: relative; overflow: hidden; height: clamp(260px, 34vw, 480px); }
.eb-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.eb-titel { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); display: grid; gap: var(--kier); justify-items: start; }
.eb-titel .titelplank { box-shadow: inset 0 0 0 1px rgba(179, 172, 144, .55), 0 10px 24px -10px rgb(0 0 0 / .55); }
.eb-titel .lijn { padding: 8px 18px 10px; font-size: 22px; --spatie: .02em; }
.eb { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; margin-top: 40px; align-items: start; }
.eb-kies { display: grid; gap: 20px; min-width: 0; }
.eb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-chip { min-height: 44px; padding: 6px 16px 8px; border: 0; font-size: 22px; line-height: 1.05; --spatie: .02em; color: var(--brandmerk); }
.eb-chip[aria-pressed="true"] { background: var(--brandmerk); background-image: none; box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.eb-chip[aria-pressed="true"] .druk { color: var(--grenen); -webkit-mask-image: none; mask-image: none; }
.eb-zoek { max-width: 420px; }
.eb-lijst { display: grid; gap: 0; background: var(--wit); }
.eb-rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 8px 16px 8px 8px; box-shadow: 0 1px 0 var(--toonbank); }
.eb-rij img { width: 56px; height: 56px; object-fit: contain; }
.eb-rij .nm { font-weight: 600; line-height: 1.3; }
.eb-rij .nm a { color: var(--inkt); text-decoration: none; }
.eb-rij .nm a:hover { text-decoration: underline; }
.eb-rij .eh { display: block; font-size: 15px; font-weight: 400; color: var(--inkt-zacht); }
.eb-rij .prijs { font-size: 28px; }
.eb-meer { justify-self: start; }
.eb-box { position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); display: grid; gap: var(--kier); }
.eb-box-kop { padding: 12px 20px 14px; font-size: 26px; --spatie: .02em; }
.eb-box-regels { display: grid; gap: var(--kier); max-height: 44vh; overflow: auto; padding: 2px; }
.eb-box-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 16px 12px; font-size: 16px; color: var(--brandmerk); animation: lat-in .35s var(--uit) both; }
.eb-box-regel .q { font-family: var(--f-prijs); font-size: 24px; line-height: 1; }
.eb-box-regel .prijs { font-size: 22px; }
@keyframes lat-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.eb-box-leeg { padding: 18px 20px; font-size: 16px; color: var(--inkt-zacht); box-shadow: inset 0 0 0 1.5px rgb(var(--schaduw) / .22); border-radius: 2px; }
.eb-box-som { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 14px 20px 16px; color: var(--brandmerk); font-weight: 800; }
.eb-box-som .prijs { font-size: 56px; }
.eb-box .knop { width: 100%; }
.eb-box .klein { font-size: 15px; color: var(--inkt-zacht); }
@media (max-width: 899.98px) {
  .eb { grid-template-columns: minmax(0, 1fr); }
  .eb-box { position: static; }
  .eb-box-regels { max-height: none; }
}
@media (max-width: 599.98px) {
  .eb-rij { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "f n b" "f p b"; gap: 0 12px; }
  .eb-rij img { grid-area: f; width: 48px; height: 48px; }
  .eb-rij .nm { grid-area: n; }
  .eb-rij .prijs { grid-area: p; font-size: 24px; }
  .eb-rij [data-bedien] { grid-area: b; }
  .eb-titel .lijn { font-size: 22px; }
  .eb-foto { height: 300px; }
}

/* ---------- FRUIT OP HET WERK ---------- */
.werk-kop { position: relative; margin-top: 24px; }
.werk-foto { height: clamp(320px, 44vw, 640px); overflow: hidden; }
.werk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.werk-titel { position: relative; margin: calc(-1 * clamp(56px, 6vw, 92px)) 0 0 clamp(16px, 5vw, 72px); display: grid; gap: var(--kier); justify-items: start; }
.werk-titel .titelplank { font-size: clamp(1.9rem, 0.9rem + 3.6vw, 4.5rem); padding: 14px 32px 16px; box-shadow: inset 0 0 0 1px rgba(179, 172, 144, .55), 0 14px 30px -12px rgb(var(--schaduw) / .6); }
.werk-titel .lijn { padding: 8px 22px 10px; font-size: clamp(22px, 1rem + .8vw, 28px); --spatie: .02em; }
.werk-intro { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; }
.werk-intro .groot { font-size: clamp(26px, 1rem + 1.6vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.werk-feiten { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.werk-feit { display: grid; align-content: start; gap: 10px; }
.werk-feit .plank { min-height: 56px; display: flex; align-items: center; padding: 8px 18px 10px; font-size: 22px; line-height: 1.05; --spatie: .02em; }
.werk-feit p { font-size: 17px; padding: 0 2px; }
@media (max-width: 1023.98px) { .werk-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .werk-intro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { .werk-feiten { grid-template-columns: minmax(0, 1fr); } }
.werk-opties { margin-top: 88px; }
.werk-opties-rij { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.optie { display: grid; grid-template-rows: auto 1fr auto; gap: 0; }
.optie .kops { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px 14px; font-size: 22px; line-height: 1.1; --spatie: .02em; }
.optie .kops .nr { font-family: var(--f-prijs); font-size: 40px; line-height: .9; }
.optie .lijf { padding: 18px 20px; background: var(--wit); font-size: 17px; }
.optie .lijf h3 { font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.optie .va { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 20px 12px; color: var(--brandmerk); font-weight: 600; }
.optie .va .prijs { font-size: 48px; }
@media (max-width: 899.98px) { .werk-opties-rij { grid-template-columns: minmax(0, 1fr); } }
.werk-boxen { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.werk-boxen figure { margin: 0; }
.werk-boxen figure img { width: 100%; height: auto; }
.werk-boxen figcaption { font-size: 15px; color: var(--inkt-zacht); margin-top: 8px; }
.ladder { display: grid; gap: var(--kier); margin-top: 20px; }
.sport { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 10px 16px 10px 20px; }
.sport .st { font-family: var(--f-prijs); font-size: 64px; line-height: .9; color: var(--brandmerk); }
.sport .st small { display: block; font-family: var(--f-tekst); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.sport .nm { font-weight: 600; color: var(--brandmerk); line-height: 1.3; }
.sport .nm a { color: var(--brandmerk); }
.sport .nm span { display: block; font-weight: 400; font-size: 15px; }
.sport .prijs { font-size: 38px; color: var(--brandmerk); }
@media (max-width: 899.98px) { .werk-boxen { grid-template-columns: minmax(0, 1fr); } .werk-boxen figure { max-width: 520px; } }
@media (max-width: 599.98px) {
  .sport { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "s n n" "s p b"; gap: 4px 12px; padding: 10px 12px 12px 14px; }
  .sport .st { grid-area: s; font-size: 52px; }
  .sport .nm { grid-area: n; }
  .sport .prijs { grid-area: p; font-size: 32px; }
  .sport [data-bedien] { grid-area: b; justify-self: end; }
}
.aanvraag { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; align-items: start; }
.aanvraag-uitleg { display: grid; gap: 16px; position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); }
.aanvraag-uitleg p { font-size: 18px; }
.aanvraag form { display: grid; gap: 22px; }
.dagkeus { display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 899.98px) { .aanvraag { grid-template-columns: minmax(0, 1fr); } .aanvraag-uitleg { position: static; } }

/* ---------- RECEPTENBOXEN ---------- */
.rc-kop { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: end; }
.rc-kop figure { margin: 0; }
.rc-kop img { width: 100%; height: auto; }
.rc-kop .tekst { display: grid; gap: 20px; padding-bottom: 8px; }
.rc-kop .tekst p { font-size: 19px; max-width: 46ch; }
.rc-groep { margin-top: 80px; }
.rc-groep-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.rc-groep-kop .vanaf { display: flex; align-items: baseline; gap: 10px; font-weight: 600; }
.rc-groep-kop .vanaf .prijs { font-size: 48px; }
.rc-rijen { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rc { position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; background: var(--wit); padding: 12px 16px 12px 12px; box-shadow: 0 1px 1px rgb(var(--schaduw) / .1), 0 8px 18px -12px rgb(var(--schaduw) / .35); }
.rc img { width: 136px; height: 136px; object-fit: cover; }
.rc .tekst { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; gap: 6px 12px; padding-top: 4px; }
.rc h3 { grid-column: 1 / -1; font-size: 19px; font-weight: 800; line-height: 1.25; }
.rc h3 a { color: var(--inkt); text-decoration: none; }
.rc h3 a::after { content: ""; position: absolute; inset: 0 0 64px 0; }
.rc h3 a:hover { text-decoration: underline; }
.rc h3 a:focus-visible { outline: none; }
.rc h3 a:focus-visible::after { outline: 3px solid var(--fust); outline-offset: -3px; }
.rc .meta { grid-column: 1 / -1; font-size: 15px; color: var(--inkt-zacht); }
.rc .prijs { font-size: 32px; align-self: end; }
.rc [data-bedien] { position: relative; z-index: 1; align-self: end; }
.rc-noot { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.rc-noot img { width: 100%; height: auto; }
.rc-noot p { font-size: 18px; max-width: 52ch; }
@media (max-width: 1023.98px) { .rc-rijen { grid-template-columns: minmax(0, 1fr); } .rc-kop, .rc-noot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { .rc { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .rc img { width: 96px; height: 96px; } .rc h3 { font-size: 17px; } .rc h3 a::after { inset: 0; } }

/* ---------- OVER JOE ---------- */
.ov { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
.ov-foto { margin: 0; position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); }
.ov-foto img { width: 100%; height: auto; }
.ov-foto figcaption { font-size: 15px; color: var(--inkt-zacht); margin-top: 8px; }
.ov-tekst { display: grid; gap: 28px; }
.ov-groot { font-size: clamp(36px, 1.2rem + 3.6vw, 88px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.ov-groot span { display: block; }
.ov-tekst .lees { font-size: 19px; }
.ov-assort { display: grid; gap: var(--kier); margin-top: 8px; }
.ov-assort a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 18px 10px; font-size: 22px; line-height: 1.1; --spatie: .02em; text-decoration: none; }
.ov-assort a .pijl { color: var(--brandmerk); flex: none; }
.ov-assort a:hover { filter: brightness(.97); }
.ov-strook { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: 24px 16px; align-items: start; }
.ov-strook figure { margin: 0; }
.ov-strook img { width: 100%; height: auto; }
.ov-strook figcaption { font-size: 15px; color: var(--inkt-zacht); margin-top: 8px; }
.ov-strook .hoog { grid-column: 3; grid-row: 1 / span 2; }
.ov-citaat { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; }
.ov-citaat blockquote { margin: 0; font-size: clamp(26px, 1rem + 1.8vw, 44px); font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; }
.ov-citaat blockquote p::before { content: "\201C"; } .ov-citaat blockquote p::after { content: "\201D"; }
.ov-citaat cite { display: block; margin-top: 14px; font-size: 16px; font-style: normal; font-weight: 600; color: var(--inkt-zacht); letter-spacing: 0; }
.ov-citaat img { width: 100%; height: auto; }
@media (max-width: 899.98px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov-foto { position: static; max-width: 560px; }
  .ov-strook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-strook .breed { grid-column: 1 / -1; }
  .ov-strook .hoog { grid-column: auto; grid-row: auto / span 2; }
  .ov-citaat { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CONTACT ---------- */
.ct-grootboek { margin-top: 40px; display: grid; gap: var(--kier); }
.ct-regel { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; gap: var(--kier); }
.ct-regel .kops { display: flex; align-items: center; padding: 8px 20px 10px; font-size: 22px; --spatie: .03em; line-height: 1.05; }
.ct-regel .waarde { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 10px 4px 10px 20px; font-size: clamp(22px, 1rem + 1.2vw, 36px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.ct-regel .waarde a { color: var(--inkt); text-decoration-thickness: 2px; text-decoration-color: rgb(22 23 20 / .3); }
.ct-regel .waarde a:hover { text-decoration-color: var(--inkt); }
.ct-regel .waarde small { font-size: 16px; font-weight: 600; color: var(--inkt-zacht); letter-spacing: 0; }
@media (max-width: 767.98px) {
  .ct-regel { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ct-regel .kops { justify-self: start; min-height: 48px; }
  .ct-regel .waarde { padding: 4px 2px 14px; }
}
.ct-twee { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 64px; align-items: start; }
.ct-form { display: grid; gap: 20px; }
.ct-winkel { display: grid; gap: 20px; }
.ct-winkel img { width: 100%; height: auto; }
.uren { display: grid; gap: 0; background: var(--wit); padding: 8px 20px; }
.uren li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; box-shadow: 0 1px 0 var(--toonbank); font-size: 17px; }
.uren li:last-child { box-shadow: none; }
.uren .u { font-family: var(--f-prijs); font-size: 24px; line-height: 1.1; }
.uren .d { font-weight: 600; }
.uren .dicht { color: var(--inkt-zacht); }
.ct-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-weight: 600; }
.ct-socials a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 899.98px) { .ct-twee { grid-template-columns: minmax(0, 1fr); } }

/* ---------- KLANTENSERVICE ---------- */
.ks { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px 64px; align-items: start; }
.ks-index { position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); display: grid; gap: var(--kier); }
.ks-index a { display: flex; align-items: center; min-height: 56px; padding: 8px 18px 10px; font-size: 22px; --spatie: .03em; text-decoration: none; }
.ks-index a:hover { filter: brightness(.97); }
.ks-index a.hier { background: var(--brandmerk); background-image: none; box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.ks-index a.hier .druk { color: var(--grenen); -webkit-mask-image: none; mask-image: none; }
.ks-deel { padding-bottom: 72px; }
.ks-deel > h2 { margin-bottom: 20px; }
.ks-stappen { display: grid; gap: 28px; margin-top: 24px; }
.ks-stap { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
.ks-stap .nr { font-family: var(--f-prijs); font-size: 72px; line-height: .85; color: var(--brandmerk); }
.ks-stap h3 { font-size: 21px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.ks-stap p { max-width: 62ch; }
.vraag { background: var(--wit); }
.vraag + .vraag { margin-top: 8px; }
.vraag > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 20px; font-weight: 800; font-size: 19px; cursor: pointer; }
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary svg { width: 22px; height: 22px; flex: none; color: var(--fust); transition: rotate .2s var(--uit); }
.vraag[open] > summary svg { rotate: 45deg; }
.vraag > summary:focus-visible { outline-offset: -3px; }
.vraag .antwoord { padding: 0 20px 20px; max-width: 66ch; }
.vraag .antwoord p + p { margin-top: .8em; }
@media (max-width: 899.98px) {
  .ks { grid-template-columns: minmax(0, 1fr); }
  .ks-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- JURIDISCH ---------- */
.jur { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px 64px; align-items: start; }
.jur-index { display: grid; gap: var(--kier); position: sticky; top: calc(var(--kop-h) + var(--kop-boven) + 24px); }
.jur-index a { display: flex; align-items: center; min-height: 52px; padding: 8px 18px 10px; font-family: var(--f-tekst); font-weight: 600; font-size: 17px; color: var(--brandmerk); text-decoration: none; }
.jur-index a:hover { filter: brightness(.97); }
.jur-index a[aria-current="page"] { background: var(--brandmerk); background-image: none; color: var(--grenen); box-shadow: inset 0 3px 8px rgb(0 0 0 / .35); }
.jur-tekst { font-size: 18px; }
.jur-tekst .stand { font-size: 15px; color: var(--inkt-zacht); margin-bottom: 1.4em; }
.jur-tekst h2 { scroll-margin-top: 120px; }
.jur-tabel { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 16px; background: var(--wit); }
.jur-tabel th, .jur-tabel td { text-align: left; vertical-align: top; padding: 10px 14px; box-shadow: 0 1px 0 var(--toonbank); }
.jur-tabel th { font-weight: 800; }
@media (max-width: 899.98px) { .jur { grid-template-columns: minmax(0, 1fr); } .jur-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
  .jur-tabel, .jur-tabel tbody, .jur-tabel tr, .jur-tabel td, .jur-tabel th { display: block; }
  .jur-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .jur-tabel tr { padding: 10px 0; box-shadow: 0 1px 0 var(--toonbank); }
  .jur-tabel td { box-shadow: none; padding: 2px 14px; }
  .jur-tabel td::before { content: attr(data-kop) ": "; font-weight: 800; }
}

/* ---------- 404 ---------- */
.leeg-pagina { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 64px; align-items: center; }
.leeg-pagina .tekst { display: grid; gap: 20px; justify-items: start; }
.leeg-pagina p { font-size: 19px; max-width: 44ch; }
.leeg-links { display: grid; gap: var(--kier); width: 100%; max-width: 420px; }
.leeg-links a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 18px 10px; font-size: 22px; --spatie: .02em; text-decoration: none; }
@media (max-width: 899.98px) { .leeg-pagina { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } }

/* een vaste plaats onderaan elke binnenpagina: het lijstje als één regel op een plank */
.lijstregel { margin-top: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px 24px 18px; }
.lijstregel p { font-size: 18px; font-weight: 600; color: var(--brandmerk); }
.lijstregel a { font-weight: 800; color: var(--brandmerk); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .eb-box-regel { animation: none; }
}

/* een knop die eruitziet als een link (terug naar het formulier) */
.knop-tekst { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fust); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.knop-tekst:hover { text-decoration-thickness: 2.5px; }
@media (max-width: 379.98px) { .loket-tabs { grid-template-columns: minmax(0, 1fr); } .loket-tabs button:last-child { grid-column: auto; } }
/* lange productnamen (Zuurkoolstamppot/worst) breken alleen als het moet */
.rc h3, .tg-naam, .product-naam, .kistje-regel h2, .eb-rij .nm, .sport .nm, .kassa-overzicht .lijst span, .eb-box-regel span { overflow-wrap: break-word; min-width: 0; }
/* tablet: de kisten in drie rijen naast elkaar, zodat RECEPTENBOXEN past */
@media (min-width: 768px) and (max-width: 1199.98px) { .kisten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* inloggen: tabs naar hun eigen breedte, op één regel */
@media (min-width: 600px) { .loket-tabs button { flex: 1 1 auto; white-space: nowrap; padding-inline: 18px; } }
.schakel .prijs { font-size: 22px; }
.kist-eind .druk { min-width: 0; }
@media (max-width: 899.98px) { .ov-strook figure:last-child { grid-column: 1 / -1; } }

/* ---------- ronde 8: QA-correcties ---------- */
.nw { white-space: nowrap; }
/* tegels: naam bovenaan, prijs onderaan, op dezelfde hoogte in een rij */
.tg-tekst { grid-template-rows: auto auto auto minmax(0, 1fr); align-content: stretch; padding-top: 4px; }
.tg-naam { grid-row: 1; align-self: start; }
.tg-sub { grid-row: 2; }
.tg-eenheid { grid-row: 3; align-self: start; }
.tg-prijs, .tg-bedien { grid-row: 4; }
@media (max-width: 767.98px) {
  .tg-tekst { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
  .tg-bedien { grid-row: 5; }
}
/* contact: openingstijden zoals op de voorpagina, 'tot' klein in Proza; de stand van vandaag als echte tekst */
.uren .u .tot { font-family: var(--f-tekst); font-size: 14px; letter-spacing: 0; margin: 0 2px; }
.uren .d .nu { display: block; font-size: 14px; font-weight: 800; color: var(--appel-tekst); line-height: 1.3; }
/* tikdoelen van minstens 44px */
.ct-link { display: inline-flex; align-items: center; min-height: 44px; }
.knop-rij > a:not(.knop) { display: inline-flex; align-items: center; min-height: 44px; }
.kruimel a { min-width: 44px; }
/* de lege krat: binnenkant van grenen planken in de schaduw, rand precies over de palen */
.lege-krat .wand {
  height: 48%;
  background-color: #BDB391;
  background-image: linear-gradient(to bottom, rgb(var(--schaduw) / .34), rgb(var(--schaduw) / .10) 46%, rgb(var(--schaduw) / .30) 48%, rgb(var(--schaduw) / .08) 52%, rgb(var(--schaduw) / .06)), url("../foto/nerf.webp");
  background-size: 100% 100%, 500px 180px; background-blend-mode: multiply;
  box-shadow: inset 0 16px 22px -14px rgb(var(--schaduw) / .55), inset 0 0 0 1px rgb(var(--schaduw) / .2);
}
.lege-krat .paal-l { left: 0; } .lege-krat .paal-r { right: 0; }
.lege-krat .voor { left: 4%; right: 4%; }
/* over Joe: rijen met gelijke hoogtes, de hoge foto precies over twee rijen */
@media (min-width: 900px) {
  .ov-strook { align-items: stretch; }
  .ov-strook figure:not(.hoog) img { height: clamp(240px, 21vw, 300px); object-fit: cover; }
  .ov-strook figure:nth-child(2) img { object-position: 50% 30%; }
  .ov-strook .hoog { display: flex; flex-direction: column; }
  .ov-strook .hoog img { flex: 1 1 auto; height: 0; min-height: 0; object-fit: cover; object-position: 50% 40%; }
}
.ov-tekst .lees p, .lees p { text-wrap: pretty; }
/* winkel: het aantal op telefoon tegen de kolomrand */
@media (max-width: 767.98px) { .winkel-tal { margin-left: 0; } }