/* The storefront: a business's public homepage (index.php on its own address).

   Owner, 17 Oct 2026: "improve the entire business landing page to the best
   practice ui standard, make it very matured and catchy and organized".

   Linked by index.php in its head, stamped with its file time, and the only
   sheet the first paint waits for. It replaced the page's 41.6 KB inline
   <style> and landing_polish.css: no web fonts, no gradients, no blurred
   orbs, no emoji. The listings under the store card are the old drifting
   rows again (owner, 18 Oct 2026): index.php's own style block, held to
   .lp-list, their colours this sheet's. The products page (menu.php,
   vip.php) links it for its first paint: section SF2, and the footer.

   Owner, 18 Oct 2026: the buttons two to a line, the search with Scan in the
   store card, no categories; the footer's links in the menu (open at every
   width), Visit in the footer, one quiet © line; one colour.

   Every rule begins html[data-sf] (the page says <html data-sf>): a page that
   links this without asking for it is not touched, and each rule outweighs
   shop_cart.css's for the same element — that sheet (the cart's sheets,
   shared with the products page) is linked at the END of the page, later in
   the cascade.

   Sections: 1 tokens, 2 base, 3 bar, 4 drawer, 5 hero, 6 browse, 7 sections,
   8 cards, 9 visit, 10 footer, 11 cart + toast, 12 sheets, 13 rooms, 14 motion,
   SF2 the shelf.

   Tokens: platform/ui.css's light and dark blocks, copied under the same names
   (tests/storefront_look_test.php fails if they drift), switched by html.dark
   or data-theme="dark" (the theme script in the page's head: the visitor's
   choice, else the phone's setting). The business's own Primary colour, when
   changed from the default, arrives as --sf-accent on <html data-accent>
   (sfAccent(), storefront_ui.php, makes sure white reads on it); its paler and
   deeper shades are mixed here. The cart's sheets still speak their old names
   (--grad, --text, --muted ...), pointed at the tokens below. */

