/* ==========================================================================
   OMINI / OMNI COMMERCE - DESIGN SYSTEM
   One stylesheet for public, buyer, seller and admin surfaces.
   Mobile-first. High contrast. Dark, opaque navigation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6ff;
  --brand-200: #bed1ff;
  --brand-300: #93b1ff;
  --brand-400: #6086fb;
  --brand-500: #3b5ff0;
  --brand-600: #2544d6;
  --brand-700: #1e35ac;
  --brand-800: #1d3089;
  --brand-900: #1d2d6d;

  --accent-400: #f7a325;
  --accent-500: #e8890b;
  --accent-600: #c26a06;

  /* Neutrals */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f7f8fa;
  --n-100: #eef0f4;
  --n-200: #e0e3ea;
  --n-300: #c8ccd8;
  --n-400: #98a0b3;
  --n-500: #6b748c;
  --n-600: #4d5568;
  --n-700: #363d4d;
  --n-800: #232936;
  --n-900: #151a23;
  --n-950: #0d1117;

  /* Semantic */
  --ok-50:   #e9f9f0;  --ok-500:   #0f9d58;  --ok-700:   #0b7a44;
  --warn-50: #fff6e5;  --warn-500: #d98207;  --warn-700: #a86206;
  --err-50:  #fdecec;  --err-500:  #d92d20;  --err-700:  #a91f16;
  --info-50: #e8f2ff;  --info-500: #1570ef;  --info-700: #0f57bb;

  /* Surfaces */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-alt:   var(--n-25);
  --surface-sunk:  var(--n-100);
  --border:        var(--n-200);
  --border-strong: var(--n-300);

  /* Text */
  --text:        var(--n-900);
  --text-muted:  var(--n-600);
  --text-subtle: var(--n-500);
  --text-invert: var(--n-0);

  /* Dark navigation shell - deliberately opaque, never translucent */
  --nav-bg:         #12161f;
  --nav-bg-2:       #171c27;
  --nav-border:     #262c3a;
  --nav-text:       #e7eaf1;
  --nav-text-muted: #a4adc0;
  --nav-hover-bg:   #212837;
  --nav-active-bg:  #2544d6;
  --nav-active-text:#ffffff;

  /* Geometry */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;  --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sh-md: 0 4px 10px -2px rgba(16,24,40,.08), 0 2px 6px -2px rgba(16,24,40,.05);
  --sh-lg: 0 12px 24px -6px rgba(16,24,40,.12), 0 4px 10px -4px rgba(16,24,40,.06);
  --sh-xl: 0 24px 48px -12px rgba(16,24,40,.18);

  --ring: 0 0 0 3px rgba(59,95,240,.28);

  /* Layout. --container and --content-w widen on large displays so a 2560px
     screen does not render a 1280px column between two empty gutters. */
  --sidebar-w: 264px;
  --topbar-h: 60px;
  --container: 1280px;
  --content-w: 1400px;

  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 200ms cubic-bezier(.4,0,.2,1);

  /* "Inter"/"Plus Jakarta Sans" are progressive enhancement: the page is
     designed to look right on the fallback stack if the font never loads. */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   1b. LARGE-DISPLAY SCALE
   Width breakpoints stay in px, so raising the root font size here rescales
   type without shifting any breakpoint. Spacing tokens stay fixed on purpose:
   growing gaps as well as type makes a wide page feel emptier, not fuller.
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) { :root { --container: 1440px; --content-w: 1460px; } }
@media (min-width: 1800px) {
  :root { --container: 1680px; --content-w: 1620px; --sidebar-w: 284px; }
  html { font-size: 17px; }
}
@media (min-width: 2200px) {
  :root { --container: 1980px; --content-w: 1820px; --sidebar-w: 300px; }
  html { font-size: 18px; }
}
@media (min-width: 2560px) {
  :root { --container: 2200px; --content-w: 1960px; }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: .9375rem;   /* 15px at the default root; scales with the root above */
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 {
  margin: 0 0 var(--sp-3); font-family: var(--font-display);
  font-weight: 700; line-height: 1.2; letter-spacing: -.022em; color: var(--text);
}
h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.1875rem; }
h4 { font-size: 1rem; } h5 { font-size: .9375rem; } h6 { font-size: .875rem; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }
ul, ol { margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
code, pre, kbd { font-family: var(--font-mono); font-size: .875em; }
code { background: var(--surface-sunk); padding: 1px 5px; border-radius: var(--r-xs); }
pre { background: var(--n-900); color: #e6e9f0; padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--brand-200); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.container-narrow { max-width: 780px; }
.container-tight  { max-width: 520px; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.row-between { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.row-center { display: flex; align-items: center; gap: var(--sp-2); }
.row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.grow { flex: 1 1 auto; min-width: 0; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Product grids use fixed column counts rather than auto-fill so a row is never
   left with a stray card or two. Every count divides the 24 items the
   storefront rows fetch: 2, 3, 4, 6, 8. Column tiers change in step with the
   container tiers above, so card width stays in the 220-260px band from a
   phone up to a 4K display - a wide screen shows more products, not bigger ones. */
.grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 560px)  { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 960px)  { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .grid-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 2200px) { .grid-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* Opt-in trim for the storefront's showcase rows, which fetch 24 products and
   show whatever fills exactly three rows at the current column count. Never put
   this on a paginated listing - it would hide real results. */
.grid-trim > :nth-child(n + 9) { display: none; }
@media (min-width: 560px) {
  .grid-trim > :nth-child(-n + 9)  { display: flex; }
  .grid-trim > :nth-child(n + 10)  { display: none; }
}
@media (min-width: 960px) {
  .grid-trim > :nth-child(-n + 12) { display: flex; }
  .grid-trim > :nth-child(n + 13)  { display: none; }
}
@media (min-width: 1536px) {
  .grid-trim > :nth-child(-n + 18) { display: flex; }
  .grid-trim > :nth-child(n + 19)  { display: none; }
}
@media (min-width: 2200px) {
  .grid-trim > :nth-child(-n + 24) { display: flex; }
}

.page-header {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.page-header h1 { margin: 0; font-size: 1.5rem; }
.page-header .sub { color: var(--text-muted); font-size: .875rem; margin-top: 2px; }

.section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle); margin: 0 0 var(--sp-3);
}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card-pad { padding: var(--sp-5); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1rem; }
.card-body { padding: var(--sp-5); }
.card-body-tight { padding: var(--sp-4); }
.card-foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card-hover { transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base); }
.card-hover:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: var(--border-strong); }

/* Premium gradient card used for hero / upsell surfaces */
.card-premium {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, #5b7bff 100%);
  color: #fff; border: 0;
  box-shadow: var(--sh-lg);
}
.card-premium h1, .card-premium h2, .card-premium h3, .card-premium h4 { color: #fff; }
.card-premium::after {
  content: ""; position: absolute; inset: auto -60px -90px auto;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.card-premium .muted, .card-premium p { color: rgba(255,255,255,.86); }

/* Stat tile */
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--sh-xs);
}
.stat .stat-label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.stat .stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; color: var(--text); }
.stat .stat-meta { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.stat.is-ok   .stat-value { color: var(--ok-700); }
.stat.is-warn .stat-value { color: var(--warn-700); }
.stat.is-err  .stat-value { color: var(--err-700); }

/* --------------------------------------------------------------------------
   5. BUTTONS  (min 44px touch target on coarse pointers)
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--n-0); --btn-fg: var(--text); --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 16px; min-height: 40px;
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; box-shadow: var(--sh-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.btn-primary { --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-bd: var(--brand-600); }
.btn-primary:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); color: #fff; }
.btn-dark    { --btn-bg: var(--n-900); --btn-fg: #fff; --btn-bd: var(--n-900); }
.btn-dark:hover { --btn-bg: var(--n-800); color: #fff; }
.btn-success { --btn-bg: var(--ok-500); --btn-fg: #fff; --btn-bd: var(--ok-500); }
.btn-success:hover { --btn-bg: var(--ok-700); color: #fff; }
.btn-danger  { --btn-bg: var(--err-500); --btn-fg: #fff; --btn-bd: var(--err-500); }
.btn-danger:hover { --btn-bg: var(--err-700); color: #fff; }
.btn-warn    { --btn-bg: var(--warn-500); --btn-fg: #fff; --btn-bd: var(--warn-500); }
.btn-accent  { --btn-bg: var(--accent-500); --btn-fg: #fff; --btn-bd: var(--accent-500); }
.btn-ghost   { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-muted); }
.btn-ghost:hover { --btn-bg: var(--surface-sunk); --btn-fg: var(--text); }
.btn-outline-danger { --btn-bg: transparent; --btn-fg: var(--err-700); --btn-bd: #f3b9b4; }
.btn-outline-danger:hover { --btn-bg: var(--err-50); color: var(--err-700); }

.btn-sm { padding: 6px 12px; min-height: 32px; font-size: .8125rem; }
.btn-lg { padding: 13px 22px; min-height: 48px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: 8px; min-height: 36px; min-width: 36px; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* Busy state driven by JS (data-busy) */
.btn[data-busy="1"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[data-busy="1"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: #fff; animation: spin .6s linear infinite;
}
.btn-ghost[data-busy="1"]::after, .btn:not([class*="btn-primary"]):not(.btn-dark):not(.btn-success):not(.btn-danger)[data-busy="1"]::after { color: var(--text-muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--n-700); margin-bottom: 6px;
}
.label .req { color: var(--err-500); margin-left: 2px; }
.hint { font-size: .8125rem; color: var(--text-subtle); margin-top: 5px; }

.input, .select, .textarea {
  display: block; width: 100%;
  padding: 10px 12px; min-height: 42px;
  font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--n-0);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b748c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input::placeholder, .textarea::placeholder { color: var(--n-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunk); color: var(--text-subtle); cursor: not-allowed; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--err-500); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.22); }
.field-error { display: block; font-size: .8125rem; color: var(--err-700); margin-top: 5px; font-weight: 500; }

@media (pointer: coarse) {
  .input, .select, .textarea { min-height: 46px; font-size: 16px; } /* prevents iOS zoom */
}

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .addon {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--surface-sunk); border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-muted); font-size: .875rem; white-space: nowrap;
}
.input-group .addon:first-child { border-left: 1px solid var(--border-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .addon:first-child + .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; padding: 4px 0; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--brand-600); cursor: pointer;
}
.check .check-label { font-size: .9375rem; }
.check .check-desc { font-size: .8125rem; color: var(--text-muted); }

