/* ==========================================================================
   THE WORLD FOR SALE — design system (v2)
   Industrial / warehouse tone, Andy's blue brand.
   Anton is reserved for large display headings; all UI text (buttons, labels,
   card titles, nav) uses IBM Plex Sans. IBM Plex Mono is used only for
   prices, quantities and inventory-style identifiers, never for prose.

   Principles
   - Product photography is the loudest thing on browse pages; card chrome
     stays quiet (no frame, no lift, no shadow).
   - Separation comes from surface contrast and 1px borders, not shadows.
     Shadows are reserved for things that float: menus, sheets, the hero tags.
   - Every interactive target is ≥44px on coarse pointers.
   - Layout respects safe-area insets so the site can ship as a PWA.

   Contents
    1. tokens            12. storefront
    2. base              13. forms, signup & auth
    3. buttons           14. footer
    4. form controls     15. CTA split
    5. header / nav      16. seller dashboard
    6. hero              17. product page & content pages
    7. flagship          18. AI listing builder
    8. categories        19. payments & sales
    9. browse & search   20. admin
   10. product cards     21. utilities, states, PWA chrome
   11. sellers & trust   22. responsive
   ========================================================================== */

/* ---------- 1. tokens ---------- */

:root {
  color-scheme: light;

  /* brand — blue gradient wordmark on white/chrome */
  --blue-deep: #0A3D8F;
  --blue-mid: #1D6FD1;
  --blue-bright: #3FA9F5;
  --blue-tint: #EAF3FE;
  --blue-tint-strong: #D6E8FC;

  /* neutrals */
  --ink: #10151B;
  --ink-muted: #55626D;          /* 5.9:1 on --surface-page, 6.4:1 on white */
  --ink-subtle: #6B7783;         /* placeholders, tertiary text (4.6:1 on white) */
  --border-subtle: #E6EBF0;      /* in-panel dividers */
  --border: #DCE3EA;             /* panel & media edges */
  --border-strong: #C3CDD8;      /* hovered surfaces, secondary buttons */
  --border-input: #8995A1;       /* form controls — 3:1 against white */
  --border-dark: #14468F;
  --hazard: #B0332B;

  /* surfaces — page is a cool concrete grey, panels sit on it in white */
  --surface-page: #F4F7FB;
  --surface: #FFFFFF;
  --surface-sunken: #EDF1F6;     /* table heads, disabled inputs, empty states */
  --surface-hover: #F7F9FC;      /* row & option hover */
  --surface-media: #F1F4F8;      /* behind product photos while they load */
  --surface-inverse: var(--blue-deep);

  /* status (text colours all ≥4.5:1 on their own bg) */
  --success: #1D6B34;
  --success-bg: #E2F3E6;
  --warning: #7A5600;
  --warning-bg: #FFF4D6;
  --danger: #9B1C1C;
  --danger-bg: #FBE3E3;
  --info: var(--blue-deep);
  --info-bg: var(--blue-tint);
  --star: #B57C00;               /* rating stars — 3:1 as a graphic on white */

  /* structural aliases — kept because markup/JS may reference them */
  --navy: var(--blue-deep);
  --navy-light: var(--blue-mid);
  --concrete: var(--surface-page);
  --panel: var(--surface);
  --amber: var(--blue-bright);
  --amber-dark: var(--blue-mid);

  /* on-dark text (all ≥4.5:1 on --navy) */
  --on-dark: #FFFFFF;
  --on-dark-muted: #C3CEDA;
  --on-dark-subtle: #A9B7C5;
  --on-dark-border: rgba(255, 255, 255, 0.16);

  /* the gradient belongs to the wordmark; use it only on brand marks */
  --brand-gradient: linear-gradient(100deg, var(--blue-deep), var(--blue-bright));

  /* media placeholder — packing-tape stripes while a photo is missing/loading */
  --media-placeholder: repeating-linear-gradient(135deg, #E8EDF3 0 10px, #F0F3F8 10px 20px);

  /* type */
  --font-display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* rem-based so the scale follows the user's browser font size */
  --text-xs: 0.75rem;     /* 12 — meta, captions */
  --text-sm: 0.875rem;    /* 14 — secondary UI */
  --text-base: 0.9375rem; /* 15 — dense UI (buttons, tables) */
  --text-md: 1rem;        /* 16 — body, inputs */
  --text-lg: 1.125rem;    /* 18 — lead text, card prices */
  --text-xl: 1.375rem;    /* 22 — section subheads */
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);         /* 24–32 */
  --text-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem);  /* 28–38 */
  --text-display: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem); /* 36–56 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --leading-prose: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --gutter: var(--space-6);      /* container side padding; shrinks on phones */
  --section-y: 72px;             /* vertical rhythm between page sections */

  /* shape — small, consistent radii; nothing pill-shaped except chips */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* elevation — only for floating layers */
  --shadow-xs: 0 1px 2px rgba(16, 21, 27, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 21, 27, 0.06), 0 1px 2px rgba(16, 21, 27, 0.04);
  --shadow-md: 0 6px 16px rgba(16, 21, 27, 0.08), 0 2px 4px rgba(16, 21, 27, 0.04);
  --shadow-lg: 0 16px 36px rgba(16, 21, 27, 0.12), 0 4px 8px rgba(16, 21, 27, 0.05);
  --shadow-overlay: 0 -1px 0 var(--border), 0 -8px 24px rgba(16, 21, 27, 0.06);

  /* focus */
  --focus: var(--blue-mid);
  --focus-ring: 0 0 0 3px rgba(29, 111, 209, 0.28);
  --focus-ring-danger: 0 0 0 3px rgba(176, 51, 43, 0.16);

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 0.16s;
  --dur-slow: 0.28s;

  /* z-index layers */
  --z-raised: 1;
  --z-sticky: 20;        /* sticky in-page bars (table heads, filters) */
  --z-header: 50;
  --z-dropdown: 60;      /* mobile nav sheet, menus */
  --z-bottom-nav: 70;
  --z-sticky-action: 75; /* mobile buy/save bar */
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* layout */
  --container: 1240px;
  --container-prose: 760px;
  --header-h: 64px;
  --bottom-nav-h: 56px;
  --tap: 44px;           /* WCAG 2.5.5 minimum target */
  --tap-lg: 48px;        /* primary touch actions */
  --control-h: 44px;     /* text inputs & selects */

  /* listing image ratio — square crops read best in 2-up phone grids */
  --card-media-ratio: 1 / 1;

  /* PWA safe areas (needs viewport-fit=cover in the meta viewport) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Breakpoints (CSS can't read custom props in @media; keep these in sync):
     wide ≤1024px · tablet ≤860px · phone ≤520px · narrow ≤360px */
}

/* ---------- 2. base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--safe-top) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* replaced by explicit :active states */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface-page);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 0.5em;
  line-height: var(--leading-tight);
  font-weight: var(--weight-regular);
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0 0 1em; color: var(--ink); max-width: 62ch; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* remove the 300ms double-tap delay on controls */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

::selection { background: var(--blue-tint-strong); color: var(--ink); }

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

/* lighter ring on dark surfaces so focus stays visible */
.site-header :focus-visible,
.site-footer :focus-visible,
.section--dark :focus-visible {
  outline-color: #fff;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}

.section { padding: var(--section-y) 0; }

.section--tight { padding: var(--space-12) 0; }

.section--dark {
  background: var(--surface-inverse);
  color: var(--on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--on-dark); }

.section--dark p { color: var(--on-dark-muted); }

.eyebrow-free-heading {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
}

/* ---------- 3. buttons ----------
   primary   .btn--primary        solid brand blue — one per view
   secondary .btn--outline        bordered, neutral
   on-dark   .btn--outline-light  for navy surfaces
   danger    .btn--danger         destructive (optional modifier)
   tertiary  .btn--ghost          low emphasis (optional modifier)
   loading   .btn.is-loading or .btn[aria-busy="true"]
   ---------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  max-width: 100%;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 2px; }

.btn--primary {
  background: var(--blue-mid);
  color: #fff;
}
.btn--primary:hover { background: var(--blue-deep); }
.btn--primary:active { background: #082F6E; }

.btn--outline {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--navy);
}
.btn--outline:hover {
  background: var(--blue-tint);
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:active { background: var(--blue-tint-strong); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.btn--outline-light:active { background: rgba(255, 255, 255, 0.18); }

.btn--danger {
  background: var(--surface);
  border-color: #E3B4B0;
  color: var(--hazard);
}
.btn--danger:hover { background: var(--hazard); border-color: var(--hazard); color: #fff; }
.btn--danger:active { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--navy);
}
.btn--ghost:hover { background: var(--blue-tint); }
.btn--ghost:active { background: var(--blue-tint-strong); }

/* primary CTA on navy surfaces: invert to white for contrast */
.site-header .btn--primary,
.section--dark .btn--primary {
  background: #fff;
  color: var(--blue-deep);
}
.site-header .btn--primary:hover,
.section--dark .btn--primary:hover { background: var(--blue-tint); }

.site-header .btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.site-header .btn--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

.btn--small {
  min-height: 36px;
  padding: 7px 14px;
  font-size: var(--text-sm);
}
.btn--full { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* loading: keep the button's width, hide the label, show a spinner */
.btn.is-loading,
.btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after,
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--btn-spinner, var(--blue-mid)) transparent var(--btn-spinner, var(--blue-mid)) var(--btn-spinner, var(--blue-mid));
  animation: spin 0.7s linear infinite;
}
.btn--primary.is-loading,
.btn--primary[aria-busy="true"],
.btn--danger.is-loading,
.btn--danger[aria-busy="true"] { --btn-spinner: #fff; }
.site-header .btn--primary.is-loading,
.section--dark .btn--primary.is-loading { --btn-spinner: var(--blue-deep); }

/* ---------- 4. shared form controls ---------- */

.field input,
.field textarea,
.field select,
.price-inputs input,
.search-bar input,
.admin__filters input,
.admin__filters select,
.admin__remove {
  background-color: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder,
.price-inputs input::placeholder,
.search-bar input::placeholder,
.admin__filters input::placeholder { color: var(--ink-subtle); opacity: 1; }

.field input:hover,
.field textarea:hover,
.field select:hover,
.price-inputs input:hover,
.search-bar input:hover,
.admin__filters input:hover,
.admin__filters select:hover { border-color: var(--ink-muted); }

.field input:focus,
.field textarea:focus,
.field select:focus,
.price-inputs input:focus,
.search-bar input:focus,
.admin__filters input:focus,
.admin__filters select:focus,
.admin__remove:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}

/* error state: native validation after interaction, or aria-invalid from JS */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid,
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--hazard);
  box-shadow: var(--focus-ring-danger);
}

/* success state (opt-in via class) */
.field input.is-valid,
.field textarea.is-valid,
.field select.is-valid { border-color: var(--success); }

.field input:disabled,
.field textarea:disabled,
.field select:disabled,
.price-inputs input:disabled,
.search-bar input:disabled,
.admin__filters input:disabled,
.admin__filters select:disabled {
  background-color: var(--surface-sunken);
  border-color: var(--border);
  color: var(--ink-subtle);
  cursor: not-allowed;
}

.field input[readonly],
.field textarea[readonly] { background-color: var(--surface-sunken); border-style: dashed; }