/* == 1 · tokens ==== */
html[data-sf] {
  color-scheme: light;
  --ink: #13111c;
  --ink-2: #383449;
  --mute: #6d6982;
  --faint: #9b97ad;
  --line: #e6e4ee;
  --line-2: #f0eff5;
  --bg: #f8f7fb;
  --surface: #ffffff;
  --surface-2: #f4f3f8;
  --brand: #6d28d9;
  --brand-ink: #5b21b6;
  --brand-wash: #f4f1fe;
  --brand-fill: var(--brand);
  --brand-fill-hover: var(--brand-ink);
  --good: #15803d;
  --good-wash: #eafaf0;
  --warn: #b45309;
  --warn-wash: #fdf4e7;
  --bad: #be3d2a;
  --bad-wash: #fdf2f0;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --t-11: 11px;   --t-12: 12px;   --t-13: 13px;   --t-14: 14px;
  --t-15: 15px;   --t-16: 16px;   --t-18: 18px;   --t-20: 20px;
  --t-24: 24px;   --t-30: 30px;   --t-38: 38px;   --t-48: 48px;
  --s-1: 4px;    --s-2: 8px;    --s-3: 12px;    --s-4: 16px;
  --s-5: 20px;    --s-6: 24px;    --s-8: 32px;    --s-10: 40px;
  --s-12: 48px;   --s-16: 64px;   --s-20: 80px;   --s-24: 96px;
  --r-sm: 8px;    --r: 12px;    --r-lg: 16px;   --r-xl: 20px;
  --r-pill: 999px;
  --lift: 0 1px 2px rgba(11, 16, 32, .04), 0 4px 12px -4px rgba(11, 16, 32, .08);
  --lift-2:0 8px 28px -8px rgba(11, 16, 32, .18);
  --h-sm: 34px;   --h: 40px;    --h-lg: 48px;
  --page: 1080px;
  --gutter: var(--s-5);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: .15s;

  /* the storefront's own */
  --sf-g: 16px;                 /* the side gutter: 16 on a phone, 24 from 600 */
  --sf-bar: 56px;
  --sf-veil: rgba(9, 8, 16, .48);
  /* the names the cart's sheets (shop_cart.css) and the older parts still use */
  --grad: var(--brand-fill);
  --text: var(--ink);
  --muted: var(--mute);
  --card-bg: var(--surface);
  --bg-elev: var(--surface);
  --glass-bg: var(--surface-2);
  --glass-border: var(--line);
  --accent-text: var(--brand-ink);
  --cyan: var(--brand);
  --radius-md: 16px;
}
@media (min-width: 600px) { html[data-sf] { --sf-g: 24px; } }
html[data-sf].dark, html[data-sf][data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecebf6;
  --ink-2: #cbc8dc;
  --mute: #9893ad;
  --faint: #6c6883;
  --line: #29253a;
  --line-2: #1f1c2d;
  --bg: #0b0a12;
  --surface: #13111c;
  --surface-2: #1a1726;
  --brand: #8b5cf6;
  --brand-ink: #c4b5fd;
  --brand-wash:#1c1836;
  --brand-fill: #7c3aed;
  --brand-fill-hover: #6d28d9;
  --good: #4ade80;  --good-wash: #0e2a1a;
  --warn: #fbbf24;  --warn-wash: #2a2109;
  --bad: #fca5a5;  --bad-wash: #2a1512;
  --lift: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.6);
  --lift-2: 0 10px 34px -10px rgba(0,0,0,.75);
  --sf-veil: rgba(0, 0, 0, .62);
}
/* The business's own colour. White on --sf-accent reads at 4.5:1 or better
   (sfAccent()); the ink is deeper and the wash paler, so words on them read
   too. A browser without color-mix() keeps the suite's violet. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html[data-sf][data-accent] {
    --brand: var(--sf-accent);
    --brand-fill: var(--sf-accent);
    --brand-fill-hover: color-mix(in srgb, var(--sf-accent) 85%, #000);
    --brand-ink: color-mix(in srgb, var(--sf-accent) 82%, #000);
    --brand-wash: color-mix(in srgb, var(--sf-accent) 9%, #fff);
  }
  html[data-sf][data-accent].dark, html[data-sf][data-accent][data-theme="dark"] {
    --brand: color-mix(in srgb, var(--sf-accent) 50%, #fff);
    --brand-ink: color-mix(in srgb, var(--sf-accent) 30%, #fff);
    --brand-wash: color-mix(in srgb, var(--sf-accent) 20%, #13111c);
  }
}
/* == 2 · base ==== */
html[data-sf] *, html[data-sf] *::before, html[data-sf] *::after { box-sizing: border-box; }
html[data-sf] { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sf-bar) + 12px); }
html[data-sf], html[data-sf] body { overflow-x: clip; }
html[data-sf] body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[data-sf] h1, html[data-sf] h2, html[data-sf] h3, html[data-sf] h4, html[data-sf] p { margin: 0; }
html[data-sf] h1, html[data-sf] h2, html[data-sf] h3 { color: var(--ink); text-wrap: balance; }
html[data-sf] a { color: inherit; text-decoration: none; }
html[data-sf] img { max-width: 100%; display: block; }
html[data-sf] button { font: inherit; color: inherit; cursor: pointer; }
html[data-sf] [hidden] { display: none !important; }
html[data-sf] :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html[data-sf] :focus:not(:focus-visible) { outline: none; }
html[data-sf] ::selection { background: var(--brand-fill); color: #fff; }
html[data-sf] .sf-i { width: 20px; height: 20px; flex: none; display: block; }
html[data-sf] .sf-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--sf-g); }

/* buttons: the cart's sheets use the same two, so they are set here for the whole page */
html[data-sf] .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-lg); padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 650; line-height: 1.2; text-align: center; box-shadow: none; transform: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
html[data-sf] .btn-primary { background: var(--brand-fill); color: #fff; }
html[data-sf] .btn-primary:hover { background: var(--brand-fill-hover); transform: none; box-shadow: none; }
html[data-sf] .btn-outline, html[data-sf] .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-sf] .btn-outline:hover, html[data-sf] .btn-ghost:hover { background: var(--surface-2); border-color: var(--faint); color: var(--ink); }
html[data-sf] .btn-block { width: 100%; }

/* == 3 · bar ====
   Solid, 56 px, sticky — never see-through over the banner (a light bar over
   a dark picture is how the old toggle came to read at 1.1:1). */
