/* ============================================================================
   Parivar Sathi — design system
   Mobile-first. Shared by the website, admin, store, shop and auth layouts.

   Contents
     01  Tokens
     02  Reset & base
     03  Primitives (buttons, forms, cards, tables, badges, alerts, utils)
     04  Site chrome (utility bar, header, search, megamenu, mobile menu)
     05  Hero slider
     06  Notice ticker
     07  Sections & feature cards
     08  Carousels (trending products, services)
     09  Leaderboard & parallax band
     10  Footer
     11  Shop & product cards
     12  Admin / store panel
     13  Auth
     14  Online Bazaar (public marketplace)
     15  Panel additions for the bazaar (filters, sidebar groups, dashboard)
     16  Bazaar shop front (home)
     17  "Join Us" entry points in site chrome
     18  Home Services module
     19  Local Market (classifieds)
     20  Panchayat Store directory (district -> panchayat -> sign-up)
     21  Sathi Gold (rate desk, denominations, buy flow)
     22  More for You (PV tiers, lottery, EMI)
     23  Admin analytics (KPI cards, filter bar, charts, tables)
     24  Native app (Capacitor safe areas, toast, offline banner)
     25  Member area (the eight pages behind login)
   ========================================================================== */

/* ---------------------------------------------------------------- 01 Tokens */
:root {
  /* Brand green — pulled from the logo's hands/wordmark */
  --g-50:  #eef7f1;
  --g-100: #d5ebdd;
  --g-200: #abd7bc;
  --g-300: #79bd96;
  --g-400: #46a071;
  --g-500: #1f8449;
  --g-600: #196b3b;
  --g-700: #14562f;
  --g-800: #0f4126;
  --g-900: #0a2c1a;

  /* Logo blue (roof / "Parivar") and warm arc */
  --blue-500: #1f4e88;
  --blue-600: #163a67;
  --amber-300: #f7cf7a;
  --amber-400: #efab34;
  --amber-500: #e08a1e;
  --amber-50: #fff6e6;

  /* Neutrals with a faint green cast so they sit with the brand */
  --ink:      #14201a;
  --ink-soft: #3c4a41;
  --muted:    #6b7a70;
  --line:     #e2e8e3;
  --line-soft:#eef2ef;
  --surface:  #f5f7f5;
  --surface-2:#ffffff;

  /* Sathi Gold. --gd-cta is the Sathi Gold icon colour (.tone-amber's #b5760a)
     taken one step darker: white on #b5760a is only 3.78:1, and the button
     label is 14.5px/600 — not large text, so it needs 4.5:1. Same hue, reads
     as the same gold, but the label is actually legible.
     --gd-metal is the colour of the metal itself — prices and glyphs, never
     actions; the two are different jobs and deliberately different values. */
  --gd-cta: #a36a09;
  --gd-cta-dark: #8a5a07;
  --gd-metal: #8a6a1c;

  --danger: #c0392b;
  --danger-bg: #fdecea;
  --success: var(--g-500);

  /* Semantic aliases (kept for existing markup) */
  --color-primary: var(--g-500);
  --color-primary-dark: var(--g-700);
  --color-accent: var(--amber-500);
  --color-blue: var(--blue-500);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-bg: var(--surface);
  --color-card: var(--surface-2);
  --color-danger: var(--danger);
  --color-success: var(--success);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* Elevation — layered, low-opacity so cards read as paper not plastic */
  --sh-xs: 0 1px 2px rgba(16, 32, 22, .05);
  --sh-sm: 0 1px 2px rgba(16, 32, 22, .05), 0 2px 6px rgba(16, 32, 22, .05);
  --sh-md: 0 1px 2px rgba(16, 32, 22, .04), 0 8px 20px rgba(16, 32, 22, .08);
  --sh-lg: 0 2px 4px rgba(16, 32, 22, .04), 0 16px 36px rgba(16, 32, 22, .12);
  --sh-brand: 0 10px 26px rgba(31, 132, 73, .26);
  --shadow: var(--sh-md);

  --header-h: 72px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Baloo 2", var(--font-body);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------- 02 Reset & base */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 800; }
h2 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
h4 { font-size: 15px; font-weight: 700; }

p { margin: 0 0 1em; }

/* Links carry no underline anywhere — not at rest, not on hover. The feedback
   is a colour lift instead. This used to be `a:hover { text-decoration:
   underline }`, which every nav item, card, chip and menu row then had to
   cancel with its own `text-decoration: none`; those overrides are gone. */
a {
  color: var(--g-600);
  text-decoration: none;
  transition: color .16s var(--ease);
}
a:hover { color: var(--g-500); }

/* A colour shift alone is too easy to miss inside running text, so links in
   prose get an underline that wipes in on hover. Drawn as a background
   gradient rather than text-decoration: it sits clear of descenders, can be
   animated, and never nudges the line height. */
p a, li a, dd a, td a, .form-hint a, .alert a, .empty-state a, .text-muted a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size .24s var(--ease), color .16s var(--ease);
}
p a:hover, li a:hover, dd a:hover, td a:hover,
.form-hint a:hover, .alert a:hover, .empty-state a:hover, .text-muted a:hover {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  a, p a, li a, dd a, td a, .form-hint a, .alert a, .empty-state a, .text-muted a { transition: none; }
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--g-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (min-width: 700px) { .container { padding: 0 24px; } }

/* --------------------------------------------------------- 03 Primitives */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  background: var(--g-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover {
  background: var(--g-600);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--sh-brand);
}
.btn:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--g-600);
  border-color: var(--g-200);
}
.btn-secondary:hover { background: var(--g-50); color: var(--g-700); box-shadow: none; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #a33325; box-shadow: 0 10px 26px rgba(192, 57, 43, .26); }
.btn-ghost {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .2) !important; box-shadow: none; }
.btn-sm { padding: 8px 15px; font-size: 13px; }
.btn-block { display: flex; width: 100%; }

/* Forms */
.form-group { margin-bottom: 18px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=file], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 15px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--g-400);
  box-shadow: 0 0 0 3px rgba(31, 132, 73, .13);
}
textarea { min-height: 110px; resize: vertical; }
.form-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 220px; }

/* Alerts */
.alert {
  padding: 13px 16px;
  border-radius: var(--r-sm);
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert-success { background: var(--g-50); color: var(--g-700); border-color: var(--g-200); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #f5c6c0; }

/* Cards */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 20px;
  margin-bottom: 18px;
}
/* A card's own heading gets a rule under it so the card reads as titled
   content rather than a heading floating above loose text. */
.card > h3:first-child {
  margin: -2px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px;
}

/* Tables */
table { width: 100%; border-collapse: collapse; background: #fff; }
table th, table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-size: 13.5px;
  vertical-align: middle;
}
/* Figures line up column-to-column instead of jittering by digit width. */
table td { font-variant-numeric: tabular-nums; }
/* Sticky inside .table-wrap's scroll box, so the header survives a long list. */
table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table tr:last-child td { border-bottom: none; }
/* Zebra + hover: on a 10-column row the eye needs help staying on one line. */
table tbody tr:nth-child(even) { background: rgba(20, 32, 26, .016); }
table tbody tr:hover { background: var(--g-50); }
.table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  background: #fff;
}
/* Right-align money and counts where a view opts in. */
.num-col { text-align: right; font-variant-numeric: tabular-nums; }

/* A wide table scrolls inside its wrapper instead of squeezing columns until
   product names break across three lines. width:max-content lets the table ask
   for what it needs; min-width:100% keeps narrow tables filling the wrapper.
   (min() cannot take an intrinsic keyword like max-content — that silently
   computes to 0 and the declaration is dropped.) */
.table-wrap table { width: max-content; min-width: 100%; }

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.badge-pending { background: var(--amber-50); color: #96650d; }
.badge-approved, .badge-active, .badge-paid, .badge-confirmed, .badge-delivered { background: var(--g-50); color: var(--g-600); }
.badge-rejected, .badge-cancelled, .badge-failed { background: var(--danger-bg); color: var(--danger); }
.badge-placed { background: #e8f0fc; color: var(--blue-500); }
/* Bazaar fulfilment stages between "placed" and "delivered" */
.badge-packed, .badge-shipped { background: #eee7fb; color: #6535b8; }
.badge-suspended { background: var(--danger-bg); color: var(--danger); }
.badge-inactive { background: var(--surface); color: var(--muted); }

/* Category tones. Each has a tinted surface (--tone-bg) plus a saturated ink
   (--tone) for the icon tile. --tone-action is what a button may be filled or
   outlined with: identical to --tone except where --tone fails 4.5:1 against
   white label text, in which case it is the same hue one shade darker. Amber
   and orange are the two that need it — don't collapse them back into --tone. */
.tone-green  { --tone: #1a7f47; --tone-bg: #e6f4ec; }
.tone-blue   { --tone: #1f4e88; --tone-bg: #e6eef9; }
.tone-amber  { --tone: #b5760a; --tone-bg: #fdf1da; --tone-action: #a36a09; }
.tone-rose   { --tone: #c2185b; --tone-bg: #fce7ef; }
.tone-violet { --tone: #6535b8; --tone-bg: #eee7fb; }
.tone-teal   { --tone: #0f766e; --tone-bg: #ddf2f0; }
.tone-cyan   { --tone: #0e7490; --tone-bg: #ddeff7; }
.tone-orange { --tone: #c2571a; --tone-bg: #fce9dc; --tone-action: #b34f16; }

/* Utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.empty-state {
  text-align: center;
  padding: 34px 20px;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------- 04 Site chrome */

/* Utility / action bar above the header */
.utility-bar {
  background: var(--g-800);
  color: #d7ecdd;
  font-size: 12.5px;
  letter-spacing: .01em;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 14px;
}
.utility-bar a { color: #d7ecdd; }
.utility-bar a:hover { color: #fff; }
.utility-contact { display: flex; align-items: center; gap: 20px; min-width: 0; }
.utility-contact a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.utility-bar .ub-icon svg, .utility-social svg { width: 15px; height: 15px; }
.utility-right { display: flex; align-items: center; gap: 16px; }
.utility-tag { display: none; color: var(--g-300); font-weight: 500; }
.utility-social { display: none; align-items: center; gap: 12px; }
.utility-social a { display: inline-flex; opacity: .75; transition: opacity .15s var(--ease); }
.utility-social a:hover { opacity: 1; }
.utility-login {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  font-weight: 600;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.utility-login:hover { background: var(--g-500); border-color: var(--g-500); }
@media (max-width: 540px) { .utility-contact a:nth-child(2) { display: none; } }
@media (min-width: 860px) {
  .utility-tag { display: inline; }
  .utility-social { display: inline-flex; }
}

/* Header */
.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand:hover { }
.brand-logo { height: 46px; width: auto; }
.brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--g-600);
}
.brand-text small { font-size: 10.5px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
/* Hidden on narrow screens only in the site header, where space is tight.
   The auth card is a branded page of its own and always shows the full name. */
@media (max-width: 420px) {
  .site-header .brand-text { display: none; }
}

/* Primary nav */
/* The brand must never be squeezed by a long nav — it shrank to a third of its
   width and wrapped to three lines once Services and Join were added. */
.brand { flex: 0 0 auto; }
.brand-text { white-space: nowrap; }

.site-nav { display: none; align-items: center; gap: 4px; min-width: 0; }
.site-nav > a, .nav-mega-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13.5px;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.site-nav > a:hover, .nav-mega-trigger:hover,
.nav-mega:hover .nav-mega-trigger {
  color: var(--g-600);
  background: var(--g-50);
  text-decoration: none;
}
.site-nav a.nav-login {
  margin-left: 8px;
  padding: 10px 22px;
  background: var(--g-500);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.site-nav a.nav-login:hover { background: var(--g-600); box-shadow: var(--sh-brand); }

.caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform .2s var(--ease);
}
.nav-mega:hover .caret, .nav-mega:focus-within .caret { transform: rotate(-135deg) translate(-1px, -1px); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle, .search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 18px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.nav-toggle:hover, .search-toggle:hover { border-color: var(--g-400); color: var(--g-600); }
.search-toggle svg { width: 20px; height: 20px; }

/* Megamenu */
.nav-mega { display: inline-flex; align-items: center; }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 24px 48px rgba(16, 32, 22, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 70;
}
.nav-mega:hover .mega-panel, .nav-mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  gap: 32px;
  padding-top: 30px;
  padding-bottom: 34px;
  align-items: start;
}
.mega-col { min-width: 0; }
.mega-col h5 {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.mega-tag {
  background: var(--amber-50);
  color: #96650d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: none;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  margin: 0 -11px;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background .15s var(--ease);
}
a.mega-link:hover { background: var(--g-50); }
a.mega-link:hover .mega-ic { background: var(--tone, var(--g-500)); color: #fff; }
.mega-link.is-soon { opacity: .58; }
.mega-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--tone-bg, var(--g-50));
  color: var(--tone, var(--g-500));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mega-ic svg { width: 20px; height: 20px; }
.mega-copy { display: flex; flex-direction: column; min-width: 0; }
.mega-copy .t { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.mega-copy .t em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: #96650d;
  background: var(--amber-50);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.mega-copy .d { font-size: 12px; color: var(--muted); margin-top: 1px; }

.mega-services { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mega-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease);
}
.mega-chip:hover {
  border-color: var(--g-300);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
  text-decoration: none;
}
.mega-chip .e {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--tone-bg, var(--g-50));
  color: var(--tone, var(--g-500));
}
.mega-chip .e svg { width: 16px; height: 16px; }
.mega-chip:hover .e { background: var(--tone, var(--g-500)); color: #fff; }

/* Megamenu promo card — the Rewards panel */
.mega-promo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(239, 171, 52, .28) 0%, transparent 58%),
    linear-gradient(155deg, var(--g-600) 0%, var(--g-800) 100%);
  color: #fff;
  box-shadow: var(--sh-md);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.mega-promo:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(10, 44, 26, .38);
}
.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 12px 5px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}
.promo-eyebrow .ic {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber-400);
  color: var(--g-800);
}
.promo-eyebrow .ic svg { width: 12px; height: 12px; }
.promo-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.promo-desc { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }

.promo-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.promo-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 11px 4px 9px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  overflow: hidden;
}
.promo-tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.promo-tier.t-bronze::before { background: linear-gradient(90deg, #e8b483, #cd7f32); }
.promo-tier.t-silver::before { background: linear-gradient(90deg, #f2f4f7, #b9c2cc); }
.promo-tier.t-gold::before   { background: linear-gradient(90deg, #ffe08a, #efab34); }
.promo-tier b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.promo-tier i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--g-700);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
a.mega-promo:hover .promo-cta { background: var(--amber-400); color: var(--g-800); }

/* Header search — opens as a full-width panel from the search button */
.site-search {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 20px 40px rgba(16, 32, 22, .14);
  padding: 20px 0;
  z-index: 65;
}
.site-search.open { display: block; animation: searchDrop .24s var(--ease); }
@keyframes searchDrop {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 58px;
  padding: 0 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.site-search-inner:focus-within {
  background: #fff;
  border-color: var(--g-400);
  box-shadow: 0 0 0 4px rgba(31, 132, 73, .12);
}
.site-search-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--g-500); display: flex; }
.site-search-icon svg { width: 100%; height: 100%; }
.site-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none;
  padding: 0 !important;
  font-size: 16px;
  height: 100%;
  color: var(--ink);
}
.site-search-input::placeholder { color: var(--muted); }
.site-search-clear, .site-search-close {
  border: none;
  background: none;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.site-search-clear { display: none; font-size: 22px; padding: 0 4px; }
.site-search.has-value .site-search-clear { display: block; }
.site-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 19px;
}
.site-search-close:hover { background: var(--surface); color: var(--ink); }

.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  max-height: 66vh;
  overflow-y: auto;
  padding: 6px;
  z-index: 80;
}
.search-results.open { display: block; }
.search-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 12px 6px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink);
}
.search-item:hover { background: var(--g-50); }
.search-item .thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.search-item .info { flex: 1; min-width: 0; }
.search-item .title { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-item .price { font-size: 14px; font-weight: 700; color: var(--g-600); flex-shrink: 0; white-space: nowrap; }
.search-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.search-divider { height: 1px; background: var(--line-soft); margin: 6px 10px; }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--line-soft);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu > a {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-weight: 500;
}
.mobile-group-label {
  padding: 16px 18px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}
.mobile-sublink {
  display: block;
  padding: 12px 18px 12px 26px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 14px;
}
.mobile-sublink.is-soon { color: var(--muted); }
.mobile-sublink em {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  color: #96650d; background: var(--amber-50);
  padding: 2px 7px; border-radius: var(--r-pill);
}
.mobile-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 6px; }
.mobile-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink);
}
.mobile-chip svg { width: 14px; height: 14px; color: var(--g-500); }
.mobile-login {
  margin: 16px 18px 20px;
  text-align: center;
  background: var(--g-500);
  color: #fff !important;
  border-radius: var(--r-pill);
  padding: 13px;
  font-weight: 700;
  border-bottom: none !important;
}

@media (min-width: 1000px) {
  .site-nav { display: flex; }
  /* Below this the row is too tight for the tagline as well as 12 nav items. */
  .site-header .brand-text small { display: none; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ------------------------------------------------------- 05 Hero slider */
.hero-slider { position: relative; background: var(--g-900); }
.hero-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-slider-track::-webkit-scrollbar { display: none; }

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: clamp(460px, 64vh, 640px);
  display: flex;
  align-items: center;
  padding: 56px 0 104px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-slide > .container { width: 100%; position: relative; z-index: 2; }

.hero-slide.theme-green  { background: linear-gradient(140deg, var(--g-500) 0%, var(--g-800) 100%); }
.hero-slide.theme-blue   { background: linear-gradient(140deg, var(--blue-500) 0%, #0d2647 100%); }
.hero-slide.theme-orange { background: linear-gradient(140deg, var(--amber-500) 0%, #7a3f00 100%); }
.hero-slide.theme-purple { background: linear-gradient(140deg, #7b3fc4 0%, #3d1a6b 100%); }

.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}
.hero-slide.is-active .hero-photo { animation: kenburns 22s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.14); }
}

/* Scrim. On phones the copy spans the full width, so a side-to-side gradient
   would leave half the text over bright photo — darken top-to-bottom instead. */
.hero-slide.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 20, 12, .58) 0%, rgba(6, 20, 12, .74) 52%, rgba(6, 20, 12, .9) 100%);
}
/* Wider screens: cinematic side scrim so the photo stays visible on the right. */
@media (min-width: 900px) {
  .hero-slide.has-photo::before {
    background:
      linear-gradient(180deg, transparent 58%, rgba(6, 20, 12, .82) 100%),
      linear-gradient(95deg, rgba(6, 20, 12, .93) 0%, rgba(6, 20, 12, .72) 40%, rgba(6, 20, 12, .18) 78%, rgba(6, 20, 12, .05) 100%);
  }
}

.hero-slide-inner { position: relative; max-width: 560px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-slide h2 {
  font-size: clamp(30px, 5.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.hero-slide p {
  font-size: clamp(14.5px, 1.6vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 28px;
  max-width: 46ch;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-slide .btn {
  padding: 14px 28px;
  font-size: 15px;
  background: #fff;
  color: var(--g-700);
  font-weight: 700;
}
.hero-slide .btn:hover { background: var(--amber-400); color: var(--g-800); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }

/* Staggered entrance. `.is-active` is added by JS; see the no-JS fallback below. */
.hero-slide .hero-slide-inner > * { opacity: 0; }
/* Kept short: this replays on every slide change, so a long stagger leaves the
   headline faint for a noticeable slice of each autoplay cycle. */
.hero-slide.is-active .hero-slide-inner > * { animation: heroIn .42s var(--ease) forwards; }
.hero-slide.is-active .hero-badge { animation-delay: .03s; }
.hero-slide.is-active h2 { animation-delay: .08s; }
.hero-slide.is-active p { animation-delay: .14s; }
.hero-slide.is-active .hero-cta-row { animation-delay: .2s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Safety net: if JS never runs, nothing should stay invisible. */
.no-js .hero-slide .hero-slide-inner > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide .hero-slide-inner > * { opacity: 1; animation: none !important; }
  .hero-slide.is-active .hero-photo { animation: none; }
}

/* Trust stats bar over the hero base */
.hero-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(6, 20, 12, .18) 0%, rgba(6, 20, 12, .72) 100%);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 16px 18px;
}
.hero-stat { text-align: center; color: #fff; position: relative; }
.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 26px;
  background: rgba(255, 255, 255, .16);
}
.hero-stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--amber-300);
}
.hero-stat .label {
  display: block;
  font-size: clamp(9.5px, 1.1vw, 12px);
  color: rgba(255, 255, 255, .78);
  margin-top: 3px;
}

/* Dots + arrows */
.hero-dots {
  position: absolute;
  bottom: 108px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .45);
  transition: background .3s var(--ease), width .3s var(--ease);
}
.hero-dot.active { background: var(--amber-400); width: 26px; }

/* Arrows sit on the hero's bottom band by default. Centring them vertically
   would put them straight through the headline/subtitle, and below ~1240px the
   container has no side gutter for them to live in. */
.hero-arrow {
  position: absolute;
  bottom: 100px;
  z-index: 4;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(6, 20, 12, .42);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.hero-arrow:hover { background: var(--g-500); border-color: var(--g-400); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }

/* Wide enough for real gutters outside the 1160px container — move them to the sides. */
@media (min-width: 1240px) {
  .hero-arrow {
    top: calc(50% - 34px);
    bottom: auto;
    transform: translateY(-50%);
    width: 50px; height: 50px;
    font-size: 17px;
  }
  .hero-arrow.prev { left: 22px; }
  .hero-arrow.next { right: 22px; }
}

/* ------------------------------------------------------- 06 Notice ticker */
.ticker-bar {
  background: var(--g-800);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--amber-400);
  color: var(--g-900);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 16px;
  white-space: nowrap;
}
.ticker-viewport { flex: 1; overflow: hidden; }
.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 34s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-track span {
  padding: 10px 48px 10px 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .8);
}
.ticker-track span a { color: #fff; font-weight: 600; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* --------------------------------------------- 07 Sections & feature cards */
/* padding-block, not the shorthand: `class="container section"` is used all over
   the site, and a shorthand here zeroed the container's own side padding, so
   that content sat flush against the screen edge on phones. */
.section { padding-block: clamp(44px, 7vw, 80px); }
.section-soft { background: var(--surface-2); }
.section-title { font-size: clamp(20px, 3vw, 28px); margin-bottom: 22px; text-align: center; }

.section-header { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 44px); }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-600);
  background: var(--g-50);
  padding: 6px 15px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.section-header h2 { margin-bottom: 10px; }
.section-header p { color: var(--muted); font-size: 15px; margin: 0; }
.section-header.on-dark h2 { color: #fff; }
.section-header.on-dark p { color: rgba(255, 255, 255, .76); }
.section-header.on-dark .section-eyebrow { background: rgba(255, 255, 255, .13); color: var(--g-200); }
.empty-state.on-dark { color: rgba(255, 255, 255, .76); }

/* Generic page hero (about, business, careers…) */
.hero {
  background:
    radial-gradient(90% 120% at 90% 0%, rgba(239, 171, 52, .22) 0%, transparent 60%),
    linear-gradient(140deg, var(--g-500) 0%, var(--g-800) 100%);
  color: #fff;
  padding: clamp(52px, 8vw, 88px) 0;
  text-align: center;
}
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero p { font-size: 16.5px; color: rgba(255, 255, 255, .85); max-width: 600px; margin: 0 auto 22px; }

/* Feature cards — the six network modules */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1060px) { .feature-grid { grid-template-columns: repeat(6, 1fr); } }

.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 24px 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--g-200);
  box-shadow: 0 16px 32px rgba(16, 32, 22, .12);
}
.feature-card .icon {
  width: 58px; height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-bg, var(--g-50));
  color: var(--tone, var(--g-500));
  border-radius: 18px;
  margin-bottom: 14px;
  transition: transform .2s var(--ease);
}
.feature-card:hover .icon { transform: scale(1.06) rotate(-3deg); }
.feature-card .icon svg { width: 27px; height: 27px; }
.feature-card h3 { font-size: 15px; margin: 0 0 7px; }
.feature-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; flex: 1; line-height: 1.55; }
.feature-card .cta {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  /* Transparent border on every variant so the outlined cards' 1.5px stroke
     doesn't make those two buttons 3px taller than the filled four. */
  border: 1.5px solid transparent;
}
.feature-card .cta.cta-primary {
  background: var(--tone-action, var(--tone, var(--g-500)));
  border-color: var(--tone-action, var(--tone, var(--g-500)));
  color: #fff;
}
.feature-card:hover .cta.cta-primary { filter: brightness(.9); }
.feature-card .cta.cta-secondary {
  background: transparent;
  color: var(--tone-action, var(--tone, var(--g-600)));
  border: 1.5px solid var(--tone, var(--g-200));
}
.feature-card:hover .cta.cta-secondary { background: var(--tone-bg, var(--g-50)); }
.feature-card .cta.soon { background: var(--surface); color: var(--muted); cursor: default; }

/* ----------------------------------------------------------- 08 Carousels */
.scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }

.trending-card {
  flex: 0 0 168px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.trending-card:hover {
  transform: translateY(-5px);
  border-color: var(--g-200);
  box-shadow: 0 16px 32px rgba(16, 32, 22, .13);
}
.trending-card img,
.trending-card .img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  background: linear-gradient(145deg, var(--surface), var(--line-soft));
  transition: transform .3s var(--ease);
}
/* Products without a photo yet still get a branded tile rather than a blank box. */
.trending-card .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--g-50), var(--g-100));
  color: var(--g-300);
}
.trending-card .img-placeholder svg { width: 42px; height: 42px; }
.trending-card:hover img { transform: scale(1.05); }
.trending-card .body { padding: 13px; display: flex; flex-direction: column; }
.trending-card .name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 7px;
  min-height: 36px;
}
.trending-card .price-now { font-size: 16px; }
.trending-card .login-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--g-50);
  color: var(--g-600);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
}
.trending-card:hover .login-hint { background: var(--g-500); color: #fff; }

.service-card {
  flex: 0 0 138px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 22px 12px 16px;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: var(--g-200);
  box-shadow: 0 16px 32px rgba(16, 32, 22, .12);
}
.service-card .icon {
  width: 50px; height: 50px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--tone-bg, var(--g-50));
  color: var(--tone, var(--g-500));
}
.service-card .icon svg { width: 24px; height: 24px; }
.service-card .name { font-size: 12.5px; font-weight: 600; margin-bottom: 12px; min-height: 32px; line-height: 1.35; }