/* custom select chevron */
.field select,
.admin__filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2355626D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* ---------- 5. header / nav ---------- */

.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: var(--safe-top);
  border-bottom: 1px solid var(--border-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
  padding: var(--space-2) max(var(--gutter), var(--safe-right)) var(--space-2) max(var(--gutter), var(--safe-left));
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  flex-shrink: 0;
}

.wordmark__mark {
  width: 28px;
  height: 28px;
  background: var(--amber);
  border-radius: var(--radius);
  position: relative;
  flex-shrink: 0;
}
.wordmark__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--navy);
  border-radius: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
}

.main-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.main-nav__links a {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease);
}
.main-nav__links a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.main-nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-bright);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.main-nav__links a:not(.btn):hover,
.main-nav__links a.is-active:not(.btn),
.main-nav__links a[aria-current="page"]:not(.btn) { color: #fff; }
.main-nav__links a.is-active:not(.btn)::after,
.main-nav__links a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }

.main-nav__links li:nth-last-child(-n+2) {
  margin-left: var(--space-1);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  padding: var(--space-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.nav-toggle:active,
.nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }

/* ---------- 6. hero ---------- */

.hero {
  padding: var(--space-20) 0 var(--space-16);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: var(--text-display);
  max-width: 12ch;
  margin-bottom: var(--space-4);
}

.hero__sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* inventory-tag stack in the hero — the one place a floating shadow is earned */

.tag-stack {
  position: relative;
  height: 380px;
  max-width: 440px;
}

.tag-card {
  position: absolute;
  width: 260px;
  max-width: 78%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-md);
}

/* the punched hole of a hang tag */
.tag-card::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-page);
  border: 1.5px solid var(--border-strong);
}

.tag-card--1 { top: 0; left: 20px; transform: rotate(-4deg); z-index: 3; }
.tag-card--2 { top: 110px; left: 130px; transform: rotate(3deg); z-index: 2; }
.tag-card--3 { top: 230px; left: 30px; transform: rotate(-2deg); z-index: 1; }

.tag-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.tag-card__title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.35;
  margin-bottom: var(--space-2);
}

.tag-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. flagship / featured shop panel ---------- */

.flagship {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  padding: 3px 10px;
  border: 1px solid var(--blue-tint-strong);
  background: var(--blue-tint);
  border-radius: var(--radius-pill);
  color: var(--blue-deep);
  margin-bottom: var(--space-3);
  white-space: nowrap;
}
/* status variants share the admin status palette */
.badge--neutral { background: var(--surface-sunken); border-color: var(--border); color: var(--ink-muted); }
.badge--success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.badge--warning { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  border-color: transparent; color: var(--danger); }

.flagship__mark {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 1.75rem;
}

.flagship h3 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.flagship p { margin-bottom: 0; color: var(--ink-muted); }

/* ---------- 8. category grid ---------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.cat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cat-card:active { background: var(--surface-hover); }

.cat-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.cat-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: var(--leading-snug);
  margin: 0;
}

/* ---------- 9. browse layout, filters & search ---------- */

.product-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

/* desktop: an unboxed rail — filters are tools, not content, so no card */
.filters {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  padding: 0 var(--space-5) var(--space-4) 0;
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top) + var(--space-6));
  max-height: calc(100vh - var(--header-h) - var(--space-12));
  max-height: calc(100dvh - var(--header-h) - var(--safe-top) - var(--space-12));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.filters h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.filter-group { margin-bottom: var(--space-6); }
.filter-group:last-child { margin-bottom: 0; }

.filter-group__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: var(--text-sm);
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-option:hover { background: var(--surface-hover); }
.filter-option:has(input:checked) { font-weight: var(--weight-semibold); }

.filter-subs {
  margin: 2px 0 6px 18px;
  padding-left: 10px;
  border-left: 1px solid var(--border-strong);
}
.filter-subs .filter-option { min-height: 32px; }

.filter-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}
.price-inputs input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.search-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.search-bar input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-lg);
  padding: 12px 14px 12px 42px;
  font-size: var(--text-md);
  /* magnifier icon so the field reads as search at a glance */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2355626D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}
.search-bar input::-webkit-search-cancel-button { cursor: pointer; }
.search-bar .btn { min-height: var(--tap-lg); }

.results-count {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
}

/* empty states: a quiet sunken well with room for a message and a next step */
.results-empty,
.dashboard__empty {
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: none;
  text-wrap: balance;
}
.results-empty > :first-child,
.dashboard__empty > :first-child { color: var(--ink); }
.results-empty > :is(h2, h3, h4, strong),
.dashboard__empty > :is(h2, h3, h4, strong) {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.results-empty p,
.dashboard__empty p { margin-left: auto; margin-right: auto; color: var(--ink-muted); }
.results-empty .btn,
.dashboard__empty .btn { margin-top: var(--space-3); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.pagination a, .pagination span {
  min-width: var(--tap);
  height: var(--tap);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pagination a:hover { border-color: var(--navy); background: var(--blue-tint); }
.pagination a:active { background: var(--blue-tint-strong); }
.pagination .is-current,
.pagination [aria-current="page"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  font-weight: var(--weight-semibold);
}

/* ---------- 10. product grid / cards ----------
   Frameless: the photo is the card. Text sits directly on the page surface.
   The title link is stretched over the whole card so the photo, title and
   price are one large tap target; buttons and other links sit above it. */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-5);
}

.product-grid--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* while JS refreshes results */
.product-grid[aria-busy="true"] { opacity: 0.55; pointer-events: none; transition: opacity var(--dur) var(--ease); }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
}
.product-card:focus-within { outline: none; }
.product-card:has(a.product-card__title:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.product-card a.product-card__title:focus-visible { outline: none; }

.product-card__image {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  background: var(--media-placeholder);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur) var(--ease);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
  transition: transform var(--dur-slow) var(--ease);
}

/* a faint inner veil so white-background product shots don't melt into the page */
.product-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 21, 27, 0);
  transition: background-color var(--dur) var(--ease);
  pointer-events: none;
}
.product-card:active .product-card__image::after { background: rgba(16, 21, 27, 0.06); }

.product-card__body {
  padding: var(--space-3) 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.product-card__model {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__title {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: 1.35;
  margin-bottom: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.product-card__title { display: -webkit-box; }
a.product-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  border-radius: var(--radius-lg);
}
/* anything else interactive in the card stays clickable above the stretched link */
.product-card :is(a:not(.product-card__title), button, input, select, textarea, label, form, .product-card__actions, .product-card__cta) {
  position: relative;
  z-index: calc(var(--z-raised) + 1);
}

.product-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: auto;
  padding-top: var(--space-1);
  line-height: 1.3;
}

.product-card__ship {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.product-card__ship--quote { color: var(--hazard); font-weight: var(--weight-medium); }

.product-card__stock {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.product-card__cta {
  margin-top: var(--space-3);
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.product-card__actions .btn { flex: 1 1 auto; }

/* ---------- 11. sellers & trust ---------- */

.seller-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.seller-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  transition: border-color var(--dur) var(--ease);
}

.seller-card--pinned {
  grid-column: 1 / -1;
  background: var(--surface);
  border-color: var(--blue-mid);
  box-shadow: inset 3px 0 0 var(--blue-mid);
}

.seller-card__mark {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  flex-shrink: 0;
  overflow: hidden;
}
.seller-card__mark img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

.seller-card__body { flex: 1; min-width: 0; }

.seller-card__name {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.seller-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue-deep);
  background: var(--blue-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-bottom: var(--space-2);
}

.seller-card__blurb {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}

.seller-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.seller-card__meta {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: none;
  margin-bottom: var(--space-8);
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trust-bar__item::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-mid);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.market-shops { margin-bottom: var(--space-8); }
.market-shops__title { margin-bottom: var(--space-4); }

/* ---------- 12. shop banner (seller storefront) ---------- */

/* Banner is stored at exactly 1920x480 (4:1), so showing it at 4:1 shows the whole image. */
.storefront-head { background: var(--surface); border-bottom: 1px solid var(--border); }

.storefront-banner {
  aspect-ratio: 4 / 1;
  max-height: 480px;
  width: 100%;
  background: var(--brand-gradient);
  overflow: hidden;
}
.storefront-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.storefront-head:not(.storefront-head--banner) .storefront-banner { aspect-ratio: auto; height: 96px; background: var(--navy); }

.storefront-head__bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.storefront-logo {
  width: 152px;
  height: 152px;
  margin-top: -76px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--brand-gradient);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.75rem;
}
.storefront-logo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }

.storefront-head__text { flex: 1; min-width: 0; padding-top: var(--space-4); }
.storefront-head__name { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.storefront-head__meta { font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.storefront-section-title { font-size: var(--text-2xl); margin-bottom: var(--space-4); }

.shop-description { margin-bottom: var(--space-5); color: var(--ink-muted); }
.shop-description:empty { display: none; }

/* ---------- 13. sell / signup / auth ---------- */

.signup-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.signup-side h2 { font-size: var(--text-2xl); }

.terms-list {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.terms-list__title {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.terms-list li {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding: var(--space-1) 0 var(--space-1) 18px;
  position: relative;
}
.terms-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--hazard);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
/* section headings inside long forms (listing editor, settings) */
.form-card > h2,
.form-card > h3 { font-size: var(--text-xl); }

.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 12px;
  font-size: var(--text-md);
}
.field textarea { resize: vertical; min-height: 112px; line-height: 1.5; }

.field select {
  width: 100%;
  min-height: var(--control-h);
  padding: 10px 36px 10px 12px;
  font-size: var(--text-md);
}

/* optional helper/error lines under a control */
.field__hint,
.field small {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 62ch;
}
.field__error {
  display: block;
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--hazard);
}
.field__error:empty { display: none; }

/* checkboxes / radios inside .field shouldn't inherit text-input sizing */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--navy);
}

/* upload controls */
.field input[type="file"] {
  padding: var(--space-2);
  border-style: dashed;
  background-color: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--blue-mid); background-color: var(--blue-tint); }
.field input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--navy); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
}
.field-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.field .field-check--inline { display: flex; margin-top: 26px; }
.field .field-check--inline input { width: 18px; padding: 0; }

.form-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: var(--space-4);
}
.form-note a { text-decoration: underline; text-underline-offset: 2px; color: var(--blue-mid); }

/* inline alerts: tinted surface + left rule + text label (never colour alone) */
.form-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-left: 3px solid var(--hazard);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  min-height: 1em;
  margin-bottom: var(--space-3);
  max-width: none;
}
.form-message {
  color: var(--ink);
  background: var(--info-bg);
  border-left: 3px solid var(--blue-mid);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  max-width: none;
}
.form-error:empty, .form-message:empty { display: none; }

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-10) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.form-success::before {
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-size: 22px;
  font-weight: 700;
}
.form-success p { margin-left: auto; margin-right: auto; }
.form-success.is-visible { display: block; }
.form-card.is-hidden { display: none; }

.auth-layout {
  max-width: 440px;
  display: grid;
  gap: var(--space-6);
}
.auth-title { margin-bottom: var(--space-5); font-size: var(--text-3xl); }
.auth-layout .form-card { padding: var(--space-8) var(--space-8) var(--space-6); }
.auth-layout .btn--primary { width: 100%; min-height: var(--tap-lg); }
.auth-layout .auth-title,
.auth-layout .form-note { text-align: center; }

