/* Joe's Groente en Fruit, ronde 6 "Het kistje". Gedeelde stijl: lettertypes, kleuren, de plankenset,
   de kop (een grenen lat), het menu (kratplanken), het mandje en de voet (kopse kanten van kratten).
   Kleuren gemeten uit zijn eigen foto's en logo (brief, hoofdstuk 3). */

/* ---------- lettertypes, zelf gehost (latin) ---------- */
@font-face { font-family: "Stardos Stencil"; src: url("../fonts/stardos-stencil-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("../fonts/proza-libre-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("../fonts/proza-libre-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("../fonts/proza-libre-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Proza Libre"; src: url("../fonts/proza-libre-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
/* alleen cijfers, euroteken, komma, punt, dubbele punt, ST en x */
@font-face { font-family: "League Gothic"; src: url("../fonts/league-gothic-cijfers.woff2") format("woff2"); font-weight: 400; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0020, U+002B-002F, U+0030-003A, U+0053-0054, U+0058, U+0074, U+0078, U+00A0, U+2009, U+202F, U+20AC; }
/* metrisch gelijkgezette terugvallers (gemeten met canvas measureText tegen de echte letter) */
@font-face { font-family: "Stardos terugval"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Times New Roman Bold"); font-weight: 700; size-adjust: 96%; ascent-override: 97%; descent-override: 40%; line-gap-override: 0%; }
@font-face { font-family: "Proza terugval"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 104%; ascent-override: 95%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "Proza terugval"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 600 800; size-adjust: 102%; ascent-override: 95%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "League terugval"; src: local("Arial Narrow"), local("Impact"); size-adjust: 88%; }

:root {
  /* gemeten kleuren */
  --toonbank: #DBD8E0;      /* zijn witte toonbank onder koel winkellicht: de grond */
  --inkt: #161714;          /* logo-inkt: tekst */
  --grenen: #DDD8C0;        /* de FRUITMASTERS-plank: alleen planken, nooit een vlak */
  --brandmerk: #2D1F1C;     /* de ingebrande druk van "Bakkie Westland": druk op planken */
  --fust: #0A639B;          /* het blauwe veilingfust voor zijn winkel: links, focus, de blauwe band */
  --appel: #DE1F26;         /* de rode boog van zijn logo: alleen vlak, alleen waar geld beweegt */
  --appel-tekst: #B8141B;   /* dezelfde boog als tekst op de toonbank (4,7:1) */
  --plankwand: #6F6155;     /* de plankwand achter zijn boxfoto's, opnieuw gemeten op de uitsneden */
  /* afgeleid, binnen de familie */
  --grenen-rand: #B3AC90;   /* 1px donkerdere rand van een plank */
  --grenen-kops: #C9C1A2;   /* kopse kant, iets donkerder hout */
  --grenen-diep: #A79F80;   /* schaduwkant van een paal */
  --toonbank-diep: #CDC9D3; /* naad van de toonbank, plankstrepen */
  --inkt-zacht: #45424D;    /* tweede tekst op de toonbank (7:1) */
  --wit: #FFFFFF;
  --schaduw: 45 31 28;      /* brandmerk als schaduwtint, nooit puur zwart */

  --f-druk: "Stardos Stencil", "Stardos terugval", Georgia, serif;
  --f-tekst: "Proza Libre", "Proza terugval", Arial, sans-serif;
  --f-prijs: "League Gothic", "League terugval", "Arial Narrow", sans-serif;

  --uit: cubic-bezier(.16, 1, .3, 1);
  --rand: clamp(16px, 4vw, 56px);
  --max: 1328px;
  --goot: 24px;
  --lat: 72px;             /* een plank, het ritme van de pagina */
  --kier: 8px;             /* de kier tussen planken: de enige scheiding op de site */
  --kop-h: 64px;
  --kop-boven: 10px;

  color-scheme: light;
  accent-color: var(--fust);
  caret-color: var(--appel);
  scrollbar-color: var(--grenen-kops) var(--toonbank);
}
@media (max-width: 1023.98px) {
  :root { --goot: 16px; --lat: 56px; --kop-h: 56px; --kop-boven: 8px; }
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-h) + var(--kop-boven) + 24px); }
body {
  margin: 0; background: var(--toonbank); color: var(--inkt);
  font-family: var(--f-tekst); font-size: 18px; line-height: 1.55; font-weight: 400;
  font-kerning: normal; font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (max-width: 599.98px) { body { font-size: 17px; } }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--fust); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; hyphens: manual; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--fust); color: var(--wit); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--fust); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.overslaan { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--inkt); color: var(--wit); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.overslaan:focus-visible { top: 12px; outline-color: var(--fust); }
