/* Your Astha — the shared design system.
   Every public page and the customer dashboard are built from these classes.
   The staff panel layers its own chrome on top in staff.css and relies on the
   tokens and components here, so nothing below may be renamed or removed. */

/* Self-hosted fonts (the CSP allows fonts from this site only). Licences sit beside the files. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* Brand — white and navy blue. Two navies carry the whole site: the deep one
     for identity and headings, the brighter one for the action that moves you
     forward. Red and amber appear only where a meaning would be lost without
     them (a rejected payment, an order still waiting). The class names that say
     "green" and "ok" are about meaning, not hue. */
  --brand: #312e81;
  --brand-600: #4338ca;
  --brand-400: #818cf8;
  --brand-100: #e0e7ff;
  --brand-050: #eef2ff;
  --accent: #4338ca;
  --accent-600: #3730a3;
  --accent-100: #e0e7ff;

  /* Supporting shades, so the indigo is never the only blue on screen. */
  --indigo-800: #312e81;
  --indigo: #4338ca;
  --blue: #2563eb;
  --sky: #0ea5e9;
  --violet: #7c3aed;
  --grad: linear-gradient(120deg, #312e81 0%, #4338ca 45%, #2563eb 80%, #0ea5e9 115%);
  --tint: #e9ecfb;

  /* Surfaces */
  --bg: #f3f5fb;
  --surface: #ffffff;
  --surface-2: #eef1f9;
  --surface-3: #e5e9f5;
  --text: #0d1626;
  --text-2: #33415a;
  --muted: #5d6b82;
  --border: #dfe4f0;
  --border-strong: #c6d1e0;

  /* Meaning */
  --danger: #d92d20;
  --danger-100: #fdeceb;
  --warn: #c2710c;
  --warn-100: #fdf3e4;
  --info: #4f46e5;
  --info-100: #eef2ff;

  --radius: 16px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Three depths only: resting, raised, floating. */
  --shadow: 0 1px 2px rgba(13, 22, 38, .05), 0 1px 3px rgba(13, 22, 38, .04);
  --shadow-md: 0 2px 4px rgba(13, 22, 38, .05), 0 12px 28px -12px rgba(13, 22, 38, .18);
  --shadow-lg: 0 8px 16px rgba(13, 22, 38, .07), 0 28px 60px -20px rgba(13, 22, 38, .28);
  --ring: 0 0 0 3px var(--brand-100);

  --font: "Geist", "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali", sans-serif;
  --display: "Bricolage Grotesque", "Geist", "Segoe UI", system-ui, "Noto Sans Bengali", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: .8125rem;
  --step-0: .9375rem;
  --step-1: 1.0625rem;
  --step-2: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.25rem + 1.5vw, 2.15rem);
  --step-4: clamp(2.6rem, 1.2rem + 6vw, 5.6rem);

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: clamp(3rem, 2rem + 4vw, 5.5rem);

  --wrap: 1160px;
  --nav-h: 66px;
}


/* Dark mode, switched by the moon button in the header (shell.js sets data-theme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #c7d2fe;
  --brand-600: #a5b4fc;
  --brand-400: #6366f1;
  --brand-100: #25236b;
  --brand-050: #1b1a4f;
  --accent: #4338ca;
  --accent-600: #4f46e5;
  --accent-100: #221f5c;

  --bg: #071226;
  --surface: #0b1b38;
  --surface-2: #0f2346;
  --surface-3: #142b54;
  --text: #ffffff;
  --text-2: #dbe5f5;
  --muted: #a9bedd;
  --border: #19325c;
  --border-strong: #254574;

  --danger: #f87171;
  --danger-100: #2a1215;
  --warn: #fbbf24;
  --warn-100: #2a200b;
  --info: #a5b4fc;
  --info-100: #1b1a4f;

  --shadow: none;
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .8);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .9);
  --ring: 0 0 0 3px rgba(99, 102, 241, .4);

  --indigo-800: #3730a3;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --sky: #38bdf8;
  --violet: #a78bfa;
  --grad: linear-gradient(120deg, #312e81 0%, #3730a3 40%, #1d4ed8 85%, #0369a1 120%);
  --tint: #0b1630;
}
:root[data-theme="dark"] :is(.status-delivered, .status-done, .side-link.on, .rail-btn.on, .toast-info, .skip-link) {
  background: var(--accent); border-color: var(--accent); color: #fff;
}


:root[data-theme="dark"] :is(.badge-green, .prod-tier, .tier-table tr.on, .stepper li.done, .status-confirmed, .status-verified, .status-cod_collected) {
  color: var(--brand-600);
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; transition: background-color .2s ease; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.08;
  font-weight: 500;
  font-family: var(--display);
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--step-3); letter-spacing: -.035em; }
h2 { font-size: var(--step-3); letter-spacing: -.03em; }
h3 { font-weight: 600; }
/* The quiet second line of a heading: same face, lighter weight. */
.dim { color: var(--muted); font-weight: 300; }
h3 { font-size: var(--step-1); letter-spacing: -.008em; }
h4 { font-size: var(--step-0); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
img, svg, video { max-width: 100%; }
img, video { height: auto; display: block; }
a { color: var(--brand-600); text-underline-offset: 2px; }
a:hover { color: var(--brand); }
small { font-size: var(--step--1); }
code, kbd { font-family: var(--mono); font-size: .88em; }
hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: var(--sp-3) var(--sp-4);
}
.skip-link:focus { left: 0; }