/* account page: identity header, section menu, one panel per task */
.account { display: grid; gap: var(--space-6); }
.account__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
.account__avatar {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue-deep); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-xl); letter-spacing: 0.02em;
}
.account__who { flex: 1; min-width: 0; }
.account__title { font-size: var(--text-3xl); margin: 0; overflow-wrap: anywhere; }
.account__email { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.account__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.account__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.account__nav {
  position: sticky; top: calc(var(--header-h) + var(--safe-top) + var(--space-4));
  display: grid; gap: 2px; padding-left: var(--space-1); border-left: 1px solid var(--border);
}
.account__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-3); margin-left: -5px; border-left: 3px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none;
}
.account__nav a:hover { color: var(--ink); background: var(--surface-hover); }
.account__nav a[aria-current] { color: var(--blue-deep); border-left-color: var(--blue-mid); background: var(--blue-tint); }
.account__nav a.account__nav-danger { color: var(--danger); }
.account__count {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--surface-sunken); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--text-xs);
}

.account__sections { display: grid; gap: var(--space-6); }
.account-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8) var(--space-8); }
.account-panel__head { margin-bottom: var(--space-5); }
.account-panel__head h2 { font-size: var(--text-xl); margin: 0; }
.account-panel__head p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: var(--text-sm); max-width: 60ch; }
.account-panel__part + .account-panel__part { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.account-panel__part h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }
.account-switch { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.account-switch h3 { margin: 0; }
.account-panel__note { margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: var(--text-sm); max-width: 60ch; }
.account-panel__narrow { max-width: 360px; }
.account-panel__hint { margin-top: var(--space-1); }
.account-panel .form-error:empty, .account-panel .form-message:empty { display: none; }
.account .danger-zone { margin-top: 0; padding: var(--space-4) var(--space-8); }
.account .danger-zone[open] { padding-bottom: var(--space-6); }

.order-empty { padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center; }
.order-empty p { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: var(--text-sm); }
.order-empty .order-empty__title { margin-bottom: var(--space-1); color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-semibold); }

@media (max-width: 860px) {
  .account__body { grid-template-columns: 1fr; gap: var(--space-4); }
  .account__nav {
    position: static; display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 0 var(--space-1); border-left: 0;
    scrollbar-width: none;
  }
  .account__nav a { flex: none; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .account__nav a[aria-current] { border-color: var(--blue-mid); }
  .account-panel { padding: var(--space-5); }
  .account .danger-zone { padding: var(--space-3) var(--space-5); }
  .account .field-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 520px) {
  .account__avatar { width: 52px; height: 52px; font-size: var(--text-lg); }
  .account__actions { width: 100%; }
  .account__actions .btn { flex: 1; }
}

/* ---------- 14. footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--on-dark-muted);
  padding: 56px 0 calc(var(--space-8) + var(--safe-bottom));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.footer-grid h5 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: #fff;
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 var(--space-3);
}

.footer-grid a, .footer-grid p {
  font-size: var(--text-sm);
  display: block;
  margin-bottom: var(--space-1);
  color: var(--on-dark-muted);
}
.footer-grid a {
  display: flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--dur) var(--ease);
}
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.footer-bottom {
  border-top: 1px solid var(--on-dark-border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--on-dark-subtle);
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 15. CTA split ---------- */

.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.cta-split__fine {
  color: var(--on-dark-subtle);
  font-size: var(--text-sm);
}
.cta-split__fine a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 16. seller dashboard & listing editor ---------- */

.dashboard__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.dashboard__title { font-size: var(--text-3xl); margin-bottom: var(--space-1); }
.dashboard__meta {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.dashboard__meta a { text-decoration: underline; text-underline-offset: 2px; }
.dashboard__notice {
  color: var(--ink-muted);
  margin-bottom: var(--space-8);
}
.dashboard__notice:empty { display: none; }
.dashboard__tabs { margin-top: var(--space-6); }
.dashboard__panel > .form-note:first-child { margin-bottom: var(--space-5); }
.dashboard__panel.sales,
.dashboard__panel.purchases { margin-top: 0; }
.dashboard__listings-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.dashboard__listings-head :is(h2, h3) { font-size: var(--text-2xl); margin-bottom: 0; }
.dashboard__preview {
  max-height: 120px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--media-placeholder);
}
.dashboard__preview--banner { aspect-ratio: 4 / 1; width: 100%; object-fit: cover; }
.dashboard__preview--logo { max-height: 80px; }

/* dashboard listings are management views: keep a light frame around each */
.dashboard .product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-2) var(--space-3);
}
.dashboard .product-card__image { border-radius: var(--radius); }
.dashboard .product-card__body { padding: var(--space-3) var(--space-1) 0; }

.listing-editor { margin-bottom: var(--space-6); }
.listing-editor__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.photo-strip:not(:empty) { margin-bottom: var(--space-3); }
.photo-strip__item { position: relative; }
.photo-strip__item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--media-placeholder);
}
/* first photo is the cover image on listings — mark it */
.photo-strip__item:first-child img { border: 2px solid var(--blue-mid); }
.photo-strip__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--hazard);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* enlarge the hit area to 40px without changing the visual size */
.photo-strip__remove::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.photo-strip__remove:hover { background: var(--danger); transform: scale(1.08); }
.photo-strip__remove:active { background: var(--danger); transform: scale(0.96); }

/* ---------- 17. product page ---------- */

.page-title { font-size: var(--text-3xl); }
.page-intro { margin-bottom: var(--space-8); color: var(--ink-muted); font-size: 1.0625rem; }

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.breadcrumb a {
  display: inline-block;
  padding: var(--space-1) 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.breadcrumb a:hover { color: var(--blue-mid); text-decoration-color: currentColor; }

.item-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
/* desktop: gallery stays in view while the buyer reads details */
.item-gallery {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top) + var(--space-6));
  min-width: 0;
}
.item-gallery__main {
  aspect-ratio: 4 / 3;
  background: var(--media-placeholder);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  overflow: hidden;
}
.item-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.item-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.item-gallery__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.item-gallery__thumb:hover { border-color: var(--ink-muted); }
.item-gallery__thumb.is-active,
.item-gallery__thumb[aria-current="true"],
.item-gallery__thumb[aria-pressed="true"],
.item-gallery__thumb[aria-selected="true"] {
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 2px var(--blue-mid);
}
.item-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-info__title {
  font-size: var(--text-3xl);
  margin: 6px 0 var(--space-3);
}
.item-info__price {
  font-family: var(--font-mono);
  font-size: 1.875rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.item-info__ship, .item-info__condition {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}
.item-info__condition { margin-bottom: var(--space-6); }
.item-info__sold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.item-info__seller {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  max-width: none;
}
.item-info__seller a { text-decoration: underline; text-underline-offset: 2px; color: var(--blue-mid); font-weight: var(--weight-semibold); }
.item-info__policy {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-top: 6px;
}
.quote-form { margin-top: var(--space-2); }
.quote-form .btn--primary { min-height: var(--tap-lg); }
.item-description {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  max-width: var(--container-prose);
}
.item-description h2 { font-size: var(--text-2xl); }
.item-description p { white-space: pre-line; line-height: var(--leading-prose); }

.legal { max-width: var(--container-prose); }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.legal p, .legal li { line-height: var(--leading-prose); }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: var(--space-4); }
.legal li { margin-bottom: 6px; }
.legal a:not(.btn) { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.legal ol.steps { list-style: decimal; padding-left: 22px; margin-bottom: var(--space-4); }
.danger-zone { margin-top: var(--space-8); border-color: #EBC5C2; }
.danger-zone summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--danger);
}
.danger-zone[open] summary { margin-bottom: var(--space-4); }
.danger-zone__text { font-size: var(--text-sm); color: var(--ink-muted); }
.support-form { max-width: 640px; margin-top: var(--space-4); }
.support-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
.sitemap h2 { margin-top: 0; font-size: var(--text-lg); }
.sitemap ul { list-style: none; padding-left: 0; }
.sitemap a { display: inline-block; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; }

.footer-credit a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 18. AI listing builder ---------- */

.ai-helper {
  border: 1px solid var(--blue-tint-strong);
  border-radius: var(--radius-lg);
  background: var(--blue-tint);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.ai-helper p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: var(--space-1) 0 0;
}
.ai-helper .ai-helper__meta { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ai-helper .form-error { grid-column: 1 / -1; margin: 0; }

/* ---------- 19. payments and sales ---------- */

.payments-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.payments-bar[hidden] { display: none; }
.payments-bar.is-action { border-color: var(--warning); background: var(--warning-bg); }
.payments-bar__body { flex: 1 1 280px; min-width: 0; }
.payments-bar__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  margin: 0 0 2px;
}
.payments-bar__title .badge { margin: 0; }
.payments-bar__text { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; max-width: 80ch; }
.payments-bar.is-action .payments-bar__text { color: var(--ink); }
.payments-bar .form-error:empty { display: none; }

/* shop settings: each group has a short intro on the left and its fields on the right */
.settings { padding-top: 0; padding-bottom: 0; }
.settings__group {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border);
}
.settings__heading { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.settings__intro p { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.settings__fields > .field:last-child { margin-bottom: 0; }
.settings__fields.field-row { row-gap: 0; }
.settings__fields.field-row > .field:nth-last-child(-n+2) { margin-bottom: 0; }
.settings__branding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: start;
}
.settings__branding .field { margin-bottom: 0; }
.settings__branding .dashboard__preview--logo { width: 120px; height: 120px; max-height: none; object-fit: cover; }
.settings__branding .dashboard__preview--banner { max-height: none; }
.settings__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-6) 0;
}
.settings__actions :is(.form-error, .form-message) { margin: 0; flex: 1 1 auto; }
.settings__actions :is(.form-error, .form-message):empty { display: none; }
.dashboard__close { margin-top: var(--space-4); max-width: none; text-align: right; }

.sales { margin-top: var(--space-10); }
.sales h3 { margin-bottom: var(--space-4); }
.sales__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.sales__stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.sales__stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.sales__stat-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sales__table-wrap,
.admin__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* edge fade hints there's more table to scroll to */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    linear-gradient(to right, rgba(16, 21, 27, 0.08), rgba(16, 21, 27, 0)) left center / 10px 100% no-repeat scroll,
    linear-gradient(to left, rgba(16, 21, 27, 0.08), rgba(16, 21, 27, 0)) right center / 10px 100% no-repeat scroll,
    var(--surface);
}

.sales__table,
.admin__table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
.sales__table { font-size: var(--text-sm); border: 0; }
.sales__table th, .sales__table td { padding-left: var(--space-3); padding-right: var(--space-3); }
.admin__table { font-size: var(--text-sm); }

.sales__table th, .sales__table td,
.admin__table th, .admin__table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.sales__table th, .sales__table td { vertical-align: top; }
.admin__table th, .admin__table td { vertical-align: middle; }

.sales__table th,
.admin__table th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background: var(--surface-sunken);
  border-bottom-color: var(--border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  white-space: nowrap;
}
.sales__table tbody tr:last-child td,
.admin__table tbody tr:last-child td { border-bottom: 0; }
.sales__table tbody tr:hover td,
.admin__table tbody tr:hover td { background: var(--surface-hover); }

