/* GENERATED FILE - do not edit by hand.
   Source: brand/tokens.json   Regenerate: python3 tools/build_tokens.py */
:root {
  /* ---- colour: brand ---- */
  --z-obsidian: #0B0D10; /* Header, hero, promotional bands, footer - the primary dark ground */
  --z-charcoal: #181B20; /* Secondary dark surfaces, menus, announcement bar */
  --z-graphite: #242830; /* Borders and hairlines on dark surfaces */
  --z-blue-700: #1D4ED8; /* Hover and pressed states on the primary action */
  --z-blue-600: #2563EB; /* Electric Blue - primary CTA, links, active nav, focus ring */
  --z-blue-400: #60A5FA; /* Links on dark surfaces (blue-600 is only 3.76:1 on obsidian) */
  --z-blue-300: #93C5FD; /* Focus ring on dark surfaces */
  --z-blue-100: #DBEAFE; /* Quiet blue badge ground */
  --z-blue-50: #EFF6FF; /* Blue section ground, info alert ground */
  /* ---- colour: accent (auctions, countdowns, clearance) ---- */
  --z-amber-500: #F59E0B; /* Auction Amber - FILL ONLY. Bid buttons, live-auction indicators, clearance flags. Always with obsidian text (8.65:1) */
  --z-amber-600: #D97706; /* Hover state on amber fills */
  --z-amber-700: #B45309; /* Amber TEXT on light grounds - countdowns, clearance prices, bid prices */
  --z-amber-100: #FDE8C4; /* Quiet amber badge ground */
  --z-amber-50: #FFFBEB; /* Auction and clearance section ground */
  /* ---- colour: neutral ---- */
  --z-grey-900: #111318; /* Dark Text - headings and highest-emphasis text on light */
  --z-grey-700: #344054; /* Body text */
  --z-grey-600: #475467; /* Secondary text */
  --z-grey-500: #667085; /* Muted Grey - captions, meta, placeholder text */
  --z-grey-400: #7D8798; /* Form-control and interactive borders (3.63:1 on white, meets 1.4.11) */
  --z-grey-350: #A9B2C1; /* Secondary text on DARK surfaces only (9.1:1 on obsidian) */
  --z-grey-300: #D0D5DD; /* DECORATIVE ONLY - dividers and hairlines */
  --z-grey-200: #E4E7EC; /* DECORATIVE ONLY - card edges and quiet separators */
  --z-grey-100: #F4F5F7; /* Soft Grey - page background and section separation */
  --z-white: #FFFFFF; /* Clean White - product cards and main content surfaces */
  /* ---- colour: status ---- */
  --z-success-700: #15803D; /* Success Green - IN STOCK, paid, positive status. Never decorative */
  --z-success-50: #ECFDF3; /* Success alert ground */
  --z-info-700: #1D4ED8; /* Informational text and icon */
  --z-info-50: #EFF6FF; /* Info alert ground */
  --z-warning-700: #B45309; /* Warning text and icon */
  --z-warning-50: #FFFBEB; /* Warning alert ground */
  --z-danger-600: #DC2626; /* Error Red - destructive fills and borders */
  --z-danger-700: #B42318; /* Error TEXT (DC2626 is 4.44:1 on danger-50, just under AA) */
  --z-danger-50: #FEF3F2; /* Error alert ground */
  --z-neutral-700: #344054; /* Neutral status text */
  --z-neutral-50: #F4F5F7; /* Neutral alert ground */
  /* ---- colour: product condition grades ---- */
  /* An ordered monochrome ramp. Blue, amber and green carry fixed
     meanings now, so a grade cannot borrow one without saying something
     untrue. For Parts is the exception: it is a genuine warning. */
  --z-cond-brand-new-fg: #FFFFFF;
  --z-cond-brand-new-bg: #0B0D10;
  --z-cond-brand-new-br: #0B0D10;
  --z-cond-brand-new-style: solid;
  --z-cond-new-open-box-fg: #FFFFFF;
  --z-cond-new-open-box-bg: #344054;
  --z-cond-new-open-box-br: #344054;
  --z-cond-new-open-box-style: solid;
  --z-cond-excellent-fg: #111318;
  --z-cond-excellent-bg: #E4E7EC;
  --z-cond-excellent-br: #475467;
  --z-cond-excellent-style: solid;
  --z-cond-good-fg: #344054;
  --z-cond-good-bg: #F4F5F7;
  --z-cond-good-br: #7D8798;
  --z-cond-good-style: solid;
  --z-cond-fair-fg: #344054;
  --z-cond-fair-bg: #FFFFFF;
  --z-cond-fair-br: #7D8798;
  --z-cond-fair-style: dashed;
  --z-cond-for-parts-fg: #B42318;
  --z-cond-for-parts-bg: #FEF3F2;
  --z-cond-for-parts-br: #DC2626;
  --z-cond-for-parts-style: dashed;
  /* ---- semantic aliases: use THESE in components, not raw ramps ---- */
  /* text on light */
  --z-text-strong: var(--z-grey-900);
  --z-text: var(--z-grey-700);
  --z-text-secondary: var(--z-grey-600);
  --z-text-muted: var(--z-grey-500);
  --z-text-placeholder: var(--z-grey-500);
  --z-text-disabled: var(--z-grey-500);
  /* text on dark */
  --z-text-on-dark: var(--z-white);
  --z-text-on-dark-muted: var(--z-grey-350);
  --z-link-on-dark: var(--z-blue-400);
  /* action */
  --z-action: var(--z-blue-600);
  --z-action-hover: var(--z-blue-700);
  --z-action-on: var(--z-white);
  --z-link: var(--z-blue-600);
  --z-link-hover: var(--z-blue-700);
  /* time-sensitive: auctions, countdowns, clearance */
  --z-bid: var(--z-amber-500);
  --z-bid-hover: var(--z-amber-600);
  --z-bid-on: var(--z-obsidian);
  --z-price-bid: var(--z-amber-700);
  --z-price-clearance: var(--z-amber-700);
  --z-accent-on-dark: var(--z-amber-500); /* amber TEXT, dark grounds only */
  /* surfaces */
  --z-surface: var(--z-white);
  --z-surface-quiet: var(--z-grey-100);
  --z-surface-dark: var(--z-obsidian);
  --z-surface-dark-2: var(--z-charcoal);
  --z-surface-action: var(--z-blue-50);
  --z-surface-auction: var(--z-amber-50);
  --z-surface-clearance: var(--z-amber-50);
  --z-page-bg: var(--z-grey-100);
  /* borders */
  --z-border: var(--z-grey-200);
  --z-border-strong: var(--z-grey-300);
  --z-border-input: var(--z-grey-400); /* 1.4.11 non-text contrast */
  --z-border-dark: var(--z-graphite);
  --z-border-focus: var(--z-blue-600);
  --z-border-focus-on-dark: var(--z-blue-300);
  /* ---- typography ---- */
  --z-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --z-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --z-fs-display: clamp(2.125rem, 1.55rem + 2.6vw, 3.25rem);
  --z-lh-display: 1.08;
  --z-ls-display: -0.022em;
  --z-fw-display: 700;
  --z-fs-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --z-lh-h1: 1.14;
  --z-ls-h1: -0.018em;
  --z-fw-h1: 700;
  --z-fs-h2: clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem);
  --z-lh-h2: 1.2;
  --z-ls-h2: -0.014em;
  --z-fw-h2: 650;
  --z-fs-h3: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --z-lh-h3: 1.3;
  --z-ls-h3: -0.01em;
  --z-fw-h3: 650;
  --z-fs-h4: 1.0625rem;
  --z-lh-h4: 1.35;
  --z-ls-h4: -0.006em;
  --z-fw-h4: 600;
  --z-fs-body-lg: 1.0625rem;
  --z-lh-body-lg: 1.6;
  --z-ls-body-lg: 0;
  --z-fw-body-lg: 400;
  --z-fs-body: 1rem;
  --z-lh-body: 1.6;
  --z-ls-body: 0;
  --z-fw-body: 400;
  --z-fs-small: 0.875rem;
  --z-lh-small: 1.5;
  --z-ls-small: 0.002em;
  --z-fw-small: 400;
  --z-fs-micro: 0.75rem;
  --z-lh-micro: 1.45;
  --z-ls-micro: 0.02em;
  --z-fw-micro: 600;
  /* ---- spacing (4px base) ---- */
  --z-space-0: 0;
  --z-space-1: 4px;
  --z-space-2: 8px;
  --z-space-3: 12px;
  --z-space-4: 16px;
  --z-space-5: 20px;
  --z-space-6: 24px;
  --z-space-8: 32px;
  --z-space-10: 40px;
  --z-space-12: 48px;
  --z-space-16: 64px;
  --z-space-20: 80px;
  --z-space-24: 96px;
  --z-space-32: 128px;
  /* ---- radius ---- */
  --z-radius-sm: 4px;
  --z-radius-md: 8px;
  --z-radius-lg: 12px;
  --z-radius-xl: 18px;
  --z-radius-pill: 999px;
  /* ---- elevation ---- */
  --z-shadow-xs: 0 1px 2px rgba(11,31,36,0.06);
  --z-shadow-sm: 0 1px 3px rgba(11,31,36,0.08), 0 1px 2px rgba(11,31,36,0.04);
  --z-shadow-md: 0 4px 12px rgba(11,31,36,0.08);
  --z-shadow-lg: 0 12px 32px rgba(11,31,36,0.12);
  /* ---- layout ---- */
  --z-container-max: 1280px;
  --z-container-narrow: 760px;
  --z-gutter-mobile: 16px;
  --z-gutter-desktop: 24px;
  /* ---- motion ---- */
  --z-motion-fast: 120ms;
  --z-motion-base: 180ms;
  --z-motion-slow: 280ms;
  --z-ease: cubic-bezier(0.2, 0, 0.2, 1);
  /* ---- focus + targets ---- */
  --z-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #2563EB;
  --z-focus-offset: 2px;
  --z-target-min: 44px;
}