/* Segmented radio cards (plan pickers, mode switches) */
.choice-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.choice:hover { border-color: var(--brand-300); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice input:checked ~ .choice-body { color: var(--brand-800); }
.choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); box-shadow: var(--sh-sm); }
.choice-title { font-weight: 700; }
.choice-meta { font-size: .8125rem; color: var(--text-muted); }

.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 26px; border-radius: var(--r-full); background: var(--n-300);
  transition: background var(--t-base); flex: 0 0 auto; position: relative;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: var(--sh-sm); transition: transform var(--t-base);
}
.switch input:checked + .track { background: var(--ok-500); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }

.form-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.form-grid .span-2 { grid-column: 1 / -1; }

fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
legend { padding: 0 var(--sp-2); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); }

/* OTP input row */
.otp-row { display: flex; gap: var(--sp-2); }
.otp-row .input { text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; }

/* --------------------------------------------------------------------------
   7. STATUS CHIPS / BADGES
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 650; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip-plain::before { display: none; }

.chip-neutral { background: var(--n-100);   color: var(--n-700);    border-color: var(--n-200); }
.chip-success { background: var(--ok-50);   color: var(--ok-700);   border-color: #b7e6cb; }
.chip-warn    { background: var(--warn-50); color: var(--warn-700); border-color: #f4d9a4; }
.chip-danger  { background: var(--err-50);  color: var(--err-700);  border-color: #f5c2be; }
.chip-info    { background: var(--info-50); color: var(--info-700); border-color: #bcd7fb; }
.chip-brand   { background: var(--brand-50);color: var(--brand-700);border-color: var(--brand-200); }
.chip-dark    { background: var(--n-800);   color: #fff;            border-color: var(--n-800); }
.chip-lg { padding: 5px 12px; font-size: .8125rem; }

.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--err-500); color: #fff;
  border-radius: var(--r-full); font-size: .6875rem; font-weight: 700;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: var(--ok-500); } .dot-warn { background: var(--warn-500); }
.dot-err { background: var(--err-500); } .dot-off { background: var(--n-400); }

/* --------------------------------------------------------------------------
   8. ALERTS / BANNERS
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid transparent; font-size: .9375rem;
}
.alert h4 { margin: 0 0 2px; font-size: .9375rem; }
.alert p:last-child { margin-bottom: 0; }
.alert .alert-icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.alert-info    { background: var(--info-50); border-color: #bcd7fb; color: #103d7d; }
.alert-success { background: var(--ok-50);   border-color: #b7e6cb; color: #0a5c34; }
.alert-warn    { background: var(--warn-50); border-color: #f4d9a4; color: #7a4703; }
.alert-error   { background: var(--err-50);  border-color: #f5c2be; color: #8f1a13; }
.alert-neutral { background: var(--n-50);    border-color: var(--border); color: var(--n-700); }

/* Full-width status banner (KYC state, maintenance, etc.) */
.banner {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  border: 1px solid transparent; margin-bottom: var(--sp-5);
}
.banner .banner-main { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.banner .banner-title { font-weight: 700; margin: 0 0 2px; }
.banner .banner-text { font-size: .875rem; margin: 0; opacity: .92; }
.banner-warn    { background: var(--warn-50); border-color: #f0cd8c; color: #7a4703; }
.banner-info    { background: var(--info-50); border-color: #b3d1fa; color: #103d7d; }
.banner-success { background: var(--ok-50);   border-color: #a9e0c1; color: #0a5c34; }
.banner-danger  { background: var(--err-50);  border-color: #f2b4af; color: #8f1a13; }

.toast-stack {
  position: fixed; z-index: 1200; right: var(--sp-4); bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--n-900); color: #fff; box-shadow: var(--sh-xl);
  font-size: .875rem; animation: toast-in .22s cubic-bezier(.2,.9,.3,1.2);
}
.toast-success { background: #0b6b3c; } .toast-error { background: #96201a; } .toast-warn { background: #8a5203; }
.toast button { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .toast-stack { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); max-width: none; } }

/* --------------------------------------------------------------------------
   9. TABLES  (always scroll inside their own container)
   -------------------------------------------------------------------------- */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.table-wrap > .table { border: 0; border-radius: 0; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.table th, .table td { padding: 12px var(--sp-4); text-align: left; vertical-align: middle; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-alt); color: var(--n-600);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table tbody td { border-bottom: 1px solid var(--n-100); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--n-25); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table-compact th, .table-compact td { padding: 8px var(--sp-3); }
.table a { font-weight: 600; }

.cell-primary { font-weight: 600; color: var(--text); }
.cell-sub { font-size: .8125rem; color: var(--text-muted); }
.cell-mono { font-family: var(--font-mono); font-size: .8125rem; }

/* Card-per-row on small screens for data-heavy tables */
@media (max-width: 720px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    border: 1px solid var(--border); border-radius: var(--r-md);
    margin-bottom: var(--sp-3); padding: var(--sp-2); background: var(--surface);
  }
  .table-stack td { border: 0 !important; display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px var(--sp-2); text-align: right; }
  .table-stack td::before {
    content: attr(data-label); font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-subtle); text-align: left; flex: 0 0 auto;
  }
  .table-stack td.actions { justify-content: flex-end; }
  .table-wrap:has(.table-stack) { border: 0; background: transparent; overflow: visible; }
}

/* --------------------------------------------------------------------------
   10. EMPTY / LOADING / ERROR STATES
   -------------------------------------------------------------------------- */
.empty {
  text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--text-muted);
}
.empty .empty-icon {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--surface-sunk); color: var(--n-400);
}
.empty h3 { color: var(--text); margin-bottom: var(--sp-2); font-size: 1.0625rem; }
.empty p { max-width: 420px; margin-inline: auto; font-size: .9375rem; }
.empty .empty-actions { margin-top: var(--sp-5); }

.skeleton {
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 37%, var(--n-100) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-line { height: 12px; margin-bottom: 8px; }
.sk-line.w-40 { width: 40%; } .sk-line.w-60 { width: 60%; } .sk-line.w-80 { width: 80%; }
.sk-title { height: 20px; width: 45%; margin-bottom: 14px; }
.sk-card { height: 104px; border-radius: var(--r-lg); }
.sk-avatar { width: 40px; height: 40px; border-radius: 50%; }

.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--n-300); border-top-color: var(--brand-600);
  border-radius: 50%; animation: spin .65s linear infinite;
}
.loading-block { display: grid; place-items: center; padding: var(--sp-12); gap: var(--sp-3); color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The platform logo, wherever it appears: storefront header, console sidebar,
   auth screens, invoices. The artwork is a round mark on transparency, so it
   carries its own edge - no plate, no radius, no background behind it, or the
   corners of that plate would show through. */
.brand-mark {
  flex: 0 0 auto; display: block; object-fit: contain;
  width: 32px; height: 32px; background: none; border-radius: 0;
}

/* --------------------------------------------------------------------------
   11. APP SHELL - DARK SIDEBAR + TOPBAR
   -------------------------------------------------------------------------- */
.shell { min-height: 100vh; display: flex; background: var(--bg); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--nav-bg);            /* opaque, never translucent */
  border-right: 1px solid var(--nav-border);
  color: var(--nav-text);
  transform: translateX(-100%);
  transition: transform var(--t-base);
  overflow: hidden;
}
.sidebar.is-open { transform: none; box-shadow: var(--sh-xl); }