.sales__table td:nth-child(n+3):nth-child(-n+6) { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sales__ship { white-space: pre-line; font-size: var(--text-xs); color: var(--ink-muted); }
.sales__table .is-refunded td { color: var(--ink-muted); text-decoration: line-through; }
.sales__table .is-refunded td:nth-child(2) { text-decoration: none; }

/* ---------- 20. admin panel ---------- */

.admin__tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin: var(--space-2) 0 var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.admin__tabs::-webkit-scrollbar { display: none; }
.admin__tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 10px var(--space-4);
  min-height: var(--tap);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.admin__tab:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.admin__tab.is-active,
.admin__tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }

.admin__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.admin__filters input[type="search"] { flex: 1 1 220px; }
.admin__filters input, .admin__filters select {
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--text-sm);
}
.admin__filters select { padding-right: 36px; }
.admin__filters label { font-size: var(--text-sm); color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.admin__price { width: 84px; }
.admin__count { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; }
.admin__table a { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.admin__table .is-refunded td { color: var(--ink-muted); }
.admin__num { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin__muted { font-size: var(--text-xs); color: var(--ink-muted); }
.admin__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin__thumb { width: 48px; height: 48px; background: var(--media-placeholder); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.admin__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin__remove { min-height: 36px; padding: 7px 8px; font: inherit; font-size: var(--text-sm); }
.admin__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  white-space: nowrap;
}
/* dot reinforces the label so status isn't communicated by tint alone */
.admin__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.admin__status--pending { background: var(--warning-bg); color: var(--warning); }
.admin__status--approved, .admin__status--active, .admin__status--paid { background: var(--success-bg); color: var(--success); }
.admin__status--rejected, .admin__status--suspended, .admin__status--removed, .admin__status--refunded { background: var(--danger-bg); color: var(--danger); }
.admin__pager { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); font-size: var(--text-sm); }
.admin__subhead { margin: var(--space-8) 0 10px; font-size: var(--text-xl); }

/* ---------- 21. utilities, states, PWA chrome ---------- */

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* skip link — becomes visible on keyboard focus */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--safe-top) - 100px);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--navy);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: calc(var(--safe-top) + var(--space-2)); }

/* loading placeholders: add .skeleton to any block while its data loads */
.skeleton {
  display: block;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton * { visibility: hidden; }
.skeleton--text { height: 0.9em; margin: 0.35em 0; max-width: 18ch; }
.skeleton--media { aspect-ratio: var(--card-media-ratio); border-radius: var(--radius-lg); }
@keyframes skeleton-pulse { 50% { opacity: 0.55; } }

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--blue-mid);
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Bottom navigation (PWA / phones). Markup:
   <nav class="bottom-nav" aria-label="Primary">
     <a class="bottom-nav__item" href="…" aria-current="page"><svg …/> <span>Label</span></a> …
   </nav> */
.bottom-nav { display: none; }
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-lg);
  padding: 6px 4px;
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--ink-muted);
  text-align: center;
}
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item[aria-current="page"],
.bottom-nav__item.is-active { color: var(--navy); font-weight: var(--weight-semibold); }
.bottom-nav__item:active { background: var(--surface-hover); }

/* Sticky action bar for the one primary action on a page (buy, save listing).
   Static on desktop; pinned to the bottom on phones. */
.sticky-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.sticky-actions .btn { flex: 1 1 auto; }

/* ---------- 21b. homepage hero additions ---------- */

/* The logo artwork sits on black, so it gets a black plate on light surfaces
   and blends straight into the navy header/footer (screen drops the black). */
/* Homepage hero: brand-navy backdrop with the logo (transparent PNG) clearly visible behind the content.
   The logo's white lettering only reads on a dark surface, so the hero switches to light-on-dark text. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 62% 45%, #1660C8 0%, #0B3A86 45%, #071F4A 100%);
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/logo-mark.webp") 62% 56% / min(1100px, 90%) auto no-repeat;
  opacity: 0.38;
  z-index: -1;
  pointer-events: none;
}
.hero h1.text-gradient {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 18px rgba(4, 18, 48, 0.55);
}
.hero .hero__sub { color: #DCE6F2; text-shadow: 0 1px 10px rgba(4, 18, 48, 0.6); }
.hero .btn--outline { background: rgba(7, 31, 74, 0.35); color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.hero .btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.hero :focus-visible { outline-color: #fff; }
.hero .cat-strip__item { color: #fff; }
.hero .cat-strip__icon { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.hero .cat-strip__item:hover .cat-strip__icon { background: rgba(255, 255, 255, 0.2); border-color: #fff; }
.hero .cat-strip__count { color: #C3CEDA; }
.hero .tag-stack .tag-card { color: var(--ink); }
@media (max-width: 860px) { .hero::before { background-position: center 330px; background-size: 115% auto; opacity: 0.32; } }

.wordmark--logo img { display: block; height: 48px; width: auto; mix-blend-mode: screen; }
.wordmark--footer { margin-bottom: var(--space-3); min-height: 0; }
.wordmark--footer img { height: 56px; }

/* 3-second headline: what the site is, before anything else */
.hero__headline { text-align: center; margin-bottom: var(--space-6); }
.hero__eyebrow { margin: 0 auto var(--space-2); max-width: none; color: var(--blue-bright); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.hero .hero__headline h1 {
  max-width: 30ch; margin: 0 auto; color: #fff;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(4, 18, 48, 0.55); text-wrap: balance;
}
.hero__lead { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.1; color: #fff; margin-bottom: var(--space-3); max-width: 18ch; text-shadow: 0 2px 18px rgba(4, 18, 48, 0.55); }
.hero__search input { font-size: var(--text-md); }

/* Newest listings: real items, laid out as a loose stack that never overlaps */
.tag-stack.tag-stack--live { height: auto; max-width: 440px; display: flex; flex-direction: column; gap: var(--space-4); }
.tag-stack--live .tag-card {
  position: relative;
  top: auto; left: auto; right: auto;
  width: 340px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tag-stack--live .tag-card--2 { margin-left: 22%; }
.tag-stack--live .tag-card--3 { margin-left: 6%; }
.tag-stack--live .tag-card:focus-visible { box-shadow: var(--shadow-md), 0 0 0 2px var(--blue-bright); }
.tag-stack--live .tag-card:active { border-color: var(--blue-mid); }
.tag-card__thumb {
  grid-row: 1 / span 3;
  width: 72px; height: 72px;
  border-radius: var(--radius);
  background: var(--media-placeholder);
  overflow: hidden;
}
.tag-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-stack--live .tag-card__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 18px; }
.tag-stack--live .tag-card__title { margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 21c. promote-your-store slider ---------- */

.promo { padding: var(--space-6) 0; }
main.section > .promo { padding: 0 0 var(--space-8); }
.promo__frame {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 0 0 var(--space-2);
  overflow: hidden;
}
/* Each slide is a full-width banner image (headline baked into the art) linking to its page. */
.promo__slide {
  position: relative;
  display: block;
  aspect-ratio: 1600 / 295;
  overflow: hidden;
  background: var(--blue-deep);
  animation: promo-in 300ms var(--ease);
}
.promo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.promo__cta {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-5);
  pointer-events: none;
}
.promo .btn--primary { background: #fff; color: var(--blue-deep); flex-shrink: 0; }
.promo__slide:hover .promo__cta { background: var(--blue-tint); }
.promo :focus-visible { outline-color: #fff; }
.promo__slide:focus-visible { outline-offset: -4px; }

.promo__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-3); }
.promo__arrow, .promo__pause {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
/* 44px hit area around the 36px visual */
.promo__arrow::after, .promo__pause::after { content: ""; position: absolute; inset: -4px; }
.promo__pause { font-size: 11px; margin-left: var(--space-2); }
.promo__arrow:hover, .promo__pause:hover { background: rgba(255, 255, 255, 0.14); }
.promo__arrow:active, .promo__pause:active { background: rgba(255, 255, 255, 0.24); }
.promo__dots { display: flex; gap: 0; }
.promo__dot {
  width: 32px; height: 44px;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.promo__dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.promo__dot[aria-current="true"]::before { width: 20px; border-radius: 4px; background: #fff; }

@keyframes promo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Phones and tablets: show the left 62% of the banner (where the headline is) a bit taller. */
@media (max-width: 860px) {
  .promo__slide { aspect-ratio: 992 / 295; }
  .promo__slide--andys .promo__img { object-position: 35% center; }
  .promo__cta { display: none; }
}

/* ---------- 21d. buyer feedback ---------- */

.feedback { border-top: 1px solid var(--border); }
.feedback__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.feedback__summary { color: var(--ink-muted); font-size: var(--text-sm); }
.stars { color: var(--star); letter-spacing: 1px; }
.feedback__form { max-width: 560px; margin-bottom: var(--space-8); }
.feedback__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: var(--container-prose); border-top: 1px solid var(--border-subtle); }
.feedback__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: var(--space-5) 0;
}
.feedback__meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-1); }
.feedback__who { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink); }
.feedback__item-title { font-size: var(--text-sm); color: var(--ink-muted); }
.feedback__comment { margin: var(--space-2) 0 0; white-space: pre-line; }
.feedback__item .btn { margin-top: var(--space-3); }
.feedback__empty { color: var(--ink-muted); padding: var(--space-6) 0; }

.rating-chip { color: var(--ink); text-decoration: none; font-weight: var(--weight-semibold); }
.rating-chip span[aria-hidden] { color: var(--star); }
.rating-chip span:not([aria-hidden]) { font-weight: var(--weight-regular); color: var(--ink-muted); }

/* star picker: radios in reverse order so hovering a star lights it and the ones before it */
.star-input { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.star-input legend { font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: 6px; padding: 0; }
.star-input__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; position: relative; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  font-size: 34px;
  line-height: 1;
  color: var(--border-strong);
  cursor: pointer;
  padding: 2px;
}
.star-input input:checked ~ label,
.star-input label:hover, .star-input label:hover ~ label { color: var(--star); }
.star-input input:focus-visible + label { outline: 2px solid var(--blue-mid); border-radius: var(--radius-sm); }

/* Andy's logo in the Founding Shop panel: round artwork on white */
.flagship .flagship__mark--logo {
  width: 140px;
  height: 140px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.flagship__mark--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 860px) { .flagship .flagship__mark--logo { width: 112px; height: 112px; } }

/* ---------- 21e. collapsible filters & category photos ---------- */

/* Filters live in a <details>: always open beside results on desktop,
   a "Filters" button above results on phones (main.js sets open). */
.filters__toggle { list-style: none; }
.filters__toggle::-webkit-details-marker { display: none; }
.filters__toggle h4 { pointer-events: none; }

.cat-grid .cat-card--media {
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
.cat-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}
/* Absolutely placed so a tall photo can't stretch its card: every card keeps the same 4:3 frame. */
.cat-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

