/* ==========================================================================
   OUTLEETS — Wholesale catalog design system
   Static demo stylesheet. No build step, no external assets.

   Conventions
   -----------
   .js-price   price content — HIDDEN while :root[data-mode="guest"]
   .js-locked  the "sign in to see pricing" affordance — HIDDEN for members
   .num        tabular figures
   .mono       monospaced identifier (UPC / SKU)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* surfaces + ink (light) */
  --bg:            #F6F7F9;
  --surface:       #FFFFFF;
  --surface-2:     #F0F2F5;
  --surface-3:     #E8EBF0;
  --ink:           #0E1116;
  --ink-2:         #3E4753;
  --ink-3:         #6C7684;
  --ink-4:         #98A1AF;
  --line:          #E1E5EB;
  --line-2:        #CDD4DD;

  /* Dark-band palette. Currently UNUSED — the chrome and hero were softened to
     light surfaces. Kept so a dark band can be reinstated on any section
     without re-deriving the colours. */
  --band:          #101317;
  --band-ink:      #F4F6F8;
  --band-ink-2:    #98A1AF;
  --band-line:     rgba(255,255,255,.10);

  /* brand */
  --brand:         #ED1C24;
  --brand-hover:   #C8151C;
  --brand-soft:    #FDECEC;
  --brand-line:    #F7C3C5;
  /* text colour to use ON a brand-filled surface — flips in dark mode,
     because the dark-mode red is light enough that white text fails AA */
  --on-brand:      #FFFFFF;

  /* status */
  --ok:            #0B7A4B;
  --ok-soft:       #E4F4EC;
  --ok-line:       #B7E0C9;
  --warn:          #9A5B0E;
  --warn-soft:     #FCF0DC;
  --warn-line:     #EFCF9A;
  --wa:            #16803F;
  --wa-hover:      #10662F;
  --on-wa:         #FFFFFF;

  /* hero band — kept as its own tokens so dark mode can lift it well clear of
     the page background instead of sitting black-on-black */
  --hero-from:     #FFFFFF;
  --hero-to:       #F6F7F9;
  --hero-wash:     #FDECEC;
  --hero-glow:     #F0F2F5;

  /* type */
  --ui: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system,
        "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas,
        "Liberation Mono", Menlo, monospace;

  --t-2:   .6875rem;  /* 11 */
  --t-1:   .75rem;    /* 12 */
  --t0:    .8125rem;  /* 13 */
  --t1:    .875rem;   /* 14 */
  --t2:    1rem;      /* 16 */
  --t3:    1.25rem;   /* 20 */
  --t4:    1.625rem;  /* 26 */
  --t5:    2.25rem;   /* 36 */
  --t6:    3rem;      /* 48 */

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px; --rp: 999px;

  --sh1: 0 1px 2px rgba(14,17,22,.05);
  --sh2: 0 2px 4px rgba(14,17,22,.05), 0 8px 20px rgba(14,17,22,.06);
  --sh3: 0 12px 40px rgba(14,17,22,.12);

  --max: 1440px;
  --rail: 252px;

  --z-head: 40;
  --z-pop: 60;      /* dropdowns: above the sticky header, below the lightbox */
  --z-drawer: 150;  /* cart drawer: above everything except the lightbox */
  --z-lightbox: 200;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* dark ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0A0C0F;
    --surface:   #12161C;
    --surface-2: #191E26;
    --surface-3: #222933;
    --ink:       #EDF0F4;
    --ink-2:     #B4BDC9;
    --ink-3:     #8792A1;
    --ink-4:     #67717F;
    --line:      #222933;
    --line-2:    #333C48;

    --band:      #08090B;
    --band-ink:  #F4F6F8;
    --band-ink-2:#8792A1;
    --band-line: rgba(255,255,255,.08);

    --brand:      #FF4D53;
    --brand-hover:#FF6B70;
    --brand-soft: #2A1315;
    --brand-line: #4E2124;
    --on-brand:   #150708;

    --ok:      #45D18C;
    --ok-soft: #10281D;
    --ok-line: #1E4534;
    --warn:    #E3A852;
    --warn-soft:#2A2011;
    --warn-line:#4A3818;
    --wa:      #25D366;
    --wa-hover:#3ADD78;
    --on-wa:   #06210F;

    --hero-from: #1F2734;
    --hero-to:   #10141A;
    --hero-wash: #3A1A1F;
    --hero-glow: #1C2430;

    --sh1: 0 1px 2px rgba(0,0,0,.5);
    --sh2: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.45);
    --sh3: 0 12px 40px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:        #0A0C0F;
  --surface:   #12161C;
  --surface-2: #191E26;
  --surface-3: #222933;
  --ink:       #EDF0F4;
  --ink-2:     #B4BDC9;
  --ink-3:     #8792A1;
  --ink-4:     #67717F;
  --line:      #222933;
  --line-2:    #333C48;

  --band:      #08090B;
  --band-ink:  #F4F6F8;
  --band-ink-2:#8792A1;
  --band-line: rgba(255,255,255,.08);

  --brand:      #FF4D53;
  --brand-hover:#FF6B70;
  --brand-soft: #2A1315;
  --brand-line: #4E2124;
  --on-brand:   #150708;

  --ok:      #45D18C;
  --ok-soft: #10281D;
  --ok-line: #1E4534;
  --warn:    #E3A852;
  --warn-soft:#2A2011;
  --warn-line:#4A3818;
  --wa:      #25D366;
  --wa-hover:#3ADD78;
  --on-wa:   #06210F;

  --hero-from: #1F2734;
  --hero-to:   #10141A;
  --hero-wash: #3A1A1F;
  --hero-glow: #1C2430;

  --sh1: 0 1px 2px rgba(0,0,0,.5);
  --sh2: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.45);
  --sh3: 0 12px 40px rgba(0,0,0,.6);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t1);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

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

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

