/* ==========================================================================
   Ocean Ventures — design system
   Hand-written CSS, no build step: shared hosting serves this file directly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   Light is the base. Dark redefines only what changes, and does so by
   choosing new colours rather than inverting: an inverted brand blue goes
   pale and washes out, so dark mode gets its own deeper, richer palette.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand — the ocean identity */
  --ocean-950: #001233;
  --ocean-900: #00296b;
  --ocean-800: #003f88;
  --ocean-700: #00509d;
  --ocean-600: #0068b8;
  --ocean-500: #0d84d8;
  --ocean-400: #38a3ea;
  --ocean-300: #7cc4f4;
  --ocean-200: #b9defb;
  --ocean-100: #e0f0fe;
  --ocean-50:  #f0f8ff;

  --cyan-500: #00b4d8;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;

  /* Neutrals — cool-tinted so they sit with the blues */
  --slate-950: #070d1b;
  --slate-900: #0d1b33;
  --slate-800: #1b2942;
  --slate-700: #2f3f5c;
  --slate-600: #4a5b78;
  --slate-500: #6b7c99;
  --slate-400: #94a3ba;
  --slate-300: #c2cddc;
  --slate-200: #dde5ef;
  --slate-100: #eef3f8;
  --slate-50:  #f7fafd;

  /* Semantic */
  --positive: #0a7a44;
  --positive-soft: #e6f6ed;
  --warning: #b45309;
  --warning-soft: #fdf3e3;
  --danger: #c62828;
  --danger-soft: #fdecec;
  --info: #0068b8;
  --info-soft: #e6f2fb;

  /* Surfaces */
  --bg: var(--slate-50);
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--slate-50);
  --surface-3: var(--slate-100);
  --surface-inset: var(--slate-100);
  --line: #e2e8f2;
  --line-strong: var(--slate-300);

  /* Text */
  --ink: var(--slate-900);
  --ink-2: var(--slate-700);
  /* Contrast-checked against --surface (#fff) and --bg (#f7fafd): the old
     slate-500/400 pair measured 4.04 and 2.56, under the 4.5 AA floor. */
  --muted: #55647d;
  --faint: #65748e;
  --on-brand: #ffffff;

  /* Accents that must NOT invert in dark mode: a hero or a footer keeps its
     deep-ocean ground in both themes, or the identity disappears at night. */
  --hero-base: var(--ocean-900);
  --hero-base-2: var(--ocean-950);
  --hero-glow: rgba(0, 180, 216, 0.35);
  --hero-ink: #ffffff;
  --hero-ink-2: rgba(255, 255, 255, 0.74);
  --hero-line: rgba(255, 255, 255, 0.14);
  --hero-card: rgba(255, 255, 255, 0.08);

  /* Action colour.
     The identity stays ocean blue; the colour that means "press this" is a
     dark orange, so a call to action never competes with the brand ground it
     sits on. Every value below is contrast-checked against the surface it is
     used on:
       #c2410c on white  -> 5.14:1     #9a3412 on white  -> 7.31:1
       white on #c2410c  -> 5.14:1     white on #9a3412  -> 7.31:1
     A lighter orange is substituted for TEXT on a dark surface, where the dark
     one measures only 3.35:1. */
  --action-from: #c2410c;
  --action-to: #9a3412;
  --action-from-hover: #9a3412;
  --action-to-hover: #7c2d12;
  --action-ink: #ffffff;
  /* Orange used as text/icon colour on an ordinary page surface. */
  --action-on-surface: #9a3412;
  /* Orange used as text/icon colour on a deep-ocean ground: 10.98:1. */
  --action-on-dark: #fdba74;
  --shadow-action: 0 10px 28px rgba(154, 52, 18, .34);

  --btn-primary-from: var(--action-from);
  --btn-primary-to: var(--action-to);
  --btn-primary-ink: var(--action-ink);

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(13, 27, 51, .06);
  --shadow-sm: 0 1px 3px rgba(13, 27, 51, .08), 0 1px 2px rgba(13, 27, 51, .04);
  --shadow-md: 0 4px 12px rgba(13, 27, 51, .08), 0 2px 4px rgba(13, 27, 51, .04);
  --shadow-lg: 0 12px 32px rgba(13, 27, 51, .10), 0 4px 8px rgba(13, 27, 51, .05);
  --shadow-xl: 0 24px 60px rgba(0, 41, 107, .16), 0 8px 16px rgba(13, 27, 51, .06);
  --shadow-brand: 0 10px 30px rgba(0, 104, 184, .22);
  --ring: 0 0 0 3px rgba(13, 132, 216, .28);

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

  --shell: 1280px;
  --gutter: 20px;

  /* Type */
  --font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* System preference, unless a choice has been stamped on the root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg: #060b16;
    --bg-alt: #0a1120;
    --surface: #101a2e;
    --surface-2: #16223a;
    --surface-3: #1d2b46;
    --surface-inset: #0b1322;
    --line: #223150;
    --line-strong: #31456b;

    --ink: #e8eef8;
    --ink-2: #bcc9de;
    --muted: #8b9bb6;
    --faint: #8391ad;

    --positive: #34d399;  --positive-soft: rgba(52, 211, 153, .12);
    --warning:  #fbbf24;  --warning-soft:  rgba(251, 191, 36, .12);
    --danger:   #f87171;  --danger-soft:   rgba(248, 113, 113, .12);
    --info:     #60a5fa;  --info-soft:     rgba(96, 165, 250, .12);

    /* The same dark orange in both themes: it keeps white text at 5.14:1 or
       better, where a brighter orange would fall to 3.4:1 and fail. Only the
       text-on-surface orange lightens, because the surface it sits on did. */
    --action-on-surface: #fb923c;
    --shadow-action: 0 10px 28px rgba(0, 0, 0, .5);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .6);
    --shadow-xl: 0 26px 64px rgba(0, 0, 0, .68);
    --shadow-brand: 0 10px 30px rgba(0, 60, 130, .5);
    --ring: 0 0 0 3px rgba(56, 163, 234, .38);
  }
}

/* Explicit choice wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #060b16;
  --bg-alt: #0a1120;
  --surface: #101a2e;
  --surface-2: #16223a;
  --surface-3: #1d2b46;
  --surface-inset: #0b1322;
  --line: #223150;
  --line-strong: #31456b;

  --ink: #e8eef8;
  --ink-2: #bcc9de;
  --muted: #8b9bb6;
  --faint: #8391ad;

  --positive: #34d399;  --positive-soft: rgba(52, 211, 153, .12);
  --warning:  #fbbf24;  --warning-soft:  rgba(251, 191, 36, .12);
  --danger:   #f87171;  --danger-soft:   rgba(248, 113, 113, .12);
  --info:     #60a5fa;  --info-soft:     rgba(96, 165, 250, .12);

  /* Matches the media-query block above: the action orange does not change
     between themes, only the orange used as text on a dark surface does. */
  --action-on-surface: #fb923c;
  --shadow-action: 0 10px 28px rgba(0, 0, 0, .5);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .55);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .6);
  --shadow-xl: 0 26px 64px rgba(0, 0, 0, .68);
  --shadow-brand: 0 10px 30px rgba(0, 60, 130, .5);
  --ring: 0 0 0 3px rgba(56, 163, 234, .38);
}

:root[data-theme="light"] { color-scheme: light; }

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nothing may push the page sideways. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ocean-600); text-decoration: none; }
a:hover { text-decoration: underline; }
:root[data-theme="dark"] a, :root:not([data-theme="light"]) a { }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a:not(.btn):not(.brand):not(.wa-fab) { color: var(--ocean-300); } }
:root[data-theme="dark"] a:not(.btn):not(.brand):not(.wa-fab) { color: var(--ocean-300); }
:root[data-theme="light"] a:not(.btn):not(.brand):not(.wa-fab) { color: var(--ocean-600); }