/* Icons: any inline SVG inside a button or link lines up with the text. */
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.16em; }
svg.icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-8) 0; }
.section-tight { padding: var(--sp-6) 0; }
.section-alt {
  background: linear-gradient(180deg, var(--tint), var(--bg));
  border-top: 1px solid var(--border);
}
.center { text-align: center; }
.muted { color: var(--muted); }
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }
.hide { display: none !important; }
[hidden] { display: none !important; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }

.section-head { margin-bottom: var(--sp-6); max-width: 62ch; }
.section-head.center { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: block;
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6em;
  border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--sky)); vertical-align: .12em;
}

/* Hairline grid: cards share one thin border, no gaps, no shadow. */
.lines { gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.lines > .card {
  border-radius: 0; border-width: 0 1px 1px 0; box-shadow: none; padding: var(--sp-6);
  position: relative; background: var(--surface);
}
.lines > .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--card-edge, var(--indigo)); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.lines > .card:hover::before { transform: scaleX(1); }
.lines > :nth-child(4n+2) { --card-edge: var(--blue); }
.lines > :nth-child(4n+3) { --card-edge: var(--sky); }
.lines > :nth-child(4n+4) { --card-edge: var(--violet); }
.lines > .card-link:hover { transform: none; box-shadow: none; background: var(--brand-050); }

/* One full-width blue band with a big statement in it. */
.statement { background: var(--grad); color: #fff; padding: var(--sp-8) 0; position: relative; overflow: hidden; }
.statement .wrap { position: relative; z-index: 1; }
.statement p {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); line-height: 1.15; letter-spacing: -.025em;
  font-weight: 400; max-width: 26ch; margin: 0; text-wrap: balance;
}

/* ------------------------------------------------------------------ card */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-pad { padding: var(--sp-5); }
.card-link {
  display: block; color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  color: inherit;
}
.card-head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }

.panel {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-4);
}
.panel-warn { background: var(--warn-100); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.panel-err { background: var(--danger-100); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.panel-info { background: var(--info-100); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.panel-ok { background: var(--accent-100); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.panel > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .58rem 1.15rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 550; line-height: 1.35; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(120deg, var(--indigo), var(--blue)); border-color: transparent; color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(120deg, var(--indigo-800), var(--indigo)); border-color: transparent; color: #fff;
}
.btn-accent { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-accent:hover { background: var(--surface); border-color: var(--indigo); color: var(--indigo); }
/* A button that leads somewhere: soft glow, arrow nudges forward on hover. */
.btn-go .go-arrow { transition: transform .2s ease; }
.btn-go:hover .go-arrow { transform: translateX(3px); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: .32rem .7rem; font-size: var(--step--1); border-radius: var(--radius-pill); }
.btn-lg { padding: .78rem 1.5rem; font-size: var(--step-0); border-radius: var(--radius-pill); }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: .5rem; width: 2.35rem; }

/* Download buttons: the one thing a visitor to a download page came to press.
   Full-width, bright gradient, a soft pulse ring (off for reduced motion). */
.btn-download {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  padding: 1rem 1.6rem; font-size: var(--step-1); font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(120deg, var(--indigo), var(--blue) 55%, var(--sky)); background-size: 170% 100%;
  color: #fff; border: 0; border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--indigo) 70%, transparent);
  animation: ya-dl-pulse 2.4s ease-out infinite;
  transition: transform .15s ease, background-position .4s ease, box-shadow .2s ease;
}
.btn-download:hover {
  background: linear-gradient(120deg, var(--indigo), var(--blue) 55%, var(--sky)); background-size: 170% 100%;
  background-position: 100% 0; color: #fff; border: 0; transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--indigo) 80%, transparent);
}
.btn-download .icon { width: 1.3em; height: 1.3em; }
.btn-download-quiet { animation: none; }
@keyframes ya-dl-pulse {
  0%   { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--indigo) 70%, transparent), 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); }
  70%  { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--indigo) 70%, transparent), 0 0 0 14px transparent; }
  100% { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--indigo) 70%, transparent), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .btn-download { animation: none; } .btn-download:hover { transform: none; } }