.sidebar-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding: 0 var(--sp-4); flex: 0 0 auto;
  border-bottom: 1px solid var(--nav-border);
  color: #fff; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em;
}
.sidebar-brand:hover { color: #fff; text-decoration: none; }
.sidebar-brand .brand-mark { width: 34px; height: 34px; }
.sidebar-brand .role-tag {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--nav-text-muted); display: block; line-height: 1.2;
}

.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-2) var(--sp-6); }
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #2c3444; border-radius: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

.nav-group { margin-bottom: var(--sp-4); }
.nav-group-label {
  padding: var(--sp-2) var(--sp-3) 6px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #7d879c;                       /* readable on the dark shell */
}
.nav-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3); margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--nav-text);               /* full-strength, not faded */
  font-size: .9375rem; font-weight: 500; line-height: 1.3;
  text-decoration: none; min-height: 42px;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-link:hover { background: var(--nav-hover-bg); color: #fff; text-decoration: none; }
.nav-link.is-active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
.nav-link.is-active .nav-icon { color: #fff; opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--nav-text-muted); opacity: .95; }
.nav-link:hover .nav-icon { color: #fff; }
.nav-link .nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .badge-count { flex: 0 0 auto; }
.nav-link.is-locked { color: #8a93a6; }
.nav-link.is-locked:hover { background: var(--nav-hover-bg); color: #b9c1d1; }
.nav-lock { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }

.sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--nav-border); padding: var(--sp-3); background: var(--nav-bg-2); }
.sidebar-user { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.sidebar-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-600); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8125rem; flex: 0 0 auto; }
.sidebar-user .who { min-width: 0; flex: 1 1 auto; }
.sidebar-user .who .name { font-size: .875rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who .mail { font-size: .75rem; color: var(--nav-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Workspace switcher -------------------------------------------------------
   The account row becomes a menu trigger when one login reaches more than one
   console. The menu opens UPWARDS, and it lives inside .sidebar-foot, so it
   stays within the sidebar's own box - which matters because .sidebar is
   overflow:hidden and would otherwise clip it. */
.ws-switch { position: relative; }

.sidebar-user-btn {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  /* Vertical pull only. Left padding is left to stand, so the avatar lines up
     with the menu's rows above it. */
  padding: 6px; margin: -6px 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast);
}
.sidebar-user-btn:hover,
.sidebar-user-btn[aria-expanded="true"] { background: var(--nav-hover-bg); }
.sidebar-user-btn .who,
.sidebar-user-btn .who .name,
.sidebar-user-btn .who .mail { display: block; }
.ws-caret { flex: 0 0 auto; color: var(--nav-text-muted); transition: transform var(--t-fast); }
.sidebar-user-btn[aria-expanded="true"] .ws-caret { transform: rotate(180deg); }

.ws-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 70;
  padding: 6px;                          /* matches .sidebar-user-btn's padding */
  background: var(--nav-bg-2);
  border: 1px solid var(--nav-border); border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.ws-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.ws-menu-label {
  padding: 6px 6px 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7d879c;
}
.ws-menu-sep { height: 1px; margin: 6px 0; background: var(--nav-border); }

.ws-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 6px; border-radius: var(--r-sm);
  color: var(--nav-text); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.ws-item:hover { background: var(--nav-hover-bg); color: #fff; text-decoration: none; }
.ws-item.is-current { background: var(--nav-active-bg); color: var(--nav-active-text); }
.ws-item-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--nav-text-muted); }
.ws-item:hover .ws-item-icon,
.ws-item.is-current .ws-item-icon { color: #fff; }
.ws-item-text { flex: 1 1 auto; min-width: 0; }
.ws-item-text .t { display: block; font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item-text .m { display: block; font-size: .75rem; color: var(--nav-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item.is-current .ws-item-text .m { color: rgba(255,255,255,.8); }
.ws-item-mark { flex: 0 0 auto; opacity: .55; }
.ws-item:hover .ws-item-mark { opacity: 1; }
.ws-item.is-current .ws-item-mark { opacity: 1; }
.ws-item-plain .ws-item-text .t { font-weight: 500; }

.sidebar-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(13,17,23,.55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .topbar-title { font-weight: 650; font-size: 1rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hamburger {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; color: var(--text); flex: 0 0 auto;
}
.hamburger:hover { background: var(--surface-sunk); }

.content { flex: 1 1 auto; padding: var(--sp-5) var(--sp-4) var(--sp-12); width: 100%; max-width: var(--content-w); margin-inline: auto; }

@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .sidebar-overlay { display: none; }
  .main { margin-left: var(--sidebar-w); }
  .hamburger { display: none; }
  .content { padding: var(--sp-6) var(--sp-6) var(--sp-16); }
}

/* Mobile bottom tab bar for seller/buyer shells */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  display: flex; background: var(--nav-bg); border-top: 1px solid var(--nav-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; color: var(--nav-text-muted); font-size: .6875rem; font-weight: 600;
  text-decoration: none; min-height: 54px; justify-content: center;
}
.tabbar a.is-active { color: #fff; }
.tabbar a.is-active svg { color: var(--brand-400); }
.tabbar svg { width: 20px; height: 20px; }
@media (min-width: 1024px) { .tabbar { display: none; } }
body.has-tabbar .content { padding-bottom: 84px; }
@media (min-width: 1024px) { body.has-tabbar .content { padding-bottom: var(--sp-16); } }

/* --------------------------------------------------------------------------
   12. PUBLIC SITE HEADER / FOOTER
   -------------------------------------------------------------------------- */
/* Storefront announcement strip. The one dark band above an otherwise light
   header, so the promise line reads as a banner and not as page content. */
.announce {
  background: var(--nav-bg); color: #dfe4ee;
  font-size: .78125rem; line-height: 1.4; font-weight: 500;
  padding: 9px 0; text-align: center;
}
.announce .sep { color: #5a6376; margin: 0 8px; }
@media (max-width: 560px) { .announce { font-size: .71875rem; padding: 8px 0; } }

/* The public header is light: white plate, centred pill search, and a second
   row of catalogue links. The dark shell is reserved for the consoles. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.site-header a { color: var(--text); }
.site-header .header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 68px; }
.site-header .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.125rem; color: var(--text); letter-spacing: -.025em; flex: 0 0 auto; }
.site-header .logo:hover { text-decoration: none; }
.site-header .logo .brand-mark { width: 34px; height: 34px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: 0 0 auto; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  color: var(--nav-text); background: transparent; border: 1px solid transparent; cursor: pointer;
}
.icon-btn:hover { background: var(--nav-hover-bg); color: #fff; text-decoration: none; }
.icon-btn .badge-count { position: absolute; top: 2px; right: 2px; }
/* Header icons sit on white here, so they take the light treatment. */
.site-header .icon-btn { color: var(--text); border-radius: var(--r-md); }
.site-header .icon-btn:hover { background: var(--surface-sunk); color: var(--brand-700); }

/* Row two: primary storefront links, a divider, then the live categories. It
   scrolls sideways on a phone rather than wrapping into a three-line block. */
.shop-nav { border-top: 1px solid var(--border); }
.shop-nav-inner {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.shop-nav-inner::-webkit-scrollbar { display: none; }
.shop-nav a {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 13px 12px; font-size: .875rem; font-weight: 550;
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.shop-nav a:hover { color: var(--brand-600); text-decoration: none; }
.shop-nav a.is-active { color: var(--brand-700); font-weight: 700; border-bottom-color: var(--brand-600); }
.shop-nav .nav-gap { flex: 0 0 auto; width: 1px; height: 20px; background: var(--border); margin: 0 14px; }
@media (max-width: 720px) {
  .shop-nav a { padding: 11px 10px; font-size: .8125rem; }
  .shop-nav .nav-gap { margin: 0 8px; }
}

/* Category menu. The toggle leads the catalogue row; the panel hangs below the
   header (outside the sideways-scrolling row, which would clip it). Desktop: a
   mega-menu, departments on the left and the current one's categories beside
   them. Phone: a full-screen drawer listing every department with its
   categories. Built server-side from the category tree (render_category_menu). */
.catmenu-toggle {
  /* A snap point of its own: without one the row's scroll-snap settles on the
     first link after load, scrolling this button out of view. */
  scroll-snap-align: start;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 10px 6px 0; padding: 7px 12px; border-radius: var(--r-md);
  background: var(--brand-600); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 650;
}
.catmenu-toggle:hover, .catmenu-toggle[aria-expanded="true"] { background: var(--brand-700); }
.catmenu-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* Category picker on the product forms (render_category_picker). The plain
   select stays in the form - it is what posts - but is hidden once the script
   has built the picker around it. */
.catpick-hidden {
  position: absolute !important; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
}
.catpick { position: relative; }
.catpick-ui { display: grid; gap: 10px; min-width: 0; }
.catpick-ui.is-invalid .catpick-levels .select { border-color: var(--err-500); }
.catpick-levels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.catpick-level { min-width: 0; }
.catpick-level .label { margin-bottom: 4px; }
.catpick-results {
  display: grid; max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.catpick-results[hidden] { display: none; }
.catpick-hit {
  text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; font-size: .875rem; cursor: pointer;
}
.catpick-hit:last-child { border-bottom: 0; }
.catpick-hit:hover, .catpick-hit:focus-visible { background: var(--surface-sunk); outline: none; }
.catpick-empty { padding: 10px 12px; }
.catpick-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.catpick-chip { cursor: pointer; border: 0; font: inherit; font-size: .8125rem; }
.catpick-crumb { font-size: .875rem; overflow-wrap: anywhere; }

.catmenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35);
}
.catmenu[hidden] { display: none; }
.catmenu-inner { position: relative; padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.catmenu-head { display: none; }
.catmenu ul { list-style: none; margin: 0; padding: 0; }
.catmenu-depts { width: 280px; min-height: 260px; border-right: 1px solid var(--border); }
.catmenu-dept-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r-sm); font-weight: 600; font-size: .9375rem;
}
.catmenu-dept-link:hover { text-decoration: none; }
.catmenu-dept-link .ic {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  color: hsl(var(--ch) 60% 38%); background: hsl(var(--ch) 80% 95%);
}
.catmenu-dept-link .nm { flex: 1 1 auto; }
.catmenu-dept-link .go { color: var(--text-subtle); }
.catmenu-dept.is-current > .catmenu-dept-link { background: var(--surface-sunk); color: var(--brand-700); }
.catmenu-sub {
  display: none; position: absolute; top: var(--sp-4); left: calc(280px + var(--sp-6));
  right: var(--sp-4); max-height: 420px; overflow-y: auto;
}
.catmenu-dept.is-current > .catmenu-sub { display: block; }
.catmenu-sub ul { columns: 3 180px; column-gap: var(--sp-6); margin-top: var(--sp-3); }
.catmenu-sub li { break-inside: avoid; }
.catmenu-sub li a { display: block; padding: 6px 0; color: var(--text-muted); font-size: .9375rem; }
.catmenu-sub li a:hover { color: var(--brand-600); }
.catmenu-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--brand-700) !important; }
.catmenu-footer { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: .875rem; font-weight: 600; color: var(--brand-700) !important; }

@media (max-width: 767px) {
  .catmenu {
    position: fixed; inset: 0; z-index: 90; overflow-y: auto; border: 0; box-shadow: none;
  }
  body.catmenu-open { overflow: hidden; }
  .catmenu-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; background: var(--surface); padding: 6px 0 12px;
    border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); font-size: 1.0625rem;
  }
  .catmenu-depts { width: auto; min-height: 0; border-right: 0; }
  .catmenu-dept { border-bottom: 1px solid var(--border); padding: 4px 0 10px; }
  .catmenu-dept-link .go { display: none; }
  .catmenu-dept.is-current > .catmenu-dept-link { background: transparent; color: var(--text); }
  .catmenu-sub { display: block; position: static; max-height: none; padding-left: 52px; }
  .catmenu-sub ul { columns: 2 130px; margin-top: 4px; }
  .catmenu-all { font-size: .875rem; }
}

/* Product page variant picker. A struck-through option is one that makes no
   in-stock variant with what is already chosen; it stays clickable, because
   choosing it is how a shopper changes the other axis. */
.variant-axis + .variant-axis { margin-top: var(--sp-4); }
.variant-axis-label { font-size: .875rem; color: var(--text-muted); margin-bottom: 8px; }
.variant-axis-label strong { color: var(--text); }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-opt {
  min-width: 44px; padding: 8px 14px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: .9375rem; font-weight: 550;
}
.variant-opt:hover { border-color: var(--brand-500); }
.variant-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.variant-opt.is-selected { border-color: var(--brand-600); background: var(--brand-50, #eef2ff); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-600); }
.variant-opt.is-unavailable { color: var(--text-subtle); text-decoration: line-through; border-style: dashed; }

/* Category page filters: brand, discount and the category's own fields, each a
   short scrollable list so a long option set never pushes the products away. */
.shop-facets {
  display: grid; gap: 14px var(--sp-5); margin-top: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.shop-facets .facet { border: 0; margin: 0; padding: 0; min-width: 0; }
.shop-facets legend { font-size: .8125rem; font-weight: 650; margin-bottom: 6px; color: var(--text); }
.shop-facets .facet-list { display: grid; gap: 4px; max-height: 190px; overflow-y: auto; padding-right: 4px; }
.shop-facets .check { margin: 0; }
.shop-facets .check-label { font-size: .875rem; }

/* Legacy dark inline nav. Kept for any page still emitting .site-nav. */
.site-nav { display: none; gap: var(--sp-1); }
.site-nav a { padding: 8px 12px; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 500; }
.site-nav a:hover { background: var(--surface-sunk); text-decoration: none; }

.search-bar { flex: 1 1 auto; max-width: 620px; position: relative; margin-inline: auto; }
.search-bar > svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none;
}
.search-bar .input {
  background: var(--n-50); border-color: var(--n-100); color: var(--text);
  min-height: 46px; padding-left: 46px; border-radius: var(--r-full);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-bar .input::placeholder { color: var(--text-subtle); }
.search-bar .input:hover { border-color: var(--border); }
.search-bar .input:focus { background: var(--surface); border-color: var(--brand-400); box-shadow: var(--ring); }

/* Type-ahead panel, hung under the bar it belongs to. Above the header's own
   z-index so it covers the catalogue row rather than being clipped by it. */
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  max-height: min(62vh, 460px); overflow-y: auto;
  padding: var(--sp-1) var(--sp-1) 0; /* no bottom pad: the sticky footer seals the edge */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl);
}
.ss-item { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 10px; border-radius: var(--r-md); color: var(--text); }
.ss-item:hover, .ss-item.is-active { background: var(--surface-sunk); text-decoration: none; }
.ss-thumb { width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-sunk); }
.ss-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-name { font-size: .875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-name mark { background: var(--brand-50); color: inherit; border-radius: 3px; padding: 0 1px; }
.ss-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.ss-cat { overflow: hidden; text-overflow: ellipsis; }
.ss-price { font-weight: 700; color: var(--text); }
.ss-meta s { color: var(--text-subtle); }
.ss-out { color: var(--err-700); font-weight: 600; }
.ss-empty { padding: 14px 12px; font-size: .875rem; color: var(--text-muted); }
/* Group labels for category / brand / product suggestions. */
.ss-head { display: block; padding: 8px 10px 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.ss-term { padding-top: 6px; padding-bottom: 6px; }
.ss-count { color: var(--text-subtle); }
/* Sticky, so the way through to the full result set is on screen even when
   the eight suggestions above it are still being scrolled. */
.ss-all {
  position: sticky; bottom: 0; display: block; margin-top: 2px; padding: 11px 10px;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: .8125rem; font-weight: 650; color: var(--brand-700); text-align: center;
}
.ss-all:hover, .ss-all.is-active { background: var(--surface-sunk); text-decoration: none; }

/* Phones: search stays on the one header row, between the mark and the cart,
   taking whatever width the fixed items leave. Tighter gaps and icon buttons
   buy that width back; the pill itself keeps its shape. */
@media (max-width: 767px) {
  .site-header .header-inner { gap: var(--sp-2); min-height: 60px; }
  .search-bar { min-width: 0; max-width: none; margin-inline: 0; }
  .search-bar > svg { left: 13px; }
  .search-bar .input { min-height: 42px; padding-left: 38px; padding-right: 10px; }
  .header-actions { gap: 2px; }

  /* Focused, search takes the whole row: the field is otherwise too narrow to
     read a query back in, let alone hang a result list under. Script adds the
     class on focus and drops it on Escape or a tap outside. */
  .site-header.is-searching .logo,
  .site-header.is-searching .header-actions { display: none; }
  .site-header.is-searching .search-bar { flex: 1 1 100%; }
  .search-suggest { top: calc(100% + 6px); max-height: min(70vh, 420px); }
  .ss-thumb { width: 40px; height: 40px; }
}

.site-footer { background: var(--n-950); color: #b8c0d0; margin-top: var(--sp-16); padding: var(--sp-12) 0 var(--sp-6); }
.site-footer h4 { color: #fff; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.site-footer a { color: #b8c0d0; font-size: .875rem; display: block; padding: 4px 0; }
.site-footer a:hover { color: #fff; }
/* A non-link line in a footer column (business hours). Matches the links'
   rhythm without pretending to be clickable. */
.site-footer .footer-note { color: #8d97a9; font-size: .8125rem; display: block; padding: 4px 0; }
.site-footer .footer-bottom { border-top: 1px solid #222836; margin-top: var(--sp-8); padding-top: var(--sp-5); font-size: .8125rem; color: #808a9d; display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; }

/* Brand + newsletter row above the link columns. Stacks on narrow screens so
   the email field never gets squeezed to an unusable width. */
.footer-top {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--sp-8); margin-bottom: var(--sp-8);
  border-bottom: 1px solid #222836;
}
.footer-brand { min-width: 220px; }
.footer-subscribe { width: 100%; max-width: 420px; }
.footer-subscribe .label { color: #fff; font-size: .875rem; margin-bottom: var(--sp-2); display: block; }
.footer-subscribe .input {
  background: #151a24; border-color: #2b3342; color: #e8ecf3;
}
.footer-subscribe .input::placeholder { color: #6d7688; }
.footer-subscribe .input:focus { border-color: var(--brand-500); }
.footer-subscribe .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .footer-subscribe .row-center { flex-wrap: wrap !important; }
  .footer-subscribe .btn { width: 100%; }
}

/* Registered entity, address and GSTIN. Set quieter than the link columns but
   still legible - it is a legal disclosure, not fine print to be hidden. */
.footer-legal {
  border-top: 1px solid #222836; margin-top: var(--sp-8); padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: 4px var(--sp-5);
  font-size: .8125rem; line-height: 1.6; color: #8d97a9;
}
.footer-legal address { font-style: normal; margin: 0; }
.footer-legal .fl-name { color: #e8ecf3; font-weight: 600; }
.footer-legal .mono { color: #b8c0d0; }
/* The bottom bar already has its own rule above this one; without the reset it
   would draw a second border immediately under this block's. */
.footer-legal + .footer-bottom { border-top: 0; margin-top: var(--sp-4); padding-top: 0; }

/* --------------------------------------------------------------------------
   13. PRODUCT / STOREFRONT
   -------------------------------------------------------------------------- */
.product-card {
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.product-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.product-card .thumb {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface-sunk);
}
/* contain, not cover: catalogue artwork is shot on a plain backdrop, and
   cropping it to fill the square cuts the ends off cables and stands. */
.product-card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 420ms cubic-bezier(.2,.7,.3,1); }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .thumb .thumb-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 2; }

/* Corner badges. Solid pills rather than the tinted .chip used elsewhere:
   they sit on photography, where a pale fill loses its edge. */
.pc-badge {
  display: inline-flex; align-items: center;
  padding: 4px 9px; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 750; line-height: 1.2; letter-spacing: -.01em;
  color: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.16);
}
.pc-badge-off  { background: var(--brand-600); }
.pc-badge-new  { background: var(--n-900); }
.pc-badge-out  { background: var(--n-500); }

/* Category label that fades in over the artwork on hover */
.product-card .pc-cat {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .6875rem; font-weight: 650; color: var(--text-muted);
  opacity: 0; transform: translateY(4px); transition: opacity var(--t-base), transform var(--t-base);
}
.product-card:hover .pc-cat { opacity: 1; transform: none; }

.product-card .pc-body { padding: 14px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.product-card .pc-brand {
  font-size: .75rem; font-weight: 500; color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card .pc-title {
  font-size: .875rem; font-weight: 600; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.product-card .pc-title:hover { color: var(--brand-700); text-decoration: none; }
.product-card .pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px; }
.product-card .price { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; }
.product-card .mrp { font-size: .8125rem; color: var(--text-subtle); text-decoration: line-through; }
/* Keep the low-stock hint on its own line so prices stay aligned across a row */
.product-card .pc-note { font-size: .6875rem; font-weight: 650; color: var(--warn-700); }

/* Add / Buy pair. Equal columns so the pills line up across a whole row even
   when one card's title wraps to two lines and its neighbour's does not.
   minmax(0, 1fr), never a bare 1fr: a bare 1fr floors the track at the
   button's min-content width, and two nowrap pills then push the card - and
   with it the whole grid and the page - wider than a phone viewport. */
.product-card .pc-actions { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.product-card .pc-actions .btn {
  border-radius: var(--r-full); min-height: 36px; padding: 7px 8px;
  font-size: .8125rem; font-weight: 650; gap: 5px;
  min-width: 0; overflow: hidden;
}
.product-card .pc-actions .btn svg { flex: 0 0 auto; }
/* One full-width button when the product cannot be bought right now. */
.product-card .pc-actions.is-single { grid-template-columns: minmax(0, 1fr); }
/* Two 2-up cards on a small phone leave roughly 150px of card width, which is
   under the pair's comfortable minimum, so they stack instead. */
@media (max-width: 470px) {
  .product-card .pc-body { padding: 11px; }
  .product-card .pc-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Product detail: gallery beside the buy box from 900px up. Must live here and
   not in a page-level <style>, which an inline grid-template on the same
   element would outrank. */
.pdp-grid { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); } }
@media (min-width: 1100px) { .pdp-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }

.gallery { display: grid; gap: var(--sp-3); }
.gallery .main-img { aspect-ratio: 1 / 1; background: var(--surface); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); }
.gallery .main-img img { width: 100%; height: 100%; object-fit: contain; }
.gallery .thumbs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; }
.gallery .thumbs button {
  flex: 0 0 auto; width: 66px; height: 66px; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--r-sm); background: var(--surface-sunk); cursor: pointer;
}
.gallery .thumbs button.is-active { border-color: var(--brand-600); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* Licence credit for a stock photograph. Present only when the image carries
   one, so it must not reserve space when it is absent. */
.img-credit { margin: 0; }
.img-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.qty-stepper button { width: 40px; height: 42px; border: 0; background: var(--surface); font-size: 1.125rem; cursor: pointer; color: var(--text); }
.qty-stepper button:hover { background: var(--surface-sunk); }
.qty-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.qty-stepper input { width: 52px; height: 42px; border: 0; border-inline: 1px solid var(--border); text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 46px + the 1px border on each side lands on 48px, so a large stepper is
   exactly as tall as the .btn-lg standing next to it. */
.qty-stepper-lg button, .qty-stepper-lg input { height: 46px; }

/* PDP buy box: the stepper and both CTAs share one grid, so "Add to cart" and
   "Buy now" keep the same width and the same left/right edges instead of the
   second one running the full width under the stepper. */
.pdp-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.pdp-actions .btn { width: 100%; }
.pdp-actions .pdp-buy { grid-column: 2; }
@media (max-width: 460px) {
  .pdp-actions { grid-template-columns: minmax(0, 1fr); }
  .pdp-actions .qty-stepper { justify-self: start; }
  .pdp-actions .pdp-buy { grid-column: 1; }
}

/* The buy column now runs well past the photo, so the photo follows it down -
   but only on a screen tall enough to show the whole gallery below the sticky
   header (about 116px); a shorter one would hide the thumbnails. */
@media (min-width: 900px) and (min-height: 820px) {
  .pdp-grid > .gallery { position: sticky; top: 132px; }
}

/* Delivery / returns / warranty / payment tiles under the buy buttons. */
.pdp-services {
  list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-3) 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2);
  border-block: 1px solid var(--border);
}
.pdp-services a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  padding: 8px 4px; border-radius: var(--r-md); text-align: center;
  color: var(--text); font-size: .75rem; line-height: 1.3;
}
.pdp-services a:hover { background: var(--surface-sunk); text-decoration: none; }
.pdp-services .ic {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px;
  border-radius: 50%; background: var(--brand-50); color: var(--brand-700);
}
.pdp-services strong { font-size: .8125rem; font-weight: 650; }
.pdp-services span:not(.ic) { color: var(--text-subtle); }

.pdp-highlights { margin-top: var(--sp-6); }
.pdp-highlights h2 { font-size: 1rem; margin: 0 0 var(--sp-3); }
.pdp-highlights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pdp-highlights li { position: relative; padding-left: 18px; line-height: 1.5; }
.pdp-highlights li::before {
  content: ""; position: absolute; left: 3px; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500);
}
.pdp-highlights .k { color: var(--text-muted); font-weight: 600; }
.pdp-more { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-3); font-size: .875rem; font-weight: 600; }

/* Below the fold: description, specification tables, compatibility, box. */
.pdp-section { scroll-margin-top: 132px; }
.pdp-section > h2 { font-size: 1.125rem; margin: 0 0 var(--sp-4); }
.pdp-section h3 {
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-subtle); margin: 0 0 var(--sp-3);
}
.spec-grid, .pdp-pair { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.spec-grid { gap: var(--sp-6); }
.pdp-pair { gap: var(--sp-8); }
@media (min-width: 900px) {
  .spec-grid.is-split, .pdp-pair.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* The wrapper carries the rounded border: a table's own overflow does not clip. */
.spec-table-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.spec-table th, .spec-table td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); line-height: 1.5;
}
.spec-table tr:last-child > * { border-bottom: 0; }
.spec-table th { width: 40%; background: var(--n-50); color: var(--text-muted); font-weight: 600; border-right: 1px solid var(--border); }
.spec-table td { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .spec-table th, .spec-table td { padding: 10px 11px; }
  .spec-table th { width: 44%; }
}
.pdp-list { margin: 0; padding-left: 20px; }
.pdp-list li { margin-bottom: 8px; line-height: 1.55; }
.pdp-list li:last-child { margin-bottom: 0; }
.pdp-list li::marker { color: var(--text-subtle); }
.pdp-box-list { list-style: none; padding-left: 0; }
.pdp-box-list li { display: flex; gap: 10px; align-items: flex-start; }
.pdp-box-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--ok-500); }

.filters-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface); font-size: .8125rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--brand-400); color: var(--brand-700); text-decoration: none; }
.filter-pill.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Shop refine panel (category chips + the filter card). Both show outright on
   a desktop; on a phone they collapse behind the toggle so a search lands on
   its results rather than on a screenful of controls. */
.refine-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.refine-btn { display: none; }
@media (min-width: 768px) { .refine-toggle { display: none; } }
@media (max-width: 767px) {
  .refine-btn { display: inline-flex; margin-bottom: var(--sp-4); }
  .refine-toggle:not(:checked) ~ .shop-refine { display: none; }
  .refine-toggle:focus-visible ~ .refine-btn { border-color: var(--brand-500); box-shadow: var(--ring); }
}

/* Sticky checkout / order summary */
.summary-sticky { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.summary-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; font-size: .9375rem; }
.summary-row.total { border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: 1.0625rem; font-weight: 750; }
.summary-row .label { color: var(--text-muted); }

/* Store hero (dedicated seller store) */
.store-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--n-800); margin-bottom: var(--sp-6); }
.store-hero .banner { height: 180px; background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); }
.store-hero .banner img { width: 100%; height: 100%; object-fit: cover; }
.store-hero .store-meta { display: flex; gap: var(--sp-4); align-items: flex-end; padding: var(--sp-4) var(--sp-5); background: var(--surface); border-top: 0; }
.store-hero .store-logo {
  width: 84px; height: 84px; border-radius: var(--r-lg); border: 3px solid var(--surface);
  background: var(--surface-sunk); margin-top: -46px; overflow: hidden; flex: 0 0 auto; box-shadow: var(--sh-md);
}
.store-hero .store-logo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .store-hero .banner { height: 240px; } }