img, svg, video { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

::selection { background: var(--ocean-200); color: var(--ocean-950); }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.shell { width: min(var(--shell), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.shell-wide { width: min(1560px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.section { padding: clamp(40px, 6vw, 84px) 0; }
.section-tight { padding: clamp(28px, 4vw, 52px) 0; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .82em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ocean-600);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--ocean-300); } }
:root[data-theme="dark"] .eyebrow { color: var(--ocean-300); }

.lede { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--muted); max-width: 62ch; }
.section-head { margin-bottom: clamp(20px, 3vw, 36px); }
.section-head h2 { margin: 10px 0 8px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 14px; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* The filled action button. White on the dark orange measures 5.14:1 at the
   light end of the gradient and 7.31:1 at the dark end, in both themes. */
.btn-primary {
  --btn-line: transparent;
  --btn-ink: var(--btn-primary-ink);
  background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
  box-shadow: var(--shadow-action);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--action-from-hover), var(--action-to-hover));
  box-shadow: 0 14px 34px rgba(154, 52, 18, .34);
}

/* The quieter actions carry the same orange as ink rather than as fill, so the
   hierarchy still reads. --action-on-surface is the theme-aware value: #9a3412
   on a light surface (7.31:1) and #fb923c on a dark one (7.61:1). */
.btn-ghost { --btn-bg: transparent; --btn-line: transparent; --btn-ink: var(--action-on-surface); }
.btn-ghost:hover { --btn-bg: var(--surface-2); box-shadow: none; }

.btn-outline {
  --btn-bg: transparent;
  --btn-ink: var(--action-on-surface);
  --btn-line: color-mix(in srgb, var(--action-on-surface) 42%, var(--line-strong));
}
.btn-outline:hover {
  --btn-bg: color-mix(in srgb, var(--action-on-surface) 10%, var(--surface-2));
  --btn-line: var(--action-on-surface);
}

.btn-danger { --btn-bg: var(--danger-soft); --btn-ink: var(--danger); --btn-line: transparent; }

.btn-on-dark {
  --btn-bg: rgba(255,255,255,.1); --btn-ink: #fff; --btn-line: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover { --btn-bg: rgba(255,255,255,.18); }

.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: var(--r); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-icon { padding: 9px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label {
  font-size: 13px; font-weight: 650; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.label .req { color: var(--danger); }
.hint { font-size: 12px; color: var(--muted); }
.field-error { font-size: 12px; color: var(--danger); font-weight: 600; }

.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ocean-500); box-shadow: var(--ring);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.textarea { min-height: 96px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c99' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ocean-600); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

.input-group { display: flex; align-items: stretch; gap: 0; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; }

/* Search */
.search { position: relative; display: flex; align-items: center; }
.search .input { padding-left: 38px; }
.search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.qty button {
  width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink-2);
  cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.qty button:hover { background: var(--surface-3); }
.qty input {
  width: 46px; height: 34px; border: 0; border-inline: 1px solid var(--line);
  background: transparent; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: clamp(16px, 2.2vw, 24px); }
.card-hover { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.panel-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2);
}
.panel-head h2, .panel-head h3 { font-size: 15px; margin: 0; }
.panel-body { padding: clamp(14px, 2vw, 20px); }
.panel-foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }

.glass {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 20px 0; }

/* --------------------------------------------------------------------------
   Badges, pills, chips
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-brand    { background: var(--info-soft);     color: var(--info); }
.badge-positive { background: var(--positive-soft); color: var(--positive); }
.badge-warning  { background: var(--warning-soft);  color: var(--warning); }
.badge-danger   { background: var(--danger-soft);   color: var(--danger); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.chip a, .chip button {
  display: grid; place-items: center; width: 16px; height: 16px; border: 0; padding: 0;
  border-radius: 50%; background: var(--line-strong); color: var(--surface);
  font-size: 11px; line-height: 1; cursor: pointer; text-decoration: none;
}
.chip a:hover, .chip button:hover { background: var(--danger); color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid transparent; font-size: 14px;
}
.alert-info     { background: var(--info-soft);     color: var(--info);     border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alert-success  { background: var(--positive-soft); color: var(--positive); border-color: color-mix(in srgb, var(--positive) 22%, transparent); }
.alert-warning  { background: var(--warning-soft);  color: var(--warning);  border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert-danger   { background: var(--danger-soft);   color: var(--danger);   border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Tables
   Wrapped in .table-wrap so a wide table scrolls inside itself and never
   pushes the page sideways.
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.table-wrap > table { min-width: 640px; }
.table-wrap.is-flush { border: 0; border-radius: 0; }

table.data { font-size: 14px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; }
table.data thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
table.data tbody tr { border-top: 1px solid var(--line); }
table.data tbody tr:first-child { border-top: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .strong { font-weight: 650; color: var(--ink); }
table.data tfoot td { padding: 12px 14px; border-top: 2px solid var(--line-strong); font-weight: 700; }

/* Money treatments — a ledger has to be scannable at a glance. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-debit   { color: var(--danger); font-weight: 650; }
.money-credit  { color: var(--positive); font-weight: 650; }
.money-balance { font-weight: 700; color: var(--ink); }
.money-muted   { color: var(--faint); }

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  position: relative; overflow: hidden;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.stat::after {
  content: ""; position: absolute; inset: auto -30% -70% auto;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,132,216,.10), transparent 70%);
  pointer-events: none;
}
.stat .k { font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: .02em; }
.stat .v { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); font-weight: 800; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .m { font-size: 12px; color: var(--faint); margin-top: 4px; }
.stat-accent { border-color: color-mix(in srgb, var(--ocean-500) 35%, var(--line)); }

/* --------------------------------------------------------------------------
   Empty states & skeletons
   -------------------------------------------------------------------------- */
.empty {
  display: grid; place-items: center; gap: 10px; text-align: center;
  padding: clamp(32px, 6vw, 60px) 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--muted);
}
.empty .icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--faint);
}
.empty h3 { color: var(--ink); font-size: 1rem; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   Pagination & breadcrumbs
   -------------------------------------------------------------------------- */
.pager { margin-top: 18px; }
.pager nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager svg { width: 16px; height: 16px; }
.pager .hidden { display: none; }
.pager a, .pager span[aria-current], .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.pager a:hover { background: var(--surface-3); text-decoration: none; }
.pager [aria-current="page"] span, .pager span[aria-current="page"] {
  background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to));
  border-color: transparent; color: #fff;
}
.pager p { margin: 0; color: var(--muted); font-size: 13px; }

.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ocean-600); }
.crumbs .sep { color: var(--faint); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a, .tabs button {
  padding: 10px 14px; border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 650; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); text-decoration: none; }
.tabs .is-active { color: var(--info); border-bottom-color: var(--info); }

/* --------------------------------------------------------------------------
   Dropdown / menu
   -------------------------------------------------------------------------- */
.menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.menu[data-open="true"] .menu-panel { opacity: 1; transform: none; pointer-events: auto; }
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); font-size: 14px; text-align: left;
  cursor: pointer; text-decoration: none;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 0; }
.menu-label { padding: 7px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }

/* --------------------------------------------------------------------------
   Drawer & modal
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 11, 22, .55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .24s var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 100;
  width: min(400px, 88vw);
  background: var(--surface); border-inline: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out);
}
.drawer-left  { left: 0;  transform: translateX(-102%); }
.drawer-right { right: 0; transform: translateX(102%); }
.drawer[data-open="true"] { transform: none; }
.drawer-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 14px 18px; border-top: 1px solid var(--line); }

dialog.modal {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-xl);
}
dialog.modal::backdrop { background: rgba(6, 11, 22, .55); backdrop-filter: blur(3px); }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 5px 9px; border-radius: 6px;
  background: var(--slate-900); color: #fff; font-size: 12px; font-weight: 500;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  z-index: 70;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: .08s; }
.reveal-3 { transition-delay: .16s; }
.reveal-4 { transition-delay: .24s; }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-y-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.floats { animation: float-y 7s ease-in-out infinite; }
.floats-slow { animation: float-y-slow 11s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Public site
   ========================================================================== */

/* Header ------------------------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-head .bar { display: flex; align-items: center; gap: 14px; height: 68px; }
.site-head .bar-lower { display: none; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand:hover { text-decoration: none; }

/* The lockup is a fixed-aspect image: set a height and let width follow. */
.brand-logo { display: block; height: 30px; width: auto; }
.brand-compact .brand-logo { height: 30px; }