/* Breakpoints are documented here for reference; CSS custom properties
   cannot be used inside media queries, so the literal values below are
   the ones every stylesheet must use.
     xs: 0
     sm: 480px
     md: 768px
     lg: 1024px
     xl: 1280px
     xxl: 1440px
*/

@media (prefers-reduced-motion: reduce) {
  :root { --z-motion-fast: 0ms; --z-motion-base: 0ms; --z-motion-slow: 0ms; }
}

/* Zorwix - base layer: reset, document, typography, layout, utilities.
   Mobile-first. Every value comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--z-page-bg);
  color: var(--z-text);
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { background-color: var(--z-grey-100); }
/* Product imagery sits on white cards over a soft-grey page, so the
   grid stays easy to scan however dark the chrome around it is. */

h1, h2, h3, h4, h5, h6 { color: var(--z-text-strong); margin: 0 0 var(--z-space-4); text-wrap: balance; }
h1 { font-size: var(--z-fs-h1); line-height: var(--z-lh-h1); letter-spacing: var(--z-ls-h1); font-weight: var(--z-fw-h1); }
h2 { font-size: var(--z-fs-h2); line-height: var(--z-lh-h2); letter-spacing: var(--z-ls-h2); font-weight: var(--z-fw-h2); }
h3 { font-size: var(--z-fs-h3); line-height: var(--z-lh-h3); letter-spacing: var(--z-ls-h3); font-weight: var(--z-fw-h3); }
h4 { font-size: var(--z-fs-h4); line-height: var(--z-lh-h4); letter-spacing: var(--z-ls-h4); font-weight: var(--z-fw-h4); }
p  { margin: 0 0 var(--z-space-4); max-width: 68ch; text-wrap: pretty; }
ul, ol { margin: 0 0 var(--z-space-4); padding-left: var(--z-space-5); }
li + li { margin-top: var(--z-space-1); }
small { font-size: var(--z-fs-small); }

a { color: var(--z-link); text-underline-offset: 0.18em; text-decoration-thickness: max(1px, 0.06em); }
a:hover { color: var(--z-link-hover); }

/* One consistent, always-visible focus indicator (WCAG 2.4.11 / 2.4.13).
   Electric Blue on light grounds; a lighter blue on dark ones, because
   blue-600 is only 3.76:1 on obsidian. */
:focus-visible { outline: 3px solid var(--z-border-focus); outline-offset: var(--z-focus-offset); border-radius: var(--z-radius-sm); }
:focus:not(:focus-visible) { outline: none; }
.z-on-dark :focus-visible, .z-header :focus-visible, .z-nav :focus-visible,
.z-footer :focus-visible, .z-hero :focus-visible, .z-announce :focus-visible {
  outline-color: var(--z-border-focus-on-dark);
}

.z-display { font-size: var(--z-fs-display); line-height: var(--z-lh-display); letter-spacing: var(--z-ls-display); font-weight: var(--z-fw-display); color: var(--z-text-strong); margin: 0 0 var(--z-space-4); text-wrap: balance; }
.z-lead { font-size: var(--z-fs-body-lg); color: var(--z-text); max-width: 60ch; }
.z-muted { color: var(--z-text-muted); }
.z-small { font-size: var(--z-fs-small); }
.z-eyebrow { font-size: var(--z-fs-micro); line-height: var(--z-lh-micro); letter-spacing: var(--z-ls-micro); font-weight: var(--z-fw-micro); text-transform: uppercase; color: var(--z-text-secondary); margin: 0 0 var(--z-space-2); }
.z-mono { font-family: var(--z-font-mono); font-size: 0.875em; }

/* Screen-reader-only text, and the skip link that reveals itself on focus. */
.z-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.z-skip-link {
  position: absolute; left: var(--z-space-4); top: var(--z-space-2); z-index: 200;
  transform: translateY(-200%); background: var(--z-white); color: var(--z-action);
  padding: var(--z-space-3) var(--z-space-4); border-radius: var(--z-radius-md);
  box-shadow: var(--z-shadow-md); font-weight: 600; text-decoration: none;
}
.z-skip-link:focus { transform: translateY(0); }

/* ---- layout ---- */
.z-container { width: 100%; max-width: var(--z-container-max); margin-inline: auto; padding-inline: var(--z-gutter-mobile); }
.z-container--narrow { max-width: var(--z-container-narrow); }
@media (min-width: 768px) { .z-container { padding-inline: var(--z-gutter-desktop); } }

.z-section { padding-block: var(--z-space-12); }
.z-section--tight { padding-block: var(--z-space-8); }
@media (min-width: 1024px) { .z-section { padding-block: var(--z-space-20); } .z-section--tight { padding-block: var(--z-space-12); } }
.z-section--dark { background: var(--z-surface-dark); color: var(--z-text-on-dark); }
.z-section--dark h1, .z-section--dark h2, .z-section--dark h3, .z-section--dark h4 { color: var(--z-text-on-dark); }
.z-section--dark p { color: var(--z-text-on-dark-muted); }
.z-section--dark a { color: var(--z-link-on-dark); }
.z-section--quiet { background: var(--z-surface-quiet); }

.z-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--z-space-3); margin-bottom: var(--z-space-6); }
.z-section-head h2 { margin: 0; }
.z-section-head p { margin: var(--z-space-1) 0 0; }

.z-stack > * + * { margin-top: var(--z-space-4); }
.z-cluster { display: flex; flex-wrap: wrap; gap: var(--z-space-3); align-items: center; }
.z-grid { display: grid; gap: var(--z-space-4); }
.z-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .z-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-space-5); } }
@media (min-width: 1024px) { .z-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--z-space-6); } }
.z-grid--2 { grid-template-columns: 1fr; }
.z-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .z-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .z-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.z-grid--categories { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .z-grid--categories { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .z-grid--categories { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.z-with-sidebar { display: grid; gap: var(--z-space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .z-with-sidebar { grid-template-columns: 264px minmax(0, 1fr); gap: var(--z-space-10); } }

.z-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Zorwix - component layer, colour direction v2 (black-led).
   Buttons, forms, cards, badges, condition labels, alerts, header, nav,
   footer, price display, filters, and loading/empty/error states.

   The three jobs colour does here, and nothing else:
     BLUE  = act        (shop now, add to basket, account actions, links, active nav)
     AMBER = time-bound (bid now, countdowns, live auctions, clearance flags)
     BLACK = brand      (header, hero, promotional bands, footer)
   Green means in stock or succeeded. Red means error or genuine warning.
   Neither is ever used decoratively. */

/* ============================= BUTTONS ============================= */
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--z-space-2);
  min-height: var(--z-target-min); padding: var(--z-space-3) var(--z-space-5);
  border: 1px solid transparent; border-radius: var(--z-radius-md);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--z-motion-base) var(--z-ease),
              border-color var(--z-motion-base) var(--z-ease),
              color var(--z-motion-base) var(--z-ease);
}
/* Primary action: Shop Now, Add to Basket, account actions. */
.z-btn--primary { background: var(--z-action); color: var(--z-action-on); }
.z-btn--primary:hover { background: var(--z-action-hover); color: var(--z-action-on); }
.z-btn--primary:active { background: var(--z-blue-700); }
/* Bidding and other time-bound actions only. */
.z-btn--bid { background: var(--z-bid); color: var(--z-bid-on); }
.z-btn--bid:hover { background: var(--z-bid-hover); color: var(--z-bid-on); }
/* Kept as an alias so existing templates stay valid; renders as primary. */
.z-btn--brand { background: var(--z-action); color: var(--z-action-on); }
.z-btn--brand:hover { background: var(--z-action-hover); color: var(--z-action-on); }
.z-btn--secondary { background: var(--z-white); color: var(--z-text-strong); border-color: var(--z-border-input); }
.z-btn--secondary:hover { background: var(--z-surface-action); color: var(--z-action-hover); border-color: var(--z-action); }
.z-btn--ghost { background: transparent; color: var(--z-action); }
.z-btn--ghost:hover { background: var(--z-surface-action); color: var(--z-action-hover); }
.z-btn--dark { background: var(--z-obsidian); color: var(--z-white); }
.z-btn--dark:hover { background: var(--z-charcoal); color: var(--z-white); }
/* Sits on obsidian: white fill reads better than an outline at this contrast. */
.z-btn--on-dark { background: var(--z-white); color: var(--z-obsidian); }
.z-btn--on-dark:hover { background: var(--z-grey-100); color: var(--z-obsidian); }
.z-btn--outline-dark { background: transparent; color: var(--z-white); border-color: rgba(255,255,255,0.42); }
.z-btn--outline-dark:hover { background: rgba(255,255,255,0.10); color: var(--z-white); border-color: var(--z-white); }
.z-btn--sm { min-height: 36px; padding: var(--z-space-2) var(--z-space-4); font-size: var(--z-fs-small); }
.z-btn--lg { padding: var(--z-space-4) var(--z-space-8); font-size: var(--z-fs-body-lg); }
.z-btn--block { width: 100%; }
.z-btn--icon { padding: var(--z-space-3); min-width: var(--z-target-min); }
/* Disabled stays legible: 6.4:1 text, a visible border, and a cursor cue.
   A disabled control the user cannot read is an accessibility failure, not a style. */
.z-btn[disabled], .z-btn[aria-disabled="true"] {
  background: var(--z-grey-200); color: var(--z-grey-600);
  border-color: var(--z-grey-300); cursor: not-allowed;
}

/* ============================== FORMS ============================== */
.z-field { display: block; margin-bottom: var(--z-space-5); }
.z-label { display: block; font-weight: 600; color: var(--z-text-strong); margin-bottom: var(--z-space-2); font-size: var(--z-fs-small); }
.z-label .z-req { color: var(--z-danger-700); margin-left: 2px; }
.z-hint { display: block; font-size: var(--z-fs-small); color: var(--z-text-muted); margin-bottom: var(--z-space-2); }
.z-input, .z-select, .z-textarea {
  width: 100%; min-height: var(--z-target-min);
  padding: var(--z-space-3); font: inherit; color: var(--z-text-strong);
  background: var(--z-white); border: 1px solid var(--z-border-input); border-radius: var(--z-radius-md);
  transition: border-color var(--z-motion-fast) var(--z-ease), box-shadow var(--z-motion-fast) var(--z-ease);
}
.z-textarea { min-height: 120px; resize: vertical; }
.z-input::placeholder, .z-textarea::placeholder { color: var(--z-text-placeholder); }
.z-input:hover, .z-select:hover, .z-textarea:hover { border-color: var(--z-action); }
.z-input:disabled, .z-select:disabled, .z-textarea:disabled {
  background: var(--z-grey-100); color: var(--z-grey-600);
  border-color: var(--z-grey-300); cursor: not-allowed;
}
.z-input[aria-invalid="true"], .z-select[aria-invalid="true"], .z-textarea[aria-invalid="true"] {
  border-color: var(--z-danger-600); border-width: 2px;
}
.z-error-text { display: flex; gap: var(--z-space-2); align-items: flex-start; margin-top: var(--z-space-2); color: var(--z-danger-700); font-size: var(--z-fs-small); font-weight: 600; }
.z-success-text { display: flex; gap: var(--z-space-2); align-items: center; color: var(--z-success-700); font-size: var(--z-fs-small); font-weight: 600; }
.z-check { display: flex; gap: var(--z-space-3); align-items: flex-start; min-height: var(--z-target-min); padding-block: var(--z-space-2); }
.z-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--z-action); }
.z-check label { font-size: var(--z-fs-small); color: var(--z-text); }
.z-fieldset { border: 0; padding: 0; margin: 0 0 var(--z-space-5); }
.z-fieldset legend { padding: 0; font-weight: 600; color: var(--z-text-strong); font-size: var(--z-fs-small); margin-bottom: var(--z-space-2); }