@media (min-width: 700px) { .trending-card { flex-basis: 216px; } }
@media (min-width: 900px) {
  .scroll-row.services-row { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .scroll-row.services-row .service-card { flex: unset; }
}

.carousel { position: relative; }
.carousel .scroll-row { scroll-snap-type: x mandatory; }
.carousel-btn {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: #fff;
  box-shadow: var(--sh-md);
  color: var(--ink);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .18s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.carousel-btn:hover { background: var(--g-500); color: #fff; border-color: var(--g-500); transform: translateY(-50%) scale(1.07); }
.carousel-btn.prev { left: -6px; }
.carousel-btn.next { right: -6px; }
.carousel-btn[disabled] { opacity: 0; pointer-events: none; }
@media (min-width: 1200px) {
  .carousel-btn.prev { left: -22px; }
  .carousel-btn.next { right: -22px; }
}

/* -------------------------------------------- 09 Leaderboard & parallax */
.section-parallax {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 8vw, 88px) 0;
}
.parallax-bg {
  position: absolute;
  top: -14%; left: 0; right: 0;
  height: 128%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.parallax-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(31, 132, 73, .32) 0%, transparent 70%),
    linear-gradient(180deg, rgba(8, 26, 16, .93) 0%, rgba(8, 26, 16, .88) 100%);
}
.parallax-content { position: relative; z-index: 2; }

.leaderboard {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s var(--ease);
}
.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-item:hover { background: var(--g-50); }
.rank-badge {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  background: var(--surface);
  color: var(--muted);
}
.rank-badge.rank-1 { background: linear-gradient(145deg, #ffe08a, #efab34); color: #5a4300; }
.rank-badge.rank-2 { background: linear-gradient(145deg, #f2f4f7, #c7ced6); color: #3a4048; }
.rank-badge.rank-3 { background: linear-gradient(145deg, #e8b483, #cd7f32); color: #4a2c10; }
.leaderboard-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.leaderboard-name { flex: 1; min-width: 0; }
.leaderboard-name .fname { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leaderboard-name .fcode { font-size: 12px; color: var(--muted); }
.leaderboard-pv { text-align: right; flex-shrink: 0; }
.leaderboard-pv .num { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--g-500); line-height: 1.1; }
.leaderboard-pv .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.gift-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.gift-badge.gift-gold   { background: var(--amber-50); color: #96650d; border: 1px solid #f3dda6; }
.gift-badge.gift-silver { background: #eff2f5; color: #55606e; border: 1px solid #d8dee6; }
.gift-badge.gift-bronze { background: #fbe9dc; color: #9c5321; border: 1px solid #f0cdb0; }

/* -------------------------------------------------------------- 10 Footer */
.site-footer {
  background: linear-gradient(180deg, var(--g-800) 0%, var(--g-900) 100%);
  color: rgba(255, 255, 255, .74);
  padding: clamp(48px, 7vw, 76px) 0 0;
  font-size: 14px;
}
.site-footer a { color: rgba(255, 255, 255, .74); }
.site-footer a:hover { color: #fff; }
.site-footer p { margin: 0 0 11px; line-height: 1.7; }
.site-footer .footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 760px) { .site-footer .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 32px; } }
.site-footer h4 {
  color: #fff;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.footer-brand-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.footer-logo { height: 48px; width: auto; background: #fff; border-radius: 12px; padding: 5px; }
.footer-brand-lockup span {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.footer-tagline { color: var(--g-300); font-size: 13px; margin-bottom: 14px; }
.footer-brand p { max-width: 360px; }
.footer-pillars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-pillars span {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: var(--r-pill);
}
.footer-soon {
  font-size: 9.5px; font-weight: 700;
  color: var(--g-300);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 2px 7px; border-radius: var(--r-pill); margin-left: 5px;
}
.footer-contact-line { display: flex; align-items: flex-start; gap: 10px; }
.footer-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--g-300); margin-top: 2px; }
.footer-icon svg { width: 100%; height: 100%; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.footer-social a:hover { background: var(--g-500); border-color: var(--g-500); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-bottom { padding: 22px 0; }
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
}
@media (min-width: 700px) { .footer-bottom-inner { flex-direction: row; justify-content: space-between; } }

/* ------------------------------------------------ 11 Shop & product cards */
.product-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.product-card img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; background: var(--surface); }
.product-card .body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.product-card .name { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; min-height: 40px; line-height: 1.35; }
.price-row { display: flex; align-items: baseline; gap: 9px; margin: 6px 0; }
.price-now { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.price-mrp { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.pv-badge {
  display: inline-block;
  background: var(--amber-50);
  color: #96650d;
  border: 1px solid #f3dda6;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}
.category-pills { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; scrollbar-width: none; }
.category-pills::-webkit-scrollbar { display: none; }
.category-pills a {
  white-space: nowrap;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
}
.category-pills a:hover { border-color: var(--g-300); color: var(--g-600); }
.category-pills a.active { background: var(--g-500); color: #fff; border-color: var(--g-500); }

.shop-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}
.shop-topbar .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
/* Was an inline style on <main>; moved here so the native safe-area rule in
   section 24 can extend the bottom padding instead of losing to it. */
.shop-main { padding-top: 20px; padding-bottom: 40px; }
/* The row is a fixed --header-h tall, which holds on a laptop but not on a
   411px phone: the four nav links wrap to a second line and spill out of that
   height, leaving the brand sitting underneath them. Showed up on the customer
   dashboard, the first screen a member sees in the app. Let the row grow. */
@media (max-width: 700px) {
  .shop-topbar .container {
    height: auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.cart-link { position: relative; font-weight: 600; }
.cart-count {
  position: absolute; top: -8px; right: -14px;
  background: var(--danger); color: #fff;
  border-radius: 50%; width: 19px; height: 19px;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------- 12 Admin / store panel */
.admin-body { background: var(--surface); }
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 246px;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  background: linear-gradient(178deg, #123024 0%, #0a2418 100%);
  color: rgba(255, 255, 255, .68);
  /* Fixed so a 25-item menu scrolls inside itself instead of dragging the
     whole page down when the content area is short. */
  position: sticky; top: 0; height: 100vh;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.sidebar-brand:hover { color: #fff; }
.sidebar-brand img { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; background: #fff; padding: 3px; }
.sidebar-brand span {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.sidebar-brand small {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  color: rgba(255, 255, 255, .45); letter-spacing: .02em; margin-top: 2px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px 18px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }

.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  margin-bottom: 1px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.sidebar-nav a .ic { display: flex; flex: 0 0 auto; opacity: .8; }
.sidebar-nav a .ic svg { width: 18px; height: 18px; }
.sidebar-nav a .lbl { flex: 1; min-width: 0; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-nav a:hover .ic { opacity: 1; }

/* Active row: tinted panel plus an accent rail, so the current page is obvious
   at a glance rather than a barely-lighter block. */
.sidebar-nav a.active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 600;
}
.sidebar-nav a.active .ic { opacity: 1; color: var(--amber-400); }
.sidebar-nav a.active::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--amber-400);
}

.sidebar-group {
  margin: 16px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}
.sidebar-count {
  flex: 0 0 auto;
  background: var(--amber-400); color: #2a2117;
  font-size: 11px; font-weight: 700;
  min-width: 19px; text-align: center;
  padding: 1px 6px; border-radius: var(--r-pill);
}

.sidebar-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
}
.sidebar-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  background: var(--amber-400); color: #2a2117;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.sidebar-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sidebar-who strong { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-who small { color: rgba(255, 255, 255, .45); font-size: 11px; }
.sidebar-logout {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7);
  border-radius: var(--r-sm);
}
.sidebar-logout:hover { background: var(--danger); color: #fff; }
.sidebar-logout svg { width: 17px; height: 17px; }

.main-content { flex: 1; min-width: 0; }

/* Admin panel top bar (distinct from the website's .utility-bar) */
.main-content > .topbar {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.topbar-crumb { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topbar-title strong { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-link { font-size: 13px; font-weight: 600; color: var(--muted); }
.topbar-link:hover { color: var(--g-600); }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.topbar-user .sidebar-avatar { width: 28px; height: 28px; font-size: 12.5px; }
@media (max-width: 620px) { .topbar-link, .topbar-user { display: none; } }

.content-area { padding: 22px 16px 40px; }
@media (min-width: 900px) {
  .sidebar { display: flex; }
  .main-content > .topbar .nav-toggle { display: none; }
  .content-area { padding: 26px 26px 48px; }
}

/* The KPI row needs air under it — it butted straight against the filter
   bar or table that follows on every list page. */
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 16px 16px 17px;
  /* Left-aligned: a column of figures is far easier to compare down the row
     than centred text, and it leaves room for the delta line underneath. */
  text-align: left;
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* A tinted wash keyed off the card's tone, so a row of five reads as five
   distinct metrics rather than five identical white boxes. */
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tone, var(--g-500));
}
.stat-icon {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-500));
}
.stat-icon svg { width: 16px; height: 16px; }
.stat-card .num {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--ink); line-height: 1.15; margin-top: 4px;
  padding-right: 34px;
}
.stat-card .label { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* ---------------------------------------------------------------- 13 Auth */
/* Split screen: a brand story column beside the form. On phones the story
   collapses to a compact header so the form is the first thing in reach. */
.auth-body { background: var(--surface); }
/* auto/1fr rows keep the phone header at its content height — an even split
   would hand half the screen to an empty green band. */
.auth-shell { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
@media (min-width: 940px) {
  .auth-shell { grid-template-columns: 44% 1fr; grid-template-rows: 1fr; }
}

.auth-aside {
  position: relative;
  color: #fff;
  padding: 22px 20px;
  background:
    radial-gradient(80% 70% at 88% 6%, rgba(239, 171, 52, .26) 0%, transparent 58%),
    linear-gradient(155deg, var(--g-600) 0%, var(--g-900) 100%);
}
@media (min-width: 940px) {
  .auth-aside { display: flex; align-items: center; padding: 48px 44px; }
}
.auth-aside-inner { width: 100%; max-width: 420px; margin: 0 auto; }

.auth-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.auth-brand-logo {
  height: 46px; width: 46px; flex: 0 0 46px;
  border-radius: 50%; background: #fff; padding: 3px; object-fit: contain;
}
.auth-brand-text {
  display: flex; flex-direction: column;
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  line-height: 1.05; color: #fff;
}
.auth-brand-text small { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .72); }

/* The pitch is desktop-only — on a phone it would push the form off screen. */
.auth-aside-body, .auth-aside-foot { display: none; }
@media (min-width: 940px) {
  .auth-aside-body { display: block; margin: 40px 0; }
  .auth-aside-foot { display: block; }
}
.auth-aside-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.18; margin: 0 0 12px; color: #fff;
}
.auth-aside-body > p { color: rgba(255, 255, 255, .82); margin: 0 0 26px; font-size: 15px; }

.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.auth-points li { display: flex; align-items: flex-start; gap: 13px; }
.auth-points .ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .14); color: #fff;
}
.auth-points .ic svg { width: 21px; height: 21px; }
.auth-points li > span:last-child { font-size: 13.5px; color: rgba(255, 255, 255, .74); line-height: 1.4; }
.auth-points strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 1px; }
.auth-aside-foot { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin: 0; }
.auth-aside-foot a { color: rgba(255, 255, 255, .82); }
.auth-aside-foot a:hover { color: #fff; }

/* Top-aligned on phones so the first field is near the thumb, centred on
   desktop where there is height to spare. */
.auth-main { display: flex; align-items: flex-start; justify-content: center; padding: 28px 18px 44px; background: #fff; }
@media (min-width: 940px) { .auth-main { align-items: center; padding: 48px 40px; } }
.auth-panel { width: 100%; max-width: 400px; }
.auth-panel.wide { max-width: 560px; }

.auth-head { margin-bottom: 24px; }
.auth-head h1 { font-family: var(--font-display); font-size: clamp(24px, 5vw, 30px); margin: 0 0 6px; }
.auth-head p { color: var(--muted); font-size: 14.5px; margin: 0; }

.auth-form .btn-lg { padding: 14px 24px; font-size: 15.5px; }
.auth-alt { margin-top: 22px; font-size: 14.5px; color: var(--muted); }
.auth-alt a { font-weight: 700; color: var(--g-600); }
.auth-back { margin-top: 10px; font-size: 13px; }
.auth-back a { color: var(--muted); }
.auth-back a:hover { color: var(--g-600); }

/* Inputs with a leading icon and an optional reveal button */
.field-icon { position: relative; display: flex; align-items: center; }
.field-icon .ic {
  position: absolute; left: 13px; display: flex; pointer-events: none;
  color: var(--muted);
}
.field-icon .ic svg { width: 19px; height: 19px; }
.field-icon .ic ~ input { padding-left: 42px; }
.field-icon input { width: 100%; }
.field-reveal {
  position: absolute; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
}
.field-reveal:hover { background: var(--surface); color: var(--ink); }
.field-reveal.is-on { color: var(--g-600); }
.field-reveal svg { width: 19px; height: 19px; }
.field-icon:has(.field-reveal) input { padding-right: 44px; }

/* ---- Multi-step registration ---- */
.wiz-progress {
  list-style: none; display: flex; padding: 0;
  margin: 0 0 26px; counter-reset: wiz;
}
.wiz-progress li {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center;
}
/* Connector line between dots */
.wiz-progress li::before {
  content: ""; position: absolute; top: 15px; right: 50%;
  width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.wiz-progress li:first-child::before { display: none; }
.wiz-progress li.is-done::before, .wiz-progress li.is-active::before { background: var(--g-400); }
.wiz-progress .dot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.wiz-progress li.is-active .dot { background: var(--g-500); border-color: var(--g-500); color: #fff; }
.wiz-progress li.is-active { color: var(--g-700); }
.wiz-progress li.is-done .dot { background: var(--g-50); border-color: var(--g-400); color: var(--g-600); }
.wiz-progress li.is-done .dot::after { content: "\2713"; }
.wiz-progress li.is-done .dot { font-size: 0; }
.wiz-progress li.is-done .dot::after { font-size: 14px; }
.wiz-progress li.is-done { cursor: pointer; }
.wiz-progress .lbl { display: none; }
@media (min-width: 480px) { .wiz-progress .lbl { display: block; } }

/* Without JS the wizard is just a long form: every step shows, no nav. */
.no-js .wiz-progress, .no-js .wiz-nav [data-wiz-back], .no-js .wiz-nav [data-wiz-next] { display: none; }
.no-js .wiz-step { display: block !important; }
.no-js .wiz-nav [data-wiz-submit] { display: inline-flex !important; }

.wizard .wiz-step { display: none; }
.wizard .wiz-step.is-active { display: block; animation: wizIn .28s var(--ease) both; }
@keyframes wizIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wizard .wiz-step.is-active { animation: none; } }

.wiz-title { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; }
.wiz-optional {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: #96650d; background: var(--amber-50);
  padding: 3px 9px; border-radius: var(--r-pill); vertical-align: middle; margin-left: 6px;
}
.wiz-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.wiz-note {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  background: var(--g-50); border-left: 3px solid var(--g-300);
  padding: 11px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0;
}
.wiz-nav { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.wiz-nav .btn { flex: 1; justify-content: center; }
.wiz-nav [data-wiz-back] { flex: 0 0 auto; }
.wiz-nav .btn[hidden] { display: none; }

.req { color: var(--danger); }
.reg-terms {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
  padding: 14px; background: var(--surface);
  border-radius: var(--r-md); margin: 4px 0 18px;
  cursor: pointer;
}
.reg-terms input { width: auto; margin-top: 2px; flex: 0 0 auto; }

/* ---- The household: one card per person ----
   The nominee radio and Remove sit BELOW the fields they belong to, so with no
   card around each person they render flush against the NEXT member's name and
   read as that person's controls. Nominating the wrong member is the one
   mistake this form must not invite: the ticked name has to match the uploaded
   document or the store sends the household away. The card is what says which
   name the radio is about. */
.reg-member {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 13px 14px 2px; margin-bottom: 12px;
}
.reg-member-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line);
}
/* 44px on both, because a thumb on a village phone is the target — and Remove
   is destructive, so it must not be a 21px browser-default button either. */
.reg-nominee {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  min-height: 44px; margin: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.reg-nominee input {
  width: 19px; height: 19px; margin: 0; flex: 0 0 auto;
  accent-color: var(--g-500);
}
.reg-member-drop {
  flex: 0 0 auto; min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--danger);
}
.reg-member-drop:hover { color: #96271a; }
#regAddMember { margin: 0 0 18px; }

/* ---- Registration success ---- */
.auth-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 4px; }
.reg-done { text-align: center; }
.reg-done-tick {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--g-50); color: var(--g-500);
  font-size: 32px; font-weight: 700;
}
.reg-code {
  background: var(--g-50); border: 1px dashed var(--g-200);
  border-radius: var(--r-md); padding: 15px; margin: 20px 0;
}
.reg-code span { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reg-code strong { display: block; font-family: var(--font-display); font-size: 23px; color: var(--g-700); margin-top: 4px; }
/* The waiting state. Green display type would read as a value they have been
   given; this has to read as the blank it is. */
.reg-code.is-pending { background: var(--surface); border-color: var(--line); }
.reg-code.is-pending strong { color: var(--line); letter-spacing: .12em; }
.reg-code.is-pending em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.reg-next { list-style: none; padding: 0; margin: 24px 0; text-align: left; }
.reg-next li { position: relative; padding: 0 0 20px 30px; border-left: 2px solid var(--line); margin-left: 9px; }
.reg-next li:last-child { border-left-color: transparent; padding-bottom: 0; }
.reg-next li::before {
  content: ""; position: absolute; left: -8px; top: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
}
.reg-next li.done::before { background: var(--g-500); border-color: var(--g-500); }
.reg-next li.active::before { background: var(--amber-400); border-color: var(--amber-400); }
.reg-next strong { display: block; font-size: 14.5px; }
.reg-next span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.reg-done .btn { margin-top: 8px; }

/* ------------------------------------------------- 14 Online Bazaar (public) */
.bz-hero {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(239, 171, 52, .22) 0%, transparent 55%),
    linear-gradient(155deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff;
  padding: 40px 0 44px;
}
.bz-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-400);
  margin-bottom: 10px;
}
.bz-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.6vw, 42px);
  line-height: 1.12;
  margin: 0 0 10px;
  color: #fff;
}
.bz-hero p { color: rgba(255, 255, 255, .84); max-width: 620px; margin: 0 0 20px; }
.bz-search { display: flex; gap: 10px; max-width: 620px; flex-wrap: wrap; }
.bz-search input {
  flex: 1 1 220px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.bz-search input:focus { outline: 2px solid var(--amber-400); outline-offset: 1px; }
.bz-search .btn { border-radius: var(--r-pill); background: var(--amber-400); color: #3a2607; }
.bz-search .btn:hover { background: #f5bc55; box-shadow: 0 10px 26px rgba(239, 171, 52, .3); }
.bz-hero-link {
  display: inline-block;
  margin-top: 14px;
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  font-size: 14px;
}
.bz-hero-link:hover { color: var(--amber-400); }

/* --- layout: filter rail + results --- */
.bz-layout { display: grid; gap: 22px; padding: 26px 16px 40px; grid-template-columns: 1fr; }

/* Mobile: products first. The full filter rail drops below the results and the
   categories ride along as a scrollable chip strip, so a phone user sees goods
   immediately instead of a screenful of filters. */
.bz-results { order: 1; }
.bz-filters { order: 2; }
.bz-cat-block { display: none; }
.bz-cat-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 14px;
  padding: 0 16px 2px;
}
.bz-cat-strip::-webkit-scrollbar { display: none; }
.bz-cat-strip a {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.bz-cat-strip a.active { background: var(--g-500); border-color: var(--g-500); color: #fff; }

@media (min-width: 900px) {
  .bz-layout { grid-template-columns: 232px 1fr; gap: 28px; align-items: start; }
  .bz-filters { position: sticky; top: 84px; order: 0; }
  .bz-results { order: 0; }
  .bz-cat-block { display: block; }
  .bz-cat-strip { display: none; }
}
.bz-filter-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--sh-xs);
}
.bz-filter-block h4 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bz-filter-block > a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin: 0 -4px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--ink);
}
.bz-filter-block > a:hover { background: var(--g-50); color: var(--g-700); }
.bz-filter-block > a.active { background: var(--g-500); color: #fff; font-weight: 600; }
.bz-filter-block .cnt { color: var(--muted); font-size: 12.5px; }
.bz-filter-block > a.active .cnt { color: rgba(255, 255, 255, .8); }
.bz-brand-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bz-brand-chips a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
}
.bz-brand-chips a:hover { border-color: var(--g-300); color: var(--g-700); background: var(--g-50); }
.bz-brand-chips a.active { background: var(--g-500); border-color: var(--g-500); color: #fff; font-weight: 600; }

.bz-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 14.5px;
  color: var(--muted);
}
.bz-clear { margin-left: 10px; color: var(--g-600); font-weight: 600; font-size: 13.5px; }
.bz-sort { display: flex; align-items: center; gap: 8px; }
.bz-sort label { font-size: 13.5px; color: var(--muted); }
.bz-sort select { width: auto; padding: 8px 12px; font-size: 14px; }

/* --- product tiles --- */
.bz-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .bz-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .bz-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.bz-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.bz-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-200); }
.bz-card.is-out { opacity: .72; }
.bz-card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  overflow: hidden;
}
.bz-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bz-card-ph { display: block; width: 42%; color: var(--g-300); }
.bz-card-ph svg { width: 100%; height: auto; }
.bz-save, .bz-oos {
  position: absolute;
  top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
.bz-save { left: 8px; background: var(--amber-400); color: #3a2607; }
.bz-oos  { right: 8px; background: rgba(20, 32, 26, .82); color: #fff; }

.bz-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px 14px; flex: 1; }
.bz-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.bz-name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bz-name:hover { color: var(--g-600); }
.bz-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.bz-price .now { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.bz-price .was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.bz-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.bz-seller { font-size: 12.5px; color: var(--muted); }
.bz-seller:hover { color: var(--g-600); }
.bz-verified { color: var(--g-500); font-weight: 700; }
.bz-card-body .btn { margin-top: 4px; }

/* --- product detail --- */
.bz-crumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
  font-size: 13.5px;
  color: var(--muted);
}
.bz-crumbs a { color: var(--muted); }
.bz-crumbs a:hover { color: var(--g-600); }
.bz-crumbs strong { color: var(--ink); font-weight: 600; }

.bz-detail { display: grid; gap: 24px; padding: 0 16px 32px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .bz-detail { grid-template-columns: minmax(0, 460px) 1fr; gap: 36px; } }
.bz-detail-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.bz-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.bz-detail-info h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 4.4vw, 32px);
  line-height: 1.18;
  margin: 6px 0 10px;
}
.bz-seller-line { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.bz-seller-line strong { color: var(--ink); }
.bz-seller-line:hover strong { color: var(--g-600); }
.bz-detail-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.bz-detail-price .now { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--g-600); }
.bz-detail-price .was { font-size: 16px; color: var(--muted); text-decoration: line-through; }
.bz-detail-price .off { font-size: 13px; font-weight: 700; color: #96650d; background: var(--amber-50); padding: 4px 10px; border-radius: var(--r-pill); }

.bz-facts { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--line); }
.bz-facts li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.bz-facts span { color: var(--muted); }
.bz-out-text { color: var(--danger); }

.bz-buy { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bz-buy label { font-size: 13.5px; color: var(--muted); align-self: center; }
.bz-buy input { width: 84px; }
.bz-desc { margin-top: 26px; }
.bz-desc h3 { font-size: 17px; margin-bottom: 8px; }

/* --- seller storefronts --- */
.bz-storefront-head {
  background: linear-gradient(155deg, var(--g-600) 0%, var(--g-800) 100%);
  color: #fff;
  padding: 30px 0;
}
.bz-storefront-head .container { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.bz-storefront-head h1 { font-family: var(--font-display); font-size: clamp(22px, 4.6vw, 32px); margin: 0 0 8px; color: #fff; }
.bz-storefront-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.bz-tag { font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .16); padding: 4px 11px; border-radius: var(--r-pill); }
.bz-storefront-desc { color: rgba(255, 255, 255, .84); margin: 0; max-width: 620px; font-size: 14.5px; }

.bz-vendor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: var(--r-md);
  background: var(--g-50);
  color: var(--g-600);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
}
.bz-vendor-logo.lg { width: 78px; height: 78px; flex-basis: 78px; font-size: 32px; background: #fff; }
.bz-vendor-logo img { width: 100%; height: 100%; object-fit: cover; }

.bz-vendor-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 30px; }
@media (min-width: 620px)  { .bz-vendor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bz-vendor-grid { grid-template-columns: repeat(3, 1fr); } }
.bz-vendor-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.bz-vendor-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-200); }
.bz-vendor-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.bz-vendor-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
.bz-vendor-count { font-size: 12.5px; font-weight: 600; color: var(--g-600); margin-top: auto; }

/* --- cart & checkout --- */
.bz-cart-layout { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .bz-cart-layout { grid-template-columns: 1fr 320px; gap: 24px; } }
.bz-cart-main { display: flex; flex-direction: column; gap: 16px; }

.bz-cart-group { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); }
.bz-cart-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--g-50);
  border-bottom: 1px solid var(--g-100);
  font-weight: 600;
  font-size: 14.5px;
}
.bz-cart-group-head a { color: var(--g-700); }
.bz-cart-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.bz-cart-row:last-child { border-bottom: none; }
@media (min-width: 720px) { .bz-cart-row { grid-template-columns: 62px 1fr auto auto auto; } }
.bz-cart-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  color: var(--g-300);
}
.bz-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bz-cart-thumb svg { width: 55%; }
/* min-width:0 lets a long product name wrap instead of stretching the grid column */
.bz-cart-info { min-width: 0; }
.bz-cart-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.bz-cart-name:hover { color: var(--g-600); }
.bz-cart-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.bz-cart-qty { display: flex; gap: 6px; align-items: center; grid-column: 2 / -1; }
@media (min-width: 720px) { .bz-cart-qty { grid-column: auto; } }
.bz-cart-qty input { width: 68px; padding: 8px 10px; }
.bz-cart-total { font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap; }
.bz-cart-remove {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
}
.bz-cart-remove:hover { color: var(--danger); }

.bz-cart-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
}
@media (min-width: 900px) { .bz-cart-summary { position: sticky; top: 84px; } }
.bz-cart-summary h3 { margin: 0 0 14px; font-size: 17px; }
.bz-cart-summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14.5px; color: var(--muted); }
.bz-cart-summary .row strong { color: var(--ink); }
.bz-cart-summary .row.total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
  font-size: 16px;
  color: var(--ink);
}
.bz-cart-summary .row.total strong { font-family: var(--font-display); font-size: 22px; color: var(--g-600); }
.bz-cart-summary .btn { margin-top: 10px; }