/* --------------------------------------------------------------------------
   14. MODALS / DRAWERS
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(13,17,23,.6); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface); width: 100%; max-width: 560px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl); max-height: 92vh; display: flex; flex-direction: column;
  transform: translateY(24px); transition: transform var(--t-base);
}
.modal-backdrop.is-open .modal { transform: none; }
/* Nearly every modal here wraps its body AND its footer in one <form>, because
   the footer holds the submit button. That form is an ordinary block, so it
   breaks the flex column between .modal and the two parts that have to
   participate in it: .modal-body's overflow never engages, the form grows past
   max-height, and a tall one pushes its own Cancel/Save buttons off the bottom
   of the screen with no way to scroll to them. Making the form the column
   itself repairs every modal at once rather than per page. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Head and foot hold their size; the body is the only part that gives. */
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); flex: 0 0 auto; }
.modal-head h3 { margin: 0; font-size: 1.125rem; }
.modal-head .sub { font-size: .875rem; color: var(--text-muted); margin-top: 2px; }
/* min-height:0 is not redundant: a flex item defaults to min-height:auto, which
   refuses to shrink below its content, and overflow-y would never take effect. */
.modal-body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; background: var(--surface-alt); flex: 0 0 auto; }
.modal-foot .btn { flex: 1 1 auto; }
.modal-close { background: none; border: 0; cursor: pointer; color: var(--text-subtle); padding: 4px; line-height: 1; font-size: 1.5rem; }
.modal-close:hover { color: var(--text); }
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: var(--sp-5); }
  /* 92vh PLUS the backdrop's own padding is taller than the screen once the
     screen is short - a laptop at 720px, or any window that is not maximised -
     and the modal hangs a few pixels off the bottom with the backdrop unable
     to scroll. Measured against the space actually available instead. */
  .modal { border-radius: var(--r-xl); max-height: calc(100vh - var(--sp-5) * 2); }
  .modal-foot .btn { flex: 0 0 auto; }
}
.modal-lg { max-width: 820px; }
.modal-sm { max-width: 420px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(13,17,23,.55); opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 101; width: min(560px, 100vw);
  background: var(--surface); box-shadow: var(--sh-xl);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-base);
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.drawer-body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; }
.drawer-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-alt); flex: 0 0 auto; display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* --------------------------------------------------------------------------
   15. TABS / STEPS / PAGINATION
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: var(--sp-5); }
.tabs a, .tabs button {
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active, .tabs button.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

.steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.step { flex: 1 1 0; min-width: 0; }
.step .step-bar { height: 4px; border-radius: var(--r-full); background: var(--n-200); margin-bottom: 8px; }
.step .step-label { font-size: .75rem; font-weight: 600; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.is-done .step-bar { background: var(--ok-500); }
.step.is-done .step-label { color: var(--ok-700); }
.step.is-current .step-bar { background: var(--brand-600); }
.step.is-current .step-label { color: var(--brand-700); }

.pagination { display: flex; gap: var(--sp-1); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: .875rem; font-weight: 600; color: var(--text-muted);
}
.pagination a:hover { border-color: var(--brand-400); color: var(--brand-700); text-decoration: none; }
.pagination .is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8125rem; color: var(--text-subtle); margin-bottom: var(--sp-4); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb .sep { opacity: .55; }

/* --------------------------------------------------------------------------
   16. TIMELINE / DEFINITION LISTS / MISC
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: var(--sp-5); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--n-0); border: 2px solid var(--border-strong);
}
.timeline-item.is-done::before { background: var(--ok-500); border-color: var(--ok-500); }
.timeline-item.is-current::before { background: var(--brand-600); border-color: var(--brand-600); box-shadow: 0 0 0 4px var(--brand-100); }
.timeline-item.is-error::before { background: var(--err-500); border-color: var(--err-500); }
.timeline-item .t-title { font-weight: 600; font-size: .9375rem; }
.timeline-item .t-meta { font-size: .8125rem; color: var(--text-subtle); }

.dl { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .dl { grid-template-columns: 180px 1fr; } }
.dl dt { font-size: .8125rem; font-weight: 600; color: var(--text-subtle); margin: 0; }
.dl dd { margin: 0; font-size: .9375rem; word-break: break-word; }
@media (max-width: 559px) { .dl dd { margin-bottom: var(--sp-2); } }

.kv-list { display: flex; flex-direction: column; }
.kv-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 10px 0; border-bottom: 1px solid var(--n-100); font-size: .875rem; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--text-muted); flex: 0 0 auto; }
.kv-row .v { text-align: right; font-weight: 600; min-width: 0; word-break: break-word; }

.copy-field { display: flex; gap: var(--sp-2); align-items: center; }
.copy-field .input { font-family: var(--font-mono); font-size: .8125rem; }

.progress { height: 8px; background: var(--n-200); border-radius: var(--r-full); overflow: hidden; }
.progress .bar { height: 100%; background: var(--brand-600); border-radius: var(--r-full); transition: width var(--t-base); }
.progress.is-ok .bar { background: var(--ok-500); }
.progress.is-warn .bar { background: var(--warn-500); }

.divider-text { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-subtle); font-size: .8125rem; margin: var(--sp-4) 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* Locked / gated overlay used by the subscription gate */
.locked-overlay { position: relative; }
.locked-overlay::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(247,248,250,.72); backdrop-filter: blur(1.5px); pointer-events: none;
}
.locked-note {
  position: relative; z-index: 1; display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-alt); color: var(--text-muted); font-size: .875rem;
}

