/* Desk sales screen (staff). Big tap targets for a tablet at the desk; stacks on phones. */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.pos-find{margin-bottom:10px}
.pos-find input{width:100%;min-height:48px;font-size:1.05rem;padding-left:42px;background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E") no-repeat 13px 50%}
.pos-cats{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pos-cats::-webkit-scrollbar{display:none}
.pos-cats button{flex:none;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--cream-2);padding:10px 18px;font:700 .95rem var(--body);cursor:pointer;color:var(--ink)}
.pos-cats button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pos-item{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;border:2px solid var(--line);background:var(--cream-2);padding:8px 8px 10px;cursor:pointer;font:600 1rem/1.25 var(--body);color:var(--ink);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.pos-item:hover{background:var(--beige)}
.pos-item:active{transform:scale(.97)}
.pos-item.on{border-color:var(--ink);background:#fff}
.pos-item.out{opacity:.55}
.pos-item.pop{animation:pos-pop .28s ease}
@keyframes pos-pop{40%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pos-item.pop{animation:none}}
.pos-pic{position:relative;display:block;width:100%;height:0;padding-top:62%;overflow:hidden;background:var(--beige)}
.pos-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pos-pic.none{background-color:var(--leather);background-image:var(--grain)}
.pos-pic i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 2rem/1 var(--display);font-style:normal;color:var(--cream);letter-spacing:.02em;opacity:.92}
.pos-pic.none::after{content:"";position:absolute;inset:5px;border:1px dashed rgba(244,236,222,.45);pointer-events:none}
.pos-n{position:absolute;top:2px;right:2px;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--ink);color:var(--cream);font:700 1.05rem/34px var(--body);font-style:normal;text-align:center;box-shadow:0 0 0 3px var(--cream-2)}
.pos-name{padding:0 4px;min-height:2.5em}
.pos-name small{display:block;color:var(--muted);font-weight:600;font-size:.85rem}
.pos-foot{display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex-wrap:wrap;padding:0 4px;margin-top:auto}
.pos-item b{font-size:1.2rem}
.pos-item small{color:var(--muted);font-weight:600}
.pos-item small.low{color:#a3271f}
.pos-var{min-height:96px;padding:12px}
.pos-var .pos-name{font-size:1.1rem;min-height:0}
.pos-basket{position:sticky;top:12px;margin:0}
.pos-bhead{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pos-bhead h2{font-size:1.4rem;margin:0}
.pos-count{font-weight:700;color:var(--muted)}
.pos-bhead .linkbtn{margin-left:auto;min-height:40px}
.pos-lines{list-style:none;margin:0 0 10px;padding:0}
.pos-lines li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.pos-lname{line-height:1.25}
.pos-lname small{display:block;color:var(--muted);font-size:.85rem}
.pos-lines b{font-size:1.1rem}
.pos-lines .qty{display:flex;align-items:center;border:1px solid var(--line);background:var(--cream)}
.pos-lines .qty span{min-width:26px;text-align:center;font-weight:700}
.pos-lines .qty button{width:40px;height:40px;border:0;background:transparent;font:700 1.2rem var(--body);cursor:pointer;color:var(--ink)}
.pos-lines .qty button:active{background:var(--beige)}
.pos-lines li.pos-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 0;color:var(--muted);border-bottom:1px dashed var(--line)}
.pos-empty span{font-size:1.8rem;filter:grayscale(1);opacity:.6}
.pos-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.2rem;margin:6px 0 12px}
.pos-total b{font:400 2.4rem/1 var(--display)}
.pos-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 8px}
.pos-pay .btn{padding:20px 10px;font-size:1.1rem}
.pos-pay [data-pay=member_account]{grid-column:1/-1;padding:14px 10px}
.pos-bar{display:none}
.pos-member-results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--cream-2);padding:10px;cursor:pointer;font:600 1rem var(--body);color:var(--ink)}
#pos-full{margin:8px 0}
#pos-full summary{cursor:pointer;font-weight:600;font-size:.95rem}
.pos-change{font:400 2rem/1.1 var(--display);margin:6px 0 12px}
.pos-change:empty{display:none}
.pos-due{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem}
.pos-due b{font:400 2rem/1 var(--display)}
.pos-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:14px}
.pos-quick button{min-height:52px;border:2px solid var(--line);background:var(--cream-2);padding:10px;font:700 1.1rem var(--body);cursor:pointer;color:var(--ink)}
.pos-quick button.exact{grid-column:1/-1}
.pos-quick button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pos-receipt{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.vf-qr{margin:0;text-align:center;font:700 .8rem var(--body);letter-spacing:.05em}
.vf-qr img{display:block;width:150px;height:150px;background:#fff;padding:6px}
.st-neg{color:#a3271f;font-weight:700}
#ret-items label{display:flex;justify-content:space-between;align-items:center;gap:10px}
#ret-items input{width:80px}
@media (max-width:860px){
  .pos{grid-template-columns:minmax(0,1fr)}.pos-basket{position:static;scroll-margin-top:12px}
  .pos-bar{position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:12px;padding:10px 18px;border:0;background:var(--ink);color:var(--cream);font:700 1.05rem var(--body);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .2s,transform .2s}
  .pos-bar b{margin-left:auto;font:400 1.5rem/1 var(--display)}
  .pos-bar.away{opacity:0;transform:translateY(12px);pointer-events:none}
}
@media (max-width:420px){.pos-lines li{grid-template-columns:1fr auto;gap:6px 10px}.pos-lines .qty{grid-row:2;justify-self:start}.pos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pos-item{font-size:.95rem}.pos-pic i{font-size:1.6rem}}

/* Deliveries: a supplier's delivery note → stock. */
.dl-form{display:flex;flex-direction:column;gap:10px}
.dl-form label{margin:4px 0 0}
.dl-head{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#dl-q{min-height:50px;font-size:1.05rem}
.dl-results{display:grid;gap:6px}
.dl-results:empty{display:none}
.dl-results button{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:6px 12px 6px 6px;border:1px solid var(--line);background:#fff;text-align:left;cursor:pointer;font:600 1rem/1.25 var(--body);color:var(--ink)}
.dl-results button:hover{background:var(--cream-2)}
.dl-results small,.dl-name small{display:block;color:var(--muted);font-weight:500;font-size:.85rem}
.dl-results b{font:400 1.6rem/1 var(--display);padding:0 6px}
.dl-results .pos-pic,.dl-lines .pos-pic{width:64px;padding-top:40px}
.dl-results .pos-pic i,.dl-lines .pos-pic i{font-size:1rem}
.dl-lines{list-style:none;margin:0;padding:0}
.dl-lines li{display:grid;grid-template-columns:64px 1fr auto auto;gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.dl-lines .qty{display:flex;align-items:center;border:1px solid var(--line);background:var(--cream)}
.dl-lines .qty button{width:40px;height:44px;border:0;background:transparent;font:700 1.2rem var(--body);cursor:pointer;color:var(--ink)}
.dl-lines .qty input{width:52px;min-height:44px;border:0;text-align:center;font:700 1.1rem var(--body);padding:0;background:transparent}
.dl-cost{display:flex;flex-direction:column;font-size:.78rem;color:var(--muted);margin:0!important}
.dl-cost input{width:96px;min-height:44px}
.dl-sum{padding:4px 0;font-size:1.02rem}
.dl-history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dl-history>li{border:1px solid var(--line);background:var(--cream-2)}
.dl-history .empty{padding:18px;color:var(--muted);text-align:center}
.dl-history summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;min-height:44px}
.dl-history summary::-webkit-details-marker{display:none}
.dl-h-n{text-align:right;white-space:nowrap}
.dl-history ul{list-style:none;margin:0;padding:0 14px 10px}
.dl-history ul li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.dl-history details p{margin:0 14px 12px}
.dl-drop{display:flex;align-items:center;gap:14px;padding:16px;border:2px dashed var(--ink);background:var(--cream-2);cursor:pointer;margin:0!important;min-height:64px}
.dl-drop:hover{background:var(--cream)}
.dl-drop.busy{opacity:.5;pointer-events:none}
.dl-drop-ic{font-size:2rem;line-height:1}
.dl-drop b{display:block;font-size:1.08rem}
.dl-drop small{display:block;color:var(--muted);font-size:.88rem;font-weight:500}
#dl-file:focus-visible+.dl-doc,.dl-up:focus-within .dl-drop{outline:2px solid var(--ink);outline-offset:2px}
.dl-doc:empty{display:none}
.dl-doc{margin-top:10px;padding:12px 14px;border:1px solid var(--line);background:#fff;display:grid;gap:8px}
.dl-doc p{margin:0}
.dl-reading{display:flex;align-items:center;font-weight:600}
.dl-doc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.dl-x{margin-left:auto;background:none;border:0;padding:8px 0 8px 10px;min-height:40px;font:600 .9rem var(--body);color:var(--muted);text-decoration:underline;cursor:pointer}
.dl-note-ai{font-size:.92rem;padding:8px 10px;background:var(--cream-2);border-left:3px solid var(--ink)}
.dl-warn{font-size:.92rem;padding:8px 10px;background:#fff4e0;border-left:3px solid #c77700;color:#5a3600}
.dl-check{display:inline-block;font:700 .7rem/1 var(--body);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;background:#fff4e0;color:#5a3600;border:1px solid #e0b060;vertical-align:2px}
.dl-name .dl-read{font-style:italic}
.dl-left ul{list-style:none;margin:6px 0;padding:0}
.dl-left li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.dl-left li.on{background:var(--cream-2);margin:0 -14px;padding:8px 14px}
.dl-left li>span:first-child{min-width:0;overflow-wrap:anywhere}
.dl-left small{display:block;color:var(--muted);font-size:.85rem}
.dl-left-b{display:flex;gap:6px;flex:none}
.dl-left-b .btn{min-height:40px;padding:8px 12px}
.dl-h-doc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.92rem}
.dl-h-doc .btn{min-height:40px;padding:8px 12px}
@media (max-width:560px){
  .dl-left li{flex-direction:column;align-items:stretch}
  .dl-left-b .btn{flex:1}
  .dl-head{grid-template-columns:1fr}
  .dl-lines li{grid-template-columns:52px 1fr;}
  .dl-lines .pos-pic{width:52px;padding-top:33px}
  .dl-lines .qty{grid-column:2;justify-self:start}
  .dl-lines .dl-cost{grid-column:2;flex-direction:row;align-items:center;gap:8px}
}