/* Variants, search, picker, payment, receipts, customers, returns, stock, reports, products and the product editor. */
/* ---------- variants, search, bills, stock, products (v2) ---------- */
.sel{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;background:var(--bg);font-size:14px;font-weight:600;color:var(--ink-2);max-width:200px}
.hits{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.hit-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--wash-2)}
.hit-row:first-child{border-top:0}
.hit-sw{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,19,31,.2);flex:none}
.hit-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hit-t b{font-size:14px}.hit-t span{font-size:12.5px;color:var(--ink-2)}
.hit-l{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}.hit-l.low{color:var(--warn-ink)}.hit-l.out{color:var(--crit)}
.tv{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.list .tv{display:none}
.custline{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.custline>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.custline>div span{font-size:12px;color:var(--ink-3)}
.custline.walkin{justify-content:space-between;color:var(--ink-2)}
.avatar.sm{width:26px;height:26px;font-size:11px}
.iconbtn.sm{width:28px;height:28px}
.iconbtn.sm svg{width:16px;height:16px}
.taxrow{font-size:13px!important}
/* variant picker */
.sheet.picker{max-width:720px}
.vchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.vchip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);border-radius:999px;padding:7px 12px;font-weight:600;font-size:14px;background:var(--bg)}
.vchip i,.vmx-c i,.chip i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,19,31,.25);flex:none}
.vchip.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vchip em,.vmx-c em{font-style:normal;background:var(--ink);color:#fff;border-radius:999px;font-size:11.5px;font-weight:700;padding:1px 7px;margin-left:2px}
.vchip small{font-size:11px;color:var(--crit);font-weight:700}
.vcells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
@media (max-width:520px){.vcells.grid-5,.vcells.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vc{display:flex;flex-direction:column;border:1.5px solid var(--line-2);border-radius:13px;overflow:hidden;background:var(--bg);min-width:0}
.vc.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vc.na{border-style:dashed;align-items:center;justify-content:center;color:var(--ink-3);min-height:88px}
.vc-tap{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 4px 8px;width:100%}
.vc-tap:hover:not(:disabled){background:var(--wash)}
.vc-tap:disabled{opacity:.45}
.vc-tap b{font-stretch:75%;font-weight:700;font-size:24px;line-height:1;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-tap small{font-size:12px;font-stretch:75%;font-weight:700;color:var(--ink-3);white-space:nowrap}
.vc.low .vc-tap small{color:var(--warn-ink)}.vc.out .vc-tap small{color:var(--crit)}
.vc-tap .kh{position:absolute;top:5px;right:7px;font-size:10.5px;font-weight:700;color:var(--ink-3)}
.vc-tap .vp{font-style:normal;font-size:11px;color:var(--accent);font-weight:700}
.vc-q{display:flex;align-items:center;border-top:1px solid var(--line);background:var(--wash)}
.vc-q button{width:34px;height:34px;font-size:18px;font-weight:600;color:var(--ink-2)}
.vc-q button:disabled{opacity:.35}
.vc-q input{flex:1;min-width:0;width:100%;height:34px;border:0;background:transparent;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.vc-q input::-webkit-outer-spin-button,.vc-q input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vc-q input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.vc.on .vc-q{background:var(--accent-soft)}
.vmx{display:flex;flex-direction:column;gap:8px;overflow-x:auto;padding-bottom:2px}
.vmx-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:stretch;border-radius:14px;padding:4px;min-width:max-content}
.vmx-row.act{background:var(--wash)}
.vmx-row .vcells{grid-template-columns:repeat(var(--n),minmax(72px,1fr))}
.vmx-c{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;padding:0 6px;text-align:left}
.pk-sum{font-size:14px;color:var(--ink-2)}
/* paid */
.sheet.paid{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.paid-ic svg{width:48px;height:48px}
.sheet.paid h3{margin:4px 0 0;font-size:20px}
.paid-amt{font-size:38px;font-weight:700;letter-spacing:-.02em}
.paid-sub{margin:0;color:var(--ink-2);font-size:14px}
.paid-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:8px 0 4px}
/* receipts */
.rcpt-prev{background:var(--wash);border-radius:12px;padding:14px;max-height:52vh;overflow:auto}
.rcpt-prev .rcpt{background:#fff;margin:0 auto;padding:12px;width:100%;max-width:340px;font-size:12.5px;line-height:1.4;box-shadow:var(--shadow-sm)}
.rcpt .r-shop{text-align:center;display:flex;flex-direction:column;gap:1px;margin-bottom:6px}.rcpt .r-shop b{font-size:15px}
.rcpt .r-meta{border-top:1px dashed #000;border-bottom:1px dashed #000;padding:4px 0;margin-bottom:4px}
.rcpt .r-row{display:flex;justify-content:space-between;gap:8px}.rcpt .r-row.big{font-weight:700;font-size:14px}.rcpt .r-row.small{font-size:11px;color:var(--ink-2)}
.rcpt .r-void{text-align:center;font-weight:700;letter-spacing:.2em;color:var(--crit)}
.rcpt .r-items{width:100%;border-collapse:collapse}.rcpt .r-items th{font-size:10.5px;text-align:right;border-bottom:1px solid #000;padding:2px 0}.rcpt .r-items th:first-child,.rcpt .r-items td:first-child{text-align:left}
.rcpt .r-items td{text-align:right;vertical-align:top;padding:3px 0;border-bottom:1px dotted #bbb}.rcpt .r-items td span{display:block;font-size:11px;color:var(--ink-2)}.rcpt .r-items td+td{padding-left:4px;white-space:nowrap}
.rcpt .r-tot{margin-top:4px;display:flex;flex-direction:column;gap:1px}.rcpt .r-foot{text-align:center;margin:8px 0 0;font-size:11px}
.sheet.billview{max-width:520px}
.retline{font-size:13px;padding:6px 0;border-top:1px solid var(--wash-2);line-height:1.45}
/* customers, choosers */
.sheet.custsheet{max-width:520px}
.custlist{display:flex;flex-direction:column;margin:10px 0;max-height:46vh;overflow:auto}
.custrow{display:flex;align-items:center;gap:8px;border-top:1px solid var(--wash-2)}
.custrow:first-child{border-top:0}
.custpick{flex:1;display:flex;align-items:center;gap:10px;padding:9px 4px;text-align:left;min-width:0;width:100%;border-radius:10px}
.custpick:hover{background:var(--wash)}
.custpick span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.custpick small{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chooseList .custpick{border-top:1px solid var(--wash-2);border-radius:0}
.tmini.cust3{margin:4px 0 12px}
.custbills{display:flex;flex-direction:column;max-height:40vh;overflow:auto}
.custbill{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;border-top:1px solid var(--wash-2);font-size:13.5px;text-align:left}
.custbill:hover{background:var(--wash)}
/* returns / exchanges */
.sheet.retsheet{max-width:600px}
.rt-mode{display:flex;width:100%}.rt-mode button{flex:1}
.rt-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--wash-2)}
.rt-line>div{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.rt-line span{font-size:12.5px;color:var(--ink-3)}
.rt-line.done{opacity:.55}
.rt-sum{background:var(--wash);border-radius:12px;padding:10px 14px;margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.rt-sum .grand{font-size:24px}
.rt-pay{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink-2);flex-wrap:wrap}
.asbtn{text-align:left}
.bill .bi.asbtn:hover{text-decoration:underline}
/* stock */
.viewhead .vh-acts{display:flex;gap:8px;flex-wrap:wrap}
.al{cursor:pointer}
.spc{border-top:1px solid var(--line);padding:12px 16px}
.spc-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.spc-h>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.spc-h b{font-size:14px}
.smx,.soe{border-collapse:separate;border-spacing:4px;font-variant-numeric:tabular-nums}
.smx th,.soe th{font-size:12px;font-weight:700;color:var(--ink-3);padding:2px 6px;text-align:center;white-space:nowrap}
.smx tbody th,.soe tbody th{text-align:left;color:var(--ink);font-size:13px;position:sticky;left:0;background:var(--bg);z-index:1;padding-right:10px}
.smx td{min-width:48px;text-align:center;border-radius:8px;padding:7px 6px;background:var(--wash);font-weight:700;font-size:14px;line-height:1.1}
.smx td em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase}
.smx td.low{background:var(--warn-soft);color:var(--warn-ink)}.smx td.out{background:var(--crit-soft);color:var(--crit)}
.smx td.na,.soe td.na{background:none;color:var(--ink-3);font-weight:500}
.smx td.tot{background:none;color:var(--ink-2)}
.sw2{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(16,19,31,.25);vertical-align:-1px}
.soe td{text-align:center;vertical-align:top}
.soe input{width:64px;padding:8px 4px;text-align:center;border:1px solid var(--line-2);border-radius:9px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg)}
.soe input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(16,19,31,.08)}
.soe small{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;white-space:nowrap}
.sheet.stockop{max-width:720px}
.mvlist{display:flex;flex-direction:column}
.mv{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--wash-2);font-size:13.5px}
.mv:first-child{border-top:0}
.mv-t{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.mv-n small{display:block;font-size:12px;color:var(--ink-3)}
.mv-q{font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:520px){.mv{grid-template-columns:minmax(0,1fr) auto}.mv-t{grid-column:1/-1}}
/* reports */
.gp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gp div{background:var(--wash);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.gp span{font-size:12.5px;color:var(--ink-3);font-weight:600}.gp b{font-size:20px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.gp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vperf{display:flex;flex-direction:column}
.vp-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--wash-2);font-size:13.5px;width:100%}
.vp-row:first-child{border-top:0}
.vp-row.asbtn:hover{background:var(--wash)}
.vp-i{color:var(--ink-3);font-weight:700;font-size:12px;width:16px;text-align:right}
.vp-n{min-width:0}.vp-q{font-weight:700;white-space:nowrap}.vp-a{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.vperf .vp-row:not(:has(.vp-i)){grid-template-columns:auto minmax(0,1fr) auto auto}
/* products */
.ptools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.plist2.olist{display:flex}
.pcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;transition:background var(--t-fast)}
.pcard + .pcard{border-top:1px solid var(--line)}
.pcard:hover{background:var(--wash)}
.pcard:focus-visible{outline:none;box-shadow:inset var(--ring)}
.pcard.arch .pc-b b{color:var(--ink-3)}
.pcard .pc-p{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pcard .pc-a{flex-direction:row;align-items:center;gap:4px}
.pcard .pc-a .menuwrap .btn{width:34px;padding:0;min-height:34px}
@media (max-width:599px){.pcard{grid-template-columns:auto minmax(0,1fr) auto}.pcard .pc-a{grid-column:2/-1;justify-content:flex-end}.pcard .pc-a .btn[data-editp]{display:none}}
.pc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.pc-b>b{font-size:15px}
.pc-p{font-weight:700;font-size:14px}.pc-p small{font-weight:500;color:var(--ink-3)}
.lowtxt{color:var(--warn-ink);font-weight:700}
.pc-a{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.grp{margin-bottom:14px;background:var(--accent-soft);border-color:#D5E5FA}
.grp-row{padding:8px 0;border-top:1px solid #D5E5FA;font-size:14px}
.gp-notes{margin:10px 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
/* product editor */
.sheet.editor{max-width:820px;padding-bottom:0;scroll-padding-bottom:84px}
@media (max-width:699px){.sheet.editor{max-height:94vh}}
.edsec{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:10px}
.edsec:first-child{border-top:0;padding-top:0}
.edsec h4{margin:0;font-size:15px}
.edsec h4 .note{font-weight:500;margin-left:6px}
.edtop{display:flex;gap:14px;align-items:flex-start}
.pgrid.grow{flex:1;min-width:0}
@media (max-width:520px){.edtop{flex-direction:column;align-items:stretch}.edtop .pc-photo{flex-direction:row;width:auto}}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:4px 4px 4px 10px;font-size:13.5px;font-weight:600;background:var(--bg)}
.chip button{width:22px;height:22px;border-radius:50%;font-size:15px;line-height:1;color:var(--ink-3)}
.chip button:hover{background:var(--wash);color:var(--crit)}
.chipadd input{border:1px dashed var(--line-2);border-radius:999px;padding:6px 12px;font-size:13.5px;width:130px;background:var(--bg)}
.chipadd input:focus{border-style:solid;border-color:var(--ink);outline:none}
.presets{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mxwrap{max-height:48vh;overflow:auto;border:1px solid var(--line);border-radius:12px}
.edm thead th{position:sticky;top:0;background:var(--bg);z-index:2}
.edm thead th:first-child{left:0;z-index:3}
.edsum{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.edsum span{margin-right:auto}
.vdet{border-collapse:collapse;font-size:13px;width:100%}
.vdet th,.vdet td{padding:4px;border-bottom:1px solid var(--wash-2);text-align:left;white-space:nowrap}
.vdet thead th{font-size:11.5px;color:var(--ink-3)}
.vdet tbody th{position:sticky;left:0;background:var(--bg);font-weight:600}
.vdet input{width:100%;min-width:88px;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;font-size:13.5px;background:var(--bg)}
.edfoot{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.edfoot{margin:0 -22px;padding:12px 22px 16px}}

@media (hover:none){.kc,.kh,.deskonly{display:none!important}}
/* returns: not for resale; Sell: selling at an event; Reports: summary */
.rt-nfr{font-size:12.5px;margin-top:4px;color:var(--ink-2)}
/* a returned line: why it came back (its own reason), whether it goes back on the shelf; an exchange's "Swap for" */
.rt-why{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px}
.rt-reason{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.rt-reason select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);min-height:34px}
.rt-why .rt-nfr{margin-top:0}
.rt-swap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--ink-3)}
/* Reports: returns by reason */
.rr{display:grid;gap:6px}
.rr-row{display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(40px,2fr) auto auto;align-items:center;gap:8px;font-size:13px}
.rr-n{min-width:0;overflow-wrap:anywhere}.rr-bar{height:8px;border-radius:4px;background:var(--wash);overflow:hidden}.rr-bar i{display:block;height:100%;background:var(--warn)}
.rr-q{font-variant-numeric:tabular-nums}.rr-v{color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.rr-top{margin:0;padding-left:18px;font-size:13px;line-height:1.6}
.sellat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.sellat .f.inline{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.sellat select{min-height:40px}
.repsum .row small{font-weight:400}

/* the product editor's sections: Basics · Price & Tax · Inventory · Tracking · Advanced */
.ednav{position:sticky;top:-18px;z-index:4;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:-4px -4px 6px;padding:8px 4px;background:var(--bg);border-bottom:1px solid var(--line)}
.ednav::-webkit-scrollbar{display:none}
.ednav button{flex:none;padding:6px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink-2)}
.ednav button:hover{background:var(--wash);color:var(--ink)}
@media (min-width:700px){.ednav{top:-22px}}
.sheet.editor .edsec{scroll-margin-top:56px}
.edadv > summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none}
.edadv > summary::-webkit-details-marker{display:none}
.edadv > summary h4::after{content:" ▸";color:var(--ink-3);font-weight:500}
.edadv[open] > summary h4::after{content:" ▾"}
.edvars{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding-top:12px;border-top:1px dashed var(--line)}
.addedsheet{max-width:440px}
.addedsheet .sh-t h3{font-size:var(--fs-xl);color:var(--good-ink)}
.addedacts{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}

/* a product's detail view */
.prodview{max-width:640px}
.pv-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:var(--sp-3)}
.pv-facts{flex:1;min-width:0}
.pv-facts .kv{grid-template-columns:90px 1fr}
.pv-desc{margin:0 0 var(--sp-3);color:var(--ink-2);font-size:13.5px}
.pv-tbl td.low{color:var(--warn-ink);font-weight:700}.pv-tbl td.out{color:var(--crit);font-weight:700}
.pv-tbl small{color:var(--ink-3);font-weight:500}
@media (max-width:520px){.pv-top{flex-direction:column}}

/* Touch targets (WCAG 2.2, at least 24 px): Reports' bill rows a finger's height; a customer's account entry opens its bill
   from a real button, not a sliver of text */
.bill .bi.asbtn{padding-block:5px}
.acent .link[data-billview]{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:28px}
/* option values on a touch screen: big enough to tap (rename, remove) */
@media (pointer:coarse){.chip{padding:2px 2px 2px 8px}.chip button{width:32px;height:32px}.chip .chipname{min-height:32px;padding:0 4px}}
@media (pointer:coarse){.vdet td.ck input[type=checkbox],.vdet th.ck input[type=checkbox]{width:24px;height:24px}}