html[data-sf] .sf-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface); box-shadow: inset 0 -1px 0 var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
html[data-sf] .sf-bar__in {
  display: flex; align-items: center; gap: 4px; height: var(--sf-bar);
  max-width: var(--page); margin: 0 auto; padding: 0 calc(var(--sf-g) - 8px) 0 var(--sf-g);
}
html[data-sf] .nav-brand { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }
html[data-sf] .sf-brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; }
html[data-sf] .sf-brand b { font-size: 16px; line-height: 22px; font-weight: 650; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sf] .nav-brand .vtick { flex: none; }
html[data-sf] .sf-ib {
  width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r); background: transparent; color: var(--ink);
  transition: background-color var(--fast) var(--ease);
}
html[data-sf] .sf-ib:hover { background: var(--surface-2); }
html[data-sf] .theme-toggle-btn .sf-sun, html[data-sf].dark .theme-toggle-btn .sf-moon { display: none; }
html[data-sf].dark .theme-toggle-btn .sf-sun { display: block; }
html[data-sf] .sf-links { display: none; }
/* the cashback balance (cashback_badge.php, shared with the shelf pages): flat, a thumb's height, words at 12 px */
html[data-sf] .sf-bar .cbk { margin-right: 4px; }
html[data-sf] .sf-bar .cbk__btn { min-height: 40px; padding: 0 12px 0 8px; gap: 8px; background: var(--good-wash); color: var(--good);
  box-shadow: none; border-radius: var(--r-pill); transform: none; }
html[data-sf] .sf-bar .cbk__label { font-size: 12px; letter-spacing: 0; text-transform: none; opacity: 1; font-weight: 600; }
html[data-sf] .sf-bar .cbk__value { font-size: 14px; }
html[data-sf] .sf-bar .cbk__spark::after { animation: none; display: none; }
@media (min-width: 960px) {
  html[data-sf] .sf-links { display: flex; align-items: center; gap: 2px; min-width: 0; margin-right: 4px; overflow: hidden; }
  html[data-sf] .sf-links a { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r);
    font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  html[data-sf] .sf-links a:hover { background: var(--surface-2); color: var(--ink); }
}

/* == 4 · drawer ====
   Shut, it is hidden and casts no shadow (the old one, pushed off the right
   edge, still laid 84 px of grey haze along every phone screen). */
html[data-sf] .nav-scrim { position: fixed; inset: 0; z-index: 110; background: var(--sf-veil); opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease), visibility 0s linear .24s; }
html[data-sf] .nav-scrim.show { opacity: 1; visibility: visible; transition: opacity .24s var(--ease), visibility 0s; }
html[data-sf] body.nav-open { overflow: hidden; }
html[data-sf] .sf-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(320px, 86vw);
  display: flex; flex-direction: column; background: var(--surface); box-shadow: none;
  transform: translateX(100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform .26s var(--ease), visibility 0s linear .26s, box-shadow 0s linear .26s;
}
html[data-sf] .sf-drawer.open { transform: none; visibility: visible; box-shadow: var(--lift-2);
  transition: transform .26s var(--ease), visibility 0s, box-shadow 0s; }
html[data-sf] .nav-drawer-head { display: flex; align-items: center; gap: 8px; min-height: var(--sf-bar);
  padding: env(safe-area-inset-top, 0px) 8px 0 16px; border-bottom: 1px solid var(--line); }
html[data-sf] .nav-drawer-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
html[data-sf] .nav-drawer-title > span:not(.sf-logo):not(.vtick) { font-size: 15px; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sf] .sf-drawer__list { display: flex; flex-direction: column; padding: 8px; }
html[data-sf] .sf-drawer__list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r);
  font-size: 15px; font-weight: 500; color: var(--ink); }
html[data-sf] .sf-drawer__list a:hover { background: var(--surface-2); }
html[data-sf] .sf-drawer__list a .sf-i { color: var(--brand-ink); }
html[data-sf] .sf-drawer__list a .sf-go { margin-left: auto; width: 16px; height: 16px; color: var(--faint); }
html[data-sf] .sf-drawer__sep { height: 1px; margin: 8px 12px; background: var(--line-2); border: 0; }
html[data-sf] .sf-drawer :focus-visible { outline-offset: -2px; }

/* == 5 · hero: the banner, the logo on its edge, who and where, the actions and the search == */
html[data-sf] .sf-hero { background: var(--surface); border-bottom: 1px solid var(--line); }
html[data-sf] .sf-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
html[data-sf] .sf-cover img, html[data-sf] .sf-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease); }
html[data-sf] .sf-cover .active { opacity: 1; }
/* each dot is a 40 px button; the mark inside it is 6 px (the shown one 18) */
html[data-sf] .hero-dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; }
html[data-sf] .hero-dot { width: 40px; height: 40px; padding: 0 0 10px; border: 0; background: transparent;
  display: inline-flex; align-items: flex-end; justify-content: center; }
