:root{
  --grond:#E4EFEA; --papier:#FFFFFF; --inkt:#1D3A2C; --inkt-zacht:#4F6B5D;
  --dooier:#F4B41A; --bruin:#B06F43; --lijn:#C9DCD3; --vlak:#F3F8F5;
  --goed:#2E8B57; --goed-vlak:#DDF1E4; --fout:#B3412E; --kop:#1D3A2C; --kop-tekst:#FFF6E6;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --grond:#122219; --papier:#1B2F24; --inkt:#EAF3EE; --inkt-zacht:#A9C2B5;
    --dooier:#F7C23E; --bruin:#D79A6E; --lijn:#2E4638; --vlak:#223A2D;
    --goed:#5CC98A; --goed-vlak:#1F3E2C; --fout:#F08A76; --kop:#0E1B14; --kop-tekst:#FFF6E6;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--grond);color:var(--inkt);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
h1,h2,h3{font-family:Caprasimo,Georgia,serif;font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--bruin)}
.mono{font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--bruin);outline-offset:2px}

/* kop */
.kopbalk{background:var(--kop);color:var(--kop-tekst);padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;display:flex;align-items:center;gap:12px}
.kopbalk svg.merk{width:40px;height:40px;flex:none}
.kopbalk strong{font-family:Caprasimo,Georgia,serif;font-weight:400;font-size:1.35rem;line-height:1;display:block}
.kopbalk small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dooier)}
.kopbalk .rechts{margin-left:auto}

.pagina{max-width:520px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:20px}
.kaart{background:var(--papier);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px}
.vraag{font-weight:800;font-size:1.05rem}
.zacht{color:var(--inkt-zacht)}
.klein{font-size:.85rem}

/* iconen */
.tegel{width:52px;height:52px;border-radius:16px;background:var(--vlak);color:var(--inkt);display:grid;place-items:center;flex:none}
.tegel svg{width:34px;height:34px}
.tegel.klein{width:40px;height:40px;border-radius:12px}
.tegel.klein svg{width:26px;height:26px}

/* producten */
.product{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px;border:2px solid var(--lijn);border-radius:18px}
.product.gekozen{border-color:var(--dooier)}
.product .naam{font-weight:800;line-height:1.25}
.product .prijs{font-weight:700;font-size:.9rem}
.product .uitleg{grid-column:1/-1;font-size:.9rem;color:var(--inkt-zacht);line-height:1.45}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:40px;height:40px;border-radius:50%;border:none;background:var(--vlak);font-size:1.35rem;font-weight:700;cursor:pointer;line-height:1}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:2ch;text-align:center;font-weight:800;font-size:1.1rem}

/* keuzes */
.keuzes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.keuze{border:2px solid var(--lijn);background:var(--papier);border-radius:16px;padding:12px;text-align:left;cursor:pointer}
.keuze b{display:block}
.keuze span{font-size:.85rem;color:var(--inkt-zacht)}
.keuze[aria-pressed="true"]{border-color:var(--dooier);background:color-mix(in srgb,var(--dooier) 14%,var(--papier))}
.info{display:flex;gap:12px;align-items:center;background:var(--vlak);border-radius:16px;padding:12px 14px}
.info svg{width:30px;height:30px;flex:none;color:var(--bruin)}
.info b{display:block}
.info span{font-size:.88rem;color:var(--inkt-zacht)}

/* velden */
.veld{display:flex;flex-direction:column;gap:4px}
.veld label{font-size:.85rem;font-weight:600;color:var(--inkt-zacht)}
.veld input,.veld textarea,.veld select{font:inherit;padding:12px 14px;border-radius:14px;border:2px solid var(--lijn);background:var(--papier);color:var(--inkt);width:100%;min-width:0}
.veld textarea{resize:vertical;min-height:84px;font-size:.95rem}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--dooier)}
.rij{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}
.fouten{background:color-mix(in srgb,var(--fout) 14%,var(--papier));color:var(--inkt);border-radius:14px;padding:10px 14px;font-size:.9rem}
.fouten li{margin-left:1em}
.fouten ul{margin:0;padding:0}

/* knoppen */
.knop{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;border:none;border-radius:18px;padding:16px;font-weight:800;font-size:1.08rem;cursor:pointer;background:var(--dooier);color:#1D3A2C;text-decoration:none;text-align:center}
.knop:disabled{background:var(--vlak);color:var(--inkt-zacht);cursor:not-allowed}
.knop.rustig{background:var(--vlak);color:var(--inkt);font-size:.98rem;padding:13px}
.knop.klein{width:auto;padding:8px 14px;font-size:.88rem;border-radius:12px}
.linkknop{background:none;border:none;color:var(--bruin);font-weight:700;cursor:pointer;padding:4px;text-decoration:underline}
.plakbalk{position:sticky;bottom:0;padding:12px 0 calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--grond) 70%,transparent)}
.korting{font-size:.9rem;font-weight:700;background:color-mix(in srgb,var(--dooier) 22%,var(--papier));border-radius:12px;padding:8px 12px;text-align:center}

/* chips en status */
.chip{font-size:.8rem;font-weight:700;background:var(--vlak);border-radius:99px;padding:3px 10px;white-space:nowrap;display:inline-flex;gap:5px;align-items:center}
.chip svg{width:16px;height:16px}
.chip.goed{background:var(--goed-vlak);color:var(--goed)}
.chip.wacht{background:color-mix(in srgb,var(--bruin) 18%,var(--papier));color:var(--bruin)}
.chip.geel{background:color-mix(in srgb,var(--dooier) 28%,var(--papier))}
.stappen{display:flex;gap:6px;flex-wrap:wrap}