.binnen { width: min(var(--max), 100% - 2 * var(--rand)); margin-inline: auto; }

/* prijzen: League Gothic, tabulair, centen op 0,6em verhoogd */
.prijs { font-family: var(--f-prijs); font-weight: 400; font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em; white-space: nowrap; line-height: 1; }
.prijs .ct { font-size: 0.6em; vertical-align: 0.62em; margin-left: 0.04em; letter-spacing: 0.02em; }
.prijs .eu { margin-right: 0.12em; }

/* ---------- de plankenset ---------- */
/* Een plank: grenen met nerf uit zijn eigen krat (vermenigvuldigd), 2px hoeken, een 1px donkerdere rand
   en een zachte contactschaduw, zodat hij loskomt van de toonbank met dezelfde helderheid. */
.plank {
  --nietje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%234E5964'/%3E%3Cstop offset='.45' stop-color='%23A7B2BC'/%3E%3Cstop offset='1' stop-color='%23535E6A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.6' width='13' height='2.8' rx='1.2' fill='url(%23g)'/%3E%3C/svg%3E");
  position: relative;
  background-color: var(--grenen);
  background-image: url("../foto/nerf.webp");
  background-size: 500px 180px;
  background-position: var(--nerf-x, 0) var(--nerf-y, 0);
  background-blend-mode: multiply;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(179, 172, 144, .55),
    inset 0 2px 0 rgba(255, 255, 255, .28),
    0 1px 1px rgba(45, 31, 28, .22),
    0 6px 14px -8px rgba(45, 31, 28, .42);
  color: var(--brandmerk);
}
/* twee nietjes, liggend op de onderrand bij de uiteinden, zoals op zijn krat: onder de letters, nooit ertussen */
.plank.met-nietjes::after {
  content: ""; position: absolute; inset: auto 0 3px 0; height: 4px; pointer-events: none;
  background: var(--nietje) no-repeat left var(--nietje-in, 12px) bottom 0 / 13px 4px, var(--nietje) no-repeat right var(--nietje-in, 12px) bottom 0 / 13px 4px;
  opacity: .85;
}
/* druk: stencil in brandmerk, met een vaste inktruwheid (statisch masker, geen filter) */
.druk {
  font-family: var(--f-druk); font-weight: 700; text-transform: uppercase; letter-spacing: var(--spatie, 0.01em);
  color: var(--brandmerk); line-height: inherit; display: inline-block;
  -webkit-mask-image: url("../foto/inkt.png"); mask-image: url("../foto/inkt.png");
  -webkit-mask-size: 300px 300px; mask-size: 300px 300px;
}
.druk-wit { color: var(--wit); }
span.druk { display: inline; }
/* paal / kopse kant: donkerder hout, staande nerf */
.paal {
  background-color: var(--grenen-kops);
  background-image: linear-gradient(90deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 22%, rgb(0 0 0 / 0) 70%, rgb(var(--schaduw) / .16)), url("../foto/nerf-staand.webp");
  background-size: 100% 100%, 180px 450px;
  background-blend-mode: normal, multiply;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgb(var(--schaduw) / .16), 0 6px 14px -8px rgb(var(--schaduw) / .45);
}