/* Both tones ship; CSS picks one so a theme toggle swaps with no flash. */
.brand-logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-on-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-on-dark { display: block; }
}
:root[data-theme="dark"] .brand-logo-on-light { display: none; }
:root[data-theme="dark"] .brand-logo-on-dark { display: block; }

.site-nav { display: none; align-items: center; gap: 2px; }
.site-nav a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.site-nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.site-nav a.is-active { color: var(--info); background: var(--info-soft); }

.head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  position: relative;
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .count {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--ocean-600); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg-alt);
}

.head-search { display: none; flex: 1 1 auto; max-width: 460px; }

/* The WhatsApp action in the header, and the cart/wishlist icons a signed-out
   visitor sees. Both are hidden on a narrow bar, where the drawer carries
   them instead and the room is needed for the brand and the search toggle. */
.head-wa:hover { color: #128c7e; }
@media (max-width: 1099px) { .head-wa, .head-guest-only { display: none; } }

.drawer-contact { display: grid; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .head-search { display: flex; }
  .menu-toggle { display: none; }
}
@media (max-width: 899px) {
  .site-head .bar-lower { display: block; padding-bottom: 12px; }
  .site-head .bar-lower .search { width: 100%; }
}

/* Mobile drawer nav */
.nav-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-links a {
  padding: 11px 12px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.nav-drawer-links a:hover, .nav-drawer-links a.is-active { background: var(--surface-3); color: var(--ink); text-decoration: none; }

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 78% -10%, color-mix(in srgb, var(--cyan-500) 26%, transparent), transparent 62%),
    radial-gradient(760px 520px at 8% 108%, color-mix(in srgb, var(--ocean-600) 42%, transparent), transparent 60%),
    linear-gradient(158deg, var(--hero-base) 0%, var(--hero-base-2) 100%);
  color: var(--hero-ink);
  isolation: isolate;
}
.hero::before {
  /* A faint grid gives the flat gradient something to be depth against. */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(var(--hero-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
}
.hero-inner {
  display: grid; gap: clamp(30px, 5vw, 56px);
  padding: clamp(40px, 6vw, 92px) 0 clamp(44px, 6.5vw, 96px);
  align-items: center;
}
@media (min-width: 1000px) { .hero-inner { grid-template-columns: 1.02fr .98fr; } }

.hero h1 {
  font-size: clamp(2.45rem, 1.5rem + 4.1vw, 4.6rem);
  line-height: 1.03; letter-spacing: -.035em; margin: 18px 0 20px;
  color: var(--hero-ink);
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--cyan-300), var(--ocean-300) 60%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { color: var(--hero-ink-2); max-width: 54ch; font-size: clamp(1.08rem, 1rem + .48vw, 1.38rem); }
.hero .eyebrow { color: var(--cyan-300); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--hero-line); }
.hero-proof .k { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; }
.hero-proof .l { font-size: 12px; color: var(--hero-ink-2); font-weight: 600; }

/* The layered product composition */
.hero-stage { position: relative; min-height: 340px; display: grid; place-items: center; perspective: 1400px; }
@media (max-width: 999px) { .hero-stage { min-height: 300px; margin-top: 8px; } }

.hero-orb {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--hero-glow), transparent 68%);
  filter: blur(14px);
}
.hero-slab {
  position: relative;
  width: min(360px, 78vw); border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 40px 90px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  padding: 16px;
  transform: rotateY(-13deg) rotateX(7deg);
  transition: transform .5s var(--ease-out);
}
.hero-stage:hover .hero-slab { transform: rotateY(-8deg) rotateX(4deg); }
.hero-slab img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: var(--r); background: #fff; }
.hero-slab .cap { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--hero-ink-2); }

/* Floating commerce cards around the slab */
.hero-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r);
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,.3);
  font-size: 12.5px; font-weight: 650; color: #fff; white-space: nowrap;
}
.hero-chip .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.hero-chip .ico svg { width: 15px; height: 15px; }
.hero-chip .sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--hero-ink-2); }
.hero-chip-a { top: 6%;  left: -2%; }
.hero-chip-b { bottom: 12%; right: -4%; }
.hero-chip-c { bottom: 34%; left: -10%; }
@media (max-width: 620px) {
  .hero-chip-c { display: none; }
  .hero-chip-a { left: -6px; top: 0; }
  .hero-chip-b { right: -6px; bottom: 4%; }
}

/* Wave divider under the hero */
.hero-wave { display: block; width: 100%; height: auto; color: var(--bg); margin-top: -1px; }

/* Marquee strip ----------------------------------------------------------- */
.strip { border-block: 1px solid var(--line); background: var(--bg-alt); }
.strip-inner { display: flex; gap: 34px; align-items: center; padding: 18px 0; overflow-x: auto; scrollbar-width: none; }
.strip-inner::-webkit-scrollbar { display: none; }
.strip-item { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 600; }
.strip-item svg { width: 17px; height: 17px; color: var(--ocean-500); flex-shrink: 0; }

/* Category explorer ------------------------------------------------------- */
.cat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .2s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--ocean-300); text-decoration: none; }
.cat-card .thumb {
  aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  background: var(--surface-3); display: grid; place-items: center;
}
.cat-card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; mix-blend-mode: multiply; }
:root[data-theme="dark"] .cat-card .thumb img { mix-blend-mode: normal; }
.cat-card .n { font-size: 15px; font-weight: 700; line-height: 1.25; }
.cat-card .c { font-size: 12px; color: var(--muted); }

/* Product cards ----------------------------------------------------------- */
.product-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 460px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .2s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.pcard-media { position: relative; aspect-ratio: 1 / 1.06; background: #fff; overflow: hidden; }
:root[data-theme="dark"] .pcard-media { background: #f4f7fb; }
/* contain, not cover: a wholesale buyer is reading the pack, so the label must
   never be cropped. The padding that used to inset it is gone, so the
   photograph fills the whole box. */
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 0; transition: transform .5s var(--ease-out); }
.pcard:hover .pcard-media img { transform: scale(1.06); }
.pcard-media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--slate-300); background: var(--surface-3); }
.pcard-media .ph svg { width: 40px; height: 40px; }

.pcard-flags { position: absolute; top: 9px; left: 9px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 2; }
.pcard-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--muted); cursor: pointer;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.pcard-fav:hover { color: var(--danger); transform: scale(1.08); }
.pcard-fav svg { width: 16px; height: 16px; }
.pcard-fav.is-on { color: var(--danger); }
.pcard-fav.is-on svg { fill: currentColor; }

.pcard-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard-meta { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.pcard-name {
  font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
.pcard-name a { color: inherit; }
.pcard-name a:hover { color: var(--ocean-600); text-decoration: none; }

.price-block { margin-top: auto; }
.price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.price-now { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-was { font-size: 12.5px; color: var(--faint); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.price-off { font-size: 11px; font-weight: 800; color: var(--positive); }
.price-tier { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ocean-600); margin-top: 2px; }
.price-ask { font-size: 13px; font-weight: 650; color: var(--muted); }

.pcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pcard-foot form { flex: 1; display: flex; }
.pcard-foot .btn { flex: 1; }

.stock-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; }
.stock-in    { color: var(--positive); }
.stock-low   { color: var(--warning); }
.stock-out   { color: var(--danger); }
.stock-line::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Feature / benefit cards ------------------------------------------------- */
.feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature {
  padding: 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ocean-500), var(--ocean-800));
  color: #fff; margin-bottom: 14px; box-shadow: var(--shadow-brand);
}
.feature .ico svg { width: 20px; height: 20px; }
.feature h3 { font-size: 15.5px; margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--muted); margin: 0; }

/* Brand rail -------------------------------------------------------------- */
.brand-rail { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.brand-tile {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 66px; padding: 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-weight: 700; font-size: 13.5px; text-align: center;
  text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease-out), color .18s var(--ease);
}
.brand-tile:hover { border-color: var(--ocean-300); color: var(--ocean-600); transform: translateY(-2px); text-decoration: none; }