.bz-pay-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.bz-pay-option:hover { border-color: var(--g-300); background: var(--g-50); }
.bz-pay-option:has(input:checked) { border-color: var(--g-500); background: var(--g-50); }
.bz-pay-option input { width: auto; margin-top: 3px; }
.bz-pay-option strong { display: block; font-size: 15px; }
.bz-pay-option em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

.bz-ship-block { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; }
.bz-ship-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
}
.bz-ship-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }

/* --- order tracking --- */
.bz-track-card { margin-bottom: 16px; }
.bz-track-items { margin-top: 14px; border-top: 1px solid var(--line); }
.bz-track-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bz-track-item:last-child { border-bottom: none; }
.bz-track-item img { width: 38px; height: 38px; object-fit: cover; border-radius: var(--r-sm); }
.bz-track-item .nm { flex: 1; }
.bz-track-item .amt { font-weight: 600; }

/* Fulfilment progress, shared by the vendor panel and customer tracking */
.fulfil-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 14px 0 0; counter-reset: step; }
.fulfil-steps li {
  flex: 1 1 84px;
  position: relative;
  padding: 9px 8px 9px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.fulfil-steps li.done { background: var(--g-50); border-color: var(--g-200); color: var(--g-700); }
.fulfil-steps li.done::before { content: "\2713\00a0"; }

/* ------------------------------------------- 15 Panel additions for bazaar */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.filter-bar a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
}
.filter-bar a:hover { border-color: var(--g-300); color: var(--g-700); background: var(--g-50); }
.filter-bar a.active { background: var(--g-500); border-color: var(--g-500); color: #fff; }

.sidebar-group {
  margin: 16px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.sidebar-count {
  display: inline-block;
  min-width: 19px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--amber-400);
  color: #3a2607;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

/* Bazaar cart button in the public header */
.header-cart { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); color: var(--ink); }
.header-cart:hover { background: var(--g-50); color: var(--g-600); }
.header-cart svg { width: 21px; height: 21px; }
.header-cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--g-500);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Customer dashboard */
.reward-progress .reward-bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--g-50);
  overflow: hidden;
  margin: 12px 0 10px;
}
.reward-progress .reward-bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--g-400), var(--amber-400));
}
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.notice-list li:last-child { border-bottom: none; }
.notice-list strong { display: block; }
.notice-list span { display: block; color: var(--muted); margin-top: 2px; }
.notice-list em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* --------------------------------------------- 16 Bazaar shop front (home) */
.bz-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.bz-hero-stats strong { color: #fff; font-family: var(--font-display); font-size: 18px; margin-right: 4px; }

/* Trust strip under the hero */
.bz-usp { background: #fff; border-bottom: 1px solid var(--line); }
.bz-usp .container { display: grid; gap: 12px; grid-template-columns: 1fr; padding-top: 16px; padding-bottom: 16px; }
@media (min-width: 720px) { .bz-usp .container { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.bz-usp-item { display: flex; align-items: center; gap: 12px; }
.bz-usp-item .ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md); background: var(--g-50); color: var(--g-500);
}
.bz-usp-item .ic svg { width: 21px; height: 21px; }
.bz-usp-item > span:last-child { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.bz-usp-item strong { display: block; font-size: 14.5px; color: var(--ink); }

/* Section heads shared by every rail */
.bz-rail { margin-bottom: 34px; }

/* Rails are carousels, not grids: the same .bz-card gets a fixed basis and
   snaps, so a rail shows a partial next card as an affordance to swipe. */
.bz-rail-row { gap: 14px; padding: 4px 0 12px; }
.bz-rail-row .bz-card { flex: 0 0 158px; scroll-snap-align: start; }
@media (min-width: 620px)  { .bz-rail-row { gap: 16px; } .bz-rail-row .bz-card { flex-basis: 190px; } }
@media (min-width: 1100px) { .bz-rail-row { gap: 18px; } .bz-rail-row .bz-card { flex-basis: 212px; } }

/* Arrows are a pointer affordance. On phones they land on top of the product
   name and touch users swipe anyway — the peeking next card already signals
   the rail scrolls — so they only appear once there's a mouse-sized viewport. */
.bz-rail .carousel-btn { display: none; }
@media (min-width: 700px) {
  .bz-rail .carousel-btn { display: flex; top: 34%; }
}
.bz-rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.bz-rail-eyebrow {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-500); margin-bottom: 4px;
}
.bz-rail-head h2 { font-family: var(--font-display); font-size: clamp(20px, 3.6vw, 27px); margin: 0; line-height: 1.15; }
.bz-rail-more { font-size: 14px; font-weight: 600; color: var(--g-600); white-space: nowrap; }
.bz-rail-more:hover { color: var(--g-700); }

/* Category photo tiles */
.bz-cat-section { padding-bottom: 8px; }
.bz-cat-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px)  { .bz-cat-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 860px)  { .bz-cat-tiles { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.bz-cat-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 14px 10px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.bz-cat-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--tone, var(--g-300)); }
.bz-cat-img {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; margin-bottom: 8px;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--tone-bg, var(--g-50));
}
.bz-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.bz-cat-fallback { display: block; width: 42%; color: var(--tone, var(--g-500)); }
.bz-cat-fallback svg { width: 100%; height: auto; }
.bz-cat-name { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }
.bz-cat-tile:hover .bz-cat-name { color: var(--tone, var(--g-600)); }
.bz-cat-count { font-size: 12px; color: var(--muted); }

/* Seller chips */
.bz-seller-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.bz-seller-strip::-webkit-scrollbar { display: none; }
.bz-seller-chip {
  flex: 0 0 auto; width: 168px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 16px 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.bz-seller-chip:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-200); }
.bz-seller-chip .bz-vendor-logo { margin-bottom: 6px; }
.bz-seller-chip .nm { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.3; }
.bz-seller-chip .ct { font-size: 12px; color: var(--muted); }