/* ---------------------------------------------------------------- fields */

.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }
.label { display: block; font-weight: 650; font-size: var(--step--1); margin-bottom: var(--sp-2); color: var(--text-2); }
.hint { display: block; font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); }
.err { display: block; font-size: var(--step--1); color: var(--danger); margin-top: var(--sp-2); font-weight: 600; }
.field-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.input, .select, .textarea {
  width: 100%; padding: .58rem .8rem; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .75; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-600); box-shadow: var(--ring);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--danger);
}
.textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none; padding-right: 2.1rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--step-0); }
.check input { margin-top: .32rem; accent-color: var(--brand); }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .1rem .55rem; border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 700; line-height: 1.55;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.badge-green { background: var(--accent-100); color: var(--accent-600); border-color: transparent; }
.badge-blue { background: var(--info-100); color: var(--info); border-color: transparent; }
.badge-amber { background: var(--warn-100); color: var(--warn); border-color: transparent; }
.badge-red { background: var(--danger-100); color: var(--danger); border-color: transparent; }
.badge-grey { background: var(--surface-2); color: var(--muted); }

.status {
  display: inline-block; padding: .1rem .55rem; border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .01em;
}
.status-placed, .status-pending, .status-submitted, .status-new { background: var(--warn-100); color: var(--warn); }
.status-confirmed, .status-verified, .status-cod_collected { background: var(--accent-100); color: var(--accent-600); }
.status-packed, .status-shipped, .status-open, .status-read { background: var(--info-100); color: var(--info); }
.status-delivered, .status-done { background: var(--brand); color: #fff; }
.status-cancelled, .status-rejected, .status-blocked { background: var(--danger-100); color: var(--danger); }
.status-cod, .status-closed { background: var(--surface-2); color: var(--muted); }

/* ---------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.table th, .table td {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.table th {
  font-size: .69rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; white-space: nowrap;
  background: var(--surface-2);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--brand-050); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody td:first-child { font-weight: 600; }

.price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-lg { font-size: var(--step-2); font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.price-was { color: var(--muted); text-decoration: line-through; font-weight: 400; }

.tier-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.tier-table th, .tier-table td { padding: .4rem var(--sp-3); border-bottom: 1px solid var(--border); }
.tier-table th { color: var(--muted); font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: .69rem; }
.tier-table td:last-child, .tier-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table tr.on { background: var(--accent-100); color: var(--accent-600); font-weight: 700; }

/* ------------------------------------------------------------ statistics */

.stat {
  padding: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4);
}
.stat .stat-value {
  font-size: var(--step-3); font-weight: 800; line-height: 1.05;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat .stat-label {
  font-size: var(--step--1); color: var(--muted); font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
}
.stat-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-100); color: var(--brand-600);
}
.stat-icon svg { width: 20px; height: 20px; }
.lines > :nth-child(4n+1) .stat-icon { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo); }
.lines > :nth-child(4n+2) .stat-icon { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.lines > :nth-child(4n+3) .stat-icon { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); }
.lines > :nth-child(4n+4) .stat-icon { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.lines > .card-link:hover h3 { color: var(--blue); }
.stat-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------------- feedback */

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand-600);
  animation: ya-spin .7s linear infinite; display: inline-block;
}
@keyframes ya-spin { to { transform: rotate(360deg); } }
.loading {
  display: flex; gap: var(--sp-3); align-items: center; justify-content: center;
  padding: var(--sp-7); color: var(--muted);
}

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--muted);
  background: var(--surface);
}
.empty h3 { color: var(--text); }
.empty-icon {
  width: 46px; height: 46px; margin: 0 auto var(--sp-4);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted);
}
.empty-icon svg { width: 22px; height: 22px; }

