/* ═══════════════════════════════════════════════════════════════════════════
   MERGE Mall — storefront
   ───────────────────────────────────────────────────────────────────────────
   Brand blue (#2563eb) carries structure and trust; a warm coral-orange
   carries every call to act, so "buy" is never confused with "navigate".
   Type pairs Plus Jakarta Sans (display, geometric and confident) with Inter
   (UI and body, quiet and legible at small sizes).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6fe;
  --brand-200: #bfd3fe;
  --brand-400: #6096fa;
  --brand:     #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1a3faf;
  --brand-900: #14245c;

  /* action */
  --pop-50:  #fff4ed;
  --pop-100: #ffe5d3;
  --pop:     #f97316;
  --pop-600: #e35d09;

  /* neutrals, biased very slightly cool toward the brand */
  --ink:     #0b1220;
  --ink-2:   #46536b;
  --ink-3:   #7d8aa0;
  --ink-4:   #a8b3c4;
  --line:    #e4e9f1;
  --line-2:  #eef1f6;
  --surface: #ffffff;
  --raised:  #f7f9fc;
  --bg:      #f4f7fb;

  /* semantic, deliberately separate from the accent */
  --ok:     #047857;
  --ok-bg:  #e7f8f1;
  --warn:   #a35b06;
  --warn-bg:#fdf3e3;
  --bad:    #c72d20;
  --bad-bg: #fdeeec;

  --head: #0b1f3f;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(11,18,32,.05);
  --sh-2: 0 2px 6px rgba(11,18,32,.06), 0 8px 20px rgba(11,18,32,.05);
  --sh-3: 0 10px 34px rgba(11,18,32,.12);
  --sh-pop: 0 6px 20px rgba(249,115,22,.30);

  /*
   * Gradients and motion.
   *
   * Every interactive surface that is "on" — the active nav pill, the
   * categories button, a selected chip — is painted with the same brand ramp,
   * so a shopper learns one visual rule rather than six. The spring easing is
   * shared for the same reason: everything that lifts, lifts the same way.
   */
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  --grad-pop:   linear-gradient(135deg, var(--pop) 0%, var(--pop-600) 100%);
  --grad-head:  linear-gradient(112deg, #0b1f3f 0%, #112a54 46%, #16325f 100%);

  --glow-brand: 0 4px 14px rgba(37,99,235,.34);
  --glow-pop:   0 6px 20px rgba(249,115,22,.34);
  --ring-brand: 0 0 0 3px rgba(37,99,235,.18);

  --spring: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .16s var(--spring);
  --t-mid:  .26s var(--spring);

  --display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 124px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-50:  #111d38;
    --brand-100: #16294d;
    --brand-200: #1d3566;
    --brand-400: #5b8ef0;
    --brand:     #4d8bf5;
    --brand-600: #6ba0f8;
    --brand-700: #8fb8fa;
    --brand-900: #cfe0fd;

    --pop-50:  #2c1608;
    --pop-100: #3d1f0a;
    --pop:     #fb8034;
    --pop-600: #fd9550;

    --ink:     #e9eef7;
    --ink-2:   #b3bed1;
    --ink-3:   #8492a8;
    --ink-4:   #616f85;
    --line:    #26313f;
    --line-2:  #1e2733;
    --surface: #151c26;
    --raised:  #1b2331;
    --bg:      #0d131b;

    --ok:     #34d3a0;
    --ok-bg:  #0f2b23;
    --warn:   #e6a84e;
    --warn-bg:#2d2213;
    --bad:    #f08579;
    --bad-bg: #2f1a18;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.3);
    --sh-3: 0 10px 34px rgba(0,0,0,.5);

    --grad-head: linear-gradient(112deg, #0d1524 0%, #131f36 48%, #172742 100%);
    --glow-brand: 0 4px 16px rgba(77,139,245,.30);
    --glow-pop:   0 6px 20px rgba(251,128,52,.28);
    --ring-brand: 0 0 0 3px rgba(77,139,245,.26);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.021em; margin: 0; text-wrap: balance; }

:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 18px; }
.tabular { font-variant-numeric: tabular-nums; }

/* ── header ─────────────────────────────────────────────────────────────── */

/*
 * Two tiers: a dark bar carrying the brand, the search and the account, and a
 * light bar carrying navigation. The dark tier is what makes the marketplace
 * read as a marketplace rather than as one more shop.
 */
.site-header { position: sticky; top: 0; z-index: 60; }

/*
 * The dark tier carries a soft radial wash rather than a flat fill. At this
 * size a single flat navy reads as a placeholder; the wash gives the bar
 * depth without costing an image request.
 */
.header-top {
  background: var(--grad-head);
  color: #fff;
  position: relative;
}
.header-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 190px at 16% 130%, rgba(37,99,235,.36), transparent 70%),
    radial-gradient(520px 160px at 88% -30%, rgba(249,115,22,.16), transparent 68%);
  pointer-events: none;
}
.header-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 12px;
  transition: padding .22s var(--spring);
}

/*
 * Condensed state, set on <body> once the page has scrolled past the hero.
 * --header-h lives on :root and is what the sticky cart summary offsets
 * against, so it has to shrink here too or the summary floats.
 */
body.scrolled { --header-h: 104px; }
body.scrolled .header-row { padding-block: 6px; }
body.scrolled .site-header { box-shadow: 0 6px 24px rgba(11,18,32,.10); }

.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -.034em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, var(--pop) 190%);
  display: grid; place-items: center;
  color: #fff; font-size: .95rem; font-weight: 800;
  box-shadow: var(--sh-1);
  flex: none;
}
.logo em { font-style: normal; color: var(--brand); }
.header-top .logo { color: #fff; }
.header-top .logo em { color: #7eacff; }

.head-search { flex: 1; max-width: 660px; }
.head-search input {
  height: 44px;
  padding: 0 58px 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--ink);
  width: 100%;
  font: inherit;
  font-size: .9rem;
}
.head-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(96,146,255,.45); }
.head-search button {
  right: 5px;
  width: 42px; height: 34px;
  padding: 0;
  border-radius: 999px;
  display: grid; place-items: center;
}

.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.icon-btn {
  position: relative;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: rgba(255,255,255,.86);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.icon-btn:active { transform: scale(.96); }
.icon-btn .glyph { display: grid; place-items: center; line-height: 1; }
/* Slightly under the nav pills' 18px: this row is denser and sits on navy. */
.icon-btn .glyph .ico { width: 19px; height: 19px; opacity: .92; }
.icon-btn b { color: #fff; font-weight: 750; }
.cart-count {
  position: absolute;
  top: 1px; left: 25px;
  background: var(--pop);
  color: #fff;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  display: inline-grid;
  place-items: center;
  box-shadow: var(--sh-1);
}

.header-bar {
  position: relative;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-bar-row { display: flex; align-items: center; gap: 14px; padding-block: 9px; }

.all-cats {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--grad-brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px 10px 17px;
  font: inherit;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: var(--glow-brand);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.all-cats:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(37,99,235,.42); }
.all-cats:active { transform: scale(.97); }
.all-cats:focus-visible { outline: none; box-shadow: var(--glow-brand), 0 0 0 3px var(--surface), 0 0 0 5px var(--brand-400); }

/*
 * The three bars fold toward a single line as the panel opens, so the button
 * says whether the panel is down without needing a second glance at it.
 */
.bars {
  width: 15px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  transition: box-shadow var(--t-mid), transform var(--t-mid);
}
.all-cats[aria-expanded="true"] .bars {
  box-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
  transform: rotate(90deg);
}
.ac-chev {
  display: grid; place-items: center;
  margin-left: 1px;
  opacity: .85;
  transition: transform var(--t-mid);
}
.all-cats[aria-expanded="true"] .ac-chev { transform: rotate(180deg); }

/*
 * Navigation is pills rather than underlined text.
 *
 * Six destinations in a row of plain links read as one long sentence — the
 * eye had nothing to land on and "My orders" looked like part of "Cart". A
 * pill gives each one an edge, the icon gives it a shape to recognise before
 * the word is read, and the active one is the only filled thing in the row.
 */
.site-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
}
.site-nav::-webkit-scrollbar { display: none; }

.nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.nav-pill .np-ico {
  width: 18px; height: 18px;
  flex: none;
  opacity: .72;
  transition: opacity var(--t-fast), transform var(--t-mid);
}
.nav-pill:hover {
  background: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
}
.nav-pill:hover .np-ico { opacity: 1; transform: translateY(-1px); }
.nav-pill:active { transform: scale(.975); }
.nav-pill:focus-visible { outline: none; box-shadow: var(--ring-brand); }

.nav-pill.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--glow-brand);
}
.nav-pill.active .np-ico { opacity: 1; }