/* Bigger brand chips on the shop front */
.bz-brand-section { padding-top: 8px; }
.bz-brand-chips.lg a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 14.5px; font-weight: 600; }
.bz-brand-chips.lg a span {
  background: var(--g-50); color: var(--g-600);
  padding: 1px 8px; border-radius: var(--r-pill); font-size: 12px;
}
.bz-brand-chips.lg a:hover span { background: #fff; }

/* Guest sign-up band */
.bz-join {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(239, 171, 52, .2) 0%, transparent 58%),
    linear-gradient(150deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff; text-align: center; padding: 44px 0; margin-top: 20px;
}
.bz-join h2 { font-family: var(--font-display); font-size: clamp(22px, 4.4vw, 32px); margin: 0 0 10px; color: #fff; }
.bz-join p { color: rgba(255, 255, 255, .84); max-width: 560px; margin: 0 auto 22px; }
.bz-join-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bz-join-actions .btn { background: var(--amber-400); color: #3a2607; }
.bz-join-actions .btn:hover { background: #f5bc55; }
.bz-join-actions .btn-ghost { background: transparent; color: #fff; }

/* --------------------------------- 17 "Join Us" entry points in site chrome */
.utility-join { font-weight: 700; color: var(--amber-400) !important; margin-right: 4px; }
.utility-join:hover { color: #f5bc55 !important; }
.nav-join {
  border: 1.5px solid var(--g-500) !important;
  color: var(--g-600) !important;
  padding: 8px 16px !important;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.nav-join:hover { background: var(--g-50) !important; }
.mobile-join {
  background: var(--g-500); color: #fff !important; text-align: center;
  border-radius: var(--r-md); font-weight: 700; margin-top: 8px;
}

/* The tagline fits again now the nav is down to eight items. */
@media (min-width: 1080px) {
  .site-header .brand-text small { display: block; }
  .site-nav > a, .nav-mega-trigger { padding: 9px 13px; font-size: 14px; }
}

/* ------------------------------------------------- 18 Home Services module */
.svc-hero {
  background:
    radial-gradient(85% 110% at 8% 0%, rgba(239, 171, 52, .22) 0%, transparent 55%),
    linear-gradient(155deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff;
  padding: 40px 0 44px;
}
.svc-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-400); margin-bottom: 10px;
}
.svc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.6vw, 42px);
  line-height: 1.12; margin: 0 0 10px; color: #fff;
}
.svc-hero p { color: rgba(255, 255, 255, .84); max-width: 620px; margin: 0 0 18px; }
.svc-hero-points { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-hero-points span {
  font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .14); color: #fff;
  padding: 6px 13px; border-radius: var(--r-pill);
}

/* Service list */
.svc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.svc-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--tone, var(--g-200)); }
.svc-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: var(--r-md);
  background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-500));
}
.svc-card-icon svg { width: 25px; height: 25px; }
.svc-card-body { flex: 1; min-width: 0; }
.svc-card-name { display: block; font-weight: 700; font-size: 16px; color: var(--ink); }
.svc-card-tag { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.svc-card-cta { align-self: center; font-size: 13.5px; font-weight: 700; color: var(--tone, var(--g-600)); white-space: nowrap; }

/* How it works */
.svc-how { background: #fff; border-top: 1px solid var(--line); padding: 34px 0 40px; }
.svc-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .svc-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.svc-steps li { text-align: center; }
.svc-steps .n {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--g-500); color: #fff;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
}
.svc-steps strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.svc-steps li > span:last-child { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Service detail */
.svc-detail-head {
  background: linear-gradient(150deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff; padding: 22px 0 28px;
}
.svc-back { display: inline-block; font-size: 13.5px; color: rgba(255, 255, 255, .8); margin-bottom: 16px; }
.svc-back:hover { color: var(--amber-400); }
.svc-detail-head-inner { display: flex; gap: 16px; align-items: flex-start; }
.svc-detail-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .15); color: #fff;
}
.svc-detail-icon svg { width: 29px; height: 29px; }
.svc-detail-head h1 { font-family: var(--font-display); font-size: clamp(22px, 4.6vw, 32px); margin: 0 0 6px; color: #fff; }
.svc-detail-head > .container > .svc-detail-head-inner p { color: rgba(255, 255, 255, .82); margin: 0 0 10px; font-size: 15px; }
.svc-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-detail-meta span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  background: rgba(255, 255, 255, .14); color: #fff;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.svc-detail-meta svg { width: 15px; height: 15px; }

.svc-detail { display: grid; gap: 22px; padding: 26px 16px 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .svc-detail { grid-template-columns: 1fr 300px; gap: 28px; } }
.svc-about { margin-bottom: 20px; }
.svc-about h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.svc-about p { color: var(--muted); line-height: 1.65; margin: 0; }

.svc-form { padding: 22px; }
.svc-form-title { font-family: var(--font-display); font-size: 21px; margin: 0 0 4px; }
.svc-form-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.svc-fieldset { border: none; padding: 0; margin: 0 0 22px; }
.svc-fieldset legend {
  padding: 0; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--g-600);
}
/* Fields are full width unless flagged half, which pairs them up on wide screens */
.svc-form .form-row > .form-group { flex: 1 1 100%; }
@media (min-width: 640px) { .svc-form .form-row > .form-group.is-half { flex: 1 1 calc(50% - 7px); } }

.svc-choices { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .svc-choices { grid-template-columns: repeat(2, 1fr); } }
.svc-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 14px; line-height: 1.35;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.svc-choice:hover { border-color: var(--g-300); background: var(--g-50); }
.svc-choice input { width: auto; flex: 0 0 auto; margin: 0; }
.svc-choice:has(input:checked) { border-color: var(--g-500); background: var(--g-50); font-weight: 600; }
.svc-form-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }

.svc-side-card { margin-bottom: 16px; }
.svc-side-card h3 { font-size: 16px; margin: 0 0 14px; }
.svc-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.svc-benefits li { display: flex; gap: 12px; align-items: flex-start; }
.svc-benefits .ic {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--r-sm); background: var(--g-50); color: var(--g-500);
}
.svc-benefits .ic svg { width: 19px; height: 19px; }
.svc-benefits li > span:last-child { font-size: 13px; color: var(--muted); line-height: 1.45; }
.svc-benefits strong { display: block; font-size: 14px; color: var(--ink); }

.svc-side-links { display: flex; flex-direction: column; gap: 2px; }
.svc-side-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin: 0 -4px;
  border-radius: var(--r-sm); font-size: 14px; color: var(--ink);
}
.svc-side-links a:hover { background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-700)); }
.svc-side-links .ic { display: flex; width: 20px; color: var(--tone, var(--g-500)); }
.svc-side-links .ic svg { width: 20px; height: 20px; }

/* Booking confirmation */
.svc-booked { max-width: 520px; margin: 0 auto; text-align: center; }
.svc-booked-tick {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--g-50); color: var(--g-500);
  font-size: 32px; font-weight: 700;
}
.svc-booked h1 { font-family: var(--font-display); font-size: clamp(24px, 5vw, 32px); margin: 0 0 8px; }
.svc-booked-sub { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.svc-booked-code {
  background: var(--g-50); border: 1px dashed var(--g-200);
  border-radius: var(--r-md); padding: 15px; margin-bottom: 22px;
}
.svc-booked-code span { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.svc-booked-code strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--g-700); margin-top: 4px; }
.svc-booked .reg-next { text-align: left; }
.svc-booked-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* Booking workflow badges */
.badge-contacted { background: #e8f0fc; color: var(--blue-500); }
.badge-scheduled { background: #eee7fb; color: #6535b8; }
.badge-in_progress { background: var(--amber-50); color: #96650d; }
.badge-new { background: var(--g-50); color: var(--g-600); font-weight: 700; }

/* -------------------------------------------- 19 Local Market (classifieds) */
/* Property-portal styling: photographic hero with a floating search bar,
   a stats band, and cards that put the badge on the photo with a bordered
   spec strip below — deliberately unlike the Bazaar's shop grid. */

.lm-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--g-700) 0%, var(--g-900) 100%); }
.lm-hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
}
/* Scrim: vertical on phones so copy never sits on a bright patch. */
.lm-hero.has-photo .lm-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 38, 22, .82) 0%, rgba(9, 38, 22, .68) 55%, rgba(9, 38, 22, .88) 100%);
}
@media (min-width: 900px) {
  .lm-hero.has-photo .lm-hero-photo::after {
    background: linear-gradient(100deg, rgba(9, 38, 22, .92) 0%, rgba(9, 38, 22, .72) 52%, rgba(9, 38, 22, .5) 100%);
  }
}
.lm-hero-inner { position: relative; z-index: 2; padding: 44px 16px 48px; text-align: center; }
@media (min-width: 900px) { .lm-hero-inner { padding: 68px 16px 72px; } }

.lm-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .84);
  margin-bottom: 14px;
}
.lm-hero-eyebrow em {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--g-400); color: #fff; padding: 3px 9px; border-radius: var(--r-pill);
}
.lm-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 6.4vw, 52px); line-height: 1.08;
  margin: 0 0 12px; color: rgba(255, 255, 255, .92);
}
.lm-hero h1 strong { color: #fff; font-weight: 800; }
.lm-hero > .container > p { color: rgba(255, 255, 255, .8); max-width: 560px; margin: 0 auto 26px; font-size: 15.5px; }

/* Floating search bar */
.lm-searchbar {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 860px; margin: 0 auto;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-xl); padding: 10px;
  backdrop-filter: blur(6px);
}
@media (min-width: 780px) {
  .lm-searchbar { flex-direction: row; align-items: center; border-radius: var(--r-pill); padding: 8px 8px 8px 18px; }
}
.lm-searchtabs { display: flex; gap: 4px; justify-content: center; }
@media (min-width: 780px) { .lm-searchtabs { justify-content: flex-start; flex: 0 0 auto; } }
.lm-searchtabs label {
  position: relative; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.lm-searchtabs label input { position: absolute; opacity: 0; pointer-events: none; }
.lm-searchtabs label:has(input:checked) { background: rgba(255, 255, 255, .2); color: #fff; }

.lm-searchfield { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.lm-searchfield .ic { position: absolute; left: 14px; display: flex; color: var(--muted); pointer-events: none; }
.lm-searchfield .ic svg { width: 18px; height: 18px; }
.lm-searchfield input {
  width: 100%; padding: 13px 16px 13px 42px;
  border: none; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-size: 15px; font-family: inherit;
}
.lm-searchfield input:focus { outline: 2px solid var(--g-400); outline-offset: 1px; }
.lm-searchselect {
  width: 100%; padding: 13px 16px; border: none; border-radius: var(--r-pill);
  background: #fff; font-size: 14.5px; color: var(--ink);
}
@media (min-width: 780px) { .lm-searchselect { width: auto; max-width: 190px; } }
.lm-searchgo {
  padding: 13px 30px; border: none; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease);
}
.lm-searchgo:hover { background: var(--g-600); }

.lm-hero-actions { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.lm-post-btn { background: var(--amber-400); color: #3a2607; border-radius: var(--r-pill); }
.lm-post-btn:hover { background: #f5bc55; box-shadow: 0 10px 26px rgba(239, 171, 52, .3); }
.lm-hero-link { color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
.lm-hero-link:hover { color: var(--amber-400); }

/* Stats band */
.lm-stats { background: #fff; padding: 40px 0 34px; }
.lm-stats-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 760px) { .lm-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.lm-stats-grid .n {
  display: block; font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 34px); font-weight: 700; color: var(--ink); line-height: 1.1;
}
.lm-stats-grid .l { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Category strip */
.lm-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 22px 16px 6px; }
.lm-cats::-webkit-scrollbar { display: none; }
.lm-cats a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.lm-cats a:hover { border-color: var(--tone, var(--g-300)); background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-700)); }
.lm-cats a.active { background: var(--g-500); border-color: var(--g-500); color: #fff; }
.lm-cats .ic { display: flex; width: 18px; color: var(--tone, var(--g-500)); }
.lm-cats a.active .ic { color: #fff; }
.lm-cats .ic svg { width: 18px; height: 18px; }
.lm-cats em { font-style: normal; font-size: 12px; color: var(--muted); }
.lm-cats a.active em { color: rgba(255, 255, 255, .8); }

/* Layout */
.lm-layout { display: grid; gap: 20px; padding: 12px 16px 40px; grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .lm-layout { grid-template-columns: 232px 1fr; gap: 26px; align-items: start; }
  .lm-filters { position: sticky; top: 84px; }
}
.lm-results { order: 1; }
.lm-filters { order: 2; }
@media (min-width: 940px) { .lm-results, .lm-filters { order: 0; } }

.lm-filter-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sh-xs);
}
.lm-filter-block h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lm-price-range { display: flex; align-items: center; gap: 8px; }
.lm-price-range input { width: 100%; padding: 9px 11px; }
.lm-price-range span { font-size: 13px; color: var(--muted); }

.lm-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 14.5px; color: var(--muted);
}
.lm-sort { display: flex; align-items: center; gap: 8px; }
.lm-sort label { font-size: 13.5px; }
.lm-sort select { width: auto; padding: 8px 12px; font-size: 14px; }

/* ---- Ad card: badge on the photo, spec strip, location + View ---- */
.lm-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .lm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .lm-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.lm-card, .lm-wide {
  display: flex; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.lm-card { flex-direction: column; }
.lm-card:hover, .lm-wide:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-200); }
.lm-card.is-sold, .lm-wide.is-sold { opacity: .78; }

.lm-card-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 11; background: var(--surface); overflow: hidden;
}
.lm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.lm-card:hover .lm-card-media img { transform: scale(1.04); }
.lm-card-ph { display: block; width: 34%; color: var(--g-300); }
.lm-card-ph svg { width: 100%; height: auto; }

/* Status pill sitting on the photo, as in the reference */
.lm-tag {
  position: absolute; left: 10px; bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--amber-50); color: #96650d;
}
.lm-tag.is-free { background: var(--g-50); color: var(--g-600); }
.lm-tag.is-sold { background: rgba(20, 32, 26, .84); color: #fff; }
.lm-tag.inline { position: static; display: inline-block; margin-top: 5px; }
.lm-tag-feat {
  position: absolute; right: 10px; top: 10px;
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-sm);
  background: var(--g-500); color: #fff;
}

.lm-card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; flex: 1; }
.lm-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lm-card-title {
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lm-card-title:hover { color: var(--g-600); }
.lm-card-price {
  flex: 0 0 auto; font-family: var(--font-display);
  font-size: 17px; font-weight: 700; color: var(--blue-500); white-space: nowrap;
}
.lm-card-price em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }

/* Bordered spec strip with dividers */
.lm-specs {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.lm-specs span {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  border-right: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lm-specs span:last-child { border-right: none; }
.lm-specs svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--g-500); }

.lm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.lm-loc {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-loc svg { width: 14px; height: 14px; flex: 0 0 14px; }
.lm-view {
  flex: 0 0 auto; padding: 7px 18px; border-radius: var(--r-pill);
  background: var(--g-500); color: #fff; font-size: 12.5px; font-weight: 700;
}
.lm-view:hover { background: var(--g-600); color: #fff; }

/* ---- Wide featured card: photo left, details right ---- */
.lm-wide-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lm-wide-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
/* Stacked on small phones — a 40% photo beside text is too cramped to read. */
.lm-wide { flex-direction: column; }
@media (min-width: 520px) { .lm-wide { flex-direction: row; } }

.lm-wide-media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); overflow: hidden;
  aspect-ratio: 16 / 10;
}
@media (min-width: 520px) {
  .lm-wide-media {
    flex: 0 0 40%; max-width: 40%;
    /* No aspect ratio once side-by-side: the photo column stretches to match
       the body, but needs a floor so a short ad doesn't collapse it. */
    aspect-ratio: auto; min-height: 168px;
  }
}
.lm-wide-media img { width: 100%; height: 100%; object-fit: cover; }
.lm-wide-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.lm-wide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lm-wide-price {
  flex: 0 0 auto; font-family: var(--font-display);
  font-size: 19px; font-weight: 700; color: var(--blue-500); white-space: nowrap;
}
.lm-wide-price em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }

