/*
 * stijl.css — V7-bestelapp.
 *
 * HET IDEE: dit ís een menukaart, dus het ziet eruit als een menukaart.
 * De eerste opzet zette elk gerecht in een eigen wit doosje met een schaduwtje. Dat is de vorm die
 * elke webshop heeft, het kost enorm veel hoogte (zes regels op een telefoon) en het zegt niets
 * over waar je bent. Een gedrukte kaart doet het al honderd jaar anders: een lijst, naam links,
 * prijs rechts, stippellijn ertussen. Dat is compacter (veertien regels), meteen herkenbaar, en het
 * maakt de prijs -- waar je op besluit -- het rustpunt van elke regel.
 *
 * Daar komt één ding uit voort dat deze app zijn eigen maakt: DE PRIJS IS DE KNOP. Op een kaart
 * kijk je naar de prijs en dan besluit je. Hier tik je er ook op. Geen los plusje ernaast dat niets
 * betekent.
 *
 * De rest is bewust stil gehouden: papierwit als grond, haarlijnen als structuur, en één
 * accentkleur die de zaak zelf mag zetten (kassa.menuappCSS -> --accent).
 */

:root {
	/* De huisstijl van Broodbode, zoals op broodbode.nl: crème als grond, teal als hoofdkleur,
	   amber voor de kleine accenten en brick-rood voor wat misgaat. Niets hiervan is verzonnen --
	   het is hun eigen palet, alleen consequent doorgevoerd. */
	--papier:   #eef0e2;   /* crème, iets lichter dan het merk-crème zodat kaarten eruit springen */
	--grond:    #e7ead6;   /* het merk-crème: balken, prijzen, bon */
	--bon:      #e2e6d0;   /* de bon zelf, een tint dieper */
	--inkt:     #241f20;
	--dof:      #5f6455;
	--zacht:    #8d9280;
	--lijn:     #d2d7bd;
	--lijnDun:  #dee2cb;
	--accent:   #2b554e;   /* teal: alles wat een handeling is */
	--accentDonker: #1d3b36;
	--amber:    #c9821f;
	--amberZacht: #f7e6c8;
	--goed:     #2f7d4f;
	--fout:     #922726;   /* brick */
	--bode:     #cf0025;   /* het rood uit hun eigen logo (bb-logo.svg) -- staat verder nergens in
	                           deze stijl, hier bewust ÉÉN keer gebruikt: het tapeje op de startfoto's. */

	--rond:     12px;
	--rondKlein: 8px;

	--kop: 'FrankRuhl', Georgia, 'Times New Roman', serif;
	--tekst: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bonletter: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}


/* De twee letters van het merk, van onze eigen server. Frank Ruhl Libre (serif) voor de namen en
   koppen, Karla voor de lopende tekst -- precies zoals op broodbode.nl. Samen 68 kB; dat is de
   prijs van een eigen gezicht, en ze laden allebei variabel dus er is maar één bestand per letter. */
