/* Scalpia POS — till screen (catalogue, ticket, phone pay bar, line editor, variant and option pickers, open tickets): owned by
   the "till" screen agent of the native redesign; builds on web/ui/native.css (read its guide) and overrides the till rules of
   web/style.css. Rules: /home/mathis/docs/audits/scalpia-pos-mobile-native-benchmark.md § 1–2.
   Phone (≤ 650 px, the till's breakpoint in web/till.mjs phoneWidth()): top area = search + view toggle + scan on one row,
   category tabs under it, item list rows (72 px) or a 3-column grid, a full-width bottom bar [🛒 n | Bayar · Rp X]; the
   ticket is its own full screen (app bar ← title % 🗑 ⋮, customer row, plain lines, total, Simpan | Bayar), a line opens
   the line editor page, swipe left removes it (Undo in the snackbar). Tablet: catalogue left, ticket pane right. */

/* ── Shared ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.till-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Catalogue top: [count] [search] [tools] on one row, categories under it. */
.catalog-head{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);margin:0}
.catalog-head .catalog-count{display:none;flex:0 1 auto;max-width:180px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.catalog-search{flex:1 1 auto;min-width:0}
.catalog-search .search-wrap svg{left:var(--space-4);width:var(--icon);height:var(--icon);color:var(--text-muted)}
.catalog-search .search{min-height:var(--touch);padding:0 var(--space-4) 0 calc(var(--space-4) + var(--icon) + var(--space-3));border:0;border-radius:var(--radius-full);background:var(--field-bg);font-size:var(--text-lg);color:var(--text)}
.catalog-search .search:focus{box-shadow:inset 0 0 0 2px var(--primary);outline:0}
.till-tools{display:flex;align-items:center;gap:0;flex:none}
.till-tools .icon-button{display:inline-grid;color:var(--text-muted)}
.till-tools .tool-label{display:none}
.tile-switch{display:inline-flex;gap:0;padding:0;border:0;border-radius:var(--radius-full);background:transparent}
.tile-switch .icon-button.active,.till-tools .color-toggle.active{background:var(--tonal-bg);color:var(--tonal-fg)}
.till-tools .tile-view{display:none}
.till-tools .color-toggle{min-width:var(--touch);padding:0;border:0}
.till-tools .focus-toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-full);font-size:var(--text-md);font-weight:var(--weight-semibold);white-space:nowrap}
.till-tools .focus-toggle .tool-label-short{display:none}
.till-tools .focus-toggle .tool-label{display:none}
.till-tools .focus-toggle{width:var(--touch);padding:0;justify-content:center}
.till-tools .focus-toggle.active{background:var(--tonal-bg);color:var(--tonal-fg)}
/* Categories: text tabs, the chosen one in a tonal pill (≥ 44 px targets). */
.categories{gap:var(--space-1);padding:var(--space-2) 0}
.category{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);font-size:var(--text-md);font-weight:var(--weight-semibold);white-space:nowrap}
.category.active{background:var(--tonal-bg);color:var(--tonal-fg)}
.categories-wrap.has-more .categories-more{border:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-2)}