.lm-cta {
  background: linear-gradient(150deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff; text-align: center; padding: 44px 0;
}
.lm-cta h2 { font-family: var(--font-display); font-size: clamp(21px, 4.2vw, 30px); margin: 0 0 8px; color: #fff; }
.lm-cta p { color: rgba(255, 255, 255, .84); margin: 0 auto 20px; max-width: 520px; }
.lm-cta .btn { background: var(--amber-400); color: #3a2607; }
.lm-cta .btn:hover { background: #f5bc55; }

/* ---- Ad detail: gallery + description left, sticky price/seller right ---- */
.lm-crumbs { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px; font-size: 13.5px; color: var(--muted); }
.lm-crumbs a { color: var(--muted); }
.lm-crumbs a:hover { color: var(--g-600); }
.lm-crumbs strong { color: var(--ink); font-weight: 600; }

.lm-detail { display: grid; gap: 20px; padding: 0 16px 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .lm-detail { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } }
.lm-detail-main { min-width: 0; }

/* Gallery. Photos are user-supplied and any shape, so the frame letterboxes
   on a soft neutral rather than cropping someone's item out of the picture. */
.lm-gallery { margin-bottom: 16px; }
.lm-gallery-main {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(160deg, #eef1ee, #e3e8e4);
  border: 1px solid var(--line); border-radius: var(--r-xl);
}
.lm-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.lm-gallery-empty { flex-direction: column; gap: 10px; color: var(--g-300); }
.lm-gallery-empty svg { width: 74px; height: 74px; }
.lm-gallery-empty span { font-size: 13.5px; color: var(--muted); }

.lm-photo-count {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20, 32, 26, .72); color: #fff;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
}
.lm-photo-count svg { width: 14px; height: 14px; }
.lm-sold-banner {
  position: absolute; top: 14px; right: 14px;
  background: rgba(20, 32, 26, .86); color: #fff;
  padding: 7px 16px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px;
}

.lm-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
.lm-thumbs::-webkit-scrollbar { display: none; }
.lm-thumb {
  flex: 0 0 auto; width: 74px; height: 74px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; cursor: pointer;
  transition: border-color .15s var(--ease);
}
.lm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lm-thumb:hover { border-color: var(--g-300); }
.lm-thumb.is-active { border-color: var(--g-500); }

/* Roomier version of the card spec strip, with a label above each value */
.lm-specs-lg { margin-bottom: 16px; background: #fff; }
.lm-specs-lg span {
  flex-direction: column; gap: 3px; padding: 13px 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.lm-specs-lg em {
  font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.lm-specs-lg svg { width: 18px; height: 18px; margin-bottom: 2px; }

.lm-desc { margin-bottom: 16px; }
.lm-desc h2 { font-size: 17px; margin: 0 0 10px; }
.lm-desc-body { color: var(--muted); line-height: 1.7; margin: 0; }
.lm-desc-meta {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.lm-desc-meta strong { color: var(--ink); font-weight: 600; }
.lm-report-link { margin-left: auto; color: var(--muted); }
.lm-report-link:hover { color: var(--danger); }
.lm-report-link:hover { color: var(--danger); }

.lm-report summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.lm-report summary:hover { color: var(--danger); }
.lm-report form { margin-top: 12px; }
.lm-report .form-row > .form-group { flex: 1 1 100%; }
@media (min-width: 620px) { .lm-report .form-row > .form-group.is-half { flex: 1 1 calc(50% - 7px); } }

/* ---- Sticky buy/contact card ---- */
@media (min-width: 980px) { .lm-detail-side { position: sticky; top: 84px; } }

.lm-buy-card { margin-bottom: 16px; }
.lm-buy-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lm-buy-price .now { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.lm-buy-price .now.ask { font-size: 20px; color: var(--muted); }
.lm-buy-price .tag {
  font-size: 11.5px; font-weight: 700; color: #96650d;
  background: var(--amber-50); padding: 4px 10px; border-radius: var(--r-pill);
}
.lm-buy-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; color: var(--ink); font-family: var(--font-body); }
.lm-buy-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lm-buy-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lm-buy-meta svg { width: 14px; height: 14px; }
.lm-buy-rule { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.lm-buy-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }

.lm-seller { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.lm-seller-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  background: var(--g-500); color: #fff;
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
.lm-seller strong { display: block; font-size: 15px; }
.lm-seller-verified { font-size: 12.5px; color: var(--g-600); font-weight: 600; }
.lm-seller-sub { font-size: 12.5px; color: var(--muted); }

.lm-buy-card .btn { margin-bottom: 8px; }
.lm-buy-card .btn svg { width: 17px; height: 17px; }
.lm-phone { margin-top: 2px; }
.lm-phone-num {
  display: block; text-align: center; font-family: var(--font-display);
  font-size: 23px; font-weight: 700; color: var(--g-700); letter-spacing: .02em;
  background: var(--g-50); border: 1px dashed var(--g-200);
  border-radius: var(--r-md); padding: 13px; margin-bottom: 8px;
}
.lm-phone-num:hover { background: var(--g-100); color: var(--g-800); }
.lm-wa { background: #25a366; }
.lm-wa:hover { background: #1e8b55; box-shadow: 0 10px 26px rgba(37, 163, 102, .26); }
.lm-save.is-on { border-color: var(--amber-400); color: #96650d; background: var(--amber-50); }

.lm-safety h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 10px; }
.lm-safety h3 svg { width: 18px; height: 18px; color: var(--g-500); }
.lm-safety ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

/* Post-an-ad form */
.lm-post { max-width: 760px; }
.lm-back { display: inline-block; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.lm-back:hover { color: var(--g-600); }
.lm-post-head h1 { font-family: var(--font-display); font-size: clamp(24px, 4.6vw, 32px); margin: 0 0 6px; }
.lm-post-head p { color: var(--muted); margin: 0 0 20px; }
.lm-post-form { padding: 22px; }
.lm-fieldset { border: none; padding: 0; margin: 0 0 24px; }
.lm-fieldset legend {
  padding: 0; margin-bottom: 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--g-600);
}
.lm-post-form .form-row > .form-group { flex: 1 1 100%; }
@media (min-width: 620px) { .lm-post-form .form-row > .form-group.is-half { flex: 1 1 calc(50% - 7px); } }
.lm-check {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  color: var(--muted); line-height: 1.45; padding: 12px;
  background: var(--surface); border-radius: var(--r-md); cursor: pointer;
}
.lm-check input { width: auto; flex: 0 0 auto; margin-top: 2px; }
.lm-post-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }

.lm-existing-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lm-existing-photo { position: relative; width: 86px; height: 86px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.lm-existing-photo img { width: 100%; height: 100%; object-fit: cover; }
.lm-photo-x {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
  background: rgba(20, 32, 26, .78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.lm-photo-x:hover { background: var(--danger); }

/* My ads */
.lm-page-title { font-family: var(--font-display); font-size: clamp(24px, 4.6vw, 32px); margin: 0; }
.lm-myads { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.lm-myad {
  display: flex; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-xs);
}
.lm-myad-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; flex: 0 0 92px;
  border-radius: var(--r-md); background: var(--surface); overflow: hidden; color: var(--g-300);
}
.lm-myad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lm-myad-thumb span { display: block; width: 42%; }
.lm-myad-body { flex: 1; min-width: 0; }
.lm-myad-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.lm-myad-title { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.lm-myad-title:hover { color: var(--g-600); }
.lm-myad-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.lm-myad-reject { font-size: 13px; color: var(--danger); background: var(--danger-bg); padding: 7px 10px; border-radius: var(--r-sm); margin-top: 8px; }
.lm-myad-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.lm-myad-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Admin helpers */
.admin-photo-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.admin-photo-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.admin-icon-chip {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-500));
}
.admin-icon-chip svg { width: 20px; height: 20px; }

/* Listing workflow badges */
.badge-removed { background: var(--danger-bg); color: var(--danger); }
.badge-expired { background: var(--surface); color: var(--muted); }
.badge-sold { background: #eee7fb; color: #6535b8; }

/* ============================================== 20 Panchayat Store directory */
/* Public "find your store" flow: districts -> panchayats (by block) -> sign-up. */

.ps-hero {
  background:
    radial-gradient(80% 110% at 92% 0%, rgba(239, 171, 52, .2) 0%, transparent 58%),
    linear-gradient(150deg, var(--g-600) 0%, var(--g-900) 100%);
  color: #fff;
  padding: 40px 0 44px;
}
.ps-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-400); margin-bottom: 10px;
}
.ps-hero h1 { color: #fff; font-size: clamp(26px, 5vw, 40px); margin: 0 0 12px; max-width: 16ch; }
.ps-hero p { color: rgba(255, 255, 255, .8); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 60ch; }

.ps-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ps-hero-stats span {
  display: flex; align-items: baseline; gap: 7px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-size: 13px; color: rgba(255, 255, 255, .78);
}
.ps-hero-stats strong { font-family: var(--font-display); font-size: 19px; color: #fff; }

/* A left-aligned section header has to lose the auto centring too, or it lands
   in the middle of the page reading as neither centred nor aligned. */
.section-header.is-left { text-align: left; margin-left: 0; }

/* --- Step 1: districts --- */
.ps-district-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 600px) { .ps-district-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .ps-district-grid { grid-template-columns: repeat(3, 1fr); } }

.ps-district {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.ps-district:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--tone, var(--g-300)); }
.ps-district-code {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--r-md);
  background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-600));
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.ps-district-body { flex: 1; min-width: 0; }
.ps-district-body strong { display: block; font-size: 17px; color: var(--ink); }
.ps-district-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ps-district-go { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--tone, var(--g-600)); white-space: nowrap; }
@media (max-width: 420px) { .ps-district-go { display: none; } }

.ps-soon { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.ps-soon h3 { margin: 0 0 4px; font-size: 17px; }
.ps-soon p { font-size: 14px; margin: 0 0 12px; }
.ps-soon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-soon-chip {
  font-size: 13px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-pill); padding: 6px 14px;
}

.ps-how { background: var(--surface-2); border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 68px) 0; }

/* --- Step 2: panchayats in one district --- */
.ps-district-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.ps-district-head h1 { font-size: clamp(22px, 4vw, 32px); margin: 8px 0 6px; }
.ps-district-head p { font-size: 14px; margin: 0; }

.ps-filter { position: relative; flex: 1 1 260px; max-width: 340px; }
.ps-filter-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.ps-filter-ic svg { width: 17px; height: 17px; }
.ps-filter input {
  width: 100%; padding: 11px 14px 11px 40px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-2); font-size: 14.5px; color: var(--ink);
}
.ps-filter input:focus { outline: none; border-color: var(--g-400); box-shadow: 0 0 0 3px var(--g-50); }

.ps-block + .ps-block { margin-top: 30px; }
.ps-block-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ps-block-head span { font-family: var(--font-display); color: var(--ink); }
.ps-block-head em { font-style: normal; font-size: 12.5px; color: var(--muted); font-weight: 500; }

.ps-pan-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ps-pan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ps-pan-grid { grid-template-columns: repeat(3, 1fr); } }

.ps-pan {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px;
  box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.ps-pan:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--g-300); }
.ps-pan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ps-pan-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--g-50); color: var(--g-600);
}
.ps-pan-ic svg { width: 21px; height: 21px; }
.ps-pan-code {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); background: var(--surface);
  border-radius: var(--r-pill); padding: 5px 10px;
}
.ps-pan-name { font-family: var(--font-display); font-size: 19px; color: var(--ink); line-height: 1.25; }
.ps-pan-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ps-pan-addr {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.45;
}
.ps-pan-addr svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

.ps-pan-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* auto keeps footers on one line across a row when addresses wrap unevenly;
     the padding is the minimum gap when a card's content fills it exactly */
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.ps-pan-members { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.ps-pan-members svg { width: 15px; height: 15px; }
.ps-pan-go { font-size: 13px; font-weight: 600; color: var(--g-600); white-space: nowrap; }
.ps-pan:hover .ps-pan-go { color: var(--g-500); }

.ps-empty-filter { text-align: center; color: var(--muted); font-size: 14.5px; padding: 26px 0; }

.ps-help {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 34px;
  background: var(--g-50); border: 1px solid var(--g-100);
  border-radius: var(--r-lg); padding: 20px;
}
.ps-help strong { display: block; font-size: 15.5px; color: var(--g-800); }
.ps-help span { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; max-width: 62ch; }

/* --- Step 3: the store carried into the sign-up form --- */
.reg-store-chosen {
  display: flex; align-items: center; gap: 13px;
  background: var(--g-50); border: 1px solid var(--g-200);
  border-radius: var(--r-md); padding: 14px;
}
.reg-store-chosen .ic {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--r-sm); background: var(--g-500); color: #fff;
}
.reg-store-chosen .ic svg { width: 22px; height: 22px; }
.reg-store-chosen .txt { flex: 1; min-width: 0; }
.reg-store-chosen strong { display: block; font-size: 16px; color: var(--g-800); }
.reg-store-chosen span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.reg-store-change { font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 460px) {
  .reg-store-chosen { flex-wrap: wrap; }
  .reg-store-change { width: 100%; }
}

/* ================================================================ 21 Sathi Gold */
/* Gold gets its own warm palette — the brand green would fight the metal. */

.gd-hero {
  background:
    radial-gradient(70% 100% at 88% 8%, rgba(239, 171, 52, .28) 0%, transparent 60%),
    linear-gradient(155deg, #2a2117 0%, #14100b 100%);
  color: #fff;
  padding: 40px 0 46px;
}
.gd-hero-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .gd-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; } }

.gd-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-300); margin-bottom: 10px;
}
.gd-hero h1 { color: #fff; font-size: clamp(26px, 5vw, 40px); margin: 0 0 12px; max-width: 16ch; }
.gd-hero-copy > p { color: rgba(255, 255, 255, .76); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 54ch; }

.gd-rate-band { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gd-rate {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(247, 207, 122, .3);
  border-radius: var(--r-md); padding: 12px 18px; min-width: 150px;
}
.gd-rate-label { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); letter-spacing: .04em; }
.gd-rate strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--amber-300); margin-top: 2px; }
.gd-rate-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgba(255, 255, 255, .55); margin: 12px 0 0;
}
.gd-rate-note svg { width: 15px; height: 15px; }

/* Hero purchase card — the 1 gm coin */
.gd-hero-card {
  position: relative;
  background: var(--surface-2); border-radius: var(--r-xl);
  padding: 22px; box-shadow: var(--sh-lg); color: var(--ink);
}
.gd-hero-badge {
  position: absolute; top: -11px; left: 22px;
  background: var(--amber-500); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.gd-hero-media {
  display: flex; align-items: center; justify-content: center;
  height: 150px; margin-bottom: 16px;
  background: linear-gradient(140deg, #fdf3dd 0%, #f6e3b5 100%);
  border-radius: var(--r-lg); overflow: hidden;
}
.gd-hero-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.gd-glyph {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-family: var(--font-display); font-weight: 700; color: var(--gd-metal);
  font-size: 34px;
}
.gd-glyph em { font-style: normal; font-size: .45em; }
.gd-glyph.is-xs { font-size: 21px; }
.gd-glyph.is-md { font-size: 54px; }
.gd-glyph.is-lg { font-size: 76px; }

/* Ornaments draw their shape instead — a rail of pendants and rings has to be
   readable at a glance, and "1g" on every tile is not. */
.gd-shape {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--gd-metal);
}
.gd-shape svg { width: 54px; height: 54px; }
.gd-shape em {
  font-style: normal; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: .02em;
}
.gd-shape.is-xs svg { width: 30px; height: 30px; }
.gd-shape.is-xs em { display: none; }
.gd-shape.is-md svg { width: 78px; height: 78px; }
.gd-shape.is-md em { font-size: 16px; }
.gd-shape.is-lg svg { width: 126px; height: 126px; stroke-width: 1.1; }
.gd-shape.is-lg em { font-size: 20px; }
.gd-hero-card h2 { font-size: 21px; margin: 0 0 3px; }
.gd-hero-spec { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.gd-hero-more { display: block; text-align: center; font-size: 13.5px; margin-top: 10px; }

/* Shared price breakdown — hero, detail and checkout all use it */
.gd-breakdown { margin: 0 0 16px; padding: 0; }
.gd-breakdown div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; }
.gd-breakdown div + div { border-top: 1px solid var(--line-soft); }
.gd-breakdown dt { font-size: 13.5px; color: var(--muted); margin: 0; }
.gd-breakdown dd { font-size: 14px; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-breakdown .is-total { border-top: 2px solid var(--line); margin-top: 3px; padding-top: 11px; }
.gd-breakdown .is-total dt { font-size: 15px; font-weight: 700; color: var(--ink); }
.gd-breakdown .is-total dd { font-family: var(--font-display); font-size: 21px; color: var(--gd-metal); }

.btn.gd-buy { background: var(--gd-cta); border-color: var(--gd-cta); color: #fff; }
.btn.gd-buy:hover { background: var(--gd-cta-dark); border-color: var(--gd-cta-dark); }
.btn.is-disabled { pointer-events: none; opacity: .6; }

/* Denomination grid */
.gd-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .gd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .gd-grid { grid-template-columns: repeat(4, 1fr); } }

.gd-card {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.gd-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--amber-300); }
.gd-card-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; background: linear-gradient(140deg, #fdf3dd 0%, #f6e3b5 100%);
}
.gd-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.gd-card-purity {
  position: absolute; top: 8px; right: 8px;
  background: rgba(20, 16, 11, .78); color: var(--amber-300);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: var(--r-pill);
}
.gd-card-body { flex: 1; display: flex; flex-direction: column; padding: 12px 13px 13px; }
.gd-card-name { font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.gd-card-spec { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.gd-card-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 11px;
}
.gd-card-price { font-family: var(--font-display); font-size: 18px; color: var(--gd-metal); }
.gd-card-go { font-size: 12.5px; font-weight: 600; color: var(--gd-cta); white-space: nowrap; }
.gd-card-out { font-size: 12px; color: var(--muted); }

/* Trust band + steps */
.gd-trust { background: var(--surface-2); border-block: 1px solid var(--line); padding: clamp(40px, 6vw, 68px) 0; }
.gd-trust-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gd-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gd-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.gd-trust-grid > div { text-align: center; }
.gd-trust-grid .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--amber-50); color: #b5760a; margin-bottom: 10px;
}
.gd-trust-grid .ic svg { width: 24px; height: 24px; }
.gd-trust-grid strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.gd-trust-grid span:last-child { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.gd-steps .n { background: var(--amber-500); }

/* Item detail */
.gd-detail { display: grid; gap: 26px; grid-template-columns: 1fr; padding-bottom: 20px; }
@media (min-width: 880px) { .gd-detail { grid-template-columns: .85fr 1.15fr; gap: 38px; } }
.gd-detail-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1/1; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(140deg, #fdf3dd 0%, #f2dca6 100%);
}
.gd-detail-media img { width: 100%; height: 100%; object-fit: contain; padding: 26px; }
.gd-detail-purity {
  position: absolute; top: 14px; right: 14px;
  background: rgba(20, 16, 11, .8); color: var(--amber-300);
  font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill);
}
.gd-detail-body h1 { font-size: clamp(22px, 4vw, 32px); margin: 0 0 6px; }
.gd-detail-spec { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.gd-detail-desc { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.gd-price-card { padding: 18px; }
.gd-price-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.gd-price-head span { font-size: 13.5px; color: var(--muted); }
.gd-price-head strong { font-family: var(--font-display); font-size: 27px; color: var(--gd-metal); }
.gd-price-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px;
}
.gd-price-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.gd-stock-low { font-size: 12.5px; color: var(--muted); text-align: center; margin: 9px 0 0; }

.gd-assure { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.gd-assure li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }
.gd-assure svg { width: 18px; height: 18px; color: #b5760a; flex: 0 0 auto; }

/* Buy page */
.gd-buy-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .gd-buy-grid { grid-template-columns: 1.15fr .85fr; gap: 26px; } }
.gd-buy-form, .gd-buy-summary { padding: 20px; }
@media (min-width: 880px) { .gd-buy-summary { position: sticky; top: calc(var(--header-h) + 16px); } }

.gd-pay { border: 0; padding: 0; margin: 0 0 18px; }
.gd-pay legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 9px; }
.gd-pay-opt {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px; cursor: pointer;
}
.gd-pay-opt + .gd-pay-opt { margin-top: 9px; }
.gd-pay-opt:has(input:checked) { border-color: var(--amber-400); background: var(--amber-50); }
.gd-pay-opt input { margin-top: 3px; }
.gd-pay-opt strong { display: block; font-size: 14.5px; }
.gd-pay-opt span { font-size: 13px; color: var(--muted); }
.gd-buy-terms { font-size: 12.5px; color: var(--muted); text-align: center; margin: 11px 0 0; line-height: 1.5; }

.gd-buy-item { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.gd-buy-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(140deg, #fdf3dd 0%, #f6e3b5 100%);
}
.gd-buy-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gd-buy-thumb .gd-glyph { font-size: 21px; }
.gd-buy-item strong { display: block; font-size: 15px; }
.gd-buy-item span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.gd-buy-family {
  background: var(--surface); border-radius: var(--r-md); padding: 12px; font-size: 13px;
}
.gd-buy-family span { display: block; color: var(--muted); font-size: 12.5px; }
.gd-buy-family strong { display: block; font-size: 14.5px; color: var(--ink); margin: 2px 0; }

.gd-check { display: flex; align-items: center; gap: 9px; font-size: 14px; padding-top: 26px; }

/* Admin rate desk */
.gr-current { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 640px) { .gr-current { grid-template-columns: repeat(2, 1fr); } }
.gr-card { padding: 18px; }
.gr-card.is-missing { border-color: var(--danger); }
.gr-card-purity { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.gr-card-rate { display: block; font-family: var(--font-display); font-size: 30px; color: var(--gd-metal); margin: 5px 0 3px; }
.gr-card-rate em { font-style: normal; font-size: 15px; color: var(--muted); font-family: var(--font-body); }
.gr-card-move { display: inline-block; font-size: 12.5px; font-weight: 600; }
.gr-card-move.is-up { color: var(--success); }
.gr-card-move.is-down { color: var(--danger); }
.gr-card-when { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Gold rails — reuse .carousel/.scroll-row, size the cards for a scroll row */
.gd-rail + .gd-rail { margin-top: clamp(34px, 5vw, 52px); }
.gd-rail .bz-rail-head { align-items: flex-start; }
.gd-rail-blurb { font-size: 13.5px; color: var(--muted); margin: 5px 0 0; max-width: 52ch; }
.gd-rail-count {
  flex: 0 0 auto; font-size: 12.5px; color: var(--muted);
  background: var(--surface); border-radius: var(--r-pill); padding: 6px 13px; white-space: nowrap;
}
.gd-rail .carousel-btn { display: none; }
@media (min-width: 900px) { .gd-rail .carousel-btn { display: flex; top: 40%; } }

.gd-rail-row { display: flex; gap: 14px; }
.gd-rail-row > .gd-card {
  flex: 0 0 68%; max-width: 250px; scroll-snap-align: start;
}
@media (min-width: 560px) { .gd-rail-row > .gd-card { flex-basis: 42%; } }
@media (min-width: 900px) { .gd-rail-row > .gd-card { flex-basis: 24%; } }
@media (min-width: 1180px) { .gd-rail-row > .gd-card { flex-basis: 19.5%; } }

/* Ornament cards read better on a taller crop than a coin does */
.gd-card-media { aspect-ratio: 1/1; }

/* =========================================================== 22 More for You */
/* Rewards hub: PV gift tiers, the monthly draw, and EMI plans. */

.rw-hero {
  background:
    radial-gradient(80% 110% at 12% 0%, rgba(194, 24, 91, .22) 0%, transparent 58%),
    linear-gradient(150deg, var(--g-700) 0%, var(--g-900) 100%);
  color: #fff;
  padding: 40px 0 44px;
}
.rw-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber-400); margin-bottom: 10px;
}
.rw-hero h1 { color: #fff; font-size: clamp(26px, 5vw, 40px); margin: 0 0 12px; max-width: 18ch; }
.rw-hero > .container > p { color: rgba(255, 255, 255, .8); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 62ch; }

.rw-hero-me {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-top: 24px; padding: 14px 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--r-lg); max-width: 520px;
}
.rw-hero-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: var(--amber-400); color: var(--g-900);
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.rw-hero-me > div { flex: 1; min-width: 0; }
.rw-hero-me strong { display: block; color: #fff; font-size: 15.5px; }
.rw-hero-me span { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
.rw-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* --- PV progress --- */
.rw-progress { padding: 20px; margin-bottom: 22px; }
.rw-progress-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rw-progress-head span { display: block; font-size: 12.5px; color: var(--muted); }
.rw-progress-head strong { display: block; font-family: var(--font-display); font-size: 25px; color: var(--ink); }
.rw-progress-goal { text-align: right; }
.rw-progress-goal strong { font-size: 19px; color: var(--g-600); }
@media (max-width: 480px) { .rw-progress-goal { text-align: left; } }

.rw-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.rw-bar span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--g-400) 0%, var(--amber-400) 100%);
  transition: width .5s var(--ease);
}
.rw-progress-note { font-size: 13.5px; color: var(--muted); margin: 11px 0 0; }