/* Provider / gateway card */
.gw-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: box-shadow var(--t-base), border-color var(--t-base); }
.gw-card:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
.gw-card.is-deactivated { background: var(--n-50); border-style: dashed; }
.gw-card.is-deactivated .gw-name { color: var(--text-muted); }
.gw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.gw-name { font-weight: 700; font-size: .9375rem; }
.gw-key { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-subtle); }
.gw-checks { display: flex; flex-direction: column; gap: 5px; }
.gw-check { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--text-muted); }
.gw-check .dot { flex: 0 0 auto; }

/* --- Long-form content (policies, About, FAQ) ------------------------------
   Admin-authored HTML lands here with no classes of its own, so the element
   selectors have to carry the whole typographic rhythm. Measure is capped for
   readability rather than filling the card. */
.prose { color: var(--text); line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--sp-4); max-width: 68ch; }
.prose h2 { font-size: 1.3125rem; margin: var(--sp-8) 0 var(--sp-3); }
.prose h3 { font-size: 1.0625rem; margin: var(--sp-6) 0 var(--sp-2); }
.prose h4 { font-size: .9375rem; margin: var(--sp-5) 0 var(--sp-2); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 22px; max-width: 68ch; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--text-subtle); }
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 650; color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); font-size: .9375rem; }
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface-sunk); font-weight: 600; }
.prose blockquote {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--brand-500); background: var(--surface-sunk);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Filter row that wraps to its own line on narrow screens rather than
   squeezing the chips. */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: flex-end; justify-content: space-between;
}
.filter-bar > * { min-width: 0; }
@media (max-width: 720px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   17. AUTH / MARKETING SURFACES
   -------------------------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--bg); }