/*
 * The cart count is drawn from the attribute, never from a child node: the
 * single-shop test reads each link's text back to prove the marketplace
 * routes are gone, and a number in the markup would corrupt that.
 */
.nav-pill[data-count]::after {
  content: attr(data-count);
  background: var(--pop);
  color: #fff;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  min-width: 17px;
  padding: 3px 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(249,115,22,.4);
}
.nav-pill.active[data-count]::after { background: #fff; color: var(--pop-600); box-shadow: none; }

.location-btn {
  flex: none;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.location-btn:hover { background: var(--brand-100); border-color: var(--brand-200); box-shadow: var(--sh-1); }
.location-btn:active { transform: scale(.975); }
.location-btn .pin { display: grid; place-items: center; }
.location-btn .lb-ico { width: 15px; height: 15px; }
.location-btn .chev { color: var(--ink-4); font-size: .8em; }

@keyframes menuDrop { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

.cat-menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-3);
  z-index: 55;
  animation: menuDrop .22s var(--spring);
}
.cat-menu-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px;
  padding-block: 14px 20px;
}
.cat-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--ink);
  font-size: .875rem;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cat-menu a:hover {
  background: var(--brand-50);
  border-color: var(--brand-100);
  transform: translateX(3px);
  text-decoration: none;
}
.cat-menu a:hover .chev { color: var(--brand); transform: translateX(2px); }
.cat-menu .chev { transition: color var(--t-fast), transform var(--t-fast); }
.cat-menu a > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.cat-menu a strong { font-weight: 650; }
.cat-menu a span span { color: var(--ink-4); font-size: .78rem; }
.cat-menu .chev { margin-left: auto; color: var(--ink-4); }
.cat-menu .ci, .cat-rail .ci {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.05rem;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.05);
}
.cat-rail .ci { width: 32px; height: 32px; font-size: 1rem; }


/* Beats every display: rule in this sheet, so [hidden] always hides. */
[hidden] { display: none !important; }

/* ── search field ───────────────────────────────────────────────────────── */

.search-form { flex: 1; min-width: 150px; position: relative; display: flex; }
.search-form input {
  width: 100%;
  height: 44px;
  padding: 0 58px 0 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-form input::placeholder { color: var(--ink-4); }
.search-form input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand-200);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.search-form .search-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  pointer-events: none;
}
.search-form button {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 650;
  font-size: .85rem;
  transition: background .15s;
}
.search-form button:hover { background: var(--brand-600); }

/* ── main ───────────────────────────────────────────────────────────────── */

main { padding-block: 26px 80px; min-height: 64vh; }

/* ── hero: category rail + carousel ─────────────────────────────────────── */

.hero-row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  margin-block: 18px 22px;
}
.hero-col { min-width: 0; }

.cat-rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 8px;
  align-self: start;
  overflow: hidden;
}
.cr-head {
  font-weight: 750;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 12px 6px;
}
.cat-rail a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 550;
  transition: background var(--t-fast), transform var(--t-fast);
}
.cat-rail a:hover { background: var(--brand-50); transform: translateX(3px); text-decoration: none; }
.cat-rail a:hover .ci { transform: scale(1.06) rotate(-3deg); }
.cat-rail .ci { transition: transform var(--t-mid); }
.cat-rail .chev { margin-left: auto; color: var(--ink-4); transition: color var(--t-fast), transform var(--t-fast); }
.cat-rail a:hover .chev { color: var(--brand); transform: translateX(2px); }
/* Hairlines between rows, the way the rail reads in the design. */
.cat-rail a + a { box-shadow: 0 -1px 0 var(--line-2); }

/*
 * Expanded, the list scrolls rather than running the column past the rest of
 * the page — a region can carry two dozen categories once several shops are
 * live. The toggle sits outside the scroller so it never scrolls away.
 */
.cat-rail.open .cr-list {
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.cr-more {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 12px 12px;
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: .86rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}
.cr-more:hover { background: var(--raised); }
.ci-more {
  background: var(--brand-50);
  color: var(--brand);
  font-size: 1.05rem;
}
.cr-more-n {
  margin-left: auto;
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  min-width: 22px;
  padding: 2px 7px;
  text-align: center;
}
.cr-more.open .cr-more-n { display: none; }

/*
 * The carousel.
 *
 * One track translated by whole slides, so there is no layout thrash per
 * frame and a slide that fails to load a picture still occupies its place.
 */
.hero-carousel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--head);
  box-shadow: var(--sh-2);
  height: clamp(260px, 30vw, 380px);
}
.hc-track {
  display: flex;
  height: 100%;
  transition: transform .5s cubic-bezier(.4,.05,.2,1);
}
.hc-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  align-content: center;
  padding: clamp(24px, 4vw, 52px);
  background: linear-gradient(115deg, #0b1f3f 0%, #143a72 45%, #1d63c9 100%);
  color: #fff;
  overflow: hidden;
}
.hc-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* A photograph cannot be trusted to keep white text legible on its own. */
.hc-slide.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,17,37,.88) 0%, rgba(6,17,37,.66) 45%, rgba(6,17,37,.15) 100%);
}
.hc-copy { position: relative; z-index: 2; max-width: 560px; }
.hc-eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb8ff;
  margin-bottom: 10px;
}
.hc-copy h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.hc-copy p {
  margin: 0 0 18px;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  max-width: 44ch;
}
.hc-cta { border-radius: 999px; padding-inline: 22px; }
.hc-badge {
  position: absolute;
  top: 22px; right: 24px;
  z-index: 2;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  text-align: center;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
  transition: background .15s, transform .12s;
}
.hc-arrow:hover { background: #fff; }
.hc-arrow:active { transform: translateY(-50%) scale(.94); }
.hc-prev { left: 14px; }
.hc-next { right: 14px; }

.hc-dots {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.hc-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .2s, background .2s;
}
.hc-dot.on { width: 26px; background: #fff; }

/* ── trust bar ──────────────────────────────────────────────────────────── */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 14px 10px;
  margin-bottom: 26px;
}
.tb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 14px;
  border-right: 1px solid var(--line-2);
}
.tb-item:last-child { border-right: 0; }
.tb-item > span:last-child { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.tb-item strong { font-size: .875rem; font-weight: 700; }
.tb-item span span { font-size: .78rem; color: var(--ink-3); }
.tb-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-50);
  display: grid; place-items: center;
  font-size: 1.15rem;
  flex: none;
}

/* ── big category tiles ─────────────────────────────────────────────────── */