/* ============================== CARDS ============================== */
.z-card { background: var(--z-surface); border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); overflow: hidden; }
.z-card--pad { padding: var(--z-space-5); }
.z-card--quiet { background: var(--z-surface-quiet); border-color: transparent; }

.z-product-card { position: relative; display: flex; flex-direction: column; background: var(--z-surface); border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); overflow: hidden; transition: box-shadow var(--z-motion-base) var(--z-ease), border-color var(--z-motion-base) var(--z-ease); }
.z-product-card:hover, .z-product-card:focus-within { box-shadow: var(--z-shadow-md); border-color: var(--z-grey-400); }
.z-product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--z-grey-100); }
.z-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.z-product-card__flags { position: absolute; inset-block-start: var(--z-space-2); inset-inline-start: var(--z-space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--z-space-1); }
.z-product-card__body { display: flex; flex-direction: column; gap: var(--z-space-2); padding: var(--z-space-4); flex: 1; }
.z-product-card__brand { font-size: var(--z-fs-micro); letter-spacing: var(--z-ls-micro); text-transform: uppercase; color: var(--z-text-muted); font-weight: 600; }
.z-product-card__title { font-size: var(--z-fs-small); font-weight: 600; line-height: 1.4; margin: 0; color: var(--z-text-strong); }
.z-product-card__title a { color: inherit; text-decoration: none; }
.z-product-card__title a:hover { text-decoration: underline; }
/* Whole card clickable, but only the title is a real link (one tab stop). */
.z-product-card__title a::after { content: ""; position: absolute; inset: 0; }
.z-product-card__foot { margin-top: auto; padding-top: var(--z-space-2); }
.z-product-card .z-btn { position: relative; z-index: 1; }

/* ============================== PRICE ============================== */
/* The price itself is near-black: on a grid of clearance stock, an amber
   price on every card reads as a discount shop rather than a retailer. The
   saving is what earns the accent. */
.z-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--z-space-2); }
.z-price__now { font-size: 1.25rem; font-weight: 700; color: var(--z-text-strong); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
/* The struck-through figure is the manufacturer's RRP, not a price we ever
   charged. The word 'RRP' is outside the strike so the label stays readable
   and so the page is not claiming we used to sell it at that. */
.z-price__was { font-size: var(--z-fs-small); color: var(--z-text-muted); text-decoration: none; }
.z-price__was s { text-decoration: line-through; }
.z-price__save { font-size: var(--z-fs-micro); font-weight: 700; letter-spacing: var(--z-ls-micro); color: var(--z-bid-on); background: var(--z-bid); border-radius: var(--z-radius-sm); padding: 2px var(--z-space-2); }
.z-price--lg .z-price__now { font-size: 2rem; }
.z-price__basis { font-size: var(--z-fs-micro); color: var(--z-text-muted); width: 100%; }

/* ============================== BADGES ============================= */
.z-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--z-space-2); border-radius: var(--z-radius-sm); border: 1px solid transparent; font-size: var(--z-fs-micro); line-height: var(--z-lh-micro); letter-spacing: var(--z-ls-micro); font-weight: var(--z-fw-micro); white-space: nowrap; }
.z-badge--neutral { background: var(--z-neutral-50); color: var(--z-neutral-700); border-color: var(--z-grey-400); }
.z-badge--brand { background: var(--z-obsidian); color: var(--z-white); border-color: var(--z-obsidian); }
.z-badge--clearance { background: var(--z-bid); color: var(--z-bid-on); border-color: var(--z-amber-600); }
.z-badge--last-one { background: var(--z-danger-50); color: var(--z-danger-700); border-color: var(--z-danger-600); }
.z-badge--new-in { background: var(--z-blue-50); color: var(--z-info-700); border-color: var(--z-action); }
.z-badge--sold { background: var(--z-grey-200); color: var(--z-grey-700); border-color: var(--z-grey-400); }
.z-badge--in-stock { background: var(--z-success-50); color: var(--z-success-700); border-color: var(--z-success-700); }

/* Stock availability is one of only three places green appears. */
.z-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-fs-small); font-weight: 600; color: var(--z-success-700); }
.z-stock--low { color: var(--z-danger-700); }
.z-stock--out { color: var(--z-text-muted); }

/* ---- condition labels: an ordered monochrome ramp ----
   Blue, amber and green all mean something specific now, so a grade cannot
   borrow one without saying something untrue. The ramp runs dark (best) to
   light (worst); Fair and For Parts are dashed; and the grade name is always
   written out, so colour is never the only signal (WCAG 1.4.1). */
.z-cond { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--z-space-2); border-radius: var(--z-radius-sm); border: 1px solid; font-size: var(--z-fs-micro); line-height: var(--z-lh-micro); letter-spacing: var(--z-ls-micro); font-weight: var(--z-fw-micro); white-space: nowrap; }
.z-cond__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.z-cond--brand-new    { color: var(--z-cond-brand-new-fg);    background: var(--z-cond-brand-new-bg);    border-color: var(--z-cond-brand-new-br);    border-style: var(--z-cond-brand-new-style); }
.z-cond--new-open-box { color: var(--z-cond-new-open-box-fg); background: var(--z-cond-new-open-box-bg); border-color: var(--z-cond-new-open-box-br); border-style: var(--z-cond-new-open-box-style); }
.z-cond--excellent    { color: var(--z-cond-excellent-fg);    background: var(--z-cond-excellent-bg);    border-color: var(--z-cond-excellent-br);    border-style: var(--z-cond-excellent-style); }
.z-cond--good         { color: var(--z-cond-good-fg);         background: var(--z-cond-good-bg);         border-color: var(--z-cond-good-br);         border-style: var(--z-cond-good-style); }
.z-cond--fair         { color: var(--z-cond-fair-fg);         background: var(--z-cond-fair-bg);         border-color: var(--z-cond-fair-br);         border-style: var(--z-cond-fair-style); }
.z-cond--for-parts    { color: var(--z-cond-for-parts-fg);    background: var(--z-cond-for-parts-bg);    border-color: var(--z-cond-for-parts-br);    border-style: var(--z-cond-for-parts-style); }
.z-cond--lg { font-size: var(--z-fs-small); padding: var(--z-space-2) var(--z-space-3); }

/* ============================== ALERTS ============================= */
.z-alert { display: flex; gap: var(--z-space-3); padding: var(--z-space-4); border-radius: var(--z-radius-md); border: 1px solid; border-left-width: 4px; }
.z-alert__body { flex: 1; }
.z-alert__body > :last-child { margin-bottom: 0; }
.z-alert__title { font-weight: 700; margin: 0 0 var(--z-space-1); font-size: var(--z-fs-body); }
.z-alert--info    { background: var(--z-info-50);    color: var(--z-info-700);    border-color: var(--z-info-700); }
.z-alert--success { background: var(--z-success-50); color: var(--z-success-700); border-color: var(--z-success-700); }
.z-alert--warning { background: var(--z-warning-50); color: var(--z-warning-700); border-color: var(--z-warning-700); }
.z-alert--danger  { background: var(--z-danger-50);  color: var(--z-danger-700);  border-color: var(--z-danger-600); }
.z-alert--neutral { background: var(--z-neutral-50); color: var(--z-neutral-700); border-color: var(--z-grey-400); }
.z-alert__icon { flex: none; font-weight: 700; }

/* ======================= HEADER AND NAVIGATION ===================== */
/* Black chrome, white content. The dark band runs from the announcement bar
   through the nav; everything below it is white on soft grey. */
.z-announce { background: var(--z-charcoal); color: var(--z-text-on-dark-muted); font-size: var(--z-fs-small); }
.z-announce .z-container { display: flex; flex-wrap: wrap; gap: var(--z-space-2) var(--z-space-6); justify-content: center; padding-block: var(--z-space-2); text-align: center; }
.z-announce span { display: inline-flex; align-items: center; gap: 6px; }
.z-announce strong { color: var(--z-white); }