.auth-aside { display: none; background: linear-gradient(150deg, var(--n-950) 0%, var(--brand-900) 60%, var(--brand-700) 100%); color: #fff; padding: var(--sp-12); flex-direction: column; justify-content: space-between; }
.auth-aside h2 { color: #fff; font-size: 1.75rem; }
.auth-aside p { color: rgba(255,255,255,.82); }
.auth-aside .feature { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.auth-aside .feature svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand-300); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
.auth-card { width: 100%; max-width: 420px; }
@media (min-width: 960px) { .auth-wrap { grid-template-columns: 1fr 1fr; } .auth-aside { display: flex; } }

/* --- Storefront hero -------------------------------------------------------
   Layered: base gradient, two soft colour orbs, a faint grid, then content.
   The orbs and grid are pseudo-elements so the markup stays clean. */
.hero {
  background: linear-gradient(145deg, #0b0f1a 0%, #141d3a 42%, #1e2f7a 100%);
  color: #fff; padding: var(--sp-12) 0; position: relative; overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -2;
  background:
    radial-gradient(38% 55% at 78% 18%, rgba(96,134,251,.55), transparent 70%),
    radial-gradient(34% 48% at 12% 88%, rgba(124,58,237,.42), transparent 70%),
    radial-gradient(28% 40% at 52% 4%,  rgba(20,184,166,.24), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(75% 65% at 50% 30%, #000 40%, transparent 100%);
}
/* Inset rounded variant used on the storefront home page. Sitting inside the
   container avoids the 100vw full-bleed trick, which would add a horizontal
   scrollbar and break the sticky header. */
.hero-panel { border-radius: 28px; margin-bottom: var(--sp-10); }
.hero-panel > .container { padding-inline: clamp(var(--sp-5), 4vw, var(--sp-12)); max-width: none; }
@media (max-width: 639px) { .hero-panel { border-radius: 20px; } }

.hero h1 {
  color: #fff; font-size: clamp(2rem, 5.6vw, 3.5rem); line-height: 1.06;
  letter-spacing: -.035em; max-width: 15ch;
}
.hero h1 .accent {
  background: linear-gradient(100deg, #9db8ff, #7ee7d6 60%, #f7c76a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: rgba(255,255,255,.78); font-size: 1.0625rem; max-width: 50ch; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
/* On a wide display give the extra width to the artwork, not to the copy —
   a headline stretched past ~18 words per line gets harder to read, not easier. */
@media (min-width: 1800px) { .hero-grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-16); } .hero { padding: var(--sp-16) 0; } }

/* Glass eyebrow pill */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92); font-size: .8125rem; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.2); margin-left: 6px; }

/* Metric strip under the hero copy. Deliberately NOT .stat, which is the
   white metric card used across the admin and seller consoles. */
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8); margin-top: var(--sp-8); }
@media (max-width: 479px) { .hero-stats { gap: var(--sp-4) var(--sp-6); } .hero-stats .hstat .n { font-size: 1.375rem; } }
.hero-stats .hstat .n { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -.035em; color: #fff; line-height: 1.1; }
.hero-stats .hstat .k { font-size: .6875rem; color: rgba(255,255,255,.58); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-top: 2px; }

/* Floating product collage on the right of the hero */
.hero-art { position: relative; display: none; min-height: 420px; }
@media (min-width: 1024px) { .hero-art { display: block; } }
@media (min-width: 1536px) { .hero-art { min-height: 480px; } }
@media (min-width: 1800px) { .hero-art { min-height: 560px; } }
.hero-art .ha {
  position: absolute; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1 / 1;
  background: #fff; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.18);
}
.hero-art .ha img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .ha-1 { width: 46%; left: 0;    top: 6%;    transform: rotate(-6deg); z-index: 2; }
.hero-art .ha-2 { width: 42%; right: 4%;  top: 0;     transform: rotate(5deg);  z-index: 1; }
.hero-art .ha-3 { width: 40%; left: 26%;  bottom: 2%; transform: rotate(2deg);  z-index: 3; }
.hero-art .ha-price {
  position: absolute; z-index: 4; left: 0; bottom: 12%;
  background: #fff; color: var(--text); border-radius: var(--r-lg);
  padding: 10px 16px; box-shadow: var(--sh-xl); font-size: .8125rem;
}
.hero-art .ha-price b { display: block; font-family: var(--font-display); font-size: 1.1875rem; letter-spacing: -.03em; }

/* --- Trust strip ---------------------------------------------------------- */
.trust-strip {
  display: grid; gap: var(--sp-4); grid-template-columns: 1fr;
  padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-md);
}
/* Two columns only once each cell is wide enough not to shred the copy. */
@media (min-width: 560px) { .trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 1024px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-strip .ti { display: flex; gap: var(--sp-3); align-items: flex-start; }
.trust-strip .ti .ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
}
.trust-strip .ti .tt { font-weight: 650; font-size: .875rem; line-height: 1.3; }
.trust-strip .ti .td { font-size: .75rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

/* --- Section headings ----------------------------------------------------- */
.section-head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-5); }
/* Standalone, not scoped to .section-head: it is also used inside the dark CTA
   panels, and without inline-flex the reset's display:block on svg drops the
   icon onto its own line. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 6px;
}
.section-head h2 { margin: 0; letter-spacing: -.028em; }
.section-head .sub { color: var(--text-muted); font-size: .875rem; margin: 4px 0 0; }

/* Display variant for the storefront's headline rows: no eyebrow, a much
   larger title, and the "View all" link pinned to the baseline of the title. */