@font-face {
	font-family: 'FrankRuhl';
	src: url('frankruhl.woff2') format('woff2-variations');
	font-weight: 300 900; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Karla';
	src: url('karla.woff2') format('woff2-variations');
	font-weight: 200 800; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--papier); color: var(--inkt);
	font: 15px/1.45 var(--tekst);
	font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.overslaan { position: absolute; left: -9999px; background: var(--inkt); color: #fff; padding: 10px 16px; z-index: 100; }
.overslaan:focus { left: 0; top: 0; }

/* ============================== kop ==============================
   Scrollt gewoon weg. Alleen de categoriebalk blijft plakken; die heb je nodig, de naam van de
   zaak niet -- die weet je inmiddels wel. */
/* De kop staat in het teal van het merk en eindigt in de kartelrand uit hun eigen huisstijl
   (bb-kartel.svg). Diezelfde gescheurde lijn komt verderop terug bij de bon; dat is geen toeval
   maar precies waarom dit ontwerp bij Broodbode past. */
.zaak {
	background: var(--accent); color: var(--grond);
	padding: 20px 18px 16px; padding-top: calc(18px + env(safe-area-inset-top));
	position: relative; margin-bottom: 34px;
}
.zaak::after {
	/* De tanden moeten ONDER de kop uitsteken, op het crème -- binnen de kop zou teal op teal staan
	   en dan zie je er niets van. Vandaar bottom:-25px en de kop 25px hoger eindigen.
	   Hoogte is 2px groter dan de 26px van het plaatje zelf: dat geeft 3px overlap in plaats van 1px
	   met de kop erboven (het plaatje blijft op 'bottom center / auto 26px' staan, dus de extra
	   ruimte komt vanzelf aan de kant van de rechte rand, waar toch al teal-op-teal staat). Bij 1px
	   kon een sub-pixel afrondingsverschil tussen de kop-achtergrond en dit element een dun lijntje
	   van de paginakleur laten doorschemeren, precies op de naad. */
	content: ''; position: absolute; left: 0; right: 0; bottom: -25px; height: 28px;
	background: url('bb-kartel.svg') repeat-x bottom center / auto 26px;
	transform: scaleY(-1);   /* de tanden moeten naar BENEDEN wijzen, aan de kop vast */
	pointer-events: none;
}
.zaak h1 { color: var(--grond); }
.zaak p { color: rgba(231,234,214,.72); }
.zaakLogo { border-radius: 0; background: none; }
.zaakBoven { color: var(--amberZacht) !important; }
/* Met .zaak ervoor, zodat dit altijd wint van de latere, algemene .modus-stijl hieronder --
   die twee losse regels (zelfde specificiteit) lieten de teal linktekst hier eerst gewoon op de
   teal kop staan, onleesbaar. */
.zaak .modus { border-top-color: rgba(231,234,214,.22); color: rgba(231,234,214,.8); }
.zaak .modus .modusNu { color: var(--grond); }
.zaak .modusWissel { color: var(--amberZacht); }
.zaakBinnen { display: flex; gap: 12px; align-items: center; max-width: 720px; margin: 0 auto; }
.zaakLogo { width: 38px; height: 48px; object-fit: contain; flex: none; }
.zaakTekst { min-width: 0; }
.zaak h1 {
	font-family: var(--kop); font-weight: 700;
	font-size: clamp(25px, 6.8vw, 33px); line-height: 1.06; letter-spacing: -.012em;
	margin: 0; overflow-wrap: anywhere;
}
.zaak p { margin: 4px 0 0; color: var(--zacht); font-size: 13px; }

.modus {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	max-width: 720px; margin: 14px auto 0; padding: 8px 0 0;
	border-top: 1px solid var(--lijnDun); font-size: 13px; color: var(--dof);
}
.modusNu { font-weight: 600; color: var(--inkt); }
.modusNu::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--goed); margin-right: 7px; vertical-align: 1px; }
.modusAdres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modusWissel { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; }