.bon{background:var(--vlak);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:.95rem}
.bon div{display:flex;justify-content:space-between;gap:10px}

.laag{position:fixed;inset:0;z-index:20;background:var(--grond);overflow-y:auto}
.laag .pagina{min-height:100%;justify-content:center}
.midden{text-align:center;align-items:center}
.draai{width:36px;height:36px;border:4px solid var(--lijn);border-top-color:var(--dooier);border-radius:50%;animation:draai .8s linear infinite;margin:0 auto}
@keyframes draai{to{transform:rotate(360deg)}}
.melding{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--inkt);color:var(--papier);padding:10px 18px;border-radius:99px;font-weight:700;font-size:.9rem;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100% - 32px);text-align:center}

/* tom */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--vlak);border-radius:14px;padding:4px;gap:4px}
.tab{border:none;background:transparent;color:var(--inkt-zacht);padding:10px 2px;border-radius:10px;font-weight:700;font-size:.86rem;cursor:pointer;position:relative}
.tab .teller{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:99px;background:var(--dooier);color:#1D3A2C;font-size:.72rem;line-height:18px}
.bericht{background:var(--papier);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;border:2px solid transparent}
.bericht.nieuw{border-color:var(--dooier)}
.bericht.rond{background:var(--vlak)}
.bericht .kop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bericht .tekst{white-space:pre-wrap;overflow-wrap:anywhere}
.bericht .acties2{display:flex;gap:12px;flex-wrap:wrap}
.tab[aria-selected="true"]{background:var(--papier);color:var(--inkt);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.datums{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.datums .keuze{padding:8px 14px;border-radius:99px;font-weight:700;font-size:.9rem;white-space:nowrap;flex:none}
.totaal{background:var(--kop);color:var(--kop-tekst);border-radius:22px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:end}
.totaal .groot{font-family:Caprasimo,Georgia,serif;font-size:2.6rem;line-height:1;color:var(--dooier)}
.totaal small{opacity:.85;font-size:.85rem}
.totaal .rechts{text-align:right;font-size:.88rem;line-height:1.55}
.totaal .winst{font-weight:900;font-size:1.05rem;color:var(--dooier)}
.totaal .perproduct{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.totaal .perproduct span{background:rgba(255,255,255,.12);border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:700}
.voortgang{display:flex;justify-content:space-between;font-size:.85rem;color:var(--inkt-zacht);font-weight:600}
.bestelling{background:var(--papier);border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:8px 10px;border:2px solid transparent}
.bestelling.klaar{opacity:.65}
.bestelling.klaar .wie{text-decoration:line-through}
.wie{font-weight:800}
.waar{font-size:.9rem;color:var(--inkt-zacht)}
.statussen{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.items{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.acties{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vink{border:2px solid var(--lijn);background:var(--papier);border-radius:12px;padding:9px 4px;font-weight:700;font-size:.88rem;cursor:pointer;display:flex;gap:5px;align-items:center;justify-content:center}
.vink[aria-pressed="true"]{background:var(--goed);border-color:var(--goed);color:#fff}
.vink svg{width:16px;height:16px}
.leeg{color:var(--inkt-zacht);text-align:center;padding:24px 0}
.groep h4{margin:0 0 8px;font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--bruin)}
.instelling{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.instelling:last-child{border-bottom:none}
.instelling b{display:block}
.instelling span.uitleg{font-size:.82rem;color:var(--inkt-zacht)}
.tijden{display:flex;gap:6px;align-items:center}
.tijden input{font:inherit;padding:6px 8px;border-radius:10px;border:2px solid var(--lijn);background:var(--papier);color:var(--inkt);width:6.2em}
.schakel{width:52px;height:30px;border-radius:99px;border:none;background:var(--lijn);position:relative;cursor:pointer;flex:none;transition:background .2s}
.schakel::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.schakel[aria-checked="true"]{background:var(--goed)}
.schakel[aria-checked="true"]::after{transform:translateX(22px)}
.prodrij{border:2px solid var(--lijn);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--papier)}
.prodrij.open{border-color:var(--dooier)}
.prodkop{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.prodkop span{font-size:.85rem;color:var(--inkt-zacht)}
.icoonkeuze{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.icoonkeuze button{border:2px solid var(--lijn);background:var(--papier);border-radius:14px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-size:.7rem;font-weight:700}
.icoonkeuze button svg{width:30px;height:30px}
.icoonkeuze button[aria-pressed="true"]{border-color:var(--dooier);background:color-mix(in srgb,var(--dooier) 16%,var(--papier))}
.rekensom{background:var(--vlak);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:3px;font-size:.9rem}
.rekensom div{display:flex;justify-content:space-between}
.rekensom .streep{border-top:2px solid var(--lijn);padding-top:6px;margin-top:4px;font-weight:900}
.linkinvoer{display:grid;grid-template-columns:84px 1fr 36px;gap:6px;align-items:center;margin-bottom:6px}
.linkinvoer input{font:inherit;font-size:.85rem;padding:9px 10px;border-radius:10px;border:2px solid var(--lijn);background:var(--papier);color:var(--inkt);width:100%;min-width:0}
.linkinvoer .weg{border:none;background:var(--vlak);color:var(--inkt-zacht);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:1.1rem}
.controlerij{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--lijn);font-size:.88rem}
.controlerij small{display:block;color:var(--inkt-zacht);font-size:.76rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}