.section-head-xl { align-items: baseline; margin-bottom: var(--sp-6); }
.section-head-xl h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.125rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.15;
}
.section-head-xl .sub { margin-top: 6px; font-size: .9375rem; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: .875rem; color: var(--brand-600); white-space: nowrap; }
.link-more:hover { text-decoration: none; gap: 8px; }
.link-more svg { transition: transform var(--t-fast); }

/* --- Category tiles ------------------------------------------------------- */
/* Each tile carries its own hue via --ch, so a category is recognisable by
   colour as well as by icon. */
/* 7 columns from 1200px up, so the 14 seeded categories fall into two full
   rows at every desktop width instead of reflowing into a ragged tail. */
.cat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (min-width: 1200px) { .cat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-4); } }
.cat-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px 16px; text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.cat-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% -30%, hsl(var(--ch) 92% 62% / .16), transparent 62%);
  opacity: 0; transition: opacity var(--t-base);
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: hsl(var(--ch) 70% 72%); text-decoration: none; }
.cat-tile:hover::before { opacity: 1; }
.cat-tile .ic {
  position: relative; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: hsl(var(--ch) 92% 96%); color: hsl(var(--ch) 72% 42%);
  box-shadow: inset 0 0 0 1px hsl(var(--ch) 80% 88%);
  transition: transform var(--t-base);
}
.cat-tile:hover .ic { transform: scale(1.07) rotate(-4deg); }
/* With a cover photo the tile leads with the picture: a square frame, the
   icon sitting underneath it in case the photo never arrives. */
.cat-tile.has-ph { padding: 10px 10px 14px; gap: 8px; }
.cat-tile .ph {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: calc(var(--r-lg) - 4px);
  overflow: hidden; display: grid; place-items: center;
  background: hsl(var(--ch) 92% 96%);
}
.cat-tile .ph .ic { box-shadow: none; background: transparent; }
.cat-tile .ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #fff; padding: 8%; transition: transform var(--t-base);
}
.cat-tile:hover .ph img { transform: scale(1.05); }
.cat-tile .nm { position: relative; font-size: .8125rem; font-weight: 650; color: var(--text); line-height: 1.3; }
.cat-tile .ct { position: relative; font-size: .6875rem; color: var(--text-subtle); }

/* Wide list variant of a category tile, used on the categories index. */
/* A link that holds block content must be a block itself: left inline, the
   browser splits its box around the children into slivers of border and
   background (the department cards on categories.php). */
.cat-row { display: block; text-decoration: none; }
.cat-row:hover { text-decoration: none; border-color: hsl(var(--ch) 70% 74%); }
.cat-row .ic {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: hsl(var(--ch) 92% 96%); color: hsl(var(--ch) 72% 42%);
  box-shadow: inset 0 0 0 1px hsl(var(--ch) 80% 88%);
}