/* ============================== hoofd ============================== */
main { max-width: 720px; margin: 0 auto; padding: 0 18px 128px; }
.melding { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--rondKlein); background: #fdf3ec; border: 1px solid #f0d7c4; font-size: 14px; }
.melding-fout { background: #fceceb; border-color: #f0c8c4; color: var(--fout); }
.melding-goed { background: #edf6f0; border-color: #c9e2d3; color: var(--goed); }
h2.sectie { font-family: var(--kop); font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 26px 0 10px; }

/* ---------- de startpagina: afhalen of bezorgen ----------
   Dit is het eerste wat iemand ziet, dus hier mag de zaak zich even voorstellen. De twee keuzes
   zijn geen formulierknoppen maar twee panelen met een tekening, de tijden van vandaag erbij, en
   genoeg vlees om met een duim te raken. */
.zaakHero { text-align: center; padding-bottom: 4px; }
.zaakHero .zaakBinnen { flex-direction: column; gap: 14px; }
.zaakHero .zaakLogo { width: 62px; height: 78px; object-fit: contain; box-shadow: none; }
.zaakHero h1 { font-size: clamp(28px, 8vw, 38px); }
.zaakBoven {
	display: block; font-family: var(--bonletter); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; margin-bottom: 7px; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}

/* ---------- de startfoto's: een prikbord, geen banner ----------
   Deze app is verder overal "dit ís een bonnetje" (scheurrand, stippellijn, bonletter). Dezelfde
   gedachte hier: geen brede foto met een gradient eroverheen, maar een paar échte productfoto's
   (dezelfde shots die ook bij de artikelen op de kaart staan) die schuin op het teal geprikt
   lijken, met een stukje tape in het rood uit het eigen logo. Ze drijven bij het scrollen elk in
   een ander tempo mee -- één rustig, samenhangend moment, verder blijft de rest van de pagina stil
   staan. Bij prefers-reduced-motion (zie onderaan dit bestand) blijft het bij de schuine foto's
   zonder het meebewegen; app.js zet de scroll-listener dan niet eens aan. */
.zaakHeroFoto .zaakBinnen, .zaakHeroFoto .modus { position: relative; z-index: 2; }
/* overflow:hidden hoort hier, NIET op .zaak zelf -- .zaak::after is de kartel-scheurrand die met
   opzet ONDER de kop uitsteekt (bottom:-25px); overflow:hidden op .zaak zou die wegknippen. */
.heroFotos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.heroFoto {
	position: absolute; width: 96px; height: 96px; object-fit: cover; border-radius: var(--rondKlein);
	box-shadow: 0 10px 22px -8px rgba(15,12,8,.45);
	opacity: .92; will-change: transform;
}
.heroFoto1 { top: -6px; left: 4%; transform: rotate(-9deg); }
.heroFoto2 { top: 14px; right: 5%; transform: rotate(7deg); width: 108px; height: 108px; }
.heroFoto3 { bottom: -34px; left: 58%; transform: rotate(-5deg); display: none; }
/* Het rood uit het eigen logo, één keer, als een dun randje om de op-één-na-grootste foto -- geen
   ::before/::after hier: die renderen niet op een <img> (een "replaced element"), dus het eerdere
   opgeplakte tapeje kwam nooit in beeld. Een box-shadow-ring staat wél gewoon op het element zelf. */
.heroFoto2 { box-shadow: 0 0 0 3px var(--papier), 0 0 0 5px var(--bode), 0 10px 22px -8px rgba(15,12,8,.45); }

@media (min-width: 460px) {
	.heroFoto3 { display: block; width: 86px; height: 86px; }
}
@media (min-width: 620px) {
	/* Op een brede kop staat de naam op één regel; .heroFoto3 stond eerst op left:60% en dat viel
	   middenin die regel. Nu alle drie aan een rand, buiten de gecentreerde tekstkolom (die zelf
	   max-width:720px heeft), zodat niks ooit over de naam/adres heen kan vallen. */
	.heroFoto1 { width: 132px; height: 132px; top: -10px; left: 6%; }
	.heroFoto2 { width: 144px; height: 144px; top: 6px; right: 7%; }
	.heroFoto3 { width: 100px; height: 100px; bottom: 6px; top: auto; left: auto; right: 2%; }
}
/* De bonnetjes-kartel onderaan de kop blijft het laatste woord: geen foto mag eroverheen hangen. */
.zaakHeroFoto::after { z-index: 3; }

.kiesRij { display: grid; gap: 12px; margin: 26px 0 8px; }
@media (min-width: 620px) { .kiesRij { grid-template-columns: 1fr 1fr; } }
.kiesKaart {
	display: flex; align-items: center; gap: 16px; width: 100%;
	text-align: left; color: inherit; cursor: pointer;
	background: var(--papier); border: 1.5px solid var(--lijn); border-radius: 16px;
	padding: 16px 18px; text-decoration: none;
	transition: border-color .16s, transform .16s, box-shadow .16s;
}
.kiesKaart:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(28,23,16,.45); }
.kiesTekst { min-width: 0; }
.kiesKaart b { font-family: var(--kop); font-weight: 700; font-size: 21px; letter-spacing: -.02em; display: block; color: var(--inkt); }
/* LET OP de volgorde: .kiesTekst span moet vóór .kiesBeeld staan en even zwaar zijn, anders kleurt
   de algemene span-regel de tekening ook grijs. Dat ging hier eerst mis. */
.kiesTekst span { display: block; color: var(--dof); font-size: 13.5px; line-height: 1.4; }
.kiesKaart .kiesBeeld { flex: none; width: 62px; height: 62px; color: var(--accent); }
.kiesKaart .kiesBeeld svg { width: 100%; height: 100%; }
.kiesTijd {
	margin-top: 5px; font-family: var(--bonletter); font-size: 11px; letter-spacing: .06em;
	text-transform: uppercase; color: #8a5a0c !important;
}
.kiesKaart.dicht { opacity: .55; pointer-events: none; }
.kiesKaart.dicht .kiesBeeld { color: var(--zacht); }
.kiesKaart.dicht b::after { content: ' · gesloten'; color: var(--fout); font-size: 15px; font-weight: 600; }

/* ---------- de filiaallijst op de kale domeinnaam ---------- */
.filialen { display: grid; gap: 8px; margin: 4px 0 8px; }
@media (min-width: 620px) { .filialen { grid-template-columns: 1fr 1fr; } }
.filiaal {
	display: block; text-decoration: none; color: inherit;
	background: var(--papier); border: 1.5px solid var(--lijn); border-radius: var(--rond);
	padding: 13px 15px; transition: border-color .14s, transform .14s;
}
.filiaal:hover { border-color: var(--accent); transform: translateY(-1px); }
.filiaalNaam { display: block; font-family: var(--kop); font-weight: 700; font-size: 17px; }
.filiaalAdres { display: block; color: var(--dof); font-size: 13.5px; margin-top: 1px; }
.filiaalWat {
	display: block; margin-top: 5px; font-family: var(--bonletter); font-size: 10.5px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}

/* ---------- categoriebalk ---------- */
.catBalk {
	position: sticky; top: 0; z-index: 30; margin: 14px -18px 0; padding: 7px 0;
	background: color-mix(in srgb, var(--papier) 90%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--lijn);
}
.catBalk ul { display: flex; gap: 5px; margin: 0; padding: 0 18px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.catBalk ul::-webkit-scrollbar { display: none; }
.catBalk a {
	display: block; white-space: nowrap; text-decoration: none;
	font-size: 13px; font-weight: 600; letter-spacing: .01em;
	padding: 6px 11px; border-radius: 99px; color: var(--dof);
}
.catBalk a.nu { background: var(--accent); color: var(--grond); }

/* ============================== DE KAART ==============================
   Een lijst, geen dozen. Naam links, prijs rechts, stippellijn ertussen. */
.catKop { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 6px; scroll-margin-top: 56px; }
.catKop h2 {
	font-family: var(--kop); font-weight: 700; font-size: 17px; letter-spacing: .04em;
	text-transform: uppercase; margin: 0; flex: none; color: var(--accent);
}
.catKop::after { content: ''; flex: 1; height: 2px; background: var(--amberZacht); border-radius: 2px; }
.catKop p { flex-basis: 100%; margin: 4px 0 0; color: var(--dof); font-size: 13.5px; }
.tussenkop { font-family: var(--kop); font-weight: 600; font-size: 14px; color: var(--accent); margin: 16px 0 2px; }

.items { display: block; }

.regel {
	display: grid; grid-template-columns: 1fr auto; align-items: baseline;
	column-gap: 10px; width: 100%; text-align: left; cursor: pointer;
	background: none; border: 0; border-bottom: 1px solid var(--lijnDun);
	padding: 9px 0; color: inherit;
}
.regel:last-child { border-bottom: 0; }
.regel.metFoto { grid-template-columns: 62px 1fr auto; column-gap: 13px; }
.regelFoto {
	grid-row: span 2; width: 62px; height: 62px; border-radius: 10px; object-fit: cover;
	align-self: center; background: var(--grond);
	/* Veel artikelfoto's zijn productshots op een zwarte ondergrond. Die zweven als postzegels op
	   het papier; een warm randje en een zachte gloed eronder zetten ze in iets in plaats van erop. */
	box-shadow: 0 0 0 1px var(--lijn), 0 2px 6px rgba(28,23,16,.10);
}
.regelKop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.regelNaam { font-weight: 500; font-size: 15px; line-height: 1.3; }
.regelVul { flex: 1; border-bottom: 1.5px dotted #ddd8cc; transform: translateY(-3px); min-width: 14px; }
.regelAlg { flex: none; font-size: 11.5px; letter-spacing: .5px; opacity: .85; }

/* De prijs is de knop. Daarom heeft hij een rand, een eigen vlak en een duimformaat. */
.regelPrijs {
	grid-column: -1; align-self: center; flex: none; white-space: nowrap;
	font-family: var(--kop); font-weight: 700; font-size: 14px; letter-spacing: -.01em;
	color: var(--inkt); background: var(--grond); border: 0; border-radius: 99px;
	padding: 6px 12px; box-shadow: inset 0 0 0 1px rgba(231,220,198,.9); transition: background .12s, color .12s;
}
/* De + verschijnt pas als je de regel aanraakt: op een kaart hoort de prijs te staan, niet een rij
   plusjes. Op een telefoon is er geen hover, dus daar is de hele regel het doelwit -- dat is groot
   genoeg en dat weet iedereen inmiddels van een bestelapp. */
.regelPrijs::after { content: ''; }
@media (hover: hover) {
	.regel:hover .regelPrijs::after { content: ' +'; }
}
.regel:hover .regelPrijs, .regel:active .regelPrijs { background: var(--accent); border-color: var(--accent); color: #fff; }
.regelBij { grid-column: 1 / -2; color: var(--dof); font-size: 13px; line-height: 1.4; margin-top: 3px; }
.regel.metFoto .regelBij { grid-column: 2 / -2; }
/* Een merkteken achter de naam, geen zin op een eigen regel. "Vandaag op" is informatie, geen
   alarm -- en het artikel is voor morgen gewoon te bestellen. */
.regelTag {
	flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #8a5a0c; background: var(--amberZacht); border-radius: 4px; padding: 2px 6px;
	position: relative; top: -1px;
}
/* De kijk-kaart: geen knop, dus ook niet de vorm van een knop. De prijs is gewoon een prijs, en
   staat dan ook op dezelfde regel als de naam in plaats van in een eigen vlak eronder. */
.regel.kijk { cursor: default; padding: 7px 0; }
.regel.kijk .regelPrijs {
	background: none; box-shadow: none; padding: 0; font-size: 15px;
	align-self: baseline; letter-spacing: 0;
}
.regel.kijk:hover .regelPrijs { background: none; color: var(--inkt); }
.regel.kijk:hover .regelPrijs::after { content: ''; }
.regel.op .regelNaam { text-decoration: line-through; color: var(--zacht); }
.regel.op .regelPrijs { color: var(--zacht); }
.regel.op .regelFoto { filter: grayscale(1); opacity: .55; }

/* ============================== het bonnetje ============================== */
.bon {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	transform: translateY(150%); transition: transform .3s cubic-bezier(.2,.9,.3,1); pointer-events: none;
}
.bon.bonAan { transform: translateY(0); pointer-events: auto; }
/* Onderin steekt de bon net boven de rand uit -- met dezelfde scheurrand als op de mandjespagina,
   zodat het zichtbaar hetzelfde vel papier is dat je omhoog trekt. */
/* Onderin steekt de bon net boven de rand uit, mét de scheurrand -- zichtbaar hetzelfde vel dat je
   omhoog trekt. In de accentkleur, want dit is ook de weg naar afrekenen en die moet je vinden
   zonder zoeken; op papierkleur was hij te bescheiden voor wat hij doet. */
.bonKnop {
	position: relative; display: flex; align-items: center; gap: 12px;
	max-width: 692px; margin: 0 auto; background: var(--accent); color: #fff;
	text-decoration: none; padding: 15px 16px 14px;
	box-shadow: 0 14px 34px -12px rgba(140,38,18,.7);
}
.bonKnop::before {
	content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 9px;
	background:
		linear-gradient(-45deg, var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x,
		linear-gradient(45deg,  var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x;
}
.bonAantal { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff;
	display: grid; place-items: center; font-family: var(--bonletter); font-weight: 700; font-size: 12.5px; }
.bonWoord { font-family: var(--bonletter); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.bonTotaal { margin-left: auto; font-family: var(--kop); font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.bon.stoot .bonKnop { animation: stoot .34s ease; }
@keyframes stoot { 40% { transform: translateY(-5px); } }
.vliegt {
	position: fixed; z-index: 60; pointer-events: none;
	font-family: var(--kop); font-weight: 700; font-size: 14px;
	background: var(--inkt); color: var(--papier); padding: 5px 10px; border-radius: 99px;
	transition: transform .5s cubic-bezier(.4,0,.6,1), opacity .5s;
}

/* ============================== bladen ============================== */
.sluier { position: fixed; inset: 0; z-index: 50; background: rgba(20,19,15,.4); opacity: 0; transition: opacity .22s; }
.sluier.aan { opacity: 1; }
.blad {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
	background: var(--papier); border-radius: 18px 18px 0 0; max-height: 90vh;
	display: flex; flex-direction: column;
	transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.9,.3,1);
	box-shadow: 0 -20px 50px -20px rgba(20,19,15,.35);
}
.blad.aan { transform: translateY(0); }
@media (min-width: 700px) {
	.blad { left: 50%; right: auto; width: 540px; transform: translate(-50%, 101%); }
	.blad.aan { transform: translate(-50%, 0); }
}
.bladKop { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--lijn); }
.bladKop h2 { font-family: var(--kop); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: -.02em; }
.bladDicht { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: none; font-size: 15px; cursor: pointer; }
.bladLijf { padding: 16px 18px; overflow-y: auto; }
.bladVoet { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lijn); background: var(--grond); }

.vraag { margin-bottom: 22px; }
.vraag h3 { font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 2px; }
.vraag .vraagBij { color: var(--zacht); font-size: 12.5px; margin: 0 0 8px; }
.optie { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--lijnDun); cursor: pointer; }
.optie:last-child { border-bottom: 0; }
.optie input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.optie .optieNaam { flex: 1; font-size: 15px; }
.optie .optiePrijs { color: var(--dof); font-family: var(--bonletter); font-size: 12.5px; }
.optie.op { opacity: .55; }
.optie.op .optieNaam { text-decoration: line-through; }

.stap { display: flex; align-items: center; gap: 2px; border: 1px solid var(--lijn); border-radius: 6px; padding: 1px; }
.stap button { width: 30px; height: 30px; border-radius: 5px; cursor: pointer; border: 0; background: none; font-size: 17px; line-height: 1; }
.stap button:disabled { opacity: .3; cursor: default; }
.stap .stapNu { min-width: 26px; text-align: center; font-family: var(--bonletter); font-weight: 700; font-size: 15px; }

/* ============================== DE BON ==============================
 * Dit is het hart van het ontwerp. Wat je bestelt wordt straks een kassabon; hier is hij dat al.
 * Een eigen vel papier op de kaart, met gescheurde randen, de letter van een bonprinter voor alles
 * wat cijfer is, en een dubbele regel boven het totaal. Het is de enige plek waar deze app iets
 * nabootst -- en het is precies wat de gast even later in zijn hand krijgt.
 */
.bonVel {
	background: var(--bon); margin: 18px 0 0; padding: 0 18px;
	filter: drop-shadow(0 1px 0 rgba(20,19,15,.06)) drop-shadow(0 14px 26px rgba(20,19,15,.07));
}
/* De scheurrand: een rij driehoekjes, boven én onder, met de kleur van de kaart eronder. */
.bonScheur { height: 9px; background:
	linear-gradient(-45deg, var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x,
	linear-gradient(45deg,  var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x; }
.bonScheur.onder { transform: scaleY(-1); }

.bonHoofd {
	font-family: var(--bonletter); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--dof); text-align: center; padding: 16px 0 4px;
}
.bonZaak {
	font-family: var(--kop); font-weight: 800; font-size: 17px; letter-spacing: -.02em;
	text-align: center; padding-bottom: 12px; border-bottom: 1px dashed #cdc7b5; margin-bottom: 4px;
}

.mandLijst { list-style: none; margin: 0; padding: 0; }
.mandRegel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed #ded8c6; }
.mandRegel:last-child { border-bottom: 0; }
.mandAantal { font-family: var(--bonletter); font-size: 13px; font-weight: 700; color: var(--dof); }
.mandNaam { font-weight: 500; font-size: 15px; }
.mandExtra { color: var(--dof); font-size: 12.5px; margin-top: 2px; }
.mandPrijs { font-family: var(--bonletter); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mandKnoppen { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.mandWeg { background: none; border: 0; color: var(--zacht); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 3px 0; }

.telling { margin: 4px 0 0; padding-top: 10px; border-top: 3px double var(--inkt); }
.telRegel { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
	font-family: var(--bonletter); font-size: 12.5px; letter-spacing: .02em; }
.telRegel .telNaam { flex: none; text-transform: uppercase; color: var(--dof); }
.telRegel .telVul { flex: 1; border-bottom: 1px dotted #cdc7b5; transform: translateY(-3px); min-width: 16px; }
.telRegel .telBedrag { flex: none; font-weight: 700; }
.telRegel.telTotaal { font-size: 15px; padding: 8px 0 2px; }
.telRegel.telTotaal .telNaam { color: var(--inkt); font-weight: 700; }
.telRegel.telTotaal .telBedrag { font-family: var(--kop); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.telRegel.telKorting .telBedrag { color: var(--goed); }
.bonVoet { font-family: var(--bonletter); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--zacht); text-align: center; padding: 14px 0 16px; }

/* De kortingscode hoort niet naast de bestelknop om aandacht te vechten. Achter één regel tekst. */
.uitklap { margin: 16px 0 0; }
.uitklap summary { cursor: pointer; color: var(--dof); font-size: 13.5px; list-style: none; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::before { content: '+ '; font-family: var(--bonletter); }
.uitklap[open] summary::before { content: '– '; }
.uitklap .veld { margin-top: 10px; }

/* ============================== formulier ============================== */
.veld { margin-bottom: 14px; }
.veld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--inkt); }
.veld .bij { font-weight: 400; color: var(--zacht); }
.invoer { width: 100%; padding: 12px 13px; border-radius: var(--rondKlein); border: 1.5px solid var(--lijn); background: #fff; font-size: 16px; }
.invoer:focus { border-color: var(--inkt); outline: none; }
.veldRij { display: grid; gap: 12px; }
@media (min-width: 560px) { .veldRij { grid-template-columns: 1fr 1fr; } }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

form > .knop, .blok + .knop { margin-top: 24px; }
.knop {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 15px 18px; border: 0; border-radius: 99px;
	background: var(--accent); color: #fff; font-family: var(--kop);
	font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--accentDonker); }
.knop:disabled { background: var(--zacht); cursor: default; }
.knop.stil { background: none; color: var(--inkt); border: 1.5px solid var(--lijn); }
.knop.stil:hover { border-color: var(--inkt); background: none; }

/* Op het afrekenscherm dezelfde structuur als op de kaart: een kopje op een regel, en daaronder
   de velden. Geen dozen -- die zetten alles op afstand en maken het formulier langer dan het is. */
.blokKop {
	display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px;
	font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.blokKop::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }
.blok { margin-bottom: 4px; }
.kaartBlok { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px; margin: 14px 0; background: #fff; }

/* ============================== klaar ============================== */
.klaar { text-align: center; padding: 46px 0 20px; }
.klaar .klaarBon { font-family: var(--kop); font-weight: 800; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.03em; margin: 0 0 8px; }
.klaar p { color: var(--dof); max-width: 34ch; margin: 0 auto 8px; }

/* ============================== voet ============================== */
.voet { border-top: 1px solid var(--lijn); margin-top: 36px; padding: 20px 18px 108px; text-align: center; color: var(--zacht); font-size: 13px; }
.voet nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.voet a { color: var(--dof); text-decoration: none; }
.voet a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}