.toast-host {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--sp-2); z-index: 90;
  width: min(420px, calc(100vw - 2rem));
}
.toast {
  background: var(--text); color: var(--bg); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: var(--step-0); font-weight: 600; animation: ya-rise .2s ease-out;
}
.toast-ok { background: var(--accent-600); color: #fff; }
.toast-err { background: var(--danger); color: #fff; }
.toast-info { background: var(--brand); color: #fff; }
@keyframes ya-rise { from { opacity: 0; transform: translateY(10px); } }

.modal {
  position: fixed; inset: 0; background: rgba(8, 16, 30, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  z-index: 80; animation: ya-fade .15s ease-out;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: var(--sp-5);
  animation: ya-pop .16s ease-out;
}
/* Reviews: star rows, the star picker, the rating bars. */
.stars { color: var(--warn); letter-spacing: .08em; white-space: nowrap; }
.stars .stars-off { color: var(--border); }
.star-pick { display: inline-flex; gap: 2px; }
.star-pick button {
  background: none; border: 0; padding: 0 2px; font-size: 1.9rem; line-height: 1;
  color: var(--border); cursor: pointer; transition: transform .1s ease, color .1s ease;
}
.star-pick button.on { color: var(--warn); }
.star-pick button:hover { transform: scale(1.12); }
.star-pick button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.rev-item { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--border); }
.rev-item:first-child { border-top: 0; padding-top: 0; }
.rev-head { display: flex; align-items: center; gap: var(--sp-3); }
.rev-head img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.rev-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
.rev-score { font-size: var(--step-4); font-weight: 800; line-height: 1; }
.rev-bar { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2rem; gap: var(--sp-2); align-items: center; font-size: var(--step--1); color: var(--muted); }
.rev-bar span.track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rev-bar span.fill { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
@media (max-width: 480px) { .rev-summary { grid-template-columns: minmax(0, 1fr); } }

/* YA.confirm — the site's own confirmation box. */
.ya-confirm { width: min(440px, 100%); }
.ya-confirm h2 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.ya-confirm p { color: var(--text-2); margin: 0 0 var(--sp-3); }
.ya-confirm .field { margin: var(--sp-3) 0 0; }
.ya-confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 480px) { .ya-confirm-actions .btn { flex: 1 1 auto; } }
@keyframes ya-fade { from { opacity: 0; } }
@keyframes ya-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }

.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 100%);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); overflow-y: auto; padding: var(--sp-5); z-index: 70;
}

/* ------------------------------------------------------------- controls */

.qty {
  display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
}
.qty button {
  width: 40px; border: none; background: var(--surface-2); color: var(--text);
  font-size: var(--step-1); font-weight: 700; cursor: pointer; transition: background .12s ease;
}
.qty button:hover:not([disabled]) { background: var(--surface-3); }
.qty button[disabled] { opacity: .4; cursor: not-allowed; }
.qty input {
  width: 88px; border: none; text-align: center; font: inherit; font-weight: 650;
  background: var(--surface); color: var(--text); padding: .5rem 0;
  font-variant-numeric: tabular-nums;
}
.qty input:focus { outline: none; }

.rail {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding-bottom: var(--sp-2); scrollbar-width: thin;
}
.rail-btn {
  padding: .38rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--muted); font: inherit; font-size: var(--step--1);
  font-weight: 650; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.rail-btn:hover { background: var(--surface-2); color: var(--text); }
.rail-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.stepper { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.stepper li {
  flex: 1 1 0; min-width: 96px; text-align: center; font-size: var(--step--1);
  color: var(--muted); padding: var(--sp-3) var(--sp-2); border-top: 3px solid var(--border);
}
.stepper li.done { color: var(--accent-600); border-top-color: var(--accent); font-weight: 650; }
.stepper li.now { color: var(--brand-600); border-top-color: var(--brand-600); font-weight: 700; }
.stepper li.off { opacity: .55; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 var(--sp-5) var(--sp-5);
  border-left: 2px solid var(--border);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: .42rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--brand-600);
  box-shadow: 0 0 0 3px var(--surface);
}
.timeline .when { font-size: var(--step--1); color: var(--muted); }

.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: var(--step--1);
  background: var(--brand-100); color: var(--brand-600); letter-spacing: .02em;
}

/* -------------------------------------------------------- product cards */