.num  { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.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;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
.muted { color: var(--ink-3); }
.eyebrow {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow--brand { color: var(--brand); }

/* --------------------------------------------------------------------------
   3. GATING  — the core rule of this site
   -------------------------------------------------------------------------- */
/* Retail pricing is public now, so .js-price is never hidden. What the mode
   switches is WHOLESALE-only content: the quantity ladder, the barcodes, and
   the "sign in" prompts that only make sense to someone who is not wholesale. */
:root[data-mode="wholesale"] .js-locked     { display: none !important; }
:root[data-mode="wholesale"] .js-guest-only { display: none !important; }
:root[data-mode="retail"]    .js-wholesale  { display: none !important; }
/* default before JS runs: assume guest, so a price can never flash */
/* No mode attribute at all means the server never rendered — withhold the
   wholesale-only content rather than assume. */
:root:not([data-mode]) .js-wholesale { display: none !important; }

/* --------------------------------------------------------------------------
   4. CHROME — topbar / header / nav / footer
   -------------------------------------------------------------------------- */
/* Promo strip. Brand-coloured rather than the old muted grey: this is an offer,
   not fine print, and grey-on-grey is where offers go to be ignored. */
.topbar {
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-1);
}
/* Three columns so the offer sits dead centre of the PAGE, not centred in
   whatever space the WhatsApp link leaves over. The empty first column is
   what makes that true. */
.topbar__in {
  max-width: var(--max); margin: 0 auto; padding: 8px var(--s6);
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: var(--s4);
}
.topbar__in > * { display: inline-flex; align-items: center; gap: 8px; }
.topbar__promo {
  grid-column: 2; justify-self: center;
  font-weight: 600; letter-spacing: .005em; text-align: center;
}
.topbar__promo svg { flex: none; opacity: .9; }
/* nowrap: a wrapped phone number doubles the height of the bar and knocks the
   offer off centre. It hides entirely below the breakpoint instead. */
.topbar__sep { grid-column: 3; justify-self: end; white-space: nowrap; }
.topbar b { color: inherit; font-weight: 800; }
.topbar a {
  color: inherit; font-weight: 650;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.topbar a:hover { text-decoration-color: currentColor; }

/* Narrow screens: the offer is the point, so it keeps the full width and the
   WhatsApp link drops — it is repeated in the footer and on every product. */
@media (max-width: 900px) {
  .topbar__in { grid-template-columns: minmax(0, 1fr); padding: 7px var(--s4); }
  .topbar__promo { grid-column: 1; }
  .topbar__sep { display: none; }
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }

.head {
  position: sticky; top: 0; z-index: var(--z-head);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.head__in {
  max-width: var(--max); margin: 0 auto; padding: var(--s3) var(--s6);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: var(--s5);
}
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; flex: none; }
.brand__logo { height: 48px; width: auto; }
.brand__tag {
  padding-left: var(--s3); border-left: 1px solid var(--line);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.25;
  white-space: nowrap;
}

.search { position: relative; display: flex; min-width: 0; }
.search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.search input {
  width: 100%; background: var(--surface-2); color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r2);
  padding: 10px 14px 10px 36px; font-size: var(--t1);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.search input::placeholder { color: var(--ink-4); }
.search input:focus {
  background: var(--surface); border-color: var(--line-2); outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.util { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.util__link {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--ink-2); font-weight: 550; font-size: var(--t1);
  padding: 9px var(--s3); border-radius: var(--r2); min-height: 40px;
}
.util__link:hover { color: var(--ink); background: var(--surface-2); }

.nav { background: var(--surface); border-bottom: 1px solid var(--line); }
.nav__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--s6);
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
}
.nav a {
  padding: 8px 14px; margin: 9px 0; border-radius: var(--rp);
  text-decoration: none; color: var(--ink-3);
  font-size: var(--t1); font-weight: 600; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current] { color: var(--surface); background: var(--ink); }

.foot {
  background: var(--surface-2); color: var(--ink-3);
  border-top: 1px solid var(--line); margin-top: var(--s8);
}
.foot__in {
  max-width: var(--max); margin: 0 auto; padding: var(--s7) var(--s6) var(--s6);
  /* Five columns now (Catalog, Accounts, Help, Contact + the brand block).
     auto-fit rather than fixed tracks so they reflow to two rows on a tablet
     instead of being squeezed to unreadable widths. */
  display: grid; gap: var(--s6);
  grid-template-columns: 1.4fr repeat(4, minmax(140px, 1fr));
}
@media (max-width: 1080px) {
  .foot__in { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.foot h4 {
  font-size: var(--t-2); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: var(--s3); font-weight: 700;
}
.foot li { margin-bottom: 7px; font-size: var(--t0); }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--brand); }
/* Larger: at 30px the mark was smaller than the column headings beside it and
   read as a footnote rather than a signature. */
.foot__logo { height: 58px; width: auto; margin-bottom: var(--s4); }
.foot__bar {
  border-top: 1px solid var(--line);
  max-width: var(--max); margin: 0 auto; padding: var(--s4) var(--s6) var(--s7);
  display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--t-1);
}
.foot__bar .topbar__sep { margin-left: auto; }

/* --------------------------------------------------------------------------
   5. PAGE HEAD / BREADCRUMB / STATS
   -------------------------------------------------------------------------- */
.page { padding-bottom: var(--s7); }
.crumb { font-size: var(--t0); color: var(--ink-4); padding: var(--s4) 0 0; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--brand); }
.crumb span { margin: 0 6px; opacity: .55; }

.pagehead { padding: var(--s4) 0 var(--s5); }
.pagehead h1 { font-size: var(--t5); letter-spacing: -.025em; }
.pagehead p { color: var(--ink-3); max-width: 68ch; margin-top: var(--s2); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden;
}
.stat { background: var(--surface); padding: var(--s4) var(--s5); }
.stat__n {
  font-size: var(--t4); font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat__l {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.stat--brand .stat__n { color: var(--brand); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px var(--s5);
  font-size: var(--t1); font-weight: 650; letter-spacing: .01em;
  border-radius: var(--r3); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn--dark:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn--wa { background: var(--wa); border-color: var(--wa); color: var(--on-wa); }
.btn--wa:hover { background: var(--wa-hover); border-color: var(--wa-hover); }
.btn--sm { min-height: 34px; padding: 6px var(--s3); font-size: var(--t0); }
.btn--lg { min-height: 50px; padding: 13px var(--s6); font-size: var(--t2); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------------------
   7. BADGES / PILLS / CHIPS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-2); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r1);
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
}
.badge--ok   { background: var(--ok-soft);    color: var(--ok);    box-shadow: inset 0 0 0 1px var(--ok-line); }
.badge--low  { background: var(--warn-soft);  color: var(--warn);  box-shadow: inset 0 0 0 1px var(--warn-line); }
.badge--out  { background: var(--surface-3);  color: var(--ink-3); }
.badge--solid{ background: var(--ink); color: var(--surface); }
/* "New" is the norm — keep it quiet. Returns/Damaged is what a buyer must
   actually notice, so only that gets a colour. */
.badge--cond { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* The load badge is a link, so it needs the affordance the others don't. */
.badge--load {
  background: var(--brand); color: var(--on-brand);
  text-decoration: none; font-weight: 700;
}
.badge--load:hover { background: var(--brand-hover); }
.badge--alert{ background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--rp); padding: 4px 6px 4px var(--s3);
  font-size: var(--t0); color: var(--ink-2);
}
.chip button {
  background: var(--surface-2); border: 0; border-radius: 50%; cursor: pointer;
  width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--ink-3); line-height: 1; font-size: 13px; padding: 0;
}
.chip button:hover { background: var(--brand); color: var(--on-brand); }

/* --------------------------------------------------------------------------
   8. PANELS / NOTES
   -------------------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden;
}
.panel__h {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.panel__b { padding: var(--s4); }

.note {
  border-radius: var(--r2); padding: var(--s3) var(--s4);
  font-size: var(--t0); border: 1px solid var(--line); background: var(--surface-2);
}
.note--ok   { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.note--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.kv { font-size: var(--t1); }
.kv tr { border-bottom: 1px solid var(--line); }
.kv tr:last-child { border-bottom: 0; }
.kv th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  padding: 9px var(--s4) 9px 0; white-space: nowrap; vertical-align: top;
}
.kv td { text-align: right; padding: 9px 0; font-weight: 600; }

/* A stale catalog. Loud on purpose: every price and stock figure on the site is
   only as fresh as the last build, so this is the one row on the dashboard that
   invalidates all the others. `inherit` on the children so the muted "never" and
   the <time> element cannot quietly out-rank the red. */
.kv td.is-stale       { color: var(--brand); font-weight: 800; }
.kv td.is-stale *     { color: inherit; font-weight: inherit; }
.kv td.is-stale .stalemsg {
  display: block; margin-top: 3px; text-align: right; white-space: normal;
  font-size: var(--t-1); font-weight: 700; line-height: 1.35;
}

/* --------------------------------------------------------------------------
   9. PRICE + LOCK  (the heart of the gating UX)
   -------------------------------------------------------------------------- */
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.price__now {
  font-size: var(--t3); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price__unit { font-size: var(--t-1); font-weight: 600; color: var(--ink-3); }
.price__msrp {
  font-size: var(--t0); color: var(--ink-4); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.price__off {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .04em;
  color: var(--brand); background: var(--brand-soft);
  padding: 2px 6px; border-radius: var(--r1);
}
.price__case {
  font-size: var(--t0); color: var(--ink-3); font-variant-numeric: tabular-nums;
  width: 100%;
}
.price__call { font-size: var(--t1); font-weight: 650; color: var(--ink-2); }

.lock {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t0); font-weight: 650; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--r2); padding: 7px var(--s3);
  text-decoration: none; width: 100%; justify-content: center;
}
.lock:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.lock svg { flex: none; }
/* The card title uses a ::after overlay to make the whole card clickable.
   Interactive children must sit above it or the overlay swallows the click. */
.card .lock { position: relative; z-index: 2; }

.lockpanel {
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--r3); padding: var(--s5); text-align: center;
}
.lockpanel__i {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto var(--s3);
  display: grid; place-items: center; background: var(--brand); color: var(--on-brand);
}
.lockpanel h3 { font-size: var(--t2); margin-bottom: var(--s2); color: var(--ink); }
.lockpanel p { font-size: var(--t0); color: var(--ink-2); margin-bottom: var(--s4); }

