/* Shift Turnover -- mga estilo ng module.
   NEUTRAL: ang mga kulay ay galing sa CSS variables ng styles.css (--primary,
   --secondary, --surface ...), kaya ang QUEBO ay mukhang QUEBO. Ang pula/dilaw
   na itsura ng Daet ay nasa daet-pos.css (body.daet), na pumapalit sa mga
   --st-* token sa ibaba at sa parehong mga class.
   Walang `display: ... !important` sa pindutan/tab: tinatalo nito ang gating
   ng roles.js/features.js. Isang class lang bawat selector (maliban sa
   [hidden]) para laging manalo ang [hidden] at madaling i-override ng Daet. */

.st-root,
.st-layer {
    --st-ink: var(--text-primary, #1a1a1a);
    --st-muted: var(--text-muted, #5c5c5c);
    --st-line: var(--border, #e4e4e4);
    --st-paper: var(--white, #ffffff);
    --st-bg: var(--surface, #f7f7f7);
    --st-primary: var(--primary, #6F4E37);
    --st-primary-ink: #ffffff;
    --st-primary-soft: var(--primary-light, rgba(111, 78, 55, 0.06));
    /* HINDI --secondary: maliwanag ito sa QUEBO (ginto) pero madilim na pula sa Daet,
       kaya walang iisang kulay ng text na mababasa sa dalawa. Ang --primary ay laging
       madilim, kaya ito ang batayan. Ang Daet (seksyon 23 ng daet-pos.css) ang magdidilaw. */
    --st-accent: var(--white, #ffffff);
    --st-accent-ink: var(--primary, #6F4E37);
    --st-accent-line: var(--primary, #6F4E37);
    --st-bar: var(--dark-bg, #1A1512);
    --st-bar-ink: #ffffff;
    --st-bar-meta: rgba(255, 255, 255, 0.78);
    --st-card-line: var(--border, #e4e4e4);
    --st-ok: #166534;
    --st-ok-soft: #dcfce7;
    --st-ok-solid: var(--success, #16a34a);
    --st-warn: #92400e;
    --st-warn-soft: #fef3c7;
    --st-bad: var(--error-dark, #b91c1c);
    --st-bad-soft: #fee2e2;
    --st-pend: var(--primary, #6F4E37);
    --st-pend-ink: #ffffff;
    --st-gray: #57534e;
    --st-gray-soft: #efedeb;
    --st-dns: var(--error-dark, #b91c1c);
    --st-dns-ink: #ffffff;
    --st-radius: var(--radius-md, 10px);
    color: var(--st-ink);
}

/* Laging nananalo ang [hidden] (0,2,0) laban sa mga class (0,1,0) sa ibaba. */
.st-root [hidden],
.st-layer [hidden] { display: none; }

.st-root {
    display: grid;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
    min-width: 0;
}
.st-root--narrow { max-width: 720px; }

/* ---- Ang "device": bar + screen ---- */
/* Walang overflow:hidden: gagawin nitong scroll container ang device at hindi na
   kakapit (sticky) ang Next sa ibaba ng screen. Ang bar at nav ang may sariling kanto. */
.st-device {
    background: var(--st-paper);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    min-width: 0;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.st-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 14px;
    border-radius: 15px 15px 0 0;
    background: var(--st-bar);
    color: var(--st-bar-ink);
}
.st-bar__back {
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.st-bar__back:hover { background: rgba(255, 255, 255, 0.12); }
.st-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.st-bar__meta {
    flex: none;
    color: var(--st-bar-meta);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.st-scr {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 0 0 15px 15px;
    background: var(--st-bg);
    min-width: 0;
}
.st-scr > * { min-width: 0; }

/* ---- Teksto ---- */
.st-step {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-primary);
}
.st-h { margin: 0; font-size: 17px; font-weight: 800; }
.st-sec { margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--st-ink); }
.st-note { display: block; font-size: 13px; color: var(--st-muted); }
.st-empty { margin: 0; padding: 14px; text-align: center; color: var(--st-muted); font-size: 14px; }
.st-msg { margin: 0; font-size: 15px; }
.st-demo {
    margin: 0;
    justify-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--st-gray-soft);
    color: var(--st-gray);
    font-size: 12px;
    font-weight: 700;
}
.st-notice {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--st-radius);
    background: var(--st-gray-soft);
    color: var(--st-gray);
    font-size: 13px;
    font-weight: 700;
}
.st-notice--warn { background: var(--st-warn-soft); color: var(--st-warn); }
.st-notice--bad { background: var(--st-bad-soft); color: var(--st-bad); }
.st-alert {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--st-radius);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.st-alert--warn { background: var(--st-warn-soft); color: var(--st-warn); }
.st-alert--bad { background: var(--st-bad-soft); color: var(--st-bad); }
.st-done {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--st-radius);
    background: var(--st-ok-soft);
    color: var(--st-ok);
    font-size: 14px;
    font-weight: 800;
}
.st-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- DO NOT SERVE ---- */
.st-dnsbar {
    display: block;
    padding: 10px 12px;
    border-radius: var(--st-radius);
    background: var(--st-dns);
    color: var(--st-dns-ink);
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.st-dnsbar span { font-weight: 600; }

/* ---- Mga pindutan ---- */
.st-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.st-big {
    min-height: 52px;
    padding: 12px 10px;
    border: 0;
    border-radius: var(--st-radius);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}
.st-big--primary { background: var(--st-primary); color: var(--st-primary-ink); }
.st-big--accent { background: var(--st-accent); color: var(--st-accent-ink); box-shadow: inset 0 0 0 2px var(--st-accent-line); }
.st-big--line { background: var(--st-paper); color: var(--st-ink); box-shadow: inset 0 0 0 2px var(--st-line); }
.st-big--danger { background: var(--st-bad); color: #ffffff; }
.st-big:disabled { opacity: 0.45; cursor: not-allowed; }
.st-badge {
    display: inline-block;
    min-width: 22px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--st-primary);
    color: var(--st-primary-ink);
    line-height: 20px;
}
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--st-radius);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.st-btn--primary { background: var(--st-primary); color: var(--st-primary-ink); }
.st-btn--line { background: var(--st-paper); color: var(--st-ink); box-shadow: inset 0 0 0 2px var(--st-line); }
.st-btn--sm { min-height: 44px; padding: 6px 12px; font-size: 13px; }
.st-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.st-link {
    min-height: 44px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--st-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.st-root button:focus-visible,
.st-root input:focus-visible,
.st-root textarea:focus-visible,
.st-layer button:focus-visible,
.st-layer input:focus-visible { outline: 3px solid var(--st-ink); outline-offset: 2px; }

/* ---- Home: draft, station, issues ---- */
.st-drafts { display: grid; gap: 8px; }
.st-draft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: var(--st-radius);
    background: var(--st-warn-soft);
    font-size: 14px;
}
.st-draft__t { min-width: 0; overflow-wrap: anywhere; }
.st-draft__t b { color: var(--st-warn); }
.st-draft__a { display: flex; gap: 8px; }
.st-stations { display: grid; gap: 8px; }
.st-stn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    padding: 10px 12px;
    border: 2px solid var(--st-card-line);
    border-radius: 12px;
    background: var(--st-paper);
}
.st-stn__t { grid-column: 1; font-weight: 900; overflow-wrap: anywhere; }
.st-stn__w { grid-column: 1; font-size: 13px; color: var(--st-muted); overflow-wrap: anywhere; }
.st-stn > .st-chip { grid-column: 2; grid-row: 1 / span 2; }
.st-stn__note {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--st-bad-soft);
    color: var(--st-bad);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.st-stn__act { grid-column: 1 / -1; margin-top: 6px; }
/* Naghihintay na turnover: sa card ng papalit ("Waiting for you"), o sariling hilera sa
   itaas ng listahan kapag wala nang card ang nagpasa at ang papalit. */
.st-waits { display: grid; gap: 6px; }
.st-wait,
.st-stn__wait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-wait {
    padding: 8px 10px 8px 12px;
    border: 2px solid var(--st-card-line);
    border-radius: 12px;
    background: var(--st-paper);
}
.st-stn__wait {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding: 6px 6px 6px 10px;
    border-radius: 8px;
    background: var(--st-primary-soft);
}
.st-wait__t { flex: 1 1 160px; min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.st-chip {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.st-chip--ok { background: var(--st-ok-soft); color: var(--st-ok); }
.st-chip--warn { background: var(--st-warn-soft); color: var(--st-warn); }
.st-chip--bad { background: var(--st-bad-soft); color: var(--st-bad); }
.st-chip--pend { background: var(--st-pend); color: var(--st-pend-ink); }
.st-chip--gray { background: var(--st-gray-soft); color: var(--st-gray); }
.st-carry {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--st-radius);
    background: var(--st-warn-soft);
    color: var(--st-ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.st-carry b { color: var(--st-warn); }
.st-carry:disabled { cursor: default; }

/* ---- Wizard: pagpili ---- */
.st-who { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pick {
    min-height: 44px;
    max-width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.st-pick small { display: block; font-size: 12px; font-weight: 600; color: var(--st-muted); }
.st-pick.is-on { border-color: var(--st-primary); background: var(--st-primary-soft); box-shadow: inset 0 0 0 1px var(--st-primary); }
.st-pick:disabled { opacity: 0.55; cursor: not-allowed; }
.st-people { display: grid; gap: 8px; }
.st-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 2px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 16px;
}
.st-sw { display: flex; flex-wrap: wrap; gap: 6px; }
.st-sw button {
    min-height: 44px;
    padding: 6px 14px;
    border: 2px solid var(--st-line);
    border-radius: 999px;
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.st-sw button[aria-pressed="true"] { background: var(--st-ink); border-color: var(--st-ink); color: var(--st-paper); }

/* ---- Wizard: checklist ---- */
.st-ck {
    display: grid;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--st-paper);
    border: 1px solid var(--st-line);
}
.st-row { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--st-line); }
.st-row:last-child { border-bottom: 0; }
.st-q { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.st-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-seg button {
    min-height: 44px;
    padding: 6px 4px;
    border: 2px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.st-seg button[aria-pressed="true"][data-v="yes"] { background: var(--st-ok-solid); border-color: var(--st-ok-solid); color: #ffffff; }
.st-seg button[aria-pressed="true"][data-v="no"] { background: var(--st-bad); border-color: var(--st-bad); color: #ffffff; }
.st-seg button[aria-pressed="true"][data-v="na"] { background: var(--st-gray); border-color: var(--st-gray); color: #ffffff; }
.st-why { display: grid; gap: 6px; }
.st-ta {
    width: 100%;
    min-height: 58px;
    padding: 8px 10px;
    border: 2px solid var(--st-bad);
    border-radius: 8px;
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}
.st-ta--plain { border-color: var(--st-line); }
.st-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-thumb {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid var(--st-line);
    border-radius: 8px;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, var(--st-gray-soft) 0 6px, var(--st-line) 6px 12px);
    cursor: pointer;
}
.st-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Wizard: portions at cash ---- */
.st-panel { display: grid; gap: 10px; min-width: 0; }
.st-tbl {
    overflow-x: auto;
    border-radius: 12px;
    background: var(--st-paper);
    border: 1px solid var(--st-line);
}
.st-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-table th {
    padding: 8px;
    border-bottom: 2px solid var(--st-line);
    color: var(--st-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.st-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--st-line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.st-table tr:last-child td { border-bottom: 0; }
.st-table small { color: var(--st-muted); }
.st-num { text-align: right; }
.st-table .st-num { text-align: right; }
.st-qty {
    width: 72px;
    min-height: 44px;
    padding: 6px 8px;
    border: 2px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    box-sizing: border-box;
}
.st-qty.is-bad { border-color: var(--st-bad); background: var(--st-bad-soft); }
.st-low {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    color: var(--st-bad);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}
.st-low input { width: 20px; height: 20px; margin: 0; }
.st-cash { display: grid; gap: 10px; min-width: 0; }
.st-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 2px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.st-toggle input { flex: none; width: 22px; height: 22px; margin: 0; }
.st-toggle input:disabled + span { opacity: 0.55; }
.st-auto {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--st-ok-soft);
    color: var(--st-ok);
    font-size: 10px;
    letter-spacing: 0.04em;
}
.st-kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--st-paper);
    border: 1px solid var(--st-line);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.st-kv__k { color: var(--st-muted); overflow-wrap: anywhere; }
.st-kv__v { padding-left: 10px; text-align: right; font-weight: 700; white-space: nowrap; }
.st-kv--sum { padding-top: 4px; border-top: 2px solid var(--st-ink); color: var(--st-ink); font-weight: 900; }
.st-denoms {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.st-den {
    display: grid;
    grid-template-columns: 72px 80px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    font-size: 14px;
    font-weight: 700;
}
.st-den__k { white-space: nowrap; }
.st-den__v { text-align: right; color: var(--st-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-den .st-qty { width: 80px; }
.st-var {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--st-radius);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.st-var > span:first-child { text-transform: uppercase; letter-spacing: 0.03em; }
/* Nakikita habang nagta-type ng bilang: ang scroll container ng app (#contentContainer)
   ay nasa ilalim na ng top bar, kaya top:0 ay hindi natatakpan. */
.st-var--sticky {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.st-var--none { background: var(--st-gray-soft); color: var(--st-gray); }
.st-var--ok { background: var(--st-ok-soft); color: var(--st-ok); }
.st-var--short { background: var(--st-bad-soft); color: var(--st-bad); }
.st-var--over { background: var(--st-warn-soft); color: var(--st-warn); }

/* ---- PIN pad ---- */
.st-pin { display: grid; gap: 10px; justify-items: center; padding: 6px 0; }
.st-pin.is-busy { opacity: 0.7; }
.st-dots { display: flex; gap: 12px; }
.st-dot { width: 16px; height: 16px; border: 3px solid var(--st-ink); border-radius: 50%; }
.st-dot.is-on { background: var(--st-ink); }
.st-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.st-pad button {
    height: 52px;
    border: 2px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-paper);
    color: var(--st-ink);
    font: inherit;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}
.st-pad .st-pad__ok { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-primary-ink); }
.st-pad button:disabled { opacity: 0.45; cursor: not-allowed; }
.st-pin__err { margin: 0; min-height: 20px; color: var(--st-bad); font-size: 14px; font-weight: 700; text-align: center; }
.st-pin .st-input { max-width: 280px; }
.st-pin__go { width: 100%; max-width: 280px; }

/* ---- Navigation ng wizard (laging abot ng hinlalaki) ---- */
.st-nav {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -14px -14px;
    padding: 10px 14px;
    border-top: 1px solid var(--st-line);
    border-radius: 0 0 15px 15px;
    background: var(--st-paper);
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.04);
}
.st-nav--end { justify-content: flex-end; }
/* Ang field na naka-focus ay hindi dapat matakpan ng sticky na Next sa ibaba, o ng sticky na
   variance chip sa itaas (gumagana sa focus at sa scrollIntoView ng browser). */
.st-root input,
.st-root select,
.st-root textarea { scroll-margin-bottom: 96px; scroll-margin-top: 72px; }
/* Hakbang 4 at mga tapos na screen: hindi sticky, para hindi matakpan ang PIN pad. */
.st-nav--static { position: static; box-shadow: none; }
.st-nav__hint { flex: 1 1 auto; min-width: 0; color: var(--st-muted); font-size: 13px; text-align: center; }
.st-nav .st-btn { flex: none; min-width: 96px; }

/* ---- Sheet (nasa body, labas ng .st-root) ---- */
.st-sheet-back {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.45);
}
.st-sheet {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 16px 16px 0 0;
    background: var(--st-paper);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}
.st-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-bottom: 1px solid var(--st-line);
}
.st-sheet__title { font-size: 16px; font-weight: 800; }
.st-x {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--st-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.st-sheet__body { display: grid; gap: 12px; padding: 16px; }
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (min-width: 640px) {
    .st-sheet-back { align-items: center; padding: 16px; }
    .st-sheet { border-radius: 16px; }
}
@media (max-width: 420px) {
    .st-scr { padding: 12px; }
    .st-nav { margin: 0 -12px -12px; padding: 10px 12px; }
    .st-pad { grid-template-columns: repeat(3, 60px); }
    .st-den { grid-template-columns: 72px 72px minmax(0, 1fr); }
    .st-den .st-qty { width: 72px; }
}