:root{
  --balk:#1c1408;
  --grond:#f6f1e4;
  --rand:#2a2010;
  --rand-zacht:#cabb97;
  --gold:#c8973a;--gold-lt:#e8b86d;--goud-donker:#7a5716;
  --inkt:#241a06;--inkt-zacht:#5c4f30;--muted:#8a7c58;
  --alarm:#b03325;
  --klaar:#3d6b2e;
  --kaart:#fbf7ec;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:17px}
body{background:var(--grond);color:var(--inkt);font-family:system-ui,sans-serif;min-height:100dvh;padding:0 0 4rem}
a{color:var(--goud-donker)}
button,input{font:inherit}

/* bovenbalk */
.balk{background:linear-gradient(180deg,#241a0c,var(--balk));border-bottom:3px solid var(--gold);padding:.8rem 1rem}
.kop{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:.9rem}
.kop img{width:48px}
.kop h1{color:#faf2e2;font-size:1.45rem;line-height:1.1}
.kop small{color:#d8c9a3;font-size:1rem;font-weight:600}
.uitknop{margin-left:auto;color:#e8d9b0;text-decoration:none;font-weight:700;font-size:.95rem;
  border:1.5px solid #6b5a34;border-radius:999px;padding:.45rem .9rem;background:rgba(255,255,255,.06)}

/* tabs */
.tabs{max-width:640px;margin:0 auto;display:flex;gap:.35rem;padding:.9rem 1rem 0}
.tabs a{flex:1;min-width:0;text-align:center;text-decoration:none;color:var(--inkt-zacht);font-weight:800;font-size:1rem;
  padding:.75rem .2rem;border:2px solid var(--rand-zacht);border-radius:12px;background:#f1ead6;
  display:flex;align-items:center;justify-content:center;gap:.3rem;white-space:nowrap}
.tabs a.actief{background:#fff;color:var(--inkt);border-color:var(--rand);box-shadow:0 2px 8px rgba(42,32,16,.15)}
.badge{background:var(--gold);color:var(--inkt);font-weight:900;font-size:.85rem;border-radius:999px;padding:.05rem .45rem}

.rest{padding:1.1rem 1rem 0}
.lijst{max-width:640px;margin:0 auto}
.leeg{text-align:center;color:var(--muted);font-size:1.1rem;padding:3rem 1rem;line-height:1.5}
.melding{max-width:640px;margin:0 auto 1rem;padding:.9rem 1rem;border-radius:12px;font-weight:700;
  background:#fbe6e2;color:var(--alarm);border:2px solid var(--alarm)}

.zoek{width:100%;font-size:1.1rem;padding:.8rem 1rem;border:2px solid var(--rand-zacht);border-radius:12px;
  background:#fff;color:var(--inkt);margin-bottom:1rem}
.zoek:focus{outline:none;border-color:var(--gold)}

/* kaart per product */
.kaart{background:var(--kaart);border:1px solid #b3a479;border-radius:14px;padding:1rem .9rem 1rem;margin-bottom:.9rem;
  box-shadow:0 1px 6px rgba(42,32,16,.10)}
.kaart.weg{display:none}
.kaartkop{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.8rem}
.naamknop{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;cursor:pointer;color:var(--inkt)}
.naam{display:block;font-size:1.25rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.opm{display:block;font-size:.95rem;color:var(--muted);margin-top:.15rem}
.chip{flex:none;font-size:.85rem;font-weight:800;border-radius:999px;padding:.3rem .7rem;white-space:nowrap}
.chip.bestel{background:var(--gold);color:var(--inkt)}
.chip.onderweg{background:rgba(61,107,46,.14);color:var(--klaar)}

.plekken{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.plek{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .5rem .55rem;cursor:pointer;
  background:#fff;border:2px solid var(--rand-zacht);border-radius:12px;color:var(--inkt)}
.plek.nul{background:#f1ead6}
.plek.nul .getal{color:var(--muted)}
.pleklabel{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt-zacht)}
.getal{font-size:2.1rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}

.acties{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.4rem}
.acties.twee-knoppen{grid-template-columns:1fr 1fr}
.acties .knop{min-width:0;padding:.8rem .15rem;font-size:.9rem}
.knop{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  font-size:1rem;font-weight:800;padding:.8rem .6rem;cursor:pointer;color:var(--inkt);
  border:2px solid var(--rand);border-radius:12px;background:#fff;white-space:nowrap}
.knop.primair{background:linear-gradient(180deg,var(--gold-lt),var(--gold))}
.knop.stil{border-color:#8d8163;background:#f4eedd;color:var(--inkt-zacht)}
.knop.aan{background:var(--gold);border-color:var(--goud-donker)}
.knop.groot{width:100%;font-size:1.15rem;padding:1rem}
.knop.gevaar{border-color:var(--alarm);color:var(--alarm);background:#fff}
.knop.gevaar:active{background:var(--alarm);color:#fff}
.deelknop{width:100%;margin-bottom:.9rem}
.kaart.nieuw{background:transparent;border:2px dashed #b3a479;box-shadow:none}

/* panelen onder de knoppen */
.paneel{margin-top:1rem;padding-top:1rem;border-top:2px solid rgba(42,32,16,.2)}
.paneelkop{font-size:1.1rem;font-weight:800;margin-bottom:.7rem}
.uitleg{font-size:1.05rem;line-height:1.5;margin-bottom:.8rem}
.veldkop{display:block;font-size:.95rem;font-weight:700;color:var(--inkt-zacht);margin:.7rem 0 .3rem}
.paneel input[type=text],.paneel input[type=search],.loginkaart input[type=password],.kaart input[type=text]{
  width:100%;font-size:1.15rem;padding:.75rem .9rem;border:2px solid var(--rand-zacht);border-radius:12px;background:#fff;color:var(--inkt)}
.paneel input:focus,.loginkaart input:focus{outline:none;border-color:var(--gold)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.twee input[type=number]{width:100%;font-size:1.3rem;font-weight:800;padding:.6rem .8rem;border:2px solid var(--rand-zacht);border-radius:12px;background:#fff;text-align:center}

.richting{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.richting label,.wiekeuze label{position:relative;display:block;cursor:pointer}
.richting input,.wiekeuze input{position:absolute;opacity:0;pointer-events:none}
.richting span,.wiekeuze span{display:block;text-align:center;font-weight:800;font-size:1rem;padding:.7rem .4rem;
  border:2px solid var(--rand-zacht);border-radius:12px;background:#fff;color:var(--inkt-zacht)}
.richting input:checked+span,.wiekeuze input:checked+span{background:var(--inkt);color:#faf2e2;border-color:var(--inkt)}
.richting b{font-weight:900}

.stapper{display:grid;grid-template-columns:3.6rem 1fr 3.6rem;gap:.5rem;align-items:stretch}
.stap{font-size:1.8rem;font-weight:900;line-height:1;border:2px solid var(--rand);border-radius:12px;background:#fff;cursor:pointer;color:var(--inkt);min-height:3.4rem}
.stapper input{width:100%;text-align:center;font-size:2rem;font-weight:900;border:2px solid var(--rand-zacht);border-radius:12px;background:#fff;color:var(--inkt);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stapper input::-webkit-outer-spin-button,.stapper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stapper input:focus{outline:none;border-color:var(--gold)}
.snel{display:flex;gap:.5rem;margin-top:.6rem}
.snelknop{flex:1;font-weight:800;font-size:1rem;padding:.55rem;border:2px solid var(--rand-zacht);border-radius:999px;background:#f4eedd;color:var(--inkt-zacht);cursor:pointer}
.paneelknoppen{display:flex;gap:.5rem;margin-top:1rem}
.paneelknoppen .knop{flex:1}
.wegklink{display:block;text-align:center;margin-top:1rem;font-size:.9rem;color:var(--muted)}
.fout{margin-top:.8rem;color:var(--alarm);font-weight:700}

/* bestellijst + logboek */
.dag{display:flex;align-items:baseline;gap:.6rem;margin:1.4rem 0 .7rem}
.dag:first-child{margin-top:0}
.dag h2{font-size:1.15rem;color:var(--inkt)}
.dag::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,rgba(42,32,16,.35),transparent)}
.voorraadregel{font-size:1rem;color:var(--inkt-zacht);margin:-.3rem 0 .8rem}
.logregel{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid rgba(42,32,16,.15);font-size:1.05rem;line-height:1.4}
.tijd{flex:none;font-weight:900;font-variant-numeric:tabular-nums;width:3.2rem;color:var(--inkt-zacht)}
.logtekst{flex:1;min-width:0}
.logwie{display:block;font-size:.85rem;color:var(--muted)}

/* login */
.loginpagina{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}
.loginkaart{width:100%;max-width:420px;background:#fff;border:2px solid var(--rand);border-radius:16px;padding:2rem 1.6rem;text-align:center;
  box-shadow:0 3px 14px rgba(42,32,16,.15)}
.loginkaart img{width:110px;margin-bottom:1rem}
.loginkaart h1{font-size:1.5rem;margin-bottom:1.2rem}
.loginkaart .veldkop{text-align:left;font-size:1.05rem}
.wiekeuze{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.loginkaart .knop.groot{margin-top:1.4rem}

@media (min-width:600px){
  .acties .knop{font-size:1.05rem}
}