.prod {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); color: inherit; }
.prod-media {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border);
}
.prod-media img { width: 100%; height: 100%; object-fit: contain; } /* whole photo, never cropped */
.prod-media .prod-noimg { color: var(--muted); display: grid; place-items: center; gap: var(--sp-2); font-size: var(--step--1); }
.prod-media .prod-noimg svg { width: 30px; height: 30px; opacity: .55; }
.prod-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; }
.prod-name { font-weight: 650; line-height: 1.35; }
.prod-desc { font-size: var(--step--1); color: var(--muted); }
.prod-foot { margin-top: auto; padding-top: var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.prod-unit { font-size: var(--step--1); color: var(--muted); }
.prod-tier {
  font-size: var(--step--1); font-weight: 650; color: var(--accent-600);
  background: var(--accent-100); border-radius: var(--radius-pill); padding: .08rem .5rem;
}

/* ----------------------------------------------------------- header/nav */

.nav {
  position: sticky; top: 0; z-index: 60; padding: var(--sp-3) 0 0;
}
.nav-inner {
  display: flex; align-items: center; gap: var(--sp-4); min-height: 58px;
  padding: 0 var(--sp-2) 0 var(--sp-4); border: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  border-radius: var(--radius-pill);
  /* Solid, no backdrop blur: blur re-renders every scroll frame and made scrolling jitter. */
  background: var(--surface);
  box-shadow: var(--shadow);
}
.nav-links { gap: .15rem; }
/* Login in the header: a quiet outline, not a second loud button. */
.nav-links #ya-account-link {
  background: transparent; color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: none; font-weight: 500; margin-left: .35rem;
}
.nav-links #ya-account-link:hover { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.cart-btn { font-weight: 500; }
.brandmark { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brandmark .mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--indigo), var(--sky));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; letter-spacing: -.03em; border-radius: 50%;
}
.brandmark .name { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.brandmark .tag {
  display: block; font-family: var(--mono); font-size: .6rem; color: var(--muted); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
/* :not(.btn) matters — this rule is more specific than .btn-primary, so without
   it the Login button in the nav would wear muted grey text on its navy. */
.nav-links a:not(.btn) {
  padding: .45rem .75rem; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--muted); font-weight: 500; font-size: .9rem;
  transition: color .15s ease;
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn) { border-radius: var(--radius-pill); }
.nav-links a.on, .nav-drop summary.on { color: var(--text); position: relative; }
.nav-links a.on::after, .nav-drop summary.on::after {
  content: ""; position: absolute; left: 50%; bottom: .1rem; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--indigo);
}
.nav-toggle { display: none; }
/* The sliding nav dot (desktop): one dot that glides to the item under the
   pointer, stretches into a short line while it travels, and settles back as a
   dot under the current page. Arriving from another page, it slides over from
   where it was. It replaces the static ::after dot once shell.js has placed it. */
