/* The POS grid — the till face of the PRODUCTS tab.
 *
 * Everything is scoped under .pos. It sits inside six different dashboards,
 * each with its own page styles and its own opinions about buttons, so nothing
 * here may leak out and nothing out there may be relied on.
 *
 * The layout is one idea: the grid takes the room, the cart takes a column, and
 * on a phone the cart becomes a sheet that the running total calls up. Both
 * panes scroll inside themselves — the page behind must never scroll, or a rep
 * loses the total the moment they reach for the third item.
 */

.pos {
    --pos-line:  #e2e8f0;
    --pos-ink:   #0f172a;
    --pos-mute:  #64748b;
    --pos-brand: #7c3aed;
    --pos-good:  #16a34a;
    --pos-bg:    #ffffff;
    --pos-soft:  #f8fafc;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
    align-items: stretch;
    /* A starting height only — pos_grid.js measures where the panel actually
       begins and sets the real one, so the Send button always lands above the
       dashboard's floating nav rather than behind it. dvh so the iOS toolbar
       sliding away does not resize it under the rep's thumb mid-order. */
    height: min(72dvh, 760px);
    min-height: 380px;
    font-family: inherit;
    color: var(--pos-ink);
}

.pos *, .pos *::before, .pos *::after { box-sizing: border-box; }

/* ── the grid side ───────────────────────────────────────────────────────── */

.pos__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--pos-line);
    border-radius: 16px;
    background: var(--pos-bg);
    overflow: hidden;
}

.pos__bar {
    flex: 0 0 auto;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--pos-line);
    background: var(--pos-soft);
}

.pos__search {
    position: relative;
    display: block;
}

.pos__search .fas {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pos-mute);
    font-size: 13px;
    pointer-events: none;
}

.pos__search input {
    width: 100%;
    height: 42px;
    padding: 0 12px 0 34px;
    /* 16px, so iOS does not zoom the page in when the rep taps it. */
    font-size: 16px;
    color: var(--pos-ink);
    border: 1px solid var(--pos-line);
    border-radius: 10px;
    background: #fff;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.pos__search input:focus {
    border-color: var(--pos-brand);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.pos__cats {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pos__cats::-webkit-scrollbar { display: none; }

.pos__cat {
    flex: 0 0 auto;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--pos-mute);
    background: #fff;
    border: 1px solid var(--pos-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.pos__cat:hover { color: var(--pos-ink); }

.pos__cat.is-on {
    color: #fff;
    background: var(--pos-brand);
    border-color: var(--pos-brand);
}

.pos__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 14px;
}

.pos__group[hidden] { display: none; }

.pos__grouph {
    position: sticky;
    top: 0;
    /* 1, not 2: the dashboard's sidebar is z-index 2, and a sticky heading at
       the same level painted over its links whenever the menu was open. It
       only has to sit above the tiles, which carry no z-index at all. */
    z-index: 1;
    margin: 0;
    padding: 10px 2px 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pos-mute);
    background: linear-gradient(var(--pos-bg) 76%, rgba(255, 255, 255, 0));
}

.pos__items {
    display: grid;
    /* auto-fill, so the same rule gives three columns on a phone and eleven on
       a counter screen without a breakpoint for each. 96px rather than 112:
       a till is judged by how much of the menu is in front of you, and the
       tiles were bigger than they needed to be to stay readable. */
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
}

/* ── one tile ────────────────────────────────────────────────────────────── */

.pos__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    text-align: left;
    color: inherit;
    background: #fff;
    border: 1px solid var(--pos-line);
    border-radius: 12px;
    cursor: pointer;
    /* No tap highlight and no double-tap zoom: this is a button that will be
       hit twice in a second, on purpose. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: border-color .12s, box-shadow .12s, transform .06s;
}

.pos__item[hidden] { display: none; }

.pos__item:hover  { border-color: #cbd5e1; }
.pos__item:active { transform: scale(.97); }

.pos__item:focus-visible {
    outline: none;
    border-color: var(--pos-brand);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}

.pos__item.is-on {
    border-color: var(--pos-brand);
    background: #faf5ff;
}

.pos__shot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--pos-soft);
}

.pos__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pos__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: var(--pos-brand);
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}

.pos__item.is-on .pos__badge { display: flex; }

.pos__name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.22;
    /* Two lines then an ellipsis: a ragged grid is slower to scan than a
       truncated name is to recognise. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos__meta {
    display: flex;
    /* When the price and the stock pill do not fit side by side on a narrow
       tile, the pill drops under the price — the price is never cut to "…". */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 4px;
    margin-top: auto;
}