/* --- Gift tier ladder --- */
.rw-tiers { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rw-tiers { grid-template-columns: repeat(3, 1fr); } }
.rw-tier {
  text-align: center; padding: 20px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-xs);
  opacity: .75;
}
.rw-tier.is-reached { opacity: 1; border-color: var(--g-300); box-shadow: var(--sh-sm); }
.rw-tier-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; margin-bottom: 10px;
  background: var(--surface); color: var(--muted);
}
.rw-tier.is-reached .rw-tier-badge { background: var(--g-50); color: var(--g-600); }
.rw-tier-badge svg { width: 25px; height: 25px; }
.rw-tier strong { display: block; font-family: var(--font-display); font-size: 19px; }
.rw-tier-need { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.rw-tier-state { display: block; font-size: 12.5px; font-weight: 600; margin-top: 8px; color: var(--muted); }
.rw-tier.is-reached .rw-tier-state { color: var(--g-500); }

/* --- Monthly draw --- */
.rw-lottery {
  background:
    radial-gradient(70% 100% at 85% 10%, rgba(239, 171, 52, .18) 0%, transparent 60%),
    linear-gradient(160deg, #1d1430 0%, #120d1f 100%);
  color: #fff; padding: clamp(40px, 6vw, 68px) 0;
}
.rw-lottery .section-header h2 { color: #fff; }
.rw-lottery .section-header p { color: rgba(255, 255, 255, .74); }
.rw-lottery .section-eyebrow { background: rgba(255, 255, 255, .13); color: var(--amber-300); }

.rw-draw { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .rw-draw { grid-template-columns: 1.1fr .9fr; gap: 26px; } }
.rw-draw-facts, .rw-draw-status {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg); padding: 20px;
}
.rw-draw-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; }
.rw-draw-facts > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.rw-draw-facts span { font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.rw-draw-facts strong { font-size: 14.5px; color: #fff; text-align: right; }
.rw-draw-status p { font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.6; margin: 10px 0 14px; }
.rw-draw-in, .rw-draw-out {
  display: inline-block; font-size: 13px; font-weight: 700;
  border-radius: var(--r-pill); padding: 7px 15px;
}
.rw-draw-in { background: rgba(31, 132, 73, .3); color: #7ee2a8; border: 1px solid rgba(126, 226, 168, .4); }
.rw-draw-out { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .2); }

.rw-winners-head { color: #fff; font-size: 19px; margin: 34px 0 14px; }
.rw-winners + .rw-winners { margin-top: 18px; }
.rw-winners-month {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber-300); margin-bottom: 10px;
}
.rw-winners-none { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.rw-winners-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rw-winners-row { grid-template-columns: repeat(3, 1fr); } }
.rw-winner {
  position: relative; text-align: center; padding: 18px 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
}
.rw-winner-rank {
  position: absolute; top: 10px; left: 12px;
  font-size: 12px; font-weight: 700; color: var(--amber-300);
}
.rw-winner-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 9px;
  background: var(--amber-400); color: #2a2117;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.rw-winner strong { display: block; color: #fff; font-size: 15px; }
.rw-winner-place { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.rw-winner-prize {
  display: inline-block; margin-top: 9px; font-size: 12.5px;
  background: rgba(255, 255, 255, .1); border-radius: var(--r-pill); padding: 5px 12px;
  color: rgba(255, 255, 255, .88);
}

/* --- EMI --- */
.rw-emi-table { margin-bottom: 22px; }
.rw-emi-table td:nth-child(3) strong { color: var(--g-600); font-size: 15.5px; }
.rw-emi-form { padding: 20px; max-width: 760px; }

/* ======================================================= 23 Admin analytics */
/* KPI cards, the shared filter bar, and the dashboard's charts. */

.stat-grid { align-items: stretch; }
@media (min-width: 1100px) { .stat-grid.is-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .stat-grid.is-5 { grid-template-columns: repeat(5, 1fr); } }

/* A KPI that links to its own filtered list — the number should be a way in. */
a.stat-card.is-link { display: block; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
a.stat-card.is-link:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
/* The drill-down arrow sits under the icon, revealed on hover. */
a.stat-card.is-link .stat-icon { transition: transform .16s var(--ease); }
a.stat-card.is-link:hover .stat-icon { transform: translateX(3px); }

.stat-sub { font-size: 11.5px; color: var(--muted); margin-top: auto; padding-top: 9px; }
.stat-delta { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; margin-top: auto; padding-top: 9px; }
.stat-delta.is-up { color: var(--g-500); }
.stat-delta.is-down { color: var(--danger); }
.stat-delta span { color: var(--muted); font-weight: 500; }

/* --- Filter bar ------------------------------------------------------- */
.filter-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; margin: 0 0 18px;
}
.filter-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.filter-search .ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; pointer-events: none;
}
.filter-search .ic svg { width: 16px; height: 16px; }
.filter-search input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink); background: var(--surface-2);
}
.filter-field { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; }
.filter-field > span { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.filter-field select, .filter-field input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink); background: var(--surface-2); min-width: 132px;
}
.filter-form .btn { padding: 9px 18px; }
.filter-clear { font-size: 13px; color: var(--muted); align-self: center; }
.filter-clear:hover { color: var(--danger); }

/* --- Dashboard charts ------------------------------------------------- */
.an-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 1000px) { .an-grid.is-2 { grid-template-columns: 1.6fr 1fr; } }
@media (min-width: 1000px) { .an-grid.is-2-even { grid-template-columns: 1fr 1fr; } }

.an-card {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 18px;
  /* A grid item defaults to min-width:auto and so refuses to shrink below its
     content — one nowrap figure inside was pushing the whole dashboard wider
     than the phone. min-width:0 lets the card shrink and the inner
     .table-wrap scroll instead of the page. */
  min-width: 0;
}
.an-card h3 { margin: 0 0 3px; font-size: 16px; }
.an-card-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }

/* Bar chart drawn with divs — a real chart library for one sparkline would be
   a dependency the rest of this app doesn't have. */
.an-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.an-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.an-bar i {
  display: block; width: 100%; min-height: 2px;
  background: linear-gradient(180deg, var(--g-400) 0%, var(--g-600) 100%);
  border-radius: 3px 3px 0 0; transition: background .16s var(--ease);
}
.an-bar:hover i { background: var(--amber-400); }
/* Tooltips only where there is a real pointer. On a touch screen they can never
   be triggered, and being absolutely positioned + nowrap they widened the
   document past the viewport — an invisible element causing a real sideways
   scroll on every phone. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .an-bar::after {
    content: attr(data-tip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: var(--ink); color: #fff;
    font-size: 11.5px; padding: 5px 9px; border-radius: var(--r-sm);
    opacity: 0; pointer-events: none; transition: opacity .14s var(--ease); margin-bottom: 5px; z-index: 3;
  }
  .an-bar:hover::after { opacity: 1; }
}
.an-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 8px; }

/* Module split rows */
.an-split { display: grid; gap: 14px; }
.an-split-row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.an-split-row strong { font-size: 14.5px; }
.an-split-row em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.an-split-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.an-split-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--tone, var(--g-500)); }

/* Action queue */
.an-queue { display: grid; gap: 8px; }
.an-queue a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13.5px; color: var(--ink);
}
.an-queue a:hover { border-color: var(--tone, var(--g-300)); background: var(--surface); color: var(--ink); }
.an-queue .n {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  min-width: 30px; text-align: center; border-radius: var(--r-pill);
  padding: 2px 9px; background: var(--tone-bg, var(--g-50)); color: var(--tone, var(--g-600));
}
.an-queue a.is-clear { opacity: .55; }
.an-queue a.is-clear .n { background: var(--surface); color: var(--muted); }

/* Ranked lists (top stores, products, vendors) */
.an-rank { display: grid; gap: 2px; }
.an-rank-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.an-rank-row:last-child { border-bottom: 0; }
.an-rank-pos {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.an-rank-row:first-child .an-rank-pos { background: var(--amber-50); color: #b5760a; }
.an-rank-body { flex: 1; min-width: 0; }
.an-rank-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.an-rank-body span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.an-rank-val { font-family: var(--font-display); font-size: 14.5px; color: var(--ink); white-space: nowrap; }

/* Activity feed */
.an-feed { display: grid; gap: 1px; }
.an-feed a { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.an-feed a:last-child { border-bottom: 0; }
.an-feed a:hover { color: var(--ink); background: var(--surface); }
.an-feed-kind {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--tone, var(--g-500));
}
.an-feed-body { flex: 1; min-width: 0; }
.an-feed-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.an-feed-body span { font-size: 12px; color: var(--muted); }
.an-feed-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* Period switcher */
.an-period { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.an-period a {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--muted); background: #fff;
}
.an-period a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.an-period a:hover { color: var(--ink); }

/* Table helpers used across the upgraded list pages */
.table-note { font-size: 12.5px; color: var(--muted); margin: -8px 0 14px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Chart gridlines — four faint rules so a bar's height can be read, not guessed */
.an-chart { position: relative; }
.an-grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to top, var(--line-soft) 0 1px, transparent 1px 25%);
}

/* ---- Admin content primitives -------------------------------------- */
/* Consistent page header: title, one-line explanation, and its actions. */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h2 { margin: 0 0 4px; }
.page-head p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 74ch; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Key/value blocks — replaces <p><strong>Label:</strong> value</p> soup on
   the detail pages, which never aligned and never wrapped predictably. */
.kv { display: grid; gap: 0; }
.kv > div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.kv > div:last-child { border-bottom: 0; }
@media (min-width: 520px) { .kv > div { grid-template-columns: 148px 1fr; gap: 14px; align-items: baseline; } }
.kv dt, .kv .k { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kv dd, .kv .v { margin: 0; font-size: 14px; color: var(--ink); font-weight: 500; word-break: break-word; }
.kv .v strong { font-weight: 700; }

/* Form footer so Save/Cancel read as one committed action, not stray buttons */
.form-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
input:focus, select:focus, textarea:focus { outline: none; }

/* Section label inside a long form */
.form-section {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.form-section:first-child { margin-top: 0; }

/* Row actions stay on one line — wrapping them doubled every row's height and
   pushed the name column so narrow that product titles broke across 3 lines. */
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.row-actions form { display: inline-flex; margin: 0; }
.row-actions .btn { white-space: nowrap; }
/* The action column sizes to its buttons and gives the rest back to content. */
table td:last-child, table th:last-child { width: 1%; white-space: nowrap; }

/* A destructive row action should be reachable, not the loudest thing in the
   row. Ghost until hover, then it commits to red. */
.btn-sm.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger-bg);
  box-shadow: none;
}
.btn-sm.btn-danger:hover {
  background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: none;
}

/* Thumbnails in list tables */
.table-thumb {
  width: 42px; height: 42px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft); display: block;
}

/* --------------------------------------------- 24 Native app (Capacitor) */
/*
   The Android/iOS shells load this same site in a WebView, so these rules ship
   to the web too. Everything that costs nothing on the web (the safe-area
   tokens) is unscoped; everything that would change the website is behind
   html.is-native, which the layouts set before first paint.

   --safe-area-inset-* is injected by Capacitor's SystemBars, which exists
   because Android WebView < 140 reports env(safe-area-inset-*) wrong; env() is
   the fallback, and 0px the fallback for the web.

   These all resolve to 0 on iOS, and that is correct, not a bug: the iOS shell
   runs with contentInset 'automatic', so WKWebView insets the page inside the
   safe area natively and there is nothing left for CSS to do. Measured on an
   iPhone 17: viewport 402x778 out of a 402x874 screen. So everything below is
   effectively Android-only in practice, while staying written in terms of the
   standard properties rather than platform checks.
*/
:root {
  --safe-top:    var(--safe-area-inset-top,    env(safe-area-inset-top,    0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left:   var(--safe-area-inset-left,   env(safe-area-inset-left,   0px));
  --safe-right:  var(--safe-area-inset-right,  env(safe-area-inset-right,  0px));

  /* Height of the bottom tab bar, excluding the safe-area inset it adds under
     itself. Every layout reserves space with this, so the bar can grow without
     hunting down four hard-coded paddings. */
  --tabbar-h: 56px;
}

/* The apps run edge-to-edge — Android 15 forces it and WKWebView has always
   done it — so the page starts underneath the status bar. Rather than inset
   every layout's chrome separately, the body is pushed down and a fixed strip
   paints behind the status bar. */
html.is-native body {
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
html.is-native body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  /* White, because with the website's utility bar hidden in the app it is the
     white .site-header / .shop-topbar that sits directly under the status bar.
     native.js reads this colour back and picks the status-bar glyphs from its
     luminance, so a layout only has to override the colour below. */
  background: #fff;
  /* Above every sticky header (60) and the mobile menu, so nothing scrolls
     over the status bar. */
  z-index: 200;
  pointer-events: none;
}
/* The sign-in screen leads with the green brand panel rather than a white
   header, so its strip matches that instead. */
html.is-native body.auth-body::before { background: var(--g-600); }

/* Sticky chrome is positioned against the viewport, not the padded body, so
   each sticky top has to clear the status bar itself. */
html.is-native .site-header,
html.is-native .shop-topbar,
html.is-native .main-content > .topbar { top: var(--safe-top); }
html.is-native .sidebar {
  top: var(--safe-top);
  height: calc(100vh - var(--safe-top));
}

/* ---- website chrome the app does without -------------------------------- */
/*
   The utility bar (phone, email, socials, Join Us / Member Login) and the tall
   marketing footer are how a *website* sells itself to a first-time visitor.
   Someone who has installed the app has already joined; in a WebView they just
   read as "this is a web page in a box". The bottom tab bar replaces them, and
   everything they linked to — About, Careers, News, Photos, Contact and the
   modules that aren't tabs — is already in the header menu.
*/
html.is-native .utility-bar,
html.is-native .site-footer { display: none; }

/* Bottom: the iOS home indicator and Android gesture bar float over the page.
   On the consumer layouts the tab bar is the last thing on screen and carries
   the inset itself, so the content just has to clear the bar. The admin panel
   has no tab bar, so its content carries the inset directly. */
html.is-native .content-area { padding-bottom: calc(40px + var(--safe-bottom)); }
html.is-native main,
html.is-native .shop-main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); }
html.is-native .auth-shell {
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  min-height: calc(100vh - var(--tabbar-h) - var(--safe-bottom));
}
/* The menu sheet scrolls inside itself and would otherwise put its last few
   links underneath the tab bar. */
html.is-native .mobile-menu { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }

/* Rubber-band scrolling past the end of a page exposes the WebView's own
   background and reads as the app breaking. */
html.is-native, html.is-native body { overscroll-behavior-y: none; }

/* Long-pressing a nav item to get a text-selection handle is a browser
   affordance, not an app one. Body copy stays selectable. */
html.is-native .site-nav,
html.is-native .mobile-menu,
html.is-native .sidebar,
html.is-native .utility-bar,
html.is-native .btn,
html.is-native button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Tap highlight is a grey box the wrong shape on rounded cards; the components
   already have :active states. */
html.is-native a, html.is-native button { -webkit-tap-highlight-color: transparent; }

/* Transient message from native.js — "press back again to exit". */
.native-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  transform: translate(-50%, 12px);
  z-index: 300;
  max-width: min(88vw, 340px);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(10, 44, 26, .94);
  color: #eaf4ee;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.native-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Sits under the status bar strip so it reads as part of the system chrome
   rather than as page content. */
.native-offline {
  position: fixed;
  top: var(--safe-top);
  left: 0; right: 0;
  z-index: 199;
  padding: 7px 14px;
  background: var(--danger, #c0392b);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  transform: translateY(-100%);
  transition: transform .22s ease;
}
.native-offline.is-on { transform: translateY(0); }

/* ---- bottom tab bar ------------------------------------------------------ */
/*
   The app's primary navigation. Ships to the website too (one nav to maintain)
   but only ever displays inside the WebView.
*/
.app-tabbar { display: none; }

html.is-native .app-tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Above sticky headers (60) and the menu sheet, below the status-bar
     strip (200) and the toast (300). */
  z-index: 150;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(150%) blur(12px);
  border-top: 1px solid var(--line);
  /* The bar itself absorbs the home indicator / gesture bar, so its background
     runs to the physical bottom edge while the labels stay clear of it. */
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  box-shadow: 0 -2px 16px rgba(10, 44, 26, .07);
}

.app-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
}
.app-tab svg { width: 22px; height: 22px; display: block; }
.app-tab-ic { position: relative; display: flex; }
.app-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-tab.is-on { color: var(--g-600); }
/* A short rule at the top of the tab rather than a filled pill behind it: the
   icons are line art, and a filled background would fight them. */
.app-tab.is-on::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--g-500);
}
/* Touch has no hover; :active is the only honest feedback here. */
.app-tab:active { background: var(--g-50); }

/* Cart count, so the Bazaar tab can say there is something waiting. */
.app-tab-badge {
  position: absolute;
  top: -5px;
  left: 13px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #fff;
}

/* ---- module strip -------------------------------------------------------- */
/*
   The six modules, pinned under the header on the website. The top menu is the
   corporate one (About, Business, Careers, News, Contact, Gallery), so without
   this the things people come to buy would only exist inside a hover menu that
   does not open on touch.

   The app hides it — it reaches the same six through its bottom tab bar — which
   is also why the labels here are the short names.
*/
.module-strip {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(10, 44, 26, .04);
}
.module-strip-inner {
  display: flex;
  align-items: stretch;
  gap: 6px;
  /* Six chips do not fit across a 390px phone and never will, so the strip
     scrolls rather than wrapping to a second row that pushes the page down. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.module-strip-inner::-webkit-scrollbar { display: none; }

.module-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
}
.module-chip .ic { display: flex; color: var(--tone, var(--g-500)); }
.module-chip .ic svg { width: 18px; height: 18px; }
.module-chip:hover { color: var(--ink); background: var(--surface); }
.module-chip:hover { border-bottom-color: var(--tone, var(--g-500)); }

@media (min-width: 900px) {
  /* Enough room to space them out and centre the row. */
  .module-strip-inner { gap: 4px; justify-content: center; overflow-x: visible; }
  .module-chip { padding: 12px 18px; font-size: 14px; }
}

/* The app has a bottom tab bar for exactly these six. */
html.is-native .module-strip { display: none; }

/* Account, beside search and the cart. It sits here rather than in the app's
   bottom tab bar so all seven of those stay content destinations. */
.header-account {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md); color: var(--ink);
}
.header-account:hover { background: var(--g-50); color: var(--g-600); }
.header-account svg { width: 21px; height: 21px; }