/* CTA band ---------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 300px at 88% 8%, color-mix(in srgb, var(--cyan-500) 30%, transparent), transparent 60%),
    linear-gradient(140deg, var(--hero-base), var(--hero-base-2));
  color: var(--hero-ink);
  padding: clamp(28px, 5vw, 52px);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--hero-ink-2); }

/* Footer ------------------------------------------------------------------ */
.site-foot {
  margin-top: clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, var(--hero-base), var(--hero-base-2));
  color: var(--hero-ink-2);
  border-top: 1px solid var(--hero-line);
}
.site-foot .brand-logo { height: 40px; }
.foot-grid {
  display: grid; gap: 30px; padding: clamp(36px, 5vw, 60px) 0 30px;
  grid-template-columns: 1fr;
}
/* Below the wide breakpoint the brand block takes the full width and the five
   link columns flow underneath it; above it, all six sit in one row with the
   contact column given the extra width its address needs. */
@media (min-width: 700px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-about { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .foot-grid { grid-template-columns: 1.45fr repeat(4, .82fr) 1.15fr; }
  .foot-about { grid-column: auto; }
}
.foot-grid h4 {
  display: inline; color: #fff; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0;
}
.foot-blurb { margin-top: 16px; max-width: 42ch; font-size: 14px; line-height: 1.65; }
.foot-cta { display: flex; gap: 10px; margin-top: 18px; }
.foot-icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-sm); border: 1px solid var(--hero-line);
  background: var(--hero-card); color: #fff;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.foot-icon-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }

/* The link columns are <details>: an accordion on a phone, and always open
   from tablet up, where there is room to show every column at once. */
.foot-col > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--hero-line);
}
.foot-col > summary::-webkit-details-marker { display: none; }
.foot-col > summary svg { color: var(--hero-ink-2); transition: transform .24s var(--ease); }
.foot-col[open] > summary svg { transform: rotate(180deg); }
.foot-col > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.foot-col .foot-links, .foot-col .foot-contact { padding-top: 14px; }

@media (min-width: 700px) {
  .foot-col > summary { padding: 0 0 14px; cursor: default; border-bottom: 0; pointer-events: none; }
  .foot-col > summary svg { display: none; }
  .foot-col .foot-links, .foot-col .foot-contact { padding-top: 0; }
}
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links a { color: var(--hero-ink-2); font-size: 14px; }
.foot-links a:hover { color: #fff; }
.foot-contact { display: flex; flex-direction: column; gap: 11px; font-size: 14px; font-style: normal; }
.foot-contact a { color: var(--hero-ink-2); }
.foot-contact a:hover { color: #fff; }
.foot-contact .line { display: flex; gap: 10px; align-items: flex-start; }
.foot-contact svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--cyan-300); }
.foot-bottom {
  /* The WhatsApp button is fixed to the bottom-right of the viewport, so the
     last row of the footer is given room to sit clear of it. */
  border-top: 1px solid var(--hero-line); padding: 18px 0 90px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px;
}
.foot-bottom .legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   Catalogue
   ========================================================================== */
.shop-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .shop-layout { grid-template-columns: 268px 1fr; } }

.filters { position: sticky; top: 88px; }
@media (max-width: 959px) { .filters { display: none; } }
.filter-group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h3 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
.filter-list { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }
.filter-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
}
.filter-list a:hover { background: var(--surface-3); text-decoration: none; }
.filter-list a.is-active { background: var(--info-soft); color: var(--info); font-weight: 650; }
.filter-list .c { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.shop-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.result-count { font-size: 14px; color: var(--muted); }
.result-count strong { color: var(--ink); font-weight: 700; }
.active-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-fab { display: inline-flex; }
@media (min-width: 960px) { .filter-fab { display: none; } }

/* ==========================================================================
   Product detail
   ========================================================================== */
.pdp { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main {
  position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.gallery-main .ph { color: var(--slate-300); }
.gallery-main .ph svg { width: 72px; height: 72px; }
.gallery-thumbs { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button {
  flex: 0 0 auto; width: 70px; height: 70px; padding: 6px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; overflow: hidden;
  transition: border-color .16s var(--ease);
}
.gallery-thumbs button:hover { border-color: var(--line-strong); }
.gallery-thumbs button[aria-current="true"] { border-color: var(--ocean-500); box-shadow: var(--ring); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 10px 0 12px; }
.pdp-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pdp-price {
  padding: 18px; margin: 20px 0;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
}
.pdp-price .price-now { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.pdp-price .tier-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pdp-buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.pdp-buy .btn-primary { flex: 1 1 200px; }
.spec-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; font-size: 13.5px; }
.spec-list div + div { border-top: 1px solid var(--line); }
.spec-list dt, .spec-list .k { color: var(--muted); }
.spec-list dd, .spec-list .v { margin: 0; font-weight: 600; text-align: right; }

/* ==========================================================================
   Cart & checkout
   ========================================================================== */
.cart-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

.cart-line {
  display: grid; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
  grid-template-columns: 82px 1fr;
  align-items: start;
}
@media (min-width: 700px) { .cart-line { grid-template-columns: 92px 1fr auto auto; align-items: center; } }
.cart-line:last-child { border-bottom: 0; }
.cart-line .thumb {
  width: 82px; height: 82px; border-radius: var(--r); overflow: hidden;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
}
@media (min-width: 700px) { .cart-line .thumb { width: 92px; height: 92px; } }
.cart-line .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cart-line .n { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.cart-line .c { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cart-line .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width: 700px) { .cart-line .controls { margin-top: 0; } }
.cart-line .line-total { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 699px) {
  .cart-line .line-total { grid-column: 2; }
}

.summary { position: sticky; top: 88px; }
.summary-rows { display: flex; flex-direction: column; gap: 10px; }
.summary-rows div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.summary-rows .k { color: var(--muted); }
.summary-rows .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.summary-total .k { font-weight: 700; }
.summary-total .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--muted); }
.step .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 800;
}
.step.is-active { color: var(--ink); }
.step.is-active .n { background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to)); color: #fff; }
.step .arrow { color: var(--faint); }

/* ==========================================================================
   Auth
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 940px)  { .auth-wrap { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); } }
@media (min-width: 1500px) { .auth-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.auth-aside {
  display: none; position: relative; overflow: hidden;
  padding: clamp(36px, 5vw, 64px);
  background:
    radial-gradient(760px 460px at 76% 12%, color-mix(in srgb, var(--cyan-500) 28%, transparent), transparent 62%),
    linear-gradient(158deg, var(--hero-base), var(--hero-base-2));
  color: var(--hero-ink);
  flex-direction: column; justify-content: space-between;
}
@media (min-width: 940px) { .auth-aside { display: flex; } }
.auth-aside h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin: 20px 0 14px; }
.auth-aside p { color: var(--hero-ink-2); max-width: 40ch; }
.auth-points { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.auth-point { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--hero-ink-2); }
.auth-point svg { width: 18px; height: 18px; color: var(--cyan-300); flex-shrink: 0; margin-top: 2px; }
.auth-main { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px) var(--gutter); background: var(--bg); }
.auth-card { width: min(430px, 100%); }
.auth-card--wide { width: min(760px, 100%); }

/* ------------------------------------------------------- form field grid */
/* A strict two-up grid. Deliberately not .form-grid: that one is an auto-fit
   track list shared by the admin screens, and in a 760px card it resolves to
   three columns, which is too narrow to type a business name into.
   .span-2 opts a field back to full width. */
.form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 15px 20px; align-items: start; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-grid-2 > .span-2 { grid-column: 1 / -1; }

/* A titled group of fields, so a long form reads as a few short steps. */
.form-section { margin: 0 0 26px; border: 0; padding: 0; min-width: 0; }
.form-section:last-of-type { margin-bottom: 22px; }
.form-section > legend {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 0 0 11px; margin-bottom: 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.form-section > legend .n {
  display: grid; place-items: center; width: 21px; height: 21px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--info); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0;
}

/* ==========================================================================
   Admin shell
   ========================================================================== */
.admin { min-height: 100vh; display: flex; background: var(--bg); }

.admin-side {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: 258px; flex-shrink: 0;
  background: var(--bg-alt); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s var(--ease-out), width .2s var(--ease);
}
.admin-side[data-open="true"] { transform: none; }
@media (min-width: 1080px) {
  .admin-side { position: sticky; top: 0; height: 100vh; transform: none; }
  .admin.is-collapsed .admin-side { width: 72px; }
}

.admin-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); min-height: 68px; }
/* The rail is 72px wide, so the wordmark cannot fit. The mark sits at the far
   left of the lockup, so cropping to the left edge shows it on its own. */