.z-header { position: sticky; top: 0; z-index: 100; background: var(--z-obsidian); color: var(--z-white); border-bottom: 1px solid var(--z-border-dark); }
.z-header__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--z-space-3); padding-block: var(--z-space-3); }
.z-logo { display: inline-flex; align-items: baseline; gap: 2px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.035em; color: var(--z-white); text-decoration: none; }
.z-logo__mark { color: var(--z-action); }
.z-logo__sub { display: block; font-size: var(--z-fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--z-text-on-dark-muted); }
.z-header__actions { display: flex; align-items: center; gap: var(--z-space-1); }
.z-iconbtn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--z-target-min); min-height: var(--z-target-min); padding: var(--z-space-2); border: 0; background: transparent; color: var(--z-white); border-radius: var(--z-radius-md); font: inherit; font-size: var(--z-fs-micro); font-weight: 600; text-decoration: none; cursor: pointer; }
.z-iconbtn:hover { background: rgba(255,255,255,0.10); color: var(--z-white); }
/* Below 768px the label is hidden visually but NOT from assistive technology.
   display:none would leave Account and Watchlist with an emoji and no
   accessible name at all, which is the commonest way an icon bar fails. */
.z-iconbtn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 768px) {
  .z-iconbtn__label { position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}
.z-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--z-radius-pill); background: var(--z-action); color: var(--z-white); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.z-search { display: flex; width: 100%; }
.z-search__input { flex: 1; min-height: var(--z-target-min); padding: var(--z-space-3) var(--z-space-4); font: inherit; color: var(--z-text-strong); border: 1px solid var(--z-border-input); border-right: 0; border-radius: var(--z-radius-md) 0 0 var(--z-radius-md); background: var(--z-white); }
.z-search__btn { min-height: var(--z-target-min); padding-inline: var(--z-space-5); border: 1px solid var(--z-action); background: var(--z-action); color: var(--z-white); border-radius: 0 var(--z-radius-md) var(--z-radius-md) 0; font: inherit; font-weight: 600; cursor: pointer; }
.z-search__btn:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); }
.z-header__search { display: none; }
@media (min-width: 1024px) { .z-header__search { display: block; } }
.z-header__search-mobile { padding-bottom: var(--z-space-3); }
@media (min-width: 1024px) { .z-header__search-mobile { display: none; } }

.z-nav { border-top: 1px solid var(--z-border-dark); background: var(--z-obsidian); }
.z-nav__list { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.z-nav__list--sub { border-top: 1px solid var(--z-border-dark); }
.z-nav__list--sub .z-nav__link { font-weight: 500; color: var(--z-text-on-dark-muted); }
.z-nav__list--sub .z-nav__link:hover { color: var(--z-white); }
.z-nav__list li { margin: 0; }
.z-nav__link { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--z-space-4); color: var(--z-white); font-size: var(--z-fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.z-nav__link:hover { color: var(--z-white); background: rgba(255,255,255,0.08); border-bottom-color: var(--z-blue-400); }
/* Active navigation is Electric Blue. On obsidian, blue-600 is 3.76:1 -
   ample for a non-text indicator bar, not enough for the label, so the
   label stays white and the bar carries the colour. */
.z-nav__link[aria-current="page"] { border-bottom-color: var(--z-action); background: rgba(37,99,235,0.16); color: var(--z-white); }
.z-nav__link--deal { color: var(--z-accent-on-dark); }
.z-nav__link--deal:hover { color: var(--z-accent-on-dark); border-bottom-color: var(--z-accent-on-dark); }
@media (min-width: 1024px) { .z-nav__list { flex-wrap: wrap; overflow-x: visible; } }

/* Mobile: the four sections do not fit a 390px viewport, and a nav link
   clipped at the screen edge is a broken nav. Below 768px the bar collapses
   behind a Menu button. Without JavaScript the button stays hidden and the
   full list renders as a stack, so nothing is ever unreachable. */
.z-menu-toggle { display: none; align-items: center; gap: var(--z-space-3);
  width: 100%; min-height: var(--z-target-min); padding: var(--z-space-2) 0;
  background: none; border: 0; font: inherit; font-weight: 700;
  color: var(--z-white); cursor: pointer; }
.z-menu-toggle__bars { position: relative; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; flex: none; }
.z-menu-toggle__bars::before, .z-menu-toggle__bars::after { content: ""; position: absolute;
  left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--z-motion-base) var(--z-ease); }
.z-menu-toggle__bars::before { top: -6px; }
.z-menu-toggle__bars::after { top: 6px; }
.z-menu-toggle[aria-expanded="true"] .z-menu-toggle__bars { background: transparent; }
.z-menu-toggle[aria-expanded="true"] .z-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.z-menu-toggle[aria-expanded="true"] .z-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 767px) {
  .z-nav.js-collapsible .z-menu-toggle { display: flex; }
  .z-nav.js-collapsible .z-nav__inner { display: none; padding-bottom: var(--z-space-2); }
  .z-nav.js-collapsible .z-nav__inner.is-open { display: block; }
  .z-nav__list { flex-direction: column; gap: 0; overflow-x: visible; }
  .z-nav__list li + li { border-top: 1px solid var(--z-border-dark); }
  .z-nav__link { width: 100%; padding-inline: 0; border-bottom: 0;
    border-left: 3px solid transparent; padding-left: var(--z-space-3); }
  .z-nav__link:hover { border-bottom-color: transparent; border-left-color: var(--z-blue-400); }
  .z-nav__link[aria-current="page"] { border-bottom-color: transparent;
    border-left-color: var(--z-action); background: rgba(37,99,235,0.16); }
}

.z-breadcrumb { padding-block: var(--z-space-4); font-size: var(--z-fs-small); }
.z-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--z-space-2); margin: 0; padding: 0; list-style: none; }
.z-breadcrumb li { margin: 0; display: flex; gap: var(--z-space-2); align-items: center; color: var(--z-text-muted); }
.z-breadcrumb li + li::before { content: "/"; color: var(--z-grey-400); }

/* ============================== FOOTER ============================= */
.z-footer { background: var(--z-obsidian); color: var(--z-text-on-dark-muted); margin-top: var(--z-space-16); }
.z-footer a { color: var(--z-white); text-decoration: none; }
.z-footer a:hover { color: var(--z-white); text-decoration: underline; }
.z-footer__grid { display: grid; gap: var(--z-space-8); padding-block: var(--z-space-12); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .z-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .z-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--z-space-10); } }
.z-footer h2 { color: var(--z-white); font-size: var(--z-fs-h4); margin-bottom: var(--z-space-4); }
.z-footer ul { list-style: none; margin: 0; padding: 0; }
.z-footer li + li { margin-top: var(--z-space-3); }
.z-footer__legal { border-top: 1px solid var(--z-border-dark); padding-block: var(--z-space-6); font-size: var(--z-fs-small); }
.z-footer__legal p { max-width: none; margin: 0 0 var(--z-space-2); }
.z-footer .z-logo { color: var(--z-white); }
.z-footer .z-logo__sub { color: var(--z-text-on-dark-muted); }

/* ======================= FILTERS AND TOOLBAR ======================= */
.z-toolbar { display: flex; flex-wrap: wrap; gap: var(--z-space-3); align-items: center; justify-content: space-between; padding-block: var(--z-space-4); border-bottom: 1px solid var(--z-border); margin-bottom: var(--z-space-6); }
.z-filter-group { border-bottom: 1px solid var(--z-border); padding-block: var(--z-space-4); }
.z-filter-group:last-child { border-bottom: 0; }
.z-filter-group > summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--z-target-min); cursor: pointer; font-weight: 600; color: var(--z-text-strong); list-style: none; }
.z-filter-group > summary::-webkit-details-marker { display: none; }
.z-filter-group > summary::after { content: "+"; font-size: 1.25rem; color: var(--z-action); }
.z-filter-group[open] > summary::after { content: "\2212"; }
.z-chip { display: inline-flex; align-items: center; gap: var(--z-space-2); min-height: 36px; padding: var(--z-space-2) var(--z-space-3); border: 1px solid var(--z-border-input); border-radius: var(--z-radius-pill); background: var(--z-white); color: var(--z-text-strong); font-size: var(--z-fs-small); font-weight: 600; text-decoration: none; cursor: pointer; }
.z-chip:hover { border-color: var(--z-action); background: var(--z-surface-action); color: var(--z-action-hover); }
.z-chip[aria-pressed="true"] { background: var(--z-action); border-color: var(--z-action); color: var(--z-white); }

/* =================== LOADING / EMPTY / ERROR STATES ================= */
.z-skeleton { background: linear-gradient(90deg, var(--z-grey-100) 25%, var(--z-grey-200) 37%, var(--z-grey-100) 63%); background-size: 400% 100%; animation: z-shimmer 1.4s ease infinite; border-radius: var(--z-radius-sm); }
@keyframes z-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .z-skeleton { animation: none; background: var(--z-grey-100); } }
.z-skeleton--media { aspect-ratio: 1/1; border-radius: 0; }
.z-skeleton--line { height: 0.85em; margin-bottom: var(--z-space-2); }
.z-skeleton--line.is-short { width: 55%; }
.z-spinner { width: 20px; height: 20px; border: 2px solid var(--z-grey-300); border-top-color: var(--z-action); border-radius: 50%; animation: z-spin 0.7s linear infinite; }
@keyframes z-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .z-spinner { animation-duration: 2s; } }

.z-state { text-align: center; padding: var(--z-space-16) var(--z-space-4); border: 1px dashed var(--z-border-strong); border-radius: var(--z-radius-lg); background: var(--z-white); }
.z-state__glyph { font-size: 2rem; line-height: 1; margin-bottom: var(--z-space-4); color: var(--z-text-secondary); }
.z-state h2, .z-state h3 { margin-bottom: var(--z-space-2); }
.z-state p { margin-inline: auto; }

/* ========================= MISC STOREFRONT ========================= */
/* The hero is the single largest black surface on the site. Flat obsidian,
   no gradient: a gradient here is what tips a black identity into gaming. */