/* --------------------------------------------------------------------------
   10. STOCK BLOCK  (the guest's headline number)
   -------------------------------------------------------------------------- */
.stock { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.stock__n {
  font-size: var(--t3); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.stock__u {
  font-size: var(--t-1); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.stock__sub { font-size: var(--t0); color: var(--ink-3); width: 100%; font-variant-numeric: tabular-nums; }
.stock--low .stock__n { color: var(--warn); }
.stock--out .stock__n { color: var(--ink-4); }

.meter { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.meter--low i { background: var(--warn); }

/* --------------------------------------------------------------------------
   11. TWO-COLUMN LAYOUT + FILTER RAIL
   -------------------------------------------------------------------------- */
.cols {
  display: grid; grid-template-columns: var(--rail) minmax(0,1fr);
  gap: var(--s6); align-items: start;
}
.rail { position: sticky; top: 84px; }
.rail__h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s3);
}
/* mobile-only "Filters" disclosure — hidden on desktop, where the rail is always open */
.rail__toggle { display: none; }
/* an explicit display would otherwise defeat the [hidden] attribute */
.rail__badge[hidden] { display: none; }
.rail__badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 8px; border-radius: var(--rp);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--t-2); font-weight: 800; font-variant-numeric: tabular-nums;
}
.rail__h h2 {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

.fgroup { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.fgroup:first-of-type { border-top: 0; }
.fgroup__h {
  width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 650; font-size: var(--t1); text-align: left; min-height: 32px;
}
.fgroup__h .chev { color: var(--ink-4); transition: transform .18s var(--ease); flex: none; }
.fgroup[data-open="false"] .chev { transform: rotate(-90deg); }
.fgroup[data-open="false"] .fgroup__b { display: none; }
/* 238px = exactly 7 rows, so the list never clips a row in half */
.fgroup__b { padding-top: var(--s2); display: flex; flex-direction: column; gap: 2px; max-height: 238px; overflow-y: auto; }

.opt {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  color: var(--ink-2); font-size: var(--t0); padding: 6px 4px;
  border-radius: var(--r1); min-height: 32px;
}
.opt:hover { background: var(--surface-2); color: var(--ink); }
.opt input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; flex: none; }
.opt span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt .n { margin-left: auto; font-size: var(--t-1); color: var(--ink-4); font-variant-numeric: tabular-nums; }

.railsearch { position: relative; margin-bottom: var(--s3); }
.railsearch input {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 8px var(--s3); font-size: var(--t0);
}
.railsearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* --------------------------------------------------------------------------
   12. TOOLBAR
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
}
.toolbar__count { color: var(--ink-3); font-size: var(--t0); font-variant-numeric: tabular-nums; }
.toolbar__count b { color: var(--ink); font-weight: 700; }
.toolbar .spacer { margin-left: auto; }

.field { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t0); color: var(--ink-3); }
.field select, .select {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r2); padding: 8px 30px 8px var(--s3); font-size: var(--t0);
  min-height: 36px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236C7684' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.field select:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.viewtoggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; }
.viewtoggle button {
  background: var(--surface); border: 0; cursor: pointer; color: var(--ink-3);
  padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t0); font-weight: 600; min-height: 36px;
}
.viewtoggle button + button { border-left: 1px solid var(--line-2); }
.viewtoggle button:hover { background: var(--surface-2); color: var(--ink); }
.viewtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* --------------------------------------------------------------------------
   13. PRODUCT GRID + CARD
   -------------------------------------------------------------------------- */
.grid {
  display: grid; gap: var(--s5) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh2); transform: translateY(-2px); }
.card:focus-within { border-color: var(--brand); }

.card__media {
  position: relative; background: var(--surface-2); aspect-ratio: 1/1;
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;   /* read horizontal swipes, leave vertical scroll alone */
}

/* --------------------------------------------------------------------------
   GENERIC IMAGE CAROUSEL
   One implementation shared by product cards, table rows and any future
   surface. Any element carrying data-gal="<upc>" becomes swipeable; the
   markup inside is [.gal__nav] arrows and a [.gal__dots] indicator.
   -------------------------------------------------------------------------- */
[data-gal] {
  touch-action: pan-y;              /* horizontal gestures are ours, vertical scrolls */
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
[data-gal].is-dragging { cursor: grabbing; }
[data-gal] img { -webkit-user-drag: none; user-drag: none; }

/* ---- sliding track ----
   Slides sit side by side and the track translates, so a swipe physically
   follows the pointer and then snaps. Only a 3-slide window ever carries a
   real src (see galShow) — the rest stay empty until they scroll into range,
   which keeps a long catalog cheap. */
.gal__view { position: relative; width: 100%; height: 100%; overflow: hidden; }
.gal__track {
  display: flex; width: 100%; height: 100%;
  will-change: transform;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.gal__track.is-dragging { transition: none; }
.gal__slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: grid; place-items: center; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .gal__track { transition: none; }
}

/* arrows reveal on hover of the carousel OR its surrounding card */
.card:hover .gal__nav,
.card:focus-within .gal__nav,
[data-gal]:hover .gal__nav,
[data-gal]:focus-within .gal__nav { opacity: 1; }

.gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--sh1);
  opacity: 0; transition: opacity .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.gal__nav:focus-visible { opacity: 1; }
.gal__nav:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.gal__nav[disabled] { opacity: 0 !important; pointer-events: none; }
.gal__nav--prev { left: 8px; }
.gal__nav--next { right: 8px; }
/* touch devices have no hover, so arrows stay visible for discoverability */
@media (hover: none) {
  .gal__nav { opacity: 1; }
}

.gal__dots {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 1px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--rp); padding: 2px 5px; box-shadow: var(--sh1);
}
.gal__dots button {
  width: 15px; height: 18px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.gal__dots button::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-2);
  transition: width .2s var(--ease), background .2s var(--ease);
}
.gal__dots button[aria-current="true"]::after {
  width: 14px; border-radius: var(--rp); background: var(--brand);
}