/* --- Horizontal rail (mobile-friendly carousels) -------------------------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--sp-4); }
@media (max-width: 899px) {
  .rail {
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2);
    grid-auto-columns: 62%; margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
}

/* --- Seller CTA banner ---------------------------------------------------- */
.cta-banner {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: var(--sp-10) var(--sp-8); color: #fff;
  background: linear-gradient(120deg, #16204a 0%, #23349b 55%, #4055d8 100%);
  box-shadow: var(--sh-xl);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 70% at 88% 20%, rgba(124,200,255,.38), transparent 70%),
    radial-gradient(36% 60% at 8% 100%, rgba(247,199,106,.24), transparent 70%);
}
.cta-banner h2 { color: #fff; letter-spacing: -.03em; }
.cta-banner p { color: rgba(255,255,255,.8); }
.cta-banner .cta-inner { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .cta-banner .cta-inner { grid-template-columns: 1fr auto; } }
.cta-points { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); padding: 0; list-style: none; }
.cta-points li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: rgba(255,255,255,.9); }
.cta-points svg { color: #7ee7d6; flex: 0 0 auto; }
/* Even split, for when the right column carries content rather than a button. */
@media (min-width: 900px) { .cta-banner .cta-inner.split { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Frosted tile for use inside the dark promotional panels. */
.glass-tile {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.glass-tile .gt-head { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 6px; }
.glass-tile .gt-head svg { flex: 0 0 auto; color: #7ee7d6; }
.glass-tile p { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .82); }

/* Numbered step cards ("How it works"). */
.step-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.step-card .step-n {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-600); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: .9375rem; margin-bottom: var(--sp-2);
}
.step-card h4 { margin: 0; font-size: .9375rem; }
.step-card p { margin: 0; font-size: .8125rem; color: var(--text-muted); }

.plan-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 2px solid var(--border); border-radius: var(--r-lg); background: var(--surface); position: relative; }
.plan-card.is-featured { border-color: var(--brand-600); box-shadow: var(--sh-lg); }
.plan-card .plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--brand-600); color: #fff; padding: 3px 12px; border-radius: var(--r-full); font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.plan-card .plan-price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.plan-card .plan-price small { font-size: .875rem; font-weight: 500; color: var(--text-muted); }
.plan-card .plan-save { font-size: .8125rem; font-weight: 700; color: var(--ok-700); }
.plan-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-card li { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; color: var(--text-muted); }
.plan-card li svg { flex: 0 0 auto; color: var(--ok-500); margin-top: 2px; }

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: .8125rem; }
.xs { font-size: .75rem; }
.lg { font-size: 1.0625rem; }
.bold { font-weight: 700; }
.semi { font-weight: 600; }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { word-break: break-word; overflow-wrap: anywhere; }
.tabular { font-variant-numeric: tabular-nums; }

.mt-0 { margin-top: 0; }   .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); } .mb-10 { margin-bottom: var(--sp-10); } .mb-12 { margin-bottom: var(--sp-12); }
/* Storefront section rhythm: sections stack with real air between them. */
@media (min-width: 900px) { .mb-8 { margin-bottom: var(--sp-12); } }
.p-0 { padding: 0; } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.w-full { width: 100%; } .h-full { height: 100%; }
.hidden { display: none !important; }
.flex { display: flex; } .inline-flex { display: inline-flex; } .block { display: block; }
.items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.relative { position: relative; }
.text-ok { color: var(--ok-700); } .text-warn { color: var(--warn-700); }
.text-err { color: var(--err-700); } .text-brand { color: var(--brand-700); }
.bg-sunk { background: var(--surface-sunk); }
.rounded { border-radius: var(--r-md); } .rounded-lg { border-radius: var(--r-lg); }
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.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;
}
@media (max-width: 639px)  { .hide-sm { display: none !important; } }
@media (min-width: 640px)  { .only-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
@media (min-width: 1024px) { .only-md { display: none !important; } }
@media (max-width: 1199px) { .hide-lg { display: none !important; } }
@media (min-width: 1200px) { .only-lg { display: none !important; } }

/* --------------------------------------------------------------------------
   19. PRINT (invoices, credit notes, settlement statements)
   -------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .tabbar, .site-header, .site-footer, .announce, .shop-nav,
  .no-print, .btn, .toast-stack, .sidebar-overlay { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; max-width: none; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .table thead th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   20. POLICY & COMPLIANCE PAGES

   Policy pages are long, dense and read far more often on a phone than on a
   desktop. Three specific failures are designed out here:

     - a wide <table> inside .prose overflowing the viewport and forcing the
       whole page to scroll sideways. .policy-table scrolls itself instead.
     - headings that all look the same weight, so a customer hunting for the
       refund timeline has to read the whole page.
     - callouts that lose their meaning in dark mode because they were built
       from hardcoded pastel hex values rather than tokens.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) { .form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.policy-doc h3 {
  font-size: 1.125rem;
  margin: var(--sp-8) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.policy-doc > h3:first-of-type { border-top: 0; padding-top: 0; }
.policy-doc h4 { font-size: .9375rem; margin: var(--sp-5) 0 var(--sp-2); }
.policy-doc ol { margin: 0 0 var(--sp-4); padding-left: 22px; max-width: 68ch; }
.policy-doc ol li { margin-bottom: 8px; }

/* Tables scroll themselves rather than widening the page. -webkit-overflow-
   scrolling keeps the momentum scroll on iOS, where a nested scroller
   otherwise feels broken. */
.policy-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.policy-table table { margin: 0; min-width: 420px; font-size: .9375rem; }
.policy-table th, .policy-table td { padding: 10px 13px; vertical-align: top; }
.policy-table thead th { background: var(--surface-sunk); white-space: nowrap; }
.policy-table tbody th {
  background: var(--surface-sunk);
  font-weight: 600;
  width: 32%;
  min-width: 140px;
}
.policy-table tr:last-child th, .policy-table tr:last-child td { border-bottom: 0; }
.policy-term {
  display: block;
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-subtle);
  text-transform: none;
  letter-spacing: 0;
}

.policy-note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  background: var(--surface-sunk);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.policy-note h4 { margin: 0 0 var(--sp-2); font-size: .9375rem; }
.policy-note p:last-child { margin-bottom: 0; }
.policy-note-warn { border-left-color: var(--warn-500); background: var(--warn-50); color: #7a4703; }
.policy-note-warn a { color: #7a4703; }
.policy-note-ok   { border-left-color: var(--ok-500);   background: var(--ok-50);   color: #0a5c34; }
.policy-note-ok a { color: #0a5c34; }

.policy-version {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--text-subtle);
}

/* The "other policies" strip. Wraps to as many rows as it needs; no page ever
   scrolls sideways because of it. */
.policy-index { border-top: 1px solid var(--border); padding-top: var(--sp-5); }
.policy-index h2 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-subtle);
  margin: 0 0 var(--sp-3);
}
.policy-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.policy-index a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.policy-index a:hover { border-color: var(--brand-400); color: var(--brand-700); }
.policy-index a:focus-visible { outline: none; box-shadow: var(--ring); }

/* Complaint history. The internal/customer distinction is carried by colour AND
   by the text of the badge - colour alone would disappear for anyone who cannot
   distinguish it, and putting an internal note in front of a customer is
   precisely the mistake this is guarding against. */
.complaint-timeline { list-style: none; margin: 0; padding: 0; }
.complaint-timeline li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--border);
}
.complaint-timeline li:last-child { padding-bottom: 0; }
.complaint-timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--n-300);
}
.complaint-timeline li.is-customer { border-left-color: var(--brand-300); }
.complaint-timeline li.is-customer::before { background: var(--brand-500); }
.complaint-timeline .ct-when { font-size: .75rem; color: var(--text-subtle); margin-right: 8px; }
.complaint-timeline .ct-status { font-size: .8125rem; font-weight: 600; }
.complaint-timeline .ct-badge {
  display: inline-block;
  font-size: .6875rem;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-right: 6px;
}
.complaint-timeline .ct-public  { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.complaint-timeline .ct-private { background: var(--n-100);    color: var(--n-700);     border-color: var(--n-200); }
.complaint-timeline p { margin: 6px 0 0; font-size: .875rem; white-space: pre-wrap; }

/* Checkout policy consent. Deliberately a normal-weight, readable block rather
   than 10px grey small print - a disclosure nobody can read is not a
   disclosure, and dark patterns are the thing a gateway review looks for. */
.checkout-policies {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.checkout-policies a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.checkout-policies a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }

/* 320px. The narrowest phone still in real use; a policy table at this width is
   the first thing to break the layout. */
@media (max-width: 380px) {
  .policy-table table { min-width: 300px; font-size: .875rem; }
  .policy-table th, .policy-table td { padding: 8px 10px; }
  .policy-note { padding: var(--sp-3) var(--sp-4); }
  .policy-index a { padding: 6px 10px; font-size: .75rem; }
}