.cat-bigs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.cat-big {
  position: relative;
  border-radius: var(--r-lg);
  padding: 18px;
  min-height: 130px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
/*
 * A gloss sweep and a vignette over whatever colour the tile was given. Flat
 * blocks of saturated colour were the weakest thing on the home page; this
 * keeps the per-category hue but stops it reading as a placeholder.
 */
.cat-big::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 82% at 82% -12%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(180deg, transparent 38%, rgba(0,0,0,.24) 100%);
  transition: opacity var(--t-mid);
}
.cat-big > * { position: relative; z-index: 1; }
.cat-big:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  text-decoration: none;
}
.cat-big:hover::before { opacity: .7; }
.cat-big:hover .cb-icon { transform: scale(1.12) rotate(-6deg); opacity: .42; }
.cat-big:hover .cb-go .arr, .cat-big:hover .cb-go span { transform: translateX(4px); }
.cat-big strong { font-size: 1.04rem; font-weight: 750; letter-spacing: -.012em; text-shadow: 0 1px 8px rgba(0,0,0,.18); }
.cb-icon {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  font-size: 2.6rem;
  opacity: .3;
  line-height: 1;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.cb-go { font-size: .8rem; font-weight: 650; opacity: .94; display: inline-flex; gap: 6px; align-items: center; }
.cb-go span { transition: transform var(--t-mid); }


/* ── category tiles (categories pages) ──────────────────────────────────── */

.cat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}
.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
/*
 * A wash of the tile's own category colour, already visible at rest and
 * stronger on hover. --tile-tint is set per tile from the same palette the
 * icon chip uses, so a row of categories reads as a row of different things.
 */
.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--tile-tint, var(--brand-50)) 0%, transparent 72%);
  opacity: .55;
  transition: opacity var(--t-mid);
}
.cat-tile > * { position: relative; z-index: 1; }
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--brand-200);
  text-decoration: none;
}
.cat-tile:hover::before { opacity: 1; }
.cat-tile:hover { border-color: color-mix(in srgb, var(--tile-ink, var(--brand)) 34%, transparent); }
.cat-tile:hover .ct-go { opacity: 1; transform: none; }
.cat-tile:hover .ci { transform: scale(1.07) rotate(-4deg); }
.cat-tile .ci {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  margin-bottom: 7px;
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.05);
  transition: transform var(--t-mid);
}
.cat-tile strong { font-size: .895rem; font-weight: 700; letter-spacing: -.008em; }
.cat-tile > span:nth-of-type(2) { font-size: .78rem; color: var(--ink-4); }
/* Appears on hover in the tile's own colour, so the card reads as clickable. */
.cat-tile .ct-go {
  position: absolute;
  top: 18px; right: 16px;
  display: grid; place-items: center;
  color: var(--tile-ink, var(--brand));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-mid), transform var(--t-mid);
}

/* ── section headings ───────────────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.18rem, 2.4vw, 1.52rem); font-weight: 800; }
.section-head .sub { font-size: .885rem; color: var(--ink-3); margin: 3px 0 0; }
.section-head .count {
  font-size: .8rem;
  font-weight: 650;
  color: var(--ink-3);
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── grids ──────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
.grid-stores { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
.grid-products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }

/* ── store card ─────────────────────────────────────────────────────────── */

.store-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  box-shadow: var(--sh-1);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.store-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--brand-200);
  text-decoration: none;
}
.store-cover {
  height: 118px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(128deg, var(--brand-100), var(--brand-50) 60%, var(--pop-50));
}
/* Patterned fallback so a shop with no cover photo still looks finished. */
.store-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(37,99,235,.16) 1px, transparent 0);
  background-size: 15px 15px;
}
.store-cover img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.store-avatar {
  position: absolute;
  left: 18px; bottom: -26px;
  width: 58px; height: 58px;
  border-radius: 15px;
  background: var(--surface);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-2);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800; font-size: 1.22rem;
  color: var(--brand);
  overflow: hidden;
}
.store-avatar img { width: 100%; height: 100%; object-fit: cover; }
.store-body { padding: 36px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.store-body h3 { font-size: 1.04rem; font-weight: 750; }
.store-meta {
  font-size: .83rem;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.store-pill {
  font-size: .775rem;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.store-cta { font-size: .855rem; font-weight: 700; color: var(--brand); display: inline-flex; gap: 5px; align-items: center; }
.store-card:hover .store-cta .arr { transform: translateX(3px); }
.store-cta .arr { transition: transform .18s; }

/* ── product card ───────────────────────────────────────────────────────── */

.p-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--sh-1);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
.p-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-200); }
.p-thumb {
  aspect-ratio: 1;
  background: var(--raised);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
}
.p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.p-card:hover .p-thumb img { transform: scale(1.055); }

/* Most POS products have no photo, so the no-image state is the common case.
   A tinted monogram reads as a deliberate design, where a faded icon reads as
   a broken image. */
.p-thumb .ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--brand);
  opacity: .34;
  background:
    radial-gradient(circle at 30% 24%, var(--brand-50), transparent 58%),
    linear-gradient(140deg, var(--raised), var(--brand-50) 130%);
  letter-spacing: -.03em;
  user-select: none;
}
.p-flag {
  position: absolute;
  top: 9px; left: 9px;
  z-index: 2;
}
.p-body { padding: 13px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.p-cat { font-size: .715rem; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; }
.p-name {
  font-size: .895rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.45em;
}
.p-desc {
  margin: -2px 0 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-price {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: auto;
}
.p-store { font-size: .78rem; color: var(--ink-3); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 19px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-family: var(--body);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  text-align: center;
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s, color .16s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.982); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-pop { background: var(--grad-pop); color: #fff; box-shadow: var(--glow-pop); }
.btn-pop:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 8px 26px rgba(249,115,22,.42); }

/*
 * A single slow sweep across the one button that commits the order. It runs
 * on a loop rather than on hover because on a phone there is no hover, and
 * this button is the end of the whole flow.
 */
@keyframes btnShine { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(240%) skewX(-18deg); } }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  animation: btnShine 3.6s var(--spring) infinite;
  pointer-events: none;
}
.btn-shine:disabled::after { animation: none; opacity: 0; }
/*
 * Pre-order: the brand ramp, never the action orange.
 *
 * Buying something the shop HAS and asking it to source something it has not
 * are different promises, so they must not be the same button. Orange stays
 * for "add to cart"; a pre-order wears the shop own colour.
 *
 * --on-brand rather than a hardcoded white: several dark ramps are light
 * enough that white on them cannot be read, and on a themed shop page this
 * button sits inside that shop scope.
 */
.btn-preorder {
  background: var(--grad-brand);
  color: var(--on-brand, #fff);
  box-shadow: var(--glow-brand);
}
.btn-preorder:hover:not(:disabled) { filter: brightness(1.06); }

.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover:not(:disabled) { background: var(--brand-600); }
.btn-soft { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.btn-soft:hover:not(:disabled) { background: var(--brand-100); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); border-color: var(--ink-4); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 13px; font-size: .835rem; border-radius: 9px; }
.btn-lg { padding: 15px 26px; font-size: 1rem; border-radius: var(--r); }

.btn-wa {
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37,211,102,.32);
  font-size: 1.02rem;
  padding: 16px 24px;
}
.btn-wa:hover { background: #1fbb59; }

/* ── badges ─────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .715rem;
  font-weight: 750;
  padding: 4px 9px;
  border-radius: 7px;
  letter-spacing: .012em;
  white-space: nowrap;
}
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-best { background: var(--ok); color: #fff; box-shadow: 0 2px 8px rgba(4,120,87,.28); }
.badge-brand { background: var(--brand-50); color: var(--brand-700); }
/* The badge that labels a pre-order, matching its button rather than the
 * amber that means "careful" everywhere else. */
.badge-pre { background: var(--brand-50); color: var(--brand-700); }

/* ── notices ────────────────────────────────────────────────────────────── */

.notice {
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: .89rem;
  margin-bottom: 12px;
  border: 1px solid transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.notice .ni { flex: none; font-size: 1rem; line-height: 1.3; display: inline-grid; place-items: center; }
.notice .ni-svg { width: 17px; height: 17px; }
.notice-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 24%, transparent); }
.notice-bad  { background: var(--bad-bg);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 24%, transparent); }
.notice-ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 24%, transparent); }
.notice-info { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* ── panels ─────────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--sh-1);
}
.panel h3 { font-size: 1.04rem; font-weight: 750; margin-bottom: 14px; }