/* table variant: dots sit under the thumbnail rather than floating on it */
.gal__dots--below {
  position: static; transform: none; margin: 4px auto 0;
  background: none; border: 0; box-shadow: none; padding: 0;
  justify-content: center;
}
.gal__dots--below button { width: 13px; height: 14px; }
.gal__dots--below button::after { width: 5px; height: 5px; }
.gal__dots--below button[aria-current="true"]::after { width: 12px; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
/* Many real catalog lines have no photo. Make that state look deliberate
   rather than broken — brand initial on a soft plate, brand name beneath. */
.card__ph {
  width: 100%; height: 100%; padding: var(--s4); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(150deg, var(--surface-2), var(--surface-3));
  color: var(--ink-4);
}
.card__ph b {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-3);
  font-size: var(--t4); font-weight: 700; letter-spacing: -.02em;
  box-shadow: var(--sh1);
}
.card__ph span {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__flags {
  position: absolute; top: var(--s2); left: var(--s2); right: var(--s2); z-index: 2;
  display: flex; gap: 5px; flex-wrap: wrap; pointer-events: none;
}

.card__body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; flex: 1; }
.card__brand {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
.card__title { font-size: var(--t1); font-weight: 600; line-height: 1.35; margin-bottom: 6px; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card__title a { color: var(--brand); }
.card__meta {
  font-size: var(--t0); color: var(--ink-3); margin-bottom: var(--s2);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.card__ids {
  font-size: var(--t-1); color: var(--ink-4); margin-bottom: var(--s3);
  display: flex; gap: var(--s3); flex-wrap: wrap;
}
.card__stock {
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.card__price { margin-top: var(--s3); min-height: 34px; }

/* --------------------------------------------------------------------------
   14. PRODUCT TABLE (dense view)
   -------------------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r3); background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.ptable { min-width: 900px; font-size: var(--t0); }
.ptable thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  text-align: left; padding: 10px var(--s3); white-space: nowrap;
  font-size: var(--t-2); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ptable tbody tr { border-bottom: 1px solid var(--line); }
.ptable tbody tr:last-child { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--surface-2); }
.ptable td { padding: 10px var(--s3); vertical-align: middle; }
.ptable .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable a { text-decoration: none; font-weight: 600; }
.ptable a:hover { color: var(--brand); }
.ptable__media { position: relative; width: 76px; }
.ptable__media[data-gal] { cursor: pointer; }
.ptable__frame {
  position: relative; width: 76px; height: 76px;
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); overflow: hidden;
}
.ptable__frame .gal__slide img {
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
}
.ptable__thumb {
  width: 76px; height: 76px; border-radius: var(--r2); background: var(--surface-2);
  object-fit: contain; padding: 5px; border: 1px solid var(--line); flex: none;
}
.ptable__ph {
  width: 76px; height: 76px; border-radius: var(--r2); background: var(--surface-2);
  display: grid; place-items: center; font-weight: 700; color: var(--ink-4);
  border: 1px solid var(--line); font-size: var(--t3);
}
.ptable__n { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. EMPTY STATE / PAGINATION
   -------------------------------------------------------------------------- */
.empty {
  text-align: center; padding: var(--s8) var(--s5);
  border: 1px dashed var(--line-2); border-radius: var(--r3); background: var(--surface);
}
.empty h3 { font-size: var(--t3); margin-bottom: var(--s2); }
.empty p { color: var(--ink-3); margin-bottom: var(--s4); }

.pager { display: flex; justify-content: center; align-items: center; gap: var(--s3); margin-top: var(--s7); }
.pager__info { color: var(--ink-3); font-size: var(--t0); font-variant-numeric: tabular-nums; }

/* ---- loading state for infinite scroll ---- */
.loading {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--ink-3); font-size: var(--t0); font-weight: 600;
}
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-2); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel { pointer-events: none; }
.skel__box, .skel__line {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--r1);
}
.skel__box { width: 100%; height: 100%; border-radius: 0; }
.skel__line { height: 11px; margin-bottom: 8px; }
.skel__line--lg { height: 16px; }
.skel .card__media { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .skel__box, .skel__line { animation: none; }
}

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); }
.formrow { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
/* align-content:start stops a field with no help text from stretching and
   pushing its input away from its label when its row-neighbour is taller */
.f { display: grid; gap: 6px; min-width: 0; align-content: start; }
.f > label { font-size: var(--t0); font-weight: 650; color: var(--ink-2); }
.f .req { color: var(--brand); }
.input, .textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r2);
  padding: 11px var(--s3); font-size: var(--t1); min-height: 44px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.f .select { width: 100%; min-height: 44px; padding: 11px 34px 11px var(--s3); font-size: var(--t1); }
.help { font-size: var(--t-1); color: var(--ink-3); }
.err { font-size: var(--t-1); color: var(--brand); font-weight: 600; display: none; }
.f.is-bad .input, .f.is-bad .textarea, .f.is-bad .select { border-color: var(--brand); }
.f.is-bad .err { display: block; }

.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t0); color: var(--ink-2); cursor: pointer; }
.check input { accent-color: var(--brand); width: 17px; height: 17px; margin: 2px 0 0; flex: none; }

.pwwrap { position: relative; }
.pwwrap .input { padding-right: 76px; }
.pwtoggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  font-size: var(--t-1); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 10px; border-radius: var(--r1); min-height: 34px;
}
.pwtoggle:hover { color: var(--brand); background: var(--surface-2); }

/* --------------------------------------------------------------------------
   17. AUTH LAYOUT
   -------------------------------------------------------------------------- */
.auth {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: var(--s7); align-items: start; padding: var(--s7) 0 var(--s8);
}
.authcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r4); padding: var(--s6); box-shadow: var(--sh2);
}
.authcard h1 { font-size: var(--t4); margin-bottom: 6px; }
.authcard > p { color: var(--ink-3); margin-bottom: var(--s5); }
.authaside {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r4);
  padding: var(--s6); position: sticky; top: 84px;
}
.authaside h2 { font-size: var(--t3); margin-bottom: var(--s3); }
.authaside p, .authaside li { color: var(--ink-3); font-size: var(--t0); }
.authaside li { display: flex; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.authaside li b { color: var(--ink); display: block; font-size: var(--t1); }
.authaside .stepno {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand);
  color: var(--on-brand); display: grid; place-items: center; font-size: var(--t-1); font-weight: 700;
}

.orline {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--ink-4); font-size: var(--t-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin: var(--s5) 0;
}
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.success { text-align: center; padding: var(--s6) var(--s4); }
.success__i {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--s4);
  display: grid; place-items: center; background: var(--ok-soft); color: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok-line);
}
.success h2 { font-size: var(--t4); margin-bottom: var(--s2); }
.success > p { color: var(--ink-3); margin-bottom: var(--s5); }
.steps { text-align: left; display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.steps li { display: flex; gap: var(--s3); font-size: var(--t0); color: var(--ink-2); }
.steps .stepno {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; font-size: var(--t-1); font-weight: 700;
}

/* --------------------------------------------------------------------------
   18. HOME SECTIONS
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 100%);
  border-bottom: 1px solid var(--line);
}
/* a soft warm wash instead of a hard dark band */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 85% at 88% 6%, var(--hero-wash), transparent 64%),
    radial-gradient(46% 70% at 2% 100%, var(--hero-glow), transparent 62%);
  opacity: .9;
}
.hero__in {
  max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--s6);
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: var(--s7); align-items: center;
}
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.5rem); letter-spacing: -.035em;
  line-height: 1.04; margin: var(--s4) 0 var(--s4);
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p { color: var(--ink-2); font-size: var(--t2); max-width: 54ch; margin-bottom: var(--s5); }

/* Hero lockup: logo, then the promise, then the line that explains it.
   `height: auto` with an explicit width/height on the <img> keeps the aspect
   ratio while still reserving space, so the headline does not jump when the
   logo finishes loading. */
.hero__logo {
  display: block; width: auto; height: clamp(52px, 7vw, 76px);
  max-width: min(100%, 300px); margin-bottom: var(--s2);
}
.hero h1 { text-transform: uppercase; }
.hero .hero__lede {
  font-style: italic; color: var(--ink-2);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem); line-height: 1.35;
  max-width: 30ch; margin-bottom: var(--s5);
}

/* "Who we are" — a plain block of prose, not a card. It sits directly under the
   hero, so it deliberately has no border or surface of its own. */
.section--who { max-width: 68ch; }
.section--who h2 { margin-bottom: var(--s3); }
.section--who p { color: var(--ink-2); font-size: var(--t2); line-height: 1.55; }
/* Admin strip above the hero. Rendered server-side and only for admins, so the
   URL it links to never reaches anybody else's markup. Sits full-bleed in brand
   red so it reads as "you are working, not shopping" at a glance. */
.adminbar { background: var(--brand); color: var(--on-brand); }
.adminbar__in {
  max-width: var(--max); margin: 0 auto; padding: 10px var(--s6);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.adminbar__label {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: var(--t0);
}
.adminbar__label .dot { background: currentColor; opacity: .85; }
.adminbar__badge {
  background: rgba(255, 255, 255, .2); border-radius: 999px;
  padding: 3px 10px; font-size: var(--t-1); font-weight: 700;
}
.adminbar .spacer { flex: 1 1 auto; }
/* The bar is already brand-coloured, so the button inverts rather than repeats it. */
.adminbar .btn {
  background: var(--on-brand); border-color: var(--on-brand); color: var(--brand);
}
.adminbar .btn:hover { background: var(--surface); border-color: var(--surface); }
@media (max-width: 640px) {
  .adminbar__in { gap: var(--s2); }
  .adminbar .spacer { flex-basis: 100%; height: 0; }
}

.hero__tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--rp);
  padding: 5px var(--s3); font-size: var(--t-1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  box-shadow: var(--sh1);
}
.hero__facts {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line);
}
.hero__fact {
  display: block; text-decoration: none; border-radius: var(--r3);
  padding: var(--s3) var(--s4); border: 1px solid transparent; min-width: 132px;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.hero__fact b {
  display: block; font-size: var(--t4); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.15;
}
.hero__fact span {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
}
/* the ones that go somewhere read as buttons */
a.hero__fact { background: var(--surface); border-color: var(--line); box-shadow: var(--sh1); }
a.hero__fact:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh2); }
a.hero__fact:hover span { color: var(--brand); }
a.hero__fact:hover .hero__fact-go { transform: translateX(2px); }
.hero__fact-go { transition: transform .15s var(--ease); }