@media (max-width: 860px) {
  .filters:has(> .filters__panel) { padding: 0 var(--space-4); }
  .filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tap-lg);
    cursor: pointer;
  }
  .filters .filters__toggle h4 { margin: 0; padding: 0; border: 0; }
  .filters__toggle::after {
    content: "+";
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--ink-muted);
  }
  .filters__panel[open] > .filters__toggle::after { content: "\2212"; }
  .filters__panel[open] { padding-bottom: var(--space-4); }
  .filters__panel > .filter-group { margin-top: var(--space-4); }
}

/* ---------- 21f. storefront social row, admin notices ---------- */

.storefront-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
.storefront-social__links { display: flex; gap: var(--space-2); }
.storefront-social__links:empty { display: none; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease);
}
.social-link svg { width: 32px; height: 32px; display: block; }
.social-link:active { transform: scale(0.94); }

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.feedback-btn:hover { border-color: var(--navy); background: var(--blue-tint); }
.feedback-btn__score { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.feedback-btn__count { color: var(--ink-muted); }

/* five stars with a partial gold fill over grey */
.stars-meter {
  position: relative;
  display: inline-block;
  color: var(--border-strong);
  font-size: 1.05rem;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}
.stars-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--star);
}

.admin__notices {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-bright);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.admin__notices-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.admin__notices-title { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.admin__notices-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.admin__notice { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--ink-muted); }
.admin__notice.is-unread { color: var(--ink); font-weight: var(--weight-medium); }
.admin__notice-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-right: var(--space-2); }

.shop-links-fields { border: 0; padding: 0; margin: var(--space-2) 0 var(--space-4); }
.shop-links-fields legend { font-weight: var(--weight-semibold); padding: 0; margin-bottom: var(--space-1); }

/* ---------- 21g. branded page heroes (help, legal, tutorial, sell) ---------- */

/* Navy band with the logo as a faded watermark. */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: #fff;
  padding: var(--space-12) 0 var(--space-10);
  border-bottom: 4px solid var(--blue-bright);
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  right: -4%;
  width: min(72%, 960px);
  background: url("/img/logo-mark.webp") right center / contain no-repeat;
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
}
.page-hero__inner { display: flex; align-items: center; gap: var(--space-6); }
.page-hero__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--blue-bright);
}
.page-hero__svg { width: 36px; height: 36px; }
.page-hero .page-title { color: #fff; margin-bottom: var(--space-2); }
.page-hero .page-intro { color: var(--on-dark-muted); margin: 0; max-width: 60ch; }
.page-hero + main.section { padding-top: var(--space-10); }

/* small icon in front of section headings on those pages */
.h-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  vertical-align: -0.15em;
  color: var(--blue-mid);
}

@media (max-width: 520px) {
  .page-hero { padding: var(--space-8) 0 var(--space-6); }
  .page-hero::before { width: 120%; right: -30%; opacity: 0.12; }
  .page-hero__inner { gap: var(--space-4); align-items: flex-start; }
  .page-hero__icon { width: 52px; height: 52px; }
  .page-hero__svg { width: 26px; height: 26px; }
}

/* ---------- 21h. top-categories strip (homepage, under the header) ---------- */

.hero:has(> .cat-strip:not([hidden])) { padding-top: var(--space-10); }
.cat-strip { margin-bottom: var(--space-8); }
.cat-strip__list {
  list-style: none;
  margin: 0;
  padding: 2px 0 var(--space-2);
  display: flex;
  justify-content: safe center;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.cat-strip__list::-webkit-scrollbar { display: none; }
.cat-strip__list li { flex: 0 0 auto; scroll-snap-align: start; }
.cat-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 104px;
  padding: var(--space-2) 4px;
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.cat-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-strip__icon svg { width: 28px; height: 28px; }
.cat-strip__item:hover .cat-strip__icon { border-color: var(--navy); background: var(--blue-tint); }
.cat-strip__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.25; }
.cat-strip__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }

@media (max-width: 860px) {
  .cat-strip { margin-bottom: var(--space-8); padding-left: 0; padding-right: 0; }
  .cat-strip__list { justify-content: flex-start; padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-inline: var(--gutter); }
  .cat-strip__item { width: 84px; }
  .cat-strip__icon { width: 52px; height: 52px; }
  .cat-strip__icon svg { width: 24px; height: 24px; }
  .cat-strip__name { font-size: var(--text-xs); }
}

/* ---------- 21i. homepage colour flow, search, Browse Shops ---------- */

