/* ============================================================================
   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)
   ========================================================================== */

/* ---------------------------------------------------------------- 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; }

/* ---- Registration success ---- */
.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; }
.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;
}