/* hero image mosaic — a strict 2x2. Rows are deliberately aligned: no
   staggered offsets, and every caption is the same height so both tiles in a
   row share a baseline. */
.mosaic {
  position: relative; display: grid;
  grid-template-columns: 1fr 1fr; gap: var(--s4);
  align-items: stretch;
}
.mosaic figure {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r4); overflow: hidden; box-shadow: var(--sh2);
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.mosaic figure:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh3); }
/* stretched link: the title anchor covers the whole tile, so the arrows and
   dots can be real buttons instead of illegal nested interactive elements */
.mosaic__title { text-decoration: none; color: inherit; }
.mosaic__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mosaic__img {
  position: relative;
  aspect-ratio: 1/1; display: grid; place-items: center;
  overflow: hidden; background: var(--surface);
}
.mosaic__img img { width: 100%; height: 100%; object-fit: contain; padding: 11%; }
.mosaic figcaption {
  padding: 10px var(--s3) 12px; border-top: 1px solid var(--line);
  min-height: 60px; display: flex; flex-direction: column; justify-content: center;
}
.mosaic figcaption b {
  display: block; font-size: var(--t-2); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mosaic figcaption .mosaic__title {
  font-size: var(--t-1); font-weight: 600; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mosaic figure:hover figcaption .mosaic__title { color: var(--brand); }

/* rank + sell-through annotations on a featured card */
.card__rank {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center; box-shadow: var(--sh2);
  font-size: var(--t0); font-weight: 800; font-variant-numeric: tabular-nums;
}
.card__sold {
  display: flex; align-items: center; gap: 6px; margin-bottom: var(--s2);
  font-size: var(--t-1); font-weight: 700; color: var(--brand);
}
.card__sold b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Brand directory.

   Image-led: each card leads with the product we hold the most of from that
   brand, at the same scale as a product card. Brands with no photography fall
   back to the same designed placeholder tile the catalog uses, so a mixed grid
   still reads as one thing rather than "the ones that worked".
   -------------------------------------------------------------------------- */
.brandgrid { display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); }
.brandcard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  overflow: hidden; text-decoration: none;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.brandcard:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh2); }

.brandcard__media {
  display: block; position: relative;
  aspect-ratio: 4/3; background: var(--surface-2);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.brandcard__media img {
  width: 100%; height: 100%; object-fit: contain; padding: 9%;
  transition: transform .25s var(--ease);
}
.brandcard:hover .brandcard__media img { transform: scale(1.05); }
/* the shared placeholder fills the media box exactly like a real photo */
.brandcard__media .card__ph { width: 100%; height: 100%; }

.brandcard__body {
  padding: var(--s4); display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.brandcard h3 { font-size: var(--t2); line-height: 1.25; }
.brandcard:hover h3 { color: var(--brand); }
.brandcard__n {
  font-size: var(--t0); color: var(--ink-3); font-variant-numeric: tabular-nums;
  margin-top: auto; padding-top: var(--s3);
}

/* letter tile — still used where a compact mark is wanted */
.brandcard__i {
  width: 56px; height: 56px; border-radius: var(--r2); display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t3); font-weight: 700; letter-spacing: -.02em;
}

/* ranked "moving fastest" list in the hero panel */
.movers li {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.movers li:last-child { border-bottom: 0; }
.movers__rank {
  flex: none; width: 22px; height: 22px; border-radius: var(--r1);
  background: var(--surface-2); color: var(--ink-3);
  display: grid; place-items: center;
  font-size: var(--t-2); font-weight: 800; font-variant-numeric: tabular-nums;
}
.movers li:first-child .movers__rank { background: var(--brand); color: var(--on-brand); }
.movers__main { min-width: 0; flex: 1; }
.movers__main a {
  text-decoration: none; font-weight: 600; font-size: var(--t0); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.movers__main a:hover { color: var(--brand); }
.movers__meta { font-size: var(--t-2); color: var(--ink-4); margin-bottom: 2px; }
.movers__n { flex: none; text-align: right; }
.movers__n b {
  display: block; font-size: var(--t2); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15;
}
.movers__n span {
  font-size: var(--t-2); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

.section { padding: var(--s8) 0 0; }
.section__h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.section__h h2 { font-size: var(--t4); letter-spacing: -.025em; }
.section__h p { color: var(--ink-3); margin-top: 4px; }
.link {
  color: var(--brand); text-decoration: none; font-weight: 650; font-size: var(--t0);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.link:hover { text-decoration: underline; }

.tiles { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s5); text-decoration: none; display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.tile:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh2); }
.tile h3 { font-size: var(--t2); }
.tile p { font-size: var(--t0); color: var(--ink-3); }
.tile__n {
  margin-top: auto; padding-top: var(--s3); font-size: var(--t0);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.tile__i {
  width: 38px; height: 38px; border-radius: var(--r2); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: var(--s2);
}

.howrow { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); counter-reset: step; }
.how {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  padding: var(--s5); position: relative;
}
.how__n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface);
  display: grid; place-items: center; font-size: var(--t0); font-weight: 700; margin-bottom: var(--s3);
}
.how--key { border-color: var(--brand); }
.how--key .how__n { background: var(--brand); color: var(--on-brand); }
.how h3 { font-size: var(--t2); margin-bottom: 6px; }
.how p { font-size: var(--t0); color: var(--ink-3); }

/* Step 3 carries the call to action, so the cards become flex columns and the
   buttons are pushed to the bottom with margin-top:auto. Without that the
   buttons would float up under short copy and sit at four different heights
   across the row. `align-items: stretch` on the grid keeps all four cards the
   same height, so the tallest one sets the line. */
.howrow { align-items: stretch; }
.how { display: flex; flex-direction: column; }
.how__cta {
  margin-top: auto; padding-top: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.how__signin {
  text-align: center; font-size: var(--t-1); color: var(--ink-3); margin-top: 2px;
}
.how__signin a { color: var(--brand); font-weight: 650; text-decoration: none; }
.how__signin a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pdp {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: var(--s7); align-items: start; max-width: 1200px;
}
.gallery__main {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4);
  aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; position: relative;
  touch-action: pan-y;               /* let us read horizontal swipes */
  -webkit-user-select: none; user-select: none;
}
.gallery__main img {
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
  -webkit-user-drag: none;
}
.gallery__main .card__ph { border-radius: var(--r4); }

/* prev / next controls — only rendered when there is more than one image */
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--sh2);
  transition: background .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
}
.gallery__nav:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.gallery__nav[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.gallery__nav--prev { left: var(--s3); }
.gallery__nav--next { right: var(--s3); }

/* page dots — one per image, active one stretches into a pill.
   Each dot is a real button (22px tap target) so it is clickable and
   keyboard-reachable, not just decoration. */
.gallery__dots {
  position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rp);
  padding: 2px 6px; box-shadow: var(--sh1);
}
.gallery__dots button {
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.gallery__dots button::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
  transition: width .22s var(--ease), background .22s var(--ease);
}
.gallery__dots button:hover::after { background: var(--ink-3); }
.gallery__dots button[aria-current="true"]::after {
  width: 20px; border-radius: var(--rp); background: var(--brand);
}