/* ── empty & skeleton ───────────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: 64px 22px;
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
}
.empty .emoji { font-size: 2.6rem; margin-bottom: 10px; opacity: .8; }
.empty h3 { font-size: 1.14rem; font-weight: 750; margin-bottom: 7px; }
.empty p { margin: 0 auto 20px; color: var(--ink-3); max-width: 42ch; }
.empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@keyframes shimmer { 100% { background-position-x: -200%; } }
.sk {
  background: linear-gradient(90deg, var(--line-2) 8%, var(--line) 20%, var(--line-2) 34%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 8px;
}
.sk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sk-thumb { aspect-ratio: 1; }
.sk-lines { padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.sk-line { height: 11px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }

@media (prefers-reduced-motion: reduce) {
  .sk { animation-duration: 6s; }
  * { transition-duration: .01ms !important; }
}

/* ── modal ──────────────────────────────────────────────────────────────── */

@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,18,32,.62);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 120;
  animation: fadeIn .18s ease-out;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  width: 100%;
  max-width: 452px;
  max-height: min(92vh, 780px);
  overflow-y: auto;
  padding: 30px;
  animation: popIn .22s cubic-bezier(.2,.8,.3,1);
}
.modal h2 { font-size: 1.36rem; font-weight: 800; margin-bottom: 7px; }
.modal .sub { color: var(--ink-2); font-size: .91rem; margin: 0 0 22px; }

/* ── forms ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 15px; }
.field label { display: block; font-size: .825rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field label .opt { font-weight: 500; color: var(--ink-4); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .93rem;
  background: var(--raised);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.field textarea { resize: vertical; min-height: 82px; }
.field .hint { font-size: .785rem; color: var(--ink-3); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.seg {
  display: flex;
  gap: 4px;
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.seg button {
  flex: 1;
  border: none;
  background: none;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .16s, color .16s;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* ── chips ──────────────────────────────────────────────────────────────── */

/*
 * The row sticks under the header while the products scroll past it.
 *
 * Filtering is the thing a shopper does repeatedly on a shop page, and the
 * row used to scroll away after the first screen, so narrowing to a second
 * category meant scrolling back to the top for it.
 */
.chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 14px;
  scrollbar-width: none;
  position: sticky;
  top: var(--header-h);
  z-index: 8;
  background: var(--bg);
  /*
   * The scrollbar is hidden, so without this there is nothing saying the row
   * continues past the right edge. The mask is removed by .at-start/.at-end,
   * which app.js sets from the scroll position — a permanent fade would make
   * a three-chip row look like it was cut off.
   */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.chips.at-start {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.chips.at-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px);
}
.chips.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
.chips::-webkit-scrollbar { display: none; }

/*
 * A chip wears its own category colour at rest and the brand when selected.
 *
 * The tint and icon are the same ones categoryLook() gives the tiles on
 * /categories, so "Drinks" is recognisably the same thing on both screens —
 * it used to be a coloured tile there and an identical grey pill here. What
 * is SELECTED still paints with the brand ramp like every other active
 * surface, so the shopper learns one rule for "on" rather than eight.
 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--chip-tint, var(--surface));
  font-size: .86rem;
  font-weight: 650;
  color: var(--chip-ink, var(--ink-2));
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip .chip-ico { font-size: .95em; line-height: 1; }
/* The count is data, not label: quieter, and it must not shift the baseline. */
.chip .chip-n {
  font-size: .74rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(11,18,32,.09);
  font-variant-numeric: tabular-nums;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.chip.on {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-brand);
}
.chip.on .chip-n { background: rgba(255,255,255,.22); color: #fff; }
/* "All products" has no category of its own, so it stays neutral until picked. */
.chip.chip-all { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.chip.chip-all.on { background: var(--grad-brand); border-color: transparent; color: #fff; }

/* ── store hero ─────────────────────────────────────────────────────────── */

/* ── shop page ──────────────────────────────────────────────────────────── */

/*
 * The banner is the shop's own artwork and carries the brand, so it stands on
 * its own above the identity card rather than being cropped inside it.
 */
.shop-banner {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--sh-1);
  background: linear-gradient(128deg, var(--brand-100), var(--brand-50) 55%, var(--pop-50));
}
.shop-banner img {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  display: block;
}
.shop-banner.is-empty { height: clamp(140px, 24vw, 250px); position: relative; }
.shop-banner.is-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(37,99,235,.16) 1px, transparent 0);
  background-size: 18px 18px;
}

.shop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  padding: 0 22px;
  margin-bottom: 22px;
}
.shop-id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 0 14px; }
.shop-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  margin-top: -46px;
  border: 4px solid var(--surface);
  background: var(--surface);
  box-shadow: var(--sh-2);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 800; font-size: 1.7rem; color: var(--brand);
  overflow: hidden;
  flex: none;
}
.shop-avatar img { width: 100%; height: 100%; object-fit: cover; }
.shop-text { flex: 1; min-width: 220px; }
.shop-text h1 { font-size: clamp(1.32rem, 3.2vw, 1.85rem); font-weight: 800; margin-bottom: 6px; }
.shop-text p { margin: 0 0 8px; color: var(--ink-2); font-size: .93rem; }
.shop-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .84rem; color: var(--ink-3); }
.shop-facts span { display: inline-flex; align-items: center; gap: 6px; }
.shop-actions { margin-left: auto; display: flex; gap: 10px; }

.shop-tabs { display: flex; gap: 26px; border-top: 1px solid var(--line); overflow-x: auto; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 13px 2px;
  font: inherit;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
}
.shop-tab:hover { color: var(--brand); }
.shop-tab.on { color: var(--brand); border-bottom-color: var(--brand); }

.shop-search { max-width: 440px; margin-bottom: 16px; }
.shop-search button {
  right: 6px;
  padding: 0;
  width: 44px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
}

.panel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 22px;
}
.panel-muted { margin: 0; color: var(--ink-3); font-size: .92rem; }
.facts-list { display: grid; gap: 10px; margin: 14px 0 0; }
.facts-list > div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.facts-list dt { min-width: 140px; color: var(--ink-3); font-size: .86rem; }
.facts-list dd { margin: 0; font-weight: 600; }
.panel-card > .facts-list + .panel-muted { margin-top: 18px; }

@media (max-width: 560px) {
  .shop-actions { margin-left: 0; width: 100%; }
  .facts-list dt { min-width: 110px; }
}


/* ── offer groups (price comparison) ────────────────────────────────────── */