.admin.is-collapsed .admin-brand .brand-logo {
  height: 26px; width: 24px; object-fit: cover; object-position: left center;
}

.admin-nav { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }
.admin-nav .grp { padding: 14px 12px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.admin.is-collapsed .admin-nav .grp { text-align: center; font-size: 0; padding: 12px 0 4px; }
.admin.is-collapsed .admin-nav .grp::after { content: "···"; font-size: 12px; letter-spacing: 0; }
.admin-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.admin-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.admin-nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.admin-nav a.is-active {
  background: linear-gradient(100deg, var(--info-soft), transparent);
  color: var(--ocean-600); font-weight: 700;
  box-shadow: inset 2.5px 0 0 var(--ocean-500);
}
.admin.is-collapsed .admin-nav a { justify-content: center; padding: 10px; }
.admin.is-collapsed .admin-nav a span { display: none; }

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

.admin-top {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 clamp(14px, 2.4vw, 26px);
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.admin-top .search { flex: 1 1 auto; max-width: 400px; }
@media (max-width: 700px) { .admin-top .search { display: none; } }
.admin-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.admin-body { flex: 1; padding: clamp(18px, 2.6vw, 30px) clamp(14px, 2.4vw, 26px) 60px; min-width: 0; }

.page-head { margin-bottom: 22px; }
.page-head .row-between { align-items: flex-end; }
.page-head h1 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 5px; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ocean-500), var(--ocean-800));
  color: #fff; font-size: 12.5px; font-weight: 800;
}

.sidebar-toggle { display: grid; }
@media (min-width: 1080px) { .sidebar-toggle svg { transition: transform .2s var(--ease); } }

/* Responsive tables — below 720px each row becomes a labelled card, so a
   wide admin table never forces the page sideways on a phone. */
@media (max-width: 719px) {
  /* Once a row is a self-contained card nothing needs to escape it sideways,
     and a cell that measures a few pixels wider than its box - flex intrinsic
     sizing on an actions row will do it - must not become six pixels of page
     scroll. clip, not hidden: no scroll container, nothing focusable trapped. */
  .table-wrap.is-stacked { border: 0; overflow-x: clip; overflow-y: visible; background: transparent; }
  .table-wrap.is-stacked > table { min-width: 0; }
  table.data.stack-sm thead { display: none; }
  table.data.stack-sm, table.data.stack-sm tbody, table.data.stack-sm tr, table.data.stack-sm td { display: block; width: 100%; }
  table.data.stack-sm tr {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    margin-bottom: 10px; padding: 6px 2px; box-shadow: var(--shadow-xs);
  }
  table.data.stack-sm tr:hover { background: var(--surface); }
  table.data.stack-sm td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 7px 13px; text-align: right; border: 0;
  }
  table.data.stack-sm td::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); text-align: left; flex-shrink: 0;
  }
  table.data.stack-sm td:empty { display: none; }
  table.data.stack-sm td.num { text-align: right; }

  /* An actions cell is laid out with an inline flex-wrap:nowrap in a dozen
     views, which reads fine in a wide table but squeezes the buttons narrower
     than their own labels once the row becomes a card - that is what pushed
     /admin/customers six pixels sideways on a phone. Overriding the inline
     style needs !important; the alternative is the same fix pasted into every
     view and forgotten in the next one. */
  table.data.stack-sm td .row { flex-wrap: wrap !important; justify-content: flex-end; width: 100%; }
  table.data.stack-sm td .btn,
  table.data.stack-sm td .badge { flex-shrink: 0; white-space: nowrap; }
  /* Inline edit forms in a stacked row get the full width of the card. */
  table.data.stack-sm td .input,
  table.data.stack-sm td .select { min-width: 0; }

  /* A long unbroken value - an email address, a GSTIN, a reference - sets the
     card's minimum width and pushes the whole page sideways, because the
     label beside it does not shrink. Let those values break instead. */
  table.data.stack-sm td { overflow-wrap: anywhere; min-width: 0; }
  table.data.stack-sm td > * { min-width: 0; }
}

/* Toolbar used above admin tables */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .search { flex: 1 1 220px; max-width: 340px; }
.toolbar .field { flex: 0 1 auto; }
.toolbar .select, .toolbar .input { min-width: 130px; }

/* Form grid for admin forms */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 560px) { .form-grid .span-2 { grid-column: auto; } }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.fieldset > legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.fieldset > .hint { margin-bottom: 14px; }

/* Report bar chart — CSS only, driven by real values */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.bar-track { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--ocean-500), var(--cyan-400));
  transition: width .6s var(--ease-out);
}
.bar-row .v { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.bar-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* Sparkline column chart for the sales trend */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 8px; }
.spark div {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--ocean-400), var(--ocean-600));
  opacity: .85; transition: opacity .15s var(--ease);
}
.spark div:hover { opacity: 1; }

/* Print — invoices should print cleanly */
@media print {
  .site-head, .site-foot, .admin-side, .admin-top, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .card { border-color: #ccc; box-shadow: none; }
}

/* --- Phone width corrections (found by browser QA at 390px) ------------- */

/* The header bar ran ~75px past a 390px viewport: brand + search toggle +
   two text CTAs do not fit. The drawer already lists "Sign in" and "Open a
   trade account", so the header keeps only the primary one at phone widths. */
@media (max-width: 560px) {
  /* A narrower gutter on a phone, so a two-up product row gets the width back. */
  :root { --gutter: 14px; }
  .site-head .bar { gap: 8px; }
  .head-actions { gap: 4px; }
  .head-actions .btn-ghost { display: none; }
  .brand-logo { height: 26px; }
}

/* Ids, keys and JSON have no spaces to break at, so they forced the page
   wider than the screen on the audit and settings screens. */
code, .mono, .code { overflow-wrap: anywhere; word-break: break-word; }

/* A grid or flex child keeps its content's minimum width unless told
   otherwise, so a long label/value row (or a toolbar) widened the whole page
   at 390px even where the container already clipped it. */
.cart-layout > *, .stack > *, .panel, .panel-head, .panel-body { min-width: 0; }
.spec-list div { flex-wrap: wrap; min-width: 0; }
.spec-list .v, .spec-list dd { min-width: 0; overflow-wrap: anywhere; }
.toolbar { flex-wrap: wrap; }
.table-wrap { max-width: 100%; }

/* In the stacked (card) table the value side of each row could not shrink, so
   a long address or GSTIN pushed the card a few pixels past the screen. */
@media (max-width: 719px) {
  table.data.stack-sm td { flex-wrap: wrap; }
  table.data.stack-sm td > * { min-width: 0; overflow-wrap: anywhere; }
}

/* ==========================================================================
   Homepage sections added in the shopkeeper-facing rebuild
   Every colour below is a token, so both themes are covered by the token
   blocks at the top of this file rather than by per-rule overrides.
   ========================================================================== */

/* WhatsApp keeps its own brand green in both themes; it is a recognised mark,
   not part of the Ocean palette. */
a.btn-whatsapp, button.btn-whatsapp, .btn-whatsapp {
  --btn-bg: #15803d; --btn-ink: #fff; --btn-line: transparent;
  background: #15803d; color: #fff; border-color: transparent;
}
a.btn-whatsapp:hover, button.btn-whatsapp:hover { background: #11692f; color: #fff; }

/* ── How it works: numbered steps with a connecting rail ────────────────── */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.step-card {
  position: relative; isolation: isolate;
  padding: 22px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--ocean-300); }
.step-card h3 { margin: 12px 0 6px; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.step-card p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ink-2); }

.step-n {
  position: absolute; top: 16px; right: 18px;
  font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ocean-500); opacity: .16;
}
.step-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--info-soft); color: var(--ocean-600);
  border: 1px solid var(--line);
}

/* The rail that ties the steps together on wide screens. */
@media (min-width: 1080px) {
  .steps { position: relative; }
  .step-card::before {
    content: ""; position: absolute; z-index: -1;
    top: 38px; right: -18px; width: 18px; height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
  }
  .steps .step-card:nth-child(3n)::before,
  .steps .step-card:last-child::before { display: none; }
}