/* Seven tabs, not five. 390px / 7 leaves ~55px a tab, so the label has to give
   up a point of size and the icon a couple of pixels or "Services" wraps. */
html.is-native .app-tabbar .app-tab { font-size: 9.5px; gap: 2px; padding: 0 1px; }
html.is-native .app-tabbar .app-tab svg { width: 20px; height: 20px; }
html.is-native .app-tabbar .app-tab.is-on::before { width: 18px; }

/* ---- the app is not the website ------------------------------------------ */
/*
   In the app the bottom tab bar IS the navigation. The website's own menu —
   Home, About, Business, Careers, News Update, Gallery, Contact — has no place
   there: those pages are reached through the Others tab, and showing a second,
   different menu behind a hamburger just gives the same app two navigations
   that disagree.

   So in the app: no hamburger, no menu sheet. The header keeps only the things
   that act on the current screen (search, cart, account); everything that
   navigates lives in the tab bar.
*/
/* The hamburger stays. It was hidden here on the reasoning that the tab bar is
   the navigation — but the tab bar only carries the seven modules, which left
   About, Business, Careers, News, Gallery and Contact with no route in the app
   at all except the Others page. The sheet carries both menus; the tab bar
   carries the seven you use daily. */

/* The hero carousel stays first. Hoisting the module grid above it did put the
   seven destinations on screen immediately, but it also buried the only
   colourful thing on the page and left the app opening on a wall of white
   cards. Compact tiles (below) get the modules high enough without that. */

/* ---- app home: launcher tiles -------------------------------------------- */
/*
   On the website a module is a card that has to sell itself: a paragraph and a
   call to action. In the app it is a launcher icon — the user already knows
   what Online Bazaar is, they just want to get there. Six of those cards filled
   two and a half screens of white; as tiles they fill half of one, in colour,
   directly under the hero carousel.

   The short label comes from ps_modules()['tab'], because "Panchayat Store"
   does not fit a third of a 390px screen.
*/
.feature-tab { display: none; }

html.is-native .network-section .feature-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

html.is-native .network-section .feature-card {
  /* The module's own tone, so the grid reads as six colours rather than six
     white boxes. Same palette as the icons already used. */
  background: var(--tone-bg, var(--g-50));
  border: 0;
  box-shadow: none;
  border-radius: 18px;
  padding: 15px 6px 12px;
  min-height: 104px;
  justify-content: center;
}
/* Touch has no hover; a press should feel like a press. */
html.is-native .network-section .feature-card:hover { transform: none; box-shadow: none; }
html.is-native .network-section .feature-card:active { transform: scale(.96); }

html.is-native .network-section .feature-card .icon {
  width: 46px; height: 46px;
  margin-bottom: 9px;
  background: rgba(255, 255, 255, .78);
  border-radius: 15px;
}
html.is-native .network-section .feature-card .icon svg { width: 24px; height: 24px; }
html.is-native .network-section .feature-card:hover .icon { transform: none; }

/* The selling copy is what makes these cards tall. */
html.is-native .network-section .feature-card h3,
html.is-native .network-section .feature-card p { display: none; }

html.is-native .network-section .feature-tab {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tone, var(--g-600));
}

/*
   The CTA is not hidden — it is stretched over the whole tile.
   display:none would have made the tile untappable, because the card is a div
   and this anchor is the only link in it.
*/
html.is-native .network-section .feature-card .cta {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
  border-radius: 18px;
}
/* A module still marked "Soon" is a span, not a link — leave it unpressable. */
html.is-native .network-section .feature-card .cta.soon { pointer-events: none; }

/* The section header above the tiles is a website intro: an eyebrow, a heading
   and a line of prose. In the app it is one line above a launcher. */
html.is-native .network-section { padding-block: 18px 4px; }
html.is-native .network-section .section-header { margin-bottom: 14px; text-align: left; }
html.is-native .network-section .section-header p { display: none; }
html.is-native .network-section .section-header h2 { font-size: 19px; margin: 0; }
html.is-native .network-section .section-eyebrow { margin-bottom: 4px; }

/* ---- app home: fit the hero and the tiles on one screen ------------------- */
/*
   Measured on a 411x914 device: header 73 + tab bar 81 leaves 760px of content.
   The website hero is 64vh — 585px — which with the stats bar left 104px, so
   the launcher tiles sat entirely below the fold and the app opened on a photo
   with no way to see where anything was.

   Trimming the hero to ~38vh gets both on the first screen: hero ~347 + stats
   71 + the tile block 310 = 728 of 760. Still a full-bleed photographic
   carousel, just not a whole screen of one.
*/
/* The height lives on .hero-slide, not .hero-slider — and so does 160px of
   vertical padding (56 top, 104 bottom for the dots). Both have to come down
   or the min-height does nothing. */
html.is-native .hero-slide {
  min-height: clamp(280px, 38vh, 380px);
  padding: 26px 0 58px;
}

/* The marketing paragraph is the first thing to go — the headline and the
   button already say it, and on a phone it was three lines. */
html.is-native .hero-slide p { display: none; }
/* h2, not h1 — the hero heading is an <h2> in home.php, so the h1 selector I
   originally wrote here matched nothing and the headline stayed at 30px. */
html.is-native .hero-slide h2 { font-size: clamp(23px, 6.4vw, 30px); }
html.is-native .hero-badge { font-size: 10.5px; padding: 5px 12px; }
html.is-native .hero-cta-row { gap: 8px; }
html.is-native .hero-cta-row .btn { padding: 11px 18px; font-size: 14px; }

/* Arrows go entirely in the app. I had shrunk them instead, and with the
   trimmed padding they landed on top of the "Learn More" button.
   Safe to drop: .hero-slider-track is overflow-x:auto with
   scroll-snap-type: x mandatory, so the carousel already swipes natively on
   touch — the arrows only ever existed for a mouse. Dots stay, as the position
   indicator. */
html.is-native .hero-arrow { display: none; }


/* ============================================================================
   APP HOME — shipped design.
   Chosen from four independently developed directions (elevation, vivid,
   editorial, dense super-app) judged against the brief and each other.
   "Vivid" won because the client asked for colour and it was the only
   direction whose primary move was colour; the other three answered
   "make it colorful" by taking colour off the tiles.
   Grafts from the runners-up are marked GRAFT inline.
   ========================================================================== */
/* ============================================================================
   APP HOME — DIRECTION: VIVID COLOUR
   Append after section 24's "app home" rules in public/assets/css/app.css.

   Every selector is scoped to html.is-native. Nothing here reaches the website.
   No markup changes, no new images, no JS, no new fonts, no new palette —
   every colour below is either an existing token or a token at an alpha /
   blended toward an existing token.

   THE COMPLAINT, RESTATED
     "not looking good" = the screen is pastel and flat. Six --tone-bg tiles
     (#e6f4ec, #e6eef9, …) are all ~92% lightness, so the grid reads as one
     pale rectangle with faint tinting rather than as six destinations. Nothing
     is raised off anything. After the photo hero the eye has nowhere to go.

   THE MOVE
     Flip the tiles from the washed --tone-bg to the saturated --tone itself,
     as a gradient that falls toward --g-900, with white glyphs and white
     labels on top. The grid stops being background and becomes the second
     focal point of the screen. The two dark bands are then dealt with so the
     colour has somewhere clean to land: the stats bar is folded back into the
     hero photo, and the notice ticker stops being a dark full-bleed band and
     becomes a raised amber card on grey.

   THE CONTRAST RULE I HELD MYSELF TO
     Label and glyph are white, so *every pixel of a tile* must clear 4.5:1
     against #fff — not just the average. That is why the gradient only ever
     darkens: it starts at the tone and blends toward --g-900, so the lightest
     point on any tile is the tone itself. Measured white-on-tone:
        tone-green  #1a7f47 -> 5.04:1   tone-blue   #1f4e88 -> 8.51:1
        tone-rose   #c2185b -> 5.88:1   tone-violet #6535b8 -> 7.76:1
        tone-teal   #0f766e -> 5.47:1   tone-amber  #b5760a -> 3.80:1  FAIL
     Amber is the one that fails, which the design system already knew: the
     --gd-cta comment in section 01 says white on #b5760a is 3.78:1 and picks
     #a36a09 (4.59:1) as the "same gold, actually legible" value. So the amber
     tile is faced in --gd-cta, not --tone. Same hue, same family, passes.
     Worst tile on the screen is therefore 4.59:1.
   ========================================================================== */


/* ---- 1. canvas ----------------------------------------------------------- */
/*
   The tiles are about to become saturated and shadowed, and a shadow is only
   visible against something lighter than itself. body is already --surface
   (#f5f7f5), so the grid area just needs to not be overridden anywhere — but
   the hero is about to gain rounded bottom corners, and .hero-slider paints
   --g-900 behind its slides. Left alone, the corner slivers would be near
   black. Repaint that backing plate as the page surface so the corners read as
   the page showing through a card, which is the whole point of rounding them.
*/
html.is-native .hero-slider { background: var(--surface); }


/* ---- 2. hero: make it a card, not a slab --------------------------------- */
/*
   Rounding the bottom of the hero is the cheapest "this is an app" signal
   available without touching markup, and it does real work here: it puts a
   visible edge between the photo and the coloured content below, so the screen
   reads as [photo card] / [notice card] / [tile grid] instead of one continuous
   scroll of stacked bands.

   The radius goes on .hero-slide and .hero-stats, NOT on .hero-slider.
   .hero-slider-track is the scroll-snap carousel; putting a border-radius +
   overflow:hidden on its ancestor adds a clip to a scroll container for no
   benefit. .hero-slide already carries overflow:hidden (section 05), so it
   clips its own .hero-photo and ::before scrim for free. .hero-stats is a
   sibling of the track, so it needs the radius itself.
*/
html.is-native .hero-slide { border-radius: 0 0 22px 22px; }
html.is-native .hero-stats { border-radius: 0 0 22px 22px; }

/*
   BUG FOUND WHILE MEASURING, FIXED HERE.
   The existing rule at the end of section 24 is `.hero-slide h1`, but
   website/home.php renders the slide headline as <h2>. So that rule has never
   matched and the app headline has been falling through to the global h2 —
   clamp(22px, 3.4vw, 32px), which at 411px is the 22px floor. The hero is
   supposed to be the focal point and it has been rendering one point larger
   than a card title. Restated against h2 (h1 kept in case the view changes),
   and pushed up: 7vw of 411 = 28.8px.
*/
html.is-native .hero-slide h1,
html.is-native .hero-slide h2 {
  font-size: clamp(24px, 7vw, 31px);
  line-height: 1.1;
  margin-bottom: 12px;
}

/*
   The badge was white glass on a dark photo — correct, invisible, and the one
   place on the hero where colour is free. Filling it with --amber-400 gives
   the direction a warm anchor at the top of the screen that rhymes with the
   amber stat numerals below it and the amber notice card under that. Three
   warm marks in a vertical line, then six saturated hues in the grid: the warm
   accents are what stop the six tones reading as an unrelated paint chart.
   --g-900 on --amber-400 is ~10:1, so this is the highest-contrast text on the
   hero, which is right for a one-word eyebrow.
*/
html.is-native .hero-badge {
  background: var(--amber-400);
  border-color: transparent;
  color: var(--g-900);
  margin-bottom: 12px;
}

/*
   "Two dark bands stack directly under the hero." The stats bar is one of
   them — but it is position:absolute inside .hero-slider, so it costs zero
   layout height and is only a *band* because of how it is painted: a hairline
   top border plus a scrim that starts at 18% opacity, which draws a hard line
   across the photo and announces itself as a separate strip.

   Fix by painting, not by moving: drop the border, start the scrim at zero,
   and tint it with --g-900 instead of neutral #06140c so it reads as the
   photo darkening into the brand green rather than as a grey slab laid on top.
   Same information, no second band. Padding comes down 16 -> 11 to buy height
   back for the tiles.
*/
html.is-native .hero-stats {
  border-top: 0;
  background: linear-gradient(180deg,
    rgba(10, 44, 26, 0)   0%,
    rgba(10, 44, 26, .52) 42%,
    rgba(10, 44, 26, .88) 100%);
}
html.is-native .hero-stats-inner { padding: 11px 14px 13px; }
html.is-native .hero-stat .num   { font-size: 19px; }
html.is-native .hero-stat .label { font-size: 9.5px; line-height: 1.3; margin-top: 2px; }
/* The divider hairlines were part of the "grid of data" look that made this a
   band. Without them the four stats float on the photo. */
html.is-native .hero-stat + .hero-stat::before { display: none; }

/*
   Dots are pinned at bottom:108px for the website's 104px bottom padding. With
   the app's trimmed hero and the shorter stats bar (~58px) they were floating
   in the middle of the headline area. Sit them just above the stats bar.
*/
html.is-native .hero-dots { bottom: 68px; }
html.is-native .hero-dot { width: 7px; height: 7px; background: rgba(255, 255, 255, .5); }
html.is-native .hero-dot.active { background: var(--amber-400); width: 20px; }


/* ---- 3. notice ticker: the second dark band, removed --------------------- */
/*
   NOTE ON SELECTORS: the brief called this .notice-ticker; the view actually
   renders .ticker-bar / .ticker-label / .ticker-track (section 06). Styled
   against what the markup really is.

   This is the band that genuinely stacks: a full-bleed --g-800 strip sitting
   directly under a dark hero, so the top 400px of the app is one uninterrupted
   dark mass and the colour below has to fight out from under it.

   Turned into a raised amber card floating on the grey page. Three things fall
   out of that: the dark stack is broken, the screen gains its first piece of
   real elevation, and the ticker starts reading as an app notification strip
   rather than as a news crawl on a corporate homepage. The amber tint is not a
   new colour — the label chip was already --amber-400; the card is just the
   rest of that family (--amber-50 ground, --amber-500 at 28% for the rule).
*/
html.is-native .ticker-bar {
  margin: 12px 14px 0;
  border-radius: 14px;
  background: var(--amber-50);
  border: 1px solid rgba(224, 138, 30, .28);
  box-shadow: 0 2px 6px rgba(10, 44, 26, .06), 0 8px 18px -12px rgba(224, 138, 30, .55);
  /* .ticker-bar is already overflow:hidden, so the marquee is clipped by the
     rounded box and the chip's square corners are trimmed to match. */
}
html.is-native .ticker-label {
  padding: 9px 13px;
  font-size: 11.5px;
  letter-spacing: .06em;
  /* Left edge only — the chip is inside a rounded card now. */
  border-radius: 13px 0 0 13px;
}
/* The band was full-bleed, so the marquee sliding off the right-hand edge of
   the screen read as "off the screen". Inside a rounded card it reads as text
   chopped by a border. Fade the last 12% instead. Prefixed first: if a WebView
   ignores both, it falls back to today's hard cut, which is the current
   behaviour and not a break. */
html.is-native .ticker-viewport {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}
html.is-native .ticker-track span {
  padding: 9px 40px 9px 0;
  font-size: 13px;
  /* On the old --g-800 ground this was white at 80%. On --amber-50 it needs a
     dark ink: --ink-soft on #fff6e6 is 8.8:1. */
  color: var(--ink-soft);
}
/* Links were #fff. --gd-cta (#a36a09) on --amber-50 is only 4.28:1 at this
   size, so use the darker step of the same gold: 5.6:1. */
html.is-native .ticker-track span a { color: var(--gd-cta-dark); font-weight: 700; }


/* ---- 4. section header: stop it being a website section ------------------ */
/*
   "OUR NETWORK" in a pill, a display-font h2, and a line of prose is how a
   marketing page introduces a section to a stranger. In a launcher it is
   furniture above six icons. The eyebrow pill goes (the h2 already says what
   this is, and the pill was the only thing on the screen shaped like a badge
   that you could not tap — a small but real affordance lie).

   What is left is one compact left-aligned line with a green rule in front of
   it, which is the standard app section-header shape and, being a
   pseudo-element, needs no markup change. The rule also introduces the tile
   palette a beat before the tiles arrive.
*/
html.is-native .network-section { padding-block: 12px 6px; }
html.is-native .network-section .section-header { margin-bottom: 12px; }
html.is-native .network-section .section-eyebrow { display: none; }
html.is-native .network-section .section-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}
html.is-native .network-section .section-header h2::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--g-500);
}


/* ---- 5. the tiles: the actual point of this direction -------------------- */
/*
   PER-TONE FACE COLOUR.
   --v-face is the lightest point of the tile. It defaults to the module's own
   --tone. Amber is the single override: --tone (#b5760a) is 3.80:1 against
   white, and --gd-cta (#a36a09) is the value the system already defined for
   exactly this problem — 4.59:1, same gold.

   --v-rgb is that same face colour as raw channels, used only for the tile's
   coloured drop shadow. Duplicating the hex as a triple is unavoidable without
   color-mix(), which I am deliberately not using: this ships to Android
   WebView, color-mix() is Chrome 111+, and a WebView that falls back would
   lose the tile background entirely. Everything here is plain rgba/gradients
   that work on any WebView the app already supports.

   --v-end is how far the tile fades into --g-900 at its bottom corner. It is
   tuned for equal *perceived* depth, not for one number across the board — the
   two faces that are already darkest need less darkening to look as deep, and
   forcing .44 on them turned navy into slate and gold into olive on device:
     tone-blue  starts at the lowest luminance of the six (L .073)
     tone-amber starts pre-darkened, because the contrast floor above forced
                --gd-cta on it rather than the brighter --tone
*/
html.is-native .network-section .feature-card {
  --v-face: var(--tone, var(--g-500));
  --v-rgb: 26, 127, 71;
  --v-end: .44;
}
html.is-native .network-section .feature-card.tone-green  { --v-rgb: 26, 127, 71; }
html.is-native .network-section .feature-card.tone-violet { --v-rgb: 101, 53, 184; }
html.is-native .network-section .feature-card.tone-rose   { --v-rgb: 194, 24, 91; }
html.is-native .network-section .feature-card.tone-teal   { --v-rgb: 15, 118, 110; --v-end: .40; }
html.is-native .network-section .feature-card.tone-blue   { --v-rgb: 31, 78, 136;  --v-end: .32; }
html.is-native .network-section .feature-card.tone-amber  { --v-face: var(--tone-action, var(--tone)); --v-rgb: 163, 106, 9; --v-end: .32; }