/* Homepage bands step from light to brand blue as you scroll: page grey, white, blue tint, then navy. */
.section--white { background: var(--surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.section--tint { background: var(--blue-tint); }

/* Search sits front and centre, right under the category icons. */
.hero__search { max-width: 720px; margin: 0 auto var(--space-10); }
.hero__search input { background-color: #fff; border-color: #fff; box-shadow: 0 6px 24px rgba(4, 18, 48, 0.35); }

/* Navy bands: one bright-blue top line. The logo watermark lives only in the
   Open your shop band, where it has an empty side to sit in. */
.section--dark { border-top: 4px solid var(--blue-bright); }

/* Footer is a deeper navy than the bands above it, so the two never read as a repeat. */
.site-footer { background: #071F4A; }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* Open your shop: bookends the hero with the same gradient. */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 78% 50%, #1660C8 0%, #0B3A86 50%, #0A3D8F 100%);
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  width: min(56%, 760px);
  aspect-ratio: 2 / 1;
  transform: translateY(-50%);
  background: url("/img/logo-mark.webp") center / contain no-repeat;
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
}
.cta-band__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.cta-band h2 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.cta-band__copy > p:first-of-type { font-size: var(--text-lg); color: #DCE6F2; max-width: 40ch; margin-bottom: var(--space-6); }
.cta-band .cta-split__fine {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 52ch;
  color: var(--on-dark-muted);
}
.cta-band .cta-split__fine a { color: #fff; }

/* The three fee facts, on a frosted panel over the logo. */
.cta-band__terms {
  margin: 0;
  padding: var(--space-2) var(--space-6);
  background: rgba(7, 31, 74, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cta-band__term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.cta-band__term + .cta-band__term { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.cta-band__term dt { color: var(--on-dark-muted); font-size: var(--text-sm); }
.cta-band__term dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.promo__frame { border-bottom: 4px solid var(--blue-bright); }

/* Browse Shops page */
.stores-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.stores-toolbar .results-count { margin: 0; }
.stores-sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.stores-sort select { min-height: 40px; }

@media (max-width: 860px) {
  .hero__search { margin-bottom: var(--space-8); }
  .cta-band__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .cta-band::before { display: none; }
}

/* ---------- 21j. sign-up choice, buyer orders, seller tracking ---------- */

/* Sign-up: buying and selling side by side, the current one highlighted. */
.account-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.account-choice__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.account-choice__option:hover { border-color: var(--blue-mid); }
.account-choice__option[aria-current="page"] { border: 2px solid var(--blue-deep); background: var(--blue-tint); padding: calc(var(--space-4) - 1px); }
.account-choice__icon { width: 28px; height: 28px; color: var(--blue-deep); margin-bottom: var(--space-1); }
.account-choice__title { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.account-choice__text { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.4; }

/* Buyer orders (account page and order-status page) */
.order-list { display: grid; gap: var(--space-3); }
.order-list[aria-busy="true"] { min-height: 80px; }
.order-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.order-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.order-card__status { font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info); }
.order-card__status.is-processing { background: var(--warning-bg); color: var(--warning); }
.order-card__status.is-shipped { background: var(--blue-tint-strong); color: var(--blue-deep); }
.order-card__status.is-delivered { background: var(--success-bg); color: var(--success); }
.order-card__status.is-refunded { background: var(--surface-sunken); color: var(--ink-muted); }
.order-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.order-card__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-1); }
.order-card__title a { color: inherit; }
.order-card p { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.order-card__shop, .order-card__ship { color: var(--ink-muted); }
.order-card__total { font-weight: var(--weight-semibold); }
.order-card__tracking a { font-family: var(--font-mono); text-decoration: underline; text-underline-offset: 2px; }

/* Seller dashboard: tracking entry in each sale row */
.sales__tracking-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-width: 150px; margin-top: var(--space-3); white-space: normal; }
.sales__tracking-form select, .sales__tracking-form input, .sales__tracking-form .btn { width: 100%; min-width: 0; min-height: 36px; font-size: var(--text-sm); }
.sales__tracking-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
.sale-actions { display: grid; gap: var(--space-2); margin-top: var(--space-3); width: 140px; white-space: normal; }
.sale-actions .btn { width: 100%; min-height: 36px; padding-left: var(--space-2); padding-right: var(--space-2); white-space: normal; }
.sale-actions .sales__tracking-form { min-width: 0; }
.sale-actions .sales__tracking-form { margin-top: 0; }
/* status pill under the item name */
.sale-stage { display: table; white-space: nowrap; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info); text-decoration: none; }
.sale-stage--processing { background: var(--warning-bg); color: var(--warning); }
.sale-stage--shipped { background: var(--blue-tint-strong); color: var(--blue-deep); }
.sale-stage--delivered { background: var(--success-bg); color: var(--success); }
.sale-stage--refunded { background: var(--surface-sunken); color: var(--ink-muted); }

@media (max-width: 420px) {
  .account-choice { grid-template-columns: 1fr; }
}

/* ---------- 21k. Google sign-in, email confirmation, seller purchases ---------- */

/* Google's own button style: white, grey border, the four-colour G. */
.btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-lg);
  background: #fff;
  color: #1F1F1F;
  border: 1px solid #747775;
  font-weight: var(--weight-medium);
}
.btn--google:hover { background: #F8FAFF; border-color: #1F1F1F; }
.btn--google__logo { width: 20px; height: 20px; flex-shrink: 0; }
.google-signin { margin-bottom: var(--space-5); }
.google-signin__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.google-signin__or::before, .google-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.verify-banner {
  padding: var(--space-4) var(--space-5);
  background: var(--warning-bg);
  border: 1px solid #E8D18F;
  border-radius: var(--radius-lg);
  color: var(--warning);
}
.verify-banner p { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink); }
.verify-banner .form-message { margin: var(--space-2) 0 0; }

.purchases { margin-top: var(--space-10); }
.order-list--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ==========================================================================
   22. responsive — desktop-first breakpoints, plus input-capability queries
   ========================================================================== */

/* hover effects only where a real pointer can hover — no "stuck" states on touch */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__image { border-color: var(--border-strong); }
  .product-card:hover .product-card__image img { transform: scale(1.025); }
  .product-card:hover a.product-card__title { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
  .cat-card:hover { border-color: var(--blue-mid); }
  .seller-card:hover { border-color: var(--border-strong); }
  .seller-card--pinned:hover { border-color: var(--blue-deep); }
  .tag-stack--live .tag-card:hover { border-color: var(--blue-mid); box-shadow: var(--shadow-lg); }
}

/* coarse pointers (phones, tablets): every control meets the 44px target */
@media (pointer: coarse) {
  :root { --control-h: 48px; }
  .btn--small { min-height: var(--tap); padding: 9px 16px; }
  .filter-option { min-height: var(--tap); }
  .filter-option input,
  .field-check input { width: 20px; height: 20px; }
  .price-inputs input,
  .admin__filters input,
  .admin__filters select,
  .admin__remove { min-height: var(--tap); }
  .item-gallery__thumb { width: 64px; height: 64px; }
  .footer-grid a { min-height: var(--tap); margin-bottom: 0; }
  .admin__tab { min-height: var(--tap-lg); }
}

@media (max-width: 1024px) {
  .product-layout { grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-8); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings__group { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--space-6); }
  .main-nav__links { gap: var(--space-5); }
  .item-layout { gap: var(--space-8); }
}

@media (max-width: 860px) {
  :root {
    --header-h: 56px;
    --section-y: 56px;
    --gutter: var(--space-5);
  }

  /* nav: full-width sheet under the header */
  .site-header__inner { position: relative; padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .wordmark--logo img { height: 40px; }
  .main-nav__links { display: none; }
  .main-nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--navy);
    padding: var(--space-2) max(var(--space-5), var(--safe-right)) calc(var(--space-5) + var(--safe-bottom)) max(var(--space-5), var(--safe-left));
    gap: 0;
    border-top: 1px solid var(--on-dark-border);
    box-shadow: 0 16px 32px rgba(10, 27, 60, 0.3);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h) - var(--safe-top));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav__links.is-open li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .main-nav__links.is-open li:nth-last-child(-n+2) { margin-left: 0; border-bottom: 0; padding-top: var(--space-3); }
  .main-nav__links.is-open a:not(.btn) { display: flex; width: 100%; min-height: var(--tap-lg); font-size: var(--text-md); }
  .main-nav__links.is-open a:not(.btn):active { color: #fff; background: rgba(255, 255, 255, 0.06); }
  .main-nav__links.is-open a:not(.btn)::after { left: -20px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; transform: scaleY(0); }
  .main-nav__links.is-open a.is-active:not(.btn)::after,
  .main-nav__links.is-open a[aria-current="page"]:not(.btn)::after { transform: scaleY(1); }
  .main-nav__links.is-open .btn { width: 100%; min-height: var(--tap-lg); }
  .nav-toggle { display: inline-flex; }

  /* bottom nav takes over primary navigation when present */
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottom-nav);
    min-height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    background: var(--surface);
    box-shadow: var(--shadow-overlay);
  }
  body:has(.bottom-nav) { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); }
  body:has(.bottom-nav) .site-footer { padding-bottom: var(--space-8); }

  /* sticky primary action pinned above the bottom edge (and bottom nav) */
  .sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky-action);
    margin: var(--space-4) calc(-1 * var(--gutter)) 0;
    padding: var(--space-3) max(var(--gutter), var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
    background: var(--surface);
    box-shadow: var(--shadow-overlay);
  }
  body:has(.bottom-nav) .sticky-actions {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--space-3);
  }
  .sticky-actions .btn { min-height: var(--tap-lg); }

  /* layout */
  .hero { padding: var(--space-12) 0 var(--space-10); }
  .cta-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .tag-stack { height: 300px; margin-top: var(--space-2); }
  .flagship { grid-template-columns: 1fr; text-align: left; padding: var(--space-6); gap: var(--space-4); }
  .flagship__mark { width: 64px; height: 64px; font-size: 1.375rem; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .seller-grid { grid-template-columns: 1fr; }
  .signup-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .settings__group { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; }
  .settings__branding { grid-template-columns: 1fr; }
  .item-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .item-gallery { position: static; }

  /* product page: gallery runs edge to edge, thumbs become a swipe row */
  .item-gallery__main {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    aspect-ratio: 1 / 1;
    max-height: 70vh;
    max-height: 70svh;
    width: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .item-gallery__thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .item-gallery__thumbs::-webkit-scrollbar { display: none; }
  .item-gallery__thumb { scroll-snap-align: start; }

  /* browse: filters become a compact panel above results; options turn into chips */
  .product-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .filters {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .filters > h4,
  .filters > .btn,
  .filters > button,
  .filters > form { grid-column: 1 / -1; }
  .filters > h4 { margin-bottom: 0; padding-bottom: var(--space-2); }
  .filters .filter-group { margin-bottom: 0; }
  .filter-group:has(> .filter-option) { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .filter-group:has(> .filter-option) > .filter-group__title { flex: 1 0 100%; margin-bottom: 0; }
  .filter-group > .filter-option {
    margin: 0;
    min-height: 40px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .filter-group > .filter-option:has(input:checked) {
    background: var(--blue-tint);
    border-color: var(--navy);
    color: var(--navy);
  }

  .product-grid,
  .product-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }

  /* featured rows become a swipeable shelf instead of a stacked grid */
  .product-grid--featured {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-2);
    scroll-padding-inline: var(--gutter);
  }
  .product-grid--featured::-webkit-scrollbar { display: none; }
  .product-grid--featured > * { scroll-snap-align: start; }

  .admin__filters { padding: var(--space-2); }
}

@media (max-width: 520px) {
  :root {
    --gutter: var(--space-4);
    --section-y: var(--space-10);
  }

  .section--tight { padding: var(--space-8) 0; }
  .hero { padding: var(--space-8) 0; }
  .hero__sub { font-size: var(--text-md); margin-bottom: var(--space-6); }
  .hero__ctas .btn { flex: 1 1 100%; min-height: var(--tap-lg); }

  /* hero tag stack: keep cards inside the viewport */
  .tag-stack { height: 270px; max-width: 100%; }
  .tag-card { width: 220px; max-width: 72%; padding: 14px; }
  .tag-card--1 { left: 0; }
  .tag-card--2 { top: 95px; left: auto; right: 0; }
  .tag-card--3 { top: 190px; left: 4%; }
  .tag-stack--live .tag-card { width: 100%; }
  .tag-stack--live .tag-card--2, .tag-stack--live .tag-card--3 { margin-left: 0; }

  .flagship { padding: var(--space-5); }
  .form-card { padding: var(--space-5); }
  .auth-layout .form-card { padding: var(--space-5); }
  .settings { padding-top: 0; padding-bottom: 0; }
  .settings__fields.field-row { grid-template-columns: 1fr; }
  .settings__fields.field-row > .field:nth-last-child(2) { margin-bottom: var(--space-5); }
  .settings__actions .btn { width: 100%; min-height: var(--tap-lg); }
  .payments-bar .btn { width: 100%; }
  .dashboard__tabs .admin__tab { padding-left: var(--space-2); padding-right: var(--space-2); }

  .cat-card { min-height: 64px; padding: var(--space-3) var(--space-4); }
  .cat-card__name { font-size: var(--text-base); }

  /* 2-up product grid stays on phones — it's how people scan a marketplace */
  .product-grid { gap: var(--space-5) var(--space-3); }
  .product-grid--featured { grid-auto-columns: 46%; }
  .product-card__body { padding-top: var(--space-2); }
  .product-card__title { font-size: var(--text-sm); }
  .product-card__price { font-size: var(--text-md); }
  .product-card__actions { flex-direction: column; }
  .product-card__actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  .seller-card { padding: var(--space-4); gap: var(--space-3); }
  .sitemap { grid-template-columns: 1fr 1fr; }
  .support-form .field-row { grid-template-columns: 1fr; }
  .storefront-head__bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-5); }
  .storefront-logo { width: 88px; height: 88px; margin-top: -40px; font-size: 1.75rem; border-width: 3px; }
  .storefront-head__text { padding-top: 0; }

  /* forms: 16px prevents iOS zoom-on-focus */
  .field input, .field textarea, .field select,
  .search-bar input, .price-inputs input,
  .admin__filters input, .admin__filters select { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field .field-check--inline { margin-top: 0; }
  .search-bar { flex-wrap: nowrap; }
  .search-bar .btn { flex: 0 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
  .listing-editor__actions .btn { flex: 1 1 auto; min-height: var(--tap-lg); }

  /* allow long button labels to wrap instead of overflowing */
  .btn { white-space: normal; }

  .item-info__title { font-size: var(--text-2xl); }
  .item-info__price { font-size: 1.625rem; }
  .ai-helper { grid-template-columns: 1fr; }
  .ai-helper .btn { width: 100%; }
  .dashboard__head { flex-direction: column; }
  .dashboard__head .btn { width: 100%; }
  .footer-bottom { flex-direction: column; }

  .admin__filters { flex-direction: column; align-items: stretch; }
  .admin__filters input[type="search"] { flex-basis: auto; }
  .admin__filters label { justify-content: space-between; }

  .promo__frame { border-radius: var(--radius); }
}

@media (min-width: 521px) and (max-width: 860px) {

}

@media (max-width: 360px) {
  .cat-grid { grid-template-columns: 1fr; }
  .product-grid--featured { grid-auto-columns: 62%; }
  .search-bar { flex-wrap: wrap; }
  .search-bar .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   22. Andy's Equipment Exchange — his own website (header, footer, landing)
   Navy and electric blue from his logo, brushed-steel greys, a wide type.
   ========================================================================== */
.andy-site {
  --andy-navy: #0B1F45;
  --andy-navy-2: #12306A;
  --andy-blue: #1673E6;
  --andy-blue-hover: #0F5FC4;
  --andy-sky: #4FB3FF;
  --andy-steel: #E9EDF2;
  --andy-display: 'Archivo', 'Arial Narrow', sans-serif;
  background: var(--andy-steel);
}
.andy-site .btn--primary { background: var(--andy-blue); border-color: var(--andy-blue); }
.andy-site .btn--primary:hover { background: var(--andy-blue-hover); border-color: var(--andy-blue-hover); }
.andy-icon { width: 16px; height: 16px; flex: none; }

/* top bar */
.andy-topbar { background: var(--andy-navy); color: var(--on-dark-muted); font-size: var(--text-sm); }
.andy-topbar__inner { display: flex; align-items: center; gap: var(--space-6); min-height: 36px; }
.andy-topbar__inner > * { display: inline-flex; align-items: center; gap: var(--space-2); }
.andy-topbar .andy-icon { color: var(--andy-sky); }
.andy-topbar__end { margin-left: auto; gap: var(--space-4) !important; }
.andy-topbar__social { display: flex; gap: var(--space-2); }
.andy-topbar__social .social-link { width: 30px; height: 30px; }
.andy-topbar__social .social-link svg { width: 20px; height: 20px; }
.andy-topbar__inner > span { white-space: nowrap; }
.andy-topbar__phone { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.andy-topbar__phone:hover { color: var(--andy-sky); }

/* header */
.andy-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-header, 50); }
.andy-header__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); }
.andy-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--andy-navy); flex: none; }
.andy-brand img { width: 64px; height: 64px; }
.andy-brand__name {
  display: flex; flex-direction: column;
  font-family: var(--andy-display); font-stretch: 125%; font-weight: 800;
  font-size: 1.625rem; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em;
}
.andy-brand__name span { font-stretch: 112%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--andy-blue); margin-top: 4px; }
.andy-search { flex: 1; display: flex; max-width: 620px; margin-inline: auto; }
.andy-search input {
  flex: 1; min-width: 0; height: 46px; padding: 0 var(--space-4);
  border: 2px solid var(--andy-navy); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  font: inherit; background: #fff;
}
.andy-search input:focus { outline: none; border-color: var(--andy-blue); }
.andy-search button {
  width: 54px; border: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--andy-navy); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.andy-search button:hover { background: var(--andy-blue); }