/* ---------- knoppen: alleen kopen is gevuld ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border: 0; border-radius: 2px;
  font-family: var(--f-tekst); font-weight: 800; font-size: 18px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--uit), background-color .15s, box-shadow .15s;
}
.knop:active { transform: translateY(1px); }
.knop-koop { background: var(--appel); color: var(--wit); box-shadow: 0 1px 0 #9E1117, 0 6px 14px -8px rgb(var(--schaduw) / .55); }
.knop-koop:hover { background: #C8141B; }
.knop-koop:focus-visible { outline-color: var(--fust); }
.knop[disabled], .knop[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.pijl { width: 1.1em; height: 1.1em; flex: none; }

/* het plusje en de teller op tegels en planken */
.plus {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 2px; background: var(--appel); color: var(--wit);
  box-shadow: 0 1px 0 #9E1117;
  transition: background-color .15s, transform .15s var(--uit);
}
.plus:hover { background: #C8141B; }
.plus:active { transform: translateY(1px); }
.plus svg { width: 20px; height: 20px; }
.teller {
  display: inline-flex; align-items: stretch; height: 44px; border-radius: 2px; overflow: hidden;
  background: var(--wit); box-shadow: inset 0 0 0 1.5px var(--inkt);
}
.teller button { width: 44px; border: 0; background: transparent; display: grid; place-items: center; color: var(--inkt); }
.teller button:hover { background: var(--toonbank); }
.teller button:focus-visible { outline-offset: -3px; }
.teller button svg { width: 18px; height: 18px; }
.teller output { min-width: 30px; display: grid; place-items: center; font-family: var(--f-prijs); font-size: 24px; font-variant-numeric: tabular-nums; }

/* ---------- de kop: een grenen lat vanaf het eerste beeld ---------- */
.kop { position: sticky; top: var(--kop-boven); z-index: 40; margin: var(--kop-boven) 24px 0; height: var(--kop-h); }
.kop-lat {
  height: 100%; display: flex; align-items: center; gap: 22px;
  padding-left: 18px; padding-right: 0;
}
.kop-logo { flex: none; display: block; padding: 6px 4px; margin-right: 6px; border-radius: 2px; }
.kop-logo img { height: 46px; width: auto; mix-blend-mode: multiply; }
.kop-nav ul { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); }
.kop-woord {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 22px; --spatie: 0.04em; text-decoration: none; color: var(--brandmerk);
  background-image: linear-gradient(var(--brandmerk), var(--brandmerk)); background-size: 0 2.5px; background-repeat: no-repeat; background-position: 0 calc(100% - 6px);
  transition: background-size .2s var(--uit);
}
.kop-woord:hover, .kop-woord[aria-current="page"] { background-size: 100% 2.5px; }
.kop-zoek { position: relative; display: flex; align-items: center; margin-left: auto; }
.kop-zoek input {
  width: 200px; height: 40px; padding: 0 12px 0 34px; border: 0; border-radius: 2px;
  background-color: var(--grenen-kops);
  background-image: linear-gradient(rgb(var(--schaduw) / .10), rgb(var(--schaduw) / 0) 45%), url("../foto/nerf-staand.webp");
  background-size: 100% 100%, 180px 450px; background-blend-mode: normal, multiply;
  box-shadow: inset 0 3px 4px -1px rgb(var(--schaduw) / .5), inset 0 0 0 1px rgb(var(--schaduw) / .18), 0 1px 0 rgb(255 255 255 / .45);
  color: var(--inkt); font-family: var(--f-tekst); font-size: 16px; font-weight: 600;
}
.kop-zoek input::placeholder { color: var(--brandmerk); opacity: 1; }
.kop-zoek input:focus-visible { outline-offset: 2px; }
.kop-zoek .loep { position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: #2D2418; pointer-events: none; }
.kop-zoek-knop, .kop-menu, .kop-account {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  font-size: 22px; --spatie: 0.04em; color: var(--brandmerk); text-decoration: none;
}
.kop-zoek-knop { display: none; }
.kop-menu { display: none; }
.kop-account:hover, .kop-zoek-knop:hover, .kop-menu:hover { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; }
/* het mandje is de eindpaal van de lat: kopse kant, 24px hoger */
.kop-paal {
  position: relative; flex: none; align-self: stretch; margin: -12px 0; width: 160px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px;
  padding: 0 18px; border: 0; color: var(--brandmerk); text-align: right;
}
.kop-paal::before { /* de bovenkant van de paal: kops hout, een tint donkerder */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; border-radius: 2px 2px 0 0;
  background: rgb(var(--schaduw) / .14);
}
.paal-aantal { font-family: var(--f-prijs); font-size: 19px; letter-spacing: 0.08em; line-height: 1; opacity: .8; }
.paal-totaal { font-size: 34px; line-height: 1; }
.paal-totaal .eu { font-size: 0.66em; margin-right: 0.14em; vertical-align: 0.06em; }
.paal-totaal .ct { font-size: 0.62em; vertical-align: 0.58em; }
.paal-totaal, .paal-aantal { display: block; }
.paal-druk { display: inline-block; }
.kop-paal:hover { filter: brightness(.97); }
.kop-paal.dip { animation: dip .32s var(--uit); }
@keyframes dip { 0% { translate: 0 0; } 35% { translate: 0 3px; } 100% { translate: 0 0; } }
.kop-paal .wis { animation: wis .2s linear both; }
@keyframes wis { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.kop-paal.oplicht .paal-totaal { animation: oplicht .9s ease-out; }
@keyframes oplicht { 0% { color: var(--appel-tekst); } 100% { color: var(--brandmerk); } }

/* tussen 1200 en 1399: geen zoekgleuf maar ZOEK, geen ACCOUNT (die staat in het mandje) */
@media (max-width: 1399.98px) {
  .kop-account { display: none; }
  .kop-zoek input { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 0; padding: 0; opacity: 0; pointer-events: none; visibility: hidden; transition: width .24s var(--uit), opacity .15s, visibility 0s .24s; }
  .kop-zoek .loep { display: none; }
  .kop-zoek-knop { display: inline-flex; }
  .kop.zoekt .kop-zoek input { width: min(520px, 60vw); padding: 0 14px; opacity: 1; pointer-events: auto; z-index: 2; visibility: visible; transition-delay: 0s; }
  .kop.zoekt .kop-zoek-knop { visibility: hidden; }
}
/* onder 1200: telefoonlat: logo, ZOEK, de paal met het totaal, MENU */
@media (max-width: 1199.98px) {
  .kop { margin-inline: 12px; }
  .kop-lat { gap: 10px; padding-left: 10px; }
  .kop-nav { display: none; }
  .kop-logo img { height: 40px; }
  .kop-zoek { margin-left: auto; }
  .kop-menu { display: inline-flex; padding-right: 12px; }
  .kop-paal { width: 112px; padding: 0 12px; order: 3; }
  .kop-menu { order: 4; }
  .paal-aantal { display: none; }
  .paal-totaal { font-size: 30px; }
  .kop.zoekt .kop-zoek { position: absolute; inset: 6px 8px; z-index: 3; margin: 0; }
  .kop.zoekt .kop-zoek input { position: static; translate: none; width: 100%; height: 100%; }
}
@media (max-width: 379.98px) {
  .kop-lat { gap: 6px; padding-left: 6px; }
  .kop-paal { width: 92px; padding: 0 10px; }
  .paal-totaal { font-size: 26px; }
  .kop-woord, .kop-zoek-knop, .kop-menu { font-size: 22px; letter-spacing: 0.02em; }
}
@media (max-width: 359.98px) {
  .kop { margin-inline: 8px; }
  .kop-lat { gap: 2px; padding-left: 4px; }
  .kop-logo { padding: 6px 2px; margin-right: 0; }
  .kop-logo img { height: 34px; }
  .kop-paal { width: 80px; padding: 0 8px; }
  .paal-totaal { font-size: 24px; }
  .kop-zoek-knop, .kop-menu { font-size: 19px; letter-spacing: 0.01em; }
  .kop-menu { padding-right: 8px; }
}
/* menu open: ZOEK wijkt, zodat SLUITEN past op de lat */
@media (max-width: 1199.98px) {
  .menu-open .kop-zoek { display: none; }
  .menu-open .kop-paal { margin-left: auto; }
}
.kop-sluit-zoek { display: none; }
.kop.zoekt .kop-sluit-zoek {
  display: inline-flex; position: absolute; right: 8px; top: 50%; translate: 0 -50%; z-index: 4;
  min-height: 44px; align-items: center; padding: 0 8px; border: 0; background: transparent;
  font-family: var(--f-druk); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brandmerk);
}

/* ---------- menu op de telefoon: een stapel kratplanken ---------- */
.menu-sluier { position: fixed; inset: 0; z-index: 38; background: rgb(22 23 20 / .5); opacity: 0; pointer-events: none; transition: opacity .24s var(--uit); }
.menu-open .menu-sluier { opacity: 1; pointer-events: auto; }
.menu {
  position: fixed; z-index: 39; left: 12px; right: 12px; top: calc(var(--kop-boven) + var(--kop-h) + 10px);
  max-height: calc(100svh - var(--kop-h) - var(--kop-boven) - 24px); overflow-y: auto; overscroll-behavior: contain;
  display: none; flex-direction: column; gap: var(--kier); padding: 4px 4px 12px;
}
.menu-open .menu { display: flex; }
.menu .plank { padding: 0 18px; }
.menu-woord {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 26px; --spatie: 0.04em; text-decoration: none; color: var(--brandmerk);
}
.menu-woord .pijl { opacity: .7; }
.menu-tekst { display: grid; padding: 10px 18px !important; }
.menu-tekst a { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--inkt); text-decoration: none; }
.menu-tekst a:hover { text-decoration: underline; }
.menu-feit { padding: 14px 18px !important; display: grid; gap: 4px; font-size: 16px; color: var(--inkt); }
.menu-feit a { color: var(--inkt); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.menu-feit .taal { display: flex; gap: 12px; }
.menu-feit .taal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 8px; }
.menu-feit .taal a[aria-current] { text-decoration: underline; text-decoration-thickness: 2.5px; }
.menu .plank { opacity: 0; translate: 0 -14px; }
.menu-open .menu .plank { animation: plank-val .24s var(--uit) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes plank-val { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }

/* ---------- het mandje: een la uit de eindpaal ---------- */
.mandje {
  position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(440px, 100vw); height: 100dvh; max-height: none; max-width: none;
  margin: 0; padding: 0; border: 0; background: var(--toonbank); color: var(--inkt);
  display: none; flex-direction: column; box-shadow: -18px 0 40px -18px rgb(var(--schaduw) / .45);
}
.mandje[open] { display: flex; animation: la-in .3s var(--uit); }
.mandje::backdrop { background: rgb(22 23 20 / .5); animation: sluier-in .3s var(--uit); }
@keyframes la-in { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes sluier-in { from { opacity: 0; } to { opacity: 1; } }
.mandje-kop { margin: 12px 12px 0; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 8px 0 18px; }
.mandje-kop h2 { font-size: 26px; --spatie: 0.03em; }
.mandje-sluit { min-height: 44px; padding: 0 10px; border: 0; background: transparent; font-family: var(--f-druk); font-weight: 700; font-size: 22px; letter-spacing: .04em; color: var(--brandmerk); }
.mandje-sluit:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2.5px; }
.mandje-inhoud { flex: 1; overflow-y: auto; padding: 16px 20px; overscroll-behavior: contain; }
.mandje-regel { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.mandje-regel + .mandje-regel { box-shadow: 0 -1px 0 var(--toonbank-diep); }
.mandje-foto { width: 64px; height: 64px; background: var(--wit); display: grid; place-items: center; }
.mandje-foto img { width: 52px; height: 52px; object-fit: contain; }
.mandje-regel h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.mandje-regel p { font-size: 15px; color: var(--inkt-zacht); }
.mandje-rechts { display: grid; justify-items: end; gap: 6px; }
.mandje-rechts .prijs { font-size: 26px; }
.mandje-leeg { padding: 8px 0; display: grid; gap: 12px; }
.mandje-leeg strong { font-size: 20px; }
.mandje-voet { padding: 16px 20px 20px; display: grid; gap: 12px; box-shadow: 0 -1px 0 var(--toonbank-diep); }
.mandje-som { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.mandje-som .prijs { font-size: 40px; color: var(--inkt); }
.mandje-voet .knop { width: 100%; }
.mandje-voet p { font-size: 15px; color: var(--inkt-zacht); }
.mandje-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; font-weight: 600; }
.mandje-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* de vlucht: een kloon van de productfoto vliegt in een boog naar de eindpaal */
.vlucht { position: fixed; z-index: 70; pointer-events: none; margin: 0; object-fit: contain; border-radius: 2px; will-change: transform; }
.stem { position: absolute; }

/* ---------- de voet: een rij kopse kanten van kratten op de toonbank ---------- */
.voet { padding: 72px 0 40px; }
.voet-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--goot); align-items: start; }
.voet-krat { display: grid; gap: 14px; }
.voet-kops {
  min-height: 72px; display: flex; align-items: center; padding: 0 20px;
  font-size: 24px; --spatie: 0.03em;
}
.voet-kops::before { /* de handgreep in de kopse kant */
  content: ""; position: absolute; right: 18px; top: 50%; width: 46px; height: 14px; translate: 0 -50%;
  border-radius: 7px; background: rgb(var(--schaduw) / .55); box-shadow: inset 0 3px 4px rgb(0 0 0 / .45), 0 1px 0 rgb(255 255 255 / .35);
}
.voet-krat ul { display: grid; gap: 2px; padding: 0 2px; }
.voet-krat li { font-size: 16px; }
.voet-krat a { color: var(--inkt); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.voet-krat a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.voet-krat address { font-style: normal; font-size: 16px; line-height: 1.7; padding: 4px 2px 0; }
.voet-krat address a { min-height: 0; display: inline; color: var(--inkt); text-decoration: underline; text-decoration-color: rgb(22 23 20 / .35); }
.voet-taal a { min-width: 44px; justify-content: flex-start; }
.voet-onder { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: 15px; color: var(--inkt-zacht); }
.voet-onder a { color: var(--inkt-zacht); }
@media (max-width: 899.98px) {
  .voet-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 1023.98px) {
  .voet-krat a { min-height: 44px; }
  .voet-krat address a { display: inline-block; padding-block: 8px; line-height: 28px; }
}
/* smalle kopse kanten: de handgreep schuift boven de druk, zodat hij de letters nooit raakt */
@media (max-width: 599.98px) {
  .voet-kops { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 26px 16px 12px; font-size: 22px; }
  .voet-kops::before { top: 11px; left: 16px; right: auto; width: 36px; height: 10px; translate: none; border-radius: 5px; }
}

/* minder beweging: alles in zijn eindstand */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .menu-open .menu .plank { opacity: 1; translate: 0 0; }
}