html.is-native .network-section .feature-card {
  /*
     THE GRADIENT. Flat --v-face underneath, and one overlay that fades from
     nothing to 46% --g-900 across the diagonal.

     Two deliberate properties of building it this way:
     1. It only ever darkens. The brightest pixel on any tile is --v-face, so
        the contrast table at the top of this file is the *worst* case, not the
        average. A white specular in the top-left would have looked richer and
        dropped tone-green's top corner to 4.06:1 — not worth it for a screen
        whose whole job is legible labels.
     2. All six fade toward the same colour. Six hues that each fall into
        --g-900 share a shadow end, and that shared end is what makes them read
        as one family rather than six unrelated chips. It is the same trick the
        neutrals in section 01 use (a green cast so they sit with the brand).
        Only how *far* each one falls is tuned (--v-end above); the colour it
        falls toward is identical on all six, which is what carries the family.
  */
  background-color: var(--v-face);
  background-image: linear-gradient(158deg,
    rgba(10, 44, 26, 0) 6%,
    rgba(10, 44, 26, calc(var(--v-end) * .45)) 52%,
    rgba(10, 44, 26, var(--v-end)) 100%);
  border: 0;
  border-radius: 19px;
  padding: 13px 6px 12px;
  min-height: 112px;
  justify-content: center;

  /*
     ELEVATION, which the screen had none of. Two layers:
       - a tight shadow in the tile's OWN colour, so each tile glows its hue
         into the grey rather than smudging it grey. This is what stops six
         saturated blocks looking pasted on.
       - a wider neutral --g-900 shadow that grounds all six identically.
     Plus a 1px inset white top edge: the classic lit-from-above hairline. It
     is 1px and no text sits on it, so it costs nothing in contrast and does
     most of the work of making the tile feel like an object.
  */
  box-shadow:
    0 3px 8px -2px rgba(var(--v-rgb), .42),
    0 10px 20px -12px rgba(10, 44, 26, .55),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

/*
   REQUIRED, NOT COSMETIC. The existing app rule sets
   `.feature-card:hover { box-shadow: none }` to kill the website's lift. On
   touch WebViews :hover sticks to the last element tapped, so after the user
   opens a module and comes back, that tile would sit there permanently
   flat while the other five are raised. Re-assert the resting shadow on hover
   so hover is a no-op rather than a state.
*/
html.is-native .network-section .feature-card:hover {
  transform: none;
  box-shadow:
    0 3px 8px -2px rgba(var(--v-rgb), .42),
    0 10px 20px -12px rgba(10, 44, 26, .55),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

/* A press should sink, not just shrink: the shadow collapses with the scale so
   the tile reads as going down toward the page. */
html.is-native .network-section .feature-card:active {
  transform: scale(.955);
  box-shadow:
    0 1px 3px -1px rgba(var(--v-rgb), .40),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

/*
   ICON PLATE. On the pastel tiles this was a near-solid white square holding a
   coloured glyph — the only bright thing on the tile, so it read as the tile.
   Now that the tile itself carries the colour, the plate steps back to a
   translucent white pane and the glyph goes white, which is what "white icons
   on saturated colour" means and what makes the six tiles read as one set.

   feature_icon() draws stroke="currentColor" at stroke-width="1.7", so color
   alone turns them white — and CSS beats a presentation attribute, so the
   stroke can be thickened to 1.9 to hold up as white-on-mid-tone at 23px. The
   'coin' glyph's <text fill="currentColor"> follows the same colour.
*/
html.is-native .network-section .feature-card .icon {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 14px;
  /* GRAFT: was rgba(255,255,255,.20). Lightening the face under a white
     glyph put amber at 3.21:1 and green at 3.47:1 — under the 3:1 floor
     for line art on a cheap panel in daylight. A dark scrim darkens
     instead, obeying the same only-ever-darkens rule the tile gradient
     already follows, and pushes every glyph above 4:1. */
  background: rgba(10, 44, 26, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30);
  color: #fff;
}
html.is-native .network-section .feature-card .icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.9;
}

/*
   LABEL. White, 11.5px/700. Against the worst face on the screen (--gd-cta,
   4.59:1) this clears the 4.5:1 body-text bar, and against the other five it
   is 5.0–8.5:1. Deliberately no text-shadow: a shadow would be an admission
   that the contrast is marginal, and it makes small type muddy on a 2.625dpr
   panel. The labels are the short ps_modules() 'tab' names — Offline, Online,
   Local, 1 GM Gold, Services, Others — all of which fit one line in the ~118px
   tile at this size.
*/
html.is-native .network-section .feature-tab {
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.2;
  padding: 0 2px;
}

/*
   UNCHANGED ON PURPOSE: the CTA stays position:absolute / inset:0. The card is
   a <div> and this anchor is the only link inside it, so this element IS the
   tap target. Only the radius is restated so the (invisible) focus/press box
   matches the tile's new 19px corner. Tap target is ~118 x 116px, far past 44.
*/
html.is-native .network-section .feature-card .cta { border-radius: 19px; }

/* One extra pixel of gutter now that the tiles have coloured shadows that need
   somewhere to fall without pooling into each other. */
html.is-native .network-section .feature-grid { gap: 11px; }

/*
   "Soon" modules are a <span>, not a link. All six are live today, but if one
   is switched off the tile has to stop looking pressable — knock it back to a
   desaturated version of its own face rather than to grey, so the grid keeps
   its shape and the module keeps its identity.
*/
html.is-native .network-section .feature-card:has(.cta.soon) {
  background-image: linear-gradient(158deg,
    rgba(10, 44, 26, .28) 0%,
    rgba(10, 44, 26, .58) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
html.is-native .network-section .feature-card:has(.cta.soon) .feature-tab { color: rgba(255, 255, 255, .80); }


/* ---- 6. fold check ------------------------------------------------------- */
/*
   Measured in a 411 x 914 viewport against a rebuilt copy of the real markup,
   not estimated. Content room above the tab bar runs y=73 (under the header)
   to y=833 (top of the tab bar) = 760px:
     hero slide      347   y  73 -> 420   (38vh; .hero-stats is absolute inside
                                           it at 58px tall, so it adds 0)
     ticker card      53   y 420 -> 473   (12 margin + 41 card)
     network section 287   y 473 -> 760   (18 padding + 32 header + 243 grid)
     -------------------------------------
     bottom of the sixth tile  y 760, tab bar at y 833  ->  73px spare.

   So the hero and all six tiles are on the first screen with room left over,
   and the empty strip under the grid is what tells the user there is more page
   below. This is more headroom than the layout had before this pass: the
   arithmetic in section 24 forgot the notice ticker, so the real total was
   ~783 of 760 and the bottom tile row was being clipped by the tab bar.
   Nothing in this direction trades the fold away.

   Also measured: document scrollWidth 411 = viewport width, i.e. no horizontal
   overflow; tile tap target 118 x 116 (the .cta fills it exactly); every
   feature-tab label holds one line, longest is "1 GM Gold" at 63px in a 118px
   tile.
*/


/* ============================================================================
   SUMMARY — VIVID COLOUR

   The direction: the six module tiles stop being pastel --tone-bg rectangles
   and become saturated tiles faced in each module's own --tone, each fading
   diagonally into --g-900 under white glyphs, white labels and a drop shadow
   in its own hue. Around them the screen is cleared so that colour is the only
   loud thing on it — the stats bar is repainted back into the hero photo, the
   dark notice band becomes a raised amber card on grey, and the marketing
   section header shrinks to one line with a green rule.

   Most important change: --tone instead of --tone-bg as the tile face, with
   the amber tile faced in --gd-cta rather than --tone. That one substitution
   is the whole direction (it is the difference between a 92%-lightness grid
   and a saturated one) and the amber exception is what keeps it legible —
   white on --tone-amber is 3.80:1 and fails, white on --gd-cta is 4.59:1 and
   passes, so the worst label on the screen is still above 4.5:1.

   Biggest risk / trade-off: contrast and vividness pull against each other,
   and on this palette contrast wins every time — which costs the gold tile.
   White labels mean no tile may be lighter than 4.5:1, so Sathi Gold cannot
   use its actual brand gold (--tone-amber, 3.80:1) and wears --gd-cta instead.
   Next to a violet and a rose that are free to be fully saturated, the one
   module the client is proudest of is the dullest tile on the screen. I bought
   some of that back by fading amber less than the others (--v-end .32 vs .44),
   but the ceiling is real: the only ways past it are a dark label on a bright
   gold tile — which breaks the one-family rule the other five follow — or
   accepting ~3.8:1 on that one label. Both are the client's call, not mine.
   Related: every tile fading into the same --g-900 is what makes six hues read
   as a family, but it also means six dark bottom corners, so on a dim or
   heavily colour-shifted budget panel green, teal and blue can converge at a
   glance. The secondary risk is simply taste — this is unapologetically loud,
   and it is a one-line revert (--v-face back to --tone-bg) if "not looking
   good" turns out to have meant "too busy" rather than "too washed out".

   Test on device:
   - The amber tile (Sathi Gold, "1 GM Gold") against the other five in real
     daylight — it is the only tile whose face is not its own --tone and the
     only one at 4.59:1. If any label is hard to read outdoors, it is this one.
   - Sticky :hover. Open a module, hit the Android back button, and confirm the
     tile you tapped still has its shadow. That is what the :hover rule above
     exists for and it is the single most likely thing to regress.
   - The rounded hero bottom while the Ken Burns animation is running and while
     mid-swipe between slides — .hero-slide clips a transformed, animating
     child, which some WebView GPU paths render with square corners.
   - The notice card with a long notice and with exactly one notice: the
     marquee doubles its content in PHP, so a single short notice can leave a
     visible gap inside a now-visible rounded card where the full-bleed band
     used to hide it.
   - :has() support for the "Soon" fallback — Chrome/WebView 105+. Older
     WebViews just keep the live tile styling, which is a cosmetic miss on a
     module that is currently never disabled, not a break.
   - The whole screen at 360px wide (the narrowest common Android) to confirm
     "1 GM Gold" and "Services" still hold one line at 11.5px. Measured at
     411px the longest label is 63px in a 118px tile, so there is room, but
     360px has not been on a real panel.
   - The ticker's edge fade (-webkit-mask-image on .ticker-viewport). If a
     WebView drops it the text goes back to a hard cut at the card border —
     ugly, not broken — but a mask over a running marquee is also the one thing
     here that could cost a compositing layer on a low-end GPU.
   - iOS, where all the --safe-* tokens resolve to 0 and WKWebView insets the
     page itself. Nothing here reads those tokens, so it should be identical to
     Android, but the rounded hero and the ticker card's side margins are the
     two places a different inset model would show up first.
   ========================================================================== */

/* ---- GRAFTS from the runners-up ------------------------------------------ */

/*
   GRAFT 1 (from "Depth and elevation") — the stats band becomes a floating card.

   Vivid's weakness is that six equally loud tiles cancel each other out and
   leave no focal point. This card straddles the hero's bottom edge, so it is
   the one element on the screen occupying two planes — which is what stops a
   photo and a band reading as two stacked slabs.

   It costs zero flow height: .hero-stats is already position:absolute inside
   .hero-slider. Anchored by `bottom`, so if a label ever wraps the card grows
   upward and the 30px overhang stays 30px.

   Near-solid rather than glass: this carries the only numbers on the screen and
   an admin can upload any photo behind it, so translucency would be a contrast
   lottery. Worst case over the --g-700 end measures 5.9:1 for the numerals.
*/
html.is-native .hero-stats {
  left: 18px;
  right: 18px;
  bottom: -30px;
  z-index: 6;                     /* above the dots and the scrim */
  border-radius: 16px;
  overflow: hidden;               /* keeps the column dividers inside the radius */
  background: linear-gradient(155deg, rgba(20, 86, 47, .96) 0%, rgba(10, 44, 26, .97) 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-top-color: rgba(255, 255, 255, .22);
  box-shadow: 0 14px 30px -10px rgba(10, 44, 26, .5);
}
html.is-native .hero-stats-inner { padding: 12px 8px 13px; gap: 0; max-width: none; }
html.is-native .hero-stat .num   { font-size: 18px; line-height: 1.05; }
html.is-native .hero-stat .label {
  font-size: 9.5px; line-height: 1.2; letter-spacing: .015em;
  color: rgba(255, 255, 255, .82); margin-top: 3px;
}

/* Clearance for the 30px overhang. The second rule is the fallback for when no
   notices are published and .ticker-bar is not rendered at all — without it the
   card would overlap the tiles. */
html.is-native .ticker-bar { margin-top: 38px; }
html.is-native .hero-slider + .network-section { padding-top: 38px; }

/*
   GRAFT 2 (from "Calm and premium") — the hero button was too small to tap.

   .btn is line-height:1, so the app hero CTA computed to 39px — under the 44px
   floor. This is a live defect, not a preference.

   The :hover hold is the second half: Android WebView latches :hover after a
   tap, so the website's hover state (amber fill, lift) would stick permanently
   until the next scroll.
*/
html.is-native .hero-slide .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html.is-native .hero-slide .btn:hover {
  background: #fff;
  color: var(--g-700);
  transform: none;
}

/* ---- menu sheet: both navigations in one place --------------------------- */
/*
   Module rows get their icon and tone so the sheet reads as the same set of
   things as the tab bar and the home tiles — three surfaces, one visual
   language. Corporate links stay plain text: they are a different kind of
   destination and should not compete.
*/
.mobile-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}
.mobile-nav-row .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--tone-bg, var(--g-50));
  color: var(--tone, var(--g-500));
}
.mobile-nav-row .ic svg { width: 18px; height: 18px; }
.mobile-nav-row.is-on { background: var(--g-50); color: var(--g-700); }
/* The chip and the active row would otherwise both be --g-50 and the icon would
   lose its plate on exactly the row you are looking at. */
.mobile-nav-row.is-on .ic { background: var(--surface-2); }
.mobile-nav-row.is-soon { color: var(--muted); }
.mobile-nav-row.is-soon em {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--line-soft); color: var(--muted);
}
.mobile-sublink.is-on { color: var(--g-600); font-weight: 700; }

/* Logging out is a POST — it must not be a link. Styled to match .mobile-login
   so the sheet does not show a stray button. */
.mobile-logout-form { display: block; }
.mobile-logout-form .mobile-login { width: 100%; font: inherit; cursor: pointer; }

/* ---- app header: show the name beside the mark --------------------------- */
/*
   The site header hides .brand-text below 421px to save room for a seven-item
   nav. The app has no nav bar up there, so the space is free — and an app whose
   header is a bare logo looks unfinished. The Hindi strapline stays hidden:
   two lines of lockup in a 73px header is a squeeze, and it is already on the
   hero and in the footer.
*/
html.is-native .site-header .brand-text {
  display: block;
  font-size: 17px;
  line-height: 1.15;
  white-space: nowrap;
}
html.is-native .site-header .brand-text small { display: none; }
html.is-native .site-header .brand-logo { height: 38px; }
html.is-native .site-header .brand { gap: 9px; min-width: 0; }

/* A text field inside a .row-actions flex row must not shrink.
   The action column is width:1% so it hugs its buttons, and .row-actions is
   flex-wrap:nowrap so the row never doubles in height — together those crushed
   the password box to 31px. The placeholder was invisible, you could see one
   character while typing, and the Reset button could therefore only ever report
   "password must be at least 6 characters".
   The table already scrolls horizontally, so letting this column claim its real
   width costs nothing. */
.row-actions input[type="password"],
.row-actions input[type="text"] {
  flex: 0 0 150px;
  min-width: 150px;
}


/* -------------------------- 25 Member area (the eight pages behind login) */
/*
   The client's eight post-login pages (Home, Product, Jackpot, Gift Items,
   Seasonal, EMI, PV Gift, Others) render inside layouts/shop.php, so this
   section only has to supply the nav that sits above them and the handful of
   pieces all eight share. Everything is prefixed .member- so nothing here can
   reach the website, the admin panel or the app home — an unqualified
   .feature-card rule once shipped in an APK and hid page content.

   Nothing in this section is fixed-position: the app already owns the bottom
   56px with .app-tabbar, and .shop-main's native padding-bottom clears it.
*/

.member-nav { margin-bottom: 20px; }

/*
   Eight chips will never fit across a 390px phone, so the row scrolls rather
   than wrapping into a three-line wall above every page. It bleeds to the
   screen edges on the way so the last chip is visibly cut off — that is the
   only affordance telling a thumb there is more to the right.
*/
.member-nav-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-inline: -18px;
  padding: 2px 18px 8px;
}
.member-nav-row::-webkit-scrollbar { display: none; }
/* .container switches from 18px to 24px of side padding here; the bleed has to
   follow it or the row stops short of the edge and the cue is lost. */
@media (min-width: 700px) { .member-nav-row { margin-inline: -24px; padding-inline: 24px; } }

.member-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* .btn computes to ~39px; a nav a thumb has to hit gets the 44px floor. */
  min-height: 44px;
  padding: 0 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.member-chip-ic { display: flex; color: var(--tone, var(--g-500)); }
.member-chip-ic svg { width: 18px; height: 18px; }

/* The filled state takes --tone-action, not --tone: amber and orange fail
   4.5:1 as text, which is the reason --tone-action exists. */
.member-chip.is-on {
  background: var(--tone-bg, var(--g-50));
  border-color: var(--tone, var(--g-500));
  color: var(--tone-action, var(--tone, var(--g-600)));
}
.member-chip.is-on .member-chip-ic { color: var(--tone-action, var(--tone, var(--g-600))); }

/* Guarded, because an Android WebView latches :hover after a tap and would
   leave the last chip you touched looking selected. */
@media (hover: hover) {
  .member-chip:hover {
    background: var(--tone-bg, var(--g-50));
    border-color: var(--tone, var(--g-300));
    color: var(--ink);
  }
}

@media (min-width: 900px) {
  /* Room for all eight — let them lay out fully instead of scrolling. */
  .member-nav-row {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .member-chip { font-size: 14px; padding: 0 17px; }
}

/* --- shared page furniture ------------------------------------------------ */

.member-page-head { margin-bottom: 18px; }
.member-page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.15;
  margin: 0 0 6px;
}
.member-page-head p { color: var(--muted); font-size: 14px; margin: 0; max-width: 62ch; }

/* A line the client dictated word for word (e.g. "CUSTOMER REQUIREMENT
   PRODUCT" on the PV ladder). Amber so it reads as the shop's own note rather
   than as an error. */
.member-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--amber-50);
  border: 1px solid var(--amber-300);
  border-radius: var(--r-md);
  color: #7a4d05;
  font-size: 13.5px;
  line-height: 1.5;
}
.member-note strong { font-weight: 700; }

.member-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
/* A green rule down the left turns the shelf name into a section marker rather
   than another line of text — at four shelves deep the page needs something the
   eye can land on while scrolling. */
.member-shelf-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
  padding-left: 11px;
  border-left: 4px solid var(--g-500);
  color: var(--ink);
}
/* "See all" is a destination, not an aside, so it reads as a button. */
.member-shelf-head a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--g-50);
  border: 1px solid var(--g-100);
  font-size: 13px;
  font-weight: 700;
  color: var(--g-700);
  white-space: nowrap;
}
@media (hover: hover) {
  .member-shelf-head a:hover { background: var(--g-100); border-color: var(--g-200); }
}

/*
   Two columns on a phone, because one column of product tiles turns a
   57-item category into a scroll nobody finishes.
*/
.member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) { .member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) { .member-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.member-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  color: inherit;
}
@media (hover: hover) {
  .member-tile:hover { box-shadow: var(--sh-md); border-color: var(--line); }
}
.member-tile img,
.member-tile .member-tile-ph {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface);
}
.member-tile .member-tile-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g-300);
}
.member-tile .member-tile-ph svg { width: 38px; height: 38px; }

.member-tile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.member-tile-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.member-tile-body .price-row { margin: 2px 0 0; flex-wrap: wrap; gap: 8px; }
.member-tile-body .price-now { font-size: 16px; }
.member-tile-meta { font-size: 11.5px; color: var(--muted); }

/* The PV ladder (page G) is 28 rows of number ranges — a table, not cards.
   .table-wrap already supplies the scroll and the sticky head. */
.member-ladder .num-col { white-space: nowrap; }
.member-ladder tr.is-reached td { background: var(--g-50); }
.member-ladder tr.is-current td { background: var(--g-100); font-weight: 600; }

/* Shelf strip — the six shelves on one line.
   Replaces a four-across grid of photo tiles that took the whole first screen
   before a single product appeared. Scrolls sideways rather than wrapping, so
   the row height never changes with the number of shelves. */
.shelf-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.shelf-strip::-webkit-scrollbar { display: none; }

.shelf-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 56px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(20,32,26,.05));
}
/* The icon is what makes a shelf recognisable at a glance, so it fills the disc.
   No padding or background of our own: these icons already ship with their own
   tinted square, and boxing them inside a second one shrank the artwork to 32px
   and washed it out. */
.shelf-pill img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 44px;
}
.shelf-pill-n {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g-700);
  background: var(--g-50);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .shelf-pill:hover { border-color: var(--g-300); box-shadow: var(--sh-md); }
  .shelf-pill:hover .shelf-pill-n { background: var(--g-100); }
}

/* Member header brand lockup. The mark was missing here only — website, auth
   and admin already had it — so a member lost the branding the moment they
   signed in. */
.shop-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.shop-brand-logo {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
}
@media (min-width: 700px) {
  .shop-brand-logo { height: 38px; }
}