/* ── Flow: account → order → bill → payment ─────────────────────────────── */
.flow {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0; align-items: center; }
}
.flow-node {
  padding: 18px 16px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.flow-node h3 { margin: 10px 0 4px; font-size: 15px; color: var(--ink); }
.flow-node p { margin: 0; font-size: 13.5px; color: var(--muted); }
.flow-ico {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--info-soft); color: var(--ocean-600); border: 1px solid var(--line);
}
.flow-link { display: none; }
@media (min-width: 760px) {
  .flow-link { display: block; height: 2px; margin: 0 6px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ocean-300), var(--ocean-500)); opacity: .5; }
}

/* ── Brand marquee ──────────────────────────────────────────────────────── */
.marquee {
  position: relative; display: flex; gap: 14px; overflow: hidden;
  padding: 4px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 14px; flex: 0 0 auto; padding-left: 14px;
  animation: marquee 46s linear infinite;
}
/* Pause on hover, and on focus so a keyboard user can actually reach a tile
   instead of chasing it across the screen. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

.brand-tile {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  min-width: 208px; padding: 13px 18px 13px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.brand-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ocean-300); text-decoration: none; }
.bt-mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--ocean-500), var(--ocean-800));
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em;
}
.bt-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bt-n { font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.bt-c { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Supply chain diagram ───────────────────────────────────────────────── */
.chain { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .chain { grid-template-columns: 1fr auto 2fr; gap: 0; } }
.chain-branch { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .chain-branch { grid-template-columns: 1fr 1fr; gap: 14px; } }
.chain-node {
  padding: 20px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.chain-node.is-origin { background: var(--info-soft); border-color: var(--ocean-300); }
.chain-node.is-end { border-color: var(--ocean-300); }
.chain-node h3 { margin: 10px 0 5px; font-size: 15.5px; color: var(--ink); }
.chain-node p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.chain-ico {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface); color: var(--ocean-600); border: 1px solid var(--line);
}
.chain-split { display: none; }
@media (min-width: 860px) {
  .chain-split { display: grid; gap: 26px; width: 46px; padding: 0 8px; }
  .chain-split span { display: block; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ocean-300), var(--ocean-500)); opacity: .55; }
}

/* ── Category card CTA ──────────────────────────────────────────────────── */
.cat-card .go {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--ocean-600);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cat-card:hover .go, .cat-card:focus-visible .go { opacity: 1; transform: none; }
@media (hover: none) { .cat-card .go { opacity: 1; transform: none; } }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; } }
.cta-actions { gap: 10px; }
.cta-contact { display: grid; gap: 12px; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cta-contact { grid-template-columns: 1fr 1fr; } }
.cta-contact div { min-width: 0; }
.cta-contact dt {
  display: flex; align-items: center; gap: 7px; margin-bottom: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan-300);
}
.cta-contact dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hero-ink); overflow-wrap: anywhere; }
.cta-contact dd a { color: var(--hero-ink); text-decoration: underline; text-underline-offset: 2px; }
.cta-contact dd a:hover { color: #fff; }

/* ==========================================================================
   Phone experience: bottom tab bar and touch sizing
   ========================================================================== */

/* Hidden by default; this is a phone affordance, not a desktop one. */
.tabbar { display: none; }

@media (max-width: 767px) {
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(13, 27, 51, .10);
    /* Clear of the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 8px 4px 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
    color: var(--muted); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.is-active { color: var(--ocean-600); }
  .tabbar a.is-active svg { stroke-width: 2.1; }
  .tabbar a:active { background: var(--surface-3); }
  .tabbar a:focus-visible { outline: 2px solid var(--ocean-500); outline-offset: -3px; border-radius: 8px; }
  .tabbar .tab-wa { color: #15803d; }

  .tab-ico { position: relative; display: grid; place-items: center; }
  .tab-count {
    position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center; border-radius: var(--r-full);
    background: var(--ocean-600); color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  }

  /* Nothing at the bottom of a page may hide behind the bar. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .site-foot { margin-bottom: 0; }

  /* Phone-first spacing: tighter rhythm, fewer wasted pixels. */
  .section { padding: 34px 0; }
  .section-tight { padding: 24px 0; }
  .section-head { margin-bottom: 16px; }
  .section-head h2 { font-size: 1.35rem; line-height: 1.22; }
  .lede { font-size: 14.5px; }

  /* Touch targets: 44px is the smallest comfortable tap area. */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .icon-btn { width: 42px; height: 42px; }
  .tabbar a, .cat-card, .brand-tile { touch-action: manipulation; }

  /* Compact header: the bar carries brand + actions only, search moves below. */
  .site-head .bar { height: 58px; }
  .hero { padding-top: 26px; }
  .hero h1 { font-size: clamp(1.7rem, 8.5vw, 2.3rem); line-height: 1.1; }
  .hero-cta { gap: 9px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Cards read better edge to edge on a narrow screen. */
  .step-card { padding: 18px 16px 16px; }
  .step-n { font-size: 26px; top: 14px; right: 15px; }
  .cta-band { padding: 24px 20px; }

  /* A marquee that never stops is tiring on a phone; slow it down. */
  .marquee-track { animation-duration: 64s; }
  .brand-tile { min-width: 176px; }
}

/* One-handed reach: the primary action on cart and checkout stays in view. */
@media (max-width: 767px) {
  .sticky-action {
    position: sticky; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    padding: 10px; margin: 12px -4px 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }
  .sticky-action .btn { width: 100%; }
}

/* Someone who has asked for less motion gets a still page. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .floats, .floats-slow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .step-card, .brand-tile, .cat-card { transition: none; }
}

/* ── Floating WhatsApp action ───────────────────────────────────────────── */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px 0 17px; border-radius: var(--r-full);
  background: #15803d; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14.5px; letter-spacing: -.01em;
  box-shadow: 0 10px 28px rgba(21, 128, 61, .34), 0 2px 6px rgba(13, 27, 51, .16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.wa-fab:hover { background: #11692f; color: #fff; text-decoration: none; transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid #15803d; outline-offset: 3px; }

@media (max-width: 767px) {
  /* Above the tab bar, and reduced to a circle so it covers no content. */
  .wa-fab {
    right: 14px; bottom: calc(56px + 14px + env(safe-area-inset-bottom, 0px));
    min-height: 50px; width: 50px; padding: 0; justify-content: center;
  }
  .wa-fab-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }

/* The hero was leaving a large empty band under the stats on wide screens.
   Padding on .hero itself would show below the wave, so only the inner grid
   is adjusted: centring the two columns removes the gap the taller stage left
   beneath the shorter copy column. */
@media (min-width: 1000px) {
  .hero-inner { align-items: center; }
}

/* The media plate stays light in both themes because product photography is
   shot on white, so flags sitting on it must keep the light-theme ink. The
   dark palette's lighter blues are unreadable there. */
:root[data-theme="dark"] .pcard-flags .badge-brand,
:root:not([data-theme="light"]) .pcard-flags .badge-brand {
  background: #e6f2fb; color: #0068b8;
}
:root[data-theme="dark"] .pcard-flags .badge-positive,
:root:not([data-theme="light"]) .pcard-flags .badge-positive {
  background: #e6f6ed; color: #0a7a44;
}

/* ── Quantity stepper and in-place add on a product card ────────────────── */
/* .pcard-foot form is already flex, which laid the stepper and the button in
   one row and pushed the button out of the card on a phone. Same specificity,
   stated deliberately: side by side where there is room, stacked where not. */
.pcard-foot form.pcard-buy { display: grid; gap: 8px; min-width: 0; grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .pcard-foot form.pcard-buy { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .pcard-foot form.pcard-buy .qty-note { grid-column: 1 / -1; }
}
.pcard-buy .qty { min-width: 0; }
.pcard-buy .btn { width: 100%; }
.qty {
  display: grid; grid-template-columns: 38px 1fr 38px; align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.qty-btn {
  display: grid; place-items: center; min-height: 38px; padding: 0;
  border: 0; background: var(--surface-2); color: var(--ink-2); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.qty-btn:hover { background: var(--surface-3); color: var(--ink); }
.qty-btn:active { background: var(--info-soft); color: var(--info); }
.qty-btn:focus-visible { outline: 2px solid var(--ocean-500); outline-offset: -2px; }
.qty-input {
  min-width: 0; width: 100%; min-height: 38px; padding: 0 4px;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-size: 14.5px; font-weight: 700; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ocean-500); }
.qty-note { font-size: 11.5px; color: var(--muted); text-align: center; }

/* Brief confirmation after an in-place add. */
.pcard-buy.is-added .btn-primary { --btn-bg: var(--positive); --btn-line: var(--positive); background: var(--positive); }

@media (max-width: 767px) {
  /* Bigger tap targets for the stepper on a phone, but the columns must be
     able to shrink inside a two-up product card. */
  .qty { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .qty-btn, .qty-input { min-height: 42px; }
  /* Two columns stay readable at 390px now that the cards are wider.
     On a phone the row is the constraint on how large a product photograph
     can be, so the gutter, the gap and the card's own padding are all trimmed
     to hand the width back to the image: ~178px at 390px, against ~164px
     before. Two-up is the floor here - one-up would be larger still, but it
     turns a 484-line catalogue into a very long scroll. */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .pcard-body { padding: 10px 10px 12px; }
  .pcard-media { aspect-ratio: 1 / 1.1; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* ==========================================================================
   Hero carousel
   Slides are shown one at a time with [hidden] rather than a transform track,
   so a slide that is not on screen is genuinely out of the accessibility tree
   and its links are not focusable.
   ========================================================================== */
/* The four slides are not the same height, and at a three-second cadence any
   difference reads as the page lurching. The script measures the tallest slide
   and pins that as a floor; it re-measures on resize and once images land.
   With no JS only the first slide is ever shown, so nothing can jump. */
.hero-carousel { position: relative; }
.hero-slide[hidden] { display: none; }
/* Every slide is floored to the height of the tallest one, so a short slide
   centres in the space it is given rather than sitting on top of a void.
   [hidden] above is the more specific selector and still wins. */
.hero-slide {
  display: flex; flex-direction: column; justify-content: center;
  animation: heroIn .45s var(--ease-out) both;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero-inner-wide { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero-inner-wide { grid-template-columns: .92fr 1.08fr; align-items: center; } }

.hero-points { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 9px; }
@media (min-width: 620px) { .hero-points { grid-template-columns: 1fr 1fr; gap: 10px 22px; } }
.hero-points li {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: var(--hero-ink);
}
.hero-points .ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--hero-card);
  border: 1px solid var(--hero-line); color: var(--cyan-300);
}

/* Brand tiles inside the hero: text cards, because we hold no logo artwork. */
.hero-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px)  { .hero-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hero-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; } }
.hero-brand {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 17px 14px; text-align: center; text-decoration: none;
  background: rgba(255, 255, 255, .95); border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-brand:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.hb-n { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ocean-900); overflow-wrap: anywhere; }
.hb-c { font-size: 12.5px; font-weight: 650; color: #55647d; }

/* Category tiles inside the hero, using real product photography. */
.hero-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px)  { .hero-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hero-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; } }
.hero-cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 15px 12px 17px; text-align: center; text-decoration: none;
  background: rgba(255, 255, 255, .95); border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.hc-img {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border-radius: var(--r-sm); background: #fff; overflow: hidden; color: var(--ocean-500);
}
.hc-img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.hc-n { font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--ocean-900); overflow-wrap: anywhere; }
.hc-c { font-size: 12px; font-weight: 650; color: #55647d; }

/* The hero tile styles assume the deep-ocean hero behind them, so their ink is
   a fixed dark blue against a near-white tile. Dropped onto an ordinary page
   surface that inverts in dark mode, dark ink lands on a dark tile. .is-plain
   re-points the tile at the theme's own tokens. */
.hero-cat.is-plain, .hero-brand.is-plain {
  background: var(--surface); border-color: var(--line);
}
.hero-cat.is-plain .hc-n, .hero-brand.is-plain .hb-n { color: var(--ink); }
.hero-cat.is-plain .hc-c, .hero-brand.is-plain .hb-c { color: var(--muted); }

/* Who we supply */
.hero-uses { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (min-width: 620px) { .hero-uses { grid-template-columns: 1fr 1fr; } }
.hero-use {
  padding: 20px 21px; border-radius: var(--r);
  background: var(--hero-card); border: 1px solid var(--hero-line);
}
.hero-use .ico {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255, 255, 255, .12); color: var(--cyan-300); border: 1px solid var(--hero-line);
}
.hero-use h3 { margin: 11px 0 4px; font-size: 16.5px; color: var(--hero-ink); }
.hero-use p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--hero-ink-2); }

/* Controls */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: none; place-items: center; width: 50px; height: 50px; padding: 0;
  border-radius: var(--r-full); cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid var(--hero-line);
  transition: background-color .18s var(--ease);
}
.hero-arrow:hover { background: rgba(255, 255, 255, .26); }
.hero-arrow:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 2px; }
.hero-prev { left: -8px; }
.hero-next { right: -8px; }
@media (min-width: 1100px) { .hero-arrow { display: grid; } }

.hero-dots { display: flex; justify-content: center; gap: 10px; padding: 8px 0 2px; }
.hero-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: var(--r-full); cursor: pointer;
  background: rgba(255, 255, 255, .34); border: 0;
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.hero-dots button.is-active { width: 32px; background: var(--cyan-300); }
.hero-dots button:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-dots button { transition: none; }
}