html[data-sf] .hero-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); transition: width var(--fast) var(--ease); }
html[data-sf] .hero-dot[aria-selected="true"]::before { width: 18px; background: #fff; }
html[data-sf] .sf-store { max-width: var(--page); margin: 0 auto; padding: 16px var(--sf-g) 20px; }
html[data-sf] .sf-id { display: flex; align-items: center; gap: 12px; }
html[data-sf] .sf-id__t { min-width: 0; }
html[data-sf] .sf-logo {
  position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--r); background: var(--brand-wash); color: var(--brand-ink);
  font-size: 15px; font-weight: 750; letter-spacing: .02em; line-height: 1;
}
html[data-sf] .sf-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
html[data-sf] .sf-logo--sm { width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 13px; }
html[data-sf] .sf-logo--lg { width: 64px; height: 64px; border-radius: var(--r-lg); font-size: 22px; }
html[data-sf] .sf-hero.has-cover .sf-id { display: block; }
html[data-sf] .sf-hero.has-cover .sf-logo--lg { margin: -48px 0 12px; box-shadow: 0 0 0 4px var(--surface); }
html[data-sf] .sf-id h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.012em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-sf] .sf-id h1 .vtick { vertical-align: -2px; margin-left: 4px; }
html[data-sf] .sf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px;
  font-size: 13px; line-height: 18px; color: var(--mute); }
html[data-sf] .sf-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
html[data-sf] .sf-meta .sf-i { width: 16px; height: 16px; }
html[data-sf] .sf-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
html[data-sf] .sf-lead { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
html[data-sf] .sf-sub { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--mute); }
/* The owner's buttons two to a line (an odd last one takes its line), the round
   ways to reach the business in a row of their own, then the search with Scan
   beside it. A main button alone shares its line with the round ones. */
html[data-sf] .hero-ctas { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
html[data-sf] .hero-ctas:has(> .sf-acts > .btn:only-child) { grid-template-columns: minmax(0, 1fr) auto; }
html[data-sf] .sf-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-sf] .sf-acts > .btn { display: block; min-width: 0; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; line-height: 42px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sf] .sf-acts > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-sf] .sf-reach { display: flex; gap: 8px; }
html[data-sf] .sf-round {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r-pill); background: var(--brand-wash); color: var(--brand-ink);
  transition: background-color var(--fast) var(--ease);
}
html[data-sf] .sf-round:hover { background: var(--line-2); }
/* the search's answers fall from the whole row, Scan included, over the listings */
html[data-sf] .sf-search { grid-column: 1 / -1; position: relative; z-index: 5; display: flex; gap: 8px; }
html[data-sf] .sf-search > .global-search { flex: 1 1 auto; min-width: 0; }
/* Scan (shop_scan.js puts it in .search-container): the products page's own look */
html[data-sf] .sf-search > .scanbtn { flex: none; height: 48px; min-width: 48px; padding: 0 16px; gap: 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: none; font: 600 14px/1 var(--sans); }
html[data-sf] .sf-search > .scanbtn:hover { border-color: var(--faint); color: var(--ink); }
html[data-sf] .sf-search > .scanbtn svg { width: 20px; height: 20px; flex: 0 0 20px; }
@media (max-width: 620px) { html[data-sf] .sf-search > .scanbtn { width: 48px; padding: 0; } }
@media (min-width: 600px) {
  html[data-sf] .sf-logo--lg { width: 72px; height: 72px; font-size: 24px; }
  html[data-sf] .hero-ctas { max-width: 480px; }
}
@media (min-width: 960px) {
  html[data-sf] .sf-hero { background: transparent; border: 0; padding: 24px var(--sf-g) 0; }
  /* not overflow: hidden — the card would cut off the search's answers; the cover rounds its own corners */
  html[data-sf] .sf-hero__in { max-width: calc(var(--page) - 2 * var(--sf-g)); margin: 0 auto; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-xl); }
  html[data-sf] .sf-cover { aspect-ratio: 16 / 5; border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0; }
  /* the name at the top (the logo stays on the banner's edge) however tall the right column grows */
  html[data-sf] .sf-store { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto 1fr; align-items: start;
    gap: 12px 32px; padding: 20px 28px 24px; }
  html[data-sf] .sf-hero.has-cover .sf-store { padding-top: 0; }
  html[data-sf] .sf-store > .sf-lead, html[data-sf] .sf-store > .sf-sub { grid-column: 1; }
  html[data-sf] .hero-ctas { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; max-width: none; }
  html[data-sf] .sf-hero.has-cover .hero-ctas { margin-top: 20px; }
  html[data-sf] .sf-hero.has-cover .sf-logo--lg { margin-top: -40px; }
  html[data-sf] .sf-id h1 { font-size: 30px; line-height: 36px; }
}