.nav-links { position: relative; }
.nav-dot {
  position: absolute; left: 0; bottom: .1rem; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 999px; background: var(--indigo); pointer-events: none; opacity: 0;
  transition: left .5s cubic-bezier(.34, 1.36, .64, 1), width .28s ease, margin-left .28s ease, opacity .2s ease;
}
.nav-dot.ready { opacity: 1; }
.nav-dot.moving { width: 18px; margin-left: -9px; }
.nav-links.dotted > a.on::after, .nav-links.dotted > .nav-drop > summary.on::after { display: none; }
@media (max-width: 859px) {
  .nav-dot { display: none; }
  .nav-links.dotted > a.on::after, .nav-links.dotted > .nav-drop > summary.on::after { display: block; }
}
@media (prefers-reduced-motion: reduce) { .nav-dot { transition: opacity .2s ease; } .nav-dot.moving { width: 5px; margin-left: -2.5px; } }
/* Featured card: gradient border, soft glow, live status. */
.card-feature {
  position: relative; border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, var(--indigo), var(--blue) 50%, var(--sky)) border-box;
}
.card-feature { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.card-feature:hover {
  transform: translateY(-6px); /* no scale: scaling blurs the text */
  box-shadow: 0 22px 44px -18px rgba(15, 23, 42, .28);
}
@media (hover: none) { .card-feature:hover { transform: none; box-shadow: none; } }
.badge-live {
  background: color-mix(in srgb, #10b981 14%, transparent); color: #059669; border-color: transparent;
  gap: .45em;
}
:root[data-theme="dark"] .badge-live { color: #34d399; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #10b981;
}
.panel-version {
  background: linear-gradient(120deg, color-mix(in srgb, var(--indigo) 9%, var(--surface)), color-mix(in srgb, var(--sky) 9%, var(--surface)));
  border-color: color-mix(in srgb, var(--indigo) 18%, transparent);
}
.panel-version strong { color: var(--indigo); }

/* The one line that explains the name, under "Our journey". */
.astha-meaning {
  margin-top: var(--sp-4); padding-left: var(--sp-4);
  border-left: 3px solid var(--indigo); color: var(--text-2); font-size: var(--step-1);
}
.astha-meaning strong { color: var(--text); }
.astha-meaning em { font-style: normal; color: var(--indigo); font-weight: 600; }

/* ------------------------------------------------ sign-in pages (/login/*) */
/* The five sign-in screens. Page-scoped chrome only: every colour, radius and
   space comes from site.css tokens, and nothing here leaks to another page. */
.au-shell {
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
  display: grid; place-items: start center;
}
.au-card { width: min(440px, 100%); }
/* The header already shows the brand; the second copy above the form was clutter. */
.au-brand { display: none; }
.au-card-wide { width: min(620px, 100%); }
.au-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin-bottom: var(--sp-5); text-decoration: none; color: inherit;
}
.au-brand:hover { color: inherit; }
.au-mark {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--sky));
  color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.03em;
}
.au-name { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.au-tag {
  display: block; font-family: var(--mono); font-size: .6rem; color: var(--muted);
  font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
}
.au-head { text-align: center; margin-bottom: var(--sp-5); }
.au-head h1 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.au-head p { margin: 0; }
.au-body-pad { padding: var(--sp-6) var(--sp-5); }
.au-or {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0;
  color: var(--muted); font-family: var(--mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
}
.au-or::before, .au-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
#google-box { display: flex; justify-content: center; min-height: 44px; }
.au-pw { display: flex; align-items: stretch; gap: var(--sp-2); }
.au-pw .input { flex: 1 1 auto; min-width: 0; }
.au-eye {
  flex: none; width: 2.65rem; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.au-eye:hover { background: var(--surface-2); color: var(--text); }
.au-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.au-meter { display: flex; gap: 4px; margin-top: var(--sp-2); }
.au-meter i { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--surface-3); }
.au-meter.au-s1 i:nth-child(1) { background: var(--danger); }
.au-meter.au-s2 i:nth-child(-n+2) { background: var(--warn); }
.au-meter.au-s3 i:nth-child(-n+3) { background: var(--info); }
.au-meter.au-s4 i { background: var(--accent); }
.au-strength { display: block; font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); }
.au-foot { text-align: center; margin-top: var(--sp-4); font-size: var(--step--1); color: var(--muted); }
.au-foot a { font-weight: 550; }
.au-foot + .au-foot { margin-top: var(--sp-2); }
.au-links { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
/* Designed success / failure states: an icon beside the words, never a bare dump. */
.au-state { display: flex; gap: var(--sp-4); align-items: flex-start; text-align: left; }
.au-state-icon {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow);
}
.au-state-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.au-state-body { min-width: 0; flex: 1 1 auto; }
.au-state-body h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.au-state-body > :last-child { margin-bottom: 0; }
.au-state-body .btn { margin-top: var(--sp-3); }
.panel-err .au-state-body h2 { color: var(--danger); }
@media (max-width: 859px) {
  .au-shell { padding: var(--sp-5) var(--sp-3) var(--sp-7); }
  .au-body-pad { padding: var(--sp-5) var(--sp-4); }
}

/* Numbered process steps (service pages). */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: none;
}
.steps li { position: relative; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.steps li h3 { margin: var(--sp-2) 0; }
.steps li p { margin: 0; }
.step-no {
  font-family: var(--display); font-size: var(--step-3); font-weight: 600; line-height: 1; letter-spacing: -.03em;
  color: transparent; background: linear-gradient(100deg, var(--indigo), var(--sky));
  -webkit-background-clip: text; background-clip: text;
}
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Scroll reveal (shell.js adds .reveal only to content below the fold). */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* Home page: each section enters its own way. Transform + opacity only, so scrolling stays smooth. */
.statement .reveal:not(.in) { transform: scale(.94); }
.stats-band .reveal:not(.in) { transform: translateY(36px); }
#what-we-do .reveal:not(.in) { transform: translateX(-40px); }
#journey .reveal:not(.in) { transform: translateX(40px); }
#projects .reveal:not(.in) { transform: scale(.9); }
#services .reveal:not(.in) { transform: perspective(900px) rotateX(18deg) translateY(24px); transform-origin: top center; }
#shop .reveal { transition-timing-function: ease, cubic-bezier(.34,1.56,.64,1); }
#shop .reveal:not(.in) { transform: translateY(48px); }
#team .reveal:not(.in) { transform: rotate(-2.5deg) translateY(24px); }
#contact .reveal:not(.in) { transform: none; }
#what-we-do, #journey { overflow-x: clip; } /* sideways entries never add a horizontal scrollbar */

/* Floating WhatsApp */
.wa-fab {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + 54px); z-index: 65;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: var(--shadow-md); transition: transform .15s ease;
}
.wa-fab:hover { color: #fff; transform: scale(1.06); }
.wa-fab .icon { width: 20px; height: 20px; }
body.has-wa .to-top { bottom: calc(var(--sp-5) + 108px); }
@media print { .wa-fab { display: none; } }

/* Numbers band (home) */
.stats-band { padding: var(--sp-7) 0; border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-item strong {
  display: block; font-family: var(--display); font-size: clamp(2rem, 1rem + 3.2vw, 3.6rem); font-weight: 600; line-height: 1; white-space: nowrap;
  letter-spacing: -.04em; color: transparent;
  background: linear-gradient(100deg, var(--indigo), var(--blue) 55%, var(--sky));
  -webkit-background-clip: text; background-clip: text;
}
.stat-item span {
  display: block; margin-top: var(--sp-2); font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 859px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Back to top */
.to-top {
  position: fixed; right: var(--sp-5); bottom: calc(var(--sp-5) + 54px); z-index: 65;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--indigo), var(--blue)); color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent-600); }