/* ==========================================================================
   Homepage explainer, advantage, MOQ and audience sections
   The 3D here is real perspective on real elements, not a picture of depth:
   a tilted slab with icon tiles pushed forward on the Z axis, so the parallax
   holds as the card rotates under the cursor. Every animation is switched off
   under prefers-reduced-motion at the foot of this block.
   ========================================================================== */

/* The Ocean Ventures monogram, used as the mark on a tile or a card. */
.ov-mono {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(145deg, var(--ocean-600), var(--ocean-900));
  color: #fff; font-weight: 800; letter-spacing: -.04em; font-size: 15px;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ov-mono.is-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.ov-mono.is-lg { width: 58px; height: 58px; border-radius: 17px; font-size: 19px; }

/* ------------------------------------------------- 1. What is Ocean Ventures */
.explain { display: grid; gap: clamp(30px, 4.5vw, 58px); align-items: center; }
@media (min-width: 1000px) { .explain { grid-template-columns: 1.02fr .98fr; } }

.explain-points { display: grid; gap: 14px; margin-top: 26px; }
.explain-point {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 16px 17px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.explain-point:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.explain-point h3 { margin: 0 0 4px; font-size: 15.5px; }
.explain-point p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* The 3D stage: a perspective box holding one tilted slab and six icon tiles
   floating at different Z depths around it. */
.stage-3d {
  position: relative; display: grid; place-items: center;
  min-height: 440px; perspective: 1200px; perspective-origin: 50% 45%;
}
.stage-3d::before {
  /* the ground glow the slab appears to sit in */
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ocean-500) 24%, transparent), transparent 66%);
  filter: blur(6px);
}
.stage-3d::after {
  /* the orbit ring the tiles are pinned to */
  content: ""; position: absolute; width: min(430px, 84%); aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--ocean-500) 34%, transparent);
  border-radius: 50%;
  animation: ovSpin 34s linear infinite;
}
.slab-3d {
  position: relative; z-index: 2; width: min(272px, 62%);
  padding: 20px 18px 22px; border-radius: 24px;
  background: linear-gradient(160deg, var(--ocean-800), var(--ocean-950));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255, 255, 255, .2);
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(7deg);
  animation: ovSlab 9s var(--ease) infinite;
}
.slab-3d .slab-mono { transform: translateZ(34px); }
.slab-3d h3 {
  margin: 15px 0 5px; color: #fff; font-size: 17px; transform: translateZ(24px);
}
.slab-3d p {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--hero-ink-2); transform: translateZ(16px);
}
.slab-3d .slab-rows { display: grid; gap: 7px; margin-top: 16px; transform: translateZ(20px); }
.slab-3d .slab-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--hero-line);
  font-size: 12px; font-weight: 650; color: #fff;
}
.slab-3d .slab-row b { color: var(--cyan-300); font-variant-numeric: tabular-nums; }