/* == 6 · browse: the search, in the store card (section 5 places it) ==== */
html[data-sf] .gs-form { position: relative; display: flex; align-items: center; height: 48px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
html[data-sf] .gs-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
html[data-sf] .gs-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; display: flex; }
html[data-sf] #gsInput { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 8px 0 44px; border: 0; outline: 0;
  background: transparent; color: var(--ink); font-size: 16px; font-family: inherit; }
html[data-sf] #gsInput::placeholder { color: var(--mute); opacity: 1; }
html[data-sf] #gsInput::-webkit-search-cancel-button { display: none; }
html[data-sf] .gs-clear { display: none; width: 40px; height: 40px; margin-right: 4px; flex: none; padding: 0; border: 0;
  border-radius: var(--r); background: transparent; color: var(--mute); align-items: center; justify-content: center; }
html[data-sf] .gs-clear:hover { background: var(--surface-2); color: var(--ink); }
html[data-sf] .gs-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; max-height: 60vh; overflow: auto;
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift-2); }
html[data-sf] .gs-group-label { padding: 10px 10px 6px; font-size: 12px; font-weight: 650; color: var(--mute); }
html[data-sf] .gs-empty { padding: 20px 12px; text-align: center; color: var(--mute); font-size: 14px; }
html[data-sf] .gs-near { margin: 2px 2px 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--mute); font-size: 13px; }

/* == 7 · sections ====
   Visit, the one section this sheet drew, is in the footer (sections 9, 10). */

/* == 8 · cards: products, deals, combos ==== */
html[data-sf] .sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 599px) { html[data-sf] .sf-grid > :nth-child(n+15) { display: none; } }
@media (min-width: 600px) { html[data-sf] .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { html[data-sf] .sf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
html[data-sf] .menu-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
  text-align: left; color: inherit; font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
@media (hover: hover) { html[data-sf] .menu-card:hover { border-color: var(--faint); box-shadow: var(--lift); } }
html[data-sf] .menu-card.is-sold .menu-card-img { opacity: .55; }
html[data-sf] .menu-card-img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%;
  background: var(--surface-2) center / cover no-repeat; color: var(--faint); }
/* The two marks every card carries — "no photo yet" and the add sign — drawn
   once here (masks the colour of their text), not as an SVG in each card. */
html[data-sf] .menu-card-img:not(.is-painted)::after, html[data-sf] .card-add::before {
  content: ""; display: block; width: 28px; height: 28px; background: currentColor;
  -webkit-mask: var(--sf-mark) center / contain no-repeat; mask: var(--sf-mark) center / contain no-repeat; }
html[data-sf] .menu-card-img { --sf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M20.5 15.5l-4.6-4.6a1.2 1.2 0 0 0-1.7 0L6.5 18.5'/%3E%3C/svg%3E"); }
html[data-sf] .card-add { --sf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E"); }
html[data-sf] .card-add::before { width: 18px; height: 18px; }
html[data-sf] .menu-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px 12px; }
html[data-sf] .menu-card-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); min-height: 40px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-sf] .menu-card-brand { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sf] .menu-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
html[data-sf] .menu-card-price { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-sf] .deal-was { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--mute); text-decoration: line-through; white-space: nowrap; }
html[data-sf] .menu-card-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sf] .card-add { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--brand-wash); color: var(--brand-ink); }
html[data-sf] .card-flag { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600; letter-spacing: 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line); }
html[data-sf] .card-flag--deal, html[data-sf] .card-flag--save { background: var(--bad-wash); color: var(--bad); box-shadow: none; }
html[data-sf] .sf-all { display: flex; width: 100%; margin-top: 16px; }
@media (min-width: 600px) { html[data-sf] .sf-all { width: fit-content; min-width: 240px; margin: 24px auto 0; } }

