/* =====================================================================
   FLIP · POS module styles (POS screen, sales register, thermal receipt)
   Uses brand tokens from app.css: --navy (near-black), --orange (tan).
   ===================================================================== */

/* ---------- POS layout ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start;min-width:0}
.pos-left{min-width:0;display:flex;flex-direction:column;gap:12px}
.pos-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pos-store{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border-radius:12px;padding:9px 14px 9px 12px;text-align:left;min-width:0;max-width:100%;box-shadow:0 6px 18px rgba(0,0,0,.14);transition:background .12s}
.pos-store:hover{background:var(--navy-l)}
.pos-store svg{flex:none;color:var(--orange)}
.pos-store-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pos-store-txt small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}
.pos-store-txt b{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pos-cashier{display:flex;align-items:center;gap:8px;font-size:13px}
.pos-cashier span:last-child{display:flex;flex-direction:column;line-height:1.15}
.pos-cashier small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pos-cashier .avatar.sm{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--orange-tint);color:var(--navy);font-weight:700;font-size:12px;flex:none}
.pos-net{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#fff;white-space:nowrap}
.pos-net b{font-weight:700}
.pos-net.on{color:var(--ok);border-color:rgba(29,158,108,.3);background:var(--ok-tint)}
.pos-net.off{color:var(--warn-text);border-color:rgba(234,179,8,.45);background:var(--warn-tint);animation:posPulse 2s ease-in-out infinite}
.pos-net-sub{color:var(--body);font-weight:500}
@keyframes posPulse{0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,.35)}50%{box-shadow:0 0 0 5px rgba(234,179,8,0)}}

.pos-pre{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:var(--orange-tint);border:1px solid var(--orange);color:var(--ink)}
.pos-pre svg{color:var(--orange);flex:none}
.pos-pre-txt{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.pos-pre-txt a{color:var(--navy);text-decoration:underline}
.pos-pre-txt span{color:var(--body);font-size:12.5px}

.pos-search{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px;align-items:center}
.pos-input{position:relative;display:flex;align-items:center;min-width:0}
.pos-input>svg,.pos-input>span{position:absolute;left:12px;color:var(--muted);pointer-events:none;display:flex}
.pos-input .input{padding-left:38px;height:44px;width:100%;font-size:14px;background:#fff}
.pos-input.scan .input{border-color:var(--orange);background:#fff;letter-spacing:.02em}
.pos-input.scan>span{color:var(--orange)}
.pos-instock{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--body);white-space:nowrap;cursor:pointer;user-select:none}
.pos-instock input{accent-color:var(--navy);width:16px;height:16px}

.pos-cats{display:flex;gap:6px;flex-wrap:wrap}
.pos-cats .chip{height:32px;font-weight:600}
.pos-chip-n{font-size:11px;font-weight:600;opacity:.6}
.pos-cats .chip.on .pos-chip-n{opacity:.75}

.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;min-width:0;align-content:start}
.pos-tile{position:relative;display:flex;flex-direction:column;gap:3px;min-height:112px;min-width:0;text-align:left;background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent,var(--navy));border-radius:12px;padding:10px 12px 10px;cursor:pointer;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .12s,box-shadow .12s,transform .08s}
.pos-tile:hover{border-color:var(--orange);border-top-color:var(--accent,var(--navy));box-shadow:0 8px 22px rgba(20,20,20,.10)}
.pos-tile:active{transform:scale(.98)}
.pos-tile:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.pos-tile.out{opacity:.45;cursor:not-allowed;box-shadow:none}
.pos-tile.out:hover{border-color:var(--line);transform:none}
.pos-tile-name{font-weight:700;font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pos-tile-var{font-size:12px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-tile-sku{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-tile-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:auto;min-width:0}
.pos-tile-price{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.pos-tile-stock{font-size:11px;font-weight:600;color:var(--ok);white-space:nowrap;background:var(--ok-tint);padding:1px 7px;border-radius:999px}
.pos-tile.low .pos-tile-stock{color:var(--warn-text);background:var(--warn-tint)}
.pos-tile.out .pos-tile-stock{color:var(--danger);background:var(--danger-tint)}
.pos-grid-note{font-size:12px}
.pos-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 10px;color:var(--ink);text-align:center;background:#fff;border:1px dashed var(--line);border-radius:12px}
.pos-empty svg{color:var(--muted)}

/* ---------- cart ---------- */
.pos-cart{position:sticky;top:calc(var(--topbar-h) + 12px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;max-height:calc(100vh - var(--topbar-h) - 28px);min-width:0;overflow:hidden}
.pos-cart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--navy);color:#fff;flex:none}
.pos-cart-head b{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.pos-cart-head .pos-cart-count{color:rgba(255,255,255,.65);font-size:12.5px}
.pos-cart-head .btn-link{color:var(--orange);font-weight:600}
.pos-lines{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:90px;padding:4px 14px}
.pos-cart-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:34px 10px;color:var(--body);font-size:13px}
.pos-cart-empty svg{color:var(--orange)}
.pos-cart-empty b{color:var(--ink);font-family:var(--display);font-size:15px}
.pos-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto 22px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pos-line:last-child{border-bottom:0}
.pos-line.flash{animation:posFlash .7s ease}
@keyframes posFlash{0%{background:var(--orange-tint)}100%{background:transparent}}
.pos-line-main{min-width:0}
.pos-line-name{font-weight:700;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-line-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-line-tags{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.pos-tag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--orange-tint);color:#7A5230;text-transform:uppercase;letter-spacing:.03em}
.pos-tag.ok{background:var(--ok-tint);color:var(--ok)}
.pos-linkbtn{font-size:11.5px;color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:0}
.pos-linkbtn:hover{color:var(--orange)}
.pos-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;height:32px}
.pos-qty button{width:28px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--navy);background:#fff}
.pos-qty button:hover{background:var(--orange-tint)}
.pos-qty input{width:34px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;font-size:13px;-moz-appearance:textfield;background:#fff}
.pos-qty input::-webkit-outer-spin-button,.pos-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-line-amt{display:flex;flex-direction:column;align-items:flex-end;min-width:76px}
.pos-line-amt b{font-family:var(--display);font-weight:700;font-size:14px;white-space:nowrap}
.pos-line-amt s{font-size:11px}
.pos-line-x{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.pos-line-x:hover{background:var(--danger-tint);color:var(--danger)}

.pos-cart-foot{border-top:1px solid var(--line);padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:none;background:#FDFCFA}
.pos-order-disc{display:flex;align-items:center;gap:6px}
.pos-discbtn{flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px dashed var(--orange);border-radius:9px;color:#7A5230;font-size:12.5px;font-weight:600;background:#fff;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-discbtn.on{border-style:solid;background:var(--orange-tint)}
.pos-discbtn:disabled{opacity:.5;cursor:not-allowed}
.pos-tots{display:flex;flex-direction:column;gap:2px}
.pos-tot{display:flex;justify-content:space-between;font-size:13px;color:var(--body);padding:2px 0}
.pos-tot.disc span:last-child{color:var(--ok);font-weight:600}
.pos-tot.grand{font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink);border-top:2px solid var(--navy);margin-top:4px;padding-top:6px;letter-spacing:-.01em}
.pos-tot.due{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.pos-vat{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin-top:2px}
.pos-charge{height:54px;font-size:17px;font-family:var(--display);font-weight:800;letter-spacing:.02em;border-radius:12px;justify-content:center;gap:10px;width:100%}
.pos-charge:disabled{opacity:.5;cursor:not-allowed}
.pos-mbar{display:none}

/* ---------- payment modal ---------- */
.pos-seg{display:flex;width:100%}
.pos-seg button{flex:1;padding:8px 6px;font-size:12.5px;text-align:center}
.pos-pay{display:flex;flex-direction:column;gap:14px}
.pos-pay-due{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pos-pay-due>div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.pos-pay-due small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pos-pay-due b{font-family:var(--display);font-weight:800;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-pay-due>div:first-child{background:var(--navy);border-color:var(--navy)}
.pos-pay-due>div:first-child small{color:rgba(255,255,255,.6)}
.pos-pay-due>div:first-child b{color:#fff}
.pos-pay-due .rem b{color:var(--danger)}
.pos-pay-due .rem.ok b{color:var(--ok)}
.pos-pay-list{display:flex;flex-direction:column;gap:6px}
.pos-pay-list:empty{display:none}
.pos-pay-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto 22px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px}
.pos-detail .pos-pay-line{grid-template-columns:auto minmax(0,1fr) auto}
.pos-pay-line .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-pay-line b{font-family:var(--display);font-weight:700}
.pos-lockicon{color:var(--muted);display:flex}
.pos-mtags{display:inline-flex;gap:4px;flex-wrap:wrap}
.pos-mtag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;background:#F0EEEB;color:var(--ink);white-space:nowrap}
.pos-mtag.m-cash{background:#E8F3EC;color:#1B7A4F}
.pos-mtag.m-gcash{background:#E6EEFB;color:#1D4FB8}
.pos-mtag.m-maya{background:#E5F6EF;color:#0B7A55}
.pos-mtag.m-card{background:#EEEAF6;color:#4B3A8C}
.pos-mtag.m-deposit{background:var(--orange-tint);color:#7A5230}
.pos-pay-entry{display:flex;flex-direction:column;gap:10px}
.pos-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pos-methods button{height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.pos-methods button:hover{border-color:var(--orange)}
.pos-methods button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pos-pay-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pos-pay-fields .field:only-child{grid-column:1/-1}
.pos-amt{font-family:var(--display);font-weight:800;font-size:22px;height:50px}
.pos-quick{display:flex;gap:6px;flex-wrap:wrap}
.pos-quick .chip{height:34px;font-weight:700;font-size:13px}
.pos-split{align-self:flex-start}
.pos-pay-change{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--body)}
.pos-pay-change:empty{display:none}
.pos-pay-change b{font-family:var(--display);font-weight:800;font-size:24px;color:var(--ok)}
.pos-pay-change b.warn{color:var(--warn-text);font-size:18px}
.pos-disc-preview{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:13px}
.pos-disc-preview b{font-family:var(--display);font-weight:800;font-size:18px}

/* ---------- done / receipt modal ---------- */
.pos-done{display:flex;flex-direction:column;gap:14px}
.pos-done-head{display:flex;align-items:center;gap:12px}
.pos-done-head b{font-family:var(--display);font-weight:800;font-size:18px}
.pos-done-check{width:46px;height:46px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pos-done-change{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.pos-done-change small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.pos-done-change b{font-size:24px;color:var(--ok)}
.pos-receipt-frame{background:#EFEBE6;border-radius:12px;padding:18px 10px;display:flex;justify-content:center;max-height:60vh;overflow:auto}
.card .pos-receipt-frame{max-height:none}

/* ---------- 80mm thermal receipt ---------- */
.pos-receipt{width:302px;max-width:100%;background:#fff;color:#000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.45;padding:16px 14px 18px;box-shadow:0 10px 24px rgba(0,0,0,.12);position:relative;
  -webkit-mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/12px 100% repeat-x;mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/12px 100% repeat-x;padding-bottom:22px}
.pos-receipt .rc-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.pos-receipt .rc-logo{height:46px;width:auto;margin-bottom:6px;filter:grayscale(1) contrast(1.4)}
.pos-receipt .rc-logo-text{font-family:var(--display);font-weight:900;font-style:italic;font-size:30px;letter-spacing:-.02em;margin-bottom:4px}
.pos-receipt .rc-co{font-weight:700;text-transform:uppercase}
.pos-receipt .rc-title{text-align:center;font-weight:800;letter-spacing:.2em;margin:10px 0 6px;font-size:12.5px}
.pos-receipt .rc-void{text-align:center;font-weight:800;font-size:14px;border:2px solid #000;padding:3px;margin:4px 0 8px;letter-spacing:.1em}
.pos-receipt .rc-row{display:flex;justify-content:space-between;gap:8px;white-space:pre-wrap}
.pos-receipt .rc-row span:last-child{text-align:right;white-space:nowrap}
.pos-receipt .rc-meta .rc-row span:last-child{font-weight:700}
.pos-receipt .rc-dash{border-top:1px dashed #000;margin:7px 0}
.pos-receipt .rc-item + .rc-item{margin-top:4px}
.pos-receipt .rc-name{font-weight:700;text-transform:uppercase}
.pos-receipt .rc-row.grand{font-weight:800;font-size:15px;border-top:1px dashed #000;border-bottom:1px dashed #000;padding:4px 0;margin:4px 0}
.pos-receipt .rc-sign{margin-top:10px;text-align:center}
.pos-receipt .rc-note{white-space:normal}
.pos-receipt .rc-foot{text-align:center;font-weight:700;margin:6px 0 10px}
.pos-receipt .rc-bars{display:flex;justify-content:center;align-items:stretch;height:34px;margin:4px 0 2px}
.pos-receipt .rc-bars i{display:block;background:#000;height:100%}
.pos-receipt .rc-bars i.gap{width:2px!important;background:transparent}
.pos-receipt .rc-small{text-align:center;font-size:10.5px}
.pos-receipt.is-void::after{content:"VOID";position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-family:var(--display);font-weight:900;font-size:68px;color:rgba(220,38,38,.18);letter-spacing:.1em;pointer-events:none}

/* ---------- store picker ---------- */
.pos-picker{max-width:880px;margin:24px auto;display:flex;flex-direction:column;gap:20px}
.pos-picker-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.pos-picker-head h2{font-size:24px;font-weight:800}
.pos-picker-head p{max-width:520px}
.pos-picker-ic{width:56px;height:56px;border-radius:16px;background:var(--navy);color:var(--orange);display:flex;align-items:center;justify-content:center}
.pos-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pos-storecard{display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0;transition:border-color .12s,box-shadow .12s}
.pos-storecard:hover{border-color:var(--orange);box-shadow:var(--card-shadow)}
.pos-storecard.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset}
.pos-storecard b{font-family:var(--display);font-weight:800;font-size:16px}
.pos-storecard .muted{font-size:12.5px}
.pos-storecard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.pos-storecard-code{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;background:var(--navy);color:#fff;padding:2px 8px;border-radius:6px}
.pos-storecard-today{font-size:12px;color:var(--body);margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}

/* ---------- manager PIN ---------- */
.pos-pin-wrap{display:flex;flex-direction:column;gap:12px;outline:none}
.pos-pin-wrap.shake .pos-pin-box{animation:posShake .35s}
@keyframes posShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pos-pin-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.pos-pin-dots{display:flex;gap:12px}
.pos-pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--navy)}
.pos-pin-dots i.on{background:var(--navy)}
.pos-pin-msg{font-size:12px;color:var(--muted)}
.pos-pin-msg.err{color:var(--danger);font-weight:600}
.pos-pinpad{display:grid;grid-template-columns:repeat(3,64px);gap:8px}
.pos-pinkey{height:50px;border-radius:12px;background:#fff;border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.pos-pinkey:hover{border-color:var(--orange);background:var(--orange-tint)}
.pos-pinkey.fn{font-size:14px;color:var(--body)}

/* ---------- sales register ---------- */
.pos-filters{padding:14px 16px;margin-bottom:16px}
.pos-filter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 12px;align-items:end}
.pos-filter-grid .field{margin:0}
.pos-kpis{margin-bottom:16px}
.pos-daily{margin-bottom:16px}
.pos-daily-wrap{max-height:340px;overflow:auto}
.pos-daily tfoot th{border-top:2px solid var(--navy);font-weight:700;color:var(--ink);background:var(--paper)}
.pos-daily thead th{position:sticky;top:0;background:#fff;z-index:1}
.pos-strike{text-decoration:line-through;color:var(--muted)}
.pos-voidnote{margin-bottom:16px}
.pos-detail-tots{margin:12px 0 0 auto;max-width:380px}
.pos-detail-tots .pos-grand{border-top:2px solid var(--navy);margin-top:4px;padding-top:8px}
.pos-detail-tots .pos-grand b{font-size:20px}
.pos-detail-2{gap:16px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pos{grid-template-columns:minmax(0,1fr) 350px}
  .pos-search{grid-template-columns:1fr 1fr}
  .pos-instock{grid-column:1/-1}
}
@media (max-width:900px){
  .pos{grid-template-columns:minmax(0,1fr)}
  .pos-cart{position:static;max-height:none;scroll-margin-top:calc(var(--topbar-h) + 10px)}
  .pos-lines{max-height:none}
  .pos-page{padding-bottom:76px}
  .pos-mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;align-items:center;gap:10px;height:54px;padding:0 16px;border-radius:14px;background:var(--navy);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:13px}
  .pos-mbar.hidden{display:none}
  .pos-mbar b{font-family:var(--display);font-weight:800;font-size:17px}
  .pos-mbar-go{margin-left:auto;background:var(--orange);color:#fff;font-weight:700;padding:6px 12px;border-radius:9px}
  .pos-mbar svg{color:var(--orange)}
}
@media (max-width:600px){
  .pos-search{grid-template-columns:minmax(0,1fr)}
  .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pos-tile{min-height:104px;padding:9px 10px}
  .pos-tile-price{font-size:15px}
  .pos-head{align-items:stretch}
  .pos-store{width:100%}
  .pos-head-meta{width:100%;justify-content:space-between}
  .pos-net-sub{display:none}
  .pos-net.off .pos-net-sub{display:inline}
  .pos-pay-due{grid-template-columns:1fr 1fr}
  .pos-pay-due>div:first-child{grid-column:1/-1}
  .pos-methods{grid-template-columns:repeat(2,1fr)}
  .pos-pay-fields{grid-template-columns:1fr}
  .pos-line{grid-template-columns:minmax(0,1fr) auto 22px;row-gap:6px}
  .pos-line-main{grid-column:1/-1}
  .pos-line .pos-qty{grid-column:1}
  .pos-line-amt{grid-column:2}
  .pos-pinpad{grid-template-columns:repeat(3,58px)}
  .pos-detail-2{grid-template-columns:1fr}
  .pos-filter-grid{grid-template-columns:1fr 1fr}
}

/* ---------- print: only the receipt, at 80mm ---------- */
.pos-print-host{display:none}
@page posreceipt{size:80mm 297mm;margin:3mm}
@media print{
  body.pos-printing .pos-print-host{display:block;page:posreceipt;position:absolute;left:0;top:0;width:74mm!important}
  body.pos-printing .pos-print-host .pos-receipt{width:74mm;box-shadow:none;-webkit-mask:none;mask:none;padding:0;font-size:10.5px}
  body.pos-printing .pos-receipt.is-void::after{color:rgba(0,0,0,.15)}
}
.pos-receipt .rc-sku{font-size:10.5px;white-space:pre}
.pos-register .mono,.pos-detail td.mono,.pos-detail td a.mono{white-space:nowrap}
.pos-register td:first-child a{white-space:nowrap}
.pos-mtag{flex:none}
.pos-detail .table-wrap{overflow-x:auto}
.pos-detail .table td:first-child{min-width:190px}
.pos-detail .table td:last-child .btn{white-space:nowrap}
@media (max-width:1100px){.pos-detail{grid-template-columns:minmax(0,1fr)}}
.pos-detail>*{min-width:0}
.pos-sale-page .page-actions{flex-wrap:wrap}
@media (max-width:600px){.pos-sale-page .page-header{flex-wrap:wrap}.pos-sale-page .page-actions .btn{padding-left:12px;padding-right:12px}}
@media (max-width:600px){.pos-sale-page .page-actions{flex:1 1 100%;min-width:0}}

/* =====================================================================
   ROUND 2 · sneaker reseller: style tiles, size run, pair tags, legit badge
   ===================================================================== */
.pos-brands{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pos-brands-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.pos-brand{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink);position:relative;padding-left:22px}
.pos-brand::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--b,var(--orange))}
.pos-brand:first-of-type{padding-left:11px}.pos-brand:first-of-type::before{display:none}
.pos-brand.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pos-brand:hover:not(.on){border-color:var(--orange)}

.pos-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.pos-tile-brand{display:flex;align-items:center;gap:6px;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,var(--navy));min-width:0}
.pos-style{min-height:200px;padding-top:8px}
.pos-shoe{height:46px;margin:0 -2px 4px;padding:4px 10px;border-radius:9px;background:linear-gradient(180deg,var(--paper),#fff);display:flex;align-items:center;justify-content:center;--shoe-fill:#fff}
.pos-shoe svg{max-width:120px}
.pos-shoe.lg{height:74px;width:132px;flex:none;margin:0}
.pos-sizes{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 2px}
.pos-sizes span{font-size:10.5px;font-weight:700;min-width:24px;text-align:center;padding:1px 5px;border-radius:5px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.pos-sizes span.more{background:transparent;border-color:transparent;color:var(--muted)}
.pos-sizes span.none{background:transparent;border:0;color:var(--muted);font-weight:600}
.pos-cond{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:5px;text-transform:uppercase;white-space:nowrap;background:var(--ok-tint);color:var(--ok)}
.pos-cond.c-bnwb{background:var(--orange-tint);color:#7A5230}
.pos-cond.c-used{background:#EEE;color:#4A4A4A}

.pos-tagchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
a.pos-tagchip:hover{background:var(--orange);color:#fff}
.pos-legit{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ok);background:var(--ok-tint);padding:2px 8px 2px 6px;border-radius:999px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pos-legit span{display:flex}
.pos-legit em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--body);margin-left:2px}
.pos-tag.cons{background:#EDE7F6;color:#5B3F8C}
.pos-tag.warn{background:var(--warn-tint);color:var(--warn-text);text-transform:none}
.pos-tag.danger{background:var(--danger-tint);color:var(--danger)}
.pos-tag.muted{background:#F1F1F1;color:var(--muted)}
.pos-line.unit .pos-line-name{white-space:normal}
.pos-line-pair{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.pos-qty.one{border:0;height:auto;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}

/* size run picker */
.pos-sizepick{display:flex;flex-direction:column;gap:12px;min-width:0}
.pos-sp-head{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pos-sp-meta{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}
.pos-sp-meta b{font-family:var(--display);font-size:18px;font-weight:800;line-height:1.15}
.pos-sp-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pos-sp-label b{color:var(--ink)}
.pos-sizerun{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.pos-size{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.pos-size b{font-family:var(--display);font-size:16px;font-weight:800;line-height:1.1}
.pos-size small{font-size:10.5px;color:var(--ok);font-weight:700}
.pos-size.zero{background:#F6F4F1;color:var(--muted)}
.pos-size.zero small{color:var(--muted);font-weight:600}
.pos-size.zero b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.7}
.pos-size:hover{border-color:var(--orange)}
.pos-size.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pos-size.on small{color:var(--orange-tint)}
.pos-pairs{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.pos-pair{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.pos-pair:first-child{border-color:var(--orange)}
.pos-pair-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.pos-pair-top{display:flex;align-items:center;gap:6px}
.pos-pair-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pos-pair-sub{font-size:12px}
.pos-pair-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.pos-pair-side b{font-family:var(--display);font-weight:800;font-size:15px}
.pos-fifo{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7A5230;background:var(--orange-tint);padding:1px 6px;border-radius:5px}
.pos-pairs-empty{display:flex;gap:8px;align-items:flex-start;padding:12px;border:1px dashed var(--line);border-radius:12px;color:var(--body);font-size:13px}
.pos-pairs-empty svg{flex:none;color:var(--orange);margin-top:1px}
.pos-payout-note b{font-family:var(--mono,monospace)}
.rc-legit{font-size:11px;text-align:center;line-height:1.4}
@media (max-width:600px){
  .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-style{min-height:0}
  .pos-shoe.lg{width:96px;height:56px}
  .pos-pair{flex-direction:column;align-items:stretch}
  .pos-pair-side{flex-direction:row;align-items:center;justify-content:space-between}
  .pos-legit{white-space:normal;border-radius:9px}
}

.pos-only-m{display:none}
@media (max-width:600px){.pos-col-pair{display:none}.pos-only-m{display:block}}