/* Icon tiles floating around the slab. Each is pushed out on Z and bobs on a
   different delay, so they never move as one flat sheet. */
.tile-3d {
  position: absolute; z-index: 3;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ocean-600);
  box-shadow: var(--shadow-lg);
  animation: ovFloat 6s var(--ease) infinite;
}
.tile-3d.t1 { top: 8%;  left: 6%;   animation-delay: -.2s; }
.tile-3d.t2 { top: 2%;  right: 14%; animation-delay: -1.4s; }
.tile-3d.t3 { top: 42%; right: 2%;  animation-delay: -2.6s; }
.tile-3d.t4 { bottom: 8%; right: 16%; animation-delay: -3.4s; }
.tile-3d.t5 { bottom: 3%; left: 14%;  animation-delay: -4.2s; }
.tile-3d.t6 { top: 45%; left: 0;     animation-delay: -5.1s; }

@keyframes ovFloat {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-13px) translateZ(28px); }
}
@keyframes ovSlab {
  0%, 100% { transform: rotateY(-15deg) rotateX(7deg) translateY(0); }
  50%      { transform: rotateY(-8deg)  rotateX(3deg) translateY(-10px); }
}
@keyframes ovSpin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- 2. The advantage */
.adv-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px)  { .adv-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .adv-grid { grid-template-columns: repeat(3, 1fr); } }
.adv-card {
  position: relative; overflow: hidden;
  padding: 22px 21px 24px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.adv-card::after {
  /* a light sweep that only shows on hover, catching the raised edge */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(130deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  transition: opacity .3s var(--ease);
}
.adv-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--ocean-500) 40%, var(--line));
}
.adv-card:hover::after { opacity: 1; }
.adv-card h3 { margin: 14px 0 6px; font-size: 16.5px; }
.adv-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------- 3. Low MOQ / wholesale pricing */
.moq-panel {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(26px, 4vw, 48px);
  padding: clamp(26px, 4vw, 48px); border-radius: var(--r-xl, 22px);
  background:
    radial-gradient(760px 420px at 88% -12%, color-mix(in srgb, var(--cyan-500) 24%, transparent), transparent 62%),
    linear-gradient(155deg, var(--hero-base), var(--hero-base-2));
  color: var(--hero-ink);
}
@media (min-width: 1000px) { .moq-panel { grid-template-columns: 1.04fr .96fr; align-items: center; } }
.moq-panel h2 { color: #fff; margin: 14px 0 12px; font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem); }
.moq-panel h2 .accent {
  background: linear-gradient(100deg, var(--cyan-300), var(--ocean-300) 70%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.moq-panel > div > p { color: var(--hero-ink-2); max-width: 46ch; }
.moq-feats { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 26px; }
@media (min-width: 620px) { .moq-feats { grid-template-columns: 1fr 1fr; } }
.moq-feat {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 650; color: var(--hero-ink);
}
.moq-feat .ico {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; background: var(--hero-card);
  border: 1px solid var(--hero-line); color: var(--cyan-300);
}
.moq-side {
  padding: 22px 22px 24px; border-radius: var(--r-lg);
  background: var(--hero-card); border: 1px solid var(--hero-line);
}
.moq-side h3 { margin: 0 0 6px; color: #fff; font-size: 17px; }
.moq-side p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--hero-ink-2); }
.moq-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.moq-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .1); border: 1px solid var(--hero-line);
  font-size: 13px; font-weight: 650; color: #fff;
}
.moq-chip svg { color: var(--cyan-300); }

/* ------------------------------------------------------- 4. Who can buy */
.aud-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .aud-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .aud-grid { grid-template-columns: repeat(3, 1fr); } }
.aud-card {
  padding: 26px 22px 24px; border-radius: var(--r-lg); text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.aud-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.aud-ico {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 15px;
  border-radius: 19px; color: var(--ocean-700);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--ocean-500) 17%, var(--surface)),
    color-mix(in srgb, var(--cyan-500) 13%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--ocean-500) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .24s var(--ease);
}
.aud-card:hover .aud-ico { transform: translateY(-2px) scale(1.05) rotate(-3deg); }
.aud-card h3 { margin: 0 0 7px; font-size: 16.5px; }
.aud-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .stage-3d::after, .slab-3d, .tile-3d { animation: none; }
  .explain-point, .adv-card, .aud-card, .aud-ico { transition: none; }
  .explain-point:hover, .adv-card:hover, .aud-card:hover { transform: none; }
  .aud-card:hover .aud-ico { transform: none; }
}

/* -------------------------------------------------- artwork cell in a list */
/* Categories and brands carry one picture each. The cell shows what is there
   now next to the control that changes it, so an admin never has to guess
   whether a row has artwork. */
.asset-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.asset-thumb {
  display: grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; overflow: hidden;
  border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--faint);
}
.asset-thumb img { width: 100%; height: 100%; object-fit: contain; }
.asset-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* The file input is hidden inside its label, so the label is the button. */
.asset-upload .btn { cursor: pointer; }
.asset-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Keyboard users get the same focus ring the real button would show. */
.asset-upload .btn:focus-within { outline: 3px solid var(--info); outline-offset: 2px; }

/* ==========================================================================
   Money desk
   ========================================================================== */
.money-now { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; }
@media (min-width: 720px)  { .money-now { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .money-now { grid-template-columns: repeat(3, 1fr); } }

.money-card {
  display: grid; gap: 3px; padding: 20px 20px 17px; text-decoration: none;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.money-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none;
  border-color: color-mix(in srgb, var(--info) 45%, var(--line));
}
.money-card .mc-ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 9px;
  border-radius: 11px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted);
}
.money-card .mc-n {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.money-card .mc-l { font-size: 14px; font-weight: 650; color: var(--ink-2); }
.money-card .mc-m { font-size: 12.5px; color: var(--muted); }
.money-card .mc-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-size: 13px; font-weight: 700; color: var(--info);
}

/* A card only shouts when there is something to do. */
.money-card.is-live .mc-ico { background: color-mix(in srgb, var(--info) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); }
.money-card.is-late .mc-ico { background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 38%, transparent); color: var(--danger); }
.money-card.is-late .mc-n { color: var(--danger); }

.money-h2 { margin: 0 0 6px; font-size: 1.15rem; }

.money-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.money-step {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 17px 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
}
.money-step .ms-n {
  display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--info); color: #fff;
  font-size: 13px; font-weight: 800;
}
.money-step h3 { margin: 2px 0 5px; font-size: 15.5px; }
.money-step h3 a { color: var(--ink); }
.money-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .money-card { transition: none; }
  .money-card:hover { transform: none; }
}

/* ------------------------------------- chosen-photo previews before upload */
.upload-previews {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.upload-preview { margin: 0; }
.upload-preview img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: contain;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.upload-preview figcaption {
  margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--muted);
  overflow-wrap: anywhere;
}
/* The first one is what the catalogue will show, so say so plainly. */
.upload-preview:first-child figcaption { color: var(--info); font-weight: 700; }
.upload-preview:first-child img { border-color: color-mix(in srgb, var(--info) 45%, var(--line)); }

/* ------------------------------------------------------- product import */
.import-rules { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 9px; }
.import-rules li { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.import-rules strong { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--ink); }

.import-cols > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--info);
  padding: 6px 0; width: fit-content;
}
.import-cols > summary:focus-visible { outline: 3px solid var(--info); outline-offset: 3px; }

.import-report {
  margin-top: 20px; padding: 18px 19px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface-2);
}
.import-report h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 15.5px;
}
.import-report.is-clean { border-color: color-mix(in srgb, var(--positive) 45%, var(--line)); }
.import-report.is-clean h3 { color: var(--positive); }
.import-report.is-blocked { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.import-report.is-blocked h3 { color: var(--danger); }
.import-counts { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }

.import-errors {
  margin: 0; padding-left: 20px; display: grid; gap: 6px;
  max-height: 340px; overflow-y: auto;
}
.import-errors li { font-size: 13px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }