/* Écran « Vendre » (views/sell.js) — caisse façon iOS : grille d'articles en photos, panier en panneau (iPad / PC)
   ou en barre du bas (iPhone), encaissement en feuille. Uniquement les variables de base.css (clair / sombre automatiques). */

/* ---------- mise en page ---------- */
.sl-split { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 16px; align-items: start; }
@media (max-width: 1199px) { .sl-split { grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; } .sl-split .sl-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; } .sl-split .sl-tn { font-size: 13px; } }
.sl-left { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-gridwrap { min-width: 0; }
.sl-gridwrap .sv-sect + .sv-sect { margin-top: 14px; }
.sl-gridwrap .section-title { margin: 4px 4px 8px; }

/* Onglets des catégories : une rangée qui défile, collée sous la barre de navigation. */
.sl-cats { position: sticky; top: var(--top-h); z-index: 6; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 8px; margin: -6px 0 0;
  background: linear-gradient(var(--bg) 80%, transparent); }
.sl-cats::-webkit-scrollbar { display: none; }
.sl-cat { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 15px; border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 500;
  letter-spacing: -.01em; color: var(--text); transition: background .15s, color .15s, transform .2s var(--spring); }
.sl-cat:active { transform: scale(.95); }
.sl-cat.on { background: var(--accent); color: #fff; font-weight: 600; }
.sl-cat svg.i { color: var(--orange); } .sl-cat.on svg.i { color: #fff; }

/* ---------- tuiles des articles ---------- */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.sl-tile { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; text-align: left; min-width: 0;
  transition: transform .28s var(--spring), box-shadow .2s; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sl-tile:active { transform: scale(.955); transition-duration: .06s; }
.sl-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-tile.hit { animation: sl-hit .45s var(--spring); }
@keyframes sl-hit { 30% { box-shadow: 0 0 0 3px var(--accent); transform: scale(.97); } }
.sl-ph { position: relative; display: block; }
.sl-ph .media-tile { border-radius: 0; aspect-ratio: 1; }
.sl-badge { position: absolute; top: 7px; right: 7px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: sl-pop .3s var(--spring); }
@keyframes sl-pop { from { transform: scale(.4); opacity: 0; } }
.sl-fav { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #ffd60a;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sl-fav svg.i { width: 13px; height: 13px; fill: currentColor; }
.sl-tt { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px 10px; flex: 1; justify-content: space-between; }
.sl-tn { font-size: 14px; font-weight: 500; line-height: 1.22; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.44em; }
.sl-tp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.sl-low { font-size: 11px; font-weight: 600; color: var(--red); white-space: nowrap; }
/* [Claude 2026-11-05] stock item without a POS price yet */
.sl-tile.pending { opacity: .6; } .sl-tile.pending .media-tile { filter: grayscale(.8); } .sl-tile.pending .sl-tp { color: var(--orange); }
.sl-tile.out { opacity: .45; } .sl-tile.out .media-tile { filter: grayscale(1); } .sl-tile.out .sl-tp { color: var(--red); }

/* ---------- le panier ---------- */
.sl-cart { position: sticky; top: calc(var(--top-h) + 10px); max-height: calc(100dvh - var(--top-h) - 24px); display: flex; flex-direction: column; border-radius: 18px; }
.sl-cart.in-sheet { position: static; max-height: none; border-radius: 16px; }
.sl-chead { display: flex; align-items: center; gap: 4px; padding: 10px 8px 8px 10px; }
/* [GPT 2026-10-28] Clear is labelled beside the cart title and on the phone bar; pending payment stays visibly locked. */
.sl-cart-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 0}.sl-clear{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:66px;min-height:44px;color:var(--red)}.sl-clear:disabled{color:var(--muted);opacity:.45}.sl-pending-notice{border:1px solid color-mix(in srgb,var(--red) 35%,transparent);color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--surface))!important}.sl-pending-notice>.grow{min-width:0}.mobile-bar.sl-bar{grid-template-columns:minmax(0,1fr) auto minmax(100px,.9fr)}.mobile-bar.sl-bar .sl-clear{font-size:14px;padding:8px}.mobile-bar.sl-bar .sl-paybtn{min-width:0}
.sl-cust { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; text-align: left; color: var(--text); }
.sl-cust.add { color: var(--accent-text); font-weight: 500; }
@media (hover: hover) { .sl-cust:hover { background: var(--hover); } }
.sl-cust:active { background: var(--pressed); }
.sl-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--fill); color: var(--accent-text); font-weight: 600; font-size: 15px; }
.sl-av.on { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, white), var(--accent)); color: #fff; }
.sl-park { position: relative; color: var(--accent-text); }
.sl-park .badge { position: absolute; top: 2px; right: 0; padding: 0 5px; min-width: 18px; height: 18px; font-size: 11px; }
.sl-notes { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 8px; }
.sl-notes .notice { background: var(--surface-2); }
.sl-kind { padding: 0 12px 10px; }
.sl-cscroll { flex: 1; min-height: 120px; overflow: auto; border-top: .5px solid var(--line-2); overscroll-behavior: contain; }
.sl-cart.in-sheet .sl-cscroll { overflow: visible; }
.sl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); font-size: 15px; padding: 36px 20px; min-height: 180px; }
.sl-empty-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--fill); color: var(--faint); }
.sl-lines > .item { padding: 8px 12px 8px 10px; gap: 8px; }
.sl-lines > .item:not(:last-child)::after { left: 60px; }
.sl-lmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 2px 0; border-radius: 10px; }
.sl-lmain:active { opacity: .6; }
.sl-ln { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-lsub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sl-note { color: var(--orange); font-weight: 500; }
.sl-tag { display: inline-flex; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 18px; background: var(--green-soft); color: var(--green); letter-spacing: 0; }
.sl-tag.o { background: var(--orange-soft); color: var(--orange); } .sl-tag.b { background: var(--blue-soft); color: var(--blue); }
.sl-lp { font-size: 15px; font-weight: 600; white-space: nowrap; min-width: 62px; text-align: right; }
.sl-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fill); flex: none; }
.sl-step button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-text); transition: background .1s; }
.sl-step button:active { background: var(--surface); }
.sl-step span { min-width: 22px; text-align: center; font-weight: 600; font-size: 15px; }
.sl-ex { background: color-mix(in srgb, var(--red) 7%, var(--surface)); }
.sl-neg { color: var(--red); font-weight: 600; }
.sl-o { color: var(--orange); }
.sl-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 16px; border-top: .5px solid var(--line-2); }
.sl-links .link { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; padding: 4px 0; }
.sl-totals { border-top: .5px solid var(--line-2); }
.sl-totals > .item { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.sl-totals > .item.muted { color: var(--muted); font-size: 15px; }
.sl-totals > .item.small { font-size: 13px; }
.sl-totals > .item.grand { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sl-totals > .item.strong { font-weight: 600; }
.sl-totals > button.item { width: 100%; text-align: left; }
.sl-pay { padding: 4px 12px 12px; }
.sl-paybtn { min-height: 60px; font-size: 19px; border-radius: 16px; font-variant-numeric: tabular-nums; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.sl-paybtn:disabled { box-shadow: none; }

/* ---------- iPhone : la barre du panier au-dessus des onglets ---------- */
.mobile-bar.sl-bar { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.sl-barinfo { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; padding: 0 6px; border-radius: 12px; color: var(--text); }
.sl-barinfo:active { background: var(--pressed); }
.sl-barcount { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.sl-barinfo svg.i { color: var(--muted); transform: rotate(180deg); }
.mobile-bar.sl-bar .btn { font-size: 18px; }
@media (min-width: 900px) { .mobile-bar.sl-bar { left: var(--nav-w); bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } }
.sl-sheet > .inner { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ---------- feuilles : ligne, client, retour ---------- */
.sl-lhead { display: flex; align-items: center; gap: 12px; }
.sl-ltot { font-family: var(--rounded); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sl-qbtn { background: var(--surface); border-radius: 12px; min-height: 52px; }
.sl-chips { flex-wrap: wrap; }
.sl-chips .chips { justify-content: flex-end; }
.modal .section-title { margin: 6px 4px 0; }
.sl-newc { padding: 12px; display: grid; gap: 8px; }
.sl-plink { text-align: left; min-width: 0; }
.sl-pick { max-height: 52vh; overflow: auto; }
.sl-code { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: var(--surface); border-radius: 14px; }
.sl-code .num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.sl-code svg.i { color: var(--muted); }
.sl-rline.off { opacity: .5; }
.sl-toggle { background: var(--surface); border-radius: var(--radius); padding: 10px 16px; }
.sl-st.r { color: var(--red); font-weight: 600; } .sl-st.o { color: var(--orange); font-weight: 600; }
.sl-off { text-decoration: line-through; }
.sl-rhead { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 4px 0 2px; }
.sl-rtotal { font-family: var(--rounded); font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.sl-retbtn { color: var(--red); background: var(--surface); }
.sl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .sl-kpis .kpi .v { font-size: 20px; } .sl-kpis .kpi { padding: 12px; } }
.sl-in input { width: 96px; min-height: 36px; padding: 6px 10px; text-align: right; }

/* ---------- encaissement ---------- */
.sl-paysheet .paygrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 760px) { .sl-paysheet .paygrid { grid-template-columns: 1fr; } }
.sl-paygrid > .sl-validate { grid-column: 1 / -1; min-height: 58px; font-size: 19px; border-radius: 16px; }
.sl-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-tenders > .item { padding-top: 8px; padding-bottom: 8px; }
.sl-exact { background: var(--accent); color: #fff; font-weight: 600; }
.sl-notes-row .sl-note-chip { background: var(--surface); font-variant-numeric: tabular-nums; }
.sl-paydone { display: grid; place-items: center; min-height: 200px; border-radius: 16px; background: var(--green-soft); color: var(--green); }
.sl-paydone svg.i { width: 64px; height: 64px; stroke-width: 2.4; }
.sl-validate .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }

/* Vente terminée */
.sl-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0 4px; }
.sl-donecheck { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; animation: sl-pop .45s var(--spring); }
.sl-donecheck svg.i { width: 40px; height: 40px; stroke-width: 3; }
.sl-donettl { font-size: 17px; font-weight: 600; color: var(--muted); }
.sl-donetotal { font-family: var(--rounded); font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.sl-donebtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.sl-donebtns .btn { flex-direction: column; gap: 4px; min-height: 64px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); padding: 8px 4px; white-space: normal; }
.sl-donebtns .btn svg.i { color: var(--accent-text); width: 22px; height: 22px; }

/* ---------- caméra ---------- */
.sl-cam { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.sl-cam.off { display: none; }
.sl-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-aim { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: var(--red); box-shadow: 0 0 12px var(--red); animation: sl-aim 1.6s ease-in-out infinite alternate; }
@keyframes sl-aim { from { transform: translateY(-40px); } to { transform: translateY(40px); } }

/* ---------- étiquettes ---------- */
.sl-lab { max-height: 50vh; overflow: auto; }
.sl-lab > .item.on { background: var(--accent-soft); }
.sl-labprev { background: var(--surface-3); border-radius: 12px; padding: 10px; overflow: auto; }
.sl-labframe { display: block; width: 100%; height: min(70vh, 1120px); min-height: 420px; border: 0; border-radius: 6px; background: #fff; }

/* ---------- téléphone ---------- */
@media (max-width: 640px) {
  .sl-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .sl-tt { padding: 6px 8px 8px; }
  .sl-tn { font-size: 13px; }
  .sl-tp { font-size: 14px; }
  .sl-badge { top: 5px; right: 5px; min-width: 24px; height: 24px; font-size: 13px; }
  .sl-paysheet .kpi .v { font-size: 22px; }
  .sl-paysheet .kpi { padding: 10px 12px; }
  .sl-paysheet .pad button { min-height: 50px; }
  .sl-paysheet .amount { min-height: 56px; font-size: 32px; }
  .sl-cats { top: calc(var(--top-h) + env(safe-area-inset-top)); }
}

/* [GPT 2026-10-28] A compact, bounded catalogue keeps five hundred products readable without loading five hundred photos. */
.sl-browser-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 0 12px}
.sl-browser-caption{display:flex;flex-direction:column;gap:4px;min-width:0}.sl-browser-caption h2{font-size:22px;margin:0}
.sl-view-choice{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--fill)}.sl-view-choice button{display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 11px;border-radius:10px;color:var(--muted);font-size:14px}.sl-view-choice button.on{background:var(--surface);color:var(--accent-text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sl-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:16px}.sl-category-card{display:flex;align-items:center;gap:12px;padding:18px 14px;min-height:88px;text-align:left;background:var(--surface);border-radius:16px;color:var(--text)}.sl-category-card .grow{display:flex;flex-direction:column;gap:5px;min-width:0}.sl-category-card strong{font-size:16px}.sl-category-card>.i{flex:none;color:var(--muted)}
.sl-product-list{display:flex;flex-direction:column;gap:5px}.sl-tile.sl-product-row{display:flex;flex-direction:row;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:12px;content-visibility:auto;contain-intrinsic-size:auto 64px}.sl-product-row .sl-tt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:4px;flex:1;padding:0;min-width:0}.sl-product-row .sl-tn{grid-column:1;grid-row:1;font-size:15px;line-height:1.35;white-space:normal;-webkit-line-clamp:unset;overflow:visible}.sl-product-row .sl-product-code{grid-column:1;grid-row:2;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sl-product-row .sl-tp{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:15px;white-space:nowrap}.sl-product-row .sl-badge{position:static;flex:none;min-width:28px;width:auto;height:28px;font-size:13px;box-shadow:none}.sl-tile:disabled{cursor:default}
.sl-show-more{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 0}.sl-show-more .btn{min-height:44px}
@media(max-width:640px){.sl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sl-category-card{padding:13px 10px;min-height:86px;gap:8px}.sl-category-card .itile{display:none}.sl-category-card strong{font-size:14px}.sl-product-row .sl-tt{column-gap:10px}.sl-product-row .sl-tn,.sl-product-row .sl-tp{font-size:14px}.sl-tile.sl-product-row{padding:11px 12px;gap:7px}.sl-view-choice button{min-height:42px;padding:8px 10px}.sl-show-more{flex-wrap:wrap}.sl-browser-controls{gap:9px}}
/* [GPT 2026-10-28] Keep cart, labelled clear and payment reachable together on portrait/phone layouts. */
.mobile-bar.sl-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr)}
@media(max-width:420px){.mobile-bar.sl-bar{gap:5px}.mobile-bar.sl-bar>.btn.primary{font-size:15px;padding-left:8px;padding-right:8px}.sl-barinfo{gap:6px;padding-left:0}.sl-barcount{min-width:26px;padding:0 6px}.mobile-bar.sl-bar .sl-clear{min-width:58px;padding:6px;gap:3px}}

/* [Claude 2026-11-07] Customer picker (Hadi: « super ugly »): a wide popup with one big search, cards in two columns where the
   screen allows, the typed part highlighted, chips for price list / points / credit, and an inline « Nouveau client » panel. */
.customer-lookup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cl-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 52px; border-radius: 14px; background: var(--fill, var(--hover)); border: 1px solid transparent; }
.cl-search:focus-within { border-color: var(--accent); background: var(--surface); }
.cl-search .i { color: var(--muted); flex: none; }
.cl-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--text); padding: 12px 0; outline: none; }
.cl-search .cl-input::-webkit-search-cancel-button { display: none; }
.cl-clear { flex: none; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; color: var(--muted); }
.cl-head { display: flex; justify-content: space-between; padding: 0 2px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; padding: 2px; }
.cl-grid[aria-busy="true"] { opacity: .55; }
.cl-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; color: var(--text); }
.cl-row .i:last-child { color: var(--muted); }
@media (hover: hover) { .cl-row:hover { border-color: var(--accent); } }
.cl-row:active, .cl-row.focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cl-av { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text, var(--accent)); }
.cl-av.co { border-radius: 12px; background: color-mix(in srgb, var(--blue, #2f6fdb) 14%, var(--surface)); color: var(--blue, #2f6fdb); }
.cl-av.new { background: var(--accent); color: #fff; }
.cl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-txt strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-txt small { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-txt mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.cl-chip { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: var(--hover); color: var(--muted); }
.cl-chip.bad { background: color-mix(in srgb, var(--red, #c0392b) 14%, transparent); color: var(--red, #c0392b); }
.cl-chip.warn { background: color-mix(in srgb, var(--orange, #b7791f) 16%, transparent); color: var(--orange, #b7791f); }
.cl-new { border-style: dashed; }
.cl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 8px; color: var(--muted); text-align: center; }
.cl-create { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--fill, var(--hover)); }
.cl-create-head { display: flex; justify-content: space-between; align-items: center; }
.cl-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-create-row .cl-input { background: var(--surface); border-radius: 12px; padding: 12px; font-size: 17px; min-height: 48px; }
.cl-err:empty { display: none; }
.cl-err { color: var(--red, #c0392b); font-size: 14px; }
.cl-newbtn { align-self: flex-start; min-height: 44px; }
.cl-sheet:has(.cl-create:not([hidden])) .cl-newbtn { display: none; }
@media (max-width: 640px) { .cl-grid { grid-template-columns: 1fr; max-height: 48vh; } .cl-create-row { grid-template-columns: 1fr; } }
.cl-create[hidden], .cl-clear[hidden] { display: none; }
.cl-search .cl-input, .cl-search .cl-input:focus { border: 0; box-shadow: none; outline: none; background: transparent; border-radius: 0; min-height: 0; }
.cl-create-row .cl-input { border: 1px solid var(--line); }
.cl-create-row .cl-input:focus { border-color: var(--accent); outline: none; }
/* [Claude 2026-11-07] UX w0: a cashier on the POS (counter mode) never sees « Actions » in the header (it leads nowhere there). */
html.pos-limited .action-corner-trigger{display:none}
/* [Claude 2026-11-07] UX w0: the takeover card (another login holds the drawer) — text on top, one big button under it. */
.sl-notes .notice.sl-desk-held { flex-wrap: wrap; align-items: flex-start; background: color-mix(in srgb, var(--orange) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); }
.sl-desk-held > .grow { flex: 1 1 180px; min-width: 0; }
.sl-desk-held > .grow strong { display: block; font-size: 16px; }
.sl-desk-held > .btn { flex: 1 1 100%; min-height: 48px; }
.sl-notes .cw-delivery{width:100%;min-height:52px;text-align:left;cursor:pointer;font:inherit;color:inherit;background:color-mix(in srgb,var(--blue) 12%,var(--surface))}
.sl-notes .cw-delivery .btn{pointer-events:none}
.sl-held-items { white-space: normal; line-height: 1.35; }
.sl-held-btn .badge.count { margin-left: 6px; }
/* [Claude 2026-11-07] UX w0: basket − / qty / + are 44 px touch targets; the quantity pad for stems. */
.sl-step button { width: 44px; height: 44px; }
.sl-step .sl-qty { width: auto; min-width: 44px; padding: 0 6px; border-radius: 22px; font-weight: 600; font-size: 16px; color: var(--text); }
.sl-qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-qbtn { min-height: 64px; font-size: 22px; font-weight: 700; }
/* [Claude 2026-11-07] Role homes · cashier: the « À faire » strip above the POS catalogue (one pill = one thing to do now). */
.sl-todo{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.sl-todo::-webkit-scrollbar{display:none}
.sl-todo[hidden]{display:none}
.sl-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:300px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;flex:none}
.sl-pill:active{transform:scale(.97)}
.sl-pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sl-pill.go{background:var(--accent);color:#fff;border-color:transparent}
.sl-pill.blue{background:color-mix(in srgb,var(--blue) 14%,var(--surface));border-color:color-mix(in srgb,var(--blue) 40%,transparent)}
.sl-pill.orange{background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 40%,transparent)}
.sl-pill.task .i{color:var(--accent)}
.sl-pill.ghost{background:transparent}
.sl-pill-time{color:var(--muted);font-weight:500}
/* [GPT 2026-11-10] A distinct basket surface, compact browse area and a checkout that stays within the viewport. */
.sl-cart { top: calc(var(--app-bar-h, var(--top-h)) + 12px); max-height: calc(100dvh - var(--app-bar-h, var(--top-h)) - 24px); border: 1px solid var(--line); }
.sl-cart.in-sheet { max-height: none; }
.sl-cart-heading { padding: 12px 14px 8px; }
.sl-cart-title { display: flex; align-items: center; gap: 10px; }
.sl-cart-title strong { display: block; font-size: 18px; }
.sl-cart-title .small { display: block; }
.sl-cart-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.sl-chead { padding: 0 12px 10px; }
.sl-cust { min-height: 44px; border: 1px solid var(--line); }
.sl-cart .sl-cscroll { min-height: 64px; }
.sl-cart .sl-empty { padding: 18px 14px; min-height: 126px; }
.sl-cart .sl-totals,.sl-cart .sl-pay { background: var(--surface-2); }
.sl-cart .sl-pay { padding: 7px 12px 12px; }
.sl-cart .sl-paybtn { min-height: 51px; box-shadow: none; }
.sl-cats { top: var(--app-bar-h, var(--top-h)); }
.sl-cat { min-height: 42px; }
.sl-tile:not(.sl-product-row) { border: 1px solid var(--line); }
.sl-tn { font-weight: 600; }
.sl-step button { min-width: 38px; min-height: 40px; }
@media (max-width: 640px) { .sl-cat { min-height: 44px; } .sl-cart .sl-pay { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } }

/* [Claude 2026-11-10] The till (1280 × 720): the title, tabs, search and headings took 460 px and one row of products was
   visible. On a POS terminal's selling screen the page title goes (the tab already says « POS »), tabs + search + actions share
   one row, and the product heading and tiles are tighter: two full rows of products above the fold. Wide screens only. */
@media (min-width: 900px) {
  html.pos-terminal body:has(#view > .sl-split) .ltitle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 8px; }
  html.pos-terminal body:has(#view > .sl-split) .ltitle .lt-row { display: contents; }
  html.pos-terminal body:has(#view > .sl-split) .ltitle h1.lt { display: none; }
  html.pos-terminal body:has(#view > .sl-split) .ltitle #lt-seg { grid-column: 1; grid-row: 1; min-width: 420px; }
  html.pos-terminal body:has(#view > .sl-split) .ltitle #lt-tools { grid-column: 2; grid-row: 1; min-width: 0; }
  html.pos-terminal body:has(#view > .sl-split) .ltitle #top-actions { grid-column: 3; grid-row: 1; }
  html.pos-terminal .sl-browser-controls { min-height: 0; padding-block: 2px; }
  html.pos-terminal .sl-browser-caption { display: flex; align-items: baseline; gap: 8px; }
  html.pos-terminal .sl-todo { padding-block: 2px; }
}
@media (min-width: 900px) and (max-height: 800px) {
  html.pos-terminal .sl-grid .sl-tile .sl-ph .media-tile { aspect-ratio: 4 / 3; object-fit: cover; }
  html.pos-terminal .sl-cats { padding-block: 4px; }
}