*, ::before, ::after{box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
a, area, button, input, label, select, summary, textarea, [tabindex]{touch-action:manipulation}
button:focus, input:focus, select:focus, textarea:focus, [contenteditable]:focus{outline:0}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none}
input[type="number"]{-moz-appearance:textfield}
table{border-collapse:collapse}
[hidden]{display:none !important;display:none !important}
::-ms-expand{display:none}
.keyboard{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:grid;gap:var(--keyboard-gap, .3rem);padding:var(--keyboard-pad, .5rem);background:var(--keyboard-bg, #1c2029);color:var(--keyboard-color, #f2f2f2);box-shadow:0 -2px 12px #0006;touch-action:manipulation;user-select:none}
.keyboard--docked{position:static;box-shadow:none;padding:var(--keyboard-dock-pad, 0);background:var(--keyboard-dock-bg, transparent)}
.keyboard__row{display:flex;gap:var(--keyboard-gap, .3rem);justify-content:center}
.keyboard__key{font:inherit;font-size:var(--keyboard-size, 1.1rem);flex:1 1 auto;max-width:var(--keyboard-key, 4rem);padding:var(--keyboard-key-pad, .7rem .2rem);border:1px solid var(--keyboard-border, #ffffff26);border-radius:var(--keyboard-radius, 6px);background:var(--keyboard-key-bg, #ffffff14);color:inherit;cursor:pointer}
.keyboard__key:active{background:var(--keyboard-key-active, #ffffff2e)}
.keyboard__key--wide{max-width:var(--keyboard-wide, 6rem)}
.keyboard__key--space{max-width:var(--keyboard-space, 18rem)}
.keyboard__key--on{background:var(--keyboard-key-on, #ffffff33)}
.numpad{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--numpad-gap, .4rem)}
.numpad__key{font:inherit;font-size:var(--numpad-size, 1.2rem);padding:var(--numpad-pad, .7rem);border:1px solid var(--numpad-border, #0002);border-radius:var(--numpad-radius, 8px);background:var(--numpad-bg, #0000000a);color:inherit;cursor:pointer;touch-action:manipulation;user-select:none}
.numpad__key:active{background:var(--numpad-bg-active, #00000018)}
.numpad__key--enter{grid-column:span 3}
#toasts{position:fixed;right:10px;top:5px;z-index:1001}
#toasts > *{background-color:#000A;border-radius:10px;clear:both;color:white;cursor:zoom-out;float:right;margin-top:5px;padding:3px 6px}
.bon-knop{position:relative;overflow:visible}
.bon-knop__teller{position:absolute;top:-.3rem;right:-.3rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;border:1px solid var(--well);background:var(--accent);color:var(--on-primary);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.tab-list{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.tab-list form{display:contents}
.tab-card{display:grid;grid-template-columns:1fr auto;gap:.05rem .55rem;padding:.6rem .75rem .55rem .85rem;border:1px solid var(--line);border-left:4px solid var(--sport, #{var(--line)});border-radius:10px;background:var(--panel-hi);cursor:pointer;text-align:left}
.tab-card:active{background:var(--line)}
.tab-card__name{grid-column:1;grid-row:1;font-weight:650}
.tab-card__meta{grid-column:1;font-size:.74rem;color:var(--muted)}
.tab-card__amount{grid-column:2;grid-row:1 / span 2;align-self:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:1.05rem}
.tab-rounds{display:grid;align-content:start;grid-auto-rows:max-content;gap:.55rem;max-height:48vh;overflow-y:auto;font-size:.86rem}
.tab-round{border:1px solid color-mix(in srgb, var(--border) 70%, transparent);border-radius:9px;overflow:hidden}
.tab-round__head{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .55rem;background:var(--well);font-variant-numeric:tabular-nums}
.tab-round table{width:100%;border-collapse:collapse}
.tab-rounds td{padding:.35rem .4rem;border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent);vertical-align:top;font-variant-numeric:tabular-nums}
.tab-rounds__lines{width:100%;color:var(--muted)}
.tab-line__qty{width:2.5rem;color:var(--muted);text-align:right}
.tab-line__title{width:100%}
.tab-line__amount{text-align:right;white-space:nowrap}
.tab-line__action{width:1%;white-space:nowrap}
.tab-line--child .tab-line__title{padding-left:1.2rem;color:var(--muted)}
.tab-round__actions{display:flex;justify-content:flex-end;padding:.4rem .5rem}
.tab-transfer-lines{display:grid;gap:.3rem;max-height:30vh;overflow-y:auto}
.tab-transfer-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--panel-hi);cursor:pointer}
.tab-transfer-line input{width:1.25rem;height:1.25rem}
:root{--bg:#0e1116;--surface:#161b23;--text:#eef2f6;--muted:#8fa1b3;--border:#29313d;--primary:#2e9e6b;--on-primary:#ffffff;--warn:#d9a13c;--error:#b3404a;--panel:var(--surface);--panel-hi:color-mix(in srgb, var(--surface) 88%, white);--line:var(--border);--accent:var(--primary);--accent-hi:color-mix(in srgb, var(--primary) 82%, white);--accent-dark:color-mix(in srgb, var(--primary) 70%, black);--danger:var(--error);--amber:var(--warn);--shade:color-mix(in srgb, var(--surface) 62%, black);--well:color-mix(in srgb, var(--surface) 74%, black);--head:46px;--actions:72px;--tabs:54px}
html, body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--text);font-family:system-ui, -apple-system, 'Segoe UI', sans-serif;font-size:15px;line-height:1.35;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button, input{font:inherit;color:inherit}
button{touch-action:manipulation}
main.pos{display:grid;grid-template-columns:352px 1fr;grid-template-rows:var(--head) 1fr;grid-template-areas:"head head" "order card";height:100vh}
.pos-head{grid-area:head;display:flex;align-items:center;gap:.9rem;padding:0 .8rem;background:var(--shade);border-bottom:1px solid var(--line)}
.pos-head__logo{height:22px;margin-right:.2rem}
.pos-head__station{font-weight:650;letter-spacing:.01em}
.pos-head__day{color:var(--muted);font-size:.88rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:1px solid var(--line);padding-left:.9rem}
.pos-head__pick{max-width:13rem;text-overflow:ellipsis;padding:0 .5rem;border:1px solid var(--line);border-radius:8px;background:var(--well);color:var(--text);font-size:.85rem}
.pos-head__clock{margin-left:auto;font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:600;color:var(--muted)}
.pos-head__form{display:contents}
.pos-order{grid-area:order;display:grid;grid-template-rows:1fr var(--actions);border-right:1px solid var(--line);background:var(--panel);min-height:0;min-width:0;overflow:hidden}
#bon{overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;min-height:0}
#bon::-webkit-scrollbar{display:none}
.bon{width:100%;border-collapse:collapse}
.bon td{padding:.45rem .5rem;border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent);vertical-align:middle}
.bon__qty{width:1%;white-space:nowrap}
.bon__qty span{display:inline-block;min-width:2rem;text-align:center;min-width:1.7rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.bon__qty form{display:flex;align-items:center;gap:.2rem}
.bon__title{line-height:1.3;cursor:pointer}
.bon__amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.qty{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-hi);color:color-mix(in srgb, var(--text) 55%, var(--muted));font-size:1.05rem;cursor:pointer}
.qty:active{background:var(--line);color:var(--text)}
.bon-child td{padding-top:0;border-bottom:0}
.bon__title--child{padding-left:1.6rem;color:var(--muted);font-size:.84rem;cursor:default}
.bon-child .bon__amount{color:var(--muted);font-size:.84rem}
.bon__discount{display:block;color:var(--amber);font-size:.78rem}
.bon__empty{padding:1.4rem .9rem;color:var(--muted);font-size:.92rem}
.bon-totals{margin-top:auto;padding:.6rem .7rem .7rem;border-top:1px solid var(--line);background:var(--well)}
.bon-totals__tax{display:flex;justify-content:space-between;font-size:.8rem;color:color-mix(in srgb, var(--text) 62%, var(--muted));font-variant-numeric:tabular-nums;padding:.1rem 0}
.bon-totals__sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:.4rem;padding-top:.5rem;border-top:1px solid var(--line);font-size:1.65rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.keukenvenster{display:grid;grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));gap:1.1rem;align-items:start}
.keukenvenster__kolom{display:grid;gap:.5rem;align-content:start}
.keukenvenster__kolom h3{font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.keukenvenster__toetsen{--keyboard-key:3.2rem;--keyboard-wide:4.6rem;--keyboard-space:13rem;--keyboard-key-pad:.5rem .2rem;--keyboard-dock-bg:var(--well);--keyboard-dock-pad:.45rem;border-radius:10px}
.keukenvenster__toetsen:empty{display:none}
.keuken-kenmerken{display:grid;gap:.45rem}
.keuken-groep{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.keuken-groep__naam{width:100%;font-size:.78rem;color:var(--muted)}
.keuken-kenmerk.keuken-kenmerk--aan{background:var(--accent);border-color:var(--accent-hi);color:var(--on-primary);font-weight:700;box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}
.keuken-kenmerk--aan .keuken-stip{border-color:var(--on-primary);border-width:2px}
.keuken-groep--kleur .keuken-kenmerk{display:inline-flex;align-items:center;gap:.35rem}
.keuken-stip{width:1rem;height:1rem;flex:none;border-radius:50%;border:1px solid rgba(255, 255, 255, .35)}
.keuken-groep--schakel{margin-top:.15rem}
.keuken-namen{display:flex;flex-wrap:wrap;gap:.3rem;max-height:7.5rem;overflow-y:auto;scrollbar-width:none}
.keuken-leeg{font-size:.8rem;color:var(--muted)}
.bon-keuken{display:block;width:calc(100% - .8rem);margin:.3rem .4rem;padding:.35rem .5rem;border:1px dashed var(--line);border-radius:7px;background:none;color:var(--text);font-size:.86rem;text-align:left;cursor:pointer}
.bon-keuken:active{background:var(--panel-hi)}
.pos-actions{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.5fr;gap:.35rem;padding:.4rem;border-top:1px solid var(--line);background:var(--well)}
.pos-actions form{display:contents}
.pos-actions--split{grid-template-columns:.85fr .85fr 1fr 2.2fr}
.pos-pay-split{display:grid;grid-template-columns:62px 1fr;gap:1px}
.pos-pay-split .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.pos-pay-split .btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
.btn-pay--icon{padding:0;background:color-mix(in srgb, var(--accent) 74%, var(--panel))}
.btn-pay--icon svg{display:block}
.pos-actions .btn{min-width:0;padding:0 .45rem;font-size:.88rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1rem;border:1px solid var(--line);border-radius:9px;background:var(--panel-hi);color:var(--text);font-size:.92rem;font-weight:550;cursor:pointer;text-decoration:none}
.btn:active{background:var(--line)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-primary)}
.btn-primary:active{background:var(--accent-hi)}
.btn-slim{min-height:34px;padding:0 .75rem;font-size:.84rem;color:color-mix(in srgb, var(--text) 55%, var(--muted))}
.btn-slim:active{color:var(--text)}
.btn-pay{background:var(--accent);border-color:var(--accent-dark);color:var(--on-primary);font-size:1.06rem;font-weight:700;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255, 255, 255, .12)}
.btn-pay:active{background:var(--accent-hi)}
.btn-pay:disabled{background:var(--panel-hi);border-color:var(--line);color:var(--muted);box-shadow:none}
.pos-card{grid-area:card;display:grid;grid-template-rows:var(--tabs) 1fr;min-height:0}
.pos-tabs{display:flex;align-items:stretch;gap:.25rem;padding:.4rem .5rem 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--shade)}
.pos-tabs::-webkit-scrollbar{display:none}
.pos-tab{flex:0 0 auto;padding:0 .85rem;border:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);font-size:.9rem;font-weight:550;cursor:pointer;white-space:nowrap}
.pos-tab:active{color:var(--text)}
.pos-tab.active{color:var(--text);background:var(--panel);border-bottom-color:var(--tab, #{var(--accent)})}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));grid-auto-rows:96px;gap:.45rem;padding:.55rem;overflow-y:auto;scrollbar-width:none;align-content:start;min-height:0;background:var(--panel)}
.pos-grid::-webkit-scrollbar{display:none}
.pos-btn__form{display:contents}
.pos-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;padding:.5rem .55rem .45rem .7rem;border:1px solid color-mix(in srgb, var(--btn, #{var(--accent)}) 45%, var(--border));border-radius:10px;background:linear-gradient(180deg, color-mix(in srgb, var(--btn, #{var(--accent)}) 30%, var(--surface)), color-mix(in srgb, var(--btn, #{var(--accent)}) 13%, var(--surface)));cursor:pointer;text-align:left;overflow:hidden;box-shadow:0 1px 2px rgba(0, 0, 0, .25)}
.pos-btn:active{background:color-mix(in srgb, var(--btn, #{var(--accent)}) 45%, var(--surface))}
.pos-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--btn, #{var(--accent)});opacity:.85}
.pos-btn__parent{font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 55%, var(--muted));max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-btn__label{font-size:.9rem;font-weight:600;line-height:1.22;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pos-btn__price{margin-top:auto;align-self:flex-end;font-size:.82rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;background:color-mix(in srgb, var(--text) 14%, transparent);padding:.05rem .45rem;border-radius:999px}
.pos-btn__img{position:absolute;left:.55rem;bottom:.3rem;width:44px;height:44px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0, 0, 0, .35))}
.theme-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:.5rem}
.theme-pick{min-height:48px;padding:0 .6rem;border:1px solid var(--line);border-radius:10px;background:var(--panel-hi);color:var(--text);font-size:.9rem;font-weight:550;cursor:pointer}
.theme-pick.active{border-color:var(--accent);background:var(--accent);color:var(--on-primary)}
.grid-empty{grid-column:1 / -1;padding:1.5rem;color:var(--muted)}
.pos-gate{display:flex;align-items:center;justify-content:center;height:100vh;padding:2rem;background:var(--bg)}
.gate-box{width:100%;max-width:26rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.8rem;display:grid;gap:1rem;box-shadow:0 18px 50px rgba(0, 0, 0, .45)}
.gate-box h1{font-size:1.35rem;letter-spacing:-.01em}
.gate-box p{color:var(--muted);font-size:.9rem}
.gate-actions{display:grid;gap:.5rem}
.gate-ref{font-size:.82rem}
.gate-ref code{font-family:ui-monospace, monospace;color:var(--text);background:var(--well);border-radius:5px;padding:.1rem .35rem}
.gate-box form{display:grid;gap:.8rem}
.gate-box label{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted)}
.gate-box input{min-height:48px;padding:0 .75rem;border:1px solid var(--line);border-radius:9px;background:var(--well)}
.gate-error{padding:.6rem .75rem;border-radius:9px;background:color-mix(in srgb, var(--error) 30%, black);border:1px solid color-mix(in srgb, var(--error) 55%, black);color:color-mix(in srgb, var(--error) 35%, white);font-size:.85rem}
#modal{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:0;max-width:27rem;width:calc(100% - 2rem);max-height:calc(100vh - 2rem);overflow-y:auto;scrollbar-width:none;box-shadow:0 24px 70px rgba(0, 0, 0, .55)}
#modal.modal--breed{max-width:60rem}
#modal::-webkit-scrollbar{display:none}
#modal::backdrop{background:rgba(0, 0, 0, .55);backdrop-filter:blur(2px)}
.modal-box{padding:1.3rem;display:grid;gap:.95rem}
.modal-box h2{font-size:1.2rem;letter-spacing:-.01em}
.modal-sub{color:var(--muted);font-size:.88rem;margin-top:-.7rem}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.modal-actions form{display:contents}
.modal-box input[type="text"]{min-height:46px;padding:0 .75rem;border:1px solid var(--line);border-radius:9px;background:var(--well)}
.modal-box label{display:grid;gap:.3rem;font-size:.85rem;color:var(--muted)}
.kasopmaak{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;font-variant-numeric:tabular-nums;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--well)}
.kasopmaak dt{color:var(--muted)}
.kasopmaak dd{text-align:right;font-weight:600}
.opt-group{border:1px solid var(--line);border-radius:10px;padding:.7rem;display:grid;gap:.55rem}
.opt-group legend{padding:0 .4rem;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.opt-row{display:flex;flex-wrap:wrap;gap:.4rem}
.opt-row form{display:contents}
.opt-two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opt-pill{position:relative}
.opt-pill input{position:absolute;opacity:0;inset:0}
.opt-pill span{display:inline-flex;align-items:center;min-height:42px;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--panel-hi);font-size:.9rem;cursor:pointer}
.opt-pill input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-primary);font-weight:600}
.opt-name{min-height:46px;padding:0 1rem;border:1px solid var(--line);border-left:4px solid var(--sport, #{var(--line)});border-radius:9px;background:var(--panel-hi);font-weight:550;cursor:pointer}
.opt-name:active{background:var(--line)}
.pay-open{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem}
.pay-open strong{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pay-note{color:var(--muted);font-size:.82rem}
.pay-input{min-height:56px;padding:0 .85rem;border:1px solid var(--line);border-radius:10px;background:var(--well);font-size:1.6rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;width:100%}
.pay-quick{display:grid;grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));gap:.45rem}
.pay-pad{display:grid;grid-template-columns:repeat(3, 1fr);gap:.45rem}
.pad{min-height:54px;border:1px solid var(--line);border-radius:10px;background:var(--panel-hi);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer}
.pad:active{background:var(--line)}
.pad-wide{grid-column:1 / -1;font-size:.95rem;color:var(--muted)}
.pay-methods{grid-template-columns:1fr 1fr}
.done-change{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 1rem;border:1px solid var(--accent-dark);border-radius:10px;background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, var(--surface)), color-mix(in srgb, var(--primary) 10%, var(--surface)))}
.done-change strong{font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.receipt{font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;font-size:.8rem;line-height:1.5;background:#fbfaf3;color:#17181a;padding:1.1rem .9rem;border-radius:6px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .08)}
.sale-list{display:grid;gap:.35rem;max-height:55vh;overflow-y:auto}
.sale-row{display:grid;grid-template-columns:auto 1fr auto;gap:.05rem .6rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:9px;background:var(--panel-hi);cursor:pointer;text-align:left;align-items:baseline}
.sale-row:active{background:var(--line)}
.sale-row__time{grid-row:1 / span 2;font-variant-numeric:tabular-nums;color:var(--muted);align-self:center}
.sale-row__items{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.sale-row__meta{grid-column:2;font-size:.74rem;color:var(--muted)}
.sale-row__amount{grid-column:3;grid-row:1 / span 2;align-self:center;font-variant-numeric:tabular-nums;font-weight:600}
.sale-row--cancelled{opacity:.55}
.sale-row--cancelled .sale-row__items{text-decoration:line-through}
dialog{position:fixed;inset:0;margin:auto;height:fit-content}
dialog.phlo-dialog{width:min(420px, calc(100vw - 4rem));border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);padding:1.4rem;box-shadow:0 18px 60px rgba(0, 0, 0, .6)}
dialog.phlo-dialog::backdrop{background:rgba(0, 0, 0, .55);backdrop-filter:blur(2px)}
.phlo-dialog__message{margin:0 0 1.1rem;font-size:1.05rem;line-height:1.45;overflow-wrap:break-word}
.phlo-dialog__input{width:100%;font:inherit;padding:.6rem .7rem;margin-bottom:1.1rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.phlo-dialog__actions{display:flex;gap:.6rem;justify-content:flex-end;margin:0;padding:0;list-style:none}
.phlo-dialog__actions button{font:inherit;min-width:96px;min-height:44px;padding:.5rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--panel-hi);color:var(--text);cursor:pointer}
.phlo-dialog__actions button[value="1"]{background:var(--accent);border-color:var(--accent);color:var(--on-primary);font-weight:600}
.pos-btn__was{align-self:flex-end;font-size:.7rem;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.pay-extra{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}
main.pos--retail{grid-template-columns:1.15fr 236px 1.3fr;grid-template-areas:"head head head" "order mid card"}
.display{display:grid;grid-template-rows:64px 1fr;height:100vh;background:var(--bg)}
.pos-klant{display:none;grid-area:klant;overflow:hidden;background:var(--surface);border-left:3px solid var(--line);flex-direction:column}
.pos-klant__head{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.6rem;border-bottom:1px solid var(--line)}
.pos-klant__logo{max-height:4rem;width:auto}
.pos-klant__naam{font-size:1.6rem;font-weight:600}
.pos-klant__bon{flex:1;overflow:auto;padding:1.2rem 1.6rem;font-size:1.5rem}
.pos-klant__bon > *{display:none}
.pos-klant__bon.is-welkom .klant-welkom{display:block}
.pos-klant__bon.is-bon .klant-bon{display:block}
.pos-klant__bon.is-klaar .klant-klaar{display:block}
.pos-klant__welkom{margin:4rem 0;text-align:center;font-size:2.6rem;color:var(--muted)}
.pos-klant__lijnen{width:100%;border-collapse:collapse}
.pos-klant__lijnen td{padding:.35rem 0;vertical-align:top}
.pos-klant__aantal{width:3rem;color:var(--muted)}
.pos-klant__bedrag{text-align:right;white-space:nowrap}
.pos-klant__kind td{color:var(--muted);font-size:1.15rem}
.pos-klant__voordeel{display:flex;justify-content:space-between;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);color:var(--good)}
.pos-klant__totaal{display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;padding-top:.8rem;border-top:2px solid var(--line);font-size:2.2rem;font-weight:600}
.pos-klant__klaar{text-align:center;margin:3rem 0}
.pos-klant__wissel{margin-top:1.5rem;font-size:2.4rem;font-weight:600}
.pos-order--retail{grid-template-rows:auto 1fr}
.retail-scan{padding:.5rem;border-bottom:1px solid var(--line);background:var(--shade)}
#retail-input{width:100%;min-height:48px;padding:0 .7rem;border:1px solid var(--line);border-radius:10px;background:var(--well);font-size:1.1rem;font-variant-numeric:tabular-nums}
#retail-input:focus{outline:0}
.pos-mid{grid-area:mid;display:grid;grid-template-rows:auto 1fr;gap:.55rem;padding:.55rem;border-right:1px solid var(--line);background:var(--shade);min-height:0}
.retail-check{min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:.6rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:center}
.retail-check__name{color:var(--muted);font-size:.88rem}
.retail-check__price{font-size:1.45rem;font-variant-numeric:tabular-nums}
.retail-pad{display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(54px, 1fr);gap:.45rem;align-content:stretch;min-height:0}
.pad-back{grid-column:1 / -1;background:#2196f3;border-color:transparent;color:#fff;font-size:1.5rem;min-height:64px}
.pad-back:active{filter:brightness(.9)}
.pad-enter{grid-column:1 / -1;background:var(--accent);border-color:var(--accent);color:var(--on-primary);font-size:1.05rem;letter-spacing:.04em}
.pad-enter:active{background:var(--accent-dark)}
.pos-card--retail{grid-template-rows:1fr;min-height:0}
.retail-matrix{display:flex;flex-direction:column;gap:4px;padding:5px;overflow-y:auto;scrollbar-width:none;background:var(--panel);min-height:0}
.retail-matrix::-webkit-scrollbar{display:none}
.rm-row{flex:1 1 0;min-height:50px;display:grid;grid-template-columns:repeat(4, 1fr);gap:4px}
.rm-row--c1{grid-template-columns:repeat(1, 1fr)}
.rm-row--c2{grid-template-columns:repeat(2, 1fr)}
.rm-row--c3{grid-template-columns:repeat(3, 1fr)}
.rm-row--c4{grid-template-columns:repeat(4, 1fr)}
.rm-row--c5{grid-template-columns:repeat(5, 1fr)}
.rm-row--c6{grid-template-columns:repeat(6, 1fr)}
.rm-row--low{flex:.72 1 0;min-height:42px}
.rm-grid{flex:6 1 0;display:grid;grid-template-columns:repeat(4, 1fr);grid-auto-rows:minmax(52px, 1fr);gap:4px;overflow-y:auto;scrollbar-width:none;align-content:start}
.rm-btn{border:1px solid var(--line);border-radius:3px;background:var(--panel-hi);color:var(--text);font-size:.88rem;font-weight:650;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;padding:.3rem .4rem;cursor:pointer;overflow:hidden}
.rm-btn:active{filter:brightness(.9)}
.rm-btn:disabled{opacity:.38;cursor:default}
.rm-tint{background:var(--btn, #{var(--panel-hi)});border-color:transparent;color:#fff}
.rm-dark{background:#606060;border-color:transparent;color:#fff}
.rm-purple{background:#800080;border-color:transparent;color:#fff}
.rm-orange{background:#ff6624;border-color:transparent;color:#fff}
.rm-red{background:#e61610;border-color:transparent;color:#fff}
.rm-darkred{background:#af1611;border-color:transparent;color:#fff}
.rm-blue{background:#2196f3;border-color:transparent;color:#fff}
.rm-green{background:#72bb53;border-color:transparent;color:#fff}
.rm-big{font-size:1.15rem;letter-spacing:.04em;min-height:62px}
.rm-off{opacity:.38}
.rm-active{outline:3px solid #fff;outline-offset:-5px}
.bon--retail th{padding:.45rem .5rem;text-align:left;color:var(--muted);font-size:.8rem;font-weight:550;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.bon--retail th.r, .bon--retail td.r{text-align:right;font-variant-numeric:tabular-nums}
.bon--retail tr[data-local]{cursor:pointer}
.bon--retail tr.bon-actief td{background:color-mix(in srgb, var(--accent) 25%, transparent)}
.bon--retail .bon__title--child{color:var(--muted);padding-left:1.1rem}
.bon--retail .bon--retail__qty{white-space:nowrap}
.bon--retail .bon--retail__qty span{display:inline-block;min-width:2.4rem;text-align:center}
main.pos--retail .pos-btn--tint{background:var(--btn);border-color:transparent;color:#fff}
main.pos--retail .pos-btn--tint .pos-btn__label{color:#fff}
main.pos--retail .pos-btn--tint .pos-btn__price{color:#fffc}
main.pos--retail .pos-btn--tint .pos-btn__was{color:#fff9}
body[data-watched]::after{content:'Het beheer kijkt mee';position:fixed;right:.5rem;bottom:.5rem;z-index:90;pointer-events:none;background:#1f2937e6;color:#fff;font-size:.72rem;letter-spacing:.02em;padding:.2rem .5rem;border-radius:999px}
@media (min-width: 1921px){
main.pos--retail{grid-template-columns:1.15fr 236px 1.3fr 1fr;grid-template-areas:"head head head klant" "order mid card klant"}
.pos-klant{display:flex}}