.offer-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.offer-head { display: flex; gap: 15px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.offer-head .thumb {
  width: 62px; height: 62px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--raised);
  display: grid; place-items: center;
  color: var(--ink-4); font-size: 1.5rem;
  flex: none;
  overflow: hidden;
}
.offer-head h3 { font-size: 1.04rem; font-weight: 750; margin-bottom: 3px; }
.offer-head .meta { font-size: .82rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.offer-spread {
  margin-left: auto;
  text-align: right;
  flex: none;
}
.offer-spread .lbl { font-size: .72rem; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; }
.offer-spread .val { font-family: var(--display); font-size: 1.12rem; font-weight: 800; color: var(--ok); }

.offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
  transition: background .15s;
}
.offer-row:last-child { border-bottom: none; }
.offer-row:hover { background: var(--raised); }
.offer-row.best { background: linear-gradient(90deg, var(--ok-bg), transparent 72%); }
.offer-row.best:hover { background: linear-gradient(90deg, var(--ok-bg), transparent 60%); }
.offer-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.offer-store { font-weight: 700; font-size: .93rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer-link { font-size: .8rem; color: var(--ink-3); }
.offer-link:hover { color: var(--brand); }
.offer-right { display: flex; align-items: center; gap: 14px; }
.offer-price { font-family: var(--display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.02em; }

/* ── cart ───────────────────────────────────────────────────────────────── */

.cart-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
/* Holds the totals panel and, at checkout, the reassurance list under it. */
.cart-summary { position: sticky; top: calc(var(--header-h) + 14px); display: grid; gap: 14px; align-content: start; }
.cart-summary > .panel { margin-bottom: 0; }

.cart-store-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px;
}
.cart-store-head h3 { margin: 0; font-size: .99rem; font-weight: 750; display: flex; align-items: center; gap: 9px; }
.cart-store-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

.cart-line {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.cart-line:last-of-type { border-bottom: none; }
.cart-line .ct {
  width: 66px; height: 66px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--raised);
  display: grid; place-items: center;
  color: var(--ink-4); font-size: 1.4rem;
  overflow: hidden;
}
.cart-line-name { font-weight: 650; font-size: .93rem; line-height: 1.35; }
.cart-line-sub { font-size: .825rem; color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-line-right { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.qty button {
  width: 32px; height: 32px;
  background: none; border: none;
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 700; font-size: 1rem;
  display: grid; place-items: center;
  transition: background .14s, color .14s;
}
.qty button:hover { background: var(--brand-50); color: var(--brand); }
.qty span { min-width: 34px; text-align: center; font-weight: 700; font-size: .89rem; font-variant-numeric: tabular-nums; }

.totals-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ink-2); padding-block: 5px; }
.totals-row.grand {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--ink);
  padding-top: 13px;
  margin-top: 8px;
  border-top: 1.5px solid var(--line);
  letter-spacing: -.02em;
}
.totals-row.sub { font-weight: 700; color: var(--ink); }

/* ── order flow: heading, progress, summary, reassurance ─────────────────── */

/*
 * Cart, checkout and confirmation share one heading block so the three pages
 * read as three steps of one thing rather than three unrelated screens.
 */
.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  flex-wrap: wrap;
  margin: 22px 0 20px;
}
.flow-head h2 { font-size: clamp(1.32rem, 2.8vw, 1.72rem); font-weight: 800; letter-spacing: -.022em; }
.flow-head .sub { font-size: .89rem; color: var(--ink-3); margin: 4px 0 0; }
.flow-head.centered { justify-content: center; }

.steps {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-1);
}
.steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink-4);
  white-space: nowrap;
}
/* The hairline between steps, drawn on the element rather than as a divider. */
.steps li + li { box-shadow: inset 1px 0 0 var(--line-2); }
.st-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--raised);
  color: var(--ink-4);
  font-size: .72rem;
  font-weight: 800;
  border: 1px solid var(--line);
}
.steps li.done { color: var(--ok); }
.steps li.done .st-dot { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.steps li.now { color: var(--brand-700); }
.steps li.now .st-dot {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--glow-brand);
}

@media (max-width: 620px) {
  .steps { width: 100%; justify-content: space-between; }
  .steps li { padding: 4px 8px; font-size: .76rem; gap: 6px; }
}
@media (max-width: 400px) {
  .st-label { display: none; }
  .steps li { padding: 4px 10px; }
}

/* ── panels in the order flow ───────────────────────────────────────────── */

.panel-lift { box-shadow: var(--sh-2); border-radius: var(--r-xl); padding: 24px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.panel-head h3 { margin: 0; font-size: 1.06rem; font-weight: 780; letter-spacing: -.012em; }
.panel-head p { margin: 2px 0 0; font-size: .84rem; color: var(--ink-3); }
.ph-ic {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-100);
}

.co-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 13px 0 0;
  color: var(--ink-3);
  font-size: .8rem;
  text-align: center;
}
.cf-ico { width: 15px; height: 15px; flex: none; }

/* ── order summary ──────────────────────────────────────────────────────── */

.summary-panel { border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-head h3 { margin: 0; }
.sp-count {
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}

.sp-shop { padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px dashed var(--line); }
.sp-shop:last-of-type { border-bottom: 0; margin-bottom: 4px; }
.sp-shop-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 720;
  font-size: .9rem;
  margin-bottom: 9px;
}
.sp-av {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
}
.sp-line span:first-child { display: flex; gap: 9px; align-items: baseline; min-width: 0; }
/* The quantity reads as a count, not as part of the product's name. */
.sp-q {
  flex: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-2);
  font-size: .72rem;
  font-weight: 800;
  min-width: 21px;
  padding: 1px 5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sp-note {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
}

/* ── the three objections, answered beside the total ────────────────────── */

.assure {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  display: grid;
  gap: 13px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.assure li { display: flex; gap: 11px; align-items: flex-start; font-size: .82rem; color: var(--ink-3); line-height: 1.45; }
.assure strong { display: block; color: var(--ink); font-size: .855rem; font-weight: 700; margin-bottom: 1px; }
.as-tick {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ok-bg);
  color: var(--ok);
}

/* ── order confirmation ─────────────────────────────────────────────────── */

.ok-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 42px 26px;
  text-align: center;
  box-shadow: var(--sh-2);
}
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(4,120,87,.34); } 70% { box-shadow: 0 0 0 20px rgba(4,120,87,0); } 100% { box-shadow: 0 0 0 0 rgba(4,120,87,0); } }
.ok-mark {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  animation: pulseRing 2s ease-out 2;
}
.ok-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.ok-card .lead { color: var(--ink-2); margin: 0 0 20px; }
.ref-plate {
  display: inline-block;
  background: var(--brand-50);
  border: 1.5px dashed var(--brand-200);
  color: var(--brand-700);
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .01em;
  padding: 13px 28px;
  border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}

/* ── toast ──────────────────────────────────────────────────────────────── */

@keyframes toastUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 13px 20px;
  border-radius: 999px;
  font-size: .89rem;
  font-weight: 650;
  z-index: 200;
  box-shadow: var(--sh-3);
  max-width: calc(100vw - 36px);
  display: flex; align-items: center; gap: 9px;
  animation: toastUp .24s cubic-bezier(.2,.8,.3,1);
}