.to-top .icon { width: 20px; height: 20px; }
@media print { .to-top { display: none; } }

/* Products & Services dropdown */
.nav-drop { position: relative; }
.nav-drop summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .3rem;
  padding: .45rem .75rem; border-radius: var(--radius-pill);
  color: var(--muted); font-weight: 500; font-size: .9rem; white-space: nowrap;
  transition: color .15s ease;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary:hover, .nav-drop[open] summary { color: var(--text); }

.nav-drop summary .icon { width: 1em; height: 1em; transition: transform .18s ease; }
.nav-drop[open] summary .icon { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute; top: calc(100% + .7rem); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5);
  width: min(520px, calc(100vw - 32px)); padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: ya-pop .16s ease-out;
}
.nav-drop-panel .eyebrow { margin-bottom: var(--sp-2); }
.nav-links .nav-drop-panel a {
  display: block; padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--text);
}
.nav-drop-panel a strong { display: block; font-weight: 600; }
.nav-drop-panel small { display: block; color: var(--muted); font-weight: 400; }
.nav-links .nav-drop-panel a:hover { background: var(--surface-2); }
/* Right side of the nav: icon-only cart and login, set apart from the page links. */
.nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--border); }
.cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-links a.cart-btn { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; }
.nav-links a.cart-btn .icon { width: 19px; height: 19px; }
.nav-links a.cart-btn:hover { background: var(--surface-2); }