.gallery__thumbs { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.gallery__thumbs button {
  width: 72px; height: 72px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 5px; cursor: pointer; overflow: hidden;
}
.gallery__thumbs button[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp__head { margin-bottom: var(--s4); }
.pdp__brand { font-size: var(--t0); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.pdp__head h1 { font-size: var(--t4); margin: 6px 0 var(--s3); letter-spacing: -.025em; }
.pdp__flags { display: flex; gap: var(--s2); flex-wrap: wrap; }

.ids { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.idrow {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r2); padding: 8px var(--s3);
}
.idrow__k { font-size: var(--t-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); width: 42px; flex: none; }
.idrow__v { font-family: var(--mono); font-size: var(--t1); font-weight: 600; overflow-x: auto; }
.idrow button {
  margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  padding: 6px; border-radius: var(--r1); display: grid; place-items: center; min-width: 32px; min-height: 32px;
}
.idrow button:hover { color: var(--brand); background: var(--surface); }

.stockpanel { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; background: var(--surface); }
.stockpanel__top { padding: var(--s5); border-bottom: 1px solid var(--line); }
.stockpanel__n {
  font-size: var(--t6); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stockpanel--low .stockpanel__n { color: var(--warn); }
.stockpanel--out .stockpanel__n { color: var(--ink-4); }
.stockpanel__l { font-size: var(--t-1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.stockpanel__split { display: grid; grid-template-columns: 1fr 1fr; }
.stockpanel__split > div { padding: var(--s3) var(--s5); }
.stockpanel__split > div + div { border-left: 1px solid var(--line); }
.stockpanel__split b { display: block; font-size: var(--t3); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stockpanel__split span { font-size: var(--t-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.breaks { font-size: var(--t0); margin-top: var(--s3); }
.breaks th, .breaks td { padding: 7px var(--s2); border-bottom: 1px solid var(--line); }
.breaks th { text-align: left; font-size: var(--t-2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.breaks td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.breaks td:first-child { text-align: left; font-weight: 500; color: var(--ink-2); }
.breaks tr:last-child td, .breaks tr:last-child th { border-bottom: 0; }

.speclist { display: grid; gap: var(--s2); }
.speclist li { font-size: var(--t0); color: var(--ink-2); display: flex; gap: var(--s2); }
.speclist li::before { content: "—"; color: var(--brand); flex: none; }

/* --------------------------------------------------------------------------
   19b. FULLSCREEN LIGHTBOX
   -------------------------------------------------------------------------- */
body.lb-open { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 8, 10, .985);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; grid-template-rows: auto 1fr auto;
  animation: lbIn .18s var(--ease);
}
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

.lb__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s5); color: #EDF0F4;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.lb__title {
  font-size: var(--t1); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb__tools { display: flex; align-items: center; gap: var(--s2); flex: none; }
.lb__pct {
  font-size: var(--t-1); font-weight: 700; color: #98A1AF;
  font-variant-numeric: tabular-nums; min-width: 46px; text-align: center;
}
.lb__btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: var(--t2); line-height: 1;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #EDF0F4;
}
.lb__btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.lb__stage { position: relative; overflow: hidden; }
.lb__stage .gal__slide { position: relative; }
/* Absolutely positioned with all four offsets + margin:auto, rather than
   width/height:100%. A percentage height does NOT resolve reliably down
   through the 1fr grid track here, and the image blows up to its intrinsic
   ratio; pinning all four sides makes the containing block unambiguous. */
.lb__stage .gal__slide img {
  /* Absolute against the slide, with EXPLICIT 100% width/height. An <img> is a
     replaced element: `width:auto` with four insets resolves to its intrinsic
     width instead of stretching, which pins it to the top-left. Padding sits
     inside the box (border-box), and object-fit centres and scales it. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 3vmin 3vmin 7vmin;   /* extra room at the foot so the dots clear it */
  object-fit: contain;
  transform-origin: center center;
  transition: transform .18s var(--ease);
  cursor: zoom-in;
}
.lb.is-zoomed .gal__slide img { transition: none; }
/* zoomed in, a drag pans the image rather than changing slide */
.lb.is-zoomed .lb__stage { touch-action: none; }

.lb__stage .gal__nav { width: 46px; height: 46px; opacity: 1; }
.lb__stage .gal__nav--prev { left: var(--s5); }
.lb__stage .gal__nav--next { right: var(--s5); }
.lb__stage .gal__dots { bottom: var(--s5); }

.lb__hint {
  padding: var(--s3) var(--s5); text-align: center;
  color: #8792A1; font-size: var(--t-1);
  border-top: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 760px) {
  .lb__stage .gal__nav--prev { left: var(--s2); }
  .lb__stage .gal__nav--next { right: var(--s2); }
  .lb__hint { font-size: 10px; padding: var(--s2) var(--s4); }
  .lb__title { font-size: var(--t0); }
}

/* the product page main image invites the lightbox */
.gallery__main { cursor: zoom-in; }
.gallery__zoom {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: zoom-in;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: var(--sh1);
}
.gallery__zoom:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   19c. ADMIN AREA
   Reuses the site's panels, tables and stat strips — only the tab bar, the
   traffic chart and the two-column layout are specific to it.
   -------------------------------------------------------------------------- */
.adminnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
}
.adminnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; text-decoration: none; color: var(--ink-3);
  font-size: var(--t1); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adminnav a:hover { color: var(--ink); }
.adminnav a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); }
.adminnav__badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--rp);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--t-2); font-weight: 800; font-variant-numeric: tabular-nums;
}

.admincols {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

/* traffic chart — plain divs, no charting library */
.bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 150px; padding-top: var(--s4);
}
.bars__col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 4px; min-width: 0;
}
.bars__bar {
  width: 100%; border-radius: var(--r1) var(--r1) 0 0;
  background: linear-gradient(180deg, var(--brand), var(--brand-hover));
  min-height: 2px; transition: opacity .15s var(--ease);
}
.bars__col:hover .bars__bar { opacity: .75; }
.bars__n {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; order: -1;
}
.bars__x { font-size: 10px; color: var(--ink-4); }

/* delta chips on the stat strip */
.stat__l .up   { color: var(--ok);    font-weight: 700; }
.stat__l .down { color: var(--brand); font-weight: 700; }
.stat__l .flat { color: var(--ink-4); font-weight: 700; }

@media (max-width: 760px) {
  .adminnav a { padding: 9px 12px; font-size: var(--t0); }
  .bars { height: 110px; }
  .bars__n { display: none; }
}

/* --------------------------------------------------------------------------
   20. HEADER THEME SWITCH
   Replaces the old fixed demo bar. The guest/member half of that bar is gone
   for good — viewing mode is server state now, not something the browser may
   change. (Its body padding-bottom went with it; leaving it behind would have
   put 60–100px of dead space under every footer.)
   -------------------------------------------------------------------------- */
.util__theme {
  padding: 9px; min-width: 40px; justify-content: center; cursor: pointer;
  background: none; border: 0; color: var(--ink-3);
}
.util__theme:hover { color: var(--ink); background: var(--surface-2); }

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: 1fr 1fr; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hero__art { max-width: 520px; }
  .mosaic__chip { left: auto; right: -6px; }
}

@media (max-width: 920px) {
  .cols { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: static; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r3); padding: var(--s3); margin-bottom: var(--s4);
  }
  .rail__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    background: none; border: 0; padding: 10px var(--s2); cursor: pointer;
    font-size: var(--t1); font-weight: 700; min-height: 44px; color: var(--ink);
  }
  .rail__toggle .chev { color: var(--ink-3); transition: transform .18s var(--ease); }
  .rail[data-collapsed="true"] .rail__toggle .chev { transform: rotate(-90deg); }
  .rail[data-collapsed="true"] .rail__body,
  .rail[data-collapsed="true"] .rail__h { display: none; }
  .rail__h { padding: 0 var(--s2); }
  .rail__h h2 { display: none; }
  .rail__body { padding: 0 var(--s2); }
  .fgroup__b { max-height: none; }

  /* minmax(0,1fr), not 1fr: a bare 1fr has an implicit min-content minimum, so
     one wide child (a long input, an unbreakable string) pushes the track wider
     than its container and the card hangs off the screen. */
  .auth { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .authaside { position: static; order: -1; }
  .brand__tag { display: none; }
}