/* == 9 · visit: every contact is a real tap — in the footer (owner, 18 Oct 2026) ==== */
html[data-sf] .sf-foot__visit { margin-top: 16px; }
html[data-sf] .sf-foot__visit h2 { margin-bottom: 8px; font-size: 15px; line-height: 22px; font-weight: 650; }
html[data-sf] .sf-visit { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
html[data-sf] .sf-li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; border-top: 1px solid var(--line-2); }
html[data-sf] .sf-visit > .sf-li:first-child { border-top: 0; }
@media (hover: hover) { html[data-sf] .sf-li:hover { background: var(--surface-2); } }
html[data-sf] .sf-li__i { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--brand-wash); color: var(--brand-ink); }
html[data-sf] .sf-li__i .sf-i { width: 18px; height: 18px; }
html[data-sf] .sf-li__t { flex: 1 1 auto; min-width: 0; }
html[data-sf] .sf-li__t b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sf] .sf-li__t small { display: block; font-size: 12px; line-height: 16px; color: var(--mute); }
html[data-sf] .sf-li__go { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; font-weight: 600; color: var(--brand-ink); }
html[data-sf] .sf-li__go .sf-i { width: 16px; height: 16px; }
html[data-sf] .footer-social { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; margin: 0; border-top: 1px solid var(--line-2); }
html[data-sf] .footer-social__link { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); transform: none; }
html[data-sf] .footer-social__link:hover { background: var(--line); color: var(--ink); }
html[data-sf] .footer-social__link svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 960px) {
  html[data-sf] .sf-visit { display: grid; grid-template-columns: 1fr 1fr; }
  html[data-sf] .sf-visit > .sf-li:nth-child(2) { border-top: 0; }
  html[data-sf] .sf-visit > .sf-li:nth-child(odd) { border-right: 1px solid var(--line-2); }
  html[data-sf] .sf-visit > .footer-social { grid-column: 1 / -1; }
}

/* == 10 · footer ====
   The business, then Visit (the landing's; beside it from 960 px) or Home ·
   Catalogue (the products page's), then the line. */
html[data-sf] .sf-foot { margin-top: 32px; background: var(--surface); border-top: 1px solid var(--line); }
html[data-sf] .sf-foot__in { max-width: var(--page); margin: 0 auto; padding: 24px var(--sf-g) calc(88px + env(safe-area-inset-bottom, 0px)); }
html[data-sf] .footer-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; color: var(--ink); }
html[data-sf] .footer-brand strong { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-sf] .sf-foot__links { display: flex; flex-wrap: wrap; margin: 12px -8px 0; }
html[data-sf] .sf-foot__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 8px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink-2); }
html[data-sf] .sf-foot__links a:hover { background: var(--surface-2); color: var(--ink); }
/* The line: one small centred block (owner, 22 Oct 2026: "short and clean"),
   one line from 720 px; the link's 44 px is padding the line does not grow by,
   the foot's 88 px keep the cart button and the dock off it. */
html[data-sf] .sf-fine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-2); font-size: 12px; line-height: 18px; color: var(--mute); text-align: center; }
html[data-sf] .sf-fine > * { margin: 0; }
html[data-sf] .sf-fine > p:first-child { flex: 0 1 100%; }
html[data-sf] .footer-powered { display: inline-flex; align-items: center; column-gap: 6px; }
html[data-sf] .footer-powered a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  margin: -13px -6px; padding: 0 6px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; text-underline-offset: 3px; }
@media (hover: hover) { html[data-sf] .footer-powered a:hover { color: var(--ink); text-decoration: underline; } }
@media (min-width: 720px) {
  html[data-sf] .sf-fine > p:first-child { flex: 0 1 auto; }
  html[data-sf] .footer-powered::before { content: "\00b7"; }
}
@media (min-width: 960px) {
  html[data-sf] .sf-foot.has-visit .sf-foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 32px; align-items: start; }
  html[data-sf] .sf-foot.has-visit .sf-foot__visit { margin-top: 0; }
  html[data-sf] .sf-foot.has-visit .sf-fine { grid-column: 1 / -1; }
}

/* == 11 · cart button + toast ==== */
/* whole here, not only on top of shop_cart.css: that sheet (the sheets' look)
   no longer holds up the first paint, it arrives just after it */
html[data-sf] .cart-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-fill); color: #fff; box-shadow: var(--lift-2); transform: none; cursor: pointer; }
html[data-sf] .cart-fab:hover { background: var(--brand-fill-hover); transform: none; }
html[data-sf] .cart-fab svg { width: 24px; height: 24px; }
html[data-sf] .cart-fab-count { position: absolute; top: -2px; right: -2px; display: none; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface); }
html[data-sf] .cart-fab-count.on { display: inline-flex; }
/* the page's own toast (msg_card.js's card takes over where it loads): at the foot, clear of the cart button, above every sheet */
html[data-sf] #toastContainer{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:10000;
  display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw, 420px);pointer-events:none;}