/* Light / dark switch: floating in the bottom-right corner. */
.theme-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 65;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); transition: color .15s ease, border-color .15s ease;
}
.theme-fab:hover { color: var(--indigo); border-color: var(--indigo); }
.theme-fab .icon { width: 18px; height: 18px; }
@media print { .theme-fab { display: none; } }
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font-size: .66rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding: clamp(4rem, 2rem + 8vw, 9rem) 0 var(--sp-8);
}
/* The second line of the big hero heading picks up the gradient. */
.hero h1 .dim {
  opacity: 1; color: transparent;
  background: linear-gradient(100deg, var(--indigo) 0%, var(--blue) 55%, var(--sky) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero h1 { font-size: var(--step-4); letter-spacing: -.045em; line-height: 1; font-weight: 600; }
.hero h1 .dim { font-weight: 400; }
/* One typeface across the whole hero: heading, labels, text, card and buttons. */
.hero, .hero * { font-family: var(--font); }
.hero .eyebrow { letter-spacing: .12em; }
.hero .lead { max-width: 46ch; }
.hero-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1.4fr .6fr; align-items: end; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

/* --------------------------------------------------------- app / sidebar */

.side { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: var(--sp-3); padding: .55rem .8rem;
  border-radius: var(--radius-sm); color: var(--muted); text-decoration: none;
  font-weight: 650; border: none; background: none; font: inherit; cursor: pointer;
  text-align: left; width: 100%;
  transition: background .13s ease, color .13s ease;
}
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.on { background: var(--brand); color: #fff; }
.side-link.on svg { color: #fff; }
.app-shell {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--sp-5);
  align-items: start; padding: var(--sp-5) 0;
}

/* ---------------------------------------------------------------- footer */

.footer {
  --text: #ffffff; --text-2: #c7cdf5; --muted: #9aa3d9; --border: rgba(255,255,255,.12);
  color: var(--text-2);
  background:
    linear-gradient(160deg, #1e1b4b, #312e81 60%, #1e3a8a); border-top: 1px solid var(--border);
  padding: var(--sp-6) 0 var(--sp-4); margin-top: var(--sp-7);
}
.footer-grid { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
.footer p { margin: 0 0 var(--sp-2); }
.footer h4 {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-1); }
.footer a { color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
.footer-popular { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-4) !important; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--step--1); }
.footer-popular span { color: var(--muted); }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-base {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--step--1); color: var(--muted);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 859px) {
  .wrap { padding: 0 var(--sp-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

  .nav-toggle {
    display: inline-flex; margin-left: auto; width: 40px; height: 40px;
    align-items: center; justify-content: center; border: 1px solid var(--border-strong);
    background: var(--surface); border-radius: var(--radius-sm); cursor: pointer;
    font-size: 1.2rem; color: var(--text);
  }
  .nav-inner { position: relative; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; border-radius: var(--radius-lg);
    flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3); margin-top: var(--sp-2); box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .65rem .8rem; }
  .nav-drop summary { padding: .65rem .8rem; justify-content: space-between; }
  .nav-actions { margin: var(--sp-2) 0 0; padding: var(--sp-3) .8rem 0; border-left: 0; border-top: 1px solid var(--border); justify-content: space-between; }
  .nav-links a.on::after, .nav-drop summary.on::after { left: .2rem; bottom: auto; top: 50%; margin: -2px 0 0; }
  .theme-fab, .to-top { right: var(--sp-4); }
  .theme-fab { bottom: var(--sp-4); }
  .to-top { bottom: calc(var(--sp-4) + 52px); }
  .wa-fab { right: var(--sp-4); bottom: calc(var(--sp-4) + 52px); }
  body.has-wa .to-top { bottom: calc(var(--sp-4) + 104px); }
  .nav-drop-panel {
    position: static; transform: none; width: auto; grid-template-columns: 1fr;
    gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); box-shadow: none; border: none; animation: none;
  }
  .cart-count { position: static; display: inline-grid; margin-left: var(--sp-2); box-shadow: none; }

  /* Tables turn into cards, each cell labelled by its column. */
  .table-wrap { border: none; background: none; overflow: visible; }
  .table.stack-mobile thead { display: none; }
  .table.stack-mobile tbody tr {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: var(--sp-3); padding: var(--sp-2); box-shadow: var(--shadow);
  }
  .table.stack-mobile tbody tr:hover { background: var(--surface); }
  .table.stack-mobile tbody td {
    display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
    border-bottom: 1px dashed var(--border); padding: var(--sp-2) var(--sp-3);
  }
  .table.stack-mobile tbody tr td:last-child { border-bottom: none; }
  .table.stack-mobile tbody td::before {
    content: attr(data-label); font-size: var(--step--1); font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  }
  .table.stack-mobile .num { text-align: right; }

  .stepper li { min-width: 0; flex-basis: 33%; }
  .drawer { width: 100%; border-left: none; }
  .qty input { width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spinner { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

@media print {
  .nav, .footer, .toast-host, .btn, .rail { display: none !important; }
  body { background: #fff; }
  .card, .table-wrap { box-shadow: none; border-color: #ccc; }
}
/* "Sold by" card on the shop pages: who the buyer is paying, with the GSTIN. */
.seller-card {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.seller-icon { flex: none; color: var(--accent-600); }
.seller-icon .icon { width: 26px; height: 26px; }
.seller-card p { margin: 0; }
.seller-name { font-size: var(--step-0); }
.seller-line { margin-top: .25rem !important; font-size: var(--step--1); color: var(--text-2); overflow-wrap: anywhere; }
.seller-card .mono { font-family: var(--font-mono, monospace); letter-spacing: .02em; }

/* The shop's current offer, set from the staff panel, across the top of every shop page. */
.offer-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: .6rem var(--sp-4);
  background: linear-gradient(90deg, #4338ca, #3730a3); /* fixed: stays dark in both themes */
  color: #fff; font-weight: 600; font-size: var(--step--1); text-align: center;
}
.offer-bar .icon { width: 16px; height: 16px; flex: none; }

/* "More from Your Astha" strip above the footer */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.explore-card { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.explore-card:hover { border-color: var(--brand); transform: translateY(-2px); color: inherit; }
.explore-card strong { display: block; }
.explore-card .muted { display: block; font-size: var(--step--1); }
.explore-card .stat-icon { flex: none; }
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-5); font-weight: 600; font-size: var(--step--1); }
.trust-strip span { display: inline-flex; align-items: center; gap: .45rem; }
.trust-strip .icon { width: 18px; height: 18px; color: var(--brand); flex: none; }