@media (max-width: 760px) {
  :root { --s6: 16px; --s7: 30px; --s8: 42px; }
  .wrap, .topbar__in, .head__in, .nav__in, .hero__in,
  .foot__in, .foot__bar { padding-left: 16px; padding-right: 16px; }

  /* header collapses to logo + account, with search on its own row */
  .head__in { grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); padding: var(--s3) var(--s6); }
  .search { grid-column: 1 / -1; order: 3; }
  .util { justify-content: flex-end; }
  .util__link span { display: none; }
  .util__link { padding: 10px; min-width: 44px; justify-content: center; }
  .brand__logo { height: 38px; }

  .topbar__in { justify-content: space-between; }
  .topbar__in > *:not(:first-child):not(.topbar__sep) { display: none; }

  .hero__in { padding-top: var(--s7); padding-bottom: var(--s7); }
  .hero p { font-size: var(--t1); }
  .hero__facts { gap: var(--s2); }
  .hero__fact { flex: 1 1 auto; min-width: 104px; padding: var(--s3); }
  .hero__fact b { font-size: var(--t3); }

  .pagehead h1 { font-size: var(--t4); }
  .section__h { gap: var(--s2); }
  .section__h h2 { font-size: var(--t3); }

  .formrow { grid-template-columns: minmax(0, 1fr); }
  .stockpanel__n { font-size: var(--t5); }
  .breaks th, .breaks td { padding: 7px 4px; font-size: var(--t-1); }

  .toolbar { gap: var(--s2); row-gap: var(--s3); }
  .toolbar .spacer { display: none; }
  .toolbar__count { width: 100%; }
  .field { flex: 1 1 auto; }
  .field select { flex: 1 1 auto; }

  .stats { grid-template-columns: 1fr 1fr; }
  /* an odd number of stats would otherwise leave a dead empty cell */
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat { padding: var(--s3) var(--s4); }
  .stat__n { font-size: var(--t3); }


  .btnrow > .btn { flex: 1 1 auto; }
  .gallery__nav { width: 40px; height: 40px; }
  .ptable__thumb, .ptable__ph { width: 60px; height: 60px; }

  /* touch targets: standalone links need real height on a phone.
     (Links inline inside a sentence are deliberately left alone.) */
  .foot li a, .foot li { min-height: 40px; display: flex; align-items: center; }
  .foot li { margin-bottom: 0; }
  .link { min-height: 40px; align-items: center; }
  .brand { padding: 5px 0; }
  .topbar a { padding: 6px 0; display: inline-flex; align-items: center; min-height: 32px; }
  .check input { width: 20px; height: 20px; }
  .crumb a { display: inline-block; padding: 5px 0; }
  .opt { min-height: 40px; }
}

@media (max-width: 560px) {
  .grid, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .card__body { padding: var(--s3); }
  .card__ids { display: none; }
  .card__ph b { width: 44px; height: 44px; font-size: var(--t2); }
  .card__ph span { font-size: 10px; letter-spacing: .08em; }
  .card__title { font-size: var(--t0); }
  .stock__n { font-size: var(--t2); }
  .price__now { font-size: var(--t2); }
  /* drop the category (and its separator) so the meta line never wraps
     to leave a dangling "·" */
  .card__meta span:nth-child(2), .card__meta span:nth-child(3) { display: none; }
  /* one utility line only — keep the contact, drop the status blurb */
  .topbar__in > *:first-child { display: none; }

  .foot__in { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .authcard { padding: var(--s4); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .howrow { grid-template-columns: minmax(0, 1fr); }
  .brandgrid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
  .brandcard__body { padding: var(--s3); }
  .brandcard h3 { font-size: var(--t1); }
  .gallery__thumbs button { width: 60px; height: 60px; }
  .idrow__k { width: 36px; }
}

@media (max-width: 380px) {
  .grid, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .brandgrid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 1.9rem; }
}

@media print {
  .topbar, .nav, .rail, .foot { display: none !important; }
}


/* --------------------------------------------------------------------------
   WHOLESALE TIER TABLE  ("Want to be a wholesaler?")
   Shown to everyone: to a retail shopper it is the pitch, to a wholesale buyer
   it is their actual price ladder. Same numbers either way.
   -------------------------------------------------------------------------- */
.tierpanel { border-color: var(--brand); overflow: hidden; }
.tierpanel .panel__h {
  background: var(--brand); color: var(--on-brand); border-bottom: 0;
  display: flex; align-items: center; gap: 8px;
}
.tierpanel .panel__h svg { flex: none; }

.tiers { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tiers th {
  text-align: left; font-size: var(--t-2); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 var(--s3) 8px 0; border-bottom: 1px solid var(--line);
}
.tiers td { padding: 10px var(--s3) 10px 0; border-bottom: 1px solid var(--line); }
.tiers tr:last-child td { border-bottom: 0; }
.tiers .r { text-align: right; padding-right: 0; }
.tiers__qty { font-weight: 700; }
.tiers__off {
  font-size: var(--t-2); font-weight: 700; color: var(--brand);
  background: var(--brand-soft); padding: 2px 7px; border-radius: 999px;
}
.tiers__each { font-weight: 700; font-size: var(--t1); }
.tiers__total { color: var(--ink-3); font-size: var(--t-1); }
/* The row the visitor is currently entitled to */
.tiers tr.is-now td { background: var(--surface-2); }

.tierpitch {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4); border-top: 1px solid var(--line); background: var(--surface-2);
}
.tierpitch p { font-size: var(--t-1); color: var(--ink-2); margin: 0; max-width: 42ch; }

.price--lg .price__now { font-size: var(--t5); }
.price__save { font-size: var(--t0); color: var(--ok); font-weight: 650; margin-top: 6px; }

/* --------------------------------------------------------------------------
   CART
   -------------------------------------------------------------------------- */
.util__cart { position: relative; }
.util__cartn {
  position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
.util__cartn[hidden] { display: none; }

/* Quantity stepper. type=number is deliberately not used: its spinners are
   unusable on touch and unstyleable across browsers. */
/* min-height matches .btn--lg so the stepper and Add to cart line up, and so
   the +/- are a real tap target — without it the control collapsed to the
   input's default line height, about 34px, and the buttons were fiddly. */
.qty {
  display: inline-flex; align-items: stretch; min-height: 50px;
  border: 1px solid var(--line-2); border-radius: var(--r2);
  overflow: hidden; background: var(--surface); flex: none;
}
.qty button {
  width: 50px; border: 0; background: transparent; cursor: pointer;
  font-size: var(--t3); font-weight: 600; color: var(--ink-2); line-height: 1;
  display: grid; place-items: center; touch-action: manipulation;
}
.qty button:hover:not(:disabled) { background: var(--surface-2); color: var(--brand); }
.qty button:active:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }
.qty input {
  width: 62px; border: 0; text-align: center; background: transparent;
  font-size: var(--t2); font-weight: 700; color: var(--ink);
  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; }
.qty input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

.addrow { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s4); }
.addrow .btn { flex: 1 1 200px; }

.cartline {
  display: grid; grid-template-columns: 84px minmax(0,1fr) auto;
  gap: var(--s4); align-items: center;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.cartline:last-child { border-bottom: 0; }
.cartline__img {
  width: 84px; height: 84px; border-radius: var(--r2); background: var(--surface-2);
  object-fit: contain; padding: 6px;
}
.cartline__t { font-weight: 650; line-height: 1.3; }
.cartline__t a { color: inherit; text-decoration: none; }
.cartline__t a:hover { color: var(--brand); }
.cartline__meta { font-size: var(--t-1); color: var(--ink-3); margin-top: 3px; }
.cartline__right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cartline__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.cartline__rm {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--t-1); color: var(--ink-4); text-decoration: underline;
}
.cartline__rm:hover { color: var(--brand); }

.cartgrid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s6); align-items: start; }
.sumrow { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; font-size: var(--t0); }
.sumrow--total { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s3);
                 font-size: var(--t2); font-weight: 800; }
.sumrow--save { color: var(--ok); font-weight: 650; }

@media (max-width: 900px) {
  .cartgrid { grid-template-columns: minmax(0, 1fr); }
  .cartline { grid-template-columns: 64px minmax(0,1fr); }
  .cartline__img { width: 64px; height: 64px; }
  .cartline__right { grid-column: 2; flex-direction: row; justify-content: space-between; width: 100%; }
}

/* --------------------------------------------------------------------------
   ACCOUNT TYPE CHOOSER
   Two routes that mean different things, so they are presented as a decision
   rather than a dropdown buried in a form.
   -------------------------------------------------------------------------- */