.pos__price {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--pos-good);
    white-space: nowrap;
}

.pos__left { display: none; }   /* replaced by the stock dot below */
/* How many are left: a coloured pill beside the price, in the old "N left" slot. Green while there are
   plenty, amber at or under the reorder level, red at none. */
.pos__stock {
    position: static;
    flex: 0 0 auto;
    margin-left: auto;
    /* About half what it was. It is a count, not a control: nobody taps it,
       and at the old size it read as the loudest thing on a tile whose job is
       to show the product. */
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
    pointer-events: none;
}
.pos__stock--ok  { background: #16a34a; }
.pos__stock--low { background: #f59e0b; color: #1f2937; }
.pos__stock--out { background: #dc2626; }
/* a variant's own picture beside its name in the chooser */
.pos__fimg {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--pos-soft);
}
.pos__fimg--none { display: inline-block; }
/* the typed quantity on a line */
.pos__qin {
    width: 46px;
    height: 28px;
    padding: 0 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    -moz-appearance: textfield;
}
.pos__qin::-webkit-outer-spin-button, .pos__qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos__qin:focus { outline: none; border-color: var(--pos-brand); box-shadow: 0 0 0 3px rgba(67, 0, 120, .12); }

/* The two answers a tap can give. */
@keyframes posHit { 0% { transform: scale(1); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes posMax { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.pos__item.is-hit { animation: posHit .3s ease; }
.pos__item.is-max { animation: posMax .3s ease; border-color: #f87171; }

.pos__none {
    padding: 34px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--pos-mute);
}

/* ── the cart side ───────────────────────────────────────────────────────── */

.pos__cart {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--pos-line);
    border-radius: 16px;
    background: var(--pos-bg);
    overflow: hidden;
}

.pos__carth {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--pos-line);
    background: var(--pos-soft);
}

.pos__carth-t {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pos-mute);
}

.pos__restart {
    padding: 6px 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
}
.pos__restart:hover { background: #fee2e2; }

.pos__who {
    flex: 0 0 auto;
    display: block;
    padding: 10px 13px 0;
}

.pos__who > span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pos-mute);
}

.pos__who input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    font-size: 16px;          /* again: no iOS zoom */
    font-weight: 600;
    color: var(--pos-ink);
    border: 1px solid var(--pos-line);
    border-radius: 10px;
    background: #fff;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.pos__who input:focus {
    border-color: var(--pos-brand);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.pos__who input.is-bad {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.pos__lines {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 13px;
}

.pos__empty {
    margin: 26px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--pos-mute);
}

.pos__line {
    padding: 9px 0;
    border-bottom: 1px dashed var(--pos-line);
    /* The thumbnail sits beside the two text rows rather than above them, so
       the line keeps the height it always had. */
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.pos__line:last-child { border-bottom: 0; }

/* The body takes the rest of the row. min-width:0 is what lets a long dish
   name wrap instead of pushing the price off the edge. */
.pos__lbody { flex: 1 1 auto; min-width: 0; }

/* Deliberately small, and capped twice: a fixed box so it never reflows the
   list, and max-height so it can never be taller than the name-and-price block
   it sits beside even if that block shrinks. */
.pos__lthumb {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    max-height: 32px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--pos-line);
    margin-top: 1px;
}

.pos__ltop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.pos__lname {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pos__lsum {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--pos-good);
    white-space: nowrap;
}

.pos__lbot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.pos__lunit {
    font-size: 11px;
    color: var(--pos-mute);
}

.pos__step {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pos__step button {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--pos-ink);
    background: var(--pos-soft);
    border: 1px solid var(--pos-line);
    border-radius: 7px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.pos__step button:hover { background: #eef2f7; }

.pos__step .pos__drop {
    margin-left: 4px;
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.pos__q {
    min-width: 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pos__foot {
    flex: 0 0 auto;
    padding: 11px 13px;
    padding-bottom: max(11px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--pos-line);
    background: var(--pos-soft);
}

.pos__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pos__total > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pos-mute);
}

.pos__total > b {
    font-size: 21px;
    font-weight: 800;
    color: var(--pos-ink);
    font-variant-numeric: tabular-nums;
}

.pos__count {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--pos-mute);
}

.pos__send {
    width: 100%;
    height: 46px;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    background: var(--pos-brand);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .12s, opacity .12s;
}

.pos__send:hover:not(:disabled) { background: #6d28d9; }

.pos__send:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* ── the phone sheet ─────────────────────────────────────────────────────── */

.pos__peek { display: none; }

@media (max-width: 900px) {
    .pos {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The cart stops being a column and becomes a sheet, called up by the
       running total. On a phone the grid needs the whole width; a 340px
       sidebar would leave two cramped columns of tiles. */
    .pos__cart {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1080;        /* above the dashboard's own bottom bar */
        max-height: 82dvh;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        box-shadow: 0 -10px 34px rgba(15, 23, 42, .22);
        transform: translateY(101%);
        transition: transform .22s ease;
        visibility: hidden;
    }

    .pos.cart-open .pos__cart {
        transform: translateY(0);
        visibility: visible;
    }

    /* The dim covers the dashboard's bottom bar too (z-index 1000): a
       navigation button floating over an open cart is a mis-tap waiting to
       happen. */
    .pos.cart-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1079;
        background: rgba(15, 23, 42, .42);
    }

    /* While the cart is open the running total behind it is noise. */
    .pos.cart-open .pos__peek { display: none; }

    .pos__peek {
        position: fixed;
        left: 12px;
        right: 12px;
        /* Clear of the dashboard's own bottom bar: that is fixed at bottom:20px
           and 68px tall, so anything under 88px would be sitting on the rep's
           navigation. */
        bottom: calc(96px + env(safe-area-inset-bottom));
        z-index: 1070;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 52px;
        padding: 0 15px;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        background: var(--pos-brand);
        border: 0;
        border-radius: 13px;
        box-shadow: 0 6px 22px rgba(124, 58, 237, .4);
        cursor: pointer;
        touch-action: manipulation;
    }

    .pos__peek[hidden] { display: none; }

    .pos__peek-n {
        min-width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        background: rgba(255, 255, 255, .25);
        border-radius: 999px;
    }

    .pos__peek-t { margin-left: auto; font-variant-numeric: tabular-nums; }

    /* 76px gives FOUR across the 324px a phone actually leaves for the grid
       (390 viewport, less the page's own padding and the scroll gutter). The
       tile still comes out ~78px wide — well above the 44px a thumb needs —
       and a waiter sees half again as much of the menu without scrolling. */
    .pos__items { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .pos__name  { font-size: 10px; line-height: 1.2; }
    .pos__item  { padding: 4px; gap: 3px; }
    .pos__price { font-size: 10.5px; }
    /* Halved here too, or the phone size — which is where every rep
       actually works — keeps the old pill and the change is invisible. */
    .pos__stock { min-width: 12px; height: 12px; font-size: 7.5px; padding: 0 3px; }
    .pos__left  { font-size: 8.5px; }
}

/* Below this a fourth column would leave under 70px per tile, which is where
   a two-line dish name starts breaking badly. Three, and keep them legible. */
@media (max-width: 340px) {
    .pos__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A rep who prefers the keyboard, and anyone who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
    .pos *, .pos *::before, .pos *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── the flip control ────────────────────────────────────────────────────── */

.posflip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.posflip button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .14s, color .14s, box-shadow .14s;
}

.posflip button.is-on {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}

@media (max-width: 420px) {
    .posflip button span { display: none; }
    .posflip button { padding: 8px 13px; }
}

/* ── which one? ──────────────────────────────────────────────────────────────
 *
 * A dish sold in several forms is one tile; this is the tap's answer. It stays
 * open while it is being used, because a table that wants two mediums and a
 * large should be three taps in one place.
 */

.pos__forms {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(15, 23, 42, .72);
    border-radius: 999px;
    pointer-events: none;
}

.pos__ask {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .48);
}

.pos__ask[hidden] { display: none; }

.pos__askbox {
    width: min(420px, 100%);
    max-height: min(78dvh, 620px);
    display: flex;
    flex-direction: column;
    background: var(--pos-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .34);
    overflow: hidden;
}

.pos__askh {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.pos__askx {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.pos__askx:hover { background: #e2e8f0; color: #0f172a; }

.pos__askl {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pos__form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* 52px: a thumb, not a cursor. */
    min-height: 52px;
    padding: 10px 13px;
    text-align: left;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .12s, background .12s, transform .06s;
}

.pos__form:hover  { border-color: #cbd5e1; }
.pos__form:active { transform: scale(.985); }

.pos__form.is-on {
    border-color: var(--pos-brand, #7c3aed);
    background: #faf5ff;
}

.pos__form[data-full] {
    opacity: .55;
    cursor: not-allowed;
}

.pos__fname {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pos__fprice {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    color: var(--pos-good, #16a34a);
    white-space: nowrap;
}

.pos__fq {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--pos-brand, #7c3aed);
    border-radius: 999px;
}
.pos__fq:empty { background: transparent; }

.pos__form.is-hit { animation: posHit .3s ease; }

.pos__askdone {
    flex: 0 0 auto;
    margin: 0;
    height: 46px;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    background: var(--pos-brand, #7c3aed);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    touch-action: manipulation;
}
.pos__askdone:hover { background: #6d28d9; }

@media (max-width: 900px) {
    /* On a phone it comes up from the bottom, where the thumb already is. */
    .pos__ask { align-items: flex-end; padding: 0; }
    .pos__askbox {
        width: 100%;
        max-height: 80dvh;
        border-radius: 18px 18px 0 0;
    }
    .pos__askdone { padding-bottom: env(safe-area-inset-bottom); height: auto; min-height: 50px; }
}

/* ── the cart's label ────────────────────────────────────────────────────────
 *
 * Two parts that read as one field: who and when, which nobody may change
 * because it is what every list, receipt and day-close groups the cart by, and
 * the number or name, which they may.
 */
.pos__label {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pos-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.pos__label:focus-within {
    border-color: var(--pos-brand);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.pos__labelfix {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--pos-mute);
    background: var(--pos-soft);
    border-right: 1px solid var(--pos-line);
    user-select: none;
}

.pos__labelval {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    font-size: 16px;          /* 16px, or iOS zooms the page when it is tapped */
    font-weight: 700;
    color: var(--pos-ink);
    border: 0;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.pos__labelval.is-bad {
    background: #fef2f2;
    box-shadow: inset 0 0 0 2px #ef4444;
}

/* On a narrow phone the prefix is the longer half; let it shrink before the
   number does, and never let the pair force the sheet sideways. */
@media (max-width: 380px) {
    .pos__labelfix {
        font-size: 12px;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 40px;
        max-width: 58%;
    }
}

/* ── Details, at the foot of every tile ──────────────────────────────────────
 *
 * Tapping a tile ADDS the product to the order, which left a rep no way simply
 * to look at one — no pictures, no brand, no description. This opens the same
 * product card the shop's own grid opens, and it is why the tile became a div
 * with role=button: a button cannot contain a button. */
.pos__detail {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 3px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    cursor: pointer;
    /* The house floor is for the things a finger aims at; this is a secondary
       control inside one that is already tappable, so it stays compact.
    
       `min-height: 0` alone was not enough and the button still came out 40px
       tall: style.css sets `min-height: var(--ui-tap)` through a selector
       carrying a dozen :not() clauses, and each one counts, so no reasonable
       selector here outranks it. The house's own way out of that rule is to be
       named in the list, which .pos__detail now is — the same exemption the
       quantity steppers and the small × buttons already use. */
    min-height: 0;
    height: 22px;
}
.pos__detail:hover  { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.pos__detail:active { transform: scale(.97); }