.andy-search button .andy-icon { width: 20px; height: 20px; }
.andy-header__actions { display: flex; gap: var(--space-5); flex: none; }
.andy-header__actions a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--text-xs); font-weight: 600; color: var(--andy-navy); text-decoration: none;
}
.andy-header__actions a:hover { color: var(--andy-blue); }
.andy-header__actions .andy-icon { width: 22px; height: 22px; }

.andy-nav { background: var(--andy-navy-2); }
.andy-nav__list { display: flex; list-style: none; margin: 0 auto; padding-block: 0; overflow-x: auto; scrollbar-width: none; }
.andy-nav__list::-webkit-scrollbar { display: none; }
.andy-nav__list a {
  display: block; padding: var(--space-3) var(--space-4); white-space: nowrap;
  color: #fff; font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.andy-nav__list li:first-child a { padding-left: 0; }
.andy-nav__list a:hover { color: var(--andy-sky); }

/* hero: the first screen says what this is, what it costs to ship, and who to call */
.andy-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 10%, #1D4F9E 0%, var(--andy-navy) 60%); }
.andy-hero__bg { position: absolute; inset: 0; }
.andy-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.andy-hero--photo .andy-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 31, 69, 0.94) 0%, rgba(11, 31, 69, 0.8) 45%, rgba(11, 31, 69, 0.35) 100%); }
.andy-hero__inner { position: relative; padding-block: var(--space-16, 64px) var(--space-12); }
.andy-hero__eyebrow { color: var(--andy-sky); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.andy-hero__title {
  font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.02; letter-spacing: -0.02em;
  max-width: 18ch; margin-bottom: var(--space-4); color: #fff;
}
.andy-hero__sub { font-size: var(--text-lg); color: var(--on-dark-muted); max-width: 56ch; margin-bottom: var(--space-6); }
.andy-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.andy-btn-lg { min-height: 52px; padding-inline: var(--space-6); font-size: var(--text-base); }
.andy-hero__call { margin: var(--space-5) 0 0; color: var(--on-dark-muted); }
.andy-hero__call a { color: #fff; font-weight: 600; }

/* trust bar */
.andy-trust { background: #fff; border-bottom: 1px solid var(--border); }
.andy-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.andy-trust__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); }
.andy-trust__item + .andy-trust__item { border-left: 1px solid var(--border-subtle); }
.andy-trust__item:first-child { padding-left: 0; }
.andy-trust__icon { width: 32px; height: 32px; color: var(--andy-blue); flex: none; }
.andy-trust__item strong { display: block; color: var(--andy-navy); }
.andy-trust__item span { font-size: var(--text-sm); color: var(--ink-muted); }

/* sections */
.andy-section { padding-block: var(--space-12); }
.andy-section--white { background: #fff; }
.andy-title {
  font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -0.01em; color: var(--andy-navy);
  margin-bottom: var(--space-6);
}

/* category tiles */
.andy-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); }
.andy-cat {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--andy-navy);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.andy-cat:hover { border-color: var(--andy-blue); box-shadow: var(--shadow-md); }
.andy-cat__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #F7F9FC, #DDE4EC); }
/* Absolutely placed so a tall photo can't stretch its tile: every tile keeps the same 4:3 frame. */
.andy-cat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.andy-cat__icon { width: 56px; height: 56px; color: var(--andy-navy-2); stroke-width: 1.5; }
.andy-cat__name { padding: var(--space-3) var(--space-4) 0; font-weight: 700; }
.andy-cat__count { padding: 0 var(--space-4) var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }

/* catalog */
.andy-site #catalog { scroll-margin-top: 80px; } /* plus html scroll-padding: clears the sticky header and category bar */
.andy-catalog__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.andy-catalog__head .andy-title { margin-bottom: 0; }
.andy-catalog__search { display: flex; gap: var(--space-2); width: min(420px, 100%); }
.andy-catalog__search input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-input); border-radius: var(--radius); font: inherit; }

/* quote / contact */
.andy-contact { background: var(--andy-navy); color: var(--on-dark-muted); }
.andy-contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-10, 40px); align-items: start; }
.andy-contact .andy-title { color: #fff; }
.andy-contact__phone {
  display: inline-flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-6);
  font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; font-size: 1.75rem; color: #fff; text-decoration: none;
}
.andy-contact__phone .andy-icon { width: 26px; height: 26px; color: var(--andy-sky); }
.andy-contact__phone:hover { color: var(--andy-sky); }
.andy-contact__policies { list-style: none; padding: var(--space-4) 0 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.andy-contact__policies strong { color: #fff; }
.andy-contact p { color: var(--on-dark-muted); }
.andy-contact .form-card, .andy-contact .form-card p { color: var(--ink); }

/* reviews: Facebook recommendations in an auto-rotating carousel, then reviews from site orders */
.andy-reviews__head { text-align: center; }
.andy-kicker { margin: 0 auto var(--space-2); max-width: none; color: var(--andy-blue); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.andy-carousel { max-width: 880px; margin: 0 auto var(--space-12); }
.andy-carousel__viewport { overflow: hidden; border-radius: 16px; }
.andy-carousel__track { display: flex; list-style: none; margin: 0; padding: 0; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.andy-slide { flex: 0 0 100%; display: flex; }
.andy-slide figure {
  position: relative; flex: 1; margin: 0; padding: var(--space-12) var(--space-12) var(--space-10);
  background: linear-gradient(145deg, var(--andy-navy-2) 0%, var(--andy-navy) 70%); color: #fff;
  display: flex; flex-direction: column; justify-content: center; text-align: center; overflow: hidden;
}
.andy-slide figure::before {
  content: '\201C'; position: absolute; top: -0.12em; left: 50%; transform: translateX(-50%);
  font-family: Georgia, serif; font-size: 11rem; line-height: 1; color: var(--andy-sky); opacity: 0.18; pointer-events: none;
}
.andy-slide blockquote {
  position: relative; margin: 0 auto var(--space-8); max-width: 40em;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem); line-height: 1.55; color: #fff; text-wrap: pretty;
}
.andy-slide figcaption { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 auto; text-align: left; }
.andy-slide__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--andy-blue); color: #fff; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 0 0 3px rgba(79, 179, 255, 0.35);
}
.andy-slide figcaption strong { display: block; font-size: var(--text-lg); color: #fff; }
.andy-slide__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--on-dark-muted); }
.andy-slide__fb { width: 16px; height: 16px; flex: none; }
.andy-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); }
.andy-carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff;
  color: var(--andy-navy); font-size: 1.75rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px;
}
.andy-carousel__btn:hover { border-color: var(--andy-blue); color: var(--andy-blue); }
.andy-carousel__dots { display: flex; gap: 2px; }
.andy-carousel__dots button { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.andy-carousel__dots button::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.andy-carousel__dots button[aria-current="true"]::before { width: 24px; background: var(--andy-blue); }
@media (max-width: 600px) {
  .andy-slide figure { padding: var(--space-10) var(--space-5) var(--space-8); }
  .andy-slide figure::before { font-size: 8rem; }
  .andy-carousel__viewport { border-radius: 12px; }
}
.andy-subtitle { font-family: var(--font-body); text-transform: none; font-size: var(--text-lg); color: var(--andy-navy); margin: 0; }
.andy-feedback__head { padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

/* Facebook / Instagram links (contact section and footer) */
.andy-social { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.andy-social > span { font-size: var(--text-sm); font-weight: 600; color: #fff; }
.andy-social .social-link { display: inline-flex; }
.andy-social .social-link svg { width: 32px; height: 32px; }
.andy-social .social-link:hover { transform: translateY(-1px); }
.andy-social--footer { margin: var(--space-4) 0 0; }
.andy-social--footer .social-link { padding: 0 !important; }
.andy-social--footer .social-link svg { width: 28px; height: 28px; }

/* about */
.andy-about__grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-10, 40px); align-items: center; max-width: 960px; }
.andy-about__grid img { width: 220px; height: 220px; }
.andy-about p { color: var(--ink-muted); max-width: 65ch; }

/* landing: buyers guide promo */
.andy-section--tight { padding-block: 0 var(--space-12); }
.andy-guide-promo {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; overflow: hidden;
  background: var(--andy-navy); border-radius: 16px; text-decoration: none; color: var(--on-dark-muted);
  transition: box-shadow var(--dur) var(--ease);
}
.andy-guide-promo:hover { box-shadow: 0 12px 32px rgba(11, 31, 69, 0.28); }
.andy-guide-promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.andy-guide-promo__text { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-10); }
.andy-guide-promo .andy-kicker { margin: 0; color: var(--andy-sky); }
.andy-guide-promo strong { font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; color: #fff; }
.andy-guide-promo__cta { color: #fff; font-weight: 600; margin-top: var(--space-2); }
.andy-guide-promo:hover .andy-guide-promo__cta { color: var(--andy-sky); }

/* Andy's policy pages */
.andy-page-hero { padding-bottom: var(--space-8); }
.andy-page-hero .guide-hero__inner { max-width: 820px; }
.andy-page-hero .guide-hero__title { margin: var(--space-4) 0 0; }
.andy-policy { max-width: 820px; padding-block: var(--space-10) var(--space-16); }
.andy-policy__block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-5); scroll-margin-top: 170px; }
.andy-policy__block h2 { display: flex; align-items: center; gap: var(--space-3); font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none; color: var(--andy-navy); font-size: 1.5rem; margin-bottom: var(--space-4); }
.andy-policy__icon { width: 28px; height: 28px; color: var(--andy-blue); }
.andy-policy ul { margin: 0; padding-left: 1.25em; list-style: disc; display: grid; gap: var(--space-3); }
.andy-policy li { line-height: 1.65; color: #2A3440; }
.andy-policy li::marker { color: var(--andy-blue); }
.andy-policy strong { color: var(--andy-navy); }
.andy-policy a { color: var(--andy-blue); font-weight: 600; }
.andy-policy__note { color: var(--ink-muted); }
@media (max-width: 600px) { .andy-policy__block { padding: var(--space-5); } }

/* "FREE" in hero headlines: caps, a touch bigger, in the accent colour so it catches the eye */
.free-word { text-transform: uppercase; font-size: 1.12em; font-weight: 800; letter-spacing: 0.02em; color: var(--andy-sky, var(--blue-bright)); }
.hero .free-word { color: #fff; font-size: 1.15em; }
.andy-hero__sub .free-word, .hero__sub .free-word { color: #fff; }

/* Atosa Buyers Guide page */
.guide-hero { background: var(--andy-navy); color: #fff; padding: var(--space-8) 0 0; }
.guide-hero__inner { max-width: 1040px; }
.guide-hero__crumbs, .guide-hero__crumbs a { color: var(--on-dark-muted); }
.guide-hero .andy-kicker { margin: var(--space-6) 0 var(--space-2); color: var(--andy-sky); }
.guide-hero__title {
  font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none; color: #fff;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 26ch; margin-bottom: var(--space-8);
}
.guide-hero__media { margin: 0; border-radius: 16px 16px 0 0; overflow: hidden; }
.guide-hero__media img { display: block; width: 100%; height: auto; }

.guide-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12); align-items: start; }
.guide-toc { position: sticky; top: calc(var(--space-6) + 160px); }
.guide-toc summary { font-weight: 700; color: var(--andy-navy); cursor: pointer; list-style: none; margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs); }
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.guide-toc li a { display: block; padding: 6px 0 6px var(--space-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-muted); font-size: var(--text-sm); text-decoration: none; }
.guide-toc li a:hover { color: var(--andy-navy); }
.guide-toc li a[aria-current="true"] { color: var(--andy-blue); border-left-color: var(--andy-blue); font-weight: 600; }
.guide-toc__cta { margin-top: var(--space-6); padding: var(--space-5); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.guide-toc__cta p { font-size: var(--text-sm); color: var(--ink-muted); }
.guide-toc__cta a:not(.btn) { color: var(--andy-navy); font-weight: 700; white-space: nowrap; }

.guide-article { max-width: 760px; }
.guide-article p, .guide-article li { font-size: 1.0625rem; line-height: 1.7; color: #2A3440; max-width: 68ch; }
.guide-intro p:first-child { font-size: 1.25rem; color: var(--ink); }
.guide-section { padding-top: var(--space-10); scroll-margin-top: 170px; }
.guide-section h2 {
  font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); color: var(--andy-navy); letter-spacing: -0.01em;
  margin-bottom: var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--border);
}
.guide-article ul { list-style: disc; padding-left: 1.25em; margin: 0 0 1em; }
.guide-article ul li::marker { color: var(--andy-blue); }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.guide-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--andy-blue); border-radius: var(--radius-lg); padding: var(--space-5); }
.guide-card h3 { font-family: var(--font-body); text-transform: none; font-size: 1.125rem; color: var(--andy-navy); margin-bottom: var(--space-2); }
.guide-card p, .guide-card li { font-size: var(--text-base); line-height: 1.6; }
.guide-card p:last-child, .guide-card ul:last-child { margin-bottom: 0; }
.guide-faq { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.guide-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 var(--space-5); }
.guide-faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 700; color: var(--andy-navy); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; color: var(--andy-blue); font-size: 1.5rem; line-height: 1; }
.guide-faq details[open] summary::after { content: '\2212'; }
.guide-faq details > p { margin-top: 0; }
.guide-end { margin-top: var(--space-12); padding: var(--space-8); border-radius: 16px; background: linear-gradient(145deg, var(--andy-navy-2), var(--andy-navy)); color: var(--on-dark-muted); }
.guide-end h2 { font-family: var(--andy-display); font-stretch: 112%; font-weight: 800; text-transform: none; color: #fff; font-size: 1.75rem; margin-bottom: var(--space-2); }
.guide-end p { color: var(--on-dark-muted); }
.guide-end__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 960px) {
  .andy-guide-promo { grid-template-columns: 1fr; }
  .andy-guide-promo__text { padding: var(--space-6); }
  .guide-layout { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); }
  .guide-toc { position: static; }
  .guide-toc details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
  .guide-toc summary { margin: 0; display: flex; justify-content: space-between; }
  .guide-toc summary::after { content: '+'; color: var(--andy-blue); font-size: 1.25rem; line-height: 1; }
  .guide-toc details[open] summary { margin-bottom: var(--space-3); }
  .guide-toc details[open] summary::after { content: '\2212'; }
  .guide-toc__cta { display: none; }
  .guide-section { scroll-margin-top: var(--space-4); }
}
@media (max-width: 600px) {
  .guide-hero__media { border-radius: 10px 10px 0 0; }
  .guide-article p, .guide-article li { font-size: 1rem; }
  .guide-intro p:first-child { font-size: 1.125rem; }
  .guide-end { padding: var(--space-6); }
  .guide-end__ctas .btn { flex: 1 1 100%; }
}