/* Items: tiles keep a hairline instead of a shadow; a round badge counts what is already in the ticket. */
.item-card{box-shadow:inset 0 0 0 1px var(--border);color:var(--text);-webkit-touch-callout:none;user-select:none;position:relative}
.item-card.in-cart{outline:2px solid var(--primary);outline-offset:-2px}
.item-card.in-cart .item-plus{visibility:hidden}
.item-card:active{background:var(--state-press);transform:none}
.item-visual{position:relative}
.item-qty{position:absolute;top:var(--space-1);right:var(--space-1);z-index:1;display:grid;place-items:center;min-width:24px;height:24px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;box-shadow:0 0 0 2px var(--surface)}
.item-price{font-variant-numeric:tabular-nums}
/* List rows (phone default, also on tablets): 48 px thumbnail, name 16 px, stock 14 px under it, price right, 72 px. */
.items-grid.tiles-list{display:flex;flex-direction:column;gap:0;border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.items-grid.tiles-list .item-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:var(--space-4);row-gap:0;width:100%;min-height:var(--row-h-2);padding:var(--space-3) var(--space-4);border:0;border-radius:0;background:var(--surface);box-shadow:inset 0 -1px 0 var(--border)}
.items-grid.tiles-list .item-card:last-child{box-shadow:none}
.items-grid.tiles-list .item-card.in-cart{background:color-mix(in srgb,var(--primary) 7%,var(--surface));outline:0}
.items-grid.tiles-list .item-visual{grid-column:1;grid-row:1/span 2;width:48px;height:48px;border-radius:var(--radius-sm);font-size:var(--text-2xl);background:var(--field-bg)}
.items-grid.tiles-list .item-visual img{border-radius:var(--radius-sm)}
.items-grid.tiles-list .tile-initials{font-size:var(--text-lg);border-radius:var(--radius-sm)}
.items-grid.tiles-list .tile-initials.long{font-size:var(--text-md)}
.items-grid.tiles-list .item-qty{top:calc(-1 * var(--space-1));right:calc(-1 * var(--space-1))}
.items-grid.tiles-list .item-card .item-visual{overflow:visible}
.items-grid.tiles-list .item-info,.items-grid.tiles-list .item-meta{display:contents}
.items-grid.tiles-list .item-name{grid-column:2;grid-row:1;display:block;min-height:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-medium);-webkit-line-clamp:unset}
.items-grid.tiles-list .item-price{grid-column:3;grid-row:1;min-width:0;text-align:right;white-space:nowrap;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-bold)}
.items-grid.tiles-list .item-stock{grid-column:2;grid-row:2;min-width:0;text-align:left;font-size:var(--text-md);line-height:var(--leading-md)}
.items-grid.tiles-list .promo-badge{grid-column:3;grid-row:2;justify-self:end;margin-top:2px}
.items-grid.tiles-list .item-plus{display:none}
/* Grid tiles at every width (DSN c4 D1): the name the cashier reads to choose (14 px / 500, 2 lines) is never smaller than
   the price (14 px / 700); stock 12 px. The tablet grid used to fall back on the 12 px legacy name of style.css. */
.pos-main .items-grid:not(.tiles-list) .item-card .item-name{display:-webkit-box;min-height:calc(2 * var(--leading-sm));font-size:var(--text-md);line-height:var(--leading-sm);font-weight:var(--weight-medium);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pos-main .items-grid:not(.tiles-list) .item-card .item-price{font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-bold)}
.pos-main .items-grid:not(.tiles-list) .item-card .item-stock{font-size:var(--text-xs);line-height:var(--leading-xs)}

/* Ticket pane (tablet) / ticket screen (phone): app bar, customer row, plain lines, total, Simpan | Bayar. */
.basket-header{display:flex;align-items:center;gap:var(--space-1);min-height:var(--app-bar-h);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-5);border-bottom:1px solid var(--border)}
.basket-title{flex:1 1 auto;min-width:0}
.basket-header h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.basket-number{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.basket-tools{display:flex;align-items:center;gap:0;flex:none;margin:0}
.basket-tools .icon-button{display:inline-grid;color:var(--text-muted);font-size:var(--text-md)}
.basket-tools .icon-button:disabled{opacity:.38}
.basket-header .mobile-basket-back{display:none;color:var(--text)}
.basket-customer{padding:0}
.customer-button{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--row-h);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-5);border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--border);color:var(--primary);font-size:var(--text-lg);font-weight:var(--weight-medium);text-align:left}
.customer-button.has-customer{color:var(--text)}
.customer-icon{display:grid;place-items:center;flex:none;width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg)}
.customer-name{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.customer-chevron{flex:none;color:var(--text-muted)}
.basket-lines{padding:0;overflow-x:hidden}
.basket-line{position:relative;min-height:var(--row-h);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-5);border-bottom:0;box-shadow:inset 0 -1px 0 var(--border);background:var(--surface)}
.line-visual{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--field-bg)}
.line-name{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-medium);color:var(--text);background:transparent}
.line-qty{display:none;font-weight:var(--weight-regular);color:var(--text-muted)}
.line-detail{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.line-total{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.basket-line .quantity{gap:0}
.basket-line .quantity button{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--primary);font-size:var(--text-xl);font-weight:var(--weight-medium)}
.basket-line .quantity button:active{background:var(--state-press)}
.basket-line .quantity span{min-width:28px;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.basket-lines .empty{padding:var(--space-10) var(--space-6)}
.basket-lines .empty-icon{display:none}
.basket-summary{padding:var(--space-3) var(--space-5) var(--space-4);border-top:1px solid var(--border);background:var(--surface)}
.summary-row{font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted);margin-bottom:var(--space-1)}
.summary-row.total{margin:var(--space-1) 0 var(--space-3);padding-top:var(--space-2);border-top:0;font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-bold);color:var(--text);font-variant-numeric:tabular-nums}
.summary-row.total:first-child{margin-top:0;padding-top:0}
.summary-row .discount-button{color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);background:transparent}
.summary-toggle{background:transparent;color:var(--primary)}
/* Bottom of the ticket: [Simpan] [Bayar · Rp X]; on the phone catalogue the bar is [🛒 n | Bayar · Rp X]. */
.basket-bar{display:flex;align-items:stretch;gap:var(--space-2)}
.bar-save{display:flex;flex:1 1 0;min-width:0}
.save-button{flex:1 1 auto;min-width:0;min-height:var(--app-bar-h);padding:0 var(--space-3);border:0;border-radius:var(--radius-md);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-lg);font-weight:var(--weight-bold);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.checkout-button{flex:2 1 0;min-width:0;min-height:var(--app-bar-h);justify-content:center;gap:var(--space-2);padding:0 var(--space-4);border:0;border-radius:var(--radius-md);font-size:var(--text-lg);font-weight:var(--weight-bold);white-space:nowrap}
.checkout-button .checkout-total{font-variant-numeric:tabular-nums}
.checkout-button .checkout-total::before{content:'·';margin-right:var(--space-2);font-weight:var(--weight-regular)}
.checkout-button:disabled,.save-button:disabled{background:var(--field-bg);color:var(--text-muted);opacity:1}
.basket-toggle{border:0;border-radius:var(--radius-md);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-md);font-weight:var(--weight-bold)}
.bar-count{display:grid;place-items:center;min-width:24px;height:24px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--primary);color:var(--on-primary);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums}