.z-hero { background: var(--z-obsidian); color: var(--z-white); border-bottom: 1px solid var(--z-border-dark); }
.z-hero__inner { display: grid; gap: var(--z-space-8); padding-block: var(--z-space-12); align-items: center; }
@media (min-width: 1024px) { .z-hero__inner { grid-template-columns: 1.1fr 0.9fr; padding-block: var(--z-space-20); gap: var(--z-space-16); } }
.z-hero h1 { color: var(--z-white); }
.z-hero p { color: var(--z-text-on-dark-muted); }
.z-hero .z-eyebrow { color: var(--z-accent-on-dark); }
.z-hero__actions { display: flex; flex-wrap: wrap; gap: var(--z-space-3); margin-top: var(--z-space-6); }
.z-hero__points { list-style: none; margin: var(--z-space-8) 0 0; padding: 0; display: grid; gap: var(--z-space-3); }
.z-hero__points li { display: flex; gap: var(--z-space-3); align-items: flex-start; color: var(--z-white); font-size: var(--z-fs-small); margin: 0; }
.z-hero__points b { color: var(--z-white); }
.z-hero__points span[aria-hidden] { color: var(--z-blue-400); font-weight: 700; }
.z-hero__card { background: var(--z-white); color: var(--z-text); border-radius: var(--z-radius-xl); padding: var(--z-space-6); box-shadow: var(--z-shadow-lg); }
/* The card sits inside .z-hero, whose light-on-dark colours must not leak
   onto a white surface - that produced a 1.3:1 contrast failure once. */
.z-hero__card h2, .z-hero__card h3 { color: var(--z-text-strong); }
.z-hero__card p { color: var(--z-text); }
.z-hero__card .z-eyebrow { color: var(--z-text-secondary); }
.z-hero__card .z-muted { color: var(--z-text-muted); }

.z-tile { display: flex; flex-direction: column; gap: var(--z-space-2); align-items: flex-start; padding: var(--z-space-4); background: var(--z-white); border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); text-decoration: none; color: var(--z-text-strong); font-weight: 600; font-size: var(--z-fs-small); min-height: 96px; justify-content: center; text-align: left; transition: border-color var(--z-motion-base) var(--z-ease), box-shadow var(--z-motion-base) var(--z-ease); }
.z-tile:hover { border-color: var(--z-action); box-shadow: var(--z-shadow-sm); color: var(--z-text-strong); }
.z-tile__glyph { font-size: 1.5rem; }
.z-tile__count { font-size: var(--z-fs-micro); font-weight: 500; color: var(--z-text-muted); }

.z-table { width: 100%; border-collapse: collapse; font-size: var(--z-fs-small); }
.z-table caption { text-align: left; font-weight: 700; color: var(--z-text-strong); padding-bottom: var(--z-space-3); }
.z-table th, .z-table td { text-align: left; padding: var(--z-space-3); border-bottom: 1px solid var(--z-border); vertical-align: top; }
.z-table th { color: var(--z-text-strong); font-weight: 600; white-space: nowrap; }
.z-table tbody tr:last-child th, .z-table tbody tr:last-child td { border-bottom: 0; }


/* A table is a grid of columns, and a phone is 390 pixels wide. Five columns
   of basket - item, condition, price, quantity, total, remove - need about
   680 of them, so the whole PAGE scrolled sideways: the header slid off, the
   price column sat under the thumb, and the shop felt broken on the device
   most people were using.

   Below 700px the rows stop being rows. Each cell becomes its own line with
   its column heading in front of it, taken from data-label, so nothing is
   lost and nothing has to be scrolled to. */
.z-table--stack th, .z-table--stack td { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .z-table--stack, .z-table--stack tbody, .z-table--stack tr, .z-table--stack td { display: block; width: 100%; }
  .z-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .z-table--stack tr {
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-lg, 12px);
    padding: var(--z-space-3);
    margin-bottom: var(--z-space-4);
  }
  .z-table--stack td { border-bottom: 0; padding: var(--z-space-2) 0; }
  .z-table--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--z-text-muted, #667085);
    padding-bottom: 2px;
  }
  /* The first cell is the thing itself. It does not need a label saying so. */
  .z-table--stack td:first-child { font-weight: 600; padding-top: 0; }
  .z-table--stack td:first-child::before { content: none; }
}


/* What the shop takes, said before the customer reaches the card form.
   Written out rather than drawn: these are other companies' trademarks and
   an approximate copy of somebody's logo is worse than their name in plain
   type. Stripe's own element shows the real marks a moment later. */
.z-pays { display: flex; flex-wrap: wrap; gap: var(--z-space-2); align-items: center; margin: 0; padding: 0; list-style: none; }
.z-pays li {
  border: 1px solid var(--z-border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--z-text-strong);
  background: var(--z-white, #fff);
  line-height: 1.2;
  white-space: nowrap;
}
.z-pays__note { font-size: .8rem; color: var(--z-text-muted, #667085); margin: var(--z-space-2) 0 0; }

.z-defs { display: grid; gap: 0; margin: 0; }
.z-defs__row { display: grid; grid-template-columns: 1fr; gap: var(--z-space-1); padding-block: var(--z-space-3); border-bottom: 1px solid var(--z-border); }
@media (min-width: 640px) { .z-defs__row { grid-template-columns: 200px minmax(0,1fr); gap: var(--z-space-4); } }
.z-defs__row:last-child { border-bottom: 0; }
.z-defs dt { font-weight: 600; color: var(--z-text-strong); font-size: var(--z-fs-small); }
.z-defs dd { margin: 0; font-size: var(--z-fs-small); }

.z-devbanner { background: var(--z-warning-50); border-bottom: 2px solid var(--z-warning-700); color: var(--z-warning-700); font-size: var(--z-fs-small); font-weight: 600; }
.z-devbanner .z-container { padding-block: var(--z-space-2); display: flex; gap: var(--z-space-2); align-items: center; justify-content: center; text-align: center; }

.z-newsletter { background: var(--z-obsidian); color: var(--z-white); border-radius: var(--z-radius-xl); padding: var(--z-space-8); }
.z-newsletter h2 { color: var(--z-white); }
.z-newsletter p { color: var(--z-text-on-dark-muted); }
.z-newsletter__form { display: flex; flex-wrap: wrap; gap: var(--z-space-3); margin-top: var(--z-space-5); }
.z-newsletter__form .z-input { flex: 1 1 260px; }
.z-newsletter .z-check label { color: var(--z-text-on-dark-muted); }
.z-newsletter a { color: var(--z-white); text-decoration: underline; }
.z-newsletter a:hover { color: var(--z-white); }
.z-newsletter .z-label { color: var(--z-white); }

/* Product detail */
.z-pdp { display: grid; gap: var(--z-space-8); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .z-pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--z-space-16); align-items: start; } }
.z-gallery__main { aspect-ratio: 1/1; background: var(--z-white); border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); overflow: hidden; }
.z-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.z-gallery__thumbs { display: flex; gap: var(--z-space-2); margin-top: var(--z-space-3); }
.z-gallery__thumb { width: 72px; height: 72px; border: 1px solid var(--z-border-input); border-radius: var(--z-radius-md); overflow: hidden; background: var(--z-white); padding: 0; cursor: pointer; }
.z-gallery__thumb[aria-current="true"] { border-color: var(--z-action); border-width: 2px; }
.z-actual-photo { display: flex; gap: var(--z-space-2); align-items: center; margin-top: var(--z-space-3); font-size: var(--z-fs-small); color: var(--z-text-secondary); font-weight: 600; }

/* Zorwix - auction and multi-method components, colour direction v2.
   Amber is the auction colour: bid buttons, countdowns, live indicators and
   clearance flags. It is a FILL - amber-500 is 2.15:1 on white, so text uses
   the derived amber-700. Blue stays the action colour everywhere else. */

/* ======================= SALE METHOD BADGES ======================== */
.z-method { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--z-space-2);
  border-radius: var(--z-radius-sm); border: 1px solid; font-size: var(--z-fs-micro);
  line-height: var(--z-lh-micro); letter-spacing: var(--z-ls-micro);
  font-weight: var(--z-fw-micro); white-space: nowrap; }
.z-method--fixed   { color: var(--z-info-700);  background: var(--z-blue-50);  border-color: var(--z-action); }
.z-method--auction { color: var(--z-bid-on);    background: var(--z-bid);      border-color: var(--z-amber-600); }
.z-method--both    { color: var(--z-amber-700); background: var(--z-amber-50); border-color: var(--z-amber-600); }
.z-method--pallet  { color: var(--z-white);     background: var(--z-obsidian); border-color: var(--z-obsidian); }

/* ============================ COUNTDOWN ============================ */
.z-countdown { display: inline-flex; align-items: baseline; gap: var(--z-space-2);
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--z-amber-700); }
/* Red is reserved for errors and genuinely urgent information. A lot with
   minutes left is genuinely urgent, so it earns the red - and nothing else
   on the page does. */
.z-countdown--urgent { color: var(--z-danger-700); }
.z-countdown__label { font-size: var(--z-fs-micro); letter-spacing: var(--z-ls-micro);
  text-transform: uppercase; font-weight: 600; color: var(--z-text-muted); }
.z-countdown__value { font-size: 1.125rem; }
.z-countdown--lg .z-countdown__value { font-size: 1.75rem; letter-spacing: -0.01em; }
.z-extended { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-fs-micro);
  font-weight: 700; color: var(--z-amber-700); background: var(--z-amber-50);
  border: 1px solid var(--z-amber-600); border-radius: var(--z-radius-sm); padding: 2px var(--z-space-2); }
/* A live sale is the one place a pulse earns its keep, and even here it is a
   2% opacity shift rather than a glow. */
.z-live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--z-fs-micro);
  font-weight: 700; letter-spacing: var(--z-ls-micro); text-transform: uppercase;
  color: var(--z-bid-on); background: var(--z-bid); border-radius: var(--z-radius-sm);
  padding: 3px var(--z-space-2); }
.z-live__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: z-live-pulse 2.4s ease-in-out infinite; }
@keyframes z-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .z-live__dot { animation: none; } }