/* footer */
.andy-footer { background: var(--andy-navy); color: var(--on-dark-muted); padding-top: var(--space-12); font-size: var(--text-sm); }
.andy-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-10, 40px); }
.andy-footer__grid a { display: block; color: var(--on-dark-muted); text-decoration: none; padding-block: 3px; }
.andy-footer__grid a:hover { color: #fff; }
.andy-footer__brand img { width: 96px; height: 96px; margin-bottom: var(--space-3); }
.andy-footer p { color: var(--on-dark-muted); }
.andy-footer__brand p { max-width: 34ch; }
.andy-footer__contact { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.andy-footer__contact .andy-icon { color: var(--andy-sky); }
.andy-footer__contact a { display: inline; padding: 0; color: #fff; font-weight: 600; }
.andy-footer__title { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs); color: #fff; margin-bottom: var(--space-3); }
.andy-footer__bottom {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-5) calc(var(--space-5) + var(--safe-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--text-xs);
}
.andy-footer__bottom a { color: var(--on-dark-muted); }

@media (max-width: 960px) {
  .andy-header__inner { flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  .andy-search { order: 3; flex-basis: 100%; max-width: none; }
  .andy-header__actions { margin-left: auto; }
  .andy-trust__grid { grid-template-columns: 1fr 1fr; }
  .andy-trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .andy-trust__item:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .andy-contact__grid { grid-template-columns: 1fr; }
  .andy-footer__grid { grid-template-columns: 1fr 1fr; }
  .andy-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .andy-topbar__hide-sm { display: none !important; }
  .andy-brand img { width: 48px; height: 48px; }
  .andy-brand__name { font-size: 1.25rem; }
  .andy-header { position: static; }
  .andy-site #catalog { scroll-margin-top: calc(var(--space-2) - var(--header-h)); }
  .andy-hero__inner { padding-block: var(--space-10, 40px) var(--space-8); }
  .andy-hero--photo .andy-hero__bg::after { background: rgba(11, 31, 69, 0.9); }
  .andy-topbar__inner { justify-content: center; }
  .andy-topbar__phone { display: none !important; }
  .andy-topbar__end { margin-left: 0; }
  .andy-hero__ctas .btn { flex: 1 1 100%; }
  .andy-trust__grid { grid-template-columns: 1fr; }
  .andy-trust__item { padding: var(--space-3) 0; border-left: 0 !important; }
  .andy-trust__item + .andy-trust__item { border-top: 1px solid var(--border-subtle); }
  .andy-cats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .andy-section { padding-block: var(--space-8); }
  .andy-about__grid { grid-template-columns: 1fr; justify-items: start; }
  .andy-about__grid img { width: 140px; height: 140px; }
}
@media (max-width: 400px) {
  .andy-brand { gap: var(--space-2); }
  .andy-brand img { width: 40px; height: 40px; }
  .andy-brand__name { font-size: 1.125rem; }
  .andy-brand__name span { font-size: 0.625rem; }
  .andy-header__actions { gap: var(--space-3); }
}

/* installed-PWA tweaks: no browser chrome above, so give the header room */
@media (display-mode: standalone) {
  html { overscroll-behavior-y: none; }
  .site-header { padding-top: max(var(--safe-top), 0px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .product-card:hover .product-card__image img,
  .btn:active:not(:disabled) { transform: none; }
  /* spinners still need to read as "busy" without motion */
  .btn.is-loading::after, .btn[aria-busy="true"]::after, .spinner { border-style: dotted; }
}

@media (forced-colors: active) {
  .btn, .seller-card, .cat-card, .filters, .form-card, .product-card__image, .bottom-nav, .sticky-actions { border: 1px solid CanvasText; }
  .admin__status::before { background: CanvasText; }
  .filter-group > .filter-option:has(input:checked) { outline: 2px solid Highlight; }
  .product-card:has(a.product-card__title:focus-visible) { outline-color: Highlight; }
}

@media print {
  .site-header, .site-footer, .bottom-nav, .sticky-actions, .filters, .promo, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .item-layout { grid-template-columns: 1fr 1fr; }
  .item-gallery { position: static; }
}

/* ==========================================================================
   23. cart — header link, buy box, cart page
   ========================================================================== */

.site-header .main-nav { margin-left: auto; }

.cart-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--on-dark-muted);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cart-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.cart-link svg { width: 24px; height: 24px; }
.cart-link__count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--blue-bright);
  color: var(--blue-deep);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
}
.cart-link__count[hidden] { display: none; }

.andy-header__actions .andy-header__cart { position: relative; }
.andy-header__cart .cart-link__count { top: -6px; right: -8px; background: var(--andy-blue); color: #fff; }

/* product page buy box */
.buy-box__qty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.buy-box__qty[hidden] { display: none; }
.buy-box__qty label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.buy-box__qty input {
  width: 84px;
  height: var(--tap);
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  color: var(--ink);
}
.buy-box__qty input:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
.buy-box__stock { font-size: var(--text-sm); color: var(--ink-muted); }
.buy-box .sticky-actions .btn { flex: 1 1 0; }
.buy-box__added a { font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }

/* cart page */
.cart-title { margin-bottom: var(--space-6); }
.cart-empty {
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cart-empty p { font-size: var(--text-lg); color: var(--ink-muted); margin: 0 0 var(--space-5); }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
}
.cart-shops { display: grid; gap: var(--space-5); }

.cart-shop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cart-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.cart-shop__name { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; }
.cart-shop__name a { color: inherit; }
.cart-shop__name a:hover { color: var(--blue-mid); }
.cart-shop__ship { font-size: var(--text-sm); color: var(--ink-muted); }

.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
}
.cart-item + .cart-item { border-top: 1px solid var(--border-subtle); }
.cart-item[aria-busy="true"] { opacity: 0.55; }
.cart-item__thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--surface-media);
  overflow: hidden;
}
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item.is-unavailable .cart-item__thumb img { filter: grayscale(1); opacity: 0.6; }
.cart-item__sku { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 2px; }
.cart-item__title { display: block; font-weight: var(--weight-semibold); color: var(--ink); line-height: 1.35; }
.cart-item__title:hover { color: var(--blue-mid); }
.cart-item__unit { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-muted); }
.cart-item__alert, .cart-item__notice { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cart-item__alert { color: var(--danger); }
.cart-item__notice { color: var(--warning); }

.cart-item__controls {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.cart-item__qty {
  height: var(--tap);
  min-width: 72px;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  background-color: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  color: var(--ink);
}
.cart-item__qty:focus { outline: none; border-color: var(--focus); box-shadow: var(--focus-ring); }
.cart-item__total {
  min-width: 96px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.cart-item__remove {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cart-item__remove:hover { color: var(--danger); }

.cart-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top) + var(--space-4));
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cart-summary__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }
.cart-summary__rows { margin: 0 0 var(--space-2); }
.cart-summary__rows div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; font-size: var(--text-sm); }
.cart-summary__rows dt { color: var(--ink-muted); }
.cart-summary__rows dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cart-summary__rows .cart-summary__total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.cart-summary__rows .cart-summary__total dt { color: var(--ink); }
.cart-summary__tax { font-size: var(--text-xs); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.cart-summary__note { font-size: var(--text-xs); color: var(--ink-muted); margin: var(--space-3) 0 0; }
.cart-summary__continue { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }

.andy-site .cart-summary__continue,
.andy-site .cart-shop__name a:hover,
.andy-site .cart-item__title:hover { color: var(--andy-blue); }

@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .cart-summary { position: static; }
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); padding: var(--space-4); }
  .cart-shop__head { padding: var(--space-3) var(--space-4); }
  .cart-item__controls {
    grid-column: 2;
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    width: 100%;
  }
  .cart-item__total { justify-self: end; grid-column: 3; grid-row: 1; }
  .cart-item__remove { grid-column: 2; grid-row: 1; min-height: var(--tap); }
}