/* Snackbar with an action (Undo after a removed line). #toasts ignores the pointer; its action takes it back. */
.toast.has-action{display:flex;align-items:center;gap:var(--space-2);padding-right:var(--space-2)}
.toast-action{flex:none;margin-left:auto;min-height:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--primary-soft);font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;pointer-events:auto}

/* ── Line editor (page on a phone, dialog on a tablet): summary, 48 px − qty + stepper, choices as rows ────────────── */
.modal .item-summary{display:flex;align-items:center;gap:var(--space-4);margin:0 0 var(--space-4)}
.modal .item-summary .item-visual{flex:none;width:56px;height:56px;border-radius:var(--radius-sm);font-size:var(--text-2xl);background:var(--field-bg);overflow:hidden}
.modal .item-summary h3{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.modal .item-summary p{margin:2px 0 0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
.qty-stepper{grid-column:1/-1;display:grid;grid-template-columns:var(--touch) minmax(0,1fr) var(--touch);align-items:center;gap:var(--space-3)}
.qty-step{display:grid;place-items:center;width:var(--touch);height:var(--touch);min-width:var(--touch);padding:0;border:0;border-radius:var(--radius-md);background:var(--tonal-bg);color:var(--tonal-fg)}
.qty-step:active{background:color-mix(in srgb,var(--tonal-bg),var(--text) 12%)}
.qty-stepper .tf-box>label{text-align:center}
.qty-stepper .tf-box>input{text-align:center;font-size:var(--text-xl);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.qty-stepper input{-moz-appearance:textfield;appearance:textfield}
.qty-stepper input::-webkit-inner-spin-button,.qty-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* « More options » (discount, note): an expand row with a chevron. */
.more-options{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding-top:0;border-top:1px solid var(--border)}
.more-options>summary{display:flex;align-items:center;cursor:pointer;color:var(--text)}
.more-options>.form-grid{padding-bottom:var(--space-3)}
.more-options>summary{min-height:var(--row-h);font-size:var(--text-lg);font-weight:var(--weight-medium);list-style:none}
.more-options>summary::after{content:'';flex:none;width:var(--icon);height:var(--icon);margin-left:auto;background:var(--text-muted);-webkit-mask:var(--mask-expand) center/contain no-repeat;mask:var(--mask-expand) center/contain no-repeat;transition:transform var(--dur-fast) var(--ease)}
.more-options[open]>summary::after{content:'';transform:rotate(180deg)}
/* Variants: full-width rows (name and stock left, price right), 72 px; the quick picker is a bottom sheet. */
.variant-picker{display:flex;flex-direction:column;gap:0}
.variant-picker.quick{margin:0 calc(-1 * var(--modal-pad))}
.variant-option{display:block;width:100%;border-radius:0}
.variant-face{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:var(--space-4);row-gap:2px;min-height:var(--row-h-2);padding:var(--space-3) var(--space-4);border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--border)}
.variant-picker:not(.quick) .variant-face{padding-left:var(--space-2)}
.variant-name{grid-column:1;grid-row:1;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.variant-price{grid-column:2;grid-row:1/span 2;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.variant-stock{grid-column:1;grid-row:2;font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-regular)}
.variant-option input:checked+.variant-face{border:0;background:var(--tonal-bg);box-shadow:inset 4px 0 0 var(--primary),inset 0 -1px 0 var(--border)}
.variant-option.out{opacity:.55}
.variant-details{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);margin-top:var(--space-3);padding:0 var(--space-3);font-size:var(--text-md);font-weight:var(--weight-semibold)}
.variant-details svg{width:20px;height:20px}
/* Modifier options: rows with a checkbox (a radio for a single choice), price right. */
.option-groups{gap:var(--space-2)}
.option-group legend{margin-bottom:0;padding:var(--space-3) 0 var(--space-1)}
.option-group-name{font-size:var(--text-md);color:var(--primary)}
.option-chips{flex-direction:column;flex-wrap:nowrap;gap:0}
.option-chip{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--row-h);padding:var(--space-2) 0;border:0;border-radius:0;background:transparent;color:var(--text);box-shadow:inset 0 -1px 0 var(--border);font-size:var(--text-lg);font-weight:var(--weight-regular)}
.option-chip::before{content:'';flex:none;width:20px;height:20px;border-radius:2px;box-shadow:inset 0 0 0 2px var(--text-muted);background:transparent;transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.option-group[data-single] .option-chip::before{border-radius:50%}
.option-chip.is-on{background:transparent;color:var(--text)}
.option-chip.is-on::before{background:var(--primary) var(--till-check) center/16px no-repeat;box-shadow:inset 0 0 0 2px var(--primary)}
.option-group[data-single] .option-chip.is-on::before{background:var(--surface);box-shadow:inset 0 0 0 2px var(--primary),inset 0 0 0 6px var(--surface),inset 0 0 0 10px var(--primary)}
.option-chip .option-price{margin-left:auto;font-size:var(--text-md);color:var(--text-muted);font-variant-numeric:tabular-nums}
.option-group.is-full .option-chip:not(.is-on){border:0;color:var(--text-muted)}
.option-chip:focus-within{outline:0}
.option-chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}
.option-chips{--till-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* ── Open tickets (Pesanan tersimpan) ─────────────────────────────────────────────────────────────────────────────── */
.ticket-card{border:0;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border)}
.ticket-total{font-size:var(--text-xl);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.ticket-name{border:0;border-radius:var(--radius-md);background:var(--tonal-bg);color:var(--text)}
.ticket-name.occupied{background:var(--warning-bg)}

/* ── Tablet and desktop (≥ 651 px): catalogue left, ticket pane right ─────────────────────────────────────────────── */
@media(min-width:651px){
 .catalog-sticky{margin:0 0 var(--space-2)}
 .basket{background:var(--surface)}
 .basket-lines{flex:1 1 auto}
 .basket-line .line-name{white-space:nowrap}
 /* Compact tiles: the name sits beside the 34 px colour block, centred on a single line. */
 .pos-main .items-grid.tiles-compact .item-card .item-name{min-height:0}
}
@media(min-width:1500px){
 .catalog-head .catalog-count{display:block}
 .till-tools .till-scan .tool-label,.till-tools .focus-toggle .tool-label{display:inline}
 .till-tools .till-scan,.till-tools .focus-toggle{width:auto;padding:0 var(--space-4) 0 var(--space-3);gap:var(--space-2);display:inline-flex;align-items:center;border-radius:var(--radius-full)}
}
@media(min-width:651px) and (orientation:portrait){
 .basket:not(.mobile-expanded) .basket-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex:1 1 0;min-height:var(--app-bar-h);padding:0 var(--space-3)}
 .basket.mobile-expanded .basket-header .mobile-basket-back{display:inline-grid}
}

/* ── Phone (≤ 650 px) ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:650px){
 .pos-main{display:block;min-height:calc(100dvh - var(--app-bar-h))}
 .catalog-pane{padding:0 0 calc(var(--row-h-2) + var(--space-6) + env(safe-area-inset-bottom));overflow:visible}
 .catalog-pane>.shift-gate{padding:var(--space-4)}
 /* Sticky top area under the app bar: search + view + scan, then the category tabs. */
 .catalog-sticky{position:sticky;top:var(--app-bar-h);z-index:14;margin:0;padding:var(--space-2) var(--space-1) 0 var(--space-4);background:var(--surface);box-shadow:inset 0 -1px 0 var(--border)}
 .catalog-pane .catalog-head{gap:0;margin:0}
 .catalog-search{margin-right:var(--space-1)}
 .till-tools .tile-switch,.till-tools .color-toggle,.till-tools button.focus-toggle,.till-tools .tool-label{display:none}
 .till-tools .tile-view{display:inline-grid}
 .categories{margin:0 calc(-1 * var(--space-1)) 0 calc(-1 * var(--space-2));padding:var(--space-1) 0}
 /* List rows run edge to edge. */
 .items-grid.tiles-list{border-radius:0}
 /* Grid: 3 columns of square-ish tiles, colour block (initials, emoji or photo) over the name and the price. */
 .items-grid:not(.tiles-list){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);padding:var(--space-3) var(--space-4)}
 .pos-main .items-grid:not(.tiles-list) .item-card{display:flex;flex-direction:column;gap:0;align-items:stretch;min-height:0;padding:0;border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
 .pos-main .items-grid:not(.tiles-list) .item-card .item-visual{width:100%;height:auto;aspect-ratio:4/3;margin:0;padding:0;border-radius:0;font-size:var(--text-amount);background:var(--field-bg)}
 .pos-main .items-grid:not(.tiles-list) .item-card .tile-initials{padding:0;font-size:var(--text-xl);border-radius:0;justify-items:center}
 .pos-main .items-grid:not(.tiles-list) .item-card .tile-initials.long{font-size:var(--text-lg)}
 .pos-main .items-grid:not(.tiles-list) .item-card .item-info{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;padding:var(--space-2)}
 .pos-main .items-grid:not(.tiles-list) .item-card .item-meta{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:0;margin:auto 0 0;padding:0}
 .pos-main .items-grid:not(.tiles-list) .item-plus{display:none}

 /* The basket is a bottom bar: [🛒 n | Bayar · Rp X] in one green bar, grey and inert while the ticket is empty. */
 .basket{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:15;display:block;height:auto;padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));border:0;background:var(--surface);box-shadow:0 -1px 0 var(--border)}
 .basket:not(.mobile-expanded) :is(.basket-header,.basket-customer,.basket-lines,.bar-save){display:none}
 .basket .basket-summary{padding:0;border:0;background:transparent}
 .basket .summary-row{display:none}
 .basket:not(.mobile-expanded) .basket-bar{gap:0;min-height:var(--app-bar-h);border-radius:var(--radius-md);background:var(--primary);overflow:hidden}
 .basket:not(.mobile-expanded) .basket-toggle{display:flex;flex:none;align-items:center;gap:var(--space-2);min-height:var(--app-bar-h);padding:0 var(--space-4);border:0;border-radius:0;background:transparent;color:var(--on-primary);box-shadow:inset -1px 0 0 color-mix(in srgb,var(--on-primary) 28%,transparent)}
 .basket:not(.mobile-expanded) .bar-count{background:var(--on-primary);color:var(--primary)}
 .basket:not(.mobile-expanded) .checkout-button{flex:1 1 auto;width:auto;min-height:var(--app-bar-h);padding:0 var(--space-4);border-radius:0;background:transparent;color:var(--on-primary)}
 .basket.is-empty:not(.mobile-expanded) .basket-bar{background:var(--field-bg)}
 .basket.is-empty:not(.mobile-expanded) .basket-toggle{color:var(--text-muted);box-shadow:inset -1px 0 0 var(--border-strong)}
 .basket.is-empty:not(.mobile-expanded) .bar-count{background:var(--text-muted);color:var(--surface)}
 .basket.is-empty:not(.mobile-expanded) .checkout-button{background:transparent;color:var(--text-muted)}

 /* Ticket screen: a full-screen page over the till (its own app bar). */
 .basket.mobile-expanded{top:0;bottom:0;z-index:17;display:flex;flex-direction:column;height:auto;padding:0;box-shadow:none}
 .basket.mobile-expanded .basket-header{display:flex;flex:none;gap:var(--space-1);min-height:var(--app-bar-h);padding:0 var(--space-1)}
 .basket.mobile-expanded .basket-header .mobile-basket-back{display:inline-grid}
 .basket.mobile-expanded .basket-header h2{font-size:var(--text-xl);line-height:var(--leading-xl)}
 .basket.mobile-expanded .basket-number{font-size:var(--text-xs);line-height:var(--leading-xs)}
 .basket.mobile-expanded .basket-customer{display:block;flex:none}
 .basket.mobile-expanded .basket-customer{display:block;flex:none;padding:0}
 .basket.mobile-expanded .customer-button{padding-left:var(--space-4)}
 .basket.mobile-expanded .basket-lines{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0}
 .basket.mobile-expanded .basket-summary{flex:none;padding:var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
 .basket.mobile-expanded .summary-row.total,.basket.mobile-expanded .basket-summary.open .summary-row{display:flex}
 .basket.mobile-expanded .summary-row.total{margin:0 0 var(--space-2);padding:0}
 .basket.mobile-expanded .basket-summary.open .summary-row.total{padding-top:var(--space-2)}
 .basket.mobile-expanded .summary-toggle{display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;padding:0 var(--space-2);font-size:var(--text-md);font-weight:var(--weight-semibold)}
 .basket.mobile-expanded .basket-toggle{display:none}
 .basket.mobile-expanded .bar-save{display:flex}
 .basket.mobile-expanded .checkout-button{flex:2 1 0}
 /* Plain lines: "Name × 2", options under it, amount right; tap opens the line editor, swipe left removes. */
 .basket.mobile-expanded .basket-line{display:flex;align-items:center;gap:var(--space-4);min-height:var(--row-h);padding:var(--space-2) var(--space-4);touch-action:pan-y;transform:translateX(var(--swipe,0));transition:transform var(--dur) var(--ease)}
 .basket.mobile-expanded .basket-line.is-swiping{transition:none}
 .basket.mobile-expanded .basket-line::before{content:'';position:absolute;top:0;bottom:0;left:100%;width:100vw;background:var(--danger)}
 .basket.mobile-expanded .basket-line::after{content:'';position:absolute;top:50%;left:calc(100% + var(--space-6));width:var(--icon);height:var(--icon);margin-top:calc(var(--icon) / -2);background:var(--on-primary);-webkit-mask:var(--till-trash) center/contain no-repeat;mask:var(--till-trash) center/contain no-repeat}
 .basket.mobile-expanded .basket-line:active{background:var(--state-press)}
 .basket.mobile-expanded .line-visual,.basket.mobile-expanded .basket-line .quantity{display:none}
 .basket.mobile-expanded .line-content{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-4);row-gap:0}
 .basket.mobile-expanded .line-name{position:static;grid-column:1;grid-row:1;min-height:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .basket.mobile-expanded .line-name::after{content:'';position:absolute;inset:0}
 .basket.mobile-expanded .line-qty{display:inline}
 .basket.mobile-expanded .line-detail{grid-column:1;grid-row:2}
 .basket.mobile-expanded .line-total{grid-column:2;grid-row:1}
 .basket.mobile-expanded .basket-lines .empty{padding:var(--space-10) var(--space-6)}
 .basket{--till-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E")}
 /* Snackbars sit above the pay bar (and above the total on the ticket screen). */
 html[data-view=pos] #toasts{bottom:calc(var(--row-h-2) + var(--space-3) + env(safe-area-inset-bottom))}
 html[data-view=pos] body:has(.basket.mobile-expanded) #toasts{bottom:calc(var(--row-h-2) + var(--row-h) + var(--space-6) + env(safe-area-inset-bottom))}

 /* Line editor page: the name is the app bar title, the summary keeps the price and stock. */
 .modal .item-summary h3{display:none}
 .modal .item-summary .item-visual{width:48px;height:48px}

 /* Open tickets: native rows instead of cards. */
 .card-list{display:flex;flex-direction:column;gap:0;margin:0 calc(-1 * var(--space-4));background:var(--surface)}
 .ticket-card{padding:var(--space-3) var(--space-4);border-radius:0;box-shadow:inset 0 -1px 0 var(--border)}
 .ticket-card .actions{margin-top:var(--space-2)!important;gap:var(--space-2)}
}
@media(hover:hover){
 button.variant-option:not(:disabled):hover .variant-face{border:0;background:var(--state-hover)}
 .item-card:hover{background:color-mix(in srgb,var(--surface),var(--text) 4%)}
 .items-grid.tiles-list .item-card:hover{background:var(--state-hover)}
 .customer-button:hover,.save-button:not(:disabled):hover{background:color-mix(in srgb,var(--tonal-bg),var(--text) 6%)}
 .customer-button:hover{background:var(--state-hover)}
 .basket-line .quantity button:hover{background:var(--state-hover)}
 .category:not(.active):hover{background:var(--state-hover)}
}
@media(prefers-reduced-motion:reduce){.basket.mobile-expanded .basket-line{transition:none}}
/* Sold out (UXP4-1): with negative stock refused, a tracked item at 0 looks like the sold-out variant. The tile stays
   tappable (the tap shows why nothing is added); the picture fades, the text keeps its contrast. */
.item-card.sold-out .item-visual{opacity:.45;filter:grayscale(1)}
.item-card.sold-out .item-price{color:var(--text-muted)}
.item-card.sold-out .item-plus{visibility:hidden}
.line-minus{margin-left:var(--space-1);color:var(--danger-fg);font-weight:var(--weight-medium)}

/* F07-2 — order type in the basket: segmented control on a tablet, chip + sheet on a phone (only when the catalogue has types). */
.basket-type{padding:var(--space-2) var(--space-4)}
.order-type-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-sm);background:var(--tonal-bg)}
.order-type-seg-item{min-width:0;min-height:var(--touch);padding:var(--space-1) var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font-weight:var(--weight-medium);text-align:center;overflow-wrap:anywhere}
.order-type-seg-item.active{background:var(--primary);color:var(--on-primary)}
.order-type-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);max-width:100%}
.order-type-chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.order-type-chevron{flex:none;color:var(--text-muted)}
.order-type-preview{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-xl)}
.order-type-was{color:var(--text-muted);text-decoration:line-through}
@media(max-width:699px){.basket:not(.mobile-expanded) .basket-type{display:none}}
/* F14-2 (fiche 14): « Commande » next to Payer — the basket bar's save slot shares its width with the order button. */
.bar-save:has(.order-button){gap:var(--space-2)}
/* F16-2 (fiche 16): prepaid value — the punch-card pill on a basket line, the code of a new card, the card face (voucher, e-card). */
.prepaid-pill{position:relative;z-index:1;min-height:var(--touch);margin-top:var(--space-1);align-self:flex-start;font-size:var(--text-md);line-height:var(--leading-md)}
.prepaid-pill.is-on{background:var(--tonal-bg);color:var(--tonal-fg)}
.prepaid-code{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--field-bg)}
.prepaid-code small{color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-xs)}
.prepaid-code strong,.prepaid-card-code{font-size:var(--text-lg);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;letter-spacing:.04em;word-break:break-all}
.prepaid-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)}
.prepaid-card-amount{font-size:var(--text-xl);font-weight:var(--weight-semibold)}
.prepaid-card svg.qr{width:160px;height:160px}
/* F11-2 (fiche 11): availability on the tiles — ribbon, portion counter, « ⋯ », edit controls */
.item-card.is-unavailable .item-visual{opacity:.45;filter:grayscale(1)}
.item-card.is-unavailable .item-plus{visibility:hidden}
.item-ribbon{position:absolute;left:0;right:0;bottom:0;padding:var(--space-1) var(--space-2);background:var(--text-strong);color:var(--text-inverse);font-size:var(--text-sm);font-weight:600;text-align:center}
.item-more{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--text-muted);cursor:pointer;position:absolute;top:0;right:0;z-index:1}
.tile-edit-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--text-muted);cursor:pointer}
.tile-edit{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;justify-content:space-between;background:var(--surface)}
.tile-edit-btn[aria-pressed=true]{color:var(--accent)}
.categories .category[aria-pressed=true] .ui-icon{color:var(--accent)}
.avail-status{margin:0 0 var(--space-3);color:var(--text-muted)}
.chip.is-paused{color:var(--text-muted)}
.items-grid.tiles-list .item-more{position:static;grid-column:4;grid-row:1/span 2}
.items-grid.tiles-list .item-ribbon{display:none}