/* ============================= LOT CARD ============================ */
.z-lot-card { position: relative; display: flex; flex-direction: column; background: var(--z-surface);
  border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); overflow: hidden;
  transition: box-shadow var(--z-motion-base) var(--z-ease), border-color var(--z-motion-base) var(--z-ease); }
.z-lot-card:hover, .z-lot-card:focus-within { box-shadow: var(--z-shadow-md); border-color: var(--z-amber-600); }
.z-lot-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--z-grey-100); }
.z-lot-card__media img { width: 100%; height: 100%; object-fit: cover; }
.z-lot-card__flags { position: absolute; inset-block-start: var(--z-space-2);
  inset-inline-start: var(--z-space-2); display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--z-space-1); }
.z-lot-card__number { position: absolute; inset-block-start: var(--z-space-2);
  inset-inline-end: var(--z-space-2); background: var(--z-obsidian); color: var(--z-white);
  font-size: var(--z-fs-micro); font-weight: 700; letter-spacing: var(--z-ls-micro);
  padding: 3px var(--z-space-2); border-radius: var(--z-radius-sm); }
.z-lot-card__body { display: flex; flex-direction: column; gap: var(--z-space-2);
  padding: var(--z-space-4); flex: 1; }
.z-lot-card__title { font-size: var(--z-fs-small); font-weight: 600; line-height: 1.4; margin: 0;
  color: var(--z-text-strong); }
.z-lot-card__title a { color: inherit; text-decoration: none; }
.z-lot-card__title a::after { content: ""; position: absolute; inset: 0; }
.z-lot-card__title a:hover { text-decoration: underline; }
.z-lot-card__foot { margin-top: auto; padding-top: var(--z-space-3);
  border-top: 1px solid var(--z-border); display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between; gap: var(--z-space-2); }

/* A bid is time-bound, so unlike a shop price it does take the accent. */
.z-bidprice { display: flex; flex-direction: column; gap: 2px; }
.z-bidprice__label { font-size: var(--z-fs-micro); letter-spacing: var(--z-ls-micro);
  text-transform: uppercase; color: var(--z-text-muted); font-weight: 600; }