html[data-sf] .toast { max-width: 100%; padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: var(--surface);
  font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: var(--lift-2); pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
html[data-sf] .toast.show { opacity: 1; transform: none; }
html[data-sf] .toast.error { background: var(--bad); color: #fff; }
html[data-sf].dark .toast.error { background: #be3d2a; }
@keyframes spin { to { transform: rotate(360deg); } }

/* == 12 · sheets opened from the page ====
   The cart, item and sign-in sheets keep shop_cart.css (shared with the shelf
   pages) through the names above; these are the two that only this page has —
   Staff & Partners, and Find my receipt. */
html[data-sf] .pay-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
html[data-sf] .pay-modal.open { display: flex; }
html[data-sf] .pay-modal-backdrop { position: absolute; inset: 0; background: var(--sf-veil); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-sf] .pay-modal-box.glass { background: var(--surface); border-color: var(--line); box-shadow: var(--lift-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-sf] .auth-tabs { display: flex; gap: 4px; margin: 0 44px 20px 0; padding: 4px; border-radius: var(--r); background: var(--surface-2); }
html[data-sf] .auth-tab { flex: 1; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--mute); font-size: 14px; font-weight: 600; }
html[data-sf] .auth-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }
html[data-sf] .auth-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
html[data-sf] .auth-kind-opt { position: relative; display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer; }
html[data-sf] .auth-kind-opt.on { border-color: var(--brand); background: var(--brand-wash); }
html[data-sf] .auth-kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
html[data-sf] .auth-kind-opt span { display: block; font-size: 14px; font-weight: 650; color: var(--ink); }
html[data-sf] .upload-field { margin-bottom: 16px; }
html[data-sf] .upload-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--mute); }
html[data-sf] .upload-label em, html[data-sf] .auth-form label em.req { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--bad); }
html[data-sf] .upload-drop { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 112px; height: 112px;
  border: 1px dashed var(--faint); border-radius: var(--r); background: var(--surface-2); text-align: center; cursor: pointer; }
html[data-sf] .upload-drop:hover { border-color: var(--brand); }
html[data-sf] .upload-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
html[data-sf] .upload-drop img { width: 100%; height: 100%; object-fit: cover; }
html[data-sf] .upload-drop--file { width: 100%; height: auto; min-height: 56px; padding: 12px; }
html[data-sf] .upload-hint { padding: 0 10px; font-size: 12px; line-height: 1.45; color: var(--mute); }
html[data-sf] .upload-note { display: block; margin-top: 8px; font-size: 12px; color: var(--mute); }
html[data-sf] .track-row { display: flex; gap: 8px; align-items: stretch; }
html[data-sf] .track-row input { flex: 1; min-width: 0; margin: 0; }
html[data-sf] .track-results { margin-top: 16px; max-height: 52vh; overflow: auto; }
html[data-sf] .track-group { margin: 16px 0 8px; font-size: 12px; font-weight: 650; color: var(--mute); }
html[data-sf] .track-group:first-child { margin-top: 4px; }
html[data-sf] .track-card { margin-bottom: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
html[data-sf] .track-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
html[data-sf] .track-card-top strong { font-size: 14px; color: var(--ink); }
html[data-sf] .track-status { padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
html[data-sf] .track-status.is-paid { background: var(--good-wash); color: var(--good); }
html[data-sf] .track-status.is-unpaid { background: var(--warn-wash); color: var(--warn); }
html[data-sf] .track-sub { margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--mute); }
html[data-sf] .track-lines { list-style: none; margin: 0 0 8px; padding: 0; }
html[data-sf] .track-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--ink); }
html[data-sf] .track-lines li b { white-space: nowrap; }
html[data-sf] .track-serials { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); word-break: break-all; }
html[data-sf] .track-total { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 12px; font-size: 13px; color: var(--mute); }
html[data-sf] .track-total strong { font-size: 16px; color: var(--ink); }
html[data-sf] .track-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-sf] .track-empty { padding: 24px 12px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--mute); }
@media (max-width: 520px) { html[data-sf] .track-row { flex-direction: column; } }

/* == 13 · rooms: a hotel's, first on its page (rooms_section.php) ====
   Owner, 22 Oct 2026: two compact cards to a row on a phone, the list going
   down the page, never sideways (3 from 768 px, 4 from 1100); the landing and
   the products page's rooms group alike. #booking is Book Now alone, centred
   by its own markup. */