.choose {
  display: grid; gap: var(--s5); max-width: 900px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.choice {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r4);
  padding: var(--s6); text-decoration: none; color: inherit;
  box-shadow: var(--sh1);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.choice:hover {
  border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh2);
}
.choice__i {
  width: 46px; height: 46px; border-radius: var(--r3);
  display: grid; place-items: center; margin-bottom: var(--s4);
  background: var(--surface-2); color: var(--ink-2);
}
.choice--key .choice__i { background: var(--brand-soft); color: var(--brand); }
.choice h2 { font-size: var(--t3); margin-bottom: var(--s2); }
.choice > p { color: var(--ink-3); font-size: var(--t0); margin-bottom: var(--s4); }
.choice__list { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.choice__list li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: var(--t0); color: var(--ink-2);
}
.choice__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}
/* margin-top:auto pins the call to action to the bottom, so the two cards line
   up even when one has more copy than the other. */
.choice__go {
  margin-top: auto; font-weight: 700; color: var(--brand); font-size: var(--t1);
}


/* --------------------------------------------------------------------------
   PROSE  (policy pages, FAQ)
   Measure capped near 70 characters — long legal text at full page width is
   genuinely hard to read.
   -------------------------------------------------------------------------- */
.prose { max-width: 70ch; font-size: var(--t1); line-height: 1.7; color: var(--ink-2); }
.prose__meta {
  font-size: var(--t-1); color: var(--ink-4); margin-bottom: var(--s6);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.prose h2 {
  font-size: var(--t2); color: var(--ink); margin: var(--s6) 0 var(--s3);
  letter-spacing: -.01em;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p { margin-bottom: var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose li { margin-bottom: 8px; }
.prose b { color: var(--ink); font-weight: 700; }
.prose a { color: var(--brand); font-weight: 600; }
.prose .note { margin-bottom: var(--s5); }

.prose__foot {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: var(--t0);
}
.prose__foot span { color: var(--ink-4); font-weight: 700; }
.prose__foot a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.prose__foot a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   ACCOUNT MENU
   -------------------------------------------------------------------------- */
.umenu { position: relative; }
.umenu__btn {
  background: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
}
.umenu__name {
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.umenu__chev { display: inline-flex; transition: transform .18s var(--ease); opacity: .7; }
.umenu.is-open .umenu__chev { transform: rotate(180deg); }

.umenu__pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-pop, 60);
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r3); box-shadow: var(--sh3, var(--sh2));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
}
.umenu.is-open .umenu__pop { opacity: 1; visibility: visible; transform: translateY(0); }

/* Bridges the gap between button and panel so the pointer can travel without
   crossing "nothing" and triggering mouseleave. */
.umenu__pop::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}

.umenu__head {
  padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.umenu__head b { display: block; font-size: var(--t0); color: var(--ink); }
.umenu__head span {
  display: block; font-size: var(--t-1); color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.umenu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: var(--r2);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t0); font-weight: 550; white-space: nowrap;
}
.umenu__item:hover, .umenu__item:focus-visible {
  background: var(--surface-2); color: var(--brand); outline: none;
}
.umenu__item svg { flex: none; opacity: .75; }
.umenu__item:hover svg { opacity: 1; }
.umenu__sep { height: 1px; background: var(--line); margin: 5px 2px; }

@media (max-width: 700px) {
  /* The name is the widest thing in a cramped header — the icon still says
     "account", and the panel repeats the name at the top. */
  .umenu__name { display: none; }
  .umenu__pop { min-width: 210px; }
}

/* --------------------------------------------------------------------------
   ORDERS
   -------------------------------------------------------------------------- */
.orderpanel { margin-bottom: var(--s4); }
.orderpanel .panel__h { flex-wrap: wrap; gap: 8px; }

/* Collapsed order: a strip of what was in it. Recognising the bottle is faster
   than reading "4 items". */
.orderthumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orderthumbs img,
.orderthumbs__ph {
  width: 46px; height: 46px; border-radius: var(--r2);
  background: var(--surface-2); object-fit: contain; padding: 4px; flex: none;
}
.orderthumbs__ph {
  display: grid; place-items: center; font-weight: 800; color: var(--ink-4);
  padding: 0; font-size: var(--t1);
}
.orderthumbs__more {
  font-size: var(--t-1); font-weight: 700; color: var(--ink-3);
  padding: 0 6px; flex: none;
}
@media (max-width: 560px) {
  .orderthumbs .btn { margin-left: 0 !important; width: 100%; }
}

/* Line-item thumbnail in an order. object-fit:contain because product shots
   arrive at every aspect ratio and cropping a bottle looks broken. */
.lineimg {
  width: 54px; height: 54px; border-radius: var(--r2);
  background: var(--surface-2); object-fit: contain; padding: 4px;
  display: block;
}
.lineimg--ph {
  display: grid; place-items: center; padding: 0;
  font-weight: 800; color: var(--ink-4); font-size: var(--t1);
}

/* --------------------------------------------------------------------------
   CART DRAWER
   Slides in from the right when something is added, or when the cart icon is
   clicked. Confirmation and a route to checkout without leaving the page.
   -------------------------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer, 150); visibility: hidden; }
.drawer.is-open { visibility: visible; }

.drawer__scrim {
  position: absolute; inset: 0; background: rgba(10, 12, 16, .45);
  opacity: 0; transition: opacity .22s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(10, 12, 16, .18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: none;
}
.drawer__h b { font-size: var(--t2); }
.drawer__x {
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
  padding: 6px; border-radius: var(--r2); display: grid; place-items: center;
}
.drawer__x:hover { background: var(--surface-2); color: var(--brand); }

/* The body scrolls; the header and footer stay put, so Checkout is always
   reachable however many lines are in the cart. */
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s5); }
.drawer__f {
  flex: none; padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--line); background: var(--surface);
}
.drawer__f[hidden] { display: none; }

.drawer__empty { text-align: center; padding: var(--s7) var(--s4); color: var(--ink-3); }
.drawer__empty svg { color: var(--ink-4); margin-bottom: var(--s3); }
.drawer__empty p { margin-bottom: var(--s4); }

.drawer__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t2); margin-bottom: 6px;
}
.drawer__sum b { font-variant-numeric: tabular-nums; }
.drawer__note { font-size: var(--t-1); color: var(--ink-3); margin-bottom: var(--s3); }
.drawer__note--ok { color: var(--ok); font-weight: 650; }

.dline {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto;
  gap: var(--s3); align-items: start;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.dline:last-child { border-bottom: 0; }
.dline__i {
  width: 62px; height: 62px; border-radius: var(--r2);
  background: var(--surface-2); object-fit: contain; padding: 5px;
}
.dline__i--ph { display: grid; place-items: center; padding: 0; font-weight: 800; color: var(--ink-4); }
.dline__t {
  display: block; font-weight: 650; font-size: var(--t0); line-height: 1.3;
  color: var(--ink); text-decoration: none;
}
.dline__t:hover { color: var(--brand); }
.dline__p { font-size: var(--t-1); color: var(--ink-3); margin-top: 2px; }
.dline__x { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dqty { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.dqty button {
  width: 28px; height: 28px; border: 1px solid var(--line-2); background: var(--surface);
  border-radius: var(--r1); cursor: pointer; color: var(--ink-2);
  font-size: var(--t1); line-height: 1; display: grid; place-items: center;
}
.dqty button:hover { border-color: var(--brand); color: var(--brand); }
.dqty > span {
  min-width: 28px; text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: var(--t0);
}
.dline__rm {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: var(--t-1); color: var(--ink-4); text-decoration: underline; padding: 0;
}
.dline__rm:hover { color: var(--brand); }

/* Stop the page behind from scrolling while the drawer is open. */
body.has-drawer { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim { transition: none; }
}


/* Cart rows are denser than the product page, but the controls still have to be
   thumb-sized — 44px is the usual floor for a touch target. */
.cartline .qty { min-height: 44px; }
.cartline .qty button { width: 44px; font-size: var(--t2); }
.cartline .qty input { width: 54px; font-size: var(--t1); }

/* Drawer steppers likewise. */
.dqty button { width: 34px; height: 34px; font-size: var(--t2); touch-action: manipulation; }
.dqty > span { min-width: 34px; font-size: var(--t1); }

/* Says a line was trimmed to available stock, rather than silently showing a
   smaller number than the shopper asked for. */
.dline__cap { color: var(--brand); font-weight: 650; }