:root{
  --navy:#0E1F42; --navy-deep:#081430; --gold:#2B7BB9; --gold-deep:#1D5A8A;
  --bg:#F5F3EE; --kaart:#FFFFFF; --ink:#1B2422; --ink-soft:#565B63; --lijn:#E3DED3;
  --rood:#B3261E; --rood-zacht:#FBE9E7; --groen:#1E6B3A; --groen-zacht:#E6F2EA; --geel-zacht:#E8F1F9;
  --radius:14px; --schaduw:0 6px 24px rgba(8,20,48,.08);
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
[hidden]{display:none!important;}

/* Knoppen */
.knop{border:1px solid var(--lijn);background:var(--kaart);border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;min-height:44px;}
.knop:hover{border-color:var(--navy);}
.knop.hoofd{background:var(--navy);border-color:var(--navy);color:#fff;}
.knop.hoofd:hover{background:var(--navy-deep);}
.knop.goud{background:var(--gold);border-color:var(--gold);color:#fff;}
.knop.wa{background:#1F7A45;border-color:#1F7A45;color:#fff;}
.knop.gevaar{color:var(--rood);border-color:#E9C2BE;}
.knop:disabled{opacity:.5;cursor:default;}

/* Pincode */
#slot{min-height:100vh;display:grid;place-items:center;padding:16px;}
.slot-kaart{background:var(--kaart);border-radius:20px;box-shadow:var(--schaduw);padding:32px 28px;width:min(360px,100%);text-align:center;display:grid;gap:12px;}
.slot-kaart img{margin:0 auto;border-radius:14px;}
.slot-kaart h1{margin:0;font-size:1.4rem;color:var(--navy);}
.slot-kaart p{margin:0;color:var(--ink-soft);}
.slot-kaart input{text-align:center;font-size:1.4rem;letter-spacing:.3em;padding:12px;border:1px solid var(--lijn);border-radius:12px;}
.fout{color:var(--rood);min-height:1.2em;margin:0;font-size:.92rem;}

/* Balk */
.balk{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;padding:10px 16px 0;padding-top:max(10px,env(safe-area-inset-top));}
.balk-binnen{max-width:860px;margin:0 auto 10px;display:flex;gap:12px;align-items:center;justify-content:space-between;}
.merk{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:.01em;}
.merk span{color:var(--gold);}
.balk .knop.hoofd{background:var(--gold);border-color:var(--gold);}
.balk-knoppen{display:flex;gap:8px;align-items:center;}
.knop.icoon{width:44px;padding:0;background:transparent;color:#fff;border-color:rgba(255,255,255,.35);font-size:1.25rem;}
.knop.icoon:hover{border-color:#fff;}
.knop.balk-knop{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);padding:8px 14px;}
.knop.balk-knop:hover{border-color:#fff;}
@media (max-width:600px){ .balk-binnen{flex-wrap:wrap;} .knop.balk-knop{padding:8px 10px;} }

/* Kassa, klanten, factuur */
dialog.paneel.smal{width:min(460px,calc(100% - 24px));}
.prijs-veld.groot{font-size:1.4rem;font-weight:700;color:var(--ink);}
.prijs-veld.groot input{font-size:1.4rem;font-weight:700;}
.dag-kies{display:flex;flex-direction:row;align-items:center;gap:10px;max-width:260px;margin-bottom:8px;}
.k-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:10px 0 16px;}
.k-tegel{background:var(--bg);border-radius:12px;padding:10px 12px;display:grid;gap:2px;}
.k-tegel span{font-size:.8rem;color:var(--ink-soft);}
.k-tegel b{font-size:1.15rem;color:var(--navy);}
.k-tegel.totaal{background:var(--navy);}
.k-tegel.totaal span,.k-tegel.totaal b{color:#fff;}
#kassa h3,.k-form h3{margin:14px 0 6px;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.k-tabel tr.som td{font-weight:800;border-top:2px solid var(--navy);}
.k-tabel tr.verschil td{color:var(--rood);font-weight:700;}
.k-tabel tr.ok td{color:var(--groen);font-weight:700;}
.k-form{background:var(--geel-zacht);border:1px solid #EBD9B4;border-radius:14px;padding:12px 14px;margin-top:12px;display:grid;gap:10px;}
.k-form h3{margin-top:0;}
.kl-lijst{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;}
.kl-lijst button{width:100%;border:1px solid var(--lijn);background:#fff;border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;min-height:48px;}
.kl-lijst button:hover{border-color:var(--navy);}
.kl-lijst span{color:var(--ink-soft);font-size:.9rem;}
.d-knoppen select{width:auto;min-height:44px;}
#zoek{width:100%;border:0;border-radius:12px;padding:11px 14px;background:rgba(255,255,255,.12);color:#fff;}
#zoek::placeholder{color:rgba(255,255,255,.65);}
.tabs{max-width:860px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;}
.tabs button{flex:1;border:0;background:transparent;color:rgba(255,255,255,.75);padding:12px 8px;font-weight:600;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;}
.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--gold);}
.tabs b{display:inline-block;min-width:22px;padding:0 6px;margin-left:4px;border-radius:999px;background:rgba(255,255,255,.18);font-size:.8rem;}

/* Lijst */
main{max-width:860px;margin:0 auto;padding:14px 16px 40px;}
.melding{background:var(--geel-zacht);border:1px solid #EBD9B4;border-radius:12px;padding:10px 14px;margin:0 0 12px;}
.lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.bon{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;cursor:pointer;}
.bon:hover{border-color:var(--navy);}
.bon .nr{grid-row:span 2;font-weight:800;font-size:1.05rem;color:var(--navy);background:var(--bg);border-radius:10px;padding:8px 10px;text-align:center;min-width:70px;}
.bon .naam{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bon .info{color:var(--ink-soft);font-size:.9rem;}
.bon .tel{font-weight:400;color:var(--ink-soft);font-size:.88rem;margin-left:6px;}
.bon .loc{color:var(--navy);}
.zoek-kop{color:var(--ink-soft);font-size:.9rem;padding:0 4px;}
.zoek-kop.klant-kaart{background:var(--geel-zacht);border:1px solid #EBD9B4;border-radius:var(--radius);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink);font-size:1rem;}
.voetnoot{text-align:center;color:var(--ink-soft);font-size:.85rem;margin:18px 0 0;}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;box-shadow:var(--schaduw);font-weight:600;max-width:calc(100% - 32px);}
.bon .rechts{grid-row:span 2;text-align:right;font-size:.88rem;display:grid;gap:4px;justify-items:end;}
.label{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;background:var(--bg);color:var(--ink-soft);}
.label.laat{background:var(--rood-zacht);color:var(--rood);}
.label.vandaag{background:var(--geel-zacht);color:var(--gold-deep);}
.label.ok{background:var(--groen-zacht);color:var(--groen);}
.leeg{text-align:center;color:var(--ink-soft);padding:40px 0;}

/* Panelen */
dialog.paneel{border:0;padding:0;border-radius:20px;width:min(640px,calc(100% - 24px));max-height:calc(100% - 24px);box-shadow:0 20px 60px rgba(8,20,48,.3);background:var(--kaart);color:var(--ink);}
dialog.paneel::backdrop{background:rgba(8,20,48,.45);}
.paneel form{display:flex;flex-direction:column;max-height:calc(100vh - 24px);}
.paneel-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--lijn);position:sticky;top:0;background:var(--kaart);z-index:1;}
.paneel-kop h2{margin:0;font-size:1.15rem;color:var(--navy);}
.sluit{border:0;background:var(--bg);border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:1rem;}
.paneel-inhoud{padding:16px 20px;overflow:auto;}
.paneel-voet{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--lijn);}
@media (max-width:600px){
  dialog.paneel{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;margin:0;}
  .paneel form{max-height:100vh;height:100%;}
  .paneel-inhoud{flex:1;}
}

/* Formulier */
fieldset{border:0;margin:0 0 18px;padding:0;}
legend{font-weight:700;color:var(--navy);margin-bottom:8px;padding:0;}
legend small{font-weight:400;color:var(--ink-soft);}
label{display:grid;gap:4px;font-size:.88rem;color:var(--ink-soft);flex:1;}
input:not([type=checkbox]),select,textarea{width:100%;border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);font-size:1rem;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent;}
.rij{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.rij > *{flex:1 1 180px;}
.vink{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:1rem;flex:0 0 auto;}
.vink input{width:20px;height:20px;}
.keuzes{display:flex;flex-wrap:wrap;gap:8px;}
.keuzes button{border:1px solid var(--lijn);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600;min-height:40px;}
.keuzes button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.keuzes.klein button{padding:6px 12px;min-height:36px;font-size:.9rem;}
.stuk-toevoegen{display:flex;gap:8px;margin-bottom:8px;}
.stuk-toevoegen input{flex:1;}
.stukken{width:100%;border-collapse:collapse;font-size:.95rem;}
.stukken td{padding:6px 4px;border-bottom:1px solid var(--lijn);vertical-align:middle;}
.stukken tfoot td{border:0;font-weight:800;padding-top:10px;}
.stukken input{padding:6px 8px;}
.stukken .aantal{width:64px;}
.stukken .prijs{width:90px;}
.bedrag{text-align:right;white-space:nowrap;}
.weg{border:0;background:none;color:var(--rood);font-size:1.1rem;cursor:pointer;padding:4px 8px;}

.stukken select{padding:6px 4px;font-size:.88rem;width:auto;}
.stukken .prijs::placeholder{color:var(--ink-soft);font-style:italic;}
.stukken tr.groep td{border-bottom:0;padding-top:12px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.volgt{color:var(--gold-deep);font-style:italic;}
/* Stukken in het formulier: per stuk twee regels, zodat de naam ook op een gsm leesbaar blijft. */
#f-tabel,#f-tabel tbody,#f-tabel tfoot{display:block;}
#f-regels tr{display:grid;grid-template-columns:auto 1fr 1fr 40px;grid-template-areas:"naam naam naam weg" "aantal beh prijs weg";gap:6px;padding:8px 0;border-bottom:1px solid var(--lijn);align-items:center;}
#f-regels tr.net{animation:net 1.2s ease-out;}
@keyframes net{from{background:var(--geel-zacht);}to{background:transparent;}}
#f-regels td{border:0;padding:0;}
#f-regels td:nth-child(1){grid-area:aantal;}
#f-regels td:nth-child(2){grid-area:naam;}
#f-regels td:nth-child(3){grid-area:beh;}
#f-regels td:nth-child(4){grid-area:prijs;}
#f-regels td:nth-child(5){grid-area:weg;}
#f-regels select,#f-regels .prijs{width:100%;max-width:none;}
.teller{display:flex;align-items:center;gap:4px;}
.teller button{width:38px;height:38px;flex:0 0 38px;border-radius:999px;border:1px solid var(--lijn);background:#fff;font-size:1.2rem;line-height:1;cursor:pointer;}
.teller button:active{background:var(--bg);}
#f-regels .teller .aantal{width:52px;text-align:center;padding:6px 2px;-moz-appearance:textfield;}
.teller .aantal::-webkit-inner-spin-button,.teller .aantal::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.prijs-veld{display:flex;align-items:center;gap:4px;color:var(--ink-soft);}
.weg{min-width:40px;min-height:40px;}

/* Stukken toevoegen: tegels om op te tikken */
.sug-titel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:10px 0 6px;}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.tegel{border:1px solid var(--lijn);background:#fff;border-radius:12px;padding:8px 12px;text-align:left;cursor:pointer;min-height:54px;display:grid;gap:2px;align-content:center;font-weight:600;}
.tegel small{font-weight:400;color:var(--ink-soft);font-size:.8rem;}
.tegel:hover{border-color:var(--navy);}
.tegel:active{background:var(--bg);}
.tegels.nieuw .tegel{border-style:dashed;}
#f-suggesties{margin-bottom:10px;}

/* Gekende klanten in het formulier */
.klant-sug{margin-top:10px;display:grid;gap:6px;}
.klant-knop{border:1px solid var(--lijn);background:var(--geel-zacht);border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;min-height:48px;}
.klant-knop span{color:var(--ink-soft);font-size:.9rem;}

/* Prijslijst aanpassen */
dialog.paneel.breed{width:min(820px,calc(100% - 24px));}
#p-zoek{margin:8px 0 4px;}
.p-groep{margin-top:16px;}
.p-groep h3{margin:0 0 6px;font-size:1rem;color:var(--navy);}
.p-groep h3 small{font-weight:400;color:var(--ink-soft);font-size:.82rem;}
.p-rij{display:grid;gap:6px;align-items:center;margin-bottom:6px;}
.p-rij.k2{grid-template-columns:1fr 92px 92px 40px;}
.p-rij.k1{grid-template-columns:1fr 92px 40px;}
.p-rij.k0{grid-template-columns:1fr 40px;}
.p-rij .prijs{text-align:right;}
.p-kop{margin-bottom:2px;}
.p-kop span{font-size:.75rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.p-kop span:not(:first-child){text-align:right;}
.knop.klein{min-height:36px;padding:6px 14px;font-size:.9rem;}
#f-tabel tfoot tr{display:flex;justify-content:space-between;padding-top:10px;font-weight:800;}
#f-tabel tfoot td{border:0;padding:0;}
@media (max-width:600px){ .paneel-voet{flex-wrap:wrap;} }

/* Detail */
.d-blok{margin-bottom:16px;}
.d-blok h3{margin:0 0 6px;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.d-blok p{margin:2px 0;}
.d-knoppen{display:flex;flex-wrap:wrap;gap:8px;}
.tijdlijn{color:var(--ink-soft);font-size:.88rem;}
.d-melding{background:var(--geel-zacht);border:1px solid #EBD9B4;border-radius:12px;padding:10px 14px;margin:0 0 14px;font-weight:600;}
#d-ophalen.licht{background:var(--groen-zacht);border-radius:14px;padding:12px;margin-left:-12px;margin-right:-12px;}
.paneel form.d-locatie{display:flex;flex-direction:row;gap:8px;max-height:none;}
#instellingen .vink + p, #instellingen .vink + p + .d-knoppen, #instellingen .vink ~ .d-knoppen{margin-top:10px;}
.d-locatie input{flex:1;}
.d-factuur{background:var(--geel-zacht);border-radius:10px;padding:8px 12px;font-weight:600;margin:0 0 8px;}
.d-factuur.ok{background:var(--groen-zacht);color:var(--groen);}
.paneel form.d-factuurgegevens{display:grid;gap:8px;max-height:none;}

/* Aanraakscherm (Instellingen > Scherm, of automatisch): alles groter om met de vinger op te tikken */
.aanraak body{font-size:17px;}
.aanraak .knop{min-height:56px;padding:14px 22px;font-size:1.02rem;}
.aanraak .knop.klein{min-height:48px;}
.aanraak .knop.icoon{width:56px;}
.aanraak .knop.balk-knop{padding:12px 16px;}
.aanraak .tabs button{padding:16px 10px;font-size:1.02rem;}
.aanraak .keuzes{gap:10px;}
.aanraak .keuzes button{min-height:54px;padding:12px 20px;font-size:1rem;}
.aanraak .keuzes.klein button{min-height:48px;}
.aanraak input:not([type=checkbox]),.aanraak select,.aanraak textarea{padding:14px 16px;font-size:1.08rem;min-height:54px;}
.aanraak .stukken input{padding:10px;}
.aanraak .vink{gap:12px;min-height:48px;}
.aanraak .vink input{width:30px;height:30px;}
.aanraak .teller button{width:54px;height:54px;flex-basis:54px;font-size:1.4rem;}
.aanraak #f-regels .teller .aantal{width:60px;font-size:1.15rem;}
.aanraak #f-regels tr{grid-template-columns:auto 1fr 1fr 54px;gap:8px;padding:10px 0;}
.aanraak .weg{min-width:54px;min-height:54px;font-size:1.3rem;}
.aanraak .vlek-knop{min-height:48px;padding:10px 18px;font-size:1rem;}
.aanraak .vlek-veld button{min-width:48px;min-height:48px;}
.aanraak .tegels{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.aanraak .tegel{min-height:72px;padding:10px 14px;font-size:1.02rem;}
.aanraak .sluit{width:52px;height:52px;font-size:1.15rem;}
.aanraak .bon{padding:18px 20px;}
.aanraak .kl-lijst button,.aanraak .klant-knop{min-height:58px;}
.aanraak .k-rij{min-height:60px;}
.aanraak .k-tegel b{font-size:1.3rem;}
.aanraak .paneel-voet{flex-wrap:wrap;}
.cijferpad{display:none;}
.aanraak .cijferpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin-top:4px;}
.cijferpad button{min-height:62px;border:1px solid var(--lijn);background:#fff;border-radius:14px;font-size:1.5rem;font-weight:700;color:var(--navy);cursor:pointer;touch-action:manipulation;}
.cijferpad button:active{background:var(--navy);color:#fff;}


.actie-melding{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--geel-zacht);color:var(--gold-deep);font-weight:700;}
/* Kassa: tik op een regel om ze te verbeteren */
.k-hint{background:var(--bg);border-radius:10px;padding:8px 12px;color:var(--ink-soft);font-size:.9rem;margin:0 0 4px;}
.k-tabel tr.k-wijzig td{padding:0;}
.k-rij{width:100%;display:flex;align-items:center;gap:10px;padding:8px 6px;min-height:48px;border:0;background:transparent;text-align:left;cursor:pointer;border-radius:10px;font:inherit;color:inherit;}
button.k-rij:hover,button.k-rij:active{background:var(--geel-zacht);}
.k-rij span{flex:1;min-width:0;}
.k-rij small{color:var(--ink-soft);}
.k-rij b{white-space:nowrap;}
.k-rij i{font-style:normal;color:var(--gold-deep);width:24px;text-align:center;}
.k-tabel tr.som .k-rij,.k-tabel tr.som td{font-weight:800;}
.k-lijst{list-style:none;margin:0;padding:0;}
.k-lijst li{border-bottom:1px solid var(--lijn);}
.k-correcties{margin:0;padding:0 0 0 18px;color:var(--ink-soft);font-size:.9rem;display:grid;gap:4px;}
.k-correcties span{font-weight:700;color:var(--ink);}
a{color:var(--navy);}

/* Afdruk: een bon van maximaal 72 mm breed (de printbreedte van een bonnenprinter van 80 mm; op A4 in het midden),
   met onderaan een label om af te knippen en aan de mand te hangen. Enkel zwart-wit. */
.groep-keuze{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;}
.groep-keuze button{font:inherit;padding:8px 14px;border-radius:999px;border:1px solid var(--lijn,#ccc);background:transparent;cursor:pointer;}
.groep-keuze button[aria-pressed="true"]{background:var(--ink,#1B2422);color:#fff;border-color:transparent;}
.aanraak .groep-keuze button{padding:12px 18px;font-size:1.05rem;}
.pl-knoppen{display:grid;gap:10px;}
.pl-knoppen .knop{text-align:left;padding:14px 16px;font-size:1.05rem;}
.p-rij.k3{grid-template-columns:1fr repeat(3,80px) 36px;}
/* Tickets: één per zak, mand of hanger. */
.t-aantal{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.t-aantal button{font:inherit;font-size:1.3rem;width:44px;height:44px;border-radius:12px;border:1px solid var(--lijn,#ccc);background:transparent;cursor:pointer;}
.t-aantal b{min-width:90px;text-align:center;}
.t-rij{display:grid;grid-template-columns:32px 1fr auto auto;gap:8px;align-items:center;margin-bottom:6px;}
#f-tickets .t-rij{grid-template-columns:32px 1fr;}
.t-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy,#0E1F42);color:#fff;font-weight:700;font-size:.85rem;}
.t-status{font-size:.85rem;color:var(--ink-soft,#666);white-space:nowrap;}
.t-rij.ok .t-nr{background:#1E8E4E;}
.t-rij.ok .t-status{color:#1E8E4E;font-weight:700;}
.aanraak .t-rij input{min-height:48px;}
/* Instellingen: printer per soort bonnetje. */
.i-sub{margin:14px 0 6px;font-size:.95rem;}
.i-printer-rij{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,1.4fr) auto;gap:8px;align-items:center;margin-bottom:8px;}
.i-printer-rij select{min-width:0;}
@media (max-width:560px){.i-printer-rij{grid-template-columns:1fr auto;}.i-printer-rij span{grid-column:1/-1;}}
/* Vaste locaties. */
.loc-lijst{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.loc-chip{display:inline-flex;align-items:center;gap:4px;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid var(--lijn,#ccc);}
.loc-chip button{border:0;background:transparent;cursor:pointer;color:#B23A3A;font-size:.9rem;padding:2px 6px;}
.aanraak .loc-chip{padding:9px 8px 9px 14px;}
#f-loc-snel button.bezet{border-style:dashed;}
#f-loc-snel button i{font-style:normal;font-size:.75rem;font-weight:700;background:#2B7BB9;color:#fff;border-radius:999px;padding:1px 6px;margin-left:6px;}
/* Was per kilo en kilo's per week. */
.f-kilo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--geel-zacht);}
.f-kilo input{width:110px;}
.kl-weken h4{margin:10px 0 6px;}
.kl-week{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--lijn,#ddd);font-size:.92rem;}
.btw-regel{font-size:.8rem;font-weight:400;color:var(--ink-soft,#666);}
.p-ander{min-height:1.2em;font-weight:600;}
.pt-blok{margin-bottom:18px;}
.pt-blok h3{display:flex;align-items:center;gap:8px;}
.pt-rij{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--lijn,#ddd);}
.pt-rij small{display:block;color:var(--ink-soft,#666);font-size:.85rem;}
.pt-knoppen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.korting-veld{display:inline-flex;align-items:center;gap:2px;margin-left:6px;font-size:.85rem;color:var(--ink-soft,#666);}
.korting-veld input{width:44px;padding:4px;text-align:right;}
.f-korting-rij input{width:70px;text-align:right;}
.f-korting-rij select{width:auto;margin-left:4px;}
.korting-tag{font-size:.8em;font-weight:700;color:#1E6B3A;}
#afdruk{display:none;}
.ix-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto auto;gap:6px;margin-bottom:8px;align-items:center;}
.ix-knop{width:44px;padding:0;}
#f-regels td.vlek-td{grid-column:1 / -1;}
.vlek-knop{border:1px dashed var(--lijn);background:transparent;color:var(--ink-soft);border-radius:999px;padding:4px 12px;font-size:.85rem;cursor:pointer;}
.vlek-knop:hover{border-color:var(--rood);color:var(--rood);}
.vlek-veld{display:flex;align-items:center;gap:6px;color:var(--rood);font-weight:700;}
.vlek-aantal{display:flex;align-items:center;gap:4px;white-space:nowrap;font-weight:600;}
.vlek-aantal input{width:64px;flex:none!important;}
.vlek-veld input{flex:1;border:1px solid var(--rood);background:var(--rood-zacht);border-radius:10px;padding:6px 10px;}
.vlek-veld button{border:0;background:transparent;color:var(--ink-soft);font-size:1rem;cursor:pointer;padding:4px 8px;}
.vlek-tag{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:999px;background:var(--rood-zacht);color:var(--rood);font-size:.82rem;font-weight:700;}
.vlek-uitleg{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--rood-zacht);color:var(--rood);font-size:.9rem;font-weight:600;}
.ix-rij input{border:1px solid var(--lijn);border-radius:10px;padding:9px 10px;min-height:44px;width:100%;background:var(--kaart);}
@media (max-width:560px){.ix-rij{grid-template-columns:1fr auto auto;}.ix-rij .ix-woorden{grid-column:1 / -1;grid-row:2;}}
@media print{
  /* Geen paginamarge: dan drukt de browser geen datum, titel, adres of paginanummer mee. De witrand zit in #afdruk. */
  @page{margin:0;}
  html,body{background:#fff!important;}
  body > *:not(#afdruk){display:none!important;}
  #afdruk{display:block;width:100%;max-width:72mm;margin:0;padding:5mm 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#000;font:9.5pt/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  #afdruk b{font-weight:700;}
  .pr-streepjes{display:block;height:12mm;max-width:100%;margin:2.5mm auto 0;}
  .pr-label .pr-streepjes{height:10mm;}
  .pr-klein{font-size:8pt;color:#000;}

  /* Klein bonnetje (bonprinter, 72 mm, enkel zwart) */
  .pr-bon{break-inside:avoid;}
  .pr-kop{text-align:center;}
  .pr-kop img{display:block;width:15mm;height:15mm;margin:0 auto 1mm;filter:grayscale(1) contrast(1.6);}
  .pr-merk{font-size:15pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;}
  .pr-slogan{font-size:7pt;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-top:.8mm;}
  .pr-adres{font-size:7.5pt;margin-top:1.5mm;}
  .pr-titel{display:flex;align-items:center;gap:2.5mm;font-size:9pt;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin:3.5mm 0 2mm;}
  .pr-titel::before,.pr-titel::after{content:"";flex:1;border-top:.4mm solid #000;}
  .pr-nr{background:#000;color:#fff;border-radius:2mm;padding:1.5mm 0 2mm;text-align:center;font-size:28pt;font-weight:800;letter-spacing:.05em;line-height:1.05;}
  .pr-nr span{display:block;font-size:7pt;font-weight:600;letter-spacing:.25em;text-transform:uppercase;margin-bottom:.5mm;}
  .pr-info{width:100%;border-collapse:collapse;margin:3mm 0 2.5mm;}
  .pr-info th{text-align:left;font-weight:400;font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em;width:19mm;vertical-align:top;padding:1mm 2mm 1mm 0;white-space:nowrap;border-bottom:.2mm dotted #000;}
  .pr-info td{padding:1mm 0;border-bottom:.2mm dotted #000;}
  .pr-klaar{border:.6mm solid #000;border-radius:2mm;padding:1.5mm 2.5mm;text-align:center;}
  .pr-klaar span{display:block;font-size:7pt;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
  .pr-klaar b{font-size:12pt;font-weight:800;}
  .pr-groep-kop{font-size:7.5pt;font-weight:800;text-transform:uppercase;letter-spacing:.12em;border-bottom:.4mm solid #000;margin:3.5mm 0 1mm;padding-bottom:.6mm;}
  .pr-lijst{width:100%;border-collapse:collapse;}
  .pr-lijst td{padding:.8mm 0;vertical-align:top;border-bottom:.2mm dotted #000;}
  .pr-lijst td.n{width:8mm;font-weight:800;}
  .pr-lijst td.n::after{content:"×";font-weight:400;margin-left:.5mm;}
  .pr-mand{font-size:8.5pt;font-style:italic;padding:.8mm 0;}
  .pr-telling{text-align:right;font-size:8pt;font-weight:700;margin-top:1mm;}
  .pr-stukken{width:100%;border-collapse:collapse;margin:2mm 0 1mm;}
  .pr-stukken td{padding:.9mm 0;border-bottom:.2mm dotted #000;vertical-align:top;}
  .pr-stukken tfoot td{border-bottom:0;border-top:.4mm solid #000;font-weight:800;font-size:10.5pt;padding-top:1.5mm;}
  .pr-stukken .r{text-align:right;white-space:nowrap;padding-left:2mm;}
  .pr-stukprijs{font-size:7.5pt;}
  .pr-groep td{font-size:7.5pt;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding-top:2.5mm!important;border-bottom:.4mm solid #000!important;}
  .pr-totaal{display:flex;justify-content:space-between;align-items:baseline;background:#000;color:#fff;border-radius:2mm;padding:2mm 2.5mm;margin-top:2mm;}
  .pr-totaal span{font-size:8pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
  .pr-totaal b{font-size:14pt;font-weight:800;}
  .pr-betaling{margin:2.5mm 0;padding:1.5mm;border:.4mm dashed #000;border-radius:2mm;text-align:center;font-size:9.5pt;font-weight:700;}
  .pr-opm{margin:2.5mm 0;padding:1.5mm 2mm;border-left:.8mm solid #000;font-size:8.5pt;}
  .pr-portaal{margin:2mm 0;text-align:center;font-size:8pt;}
  .pr-voet{margin-top:3mm;padding-top:2mm;border-top:.3mm solid #000;text-align:center;font-size:7.5pt;line-height:1.5;}
  .pr-voet b{font-size:8.5pt;}
  .pr-knip{margin:5mm 0 3mm;border-top:.3mm dashed #000;padding-top:1mm;text-align:center;font-size:7.5pt;}
  .pr-label{border:.6mm solid #000;border-radius:2mm;padding:3mm;text-align:center;break-inside:avoid;}
  .pr-label-nr{font-size:30pt;font-weight:800;letter-spacing:.04em;line-height:1;}
  .pr-label-naam{font-size:14pt;font-weight:700;margin-top:1.5mm;overflow-wrap:anywhere;}
  .pr-label-info{font-size:9pt;margin-top:1mm;}
  .pr-label-loc{font-size:10pt;font-weight:700;margin-top:1mm;}
  .pr-label-opm{font-size:8.5pt;margin-top:1.5mm;font-style:italic;}

  /* Dagoverzicht */
  #afdruk.a4-zoom{zoom:1.55;padding:7.75mm 0;margin:0 auto;}
  .pr-dag-datum{text-align:center;font-size:10pt;margin:1mm 0 2mm;}
  .pr-dag .pr-merk{text-align:center;}
  .pr-klein-tabel td{font-size:8pt;}
  .pr-factuurvraag{font-size:8.5pt;padding:1.5mm 0;border-bottom:.2mm dotted #000;break-inside:avoid;}

  /* Groot op A4: een volle pagina in de huisstijl, met onderaan de prijslijst */
  #afdruk.a4{max-width:none;padding:12mm;box-sizing:border-box;}
  #afdruk.a4{color:#1B2422;font:10pt/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
  .a4-blad{break-inside:avoid;}
  .a4-kop{display:flex;justify-content:space-between;align-items:center;gap:6mm;padding-bottom:3mm;border-bottom:1.2mm solid #0E1F42;}
  .a4-merk{display:flex;align-items:center;gap:3.5mm;}
  .a4-merk img{width:14mm;height:14mm;}
  .a4-naam{font-size:18pt;font-weight:800;color:#0E1F42;letter-spacing:.01em;line-height:1.05;}
  .a4-slogan{font-size:7.5pt;font-weight:700;color:#1D5A8A;letter-spacing:.2em;text-transform:uppercase;margin-top:1mm;}
  .a4-zaak{text-align:right;font-size:8pt;color:#565B63;line-height:1.5;}
  .a4-titelrij{display:flex;justify-content:space-between;align-items:flex-end;margin:3.5mm 0 2.5mm;}
  .a4-soort{font-size:9pt;font-weight:800;color:#1D5A8A;letter-spacing:.24em;text-transform:uppercase;}
  .a4-nr{font-size:22pt;font-weight:800;color:#0E1F42;line-height:1.05;}
  .a4-code .pr-streepjes{height:12mm;margin:0;}
  .a4-vakken{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3mm;}
  .a4-vak{border:.3mm solid #E3DED3;border-radius:2.5mm;padding:2mm 3.5mm;font-size:9.5pt;}
  .a4-vak h4,.a4-opm h4{margin:0 0 1mm;font-size:7pt;font-weight:700;color:#565B63;letter-spacing:.14em;text-transform:uppercase;}
  .a4-accent{background:#0E1F42;border-color:#0E1F42;color:#fff;}
  .a4-accent h4{color:#9CC7E8;}
  .a4-accent b{font-size:12.5pt;}
  .a4-totaal b{white-space:nowrap;}
  .a4-subtotaal,.pr-subtotaal{display:flex;justify-content:space-between;}
  .a4-subtotaal{margin-left:auto;width:70mm;font-size:9.5pt;padding:.6mm 0;}
  .pr-subtotaal{font-size:9pt;}
  .a4-btw{text-align:right;font-size:9pt;margin-top:3mm;color:#333;}
  .a4-sub{margin:5mm 0 2mm;font-size:10pt;color:#1D5A8A;letter-spacing:.12em;text-transform:uppercase;}
  .a4-vliegtuig{border-color:#1D5A8A;border-width:.5mm;}
  .a4-vliegtuig b{font-size:14pt;letter-spacing:.04em;}
  .vr-ongeteld{display:block;font-size:7pt;color:#7a2b2b;}
  .a4-tabel{width:100%;border-collapse:collapse;margin-top:4mm;font-size:9.5pt;}
  .a4-tabel th{background:#0E1F42;color:#fff;font-size:7pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:1.5mm 3mm;}
  .a4-tabel th:first-child{border-radius:2mm 0 0 2mm;}
  .a4-tabel th:last-child{border-radius:0 2mm 2mm 0;}
  .a4-tabel td{padding:.7mm 3mm;border-bottom:.2mm solid #E3DED3;vertical-align:top;}
  .a4-tabel .r{text-align:right;white-space:nowrap;}
  .a4-tabel .a4-n{width:16mm;text-align:center;font-weight:700;}
  .a4-groep td{padding-top:2.5mm!important;font-size:7.5pt;font-weight:800;color:#1D5A8A;letter-spacing:.14em;text-transform:uppercase;border-bottom:.4mm solid #2B7BB9;}
  /* Duidelijk welke dienst: grote labels bij het bonnummer en een stevige kop per dienst in de tabel. */
  .a4-diensten{display:flex;gap:2mm;margin-top:2mm;}
  .a4-dienst{display:inline-flex;align-items:center;gap:1.5mm;padding:1.2mm 3.5mm;border:.5mm solid #0E1F42;border-radius:2mm;font-size:12pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0E1F42;}
  .a4-dienst i{font-style:normal;font-size:13pt;}
  .a4-dienst.d-droogkuis{background:#0E1F42;color:#fff;}
  .a4-dienst.d-was{background:#E8F1F9;}
  tr.a4-groep td{padding:3mm 0 1.2mm!important;border-bottom:.6mm solid #0E1F42;}
  tr.a4-groep td span{font-size:11pt;color:#0E1F42;letter-spacing:.1em;}
  tr.a4-groep td span i{font-style:normal;margin-right:1.5mm;}
  tr.a4-groep td small{float:right;font-size:8.5pt;color:#333;letter-spacing:.04em;text-transform:none;font-weight:700;}
  .a4-zacht{color:#565B63;font-style:italic;}
  .a4-tabel tfoot td{border-bottom:0;border-top:.5mm solid #0E1F42;font-weight:700;}
  .a4-totaal{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;width:85mm;margin:3mm 0 0 auto;background:#0E1F42;color:#fff;border-radius:2.5mm;padding:2.5mm 4mm;}
  .a4-totaal span{font-size:8pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
  .a4-totaal b{font-size:16pt;font-weight:800;}
  .a4-onder{display:flex;gap:4mm;margin-top:4mm;}
  .a4-betaling{flex:1;border:.3mm solid #E3DED3;border-radius:2.5mm;padding:2mm 4mm;font-size:10.5pt;}
  .a4-betaling small{font-size:8.5pt;color:#565B63;}
  .a4-betaald{color:#1E6B3A;font-weight:800;}
  .a4-opm{flex:1.3;border-left:1mm solid #2B7BB9;padding:1mm 0 1mm 3.5mm;font-size:9.5pt;}
  .a4-portaal{text-align:center;font-size:9pt;margin:3mm 0 0;}
  .a4-dank{text-align:center;font-size:9.5pt;font-weight:600;color:#0E1F42;margin:2.5mm 0 0;}
  /* Mandticket na een A4-bon (browser): smal en gecentreerd op een eigen pagina */
  .a4 .pr-ticket{max-width:72mm;margin:0 auto;color:#000;font-size:9.5pt;}

  /* Korte klantenbon */
  .pr-nieuwe-pagina{break-before:page;}
  .pr-kop-kort{display:flex;align-items:center;gap:2.5mm;padding-bottom:2mm;}
  .pr-kop-kort img{width:11mm;height:11mm;filter:grayscale(1) contrast(1.6);}
  .pr-kop-kort .pr-merk{font-size:12.5pt;}
  .pr-kop-kort .pr-adres{margin-top:.5mm;}
  .pr-kort .pr-nr{font-size:24pt;}
  .pr-kort .pr-info{margin:2.5mm 0 1.5mm;}
  .pr-kort .pr-info th{width:15mm;}
  .pr-klaar-rij th,.pr-klaar-rij td{border-top:.5mm solid #000;border-bottom:.5mm solid #000!important;}
  .pr-klaar-rij b{font-size:11.5pt;font-weight:800;}
  .pr-kort .pr-betaling{margin:2mm 0;padding:1mm;font-size:9pt;}
  .pr-kort .pr-voet{margin-top:2mm;padding-top:1.5mm;}

  /* Mandticket: blijft in de winkel, met de stukken per plaats */
  .pr-ticket{break-inside:auto;}
  .pr-ticket-kop{display:flex;justify-content:space-between;gap:2mm;background:#000;color:#fff;border-radius:1.5mm;padding:1mm 2mm;font-size:7.5pt;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
  .pr-ticket-kop span:last-child{letter-spacing:.02em;font-weight:600;text-transform:none;text-align:right;}
  .pr-ticket-nr{font-size:34pt;font-weight:800;letter-spacing:.04em;line-height:1;text-align:center;margin-top:2mm;}
  .pr-ticket .pr-label-naam{text-align:center;}
  .pr-ticket-info{text-align:center;font-size:8.5pt;margin-top:1mm;}
  .pr-ticket .pr-label-loc{text-align:center;font-size:11pt;border:.4mm solid #000;border-radius:1.5mm;padding:.8mm;margin-top:2mm;}
  .pr-ticket-opm{margin-top:2mm;padding:1.2mm 2mm;border:.4mm dashed #000;border-radius:1.5mm;font-size:8.5pt;font-weight:700;}
  .pr-ticket-opm::before{content:"⚠ ";}
  .pr-ticket-titel{font-size:8pt;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-align:center;margin:3mm 0 1mm;display:flex;align-items:center;gap:2mm;}
  .pr-ticket-titel::before,.pr-ticket-titel::after{content:"";flex:1;border-top:.3mm solid #000;}
  .pr-plaats{margin-top:2mm;break-inside:avoid;}
  .pr-plaats-kop{display:flex;justify-content:space-between;align-items:baseline;background:#000;color:#fff;padding:.8mm 2mm;border-radius:1mm;font-size:9pt;font-weight:800;}
  .pr-plaats-kop span{font-size:7.5pt;font-weight:600;}
  .pr-plaats-rij{display:flex;align-items:baseline;gap:1.5mm;padding:1mm 1mm;border-bottom:.2mm dotted #000;font-size:9.5pt;}
  .pr-plaats-rij i{flex:none;width:3mm;height:3mm;border:.35mm solid #000;border-radius:.5mm;align-self:center;}
  .pr-plaats-rij b{flex:none;min-width:6mm;}
  .pr-plaats-rij span{flex:1;}
  .pr-plaats-rij small{font-size:7pt;text-transform:uppercase;letter-spacing:.06em;}
  .pr-ticket .pr-streepjes{margin-top:3mm;}
  .pr-vlek{font-weight:800;}
  div.pr-vlek{font-size:8pt;}
  .pr-plaats-rij .pr-vlek{display:block;font-style:normal;font-size:8pt;}
  .a4-vlek{display:inline-block;margin-left:2mm;padding:.2mm 2mm;border-radius:1mm;background:#FBE9E7;color:#B3261E;font-size:8pt;font-weight:800;}

  /* A4 met vlekkencontrole */
  .vr-status{margin-top:4mm;padding:3mm 4mm;border-radius:2.5mm;border:.5mm solid #565B63;display:flex;align-items:baseline;gap:4mm;flex-wrap:wrap;}
  .vr-status b{font-size:15pt;font-weight:800;}
  .vr-status span{font-size:9.5pt;}
  .vr-ja{background:#B3261E;border-color:#B3261E;color:#fff;}
  .vr-nee{background:#E6F2EA;border-color:#1E6B3A;color:#1E6B3A;}
  .vr-tabel .vr-jn{width:14mm;text-align:center;}
  .vr-tabel tfoot .vr-jn{white-space:nowrap;}
  .vr-rij-vlek td{background:#FBE9E7;color:#B3261E;font-weight:700;border-bottom-color:#E8B4AE;}
  .vr-rij-vlek .vr-jn b{display:inline-block;background:#B3261E;color:#fff;border-radius:1mm;padding:.2mm 2mm;}
  .vr-opm{margin-top:4mm;}
}

/* Zonder kassa: enkel de factuuraanvragen */
#kassa.zonder-kassa .dag-kies,#kassa.zonder-kassa .paneel-voet,#kassa.zonder-kassa .k-form{display:none!important;}

/* Prijslijst afdrukken, in de layout van de papieren prijslijst */
@media print{
  .pl-blad{color:#000;font:10pt/1.2 Calibri,Carlito,Arial,sans-serif;}
  .pl-titel{font-size:12pt;font-weight:700;margin-bottom:1mm;}
  .pl-titel{display:flex;justify-content:space-between;}
  .pl-datum{font-weight:400;}
  .pl-sub{font-size:9pt;margin-bottom:2mm;}
  .pl-tabel{width:100%;border-collapse:collapse;}
  .pl-tabel td,.pl-tabel th{border:.25mm solid #000;padding:.45mm 2mm;text-align:center;}
  .pl-kop th{padding:1mm 2mm;}
  .pl-tabel td:nth-child(3),.pl-tabel td:nth-child(5),.pl-tabel th:nth-child(3),.pl-tabel th:nth-child(5){width:20mm;}
  .pl-tabel td:nth-child(2),.pl-tabel td:nth-child(4){width:38mm;}
  .pl-kop th{text-decoration:underline;font-weight:700;}
  .pl-kop th:first-child{text-align:center;}
  .pl-leeg td{height:3mm;}
  .pl-totaal td:nth-child(2){text-align:right;font-weight:700;}
  .pl-tabel tr{break-inside:avoid;}
  .dk-blad{font:10pt/1.3 "Courier New",Courier,monospace;}
  .dk-kop{display:flex;justify-content:space-between;align-items:baseline;border-bottom:.6mm double #000;padding-bottom:1mm;font-size:11pt;}
  .dk-titel{text-align:center;margin:2mm 0;text-decoration:underline;}
  .dk-tabel{width:100%;border-collapse:collapse;}
  .dk-tabel th,.dk-tabel td{border:.2mm solid #000;padding:.5mm 2mm;text-align:right;}
  .dk-tabel td:first-child{text-align:left;}
  .dk-tabel th:not(:first-child),.dk-tabel td:not(:first-child){width:21mm;}
  .dk-tabel tr{break-inside:avoid;}
  .dk-aantal{margin-top:2mm;}
  .dc-blad{color:#000;font:9pt/1.15 Arial,"Liberation Sans",sans-serif;}
  .dc-titel{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-bottom:1.5mm;}
  .dc-klant{font-size:8pt;}
  .dc-naam{font-size:16pt;}
  .dc-tabel{width:100%;border-collapse:collapse;table-layout:fixed;}
  .dc-tabel td{border:.2mm solid #000;padding:.25mm 1.5mm;text-align:center;height:4.3mm;}
  .dc-tabel .dc-l{text-align:left;}
  .dc-tabel .dc-m{text-align:center;}
  .dc-tabel .dc-r{text-align:right;}
  .pl-nieuwe-pagina{break-before:page;}
  #afdruk.a4:has(.na-blad){padding:8mm;}
  .na-blad{display:grid;grid-template-columns:1fr 1fr;color:#000;font:9.5pt/1.3 Arial,sans-serif;}
  .na-briefje{border:.3mm dashed #888;height:69mm;box-sizing:border-box;padding:5mm 6mm;display:flex;flex-direction:column;gap:2mm;break-inside:avoid;}
  .na-kop{display:flex;justify-content:space-between;align-items:baseline;border-bottom:.5mm solid #0E1F42;padding-bottom:1mm;}
  .na-kop b{font-size:12pt;color:#0E1F42;}
  .na-kop span{font-size:8.5pt;}
  .na-briefje p{margin:0;font-size:10.5pt;font-weight:700;}
  .na-briefje small{font-size:7.5pt;color:#333;}
  .na-velden{display:grid;grid-template-columns:1fr 1fr;gap:4mm 5mm;margin-top:auto;}
  .na-velden span{border-bottom:.25mm solid #000;padding-top:5mm;font-size:7.5pt;color:#444;}
  .na-velden .na-handtekening{grid-column:1/-1;padding-top:9mm;}
  .pl-blad2{color:#1B2422;font:9pt/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .pl-kop2{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:2.5mm;border-bottom:1.2mm solid #0E1F42;}
  .pl-merk{font-size:20pt;font-weight:800;color:#0E1F42;line-height:1;}
  .pl-slogan{color:#2B7BB9;font-weight:600;font-size:9pt;margin-top:1mm;letter-spacing:.04em;}
  .pl-gegevens{text-align:right;font-size:8.5pt;color:#444;}
  .pl-titelbalk{display:flex;justify-content:space-between;align-items:baseline;margin:3mm 0 2.5mm;}
  .pl-titelbalk h1{margin:0;font-size:14pt;color:#0E1F42;}
  .pl-titelbalk span{font-size:8.5pt;color:#555;}
  .pl-titelbalk b{color:#1D5A8A;}
  .pl-tabel2{width:100%;border-collapse:collapse;}
  .pl-tabel2 td,.pl-tabel2 th{padding:.6mm 2.5mm;border-bottom:.2mm solid #DDE1E6;}
  .pl-groepkop th{background:#0E1F42;color:#fff;text-align:right;font-size:8.5pt;font-weight:600;padding:1.4mm 2.5mm;border:0;}
  .pl-groepkop th:first-child{text-align:left;font-size:10pt;font-weight:700;}
  .pl-groep tr:nth-child(odd):not(.pl-groepkop) td{background:#F4F1EA;}
  .pl-groepkop{break-after:avoid;}
  .pl-groep + .pl-groep .pl-groepkop th{border-top:3mm solid #fff;}
  .pl-tabel2 tr{break-inside:avoid;}
  .pl-tabel2 .p{text-align:right;white-space:nowrap;width:24mm;font-variant-numeric:tabular-nums;}
  .pl-tabel2 .a{width:15mm;border-left:.2mm solid #DDE1E6;}
  .pl-geen{color:#AAB;}
  .pl-totaal2 td{border:0;padding-top:3mm;font-weight:700;text-align:right;}
  .pl-totaal2 td:last-child{border-bottom:.4mm solid #000;}
  .dk2 .p{width:26mm;}
  .na-a4{font-size:11pt;line-height:1.5;}
  .na-groot{font-size:15pt;font-weight:700;color:#0E1F42;margin:10mm 0 5mm;}
  .na-a4-velden{display:grid;gap:12mm;margin-top:18mm;}
  .na-a4-velden div{border-bottom:.3mm solid #000;height:12mm;display:flex;align-items:flex-start;}
  .na-a4-velden span{font-size:9pt;color:#555;}
  .na-a4-velden .na-a4-hand{height:35mm;border:.3mm solid #000;border-radius:2mm;padding:2mm 3mm;}
  .pl-kolommen{columns:2;column-gap:5mm;}
  .pl-kolommen .pl-tabel2{break-inside:avoid;margin-bottom:2.5mm;}
  .pl-twee{display:grid;grid-template-columns:1fr 1fr;gap:5mm;align-items:start;}
  .pl-kolommen .pl-tabel2 td,.pl-kolommen .pl-tabel2 th,.pl-twee td,.pl-twee th{font-size:7.6pt;padding:.45mm 1.6mm;}
  .pl-kolommen .pl-groepkop th,.pl-twee .pl-groepkop th{font-size:7.6pt;padding:1mm 1.6mm;}
  .pl-kolommen .pl-groepkop th:first-child{font-size:8.5pt;}
  .pl-kolommen .p{width:15mm;}
  .pl-twee .p{width:13mm;}
  .pl-groepkop small{font-weight:400;opacity:.8;font-size:6.5pt;}
  .pl-blad2 > .pl-tabel2 td,.pl-blad2 > .pl-tabel2 th{font-size:11pt;padding:1.3mm 3mm;}
  .pl-blad2 > .pl-tabel2 .pl-groepkop th{font-size:10pt;padding:2mm 3mm;}
  .pl-blad2 > .pl-tabel2 .pl-groepkop th:first-child{font-size:12pt;}
  .pl-blad2 > .pl-tabel2 .p{width:30mm;}
  .pl-blad2 > .pl-tabel2 .a{width:20mm;}
  .pl-blad2 > .pl-tabel2 .pl-groepkop small{font-size:8pt;}
  .pl-blad2 .pl-voet{font-size:10pt;}
  /* Prijslijsten in zwart-wit. */
  .pl-blad2,.pl-blad2 .pl-merk,.pl-blad2 .pl-titelbalk h1,.pl-blad2 .pl-titelbalk b,.pl-blad2 .pl-slogan,.pl-blad2 .pl-gegevens,.pl-blad2 .pl-titelbalk span{color:#000;}
  .pl-blad2 .pl-kop2{border-bottom-color:#000;}
  .pl-blad2 .pl-groepkop th{background:#000;color:#fff;}
  .pl-blad2 .pl-groep tr:nth-child(odd):not(.pl-groepkop) td{background:#fff;}
  .pl-blad2 .pl-tabel2 td{border-bottom:.2mm solid #000;}
  .pl-blad2 .pl-tabel2 .a{border-left:.2mm solid #000;}
  .pl-blad2 .pl-geen{color:#000;}
  .pl-voet{margin-top:3mm;font-size:8pt;color:#555;}
}

/* Ophaaldatum nog niet gekozen */
fieldset.kies-datum { outline: 3px solid #e0a100; border-radius: 10px; }
fieldset.kies-datum legend::after { content: ' — kies een datum'; color: #b07d00; }

/* Ophaalagenda */
.ag-balk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ag-dag { margin: 14px 0 6px; font-size: 1rem; }
.ag-dag.vandaag { color: #1d4ed8; }
.ag-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid #e3e6ee; border-radius: 10px; margin-bottom: 6px; background: #fff; }
.ag-tijd { font-weight: 700; }
.ag-plaats { color: #475569; }
.ag-plaats a { color: inherit; }
.ag-notitie { white-space: pre-line; color: #334155; font-size: .92em; margin-top: 4px; }
.ag-item .knop { white-space: nowrap; }
.ag-adres { margin-top: 16px; padding: 14px; border: 1px dashed #c7cdd9; border-radius: 10px; }
.ag-adres input { width: 100%; }
.ag-leeg { color: #64748b; }
.ag-balk select { width: auto; flex: 0 0 auto; } .ag-balk .knop { flex: 0 0 auto; }
.ag-kop { font-size: 1.15rem; margin: 18px 0 4px; border-top: 1px solid #e3e6ee; padding-top: 12px; }
#ag-leveringen .ag-kop { border-top: 0; padding-top: 0; margin-top: 4px; }
.f-levering { margin-top: 10px; display: block; }
.f-levering input { width: 100%; }
.herinnering { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.herinnering button { border: 1px solid #f0b429; background: #fff8e6; color: #7a4b00; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Layout voor de winkel-pc (breed scherm) ---------- */
.merk, .knop, .tabs button { white-space: nowrap; }
.balk .knop.hoofd { padding-left: 20px; padding-right: 20px; }
.bon .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (min-width: 1100px) {
  .balk-binnen, .tabs, main { max-width: 1240px; }
  .balk-binnen:first-child { margin-bottom: 12px; }
  .merk { font-size: 1.4rem; }
  .balk-knoppen { gap: 10px; }
  /* Bonnen in twee kolommen: meer bonnen tegelijk zien. */
  .lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lijst > .zoek-kop { grid-column: 1 / -1; }
  .bon { padding: 12px 14px; }
  .tabs { justify-content: flex-start; }
  .tabs button { flex: 0 0 auto; padding: 12px 22px; }
  /* Bonformulier breder. */
  #formulier { width: min(900px, calc(100% - 24px)); }
}
@media (min-width: 1600px) {
  .balk-binnen, .tabs, main { max-width: 1500px; }
  .lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Logo in de balk */
.merk { display: flex; align-items: center; gap: 10px; }
.merk-logo { width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 0; flex: 0 0 auto; object-fit: cover; }
@media (max-width: 600px) { .merk-logo { width: 32px; height: 32px; } }
.kl-vast { margin: 6px 0 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kl-weg-lang { margin: 6px 0 12px; border: 1px solid #EBD9B4; background: var(--geel-zacht); border-radius: 12px; padding: 8px 12px; }
.kl-weg-lang summary { cursor: pointer; font-weight: 600; }
#kl-weg-lijst { margin-top: 8px; max-height: 320px; overflow: auto; }

/* Nieuwe bon: genummerde stappen in werkvolgorde */
fieldset.stap { background: #fff; border: 1px solid var(--lijn); border-left: 4px solid var(--lijn); border-radius: 14px; padding: 12px 14px 14px; margin: 0 0 12px; transition: border-color .15s, box-shadow .15s; }
fieldset.stap > legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
fieldset.stap > legend ~ * { clear: both; }
.stap-nr { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: #e8ecf3; color: var(--navy); font-weight: 800; font-size: .95rem; }
fieldset.stap.actief { border-left-color: #2b78c5; box-shadow: 0 4px 16px rgba(43,120,197,.12); }
fieldset.stap.actief .stap-nr { background: #2b78c5; color: #fff; }
fieldset.stap.gedaan { border-left-color: #2f9e6b; }
fieldset.stap.gedaan .stap-nr { background: #2f9e6b; color: #fff; font-size: 0; }
fieldset.stap.gedaan .stap-nr::after { content: '✓'; font-size: .95rem; }
.plus-stukken { margin-left: 8px; border: 1px solid var(--lijn); background: #fff; color: var(--navy); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.plus-stukken:hover { border-color: var(--navy); }
.partner-kop { grid-column: 1 / -1; font-size: 1rem; color: var(--navy); margin-top: 8px; }

/* Partnerprijs, snel afhalen */
.pp-veld { display: block; font-size: .85rem; color: var(--ink-soft); margin: 2px 0; }
.pp-veld input { width: 70px; padding: 2px 6px; margin: 0 4px; font: inherit; }
.snel-afhalen { display: flex; gap: 6px; margin-top: 4px; }
.snel-afhalen button { border: 1px solid var(--lijn); background: #fff; color: var(--navy); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.snel-afhalen button:hover { border-color: var(--navy); background: #eef3fb; }
kbd { font: inherit; font-size: .72em; opacity: .6; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.tegels.vaak .tegel { border-color: #e7c66b; background: #fffaf0; }

/* Gsm: kopie van de winkel-pc, enkel kijken */
.spiegel-balk { background: #eef3fb; border: 1px solid #c9d8f0; color: var(--navy); border-radius: 12px; padding: 8px 14px; margin: 0 0 12px; font-weight: 600; }
.alleen-kijken #nieuw, .alleen-kijken .snel-afhalen, .alleen-kijken .plus-stukken, .alleen-kijken #detail .d-knoppen, .alleen-kijken #detail .pt-knoppen, .alleen-kijken #ag-inhoud [data-ag-bon], .alleen-kijken #ag-leveringen [data-lev-status] { display: none !important; }
/* Gsm: knoppen bovenaan zijwaarts te vegen in plaats van buiten het scherm */
@media (max-width: 600px) {
  .balk-knoppen { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .balk-knoppen::-webkit-scrollbar { display: none; }
  .balk-knoppen > * { flex: 0 0 auto; }
}