html[data-sf] #rooms, html[data-sf] #booking { max-width: var(--page); margin: 0 auto; padding: 32px var(--sf-g) 0; }
html[data-sf] #rooms .section-inner { max-width: none; text-align: left !important; }
html[data-sf] #rooms .section-head { max-width: none; margin: 0 0 12px !important; text-align: left; }
html[data-sf] #rooms .eyebrow, html[data-sf] #rooms .section-sub { display: none; }
html[data-sf] #rooms .section-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
html[data-sf] .rooms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
html[data-sf] .room-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: none; overflow: hidden; transform: none; }
html[data-sf] .room-card:hover { transform: none; border-color: var(--faint); }
html[data-sf] .room-image, html[data-sf] .room-slider { height: auto; aspect-ratio: 16 / 9; background: var(--surface-2); }
html[data-sf] .room-slider-dots { bottom: 6px; }
html[data-sf] .room-body { flex: 1; display: flex; flex-direction: column; padding: 10px; }
html[data-sf] .room-body h3 { margin: 0 0 6px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
html[data-sf] .room-meta { gap: 6px; margin: 0 0 6px; }
html[data-sf] .room-meta:empty { display: none; }
html[data-sf] .room-meta span { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border: 0; background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; }
html[data-sf] .room-price { margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--ink); }
html[data-sf] .room-price small { font-size: 12px; font-weight: 400; color: var(--mute); }
html[data-sf] .room-card .btn { width: 100%; min-height: 44px; margin-top: auto; padding: 0 8px; font-size: 13px; }
html[data-sf] .room-card .btn:disabled { opacity: .55; cursor: default; }
@media (min-width: 768px) {
  html[data-sf] .rooms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  html[data-sf] .room-body { padding: 14px; }
  html[data-sf] .room-body h3 { font-size: 15px; line-height: 20px; }
  html[data-sf] .room-price { font-size: 17px; line-height: 22px; }
  html[data-sf] .room-card .btn { font-size: 14px; }
}
@media (min-width: 1100px) { html[data-sf] .rooms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* == 14 · motion ====
   What moves by itself: the banner, six seconds a slide, and the listings'
   rows (index.php, initMarquees()). Both stand still for anyone who asked
   for less motion. */
@media (prefers-reduced-motion: reduce) {
  html[data-sf] *, html[data-sf] *::before, html[data-sf] *::after { transition-duration: 0s !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* == SF2 · the shelf ====
   The first paint of menu.php and vip.php; their grid and sheets: shelf.css. */
html[data-sf] .sf-bar--shelf { z-index: 1000; }
html[data-sf] .sf-shelf-h { padding: 20px 0 12px; }
html[data-sf] .sf-shelf-h h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.012em; }
html[data-sf] .search-field { position: relative; }
html[data-sf] #search-input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 48px 0 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font: 16px var(--sans); outline: 0; -webkit-appearance: none; appearance: none; }
html[data-sf] #search-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
html[data-sf] #search-input::placeholder { color: var(--mute); opacity: 1; }
html[data-sf] .sf-find__i { position: absolute; left: 14px; top: 14px; display: flex; color: var(--mute); pointer-events: none; }
html[data-sf] .ds-clear { display: none; position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r);
  background: transparent; color: var(--mute); align-items: center; justify-content: center; }
html[data-sf] .search-field.has-query .ds-clear { display: inline-flex; }
html[data-sf] .shop-grid { min-height: 70vh; margin: 6px 0 18px; }
html[data-sf] .shop-grid > .pos__none { padding: 32px 0; text-align: center; font-size: 14px; color: var(--mute); }
html[data-sf] .shop-dock { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--lift-2); }
html[data-sf] .shop-dock__wa, html[data-sf] .shop-dock__call, html[data-sf] .shop-dock > .cart-fab, html[data-sf] .shop-dock__slot {
  position: relative; inset: auto; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink); box-shadow: none; }
html[data-sf] .shop-dock__call--bar { background: var(--warn-wash); color: var(--warn); }
html[data-sf] .shop-dock__call--kitchen { background: var(--good-wash); color: var(--good); }
html[data-sf] .shop-dock__call--waiter { background: var(--brand-wash); color: var(--brand-ink); }
html[data-sf] .shop-dock > .cart-fab, html[data-sf] .shop-dock__slot { background: var(--brand-fill); color: #fff; }
html[data-sf] .has-shop-dock > .cart-fab, html[data-sf] .shop-dock__slot:not(:last-child) { display: none; }