.z-bidprice__value { font-size: 1.25rem; font-weight: 700; color: var(--z-amber-700);
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.z-bidprice--lg .z-bidprice__value { font-size: 2.25rem; }
.z-bidprice__meta { font-size: var(--z-fs-micro); color: var(--z-text-muted); }

/* ========================= RESERVE INDICATOR ======================= */
.z-reserve { display: inline-flex; align-items: center; gap: 6px; font-size: var(--z-fs-micro);
  font-weight: 700; letter-spacing: var(--z-ls-micro); padding: 2px var(--z-space-2);
  border-radius: var(--z-radius-sm); border: 1px solid; }
/* "Reserve met" is a positive status, which is what green is for. */
.z-reserve--met { color: var(--z-success-700); background: var(--z-success-50); border-color: var(--z-success-700); }
.z-reserve--not-met { color: var(--z-warning-700); background: var(--z-warning-50); border-color: var(--z-warning-700); }
.z-reserve--none { color: var(--z-neutral-700); background: var(--z-neutral-50); border-color: var(--z-grey-400); }

/* ============================= BID BOX ============================= */
.z-bidbox { border: 1px solid var(--z-border); border-radius: var(--z-radius-lg);
  background: var(--z-surface); overflow: hidden; box-shadow: var(--z-shadow-sm); }
.z-bidbox__head { background: var(--z-obsidian); color: var(--z-white);
  padding: var(--z-space-3) var(--z-space-5); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: var(--z-space-2);
  border-bottom: 3px solid var(--z-bid); }
.z-bidbox__head h2, .z-bidbox__head h3, .z-bidbox__head p { color: var(--z-white); margin: 0; }
.z-bidbox__head h2, .z-bidbox__head h3 { font-size: var(--z-fs-h4); }
.z-bidbox__head .z-extended { color: var(--z-bid-on); background: var(--z-bid); border-color: var(--z-bid); }
.z-bidbox__body { padding: var(--z-space-5); }
.z-bidbox__row { display: flex; flex-wrap: wrap; gap: var(--z-space-4);
  align-items: flex-end; justify-content: space-between; margin-bottom: var(--z-space-4); }
.z-bidbox__form { display: flex; flex-wrap: wrap; gap: var(--z-space-3); align-items: flex-end; }
.z-bidbox__form .z-field { flex: 1 1 180px; margin: 0; }
.z-bidbox__hint { font-size: var(--z-fs-small); color: var(--z-text-muted);
  margin: var(--z-space-3) 0 0; }
.z-bidbox__split { display: grid; gap: var(--z-space-4); margin-top: var(--z-space-5);
  padding-top: var(--z-space-5); border-top: 1px solid var(--z-border); }
@media (min-width: 640px) { .z-bidbox__split { grid-template-columns: 1fr auto; align-items: center; } }
.z-inputgroup { display: flex; }
.z-inputgroup__prefix { display: inline-flex; align-items: center; padding-inline: var(--z-space-3);
  background: var(--z-grey-100); border: 1px solid var(--z-border-input); border-right: 0;
  border-radius: var(--z-radius-md) 0 0 var(--z-radius-md); font-weight: 700; color: var(--z-text-strong); }
.z-inputgroup .z-input { border-radius: 0 var(--z-radius-md) var(--z-radius-md) 0; }

/* =========================== BID HISTORY =========================== */
.z-bidhistory { width: 100%; border-collapse: collapse; font-size: var(--z-fs-small);
  font-variant-numeric: tabular-nums; }
.z-bidhistory th, .z-bidhistory td { text-align: left; padding: var(--z-space-2) var(--z-space-3);
  border-bottom: 1px solid var(--z-border); }
.z-bidhistory th { font-weight: 600; color: var(--z-text-strong); white-space: nowrap; }
.z-bidhistory td:last-child, .z-bidhistory th:last-child { text-align: right; }
.z-bidhistory tr.is-leading td { background: var(--z-amber-50); font-weight: 700; color: var(--z-amber-700); }
.z-bidhistory .is-auto { font-size: var(--z-fs-micro); color: var(--z-text-muted); font-weight: 400; }

/* ======================== INCREMENT TABLE ========================== */
.z-increments { font-variant-numeric: tabular-nums; }

/* ============================ SALE STRIP =========================== */
/* A live sale is the most time-sensitive thing on the site, so it gets the
   amber band. It is the only amber surface that spans the full width. */
.z-sale-strip { background: var(--z-bid); color: var(--z-bid-on); }
.z-sale-strip .z-container { display: flex; flex-wrap: wrap; gap: var(--z-space-3) var(--z-space-8);
  align-items: center; justify-content: space-between; padding-block: var(--z-space-4); }
.z-sale-strip h2, .z-sale-strip p { color: var(--z-bid-on); margin: 0; }
.z-sale-strip h2 { font-size: var(--z-fs-h4); }
.z-sale-strip p { font-size: var(--z-fs-small); }
.z-sale-strip .z-countdown, .z-sale-strip .z-countdown__label { color: var(--z-bid-on); }
.z-sale-strip .z-btn--on-dark { background: var(--z-obsidian); color: var(--z-white); }
.z-sale-strip .z-btn--on-dark:hover { background: var(--z-charcoal); color: var(--z-white); }
.z-sale-strip :focus-visible { outline-color: var(--z-obsidian); }

/* ======================= SECTION ENTRY TILES ======================= */
.z-routes { display: grid; gap: var(--z-space-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .z-routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .z-routes { grid-template-columns: repeat(4, 1fr); } }
.z-route { position: relative; display: flex; flex-direction: column; gap: var(--z-space-2);
  padding: var(--z-space-6); border-radius: var(--z-radius-lg); border: 1px solid var(--z-border);
  background: var(--z-surface); text-decoration: none; color: var(--z-text);
  border-top: 3px solid var(--z-obsidian);
  transition: border-color var(--z-motion-base) var(--z-ease), box-shadow var(--z-motion-base) var(--z-ease); }
.z-route:hover { box-shadow: var(--z-shadow-md); color: var(--z-text); }
.z-route h3 { margin: 0; font-size: var(--z-fs-h4); color: var(--z-text-strong); }
.z-route p { margin: 0; font-size: var(--z-fs-small); color: var(--z-text-muted); }
.z-route__count { margin-top: auto; padding-top: var(--z-space-3); font-size: var(--z-fs-micro);
  font-weight: 700; letter-spacing: var(--z-ls-micro); text-transform: uppercase; color: var(--z-action); }
.z-route--shop { border-top-color: var(--z-action); }
.z-route--auction { border-top-color: var(--z-bid); }
.z-route--auction .z-route__count { color: var(--z-amber-700); }
.z-route--clearance { border-top-color: var(--z-bid); }
.z-route--clearance .z-route__count { color: var(--z-amber-700); }
.z-route--pallets { border-top-color: var(--z-obsidian); }
.z-route--pallets .z-route__count { color: var(--z-text-strong); }

/* ============================= ACCOUNT ============================= */
.z-account { display: grid; gap: var(--z-space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .z-account { grid-template-columns: 240px minmax(0,1fr); gap: var(--z-space-10); } }
.z-accountnav { list-style: none; margin: 0; padding: 0; border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg); overflow: hidden; background: var(--z-surface); }
.z-accountnav li { margin: 0; border-bottom: 1px solid var(--z-border); }
.z-accountnav li:last-child { border-bottom: 0; }
.z-accountnav a { display: flex; align-items: center; justify-content: space-between;
  gap: var(--z-space-3); min-height: var(--z-target-min); padding: var(--z-space-3) var(--z-space-4);
  color: var(--z-text-strong); text-decoration: none; font-size: var(--z-fs-small); font-weight: 600; }
.z-accountnav a:hover { background: var(--z-surface-action); color: var(--z-action-hover); }
.z-accountnav a[aria-current="page"] { background: var(--z-surface-action);
  box-shadow: inset 3px 0 0 var(--z-action); color: var(--z-action-hover); }
.z-accountnav .z-count { background: var(--z-action); }

.z-summary { display: grid; gap: var(--z-space-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .z-summary { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.z-summary__item { padding: var(--z-space-4); border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg); background: var(--z-surface); }
.z-summary__value { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  color: var(--z-text-strong); font-variant-numeric: tabular-nums; }
.z-summary__label { display: block; font-size: var(--z-fs-micro); letter-spacing: var(--z-ls-micro);
  text-transform: uppercase; color: var(--z-text-muted); font-weight: 600; margin-top: var(--z-space-1); }
.z-summary__item--alert { border-color: var(--z-danger-600); background: var(--z-danger-50); }
.z-summary__item--alert .z-summary__value, .z-summary__item--alert .z-summary__label { color: var(--z-danger-700); }

.z-rows { display: grid; gap: var(--z-space-3); }
.z-row { display: grid; gap: var(--z-space-3); padding: var(--z-space-4);
  border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); background: var(--z-surface);
  grid-template-columns: 64px minmax(0,1fr); align-items: start; }
@media (min-width: 768px) { .z-row { grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; } }
.z-row__thumb { width: 100%; aspect-ratio: 1; border-radius: var(--z-radius-md);
  overflow: hidden; background: var(--z-grey-100); }
.z-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.z-row__main { min-width: 0; }
.z-row__title { margin: 0 0 var(--z-space-1); font-size: var(--z-fs-small); font-weight: 600;
  color: var(--z-text-strong); }
.z-row__title a { color: inherit; }
.z-row__meta { margin: 0; font-size: var(--z-fs-micro); color: var(--z-text-muted); }
.z-row__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--z-space-2); }
@media (min-width: 768px) { .z-row__side { align-items: flex-end; text-align: right; } }
.z-row--attention { border-color: var(--z-danger-600); border-left-width: 4px; }

/* =========================== NON-PROD FLAG ========================= */
.z-mock { border: 2px dashed var(--z-grey-400); background: var(--z-grey-100);
  border-radius: var(--z-radius-lg); padding: var(--z-space-4) var(--z-space-5);
  color: var(--z-text); }
.z-mock p { margin: 0; color: var(--z-text); max-width: 80ch; }
.z-mock p + p { margin-top: var(--z-space-2); }
.z-mock strong { color: var(--z-text-strong); }

/* ========================= WORDMARK OPTIONS ======================== */
/* Shown side by side in the design system for a decision. Nothing here is
   applied to the site until the owners pick one. */
.z-marks { display: grid; gap: var(--z-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .z-marks { grid-template-columns: repeat(3, 1fr); } }
.z-mark-card { border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); overflow: hidden; background: var(--z-white); }
.z-mark-card__stage { display: flex; align-items: center; justify-content: center; min-height: 132px; padding: var(--z-space-6); }
.z-mark-card__stage--dark { background: var(--z-obsidian); }
.z-mark-card__stage--light { background: var(--z-white); border-top: 1px solid var(--z-border); }
.z-mark-card__note { padding: var(--z-space-4); border-top: 1px solid var(--z-border); }
.z-mark-card__note h3 { font-size: var(--z-fs-h4); margin: 0 0 var(--z-space-2); }
.z-mark-card__note p { font-size: var(--z-fs-small); color: var(--z-text-muted); margin: 0; }

.z-wm { display: inline-flex; align-items: center; gap: 10px; font-weight: 800;
  letter-spacing: -0.04em; font-size: 2rem; line-height: 1; }
.z-wm--on-dark { color: var(--z-white); }
.z-wm--on-light { color: var(--z-obsidian); }
.z-wm__x { color: var(--z-action); }
.z-wm__tile { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; background: var(--z-action);
  color: var(--z-white); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.05em; }
.z-wm__chev { width: 30px; height: 30px; flex: none; }

/* ========================== PALETTE PANEL ========================== */
.z-palette { display: grid; gap: var(--z-space-3); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.z-swatch { border: 1px solid var(--z-border); border-radius: var(--z-radius-md); overflow: hidden; background: var(--z-white); }
.z-swatch__chip { height: 56px; border-bottom: 1px solid var(--z-border); }
.z-swatch__meta { padding: var(--z-space-3); }
.z-swatch__name { display: block; font-size: var(--z-fs-small); font-weight: 700; color: var(--z-text-strong); }
.z-swatch__hex { display: block; font-family: var(--z-font-mono); font-size: var(--z-fs-micro); color: var(--z-text-muted); margin-top: 2px; }
.z-swatch__use { display: block; font-size: var(--z-fs-micro); color: var(--z-text-secondary); margin-top: var(--z-space-2); line-height: 1.45; }

/* ---------------------------------------------------- product photographs --
   The main photograph keeps a square box whatever shape the picture is, so
   the page does not jump as it loads and a tall lamp does not push the price
   below the fold. object-fit: contain, because cropping a clearance item is
   how a customer ends up surprised by what arrives. */
.z-pdp__photo{
  position:relative;aspect-ratio:1/1;background:#F4F5F7;border-radius:12px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.z-pdp__photo img{width:100%;height:100%;object-fit:contain}
.z-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.z-thumb{
  padding:0;border:2px solid transparent;border-radius:8px;background:#F4F5F7;
  cursor:pointer;line-height:0;overflow:hidden;
}
.z-thumb img{width:72px;height:72px;object-fit:cover;display:block}
.z-thumb.is-on{border-color:#0B0D10}
.z-thumb:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.z-product-card__media img,
.z-product-card__media picture{width:100%;height:100%;display:block}
.z-product-card__media img{object-fit:contain;background:#F4F5F7}

/* ------------------------------------------------------------ prose pages --
   Delivery, returns, privacy, terms. Measured line length, because these are
   the pages people actually read end to end when something has gone wrong. */
.z-prose{max-width:68ch}
.z-prose h2{margin:var(--z-space-8) 0 var(--z-space-3);font-size:1.25rem;line-height:1.3}
.z-prose h3{margin:var(--z-space-6) 0 var(--z-space-2);font-size:1.05rem}
.z-prose p,.z-prose li{line-height:1.65}
.z-prose ul,.z-prose ol{padding-left:1.2em;margin:var(--z-space-3) 0}
.z-prose li{margin:.35em 0}
.z-prose address{font-style:normal;background:#F4F5F7;border-radius:10px;
  padding:var(--z-space-4);display:inline-block;line-height:1.5}
.z-prose hr{border:0;border-top:1px solid #e5e7eb;margin:var(--z-space-8) 0 var(--z-space-4)}
.z-lede{font-size:1.05rem;color:#475467;max-width:62ch}
.z-callout{border-left:4px solid #0B0D10;background:#F9FAFB;padding:var(--z-space-4);
  border-radius:0 10px 10px 0;margin:var(--z-space-4) 0}
.z-footer__links{display:flex;flex-wrap:wrap;gap:var(--z-space-4);
  margin:var(--z-space-4) 0;font-size:.85rem}
.z-footer__links a{color:inherit}

/* Key details on a product page. A two-column list reads faster than a
   paragraph when someone is checking whether a rug fits a room. */
.z-specs{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:var(--z-space-3) 0}
.z-specs dt{font-weight:700;color:#475467}
.z-specs dd{margin:0}

/* The statutory cancellation form. It is a form, so it looks like one: fixed
   width characters and dotted rules, not a paragraph pretending to be one. */
.z-form{border:1px solid #D7DBE0;background:#FBFCFD;border-radius:8px;
  padding:var(--z-space-4);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;line-height:1.7;white-space:pre-wrap;overflow-x:auto;color:#2A2F36}

/* ---- Category tiles -------------------------------------------------
   A row of word-chips told a customer nothing about what was behind it.
   The drawings are line marks in app/icons.py, inline so they colour with
   the text and cost no request. A leaf category borrows its parent's mark,
   which is why there are thirteen drawings and forty-odd categories. */
.z-icon{display:block;color:#0B0D10;flex:none}
.z-cats{list-style:none;padding:0;margin:0;display:grid;gap:var(--z-space-3);
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.z-cats a{display:flex;flex-direction:column;gap:6px;height:100%;
  padding:var(--z-space-4);border:1px solid #E4E7EC;border-radius:12px;
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
.z-cats a:hover{border-color:#0B0D10;box-shadow:0 2px 10px rgba(11,13,16,.07);
  transform:translateY(-1px)}
.z-cats a:focus-visible{outline:2px solid #1D4ED8;outline-offset:2px}
.z-cats__name{font-weight:650;line-height:1.3;margin-top:4px}
.z-cats__n{font-size:.82rem;color:#667085}
@media (max-width:520px){
  .z-cats{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .z-cats a{padding:12px}
}

/* ---- Hero -----------------------------------------------------------
   The headline used to sit in column one and the lead paragraph in column
   two, because all three children were grid items. It read as a sentence
   stranded on the right of a black field. Now the words are one column and
   the three promises are the other. */
.z-hero__points{list-style:none;margin:0;padding:0;display:grid;gap:var(--z-space-4)}
.z-hero__points li{display:block;padding-left:var(--z-space-4);
  border-left:2px solid rgba(255,255,255,.22);
  color:var(--z-text-on-dark-muted);font-size:.95rem;line-height:1.55}
.z-hero__points strong{display:block;color:#fff;font-weight:650;margin-bottom:2px}
.z-hero__points a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){
  .z-hero__inner{padding-block:var(--z-space-12)!important;align-items:start}
}

/* ---- Pallets ---------------------------------------------------------- */
.z-pallets{display:grid;gap:var(--z-space-5);margin-bottom:var(--z-space-8)}
.z-pallet{display:grid;gap:var(--z-space-5)}
@media (min-width:880px){ .z-pallet{grid-template-columns:1fr 20rem;align-items:start} }
.z-pallet__facts{margin:0}
.z-pallet__facts > div{display:grid;gap:2px;padding:10px 0;border-top:1px solid #EDEFF2}
.z-pallet__facts dt{font-size:.82rem;color:#667085}
.z-pallet__facts dd{margin:0;font-weight:600}
.z-pallet__buy{border:1px solid #E4E7EC;border-radius:12px;padding:var(--z-space-4);background:#FBFCFD}
.z-pallet__buy .z-btn{width:100%;justify-content:center;margin-bottom:8px}

/* ---- The chat box ------------------------------------------------------
   Bottom right, above everything, out of the way of the page. It ships
   hidden and site.js reveals it, so nobody without JavaScript meets a button
   that does nothing. */
.z-chat{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;
  flex-direction:column;align-items:flex-end;gap:10px}
.z-chat__tab{display:inline-flex;align-items:center;gap:10px;border:0;
  border-radius:999px;padding:11px 20px 11px 16px;background:var(--z-blue-600);
  color:#fff;font-weight:650;font-size:.92rem;cursor:pointer;text-align:left;
  box-shadow:0 8px 28px rgba(37,99,235,.34)}
.z-chat__tab:hover{background:var(--z-blue-700)}
.z-chat__tab-icon{font-size:1.15rem;line-height:1}
.z-chat__tab-text{display:flex;flex-direction:column;line-height:1.25}
.z-chat__tab-text strong{font-size:.95rem;font-weight:700}
.z-chat__tab-text span{font-size:.78rem;font-weight:500;color:#DBEAFE}
.z-chat__intro{margin:0;padding:12px 14px;background:#F8F9FB;
  border-bottom:1px solid #EDEFF2;font-size:.82rem;line-height:1.5;
  color:#475467}
@media (max-width:520px){
  /* On a phone the two-line tab is most of the screen width, so it drops
     back to the short form rather than covering the product it is sitting
     on top of. */
  .z-chat__tab-text span{display:none}
  .z-chat__tab{padding:12px 18px}
}
.z-chat__panel{width:min(380px,calc(100vw - 32px));max-height:min(560px,80vh);
  display:flex;flex-direction:column;background:#fff;border:1px solid #E4E7EC;
  border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(11,13,16,.22)}
/* `hidden` is a UA-stylesheet rule, and ANY author rule that sets display
   beats it. The panel above sets display:flex, so without this line the box
   sits open over the hero on every single page load - which is exactly what
   it was doing. The same trap is why .z-chat itself needs the rule. */
.z-chat[hidden],.z-chat__panel[hidden]{display:none}
.z-chat__head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:12px 14px;background:var(--z-obsidian);color:#fff}
.z-chat__badge{display:block;font-size:.74rem;color:#A9B1BD;font-weight:500}
.z-chat__close{background:none;border:0;color:#fff;font-size:1.5rem;
  line-height:1;cursor:pointer;padding:0 4px}
.z-chat__log{flex:1;overflow-y:auto;padding:14px;display:flex;
  flex-direction:column;gap:10px;font-size:.92rem;line-height:1.5}
.z-chat__msg{max-width:92%;padding:10px 12px;border-radius:12px;white-space:pre-line}
.z-chat__msg--them{background:#F2F4F7;border-top-left-radius:4px}
.z-chat__msg--you{background:var(--z-action);color:#fff;align-self:flex-end;
  border-bottom-right-radius:4px}
.z-chat__item{display:block;padding:9px 11px;border:1px solid #E4E7EC;
  border-radius:10px;text-decoration:none;color:inherit;background:#fff}
.z-chat__item:hover{border-color:var(--z-obsidian)}
.z-chat__item b{display:block;font-weight:650}
.z-chat__item span{font-size:.84rem;color:#667085}
.z-chat__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.z-chat__chips button{border:1px solid #D7DBE0;background:#fff;border-radius:999px;
  padding:6px 11px;font-size:.82rem;cursor:pointer}
.z-chat__chips button:hover{border-color:var(--z-obsidian)}
.z-chat__form{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #EDEFF2}
.z-chat__form input{flex:1;min-width:0;padding:10px 12px;border:1px solid #D7DBE0;
  border-radius:9px;font:inherit}
.z-chat__foot{margin:0;padding:0 14px 12px;font-size:.76rem;color:#8A93A0}
@media (max-width:520px){ .z-chat{right:10px;bottom:10px} }

/* ---------------------------------------------------------------- hero art
   A photograph behind the hero, with a gradient over it that is doing real
   work: the headline sits on the left, so the left side is taken almost to
   solid obsidian and the picture is only allowed to show on the right. Text
   contrast therefore does not depend on the image, which matters because the
   image is the one thing here that can fail to load.
   The colour stays on .z-hero itself, so a hero with no picture is unchanged. */
.z-hero--art {
  background-image:
    linear-gradient(90deg, #0B0D10 0%, #0B0D10 34%, rgba(11,13,16,.86) 55%, rgba(11,13,16,.62) 100%),
    url("/media/site/hero.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) {
  /* On a phone the headline crosses the whole width, so the picture goes
     under a much heavier wash rather than being cropped to nothing. */
  .z-hero--art {
    background-image:
      linear-gradient(180deg, rgba(11,13,16,.93) 0%, rgba(11,13,16,.80) 100%),
      url("/media/site/hero.jpg");
    background-position: center;
  }
}

/* ------------------------------------------------------------ trust block
   Four checkable facts. Not badges - every one of them links to or names
   something the reader can verify for themselves, which is the only kind of
   reassurance worth printing when a shop has no reviews yet. */
.z-trust { background: var(--z-grey-100); border-top: 1px solid var(--z-grey-200);
  border-bottom: 1px solid var(--z-grey-200); }
.z-trust__grid { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--z-space-6); }
@media (min-width: 680px) { .z-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .z-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.z-trust__grid li { margin: 0; }
.z-trust__mark { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; background: var(--z-white);
  border: 1px solid var(--z-grey-200); color: var(--z-blue-600);
  margin-bottom: var(--z-space-3); }
.z-trust__grid b { display: block; color: var(--z-text-strong);
  font-size: var(--z-fs-body); margin-bottom: 4px; }
/* The mark is a span too, and a bare `.z-trust__grid span` outranks
   `.z-trust__mark`, which turned the tile back into a block of grey body
   text with the drawing stuck in its top-left corner. Matching only the span
   that FOLLOWS the heading leaves the mark alone. */
.z-trust__grid b ~ span { display: block; color: var(--z-text-secondary);
  font-size: var(--z-fs-small); line-height: 1.55; }
.z-trust__grid a { color: var(--z-blue-600); }
/* .z-icon hard-codes its own colour, so the mark has to be told again here
   or it comes out near-black inside a tile that was meant to read as blue. */
.z-trust__mark .z-icon { color: var(--z-blue-600); width: 20px; height: 20px; }

/* ------------------------------------------------------------ grade promise
   The strongest honest thing this shop can say, given its own weight. */
.z-promise { background: var(--z-obsidian); color: var(--z-white); }
.z-promise h2 { color: var(--z-white); }
.z-promise p { color: var(--z-text-on-dark-muted); }
.z-promise__inner { display: grid; gap: var(--z-space-8); align-items: start; }
@media (min-width: 900px) { .z-promise__inner { grid-template-columns: 1fr 1fr;
  gap: var(--z-space-12); } }
.z-promise__grades { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--z-space-3); }
.z-promise__grades li { margin: 0; padding: var(--z-space-4);
  border: 1px solid var(--z-graphite); border-radius: var(--z-radius-md);
  background: var(--z-charcoal); }
.z-promise__grades b { display: block; color: var(--z-white); margin-bottom: 3px; }
.z-promise__grades span { color: var(--z-grey-350); font-size: var(--z-fs-small);
  line-height: 1.55; }
.z-promise a { color: var(--z-blue-400); }

/* --------------------------------------------------------- early access
   The strip only renders when there is something behind it, so it never
   becomes the band that cries wolf. */
.z-earlybar { background: var(--z-blue-600); color: #fff; }
.z-earlybar .z-container { display: flex; flex-wrap: wrap; gap: var(--z-space-3);
  align-items: center; justify-content: center; padding-block: 9px;
  font-size: var(--z-fs-small); }
.z-earlybar strong { font-weight: 700; }
.z-earlybar a { color: #fff; text-decoration: underline; font-weight: 650; }

/* ---------------------------------------------------------- join page */
.z-join { display: grid; gap: var(--z-space-8); align-items: start; }
@media (min-width: 900px) { .z-join { grid-template-columns: 1.05fr 0.95fr;
  gap: var(--z-space-12); } }
.z-join__points { list-style: none; margin: var(--z-space-8) 0 0; padding: 0;
  display: grid; gap: var(--z-space-5); }
.z-join__points li { margin: 0; padding-left: var(--z-space-5);
  border-left: 3px solid var(--z-blue-600); font-size: var(--z-fs-small);
  color: var(--z-text-secondary); line-height: 1.6; }
.z-join__points strong { display: block; color: var(--z-text-strong);
  font-size: var(--z-fs-body); margin-bottom: 3px; }
.z-join__points + p { margin-top: var(--z-space-6); }

.z-field__hint { display: block; margin-top: 5px; font-size: var(--z-fs-small);
  color: var(--z-text-muted); line-height: 1.5; }

.z-code-chip { display: inline-block; margin: 0 0 var(--z-space-3);
  padding: 9px 16px; border: 2px dashed var(--z-blue-600);
  border-radius: var(--z-radius-md); background: var(--z-blue-50);
  color: var(--z-blue-700); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 1.5px; }

.z-grid--halves { display: grid; gap: var(--z-space-5); }
@media (min-width: 760px) { .z-grid--halves { grid-template-columns: 1fr 1fr; } }

.z-alert { padding: var(--z-space-4); border-radius: var(--z-radius-md);
  margin-bottom: var(--z-space-5); font-size: var(--z-fs-small); }
.z-alert--bad { background: var(--z-danger-50); border: 1px solid var(--z-danger-600);
  color: var(--z-danger-700); }
.z-alert--good { background: var(--z-success-50); border: 1px solid var(--z-success-700);
  color: var(--z-success-700); }