/* 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 listing under the store card — Our Services, Hot
   Deals, Special Combos, Pre-owned, Featured, Swappables — is the old
   drifting rows again (owner, 18 Oct 2026: "exactly as it was"):
   assets/css/landing_listing.css, its look scoped to it, its colours this
   sheet's. The products page (products.php, premium.php) links it for its
   first paint: section SF2, and the footer it shares with the landing.

   Owner, 18 Oct 2026: the buttons two to a line, the search with Scan in the
   store card and no categories under it; the footer's links in the menu (open
   at every width), Visit in the footer, one quiet line under it; 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 shelf pages) 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 the trade,
   14 motion, SF2 the shelf.

   This shop's copy (17 Oct 2026, ported from the platform's): no rooms, no
   verification tick, no Jobs, no policy links; section 13 is the gadget trade
   instead — a repair in Track (the status chips, the device, its parts) and
   the swap sheet's picture.

   Tokens: platform/ui.css's light and dark blocks, copied under the same names
   (here: the same blocks as assets/css/signin_card.css, cut from it —
   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 default 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] .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) { 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; }
/* The card's words (owner, 23 Oct 2026: "classy, stylish and modern with
   attractive fonts"): the address on a line of its own beside its pin, the tags
   in small spaced capitals, then the pitch behind one accent rule — the
   tagline in DM Serif Display Italic (sf_display.css), the line under it plain. */
html[data-sf] .sf-meta { display: grid; gap: 8px; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--mute); }
html[data-sf] .sf-addr { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
html[data-sf] .sf-addr .sf-i { flex: none; width: 16px; height: 16px; margin-top: 1.5px; color: var(--brand-ink); }
html[data-sf] .sf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
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: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; }
html[data-sf] .sf-pitch { margin-top: 16px; padding: 2px 0 2px 14px; border-left: 3px solid var(--brand-fill); }
html[data-sf] .sf-lead { font-family: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  font-style: italic; font-weight: 400; font-size: 23px; line-height: 28px; letter-spacing: .005em; color: var(--ink); }
html[data-sf] .sf-sub { margin-top: 6px; font-size: 14.5px; line-height: 22px; color: var(--ink-2); max-width: 60ch; }
html[data-sf] .sf-lead + .sf-sub { margin-top: 6px; }
/* 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 listing */
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-pitch { 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);
   the listing's are assets/css/landing_listing.css's. */

/* == 8 · cards ====
   The listing's cards — products, deals, combos, the trade's — are the old
   glass cards again (owner, 18 Oct 2026): assets/css/landing_listing.css. */

/* == 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 landing's: the business, Visit and the line under them; from 960 px the
   business on the left, Visit beside it. The products page's: the business,
   its own links row (Home, Catalogue) and the same 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); }
/* One quiet block, centred (owner, 22 Oct 2026: "minimalize that footer part
   and centralize it … short and clean"): a hairline, "© year name · All rights
   reserved", then the shop's credit — two lines on a phone, one from 720 px.
   Its link reaches 44 px by 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 Track (a repair or a purchase). */
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 · the trade: a repair in Track, the swap sheet's picture ==== */
/* a repair job (track_modal_js.php renderRepair): its status in words on their wash, the device, the parts */
html[data-sf] .track-status.repair-status--received, html[data-sf] .track-status.repair-status--inprogress { background: var(--brand-wash); color: var(--brand-ink); }
html[data-sf] .track-status.repair-status--awaitingparts { background: var(--warn-wash); color: var(--warn); }
html[data-sf] .track-status.repair-status--completed, html[data-sf] .track-status.repair-status--collected { background: var(--good-wash); color: var(--good); }
html[data-sf] .track-status.repair-status--cancelled { background: var(--bad-wash); color: var(--bad); }
html[data-sf] .track-device { margin-bottom: 2px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
html[data-sf] .track-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--mute); }
html[data-sf] .track-parts em { padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-style: normal; }
html[data-sf] .track-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 18px; color: var(--mute); }
/* the swap sheet's picture of the device brought in: no photograph is the quiet mark, never the green plus (/pp.png) */
html[data-sf] #swapCalcModal .swc__img[src$="/pp.png"] { object-position: -999px 0; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b97ad' 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") center / 26px no-repeat; }

/* == 14 · motion ====
   Nothing on this page moves by itself but the banner, which waits six
   seconds a slide and stands 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 products.php and premium.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 > .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 > .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; }