/* ── spinner ────────────────────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 56px auto;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: 44px 26px;
  background: var(--head);
  color: rgba(255,255,255,.66);
  font-size: .86rem;
}
.site-footer .logo { color: #fff; }
.site-footer .logo em { color: #7eacff; }
.site-footer h4 { color: #fff; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.site-footer .tagline { color: rgba(255,255,255,.7); }
.site-footer .footer-bottom { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.5); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: 30px 24px;
  align-items: start;
}
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { margin: 0 0 4px; font-size: .855rem; line-height: 1.55; }
.footer-brand .tagline { color: var(--ink-2); font-weight: 600; }
.footer-brand .sub { color: var(--brand); font-weight: 650; }
.footer-social { display: flex; gap: 9px; margin-top: 16px; }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: .95rem;
  color: var(--ink-2);
}
.footer-social a:hover { background: var(--brand-50); border-color: var(--brand-100); text-decoration: none; }

.footer-col h4 {
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 11px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footer-col a, .footer-col button {
  font-size: .835rem;
  color: var(--ink-3);
  background: none; border: none; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.footer-col a:hover, .footer-col button:hover { color: var(--brand); text-decoration: none; }

.footer-bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .8rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .cart-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

@media (max-width: 760px) {
  :root { --header-h: 150px; }
  body { font-size: 14.5px; }
  .header-row { flex-wrap: wrap; gap: 10px; }
  .search-form { order: 3; flex-basis: 100%; }
  .field-row { grid-template-columns: 1fr; }
  .grid-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .grid-stores { grid-template-columns: 1fr; }
  .hero { border-radius: var(--r-lg); }
  .modal { padding: 24px; border-radius: var(--r-lg); }
  .offer-head { flex-wrap: wrap; }
  .offer-spread { margin-left: 0; text-align: left; width: 100%; }
  .cart-line { grid-template-columns: 56px minmax(0,1fr); }
  .cart-line .ct { width: 56px; height: 56px; }
  .cart-line-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .shop-avatar { width: 66px; height: 66px; margin-top: -44px; font-size: 1.35rem; }
}


/* ── promo band (the one banner below the listings) ─────────────────────── */

.promo-band {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(115deg, #06331f 0%, #0b5236 55%, #0d9f63 160%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 34px);
  margin: 34px 0 10px;
  box-shadow: var(--sh-2);
}
.pb-copy { flex: 1; min-width: 260px; }
.pb-eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7fe3b4;
  margin-bottom: 8px;
}
.promo-band h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.promo-band p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  max-width: 62ch;
}

/* ── the shop chip on a product card ────────────────────────────────────── */

.p-store {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink-2) !important;
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-store:hover { border-color: var(--brand-200); color: var(--brand) !important; text-decoration: none; }

/* ── phone tab bar ──────────────────────────────────────────────────────── */

.tabbar { display: none; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .cat-rail { display: none; }
}

@media (max-width: 900px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); gap: 10px 4px; }
  .tb-item:nth-child(2) { border-right: 0; }
}

@media (max-width: 760px) {
  .header-row { flex-wrap: wrap; gap: 10px; }
  .head-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-actions { margin-left: auto; }
  /* Labels go; the glyphs and the cart count stay. */
  .header-actions .icon-btn span:not(.glyph):not(.cart-count) { display: none; }
  .header-actions .icon-btn { padding: 8px 10px; }

  .hc-badge { width: 64px; height: 64px; font-size: .66rem; top: 14px; right: 14px; }
  .hc-arrow { width: 32px; height: 32px; font-size: 1.15rem; }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 8px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-3);
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.on { color: var(--brand); }
  /* A short bar above the active tab, the way a native tab bar marks one. */
  .tabbar a.on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad-brand);
    transform: translateX(-50%);
  }
  .tb-icon { display: grid; place-items: center; line-height: 1; }
  .tb-svg { width: 21px; height: 21px; transition: transform var(--t-mid); }
  .tabbar a.on .tb-svg { transform: translateY(-1px) scale(1.06); }
  .tb-count {
    position: absolute;
    top: 4px;
    left: calc(50% + 4px);
    background: var(--pop);
    color: #fff;
    border-radius: 999px;
    font-size: .6rem;
    font-weight: 800;
    min-width: 15px; height: 15px;
    padding-inline: 4px;
    display: grid; place-items: center;
  }
  /* The bar floats over the page; give the page somewhere to end. */
  body { padding-bottom: 62px; }

  /*
   * The top nav would be squeezed to nothing between the categories button and
   * the location pill. The tab bar carries the same destinations at thumb
   * height, so the row keeps only what the tab bar does not.
   */
  .site-nav { display: none; }
  .header-bar-row { gap: 10px; }
  .location-btn { margin-left: auto; }

  /* Arrows would sit on top of the headline at this width; swipe and dots remain. */
  .hc-arrow { display: none; }
  .hero-carousel { height: clamp(300px, 62vw, 360px); }
  .hc-dots { bottom: 10px; }
}

@media (max-width: 560px) {
  .nav-pill { padding: 8px 12px; font-size: .83rem; gap: 6px; }
  .nav-pill .np-ico { width: 16px; height: 16px; }
  .all-cats { padding: 9px 13px; font-size: .82rem; }
  .location-btn { padding: 7px 11px; font-size: .78rem; }
  .promo-band { text-align: left; }
}

