/* The storefront's quick grid — see shop_grid.js. Draws with pos_grid.css's
   tiles and sheet; this file is only what the storefront does differently:
   it flows with the page rather than filling a fixed till, follows the page's
   theme, shows no stock counts (only "Sold out"), and carries the switch
   beside the search box. */

/* the switch, beside the search field */
.search-container { display: flex; align-items: center; gap: 8px; }
.search-container .search-field { flex: 1 1 auto; min-width: 0; }
.shopflip { flex: 0 0 auto; background: var(--bg, #f1f5f9); border-color: var(--line, #e2e8f0); }
.shopflip button { color: var(--ink-soft, #64748b); }
.shopflip button.is-on { color: var(--ink, #0f172a); background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .14)); }
.shopflip button { padding: 8px 12px; font-size: 12px; }
.shopflip button i { font-size: 11px; }
@media (max-width: 420px) { .shopflip button span { display: none; } .shopflip button { padding: 8px 10px; } }

/* which face is showing */
body:not(.shop-quick) #shopGrid { display: none; }
body.shop-quick .category-title,
body.shop-quick .menu-scroll-row,
body.shop-quick .owl-carousel,
body.shop-quick .category-buttons { display: none !important; }

/* the grid flows with the page — no fixed height, no side cart */
#shopGrid { margin: 6px 0 18px; }
/* The page defines --ink/--ink-soft/--line/--surface/--bg and swaps them
   under [data-theme=dark]; the cart stylesheet's --text/--muted/--glass-* are
   older names for the same things, kept as the second choice. Nothing here
   may name a colour of its own — a fixed light grey is what made the Details
   pill vanish in the dark. */
.pos--shop {
    --pos-line:  var(--line, var(--glass-border, #e2e8f0));
    --pos-ink:   var(--ink, var(--text, #0f172a));
    --pos-mute:  var(--ink-soft, var(--muted, #64748b));
    --pos-brand: var(--accent-text, var(--brand, #7c3aed));
    --pos-bg:    var(--surface, var(--card-bg, #ffffff));
    --pos-soft:  var(--bg, var(--glass-bg, #f8fafc));
    display: block;
    height: auto !important;
    min-height: 0;
}
.pos--shop .pos__main { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.pos--shop .pos__bar { padding: 0 0 8px; border: 0; background: transparent; }
.pos--shop .pos__cats { margin-top: 0; }
.pos--shop .pos__cat { background: var(--pos-bg); color: var(--pos-mute); }
.pos--shop .pos__cat.is-on { background: var(--pos-brand); color: #fff; }
.pos--shop .pos__scroll { overflow: visible; padding: 0; }
.pos--shop .pos__grouph { position: static; background: none; padding: 12px 2px 8px; }
.pos--shop .pos__items { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
/* Three across on a phone — the owner's call. At 360px that is ~108px a
   tile, so the type steps down with it. */
@media (max-width: 480px) {
    .pos--shop .pos__items  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .pos--shop .pos__item   { padding: 4px; border-radius: 10px; gap: 3px; }
    .pos--shop .pos__name   { font-size: 10.5px; line-height: 1.2; }
    .pos--shop .pos__price  { font-size: 11px; }
    .pos--shop .pos__forms  { font-size: 8.5px; padding: 2px 5px; }
    .pos--shop .pos__detail { font-size: 10px; padding: 4px 0; margin-top: 3px; }
}
/* The tile is a div (role=button) so the Details button can be a real
   button inside it — see shop_grid.php. */
.pos--shop .pos__item { cursor: pointer; -webkit-user-select: none; user-select: none; }
.pos--shop .pos__item:focus-visible { outline: 2px solid var(--pos-brand); outline-offset: 2px; }
/* Details: a quiet full-width pill under the price. */
.pos--shop .pos__detail {
    display: block; width: 100%; margin-top: 5px; padding: 5px 0;
    border: 1px solid var(--pos-line, #e5e7eb); border-radius: 8px;
    background: var(--pos-soft, #f8fafc); color: var(--pos-ink, #111827);
    font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .2px; line-height: 1;
    cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pos--shop .pos__detail:hover  { background: var(--brand-soft, rgba(124, 58, 237, .10)); border-color: var(--pos-brand); color: var(--pos-brand); }
.pos--shop .pos__detail:active { transform: scale(.97); }
.pos--shop .pos__item { background: var(--pos-bg); border-color: var(--pos-line); color: var(--pos-ink); }
.pos--shop .pos__item.is-on { border-color: var(--pos-brand); background: var(--pos-bg); }
.pos--shop .pos__item.is-busy { opacity: .6; pointer-events: none; }
.pos--shop .pos__name { color: var(--pos-ink); font-size: 12.5px; }
.pos--shop .pos__price { color: var(--pos-brand); font-size: 13px; white-space: normal; line-height: 1.15; }
/* no counts on the shop — only sold out */
.pos--shop .pos__stock { display: none; }
.pos--shop .pos__item.is-out { opacity: .78; cursor: not-allowed; }
.pos--shop .pos__item.is-out .pos__img { filter: grayscale(.7); }
.pos__out {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 4px 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    text-align: center; color: #fff; background: rgba(220, 38, 38, .92);
}
.pos__fout { font-size: 10px; font-weight: 800; color: #dc2626; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.pos__form.is-out { opacity: .6; cursor: not-allowed; }
/* the sheet on the shop follows the theme too */
.pos--shop .pos__ask, #sgAsk { z-index: 1200; }
#sgAsk .pos__askbox { background: var(--card-bg, var(--surface, #fff)); color: var(--text, #0f172a); }
#sgAsk .pos__form { background: var(--card-bg, var(--surface, #fff)); color: var(--text, #0f172a); border-color: var(--glass-border, #e2e8f0); }

/* ── the order: the bar at the foot and the sheet ──────────────────────────
   Both are lifted onto <body>, so they carry the same tokens the grid does. */
.sg__peek, .sg__sheet {
    --pos-line:  var(--line, var(--glass-border, #e2e8f0));
    --pos-ink:   var(--ink, var(--text, #0f172a));
    --pos-mute:  var(--ink-soft, var(--muted, #64748b));
    --pos-brand: var(--accent-text, var(--brand, #7c3aed));
    --pos-good:  #16a34a;
    --pos-bg:    var(--surface, var(--card-bg, #ffffff));
    --pos-soft:  var(--bg, var(--glass-bg, #f8fafc));
    font-family: inherit;
}
/* The bar: wide, one line, above the page's own dock. shop_grid.js sets
   `bottom` from the dock's measured height. */
.sg__peek {
    position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 1500;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px 11px 12px;
    border: 0; border-radius: 16px;
    background: linear-gradient(135deg, var(--pos-brand), color-mix(in srgb, var(--pos-brand) 70%, #1e1b4b));
    color: #fff; text-align: left; cursor: pointer;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    animation: sgPeekIn .22s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .sg__peek { background: var(--pos-brand); } }
@keyframes sgPeekIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.sg__peek[hidden] { display: none; }
.sg__peek:active { transform: scale(.985); }
.sg__peek-n {
    flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(255, 255, 255, .22);
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sg__peek-l { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg__peek-t { flex: 0 0 auto; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg__peek-go {
    flex: 0 0 auto; padding: 7px 12px; border-radius: 999px;
    background: #fff; color: var(--pos-brand);
    font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
}
.sg__peek.is-sent { background: linear-gradient(135deg, #16a34a, #15803d); }
.sg__peek.is-sent .sg__peek-go { color: #15803d; }
@media (max-width: 380px) { .sg__peek-l { display: none; } }
/* The sheet: a dimmed page and a card rising from the foot. */
.sg__sheet {
    /* above the install prompt and the dock; the cart modal (2000) only ever
       opens after this has closed */
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15, 23, 42, 0); transition: background .2s ease;
}
.sg__sheet[hidden] { display: none; }
.sg__sheet.is-in { background: rgba(15, 23, 42, .48); }
.sg__sheetbox {
    width: 100%; max-width: 560px; max-height: 84dvh;
    display: flex; flex-direction: column;
    background: var(--pos-bg); color: var(--pos-ink);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .28);
    transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .2s ease;
}
.sg__sheet.is-in .sg__sheetbox { transform: none; opacity: 1; }
@media (min-width: 640px) {
    .sg__sheet { align-items: center; padding: 20px; }
    .sg__sheetbox { border-radius: 20px; max-height: 80vh; }
}
.sg__sheeth {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--pos-line);
}
.sg__sheett { flex: 1 1 auto; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.sg__clear {
    flex: 0 0 auto; padding: 6px 10px; border-radius: 999px;
    border: 1px solid var(--pos-line); background: transparent; color: var(--pos-mute);
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sg__clear:hover { color: #b91c1c; border-color: #fecaca; }
.sg__sheet .pos__askx { flex: 0 0 auto; }
.sg__sheet .pos__lines { padding: 6px 16px; }
.sg__sheet .pos__line { padding: 11px 0; }
.sg__sheet .pos__lthumb { width: 44px; height: 44px; max-height: 44px; border-radius: 10px; }
.sg__sheet .pos__lname { font-size: 13.5px; }
.sg__sheet .pos__lsum  { font-size: 13.5px; }
.sg__sheet .pos__step button { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.sg__sheet .pos__step button:hover { background: var(--pos-soft); }
.sg__sheet .pos__qin { width: 44px; height: 32px; font-size: 14px; color: var(--pos-ink); background: var(--pos-bg); border: 1px solid var(--pos-line); border-radius: 9px; }
.sg__sheet .pos__step .pos__drop { color: #b91c1c; background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); }
.sg__sheet .pos__foot { border-top: 1px solid var(--pos-line); background: var(--pos-soft); padding: 12px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.sg__sheet .pos__total > span { color: var(--pos-mute); }
.sg__sheet .pos__total > b { color: var(--pos-ink); }
.sg__sheet .pos__count { color: var(--pos-mute); }
.sg__sheet .pos__send { width: 100%; margin-top: 10px; background: var(--pos-brand); }
.sg__sheet .pos__send:hover:not(:disabled) { filter: brightness(.92); background: var(--pos-brand); }
.sg__sheet .pos__send:disabled { background: var(--pos-line); color: var(--pos-mute); }
.sg__keep {
    width: 100%; margin-top: 8px; padding: 11px; border-radius: 12px;
    border: 1px solid var(--pos-line); background: transparent; color: var(--pos-ink);
    font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sg__keep:hover { background: var(--pos-bg); }
body.sg-sheet-open, body.sg-ask-open { overflow: hidden; }
/* the tile's count badge, on the shop */
.pos--shop .pos__item.is-on .pos__badge { display: flex; }
.pos--shop .pos__badge { background: var(--pos-brand); }
/* how many of a form are on the order, in the chooser */
.pos--shop .pos__form.is-on, #sgAsk .pos__form.is-on { border-color: var(--pos-brand); box-shadow: inset 0 0 0 1px var(--pos-brand); }
#sgAsk .pos__fq { margin-left: auto; min-width: 22px; text-align: center; font-weight: 800; color: var(--pos-brand); }
:root[data-theme="dark"] .sg__sheet .pos__step .pos__drop { color: #fca5a5; background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .35); }
/* a browser still holding the old install script: the card yields to the sheet */
body.sg-sheet-open .pwa-sheet, body.sg-ask-open .pwa-sheet { visibility: hidden !important; }