/*
 * Dark mode: the per-category tints.
 *
 * categoryLook() returns fixed light hexes (#e7f8f1 and friends) because they
 * are also the icon chip's background, where light-on-dark is the point. Laid
 * across a whole card at 55% they would turn a dark tile pale and put light
 * text on a pale ground. The wash is kept, just far enough back to read as a
 * hint of colour rather than as the surface.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-tile::before { opacity: .08; }
  :root:not([data-theme="light"]) .cat-tile:hover::before { opacity: .16; }
  :root:not([data-theme="light"]) .cat-menu .ci,
  :root:not([data-theme="light"]) .cat-rail .ci,
  :root:not([data-theme="light"]) .cat-tile .ci { box-shadow: none; }
}

/* Dark footer: these override the light-theme column rules further up. */
.site-footer .footer-col h4 { color: #fff; }
.site-footer .footer-col a { color: rgba(255,255,255,.7); }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-col li { color: rgba(255,255,255,.7); }
.site-footer .footer-brand .tagline { color: rgba(255,255,255,.72); }

/* ── per-shop themes ─────────────────────────────────────────────────────────

   A shop picks a NAME from a fixed list (services/themes.ts) and never a
   colour. The values live here, written once, contrast-checked by hand and
   given a dark variant — so nothing a shop types can ever reach a stylesheet.

   Each preset only re-points the brand ramp. Everything downstream — the
   gradients, the glow, the focus ring, the selected chip, the tab underline —
   is already derived from these tokens, so a preset is eight declarations
   rather than a parallel stylesheet.

   The attribute sits on the shop page's wrapper, not on :root, so on
   shop.mergepos.com the marketplace chrome stays MERGE's own blue and only the
   shop's own page is themed. On a shop's custom domain the whole document is
   that shop's, so app.js puts the attribute on <html> as well.

   --on-brand is the readable foreground for a brand-FILLED surface. It is a
   token rather than a hardcoded #fff because several dark ramps are light
   enough that white on them is unreadable.
   ────────────────────────────────────────────────────────────────────────── */

[data-shop-theme] { --on-brand: #fff; }

[data-shop-theme="emerald"] {
  --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-200: #a7f3d0; --brand-400: #34d399;
  --brand: #047857; --brand-600: #065f46; --brand-700: #064e3b; --brand-900: #022c22;
  --grad-brand: linear-gradient(135deg, #047857 0%, #065f46 100%);
  --glow-brand: 0 4px 14px rgba(4,120,87,.34);
  --ring-brand: 0 0 0 3px rgba(4,120,87,.20);
}
[data-shop-theme="sunset"] {
  --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fed7aa; --brand-400: #fb923c;
  --brand: #c2410c; --brand-600: #9a3412; --brand-700: #7c2d12; --brand-900: #601f0b;
  --grad-brand: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
  --glow-brand: 0 4px 14px rgba(194,65,12,.34);
  --ring-brand: 0 0 0 3px rgba(194,65,12,.20);
}
[data-shop-theme="plum"] {
  --brand-50: #f5f3ff; --brand-100: #ede9fe; --brand-200: #ddd6fe; --brand-400: #a78bfa;
  --brand: #7c3aed; --brand-600: #6d28d9; --brand-700: #5b21b6; --brand-900: #4c1d95;
  --grad-brand: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --glow-brand: 0 4px 14px rgba(124,58,237,.34);
  --ring-brand: 0 0 0 3px rgba(124,58,237,.20);
}
[data-shop-theme="ocean"] {
  --brand-50: #ecfeff; --brand-100: #cffafe; --brand-200: #a5f3fc; --brand-400: #22d3ee;
  --brand: #0e7490; --brand-600: #155e75; --brand-700: #164e63; --brand-900: #083344;
  --grad-brand: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
  --glow-brand: 0 4px 14px rgba(14,116,144,.34);
  --ring-brand: 0 0 0 3px rgba(14,116,144,.20);
}
[data-shop-theme="rose"] {
  --brand-50: #fff1f2; --brand-100: #ffe4e6; --brand-200: #fecdd3; --brand-400: #fb7185;
  --brand: #e11d48; --brand-600: #be123c; --brand-700: #9f1239; --brand-900: #881337;
  --grad-brand: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  --glow-brand: 0 4px 14px rgba(225,29,72,.34);
  --ring-brand: 0 0 0 3px rgba(225,29,72,.20);
}
[data-shop-theme="slate"] {
  --brand-50: #f8fafc; --brand-100: #f1f5f9; --brand-200: #e2e8f0; --brand-400: #94a3b8;
  --brand: #475569; --brand-600: #334155; --brand-700: #1e293b; --brand-900: #0f172a;
  --grad-brand: linear-gradient(135deg, #475569 0%, #334155 100%);
  --glow-brand: 0 4px 14px rgba(71,85,105,.34);
  --ring-brand: 0 0 0 3px rgba(71,85,105,.22);
}
[data-shop-theme="cocoa"] {
  --brand-50: #fffbeb; --brand-100: #fef3c7; --brand-200: #fde68a; --brand-400: #d97706;
  --brand: #a16207; --brand-600: #854d0e; --brand-700: #713f12; --brand-900: #422006;
  --grad-brand: linear-gradient(135deg, #a16207 0%, #854d0e 100%);
  --glow-brand: 0 4px 14px rgba(161,98,7,.34);
  --ring-brand: 0 0 0 3px rgba(161,98,7,.22);
}

/*
 * Dark variants.
 *
 * A preset MUST define one. The attribute sits on an element, so its light
 * values would otherwise beat the dark ramp :root declares and a themed shop
 * would render dark-on-dark. Each dark brand is light enough to read as text
 * on the dark surface, which is exactly why --on-brand flips to dark ink for
 * anything painted WITH it.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-shop-theme] { --on-brand: #0b1220; }

  :root:not([data-theme="light"]) [data-shop-theme="emerald"] {
    --brand-50: #0b2a20; --brand-100: #0e3a2c; --brand-200: #124b3a; --brand-400: #059669;
    --brand: #10b981; --brand-600: #34d399; --brand-700: #6ee7b7; --brand-900: #a7f3d0;
    --grad-brand: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --glow-brand: 0 4px 16px rgba(16,185,129,.30);
    --ring-brand: 0 0 0 3px rgba(16,185,129,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="sunset"] {
    --brand-50: #2a1308; --brand-100: #371a0b; --brand-200: #4a2410; --brand-400: #ea580c;
    --brand: #f97316; --brand-600: #fb923c; --brand-700: #fdba74; --brand-900: #fed7aa;
    --grad-brand: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --glow-brand: 0 4px 16px rgba(249,115,22,.30);
    --ring-brand: 0 0 0 3px rgba(249,115,22,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="plum"] {
    --brand-50: #1c1836; --brand-100: #262046; --brand-200: #332a5e; --brand-400: #8b5cf6;
    --brand: #a78bfa; --brand-600: #c4b5fd; --brand-700: #ddd6fe; --brand-900: #ede9fe;
    --grad-brand: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
    --glow-brand: 0 4px 16px rgba(167,139,250,.30);
    --ring-brand: 0 0 0 3px rgba(167,139,250,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="ocean"] {
    --brand-50: #0a252d; --brand-100: #0e313b; --brand-200: #123f4c; --brand-400: #0e9fbd;
    --brand: #22b8d4; --brand-600: #46cfe6; --brand-700: #7fe0f0; --brand-900: #b8f0f8;
    --grad-brand: linear-gradient(135deg, #22b8d4 0%, #46cfe6 100%);
    --glow-brand: 0 4px 16px rgba(34,184,212,.30);
    --ring-brand: 0 0 0 3px rgba(34,184,212,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="rose"] {
    --brand-50: #2b1118; --brand-100: #3a1720; --brand-200: #4d1f2a; --brand-400: #f43f5e;
    --brand: #fb7185; --brand-600: #fda4af; --brand-700: #fecdd3; --brand-900: #ffe4e6;
    --grad-brand: linear-gradient(135deg, #fb7185 0%, #fda4af 100%);
    --glow-brand: 0 4px 16px rgba(251,113,133,.30);
    --ring-brand: 0 0 0 3px rgba(251,113,133,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="slate"] {
    --brand-50: #1e2530; --brand-100: #28313d; --brand-200: #333e4d; --brand-400: #7c8ba1;
    --brand: #94a3b8; --brand-600: #b0bccd; --brand-700: #cbd5e1; --brand-900: #e2e8f0;
    --grad-brand: linear-gradient(135deg, #94a3b8 0%, #b0bccd 100%);
    --glow-brand: 0 4px 16px rgba(148,163,184,.28);
    --ring-brand: 0 0 0 3px rgba(148,163,184,.26);
  }
  :root:not([data-theme="light"]) [data-shop-theme="cocoa"] {
    --brand-50: #2a1f0b; --brand-100: #382a0f; --brand-200: #4a3714; --brand-400: #bd8118;
    --brand: #d99b2b; --brand-600: #e8b352; --brand-700: #f2c97e; --brand-900: #fae0b0;
    --grad-brand: linear-gradient(135deg, #d99b2b 0%, #e8b352 100%);
    --glow-brand: 0 4px 16px rgba(217,155,43,.30);
    --ring-brand: 0 0 0 3px rgba(217,155,43,.26);
  }

  /*
   * Chips in dark mode.
   *
   * categoryLook() hands back the same fixed LIGHT hexes the tiles use, and a
   * row of pastel pills on a dark page is the tile problem again one size
   * down. The wash is dropped and the emoji is left to carry the category's
   * identity; the brand still marks what is selected.
   */
  :root:not([data-theme="light"]) .chip {
    background: var(--raised);
    border-color: var(--line);
    color: var(--ink-2);
  }
  :root:not([data-theme="light"]) .chip .chip-n { background: rgba(255,255,255,.10); }
  :root:not([data-theme="light"]) .chip.on { background: var(--grad-brand); border-color: transparent; }
  :root:not([data-theme="light"]) .chip.on .chip-n { background: rgba(0,0,0,.16); }
}

/* The selected chip's foreground follows the theme, not a hardcoded white. */
.chip.on, .chip.chip-all.on { color: var(--on-brand, #fff); }
.chip.on .chip-n { color: var(--on-brand, #fff); }

/* ── the shop's promo strip ──────────────────────────────────────────────────

   One line above the products, and deliberately only one.

   The shop page already opens with a cover image, an identity card, a tab row
   and a search box. A second hero would push the products themselves below the
   fold on a phone, so this is sized for something a shopper needs to KNOW —
   free delivery today, closing early — rather than for decoration.
   ────────────────────────────────────────────────────────────────────────── */

.shop-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--promo-bg, var(--grad-brand));
  color: var(--promo-ink, var(--on-brand, #fff));
  box-shadow: var(--sh-1);
}
.shop-promo .sp-badge {
  flex: none;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.shop-promo .sp-text { flex: 1; min-width: 180px; font-size: .9rem; font-weight: 600; }
.shop-promo .sp-cta {
  flex: none;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: inherit;
  border: 1px solid rgba(255,255,255,.28);
  transition: background var(--t-fast);
}
.shop-promo .sp-cta:hover { background: rgba(255,255,255,.28); text-decoration: none; }

/*
 * Tones. "brand" follows whatever theme the shop chose; the other three are
 * fixed so a shop can still say "closed Monday" in a colour that does not
 * read as an offer.
 */
.shop-promo[data-tone="pop"] { --promo-bg: var(--grad-pop); --promo-ink: #fff; }
.shop-promo[data-tone="ok"]  { --promo-bg: linear-gradient(135deg, #047857 0%, #065f46 100%); --promo-ink: #fff; }
.shop-promo[data-tone="ink"] { --promo-bg: var(--grad-head); --promo-ink: #fff; }

/*
 * A themed "brand" strip in dark mode is painted with that theme's light ramp,
 * so its text and its two inner surfaces have to flip with it.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shop-promo[data-tone="brand"] .sp-badge { background: rgba(0,0,0,.18); }
  :root:not([data-theme="light"]) .shop-promo[data-tone="brand"] .sp-cta {
    background: rgba(0,0,0,.14);
    border-color: rgba(0,0,0,.22);
  }
  :root:not([data-theme="light"]) .shop-promo[data-tone="brand"] .sp-cta:hover { background: rgba(0,0,0,.24); }
}

@media (max-width: 640px) {
  .shop-promo { padding: 11px 13px; gap: 9px; }
  .shop-promo .sp-text { font-size: .85rem; }
}

/* ── phone number with its dialling code ─────────────────────────────────────

   The code is shown, not typed. Picking a country fills it in, so a shopper
   enters the nine digits they know by heart and the server puts the country
   code in front — which is what the WhatsApp handoff needs and what shoppers
   were most often getting wrong.

   It is a <span> rather than a disabled input on purpose: it is not a field,
   nothing is submitted from it, and it must not be in the tab order between
   the country and the number.
   ────────────────────────────────────────────────────────────────────────── */

.phone-input {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--raised);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.phone-input .pi-code {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-size: .93rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--line-2);
  border-right: 1.5px solid var(--line);
  min-width: 58px;
}
/* The box already carries the border and the focus ring for both halves. */
.field .phone-input input {
  border: 0;
  border-radius: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.field .phone-input input:focus { box-shadow: none; outline: none; }
.phone-input:focus-within { border-color: var(--brand); box-shadow: var(--ring-brand); }

/* ── GwenAI: the shopping assistant ──────────────────────────────────────────

   A launcher bottom-right and a panel above it.

   It sits outside the page wrapper, so on a themed shop it picks up that
   shop's brand ramp from :root rather than the shop page's own scope — which
   is right: the assistant belongs to the site, not to the page you happen to
   be reading. On a shop's own domain <html> carries the theme, so it is that
   shop's colour there too.
   ────────────────────────────────────────────────────────────────────────── */

.gw-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  /*
   * column-reverse, so the launcher stays pinned at the bottom corner and the
   * panel opens UPWARDS from it. In source order the launcher comes first,
   * which is what a keyboard and a screen reader should meet first, and this
   * keeps that order without putting the button above the panel on screen.
   */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

.gw-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-brand);
  color: var(--on-brand, #fff);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--glow-brand), var(--sh-2);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.gw-launch:hover { transform: translateY(-2px); box-shadow: var(--glow-brand), var(--sh-3); }
.gw-launch:active { transform: scale(.97); }
.gw-launch:focus-visible { outline: none; box-shadow: var(--ring-brand), var(--sh-2); }
.gw-launch .gw-ico { font-size: 1.05rem; line-height: 1; }
.gw-launch.on .gw-label { display: none; }

.gw-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: gw-in .22s var(--spring);
}
.gw-panel[hidden] { display: none; }

@keyframes gw-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-panel { animation: none; }
  .gw-launch { transition: none; }
}

.gw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  background: var(--grad-brand);
  color: var(--on-brand, #fff);
}
.gw-head .gw-av {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: 1rem;
  flex: none;
}
.gw-head div { display: flex; flex-direction: column; line-height: 1.25; }
.gw-head strong { font-size: .95rem; font-weight: 700; }
.gw-head span { font-size: .74rem; opacity: .85; }
.gw-x {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.gw-x:hover { background: rgba(255,255,255,.28); }

.gw-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--bg);
}

.gw-msg {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: .88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.gw-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.gw-me  { align-self: flex-end; background: var(--grad-brand); color: var(--on-brand, #fff); border-bottom-right-radius: 5px; }

/* Three dots while the model is thinking. */
.gw-typing { display: flex; gap: 4px; align-items: center; padding: 13px; }
.gw-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: gw-dot 1.2s infinite ease-in-out;
}
.gw-typing span:nth-child(2) { animation-delay: .15s; }
.gw-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes gw-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gw-typing span { animation: none; opacity: .6; } }

/* ── the product suggestions under a reply ───────────────────────────────── */

.gw-cards { display: flex; flex-direction: column; gap: 7px; align-self: stretch; }
.gw-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.gw-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-1); }
.gw-card-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.gw-card-open:hover { text-decoration: none; }
.gw-thumb {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 8px;
  background: var(--raised);
  display: grid; place-items: center;
  overflow: hidden;
}
.gw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gw-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gw-info strong {
  font-size: .82rem;
  font-weight: 650;
  /* Two lines, then ellipsis: product names here run long. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gw-price { font-size: .84rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.gw-shop { font-size: .72rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gw-add {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-pop);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.gw-add:hover { box-shadow: var(--sh-pop); }
/* Same distinction inside GwenAI cards. */
.gw-add.gw-pre { background: var(--grad-brand); color: var(--on-brand, #fff); }
.gw-add.gw-pre:hover { box-shadow: var(--glow-brand); }
.gw-out { flex: none; font-size: .7rem; color: var(--ink-4); padding-right: 4px; }

/* ── the starters and the composer ───────────────────────────────────────── */

.gw-chips {
  display: flex;
  gap: 6px;
  padding: 9px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface);
}
.gw-chips::-webkit-scrollbar { display: none; }
.gw-chips button {
  flex: none;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.gw-chips button:hover { border-color: var(--brand-200); color: var(--brand); }

.gw-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 4px;
  background: var(--surface);
}
.gw-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  font-family: inherit;
  font-size: .88rem;
}
.gw-form input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring-brand); }
.gw-form button {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--on-brand, #fff);
  cursor: pointer;
}
.gw-form button:hover { box-shadow: var(--glow-brand); }

.gw-foot {
  margin: 0;
  padding: 4px 14px 10px;
  background: var(--surface);
  font-size: .68rem;
  color: var(--ink-4);
  text-align: center;
}

/*
 * On a phone the panel is the screen, and it must clear the bottom tab bar —
 * which is the one thing a fixed overlay here would otherwise sit on top of.
 */
@media (max-width: 720px) {
  .gw-root { right: 12px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .gw-launch { padding: 11px 15px; font-size: .84rem; }
  .gw-panel {
    width: calc(100vw - 24px);
    height: min(70vh, calc(100vh - 160px));
  }
}