/* ===== DESIGN TOKENS ===== */
:root {
  /* ── Page-chrome layers ─────────────────────────────────────────────────
     Windows are not on this scale. Every dialog, toast and popover lives in
     the browser's top layer, where z-index does not apply at all, so nothing
     here has to out-rank a window — only the rest of the page. The numbers
     this replaced (100000 for the header, 100100 for the skip link, 99999 for
     the entry screen) were an arms race against overlays that have since left
     the scale entirely; five steps is the whole of what is left. */
  --z-menu: 5;      /* a menu anchored to its own button */
  --z-savebar: 10;  /* a sticky bar inside a view, under the header */
  --z-header: 20;   /* the page header, over the view and its bars */
  --z-entry: 30;    /* the entry splash, over the header */
  --z-skip: 40;     /* the skip link, over everything on the page */

  /* One type scale for the whole app. Nothing people read is smaller than 12px;
     tests/test_type_scale.py fails on a literal font size outside it. */
  --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem;
  --fs-16: 1rem; --fs-17: 1.0625rem; --fs-20: 1.25rem; --fs-24: 1.5rem;
  --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem;
  --clay: #A0582A;  /* text and fills: 5.35:1 under white text, 5.1:1 on warm-white */
  --clay-soft: #C97D4E;  /* the old brand tone, for decoration only: icons, tints, rings */
  --clay-light: #E8B08A;
  --clay-dark: #874820;
  --earth: #7A5C10;
  --cream: #FAF7F2;
  --warm-white: #FDF9F4;
  --parchment: #EDE8DF;
  --charcoal: #1A1714;
  --ink: #2C2420;
  --stone: #6B6056;
  --mist: #736860;  /* 5.4:1 on white; was #9C9289 at 3:1 */

  --green: #2d6a4f;
  --green-light: #52B788;
  --amber: #D4A017;  /* fills and tints only */
  --amber-text: #8A6408;
  --red: #C0392B;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.18);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --focus-ring: 0 0 0 3px rgba(201,125,78,.28), 0 0 0 1.5px var(--clay);
  --surface: #fff;
  --border: var(--parchment);

  /* Colour roles. The light values are the old literals; the dark ones are in
     the :root[data-theme="dark"] block at the end of this sheet. */
  --text: var(--ink);
  --eyebrow-pill-span-text: var(--earth);
  --text-secondary: var(--stone);
  --text-muted: var(--mist);
  --accent-text: var(--clay);
  --accent-text-hover: var(--clay-dark);
  --text-strong: var(--charcoal);
  --nav-whatsapp-link-svg-text: #25d366;
  --nav-whatsapp-link-text: #128c4a;
  --nav-whatsapp-link-hover-text: #0f7a40;
  --span-span-text: var(--clay-light);
  --success: var(--green);
  --cart-remove-text-btn-text: #a53a2f;
  --cart-remove-text-btn-hover-text: #7f2c24;
  --warning: var(--amber-text);
  --vis-pct-full-text: #e74c3c;
  --cart-capacity-notice-warning-text: #8a5b00;
  --danger: var(--red);
  --form-hint-error-text: #b91c1c;
  --form-hint-ok-text: #15803d;
  --input-error-text: #dc2626;
  --input-ok-text: #16a34a;
  --loading-option-pro-span-text: var(--green-light);
  --auth-success-text: #27ae60;
  --account-invoice-paper-is-placeholder-text: #c4b9ad;
  --status-pending-text: #856404;
  --status-approved-text: #0f5132;
  --status-production-text: #9a4f12;
  --status-loaded-text: #5b2da0;
  --status-shipped-text: #0a58ca;
  --status-arrived-text: #116149;
  --status-declined-text: #842029;
  --deposit-badge-is-received-text: #1f5c3f;
  --order-invoice-status-open-text: #2f5d82;
  --order-invoice-status-part-text: #8a5a00;
  --hub-note-is-late-text: #b03a2e;
  --hub-new-text: #7a4220;
  --bg: var(--warm-white);
  --surface-sunken: var(--cream);
  --eyebrow-pill-bg: #f1e7db;
  --surface-muted: var(--parchment);
  --filter-switch-track-bg: #d9d0c6;
  --card-image-wrap-bg: #f7f7f7;
  --skeleton-bar-bg: #f2ede5;
  --skeleton-bar-bg-2: #e8e1d6;
  --input-error-bg: #fef6f6;
  --input-ok-bg: #f6fdf8;
  --auth-error-bg: #fff5f5;
  --auth-success-bg: #f0faf4;
  --btn-account-hover-bg: #ece7df;
  --pstat-accent-bg: #fef9f0;
  --pstat-green-bg: #f2faf5;
  --account-switch-track-bg: #e5ded4;
  --account-invoice-paper-bg: #fffefc;
  --contract-status-active-bg: #e7f5ec;
  --contract-status-pending-bg: #fdf3e3;
  --status-pending-bg: #fef3cd;
  --status-approved-bg: #d1e7dd;
  --status-production-bg: #fff0d8;
  --status-loaded-bg: #e8ddff;
  --status-shipped-bg: #cfe2ff;
  --status-arrived-bg: #d7f4ec;
  --status-declined-bg: #f8d7da;
  --mo-steps-i-bg: #f0d9d6;
  --deposit-badge-is-received-bg: #e3f1e8;
  --od-callout-bg: #fff8ef;
  --order-invoice-status-open-bg: #e7eef4;
  --order-invoice-status-part-bg: #fbf1d6;
  --invoice-modal-box-bg: #efeae2;
  --hub-dot-is-idle-bg: #c9bfb3;
  --hub-mark-bg: #f3eee6;
  --hub-new-bg: #fbeadf;
  --accent-border: var(--clay-light);
  --nav-orders-badge-border: var(--warm-white);
  --account-avatar-border: #f1e7db;
  --nav-whatsapp-link-border: #25d366;
  --filter-box-border: #d6cdc2;
  --auth-error-border: #ffcccc;
  --auth-success-border: #a8dab5;
  --account-ready-tick-border: #e5ded4;
  --header-border: #ddd5c9;
  --hub-todo-go-border: #e2d9cc;
  --hub-empty-border: #d9cfc2;
  --surface-alt-rgb: 250 247 242;
  --shade-rgb: 0 0 0;
  --surface-rgb: 255 255 255;
  --surface-alt-2-rgb: 253 249 244;
  --on-accent: #ffffff;
  --sf-head-fill: #2a201a;
  --cft-check-fill: var(--green-light);
  --cft-container-fill: #1c2b3a;
  --cft-container-fill-2: #243040;
  --btn-danger-hover-fill: #a93226;
  --profile-header-fill: #3a2e28;
  --sf-toast-warning-fill: #8b6914;
  --clay-soft-rgb: 201 125 78;
  --whatsapp-rgb: 37 211 102;
  --scrim-rgb: 26 20 16;
  --shadow-rgb: 0 0 0;
  --white-rgb: 255 255 255;
  --shadow-warm-rgb: 47 38 30;
  --clay-rgb: 160 88 42;
  --shadow-warm-2-rgb: 26 23 20;
  --ink-rgb: 44 36 32;
  --shadow-warm-3-rgb: 48 38 30;
  --danger-rgb: 165 58 47;
  --green-rgb: 45 106 79;
  --amber-rgb: 212 160 23;
  --danger-2-rgb: 231 76 60;
  --danger-3-rgb: 201 80 68;
  --shadow-warm-4-rgb: 45 41 35;
  --shadow-warm-5-rgb: 40 31 22;
  --red-rgb: 192 57 43;
  /* Set from scripts */
  --search-icon: #8B7355;
  --container-frame: #1C2B3A;
  --container-edge: #2E4560;
  --container-fitting: #3A5070;
  --container-inside: #f8f6f1;
  --container-overflow-rgb: 200 30 30;
  --meter-full: #e74c3c;
  --form-ok: #1e8e3e;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  /* No overflow here. overflow-x: hidden forces overflow-y to auto, which makes
     body a scroll container; position:sticky inside it then resolves against
     body's scrollport rather than the viewport, and body's scrollport never
     moves. That is why the header declared sticky and scrolled away anyway. The
     clip now lives on html, which is the element that actually scrolls. */
}
input, select, textarea, button { font-family: inherit; }
button, [role="button"], a, input, select, textarea {
  -webkit-tap-highlight-color: rgb(var(--clay-soft-rgb) / .18);
}
button:focus-visible,
[href]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.filter-opt:focus-visible,
.product-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  transform: translateY(-150%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-accent);
  padding: 10px 16px;
  font-size: var(--fs-13);
  font-weight: 800;
  transition: transform .18s ease;
}

/* The shadow only once it is on screen: parked above the page, its 32px blur
   reached down past the top edge as a grey smudge over the header. */
.skip-link:focus {
  transform: translateY(0);
  box-shadow: var(--shadow-lg);
}

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

/* ===== FACTORY DIRECTORY ===== */
.factory-directory-page {
  background: var(--surface-sunken);
}

/* Held hidden until the session check decides whether this visitor may see the
   directory at all — factory accounts are bounced to their own dashboard and
   must never catch a glimpse of the competitor list. */
.factory-directory-page.directory-gated {
  visibility: hidden;
}

/* ── Nav ─────────────────────────────────────────── */
.directory-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.directory-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.directory-logo-img {
  height: 30px;
  width: auto;
}

.directory-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Layout ──────────────────────────────────────── */
.factory-directory {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px 96px;
}

/* ── Header ──────────────────────────────────────── */
.directory-hero {
  margin-bottom: 40px;
  max-width: 760px;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--eyebrow-pill-bg);
  margin-bottom: 24px;
}

.eyebrow-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.eyebrow-pill span:last-child {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--eyebrow-pill-span-text);
  letter-spacing: .3px;
}

.directory-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -1px;
  color: var(--text);
  margin: 0 0 18px;
}

.directory-hero-sub {
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0;
}

/* ── Session pill + logout ───────────────────────── */
.directory-session-card {
  padding: 7px 15px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-align: right;
}

.directory-session-card strong {
  display: block;
  font-size: var(--fs-13);
  line-height: 1.2;
}

.directory-session-label {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .9px;
  line-height: 1.2;
  text-transform: uppercase;
}

.directory-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.directory-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent-border);
}

.directory-btn.ghost {
  background: transparent;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--accent-text);
}

/* ── Search toolbar ──────────────────────────────── */
.factory-directory-toolbar {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.directory-search {
  flex: 1;
  min-width: 220px;
  height: 52px;
  padding: 0 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 11px;
  transition: var(--transition);
}

.directory-search:focus-within {
  border-color: var(--accent-text);
  box-shadow: var(--focus-ring);
}

.directory-search svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.directory-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-15);
}

.directory-search input::placeholder {
  color: var(--text-muted);
}

.directory-count {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Factory cards ───────────────────────────────── */
.factory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.factory-card-link {
  display: block;
  border-radius: var(--radius-lg);
}

.factory-card {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--transition);
}

.factory-card-link:hover .factory-card {
  transform: translateY(-3px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-lg);
}

/* Logo banner — full branding, contained so it is never cropped */
.factory-card-logo {
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  letter-spacing: -.02em;
  font-weight: 800;
  font-size: var(--fs-40);
  overflow: hidden;
}

.factory-card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.factory-card > div:last-child {
  padding: 22px 24px 24px;
}

.factory-card h2 {
  font-size: var(--fs-20);
  color: var(--text);
  margin-bottom: 8px;
}

.factory-card p {
  color: var(--text-secondary);
  font-size: var(--fs-15);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.factory-card span {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--accent-text);
}

.directory-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-15);
}

.directory-empty {
  grid-column: 1 / -1;
  padding: 48px 32px;
  text-align: center;
  border: 1.5px dashed var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.directory-empty h2 {
  font-size: var(--fs-24);
  color: var(--text);
  margin-bottom: 8px;
}

.directory-empty p {
  color: var(--text-secondary);
  font-size: var(--fs-15);
  max-width: 420px;
  margin: 0 auto;
}

/* ── Footer ──────────────────────────────────────── */
.directory-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.directory-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 32px;
}

.directory-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.directory-footer-brand {
  max-width: 320px;
}

.directory-footer-brand .directory-logo-img {
  height: 26px;
  margin-bottom: 14px;
}

.directory-footer-tag {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-muted);
}

.directory-footer-nav {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.directory-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.directory-footer-col-title {
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

.directory-footer-col a {
  font-size: var(--fs-14);
  color: var(--text-secondary);
}

.directory-footer-col a:hover {
  color: var(--accent-text);
}

.directory-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.directory-footer-bottom > span {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.directory-footer-bottom-links {
  display: flex;
  gap: 20px;
}

.directory-footer-bottom-links a {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.directory-footer-bottom-links a:hover {
  color: var(--accent-text);
}

@media (max-width: 760px) {
  .directory-nav {
    padding: 18px 22px;
  }

  .factory-directory {
    padding: 24px 22px 72px;
  }

  .factory-directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .directory-count {
    white-space: normal;
  }

  .directory-footer-inner {
    padding: 44px 22px 28px;
  }

  .directory-footer-nav {
    gap: 32px;
  }
}

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

/* ===== VIEW SYSTEM ===== */
.view { display: none; }
.view.active { display: block; }

/* ===== HEADER ===== */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(var(--surface-alt-rgb) / .92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.factory-wordmark {
  min-width: 190px;
  text-decoration: none;
  color: var(--text);
}
.factory-wordmark:has(.factory-wordmark-mark.has-logo) {
  min-width: 0;
}
.factory-wordmark-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clay);
  color: var(--on-accent);
  font-size: var(--fs-20);
  font-weight: 700;
  box-shadow: 0 10px 24px rgb(var(--clay-soft-rgb) / .22);
  overflow: hidden;
}
.factory-wordmark-mark.has-logo {
  width: auto;
  height: 52px;
  max-width: 118px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
}
.factory-wordmark-mark img {
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain;
}
.factory-wordmark-name,
.factory-wordmark-sub {
  display: block;
}
.factory-wordmark-name {
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.factory-wordmark-sub {
  margin-top: 5px;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.factory-wordmark-mark.has-logo + .factory-wordmark-copy {
  display: block;
  min-width: max-content;
}
.factory-wordmark-mark.has-logo + .factory-wordmark-copy .factory-wordmark-name {
  display: none;
}
.factory-wordmark-mark.has-logo + .factory-wordmark-copy .factory-wordmark-sub {
  margin-top: 0;
  max-width: 88px;
  white-space: normal;
  line-height: 1.15;
  letter-spacing: .7px;
  color: var(--text-secondary);
}
.logo-icon { width: 36px; height: 36px; }
.logo-text {
  font-size: var(--fs-24); font-weight: 700;
  color: var(--text); letter-spacing: -0.3px;
}
.logo-amp { color: var(--accent-text); }

.header-search {
  flex: 1; max-width: 480px; min-width: 180px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-muted);
  border: 1.5px solid transparent;
  border-radius: 50px; padding: 0 16px; height: 40px;
  transition: var(--transition);
}
.header-search:focus-within {
  border-color: var(--accent-text);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .12);
}
.header-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.header-search input {
  flex: 1; align-self: stretch; min-width: 0; border: none; background: transparent;
  font-size: var(--fs-14); color: var(--text); outline: none;
  -webkit-appearance: none; appearance: none;
}
.header-search input::-webkit-search-decoration,
.header-search input::-webkit-search-cancel-button,
.header-search input::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.header-search input::placeholder { color: var(--text-muted); }

/* ── HEADER ──
   Three zones on one baseline: brand, search, actions. Every control in the
   action zone is 40px tall and sits on the same centre line, with 10px between
   them and a wider 20px gap where the zones meet, so the grouping reads without
   a divider. The container is the only filled button in the bar. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.header-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.header-link:hover { background: rgb(var(--clay-soft-rgb) / .08); color: var(--accent-text-hover); }
.header-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--on-accent);
  font-size: var(--fs-14);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { background: var(--ink); }

.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition, .18s ease);
}
.header-icon-btn:hover { border-color: var(--accent-text); color: var(--accent-text-hover); }
.header-icon-btn svg { width: 18px; height: 18px; display: block; }
.header-icon-btn .nav-orders-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--nav-orders-badge-border);
  background: var(--red);
  color: var(--on-accent);
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* The account button and its card. The button is the avatar alone — the name
   is on the card, one click away — and the card opens like an account card in
   a mail app: who is signed in on top, My orders and Messages as two tiles,
   everything rarer as rows underneath. */
.account-wrap { position: relative; flex: 0 0 auto; }
.account-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.account-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--clay-light);
  color: var(--charcoal);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .02em;
  transition: box-shadow .18s ease;
}
.account-btn:hover .account-avatar,
.account-btn[aria-expanded="true"] .account-avatar { box-shadow: 0 0 0 3px var(--account-avatar-border), 0 0 0 4px var(--accent-border); }
.account-chev { width: 12px; height: 12px; color: var(--text-muted); flex: 0 0 auto; }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  /* Scoped: the header is a stacking context, so this only has to beat the
     header's own children, not anything on the page. */
  z-index: var(--z-menu);
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  animation: account-card-in .16s ease-out;
}
@keyframes account-card-in { from { opacity: .4; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .account-menu { animation: none; } }
.account-menu[hidden] { display: none; }
.account-menu-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px 16px;
  margin-bottom: 8px;
  background: var(--surface-sunken);
  border-radius: 14px;
}
.account-card-email { font-size: var(--fs-12); color: var(--text-secondary); word-break: break-all; }
.account-card-avatar {
  width: 64px;
  height: 64px;
  margin: 10px 0 8px;
  border-radius: 50%;
  background: var(--clay-light);
  color: var(--charcoal);
  display: grid;
  place-items: center;
  font-size: var(--fs-20);
  font-weight: 700;
}
.account-card-hello { font-size: var(--fs-20); color: var(--text-strong); }
.account-card-company { font-size: var(--fs-12); color: var(--text-muted); margin: 2px 0 12px; }
.account-card-company:empty { display: none; }
/* Scoped through .header-nav so these beat the bar's own link styles, which sit
   later in the file and would otherwise repad every row. */
.header-nav .account-menu a,
.header-nav .account-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 500;
  font-family: inherit;
  /* A button and an anchor resolve different line boxes from the same padding,
     which left Log out five pixels shorter than every row above it. */
  line-height: 1.45;
  min-height: 40px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.header-nav .account-menu a:hover,
.header-nav .account-menu button:hover { background: var(--surface-sunken); color: var(--text); }
.account-menu svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); }
/* WhatsApp is a pill in its own brand green everywhere else; inside the menu it
   is a row like the others, keeping only the green mark. The legacy rules carry
   !important, so these have to as well. */
.header-nav .account-menu .nav-whatsapp-link {
  height: auto;
  font-weight: 500 !important;
  gap: 10px;
  padding: 9px 11px;
  justify-content: flex-start;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text) !important;
}
.header-nav .account-menu .nav-whatsapp-link svg { width: 16px; height: 16px; color: var(--nav-whatsapp-link-svg-text); }
.header-nav .account-menu .nav-whatsapp-link:hover {
  background: var(--surface-sunken) !important;
  color: var(--text) !important;
}
.header-nav .account-menu .account-card-manage {
  width: auto;
  min-height: 0;
  height: 32px;
  padding: 0 14px;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-13);
  font-weight: 600;
}
.header-nav .account-menu .account-card-manage:hover { background: var(--surface); border-color: var(--accent-text); }
.account-card-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.account-card-tiles:not(:has(.account-card-tile:not([style*="none"]))) { display: none; }
.header-nav .account-menu .account-card-tile {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.header-nav .account-menu .account-card-tile:hover { background: var(--surface); border-color: var(--accent-text); }
.account-menu .account-card-tile svg { width: 18px; height: 18px; color: var(--accent-text); margin-bottom: 4px; }
.account-card-tile b { font-size: var(--fs-14); color: var(--text-strong); }
.account-card-tile span { font-size: var(--fs-12); font-weight: 600; color: var(--accent-text-hover); }
.account-menu-sep { height: 1px; background: var(--surface-muted); margin: 4px 0; }
.account-menu-quiet { color: var(--text-secondary); }
.signup-terms { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 16px; font-size: var(--fs-13); line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.signup-terms input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent-text); }
.signup-terms a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Privacy, Terms and Cookie settings: one quiet line under Log out, not three
   more full rows. Scoped like the rows above so their padding does not apply. */
.header-nav .account-menu .account-menu-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
  padding: 8px 11px 4px;
  border-top: 1px solid var(--border);
}
.header-nav .account-menu .account-menu-legal a,
.header-nav .account-menu .account-menu-legal button {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
  background: none;
}
.header-nav .account-menu .account-menu-legal a:hover,
.header-nav .account-menu .account-menu-legal button:hover {
  background: none;
  color: var(--text);
  text-decoration: underline;
}

/* The container: the one filled control in the bar, carrying how full it is. */
.cart-btn .cart-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  min-width: 0;
}
.cart-btn .cart-label { font-size: var(--fs-14); font-weight: 600; }
.cart-btn .cart-fill { font-size: var(--fs-12); font-weight: 500; opacity: .88; white-space: nowrap; }
.header-user-profile {
  align-items: center;
  gap: 10px;
  margin-left: 4px;
}
.account-icon {
  width: 16px;
  height: 16px;
}
.header-logout-btn {
  padding: 5px 14px;
  font-size: var(--fs-12);
}
/* Every anchor left in the bar carries its own class, so there is no blanket
   rule here. The one this replaced was a leftover from the nine-link header and
   outranked .header-link and .header-cta on specificity: it painted the trade
   account button's text stone grey on near-black, squared off its pill and cut
   its padding from 18px to 12px. */
#nav-messages-link { align-items: center; gap: 7px; }
.nav-orders-badge {
  background: var(--clay); color: var(--on-accent);
  border-radius: 50px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 700; padding: 0 5px;
  line-height: 1;
}
.nav-whatsapp-link {
  display: inline-flex;
  height: 40px;
  padding: 0 16px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--nav-whatsapp-link-border);
  border-radius: 999px;
  color: var(--nav-whatsapp-link-text) !important;
  font-weight: 700 !important;
}
.nav-whatsapp-link svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.nav-whatsapp-link:hover {
  background: rgb(var(--whatsapp-rgb) / .12) !important;
  color: var(--nav-whatsapp-link-hover-text) !important;
}

.cart-btn {
  display: flex; align-items: center; gap: 10px;
  height: 40px;
  flex: 0 0 auto;
  background: var(--clay); color: var(--on-accent);
  border: none; border-radius: 50px;
  padding: 0 16px; cursor: pointer;
  font-weight: 600; font-size: var(--fs-14);
  transition: var(--transition);
  box-shadow: 0 2px 8px rgb(var(--clay-soft-rgb) / .35);
}
.cart-btn:hover { background: var(--clay-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgb(var(--clay-soft-rgb) / .4); }
.cart-btn svg { width: 18px; height: 18px; }
.cart-count {
  background: var(--ink); color: var(--on-accent);
  border-radius: 50px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-weight: 700; padding: 0 5px;
}
/* An author display beats the hidden attribute, so an empty container showed
   both "Empty" and a 0 badge saying the same thing twice. */
.cart-count[hidden] { display: none; }

/* ===== STOREFRONT HEADER ===== */
/* Who the factory is, in one short band over a photo, so the products start
   on the first screen instead of under a full-page picture. A dark fade from
   the left keeps the text readable whatever the photo. */
.sf-head {
  position: relative;
  color: var(--on-accent);
  background: var(--sf-head-fill) url('images/hero-pot-2.webp') center 68% / cover no-repeat;
  border-bottom: 1px solid var(--border);
}
.sf-head::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--scrim-rgb) / .86) 0%, rgb(var(--scrim-rgb) / .62) 42%, rgb(var(--scrim-rgb) / .12) 78%, rgb(var(--scrim-rgb) / .0) 100%);
}
.sf-head-inner {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 40px 32px;
  min-height: 260px;
}
.sf-head-logo {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: var(--radius); object-fit: contain;
  background: var(--surface); padding: 8px;
  box-shadow: 0 6px 20px rgb(var(--shadow-rgb) / .25);
}
.sf-head-logo[hidden] { display: none; }
.sf-head-text { min-width: 0; }
.sf-head-name {
  color: var(--on-accent);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15;
}
.sf-head-intro {
  margin-top: 6px; max-width: 620px;
  color: rgb(var(--white-rgb) / .84); font-size: var(--fs-16); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-head-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin-top: 12px; font-size: var(--fs-13); color: rgb(var(--white-rgb) / .74);
}
.sf-head-facts[hidden] { display: none; }
.sf-head-facts span + span::before { content: '·'; margin: 0 9px; color: var(--span-span-text); font-weight: 700; }
.sf-head-facts b { color: var(--on-accent); font-weight: 600; }
.sf-head-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sf-head-actions[hidden], .sf-head-actions .btn[hidden] { display: none; }
.sf-head-actions .btn { text-decoration: none; }
.sf-head-actions svg { width: 17px; height: 17px; flex-shrink: 0; }
/* The factory's own words arrive with its branding; until then the
   placeholder stays invisible but keeps its space, so nothing jumps. */
body:not(.factory-ready) .sf-head-name,
body:not(.factory-ready) .sf-head-intro {
  visibility: hidden;
}
/* Collection cards (renderStorefrontCollections): up to four cards over the
   bottom of the header band, which grows underneath them. Below 1100px they
   become one row that scrolls sideways, so the catalog stays close. */
.has-collections .sf-head-inner { padding-bottom: 104px; }
.sf-collections {
  position: relative; z-index: 2;
  max-width: 1440px; margin: -84px auto 0; padding: 0 32px;
  display: grid; grid-template-columns: repeat(var(--sfc-cards, 4), minmax(0, 1fr)); gap: 16px;
}
.sf-collections[hidden] { display: none; }
.sfc-card {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 44px rgb(var(--shadow-warm-rgb) / .1);
}
.sfc-title { font-size: var(--fs-17); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--text-strong); }
.sfc-sub { font-size: var(--fs-13); line-height: 1.4; color: var(--text-secondary); }
.sfc-tiles { display: grid; grid-template-columns: repeat(var(--sfc-cols, 2), minmax(0, 1fr)); gap: 14px 12px; margin: 12px 0 8px; }
.sfc-tile {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.sfc-photo {
  /* Square like every catalog photo and the placeholder, so a photo always
     fills its box: in a wider box the placeholder's grey background left
     white strips beside it, and cropping would cut most pots. */
  display: block; aspect-ratio: 1; margin-bottom: 5px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken);  /* a tint, not white, while the photo arrives */
}
.sfc-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.sfc-tile:hover .sfc-photo img { transform: scale(1.04); }
.sfc-tile:hover .sfc-name { color: var(--accent-text-hover); }
.sfc-tile:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: var(--radius-sm); }
.sfc-name { font-size: var(--fs-13); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfc-caption {
  font-size: var(--fs-12); line-height: 1.35; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfc-all {
  align-self: flex-start; margin-top: auto; padding: 6px 0;
  border: 0; background: none;
  color: var(--accent-text-hover); font: inherit; font-size: var(--fs-13); font-weight: 700; cursor: pointer;
}
.sfc-all:hover { text-decoration: underline; }
.results-collection-clear {
  margin-left: 8px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer;
}
.results-collection-clear:hover { border-color: var(--accent-text); color: var(--accent-text-hover); }
@media (max-width: 1100px) {
  .sf-collections {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: 6px;
  }
  .sf-collections::-webkit-scrollbar { display: none; }
  .sfc-card { flex: 0 0 300px; scroll-snap-align: start; }
  /* One swipeable row: every card back to 2×2. */
  .sfc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfc-tile:nth-child(n+5) { display: none; }
}
@media (max-width: 768px) {
  .has-collections .sf-head-inner { padding-bottom: 72px; }
  .sf-collections { margin-top: -56px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
  .sfc-card { flex-basis: min(280px, 82%); }
}
.owner-preview-banner {
  display: none;
  max-width: 680px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgb(var(--white-rgb) / .22);
  border-radius: var(--radius);
  background: rgb(var(--shadow-rgb) / .34);
  color: rgb(var(--white-rgb) / .88);
  backdrop-filter: blur(10px);
}
.owner-preview-banner.open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.owner-preview-banner strong {
  display: block;
  color: var(--on-accent);
  margin-bottom: 3px;
}
.owner-preview-banner span {
  font-size: var(--fs-14);
  line-height: 1.45;
}
.owner-preview-banner a {
  flex-shrink: 0;
  color: var(--on-accent);
  border: 1px solid rgb(var(--white-rgb) / .3);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: var(--fs-13);
  font-weight: 700;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: none; border-radius: 50px;
  font-weight: 600; font-size: var(--fs-14); cursor: pointer;
  min-height: 42px;
  transition: var(--transition); padding: 12px 26px; line-height: 1;
}
.btn-primary {
  background: var(--clay); color: var(--on-accent);
  box-shadow: 0 2px 12px rgb(var(--clay-soft-rgb) / .35);
}
.btn-primary:hover { background: var(--clay-dark); transform: translateY(-1px); box-shadow: 0 4px 18px rgb(var(--clay-soft-rgb) / .45); }
.btn-ghost { background: rgb(var(--white-rgb) / .12); color: var(--on-accent); border: 1.5px solid rgb(var(--white-rgb) / .25); }
.btn-ghost:hover { background: rgb(var(--white-rgb) / .2); }
.btn-outline-sm {
  background: transparent; color: var(--accent-text); border: 1.5px solid var(--accent-text);
  border-radius: 50px; padding: 7px 16px;
  font-size: var(--fs-13); font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.btn-outline-sm:hover { background: var(--clay); color: var(--on-accent); }
.btn-full { width: 100%; }
.btn:disabled,
.btn-primary:disabled,
.btn-outline-sm:disabled,
.directory-btn:disabled,
.cart-btn:disabled {
  opacity: .5;
  transform: none;
  box-shadow: none;
}

/* ===== CATALOG LAYOUT ===== */
.catalog-layout {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 280px 1fr;
  gap: 32px; padding: 28px 32px 40px;
}

.shop-inactive .catalog-layout {
  grid-template-columns: 1fr;
  padding-top: 18px;
}

.shop-inactive .filter-sidebar,
.shop-inactive .results-header {
  display: none;
}

/* ===== FILTER SIDEBAR ===== */
/* A <dialog> that is open but NOT modal on desktop, so it stays an ordinary
   column in the catalog grid; below 1024px it becomes a modal drawer instead
   (see the responsive block). Being one element in both modes keeps the filter
   controls, and their state, in one place.
   The UA gives a dialog a border, padding, a background and position:absolute,
   and hides it unless [open] — all of that has to be stated here, because the
   display below would otherwise show it even when closed.
   On desktop it is sticky, with its `top` moved by placeFilterColumn() so the
   panel scrolls with the page and stops when its end is in view: no inner
   scrollbar, one scroll for filters and products. */
.filter-sidebar {
  display: flex; flex-direction: column; gap: 0;
  position: sticky; top: 84px; align-self: start;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0; margin: 0;
  width: auto; max-width: none; max-height: none;
  background: var(--surface); color: inherit; overflow: clip;
  box-shadow: 0 12px 30px rgb(var(--shadow-warm-rgb) / .04);
}
.filter-sidebar:not([open]) { display: none; }
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}
.filter-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); font-weight: 700; color: var(--text); letter-spacing: -0.2px; }
.filter-count { background: var(--clay); color: var(--on-accent); font-size: var(--fs-12); font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.filter-count[hidden] { display: none; }
.filter-clear-btn {
  margin-left: auto; border: 0; background: none; padding: 0; min-height: 28px; cursor: pointer;
  color: var(--accent-text-hover); font-size: var(--fs-13); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--clay-rgb) / .35);
}
.filter-clear-btn:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
.filter-close-btn,
.filter-toggle-btn {
  border: 1.5px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text);
  border-radius: 999px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: var(--fs-13);
  font-weight: 800;
  cursor: pointer;
}
.filter-close-btn {
  display: none;
  width: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.filter-toggle-btn {
  display: none;
}
.filter-sidebar::backdrop { background: rgb(var(--shadow-warm-2-rgb) / .42); backdrop-filter: blur(4px); }
.filter-active { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--border); }
.filter-active[hidden] { display: none; }
.filter-chip-active {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 0; border-radius: 50px; padding: 4px 6px 4px 10px;
  background: rgb(var(--clay-soft-rgb) / .12); color: var(--accent-text-hover); font-size: var(--fs-12); font-weight: 600;
}
.filter-chip-active span { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--clay-rgb) / .15); font-size: var(--fs-12); }
.filter-chip-active:hover span { background: var(--clay); color: var(--on-accent); }
.filter-sections { padding: 2px 0 6px; }
.filter-section { border-bottom: 1px solid var(--border); }
.filter-section:last-child { border-bottom: 0; }
.filter-section > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: var(--fs-14); font-weight: 600; color: var(--text);
}
.filter-section > summary::-webkit-details-marker { display: none; }
.filter-section > summary::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); margin: -3px 3px 0 4px; transition: transform .15s;
}
.filter-section[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.filter-picked { margin-left: auto; font-size: var(--fs-12); font-weight: 600; color: var(--accent-text-hover); text-align: right; }
.filter-section-body { padding: 0 16px 14px; }
.filter-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; padding: 6px 4px; border-radius: var(--radius-sm);
  text-align: left; font-size: var(--fs-14); color: var(--text); cursor: pointer;
}
.filter-opt[hidden] { display: none; }
.filter-opt:hover:not(:disabled) { background: var(--surface-sunken); }
.filter-opt:disabled { opacity: .38; cursor: default; }
.filter-box { width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid var(--filter-box-border); background: var(--surface); display: grid; place-items: center; }
.filter-opt[aria-pressed="true"] .filter-box { background: var(--clay); border-color: var(--clay); }
.filter-opt[aria-pressed="true"] .filter-box::after { content: ''; width: 8px; height: 4px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg) translate(1px, -1px); }
.filter-opt-label { min-width: 0; }
.filter-opt-label .finish-code { color: var(--text-muted); font-weight: 600; }
.filter-opt-count { margin-left: auto; color: var(--text-muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.filter-swatch { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .12); }
.filter-opt[aria-pressed="true"] .filter-swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text); }
.filter-seg { display: flex; background: var(--surface-sunken); border: 1.5px solid var(--border); border-radius: 50px; padding: 3px; }
.filter-seg button { flex: 1; border: 0; background: none; border-radius: 50px; padding: 6px 4px; font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.filter-seg button small { font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.filter-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.filter-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.filter-size { border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 6px 4px; font-size: var(--fs-13); font-weight: 600; color: var(--text); text-align: center; cursor: pointer; }
.filter-size small { display: block; margin: 0; font-weight: 500; font-size: var(--fs-12); }
.filter-size:hover:not(:disabled) { border-color: var(--accent-border); }
.filter-size[aria-pressed="true"] { border-color: var(--accent-text); background: rgb(var(--clay-soft-rgb) / .12); color: var(--accent-text-hover); }
.filter-size:disabled { opacity: .35; cursor: default; }
.filter-search { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); border-radius: 50px; padding: 0 12px; margin-bottom: 6px; color: var(--text-muted); }
.filter-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.filter-search input { border: 0; outline: 0; background: none; padding: 7px 0; font-size: var(--fs-13); flex: 1; min-width: 0; color: var(--text); }
.filter-search:focus-within { border-color: var(--accent-text); }
.filter-none { margin: 6px 4px; font-size: var(--fs-13); color: var(--text-muted); }
.filter-none[hidden], .filter-more[hidden] { display: none; }
.filter-more { margin-top: 4px; border: 0; background: none; padding: 2px 4px; min-height: 28px; color: var(--accent-text-hover); font-size: var(--fs-13); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.price-hist { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 2px 2px 0; }
.price-hist i { flex: 1; min-height: 2px; background: var(--surface-muted); border-radius: 2px 2px 0 0; }
.price-hist i.on { background: var(--clay-light); }
.price-dual { position: relative; height: 24px; margin: 0 2px; }
.price-dual-track, .price-dual-fill { position: absolute; top: 10px; height: 4px; border-radius: 50px; }
.price-dual-track { left: 0; right: 0; background: var(--surface-muted); }
.price-dual-fill { background: var(--clay); }
.price-dual input[type="range"] { position: absolute; left: 0; right: 0; top: 2px; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; z-index: 2; }
.price-dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; background: var(--surface); border: 2px solid var(--accent-text); }
.price-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent-text); cursor: pointer; }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 8px; color: var(--text-muted); font-size: var(--fs-13); }
.price-inputs label { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--border); border-radius: 50px; padding: 0 12px; }
.price-inputs input { border: 0; outline: 0; width: 100%; padding: 6px 0; font-size: var(--fs-13); color: var(--text); background: none; }
.filter-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; padding: 4px; font-size: var(--fs-14); color: var(--text); text-align: left; cursor: pointer; }
.filter-switch small { display: block; color: var(--text-muted); font-size: var(--fs-12); }
.filter-switch-track { position: relative; width: 36px; height: 21px; flex-shrink: 0; border-radius: 999px; background: var(--filter-switch-track-bg); transition: background .15s; }
.filter-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: left .15s; }
.filter-switch[aria-pressed="true"] .filter-switch-track { background: var(--green); }
.filter-switch[aria-pressed="true"] .filter-switch-track::after { left: 17px; }
.filter-drawer-foot { display: none; }
.filter-toggle-count[hidden] { display: none; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 4px; background: var(--surface-muted); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--clay); cursor: pointer;
  box-shadow: 0 2px 6px rgb(var(--clay-soft-rgb) / .4);
}
/* ===== ADD-TO-CART FLYOUT =====
   Surfaced briefly on the right on every add: what just went in, what else is
   aboard, and the container load. Buyers pick many products in a row, so this
   reports progress without the cart taking over the screen. Hidden by default;
   showCartFillToast() drives it. */
/* These three live in the top layer via popover="manual" — the only way to sit
   above an open <dialog>, since no z-index can. The UA gives every popover a
   border, a centred margin and inset:0; all three position themselves, so the
   defaults have to go or they stretch to the viewport. */
.sf-toast, .cart-fill-toast, .api-busy-overlay {
  inset: auto; margin: 0; border: 0; width: auto; height: auto; overflow: visible;
}

.cart-fill-toast {
  position: fixed;
  top: 84px;
  right: 20px;
  width: 336px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 48px rgb(var(--ink-rgb) / .22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Off-screen and inert until shown, so it never eats clicks on the catalog. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(26px) scale(.97);
  transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1.2, .36, 1), visibility .32s;
}
.cart-fill-toast.is-visible {
  opacity: 1;
  visibility: visible;
  /* Clickable once shown — it carries a close button and a cart link. */
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.cft-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
}
.cft-head-title { font-size: var(--fs-15); font-weight: 700; color: var(--text); }
/* Ticks in once the card has landed, so the add reads as confirmed. */
.cft-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--green-light, var(--cft-check-fill)); color: var(--on-accent);
  transform: scale(0); transition: transform .3s cubic-bezier(.22, 1.4, .36, 1) .18s;
}
.cft-check svg { width: 11px; height: 11px; color: var(--on-accent); }
.cart-fill-toast.is-visible .cft-check { transform: scale(1); }
.cft-close {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-17); line-height: 1;
  padding: 2px 5px; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.cft-close:hover { color: var(--text); background: var(--surface-muted); }

/* The line that was just added — the only thing on the card given full weight. */
.cft-lead { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.cft-lead-text { min-width: 0; }
.cft-lead-name {
  font-size: var(--fs-14); font-weight: 700; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cft-lead-meta { font-size: var(--fs-12); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cft-thumb {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: var(--radius-sm); object-fit: cover;
  background: var(--surface-muted);
}

/* The rest of the container. Deliberately NOT greyed out — these are real
   lines of the same order, so they read at full contrast and are separated
   from the added line by size and weight only. */
.cft-rest {
  border-top: 1px dashed var(--border);
  padding: 4px 15px 10px;
}
.cft-rest:empty { display: none; }
.cft-rest-head {
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 0 4px;
}
.cft-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cft-line .cft-thumb { width: 30px; height: 30px; border-radius: 6px; }
.cft-line-name {
  flex: 1; min-width: 0;
  font-size: var(--fs-13); font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cft-line-qty {
  font-size: var(--fs-13); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cft-rest-more {
  padding: 7px 0 1px;
  font-size: var(--fs-12); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* The container widget, kept as it has always looked. */
.cft-container {
  margin: 12px 15px;
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--cft-container-fill), var(--cft-container-fill-2));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cft-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-13); font-weight: 600; color: rgb(var(--white-rgb) / .75);
  text-transform: uppercase; letter-spacing: 1px;
}
.cft-title svg { width: 20px; height: 14px; flex-shrink: 0; color: var(--accent-text); }
.cft-pct {
  margin-left: auto; font-size: var(--fs-13); font-weight: 700; color: var(--on-accent);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.cft-bar-wrap {
  position: relative; height: 8px; border-radius: 4px;
  background: rgb(var(--white-rgb) / .1); overflow: hidden;
}
/* The fill as it stood before this add. */
.cft-bar {
  position: absolute; inset: 0 auto 0 0;
  width: 0%; border-radius: 4px;
  background: var(--green-light);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
/* The slice this add contributed. Translucent so the fill colour beneath still
   shows through — it should read as a highlighted part of the load, not as a
   different substance sitting in the container. It pulses so the eye catches
   what just changed rather than only the end state. */
.cft-delta {
  position: absolute; top: 0; bottom: 0;
  left: 0; width: 0%;
  border-radius: 4px;
  background: rgb(var(--white-rgb) / .55);
  box-shadow: inset 0 0 0 1px rgb(var(--white-rgb) / .35);
  transition: width .55s cubic-bezier(.4, 0, .2, 1), left .55s cubic-bezier(.4, 0, .2, 1);
}
.cart-fill-toast.is-visible .cft-delta { animation: cftDeltaPulse 1.1s ease-in-out .5s 2; }
@keyframes cftDeltaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.cft-meta { font-size: var(--fs-12); color: rgb(var(--white-rgb) / .55); font-variant-numeric: tabular-nums; }

.cft-foot {
  padding: 12px 15px 15px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cft-sum {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-13); color: var(--text-secondary);
}
.cft-sum strong { font-size: var(--fs-16); color: var(--text); font-variant-numeric: tabular-nums; }
.cft-go {
  border: 0; border-radius: 999px;
  background: var(--clay); color: var(--on-accent);
  font-family: inherit; font-weight: 700; font-size: var(--fs-13);
  padding: 10px; cursor: pointer;
  transition: var(--transition);
}
.cft-go:hover { background: var(--clay-dark); }

@media (max-width: 768px) {
  /* Full width under the header rather than a card crowding the grid. The
     header is two rows on a phone too (10 + 48 + 10 + 40 + 10 and its border,
     119px), so 76px put the card over the search. */
  .cart-fill-toast { top: 130px; left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-fill-toast { transition: opacity .2s ease, visibility .2s; transform: none; }
  .cart-fill-toast.is-visible { transform: none; }
  .cft-bar, .cft-delta { transition: none; }
  .cart-fill-toast.is-visible .cft-delta { animation: none; }
  .cft-check { transition: none; transform: scale(1); }
}

/* ===== PRODUCT AREA ===== */
.results-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  gap: 14px;
}
.results-header span { font-size: var(--fs-14); color: var(--text-secondary); font-weight: 500; }
.catalog-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sort-select {
  background: var(--surface-sunken); border: 1.5px solid var(--border);
  border-radius: 50px; padding: 8px 16px;
  font-size: var(--fs-14); color: var(--text); outline: none; cursor: pointer;
  transition: var(--transition);
}
.sort-select:focus { border-color: var(--accent-text); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.product-grid.shop-unavailable-grid {
  display: block;
  border: 0;
}

/* Numbered pages under the grid, and a small one in the results bar. */
.catalog-pagination {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.catalog-pagination.visible { display: flex; }
.pager-info { font-size: var(--fs-14); color: var(--text-secondary); }
.pager-info strong { color: var(--text); }
.pager-buttons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination-btn {
  min-width: 40px; height: 40px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: 50px;
  background: var(--surface); color: var(--text-secondary);
  font-size: var(--fs-14); font-weight: 700; cursor: pointer; transition: var(--transition);
}
.pager-number { padding: 0 6px; }
.pagination-btn:hover:not(:disabled) { border-color: var(--accent-text); color: var(--accent-text-hover); }
.pagination-btn[aria-current="page"] { border-color: var(--clay); background: var(--clay); color: var(--on-accent); }
.pagination-btn:disabled { cursor: not-allowed; opacity: .45; }
.pager-gap { min-width: 22px; color: var(--text-muted); text-align: center; font-weight: 700; }
.pager-jump { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-secondary); }
.pager-jump input { width: 64px; border: 1.5px solid var(--border); border-radius: 50px; padding: 8px; font-size: var(--fs-14); text-align: center; color: var(--text); background: var(--surface); }
.mini-pager { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--border); border-radius: 50px; background: var(--surface); padding: 2px; font-size: var(--fs-13); }
.mini-pager[hidden], #perPageSelect[hidden] { display: none; }
.mini-pager button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; font-size: var(--fs-16); color: var(--text); cursor: pointer; }
.mini-pager button:hover:not(:disabled) { background: var(--surface-sunken); }
.mini-pager button:disabled { opacity: .35; cursor: default; }
.mini-pager span { padding: 0 6px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.shop-unavailable-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 54px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(var(--shadow-warm-3-rgb) / .08);
  text-align: center;
}

.shop-unavailable-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.shop-unavailable-panel h2 {
  color: var(--text);
  letter-spacing: -.02em;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  margin-bottom: 14px;
}

.shop-unavailable-panel p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--text-secondary);
  line-height: 1.65;
}

.shop-unavailable-note {
  margin-top: 18px !important;
}

.shop-unavailable-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 22px;
  border: 1.5px solid var(--nav-whatsapp-link-border);
  border-radius: 999px;
  color: var(--nav-whatsapp-link-text);
  background: rgb(var(--whatsapp-rgb) / .08);
  font-weight: 800;
  text-decoration: none;
  transition: var(--transition);
}

.shop-unavailable-whatsapp svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.shop-unavailable-whatsapp:hover {
  transform: translateY(-1px);
  background: rgb(var(--whatsapp-rgb) / .14);
}

/* ===== PRODUCT CARD (GUBI STYLE) ===== */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgb(var(--shadow-warm-rgb) / .04);
  cursor: pointer;
}

.card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--card-image-wrap-bg);
}

.product-card:hover {
  background: var(--surface);
  border-color: rgb(var(--clay-soft-rgb) / .38);
  z-index: 1;
  box-shadow: 0 18px 44px rgb(var(--shadow-warm-rgb) / .1);
  transform: translateY(-2px);
}

.product-card:focus-visible {
  outline: 3px solid rgb(var(--clay-soft-rgb) / .24);
  outline-offset: 3px;
}

/* Loading cards. The catalog fills in from fastest to slowest: these bars at
   first paint, then names, photos and sizes remembered from the last visit,
   then the live catalog with prices, stock and buttons (see app.js). */
.product-card.is-loading {
  cursor: default;
  pointer-events: none;
}

.product-card.is-loading .card-title-block {
  flex: 1;
}

.skeleton-bar,
.product-card.is-loading .card-image-wrap:empty {
  background: linear-gradient(90deg, var(--skeleton-bar-bg) 30%, var(--skeleton-bar-bg-2) 50%, var(--skeleton-bar-bg) 70%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-bar {
  display: block;
  height: 12px;
  border-radius: 999px;
}

.skeleton-name { width: 72%; height: 17px; margin-top: 2px; }
.skeleton-code { width: 64px; height: 20px; }
.skeleton-price { flex: none; width: 76px; height: 16px; margin-top: 2px; }
.skeleton-spec { width: 70%; height: 11px; margin-top: 4px; }
.skeleton-material { width: 96px; }
.skeleton-pill { flex: none; width: 112px; height: 22px; }
.skeleton-button { flex: 1; height: 34px; }

@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-body {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Name, then price under it: a long name no longer squeezes the price into a
   wrapped column beside it. */
.card-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.card-name {
  font-size: var(--fs-17);
  font-weight: 750;
  color: var(--text);
  letter-spacing: -0.2px;
  margin: 0;
  line-height: 1.25;
}

/* Product code (SKU) leads the name — "P001 Tall Ribbed Planter" — so buyers
   can quote it in emails and paste it straight into the search box. It is part
   of the title, just a touch quieter than the words after it. */
.card-title-block {
  min-width: 0;
}

.name-code {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.card-price {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.card-price .per {
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--text-muted);
}
.locked-price {
  font-size: var(--fs-13);
  color: var(--accent-text);
  text-align: right;
}

/* "Standard · 2 finishes · 247 kg": one line, wrapping at the dots. */
.card-specline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: var(--fs-13);
  line-height: 1.45;
}
/* The dot trails each part, so a wrapped line never starts with one. */
.card-specline span:not(:last-child)::after {
  content: "·";
  margin: 0 6px;
  color: var(--text-muted);
}

.card-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--fs-12);
}

.card-stock-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(var(--clay-soft-rgb) / .1);
  color: var(--accent-text-hover);
  font-weight: 800;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;  /* the button takes its own row rather than breaking its label */
  align-items: center;
  gap: 10px;
  margin-top: auto;
  cursor: default;
}

.qty-input-group {
  display: flex;
  align-items: center;
  background: var(--surface-muted);
  border-radius: 50px;
  padding: 2px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition);
}

.qty-btn:hover {
  background: rgb(var(--shade-rgb) / .05);
  color: var(--text);
}

.qty-num {
  width: 48px;
  min-width: 48px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text);
  outline: none;
}
.qty-num::-webkit-outer-spin-button,
.qty-num::-webkit-inner-spin-button,
.pm-qty-num::-webkit-outer-spin-button,
.pm-qty-num::-webkit-inner-spin-button,
.ci-qty::-webkit-outer-spin-button,
.ci-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-num,
.pm-qty-num,
.ci-qty {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* The card's main action wears the same primary style as every other
   primary button: terracotta, sentence case. */
.btn-add-minimal {
  background: var(--clay);
  color: var(--on-accent);
  border: none;
  border-radius: 50px;
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  flex: 1;
}

.btn-add-minimal:hover {
  background: var(--clay-dark);
  transform: translateY(-1px);
}

.btn-add-minimal:disabled,
.btn-add-minimal:disabled:hover,
.pm-add-btn:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  background: var(--stone);
}

.inline-cart-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.inline-cart-editor label {
  color: var(--success);
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.inline-cart-qty-group {
  flex: 0 0 auto;
}

.cart-remove-text-btn {
  border: none;
  background: transparent;
  color: var(--cart-remove-text-btn-text);
  cursor: pointer;
  font-size: var(--fs-12);
  font-weight: 800;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: rgb(var(--danger-rgb) / .26);
  text-underline-offset: 3px;
}

.cart-remove-text-btn:hover {
  color: var(--cart-remove-text-btn-hover-text);
  text-decoration-color: currentColor;
}

.modal-inline-cart-editor {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgb(var(--green-rgb) / .06);
}
.locked-action {
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.locked-action:hover {
  background: var(--clay);
  color: var(--on-accent);
}
.owner-preview-note {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.no-results {
  grid-column: 1/-1; text-align: center;
  padding: 60px 20px; color: var(--text-muted);
}
.no-results svg { width: 64px; height: 64px; margin: 0 auto 16px; opacity: 0.3; }
.no-results h3 {
  color: var(--text-secondary);
  font-size: var(--fs-16);
  margin-bottom: 4px;
}
.no-results p {
  font-size: var(--fs-14);
}
.no-results .btn {
  margin-top: 16px;
}

/* A MODAL dialog is open: the page behind must not scroll. :modal rather than
   [open], because the filter panel is an open non-modal dialog on desktop — it
   is a column in the catalog, and locking the page behind it would freeze the
   whole catalog. One rule replaces the eighteen body.style.overflow
   assignments and the hardcoded list of surfaces that patched them. */
html:has(dialog:modal) { overflow: hidden; }

/* ===== ORDER PAGE ===== */
/* The draft container is a view of its own (#view-cart), step one of three.
   It was a centred two-pane window whose panes each scrolled, which put Submit
   under the fold of the left one. Now only the page scrolls: the lines run
   down the left and the summary, button included, stays in reach beside them. */
.cart-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.cart-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-13);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.cart-page-back:hover { color: var(--accent-text); }
.about-back { align-self: flex-start; color: rgb(var(--white-rgb) / .82); }
.about-back:hover { color: var(--on-accent); }
.cart-page-back svg { width: 16px; height: 16px; }
.cart-page-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.cart-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  counter-reset: cart-step;
}
.cart-steps li {
  counter-increment: cart-step;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 700;
}
.cart-steps li::before {
  content: counter(cart-step);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--fs-12);
}
.cart-steps li:not(:last-child)::after {
  content: '';
  width: 28px;
  height: 1.5px;
  margin-left: 4px;
  background: var(--surface-muted);
}
.cart-steps li[aria-current="step"] { color: var(--text); }
.cart-steps li[aria-current="step"]::before { background: var(--clay); color: var(--on-accent); }
.cart-page-head { margin-bottom: 20px; }
.cart-sync-status { min-height: 1.2em; margin-bottom: 4px; }
.cart-page-head h1 {
  font-size: var(--fs-32);
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1.15;
  color: var(--text-strong);
}
.cart-page-sub { margin-top: 4px; max-width: 60ch; color: var(--text-secondary); font-size: var(--fs-14); }
.cart-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.cart-lines,
.cart-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgb(var(--shadow-warm-rgb) / .04);
}
/* Under the 68px sticky header. */
.cart-summary { position: sticky; top: 88px; padding: 18px; }
/* An empty order has nothing to scroll past, so its two cards share one
   height, with the empty message centred in the taller space. */
.cart-page-grid.is-empty { align-items: stretch; }
.cart-page-grid.is-empty .cart-lines { display: flex; flex-direction: column; }
.cart-page-grid.is-empty .cart-items { flex: 1 1 auto; display: flex; flex-direction: column; }
.cart-page-grid.is-empty .cart-empty { flex: 1 1 auto; }
/* The header row and every line share one set of columns. */
.cart-lines-head,
.cart-item {
  grid-template-columns: minmax(0, 1fr) 128px 112px 104px 34px;
  column-gap: 16px;
}
.cart-lines-head {
  display: grid;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cart-lines-head span:nth-child(n+3) { text-align: right; }
.cart-lines-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-13);
}
.cart-lines-foot[hidden] { display: none; }
.cart-mobile-bar { display: none; }
.close-btn {
  background: var(--surface-muted); border: none; color: var(--text-secondary);
  width: 34px; height: 34px; border-radius: 50%;
  font-size: var(--fs-14); cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.close-btn:hover { background: var(--clay); color: var(--on-accent); }

/* ===== CONTAINER VISUALISATION ===== */
.container-vis-section { padding: 0; }
.vis-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vis-label { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }
.vis-pct { font-size: var(--fs-20); font-weight: 800; color: var(--accent-text); transition: color 0.4s; }
.vis-pct.warn { color: var(--warning); }
.vis-pct.full { color: var(--vis-pct-full-text); }
/* Both sizes on show as a toggle; a factory with one size gets it stated. */
.container-size-picker {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-muted);
  border-radius: 999px;
}
.container-size-picker[hidden] { display: none; }
.container-size-picker button {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.container-size-picker button:hover { color: var(--text); }
.container-size-picker button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.container-size-fixed { flex: 1; padding: 6px 10px; text-align: center; color: var(--text); font-size: var(--fs-12); font-weight: 700; }
.scm-container-size {
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.container-wrap { display: block; width: min(210px, 100%); margin: 12px auto 6px; position: relative; }
.container-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 10px rgb(var(--shadow-rgb) / .22)); }
/* The container loads from the back wall (left) towards the doors (right). */
#fillRect, #fillStripeRect {
  transition: width 0.75s cubic-bezier(0.34,1.56,0.64,1);
}
.container-ground-shadow {
  width: 88%; height: 8px; margin: 0 auto;
  background: rgb(var(--shade-rgb) / .18);
  border-radius: 50%;
  filter: blur(6px);
}
@keyframes bubbleRise {
  0% { transform: translateY(0) scale(1); opacity: 0.7; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-60px) scale(0.4); opacity: 0; }
}
.container-bubble { animation: bubbleRise 1.8s ease-in forwards; }
@keyframes overflowPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.overflow-pulsing { animation: overflowPulse 1s ease-in-out infinite; }
/* Always shown under the container: the fill is a model, not a promise. */
.container-volume-note { margin: 4px auto 12px; max-width: 40ch; color: var(--text-secondary); font-size: var(--fs-12); line-height: 1.5; text-align: center; text-wrap: balance; }
.container-volume-note span { white-space: nowrap; }
.summary-container-mini .container-volume-note { margin: 8px 0 0; max-width: none; text-align: left; }
.vis-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.vs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  text-align: center;
}
.vs-val { font-size: var(--fs-13); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-key { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }

.cart-capacity-notice,
.product-fit-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  line-height: 1.45;
  font-weight: 750;
}

.cart-capacity-notice.warning,
.product-fit-note.warning {
  color: var(--cart-capacity-notice-warning-text);
  border: 1px solid rgb(var(--amber-rgb) / .38);
  background: rgb(var(--amber-rgb) / .12);
}

.cart-capacity-notice.error,
.product-fit-note.error {
  color: var(--cart-remove-text-btn-text);
  border: 1px solid rgb(var(--danger-2-rgb) / .32);
  background: rgb(var(--danger-2-rgb) / .1);
}

/* Weight, not space, is what fills this container: worth knowing, not a problem. */
.cart-capacity-notice.info,
.product-fit-note.info {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

/* Made-to-order lead time. Neutral by default (everything in stock, 2 weeks),
   amber once any line has to be produced and the estimate jumps to 8 weeks. */
.cart-leadtime-notice,
.product-produce-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  line-height: 1.45;
  font-weight: 750;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: rgb(var(--shade-rgb) / .02);
}

.cart-leadtime-notice.made-to-order,
.product-produce-note {
  color: var(--cart-capacity-notice-warning-text);
  border-color: rgb(var(--amber-rgb) / .38);
  background: rgb(var(--amber-rgb) / .12);
}

/* Ceramify's own test buyer at a real factory: this container never ships. */
.test-container-note {
  max-width: 64ch;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  line-height: 1.45;
  font-weight: 750;
  color: var(--cart-capacity-notice-warning-text);
  border: 1px solid rgb(var(--amber-rgb) / .38);
  background: rgb(var(--amber-rgb) / .12);
}

/* ===== ORDER LINES ===== */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 20px; text-align: center;
  color: var(--text-muted); font-size: var(--fs-14); line-height: 1.7;
}
.cart-empty svg { width: 56px; height: 56px; }

.cart-item {
  display: grid;
  align-items: center;
  row-gap: 4px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  animation: slideIn 0.3s ease;
}
.cart-item:last-child { border-bottom: 0; }
.ci-product { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ci-image {
  width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-muted); flex-shrink: 0;
}
.ci-image img { width: 100%; height: 100%; object-fit: cover; }
.ci-info { flex: 1; min-width: 0; }
/* The whole name, wrapped if it has to be: a cut-off name hides which product it is. */
.ci-name { font-size: var(--fs-15); font-weight: 750; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.ci-meta { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.45; }
.ci-produce {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgb(var(--amber-rgb) / .14);
  color: var(--cart-capacity-notice-warning-text);
  font-size: var(--fs-12);
  font-weight: 750;
}
.ci-controls {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.ci-controls:focus-within { border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.ci-space,
.ci-price { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.ci-space { font-size: var(--fs-13); }
.ci-price { font-size: var(--fs-15); }
.ci-space small,
.ci-price small { display: block; color: var(--text-muted); font-size: var(--fs-12); font-weight: 600; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.ci-ctrl-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: transparent; font-size: var(--fs-16); cursor: pointer; display: flex;
  align-items: center; justify-content: center; color: var(--text-secondary);
  transition: var(--transition);
}
.ci-ctrl-btn:hover { color: var(--accent-text); }
.ci-ctrl-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.ci-ctrl-btn:disabled:hover { color: var(--text-secondary); }
.ci-qty {
  width: 48px;
  min-width: 48px;
  height: 30px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 750;
  text-align: center;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.ci-qty:focus { box-shadow: none; }

/* Under the product, so the note has room to be a sentence and never competes
   with the quantity for space. Lines without a note show only the link. */
.ci-note {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 74px;
}

/* Note label and the must-have toggle share one line: both are the buyer
   telling the factory something about this line, not editing it. */
.ci-note-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ci-note-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.ci-note-add:hover { color: var(--accent-text); }
.ci-note-add svg { width: 13px; height: 13px; }

.ci-musthave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--transition);
}

.ci-musthave svg {
  width: 13px;
  height: 13px;
  fill: none;
  flex-shrink: 0;
}

.ci-musthave:hover {
  border-color: rgb(var(--clay-soft-rgb) / .4);
  color: var(--accent-text-hover);
}

/* On: the clay accent the rest of the storefront uses for "this matters",
   with the star filled so the state survives a glance and a greyscale print. */
.ci-musthave.is-on {
  border-color: var(--accent-text);
  background: rgb(var(--clay-soft-rgb) / .12);
  color: var(--accent-text-hover);
}

.ci-musthave.is-on svg {
  fill: currentColor;
}

.ci-musthave:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The row itself carries the mark, so a flagged line is findable while
   scrolling a 40-line container instead of only when you read its note. */
.cart-item.is-must-have {
  background: rgb(var(--clay-soft-rgb) / .04);
  box-shadow: inset 3px 0 0 var(--accent-text);
}

.ci-note label {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ci-note-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: var(--fs-13);
  line-height: 1.45;
  min-height: 38px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

.ci-note-input:focus {
  border-color: var(--accent-text);
  outline: none;
}

.ci-note-input::placeholder { color: var(--text-muted); opacity: .75; }

/* Reads back the cart's must-have flag wherever the buyer sees the order again.
   Same clay accent and filled star as the toggle that set it. */
.must-have-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  padding: 2px 8px 2px 6px;
  border: 1px solid rgb(var(--clay-soft-rgb) / .38);
  border-radius: 999px;
  background: rgb(var(--clay-soft-rgb) / .12);
  color: var(--accent-text-hover);
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.must-have-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.ci-remove {
  display: grid;
  place-items: center;
  justify-self: end;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.ci-remove svg { width: 15px; height: 15px; }
.ci-remove:hover {
  color: var(--danger);
  background: rgb(var(--danger-3-rgb) / .08);
}

.ci-remove,
.cart-remove-text-btn,
.modal-close-btn,
.close-btn,
.qty-btn,
.pm-qty-btn,
.ci-ctrl-btn,
.filter-close-btn {
  min-width: 34px;
  min-height: 34px;
}

/* ===== CART FOOTER ===== */
.cart-footer {
  margin: 16px -18px 0;
  padding: 14px 18px 0;
  border-top: 1px solid var(--border);
}
.cart-totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.total-row { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.total-grand { font-size: var(--fs-17); font-weight: 800; color: var(--text); margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.cart-footer-fine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-12);
}
.cart-clear-btn {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.cart-clear-btn:hover { color: var(--accent-text); }

/* ===== PRODUCT MODAL ===== */
.modal-overlay {
  /* A native <dialog>. It lives in the browser's top layer, so it needs no
     z-index: the last dialog opened is always on top, which is what the old
     100001 / 100002 / 100011 ladder was trying and failing to express.
     showModal() also traps Tab, makes the page behind inert and wires Escape. */
  border: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  position: fixed; inset: 0;
  background: rgb(var(--shadow-rgb) / .75);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-overlay[open] { display: flex; }
/* The dialog fills the viewport and paints its own scrim, so the real backdrop
   stays out of the way. */
.modal-overlay::backdrop { background: transparent; }
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg);
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  margin: auto;
  box-shadow: var(--shadow-xl);
  animation: modalIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.product-modal-box {
  max-width: 980px;
  overflow: hidden;
}
.modal-close-btn {
  /* Sticky, not absolute: .modal-box is the scroll container, so an absolute
     button scrolled out of sight with the content — on a phone that left no
     visible way out of a long modal at all. Floated and pulled back out of
     flow so it still sits in the corner without pushing content down. */
  position: sticky; float: right; top: 20px; right: 20px; margin: 0 0 -36px 0;
  z-index: 3;
  background: rgb(var(--shade-rgb) / .08); border: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: var(--fs-14); cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.modal-close-btn:hover { background: var(--clay); color: var(--on-accent); }
.product-modal-close {
  z-index: 2;
  background: rgb(var(--surface-rgb) / .92);
  box-shadow: 0 10px 25px rgb(var(--shadow-warm-4-rgb) / .18);
}

.product-modal-inner {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 480px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.pm-image-side {
  background: var(--surface);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-image-side img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pm-info-side { padding: 36px; display: flex; flex-direction: column; }
.pm-category { font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-text); margin-bottom: 8px; }
.pm-name { font-size: var(--fs-28); font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 12px; }
.pm-desc { font-size: var(--fs-14); color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
.pm-variant-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
}
.pm-variant-pickers .pm-variant-picker {
  margin-bottom: 0;
}
.pm-variant-picker.loading-option-picker {
  grid-column: 1 / -1;
}
.pm-variant-picker {
  margin-bottom: 15px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  min-width: 0;
}
.pm-variant-picker select:disabled {
  opacity: 0.6;
  cursor: default;
}
.pm-variant-picker label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pm-variant-picker select {
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
  outline: none;
}
.pm-variant-picker select:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .1);
}
.pm-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pm-spec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.pm-spec-label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; }
.pm-spec-val { font-size: var(--fs-14); font-weight: 600; color: var(--text); }
.pm-purchase-panel {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.pm-status-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pm-status-tile {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.pm-status-tile span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.pm-status-tile strong {
  color: var(--text);
  font-size: var(--fs-14);
}

.pm-price-row { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.pm-price { font-size: var(--fs-32); font-weight: 700; color: var(--text); }
.pm-per { font-size: var(--fs-14); color: var(--text-muted); }
.price-lock-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-14);
}
.price-lock-panel strong {
  color: var(--text);
}
.pm-qty-row { display: flex; align-items: center; gap: 12px; }
.pm-qty-input {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-sunken); border-radius: 50px; padding: 6px 8px;
  border: 1.5px solid var(--border);
}
.pm-qty-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-muted); border: none;
  font-size: var(--fs-17); cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.pm-qty-btn:hover { background: var(--clay); color: var(--on-accent); }
.pm-qty-num {
  width: 64px;
  min-width: 64px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 700;
  text-align: center;
  outline: none;
  padding: 6px 4px;
}
.pm-qty-num:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .1);
}
.pm-add-btn { flex: 1; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
/* The total stays in one piece: it used to break between "$" and the figure. */
.pm-add-total { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== ORDER DETAILS (STEP TWO) ===== */
/* Same page frame as the container page. Each section is a row that folds to
   one line of what will be sent; the summary and Submit sit beside them. */
.checkout-rows {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgb(var(--shadow-warm-rgb) / .04);
}
.checkout-row { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.checkout-row:last-child { border-bottom: 0; }
/* A section that still needs something carries the clay mark, like a
   must-have line on the container page. */
.checkout-row.is-need { background: rgb(var(--clay-soft-rgb) / .04); box-shadow: inset 3px 0 0 var(--accent-text); }
.checkout-row:first-child.is-need { border-radius: var(--radius) var(--radius) 0 0; }
.checkout-row-top {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.checkout-row-tick {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
}
.checkout-row.is-done .checkout-row-tick { background: var(--green); color: var(--on-accent); }
.checkout-row.is-need .checkout-row-tick { background: var(--clay); color: var(--on-accent); }
.checkout-row-top h2 { font-size: var(--fs-15); font-weight: 800; color: var(--text); line-height: 1.6; }
.checkout-row-value,
.checkout-row-help { margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-13); line-height: 1.5; }
.checkout-row-value b { color: var(--text); font-weight: 650; }
.checkout-row-value[hidden] { display: none; }
.checkout-row-toggle {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 700;
  cursor: pointer;
}
.checkout-row-toggle:hover { color: var(--accent-text-hover); text-decoration: underline; }
.checkout-row-toggle[hidden] { display: none; }
.checkout-row-body { margin: 14px 0 0 38px; }
.checkout-row-body[hidden] { display: none; }
.checkout-row-body > .checkout-row-help { margin: 0 0 12px; }
.checkout-row-body .form-group:last-child { margin-bottom: 0; }
.checkout-row[data-row="name"] .checkout-row-body .form-group input { font-size: var(--fs-16); padding: 12px 14px; }
/* The finished steps link back. */
.cart-steps li.is-done::before { content: '✓'; background: var(--green); color: var(--on-accent); }
.cart-steps li.is-done { color: var(--text-secondary); }
.cart-steps li.is-done button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cart-steps li.is-done button:hover { color: var(--accent-text); text-decoration: underline; }
.form-section { margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.form-group label { font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-14); color: var(--text);
  background: var(--surface-sunken); outline: none; transition: var(--transition);
}
.form-group textarea {
  min-height: 94px;
  line-height: 1.5;
  resize: vertical;
}
.form-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  line-height: 1.45;
}
/* Live validation feedback on the checkout order-name field. */
.form-hint-error { color: var(--form-hint-error-text); }
.form-hint-ok { color: var(--form-hint-ok-text); }
.form-group input.input-error,
.form-group input.input-error:focus {
  border-color: var(--input-error-text);
  background: var(--input-error-bg);
}
.form-group input.input-ok,
.form-group input.input-ok:focus {
  border-color: var(--input-ok-text);
  background: var(--input-ok-bg);
}
.order-name-group input { font-weight: 600; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent-text); background: var(--surface);
  box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .1);
}
.checkout-save-destination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: var(--fs-14);
  font-weight: 700;
}
.checkout-save-destination input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-text);
}
.country-other-field {
  margin-top: 8px;
}
.loading-option-grid {
  display: grid;
  gap: 12px;
}
.loading-option-card {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: var(--transition);
}
.loading-option-card.active {
  border-color: var(--accent-text);
  background: var(--surface);
  box-shadow: 0 10px 24px rgb(var(--clay-soft-rgb) / .12);
}
.loading-option-card input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent-text);
}
.loading-option-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.loading-option-head strong {
  color: var(--text);
  font-size: var(--fs-15);
}
.loading-option-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-accent);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.loading-option-points {
  display: grid;
  gap: 5px;
}
.loading-option-pro,
.loading-option-con {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 7px;
  font-size: var(--fs-13);
  line-height: 1.42;
  color: var(--text-secondary);
}
.loading-option-pro span,
.loading-option-con span {
  font-weight: 800;
  text-align: center;
}
.loading-option-pro span { color: var(--loading-option-pro-span-text); }
.loading-option-con span { color: var(--danger); }
/* Stripe-style card area */
.stripe-card {
  background: var(--surface-sunken); border-radius: var(--radius);
  padding: 20px; border: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.card-field-group { display: flex; flex-direction: column; gap: 6px; }
.card-field-group label { font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); }
.card-field-group input {
  padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-14); color: var(--text);
  background: var(--surface); outline: none; transition: var(--transition);
}
.card-field-group input:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .1); }
.card-input-wrap { position: relative; }
.card-input-wrap input { width: 100%; padding-right: 52px; }
.card-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 38px; height: 24px; }
.secure-note { font-size: var(--fs-12); color: var(--text-muted); text-align: center; margin-top: 10px; }
/* Nothing on the profile editor saves on its own, so an unsaved state has to be
   loud enough to notice before navigating away. */
#business-profile-status.is-unsaved { color: var(--accent-text); font-weight: 700; }

/* Order details summary: the container card from step one, read-only. */
.checkout-summary .vis-label { display: block; margin-bottom: 8px; }
.summary-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 236px;
  overflow-y: auto;
  margin: 0 -4px 12px;
  padding: 0 4px;
}
.sum-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; }
.sum-item-img { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface-muted); }
.sum-item-img img { width: 100%; height: 100%; object-fit: cover; }
.sum-item-info { min-width: 0; }
.sum-item-name { font-size: var(--fs-13); font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.sum-item-qty { font-size: var(--fs-12); color: var(--text-muted); }
.sum-item-price { font-size: var(--fs-13); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.summary-container-mini { margin-top: 4px; }
.scm-bar-wrap { height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-bottom: 6px; }
.scm-bar { height: 100%; width: 0%; border-radius: 999px; background: var(--green-light); transition: width 0.6s ease; }
.scm-text { font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary); }

/* ===== FACTORY REVIEW (STEP THREE) ===== */
/* After sending: what happens next, in the order's own stages, beside the
   order summary and its files. */
.confirm-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid rgb(var(--green-rgb) / .22);
  border-radius: var(--radius);
  background: rgb(var(--green-rgb) / .08);
}
.confirm-banner svg { width: 44px; height: 44px; flex: none; }
.confirm-banner h1 {
  letter-spacing: -.02em;
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
}
.confirm-banner p { margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-14); }
.confirm-timeline {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgb(var(--shadow-warm-rgb) / .04);
}
.confirm-timeline h2 { margin-bottom: 16px; font-size: var(--fs-16); font-weight: 800; color: var(--text); }
.confirm-timeline ol { list-style: none; }
.confirm-stage { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.confirm-stage:last-child { padding-bottom: 0; }
.confirm-stage::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--surface-muted); }
.confirm-stage:last-child::before { display: none; }
.confirm-stage-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
}
.confirm-stage.is-done .confirm-stage-dot { background: var(--green); color: var(--on-accent); }
.confirm-stage.is-now .confirm-stage-dot { background: var(--clay); color: var(--on-accent); box-shadow: 0 0 0 5px rgb(var(--clay-soft-rgb) / .18); }
.confirm-stage b { display: block; font-size: var(--fs-14); color: var(--text); }
.confirm-stage p { max-width: 56ch; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-13); }
.confirm-stage-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgb(var(--clay-soft-rgb) / .1);
  color: var(--accent-text-hover);
  font-size: var(--fs-12);
  font-weight: 750;
}
.confirm-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 8px 0 14px; font-size: var(--fs-13); }
.confirm-facts dt { color: var(--text-secondary); }
.confirm-facts dd { text-align: right; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.confirm-actions { display: flex; gap: 8px; margin-top: 8px; }
.confirm-actions .btn-outline-sm { flex: 1; }
.cart-footer > .cart-clear-btn { display: block; margin: 8px auto 0; }

/* On-page replacement for window.confirm() on order decisions. Browsers may
   suppress native dialogs, and a suppressed confirm() reads as "cancel". Sits
   above the order modal (100001) and the cart (100011) it is opened from.
   Prefixed sf- because .confirm-actions already belongs to the order
   confirmation page above. */
/* The dialog fills the viewport and paints its own scrim, as .modal-overlay does. */
.sf-confirm-overlay::backdrop { background: transparent; }
.sf-confirm-overlay {
  /* A <dialog>: the top layer is the only thing above an open modal now. */
  border: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgb(var(--ink-rgb) / .45);
  animation: sfConfirmFade .16s ease;
}
.sf-confirm-overlay[open] { display: grid; }

.sf-confirm-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.sf-confirm-box.danger { border-top: 4px solid var(--danger); }

.sf-confirm-box h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-17);
  font-weight: 800;
}

.sf-confirm-box p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-14);
  line-height: 1.55;
}

.sf-confirm-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

@keyframes sfConfirmFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sf-confirm-overlay { animation: none; }
}

/* The proposal's Decline button has always carried .btn-danger, but the class
   was only ever styled in the dashboard, so here it rendered as a bare button. */
.btn-danger { background: var(--red); color: var(--on-accent); }
.btn-danger:hover { background: var(--btn-danger-hover-fill); }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ===== LOADING SPINNER (for place order btn) ===== */
.spinner {
  width: 18px; height: 18px; border: 2px solid rgb(var(--white-rgb) / .3);
  border-top-color: var(--on-accent); border-radius: 50%;
  animation: spin 0.6s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.api-busy-overlay {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgb(var(--surface-alt-2-rgb) / .96);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.api-busy-overlay.show {
  opacity: 1;
  transform: translateY(0);
}

.api-busy-overlay .spinner {
  width: 16px;
  height: 16px;
  border-color: rgb(var(--clay-soft-rgb) / .26);
  border-top-color: var(--accent-text);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mist); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  /* minmax(0, …): the column must not grow to fit a row of controls. */
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-controls { flex-wrap: wrap; }
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .filter-toggle-btn,
  .filter-close-btn {
    display: inline-flex;
  }
  .filter-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border: 0;
    border-radius: 0 16px 16px 0;
    width: min(340px, calc(100vw - 44px));
    /* The UA sizes a dialog to its content, which stops top/bottom stretching
       it: without this the drawer stops partway down the screen. */
    height: auto;
    padding: 0;
    background: var(--bg);
    box-shadow: 18px 0 45px rgb(var(--shadow-warm-5-rgb) / .18);
    overflow-y: auto;
    transform: translateX(0);
    /* A modal dialog goes from display:none into the top layer, and a plain
       transition cannot animate across that. allow-discrete plus a starting
       style is what keeps the drawer sliding instead of appearing; where it is
       unsupported the drawer simply arrives, which is the right thing to
       degrade to. */
    transition: transform .25s cubic-bezier(.4,0,.2,1),
                overlay .25s allow-discrete,
                display .25s allow-discrete;
  }
  @starting-style {
    .filter-sidebar[open] { transform: translateX(-105%); }
  }
  .filter-sidebar:not([open]) { transform: translateX(-105%); }
  .filter-sections { flex: 1; }
  .filter-drawer-foot { display: block; position: sticky; bottom: 0; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg); }
  .filter-drawer-foot .btn { width: 100%; }
  .shop-inactive .filter-sidebar {
    display: none;
  }
}
/* Tablets and narrow laptops. The action zone is three controls now, not nine,
   so it stays on the brand's row and only the search drops to a second line —
   no sideways-scrolling strip of navigation, which is the one pattern nobody
   finds. Phones, below 768px, stack further still. */
@media (min-width: 769px) and (max-width: 1180px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: auto;
    min-height: 68px;
    padding: 12px 24px;
    column-gap: 20px;
    row-gap: 10px;
  }
  .factory-wordmark { min-width: 0; grid-row: 1; grid-column: 1; }
  .header-nav { grid-row: 1; grid-column: 2; margin-left: 0; }
  .header-search {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  /* The add-to-cart flyout sits just below the header, which is two rows here:
     12 + 52 (a factory logo) + 10 + 40 + 12 and its border is 127px. At the
     desktop 84px it covered the search. */
  .cart-fill-toast {
    top: 140px;
  }
}
@media (max-width: 768px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 68px;
    padding: 10px 16px;
    gap: 10px;
  }
  .factory-wordmark {
    min-width: 0;
  }
  .factory-wordmark-mark.has-logo {
    width: auto;
    height: 48px;
    max-width: 104px;
  }
  .factory-wordmark-name {
    max-width: 150px;
    font-size: var(--fs-17);
  }
  .factory-wordmark-sub {
    display: none;
  }
  /* Brand and actions share the top row; the search takes the one below. The
     three controls fit a 360px phone, so nothing scrolls sideways. */
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .factory-wordmark { grid-row: 1; grid-column: 1; }
  .header-nav {
    grid-row: 1;
    grid-column: 2;
    gap: 8px;
    margin-left: 0;
  }
  .header-search {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    flex-basis: auto;
    max-width: none;
  }
  /* The container keeps its figure; the account button drops to the avatar. */
  .account-btn { padding: 0; width: 40px; justify-content: center; }
  .account-btn > span:not(.account-avatar),
  .account-chev { display: none; }
  .account-menu { min-width: min(260px, calc(100vw - 32px)); }
  .product-grid {
    gap: 12px;
  }
  .card-body {
    padding: 16px;
  }
  .product-modal-inner {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .pm-image-side {
    min-height: 280px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .pm-info-side {
    padding: 28px 22px;
  }
  .pm-status-row,
  .pm-specs {
    grid-template-columns: 1fr;
  }
  .pm-qty-row {
    align-items: stretch;
    flex-direction: column;
  }
  .cart-btn {
    padding: 8px 12px;
  }
  .owner-preview-banner.open {
    align-items: stretch;
    flex-direction: column;
  }
  .sf-head::before,
  .about-hero::before { background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .55) 0%, rgb(var(--scrim-rgb) / .86) 100%); }
  .about-hero-content { padding: 18px 20px 24px; min-height: 180px; }
  .about-content { padding: 36px 20px 56px; }
  .sf-head-inner { padding: 22px 20px; gap: 14px; min-height: 0; }
  .sf-head-logo { width: 56px; height: 56px; border-radius: var(--radius-sm); padding: 5px; }
  .sf-head-intro { font-size: var(--fs-14); -webkit-line-clamp: 3; }
  .sf-head-facts span:nth-child(n+4) { display: none; }
  .catalog-layout {
    padding: 24px 20px 36px;
  }
  .results-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .catalog-controls {
    width: 100%;
  }
  /* Each dropdown keeps a readable width and wraps to a second row instead. */
  .catalog-controls .sort-select {
    flex: 1 1 150px;
    min-width: 0;
  }
  .mini-pager { margin-left: auto; flex: none; }
  .catalog-pagination { justify-content: center; gap: 10px; }
  .pager-buttons { justify-content: center; }
  .product-modal-inner { grid-template-columns: 1fr; }
  .pm-image-side { border-radius: var(--radius-lg) var(--radius-lg) 0 0; height: 280px; min-height: 280px; }
  .pm-info-side { padding: 28px 24px; }
}

/* ===== ENTRY SCREEN (CLEAN SLATE) ===== */
.entry-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-entry);
  background-color: var(--surface); /* Explicitly white */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: transform, opacity;
}

.entry-screen.fade-down {
  opacity: 0;
  transform: translateY(30px) scale(0.98); /* Fades down and slightly shrinks */
  pointer-events: none;
}

.entry-wordmark {
  margin-bottom: 48px;
  color: var(--navy);
  letter-spacing: -.02em;
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1;
}
.entry-start-btn {
  border-radius: 8px;
  padding: 16px 48px;
  font-size: var(--fs-20);
}
.entry-auth-status {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: var(--fs-14);
}

.entry-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-muted-primary {
  color: var(--text-secondary);
  font-size: var(--fs-14);
  margin-bottom: 4px;
}

.profile-muted-secondary {
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* ===== ABOUT VIEW STYLES ===== */
/* The About view opens on the same short photo band as the storefront header,
   left-aligned, with "Back to products" at its top. */
.about-hero {
  position: relative;
  color: var(--on-accent);
  background: var(--sf-head-fill) url('images/hero-pot-2.webp') center 68% / cover no-repeat;
}
.about-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--scrim-rgb) / .86) 0%, rgb(var(--scrim-rgb) / .62) 42%, rgb(var(--scrim-rgb) / .12) 78%, rgb(var(--scrim-rgb) / .0) 100%);
}
.about-hero-content {
  position: relative;
  max-width: 1440px; margin: 0 auto;
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 24px 32px 36px;
}
.about-title {
  color: var(--on-accent);
  font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15;
  margin: auto 0 6px;
}
.about-subtitle {
  font-size: var(--fs-16);
  color: rgb(var(--white-rgb) / .84);
  max-width: 620px;
  margin: 0;
}
.about-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}
.factory-about-grid {
  align-items: stretch;
  margin-bottom: 0;
}
.about-label {
  font-size: var(--fs-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-text);
  display: block;
  margin-bottom: 16px;
}
.about-text-block h2 {
  letter-spacing: -.02em;
  font-size: var(--fs-32);
  margin-bottom: 24px;
}
.about-text-block p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: var(--fs-17);
  line-height: 1.8;
}
.about-image-block img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.factory-about-media {
  min-height: 420px;
}
.factory-about-gallery {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-auto-rows: 190px;
  gap: 14px;
  height: 100%;
}
.factory-about-photo,
.factory-about-empty-photo {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.factory-about-photo {
  margin: 0;
}
.factory-about-photo.featured {
  grid-row: span 2;
}
.factory-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.factory-about-empty-photo {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--green-rgb) / .24);
  letter-spacing: -.02em;
  font-size: 7rem;
  font-weight: 700;
}
.factory-about-photo-note {
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-14);
}
.about-leadership {
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
}
.leadership-content {
  max-width: 800px;
  margin: 0 auto;
}
.about-leadership blockquote {
  letter-spacing: -.02em;
  font-weight: 500;
  font-size: var(--fs-28);
  color: var(--text);
  margin-bottom: 24px;
}
.about-leadership cite {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--accent-text);
  font-style: normal;
}

/* ===== AUTH MODAL STYLES ===== */
.auth-modal-box {
  max-width: 900px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}
.auth-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: min(650px, calc(100dvh - 32px));
}
.auth-visual {
  background: linear-gradient(135deg, var(--charcoal), var(--ink));
  padding: 48px;
  color: var(--on-accent);
  display: flex;
  align-items: center;
}
.auth-wordmark {
  margin-bottom: 32px;
  color: var(--on-accent);
  letter-spacing: -.02em;
  font-size: var(--fs-40);
  font-weight: 700;
  line-height: 1;
}
.auth-visual h2 {
  letter-spacing: -.02em;
  font-size: var(--fs-28);
  margin-bottom: 16px;
}
.auth-visual p {
  color: rgb(var(--white-rgb) / .6);
  line-height: 1.7;
}
.auth-forms {
  padding: 48px 56px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  min-height: 0;
}
.auth-title {
  letter-spacing: -.02em;
  font-size: var(--fs-32);
  margin-bottom: 8px;
}
.auth-subtitle {
  color: var(--text-secondary);
  margin-bottom: 32px;
}
.auth-switch {
  margin-top: 24px;
  text-align: center;
  font-size: var(--fs-14);
  color: var(--text-secondary);
}
.auth-switch a {
  color: var(--accent-text);
  font-weight: 700;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-forms textarea {
  min-height: 82px;
  resize: vertical;
}

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .factory-about-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .factory-about-photo.featured {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}

/* ===== AUTH INLINE MESSAGES ===== */
.auth-error {
  background: var(--auth-error-bg);
  border: 1px solid var(--auth-error-border);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-14);
  margin-bottom: 14px;
}
.auth-success {
  background: var(--auth-success-bg);
  border: 1px solid var(--auth-success-border);
  color: var(--auth-success-text);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-14);
  margin-bottom: 14px;
}

/* ===== MY ACCOUNT NAV BUTTON ===== */
.btn-account {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-sunken);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 6px 14px 6px 10px;
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-account:hover {
  background: var(--btn-account-hover-bg);
  border-color: var(--accent-text);
}

/* ===== PROFILE MODAL ===== */
.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 34px 42px;
  background: linear-gradient(135deg, var(--charcoal), var(--profile-header-fill));
  color: var(--on-accent);
  flex-shrink: 0;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -.02em;
  font-size: var(--fs-24);
  font-weight: 700;
  flex-shrink: 0;
}
.profile-info h2 {
  letter-spacing: -.02em;
  font-size: var(--fs-24);
  margin-bottom: 4px;
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pstat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
.pstat-card:last-child { border-right: none; }
.pstat-accent { background: var(--pstat-accent-bg); }
.pstat-green  { background: var(--pstat-green-bg); }
.pstat-num {
  letter-spacing: -.02em;
  font-size: var(--fs-32);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
}
.pstat-accent .pstat-num { color: var(--accent-text); }
.pstat-green  .pstat-num { color: var(--auth-success-text); }
.pstat-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  font-weight: 600;
}
.profile-orders-section {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  gap: 20px;
}
.profile-details-section {
  grid-template-columns: 1fr;
}
.factory-profile-view .profile-orders-section {
  grid-template-columns: 1fr;
}
.profile-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* Save sits in the card header, so it stays in reach without scrolling the
   whole form. The status rides alongside it rather than under the fields. */
.profile-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.profile-head-actions .secure-note {
  margin-top: 0;
  text-align: right;
}
.profile-head-actions .secure-note:empty {
  display: none;
}
.profile-head-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
/* Too narrow to sit beside the title: give the pair its own full-width row
   rather than letting the button label break across three lines. */
@media (max-width: 768px) {
  .profile-head-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .profile-head-actions .secure-note {
    order: 2;
    width: 100%;
    text-align: left;
  }
}
.profile-panel-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.profile-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-17);
  font-weight: 850;
}
.business-profile-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.profile-details-section .business-profile-editor {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
.business-profile-editor textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}
.profile-address-block {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
.profile-address-heading {
  margin-bottom: 14px;
}
.profile-address-heading span {
  display: block;
  color: var(--text);
  font-weight: 850;
  margin-bottom: 4px;
}
.profile-address-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-14);
}
.profile-orders-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  min-height: 0;
  overflow: auto;
}
.factory-profile-panel {
  display: none;
}
.profile-details-section .profile-security-panel {
  max-width: 860px;
  width: 100%;
  margin: 20px auto 0;
}
.profile-security-intro {
  color: var(--text-secondary);
  font-size: var(--fs-14);
  margin: 0 0 18px;
}
.profile-security-panel .form-group {
  margin-bottom: 16px;
}
.profile-security-panel .form-row {
  margin-bottom: 16px;
}
.profile-security-panel .btn {
  margin-top: 4px;
}
.profile-security-panel .secure-note {
  text-align: left;
  margin-top: 12px;
}
.factory-profile-view .factory-profile-panel {
  display: block;
}
.profile-orders-loading {
  color: var(--text-secondary);
  font-size: var(--fs-14);
  padding: 24px 0;
  text-align: center;
}
.profile-empty {
  color: var(--text-secondary);
  font-size: var(--fs-14);
  text-align: center;
  padding: 24px 0;
}
.profile-empty.error {
  color: var(--danger);
}

/* ── Profile modal: sidebar shell ──────────────────────────── */
.profile-header { position: relative; }
.profile-info { flex: 1; min-width: 0; }
/* ── ACCOUNT PAGE ──
   Three columns on a wide screen: the rail on the same left edge as the
   header's logo, the section being edited, and what a factory still needs
   from this buyer. The page scrolls rather than the pane, and the save bar
   sticks to the bottom of the window while you work down a long section. */
.account-view {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 32px 72px;
}
.account-view [hidden] { display: none !important; }
.account-view .profile-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}
.account-view.factory-profile-view .profile-shell { grid-template-columns: 252px minmax(0, 1fr); }

.account-rail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.account-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text-hover);
  font-size: var(--fs-13);
  font-weight: 700;
  cursor: pointer;
}
.account-back:hover { color: var(--accent-text); }
.account-id-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.account-view-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--clay);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: var(--fs-16);
  font-weight: 700;
}
.account-id-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.account-id-name {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}
.account-id-meta {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--fs-13);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-id-meta:empty,
.account-role-pill:empty { display: none; }
.account-role-pill {
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--clay-soft-rgb) / .1);
  color: var(--accent-text-hover);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.account-view .profile-nav {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.account-view .profile-nav-group + .profile-nav-group { margin-top: 14px; }

.account-view .profile-content { min-width: 0; padding: 0; background: transparent; overflow: visible; }
.account-view .profile-pane-head { margin-bottom: 18px; }
.account-view .profile-pane-head .eyebrow { margin: 0 0 6px; }
.account-view .profile-pane-head h3 {
  margin: 0 0 6px;
  font-size: var(--fs-28);
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
  text-wrap: balance;
}
.account-view .profile-pane-head p:last-child { max-width: 62ch; font-size: var(--fs-15); }

/* Cards sit side by side, so billing and delivery (or company and contact)
   are read across rather than down one long column. */
.account-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.account-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.account-card-head { margin-bottom: 16px; }
.account-card-head h4 { margin: 0; font-size: var(--fs-16); font-weight: 700; color: var(--text); }
.account-card-head p { margin: 3px 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-secondary); }
.account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.account-fields + .account-fields { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.account-fields .form-group { margin: 0; }
.account-fields .is-full { grid-column: 1 / -1; }
.account-view .optional { margin-left: 4px; font-size: var(--fs-12); font-weight: 500; color: var(--text-muted); }
.account-view .factory-only-block { display: none; }
.account-view.factory-profile-view .factory-only-block { display: block; max-width: 640px; }
.account-view .profile-security-panel .btn { margin-top: 16px; }
.account-view .secure-note { text-align: left; }
.account-view .secure-note:empty { display: none; }

/* "Deliver to the invoice address", the switch sign-up shows too. */
.account-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.account-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-switch-track {
  position: relative;
  width: 36px;
  height: 21px;
  flex: none;
  border-radius: 999px;
  background: var(--account-switch-track-bg);
  transition: background .2s;
}
.account-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .18);
  transition: transform .2s;
}
.account-switch input:checked + .account-switch-track { background: var(--clay); }
.account-switch input:checked + .account-switch-track::after { transform: translateX(15px); }
.account-switch input:focus-visible + .account-switch-track { outline: 3px solid rgb(var(--clay-soft-rgb) / .3); outline-offset: 2px; }

/* The destination port is picked from the list, as at sign-up. */
.account-port-picked {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-sunken);
}
.account-port-name { min-width: 0; font-size: var(--fs-14); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.account-port-code {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
}
.account-port-change {
  margin-left: auto;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--accent-text-hover);
  font-size: var(--fs-13);
  font-weight: 700;
  cursor: pointer;
}
.account-port-change:hover { background: rgb(var(--clay-soft-rgb) / .08); }
.account-port-combo { position: relative; }
.account-port-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.account-port-list .note { padding: 10px 12px; font-size: var(--fs-13); color: var(--text-secondary); }
.account-port-list button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
}
.account-port-list button.is-on,
.account-port-list button:hover { background: rgb(var(--clay-soft-rgb) / .1); }
.account-port-list .where { color: var(--text-muted); }
.account-port-list .code { flex: none; font-size: var(--fs-12); font-weight: 800; letter-spacing: .8px; color: var(--text-secondary); }

/* Right column: the sign-up checklist, and the invoice as a factory prints it. */
.account-aside {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.account-ready-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.account-ready-top b { font-size: var(--fs-15); color: var(--text); }
.account-ready-top span { font-size: var(--fs-13); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.account-ready-bar { height: 6px; margin-bottom: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.account-ready-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--clay); transition: width .35s ease; }
.account-ready-bar i.is-done { background: var(--green); }
.account-ready-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.account-ready-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
}
.account-ready-list button:hover { background: var(--surface-sunken); }
.account-ready-tick {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--account-ready-tick-border);
  border-radius: 50%;
  color: var(--on-accent);
}
.account-ready-list .is-done .account-ready-tick { border-color: var(--green); background: var(--green); }
.account-ready-list .is-done .account-ready-label { color: var(--text-secondary); }
.account-ready-go { margin-left: auto; font-size: var(--fs-12); font-weight: 700; color: var(--accent-text-hover); }
.account-ready-done { margin: 8px 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--success); }
.account-invoice-kicker {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.account-invoice-paper {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--account-invoice-paper-bg);
  color: var(--text);
  font-size: var(--fs-13);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.account-invoice-paper strong { font-size: var(--fs-14); }
.account-invoice-paper hr { margin: 9px 0; border: 0; border-top: 1px solid var(--border); }
.account-invoice-to { font-size: var(--fs-12); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.account-invoice-paper .is-placeholder { color: var(--account-invoice-paper-is-placeholder-text); font-style: italic; }
.account-invoice-note { margin: 10px 0 0; font-size: var(--fs-12); line-height: 1.5; color: var(--text-secondary); }

.account-view .profile-savebar {
  position: sticky;
  bottom: 16px;
  z-index: var(--z-savebar);
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* Laptop: the summary moves above the section; the invoice preview goes. */
@media (max-width: 1240px) {
  .account-view .profile-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 28px; }
  .account-rail { grid-row: 1 / span 2; }
  .account-aside { position: static; grid-column: 2; grid-row: 1; }
  .account-view .profile-content { grid-column: 2; }
  .account-invoice { display: none; }
}
@media (max-width: 1040px) {
  .account-cards { grid-template-columns: minmax(0, 1fr); }
}
/* Phone: one column; the sections become a row of tabs above the checklist. */
@media (max-width: 760px) {
  .account-view { padding: 18px 16px 56px; }
  .account-view .profile-shell { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .account-view .profile-shell > * { min-width: 0; }
  .account-rail { position: static; gap: 12px; }
  .account-aside { order: 1; }
  .account-view .profile-content { order: 2; }
  .account-view .profile-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .account-view .profile-nav-group { display: flex; gap: 6px; }
  .account-view .profile-nav-group + .profile-nav-group { margin-top: 0; }
  .account-view .profile-nav-group-label { display: none; }
  .account-view .profile-nav-btn {
    width: auto;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    white-space: nowrap;
  }
  .account-view .profile-nav-btn svg { display: none; }
  .account-view .profile-nav-btn.is-active { border-color: var(--ink); background: var(--ink); color: var(--on-accent); }
  .account-view .profile-pane-head h3 { font-size: var(--fs-24); }
  .account-fields { grid-template-columns: minmax(0, 1fr); }
  .account-view .profile-savebar { bottom: 8px; }
  /* Finished, the checklist folds to its count above the form. */
  .account-ready.is-complete .account-ready-list,
  .account-ready.is-complete .account-ready-bar { display: none; }
}

.profile-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}
.profile-nav {
  flex: none;
  width: 232px;
  border-right: 1px solid var(--border);
  background: var(--surface-sunken);
  padding: 22px 16px;
  overflow-y: auto;
}
.factory-profile-view .buyer-only { display: none; }
/* Specificity has to beat .profile-nav-btn's own display, which is declared
   later in this file. */
.profile-nav-btn.factory-only { display: none; }
.factory-profile-view .profile-nav-btn.factory-only { display: flex; }

/* ── ACCOUNT WINDOW: SECTIONS ──
   Each rail item owns one subject, so no pane carries more than one screen of
   fields. The save bar below is shared by every pane that edits the profile. */
.profile-pane-head { margin-bottom: 18px; }
.profile-pane-head h3 {
  margin: 0 0 4px;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--text-strong);
}
.profile-pane-head p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
}
.profile-form-block { max-width: 640px; }
.profile-address-copy { margin: 4px 0 18px; }

/* A dot on the rail marks a section whose empty fields the factory needs. */
.profile-nav-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--amber);
  flex: 0 0 auto;
}
.profile-nav-dot[hidden] { display: none; }

.profile-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgb(var(--shadow-rgb) / .05);
}
.profile-savebar[hidden] { display: none; }
.profile-savebar-text { font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }
.profile-savebar-actions { display: flex; align-items: center; gap: 8px; }
.btn-sm { padding: 8px 16px; font-size: var(--fs-13); }

@media (max-width: 760px) {
  .profile-savebar { padding: 12px 16px; }
  .profile-savebar-actions { width: 100%; }
  .profile-savebar-actions .btn { flex: 1; justify-content: center; }
}
.profile-nav-group-label {
  display: block;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profile-nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 4px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-15);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.profile-nav-btn svg { flex: none; color: var(--text-muted); transition: color var(--transition); }
.profile-nav-btn:hover { background: rgb(var(--clay-soft-rgb) / .08); color: var(--text); }
.profile-nav-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.profile-nav-btn.is-active svg { color: var(--accent-text); }
.profile-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: 24px;
}
.profile-pane { display: none; }
.profile-pane.is-active { display: block; }
.profile-pane .profile-stats-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
}

/* ── Pane headers ─────────────────────────────────────────── */
.pane-head { margin-bottom: 22px; }
.pane-head .eyebrow {
  display: block;
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pane-head h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: var(--fs-24);
  letter-spacing: -.02em;
}
.pane-head p { margin: 0; color: var(--text-secondary); font-size: var(--fs-15); }
.pane-loading { color: var(--text-secondary); font-size: var(--fs-14); padding: 40px 0; text-align: center; }

/* ── Contracts pane ───────────────────────────────────────── */
.contract-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.contract-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.contract-factory { font-size: var(--fs-17); font-weight: 800; color: var(--text); }
.contract-status {
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.contract-status.active { background: var(--contract-status-active-bg); color: var(--success); }
.contract-status.pending { background: var(--contract-status-pending-bg); color: var(--accent-text-hover); }
.contract-term { font-size: var(--fs-14); color: var(--text-secondary); margin-bottom: 14px; }
.contract-perk {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-sunken);
  margin-bottom: 14px;
}
.contract-perk .perk-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--clay);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-14);
}
.contract-perk .perk-body strong { display: block; color: var(--text); font-size: var(--fs-15); }
.contract-perk .perk-body span { font-size: var(--fs-13); color: var(--text-secondary); }
.contract-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.contract-progress-track {
  height: 9px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}
.contract-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clay), var(--clay-light));
}
.contract-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.contract-meta div span { display: block; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 700; }
.contract-meta div strong { font-size: var(--fs-15); color: var(--text); }

/* ── Analytics pane ───────────────────────────────────────── */
.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.period-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  gap: 2px;
}
.period-toggle button {
  border: none;
  background: transparent;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.period-toggle button.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.an-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.an-card .an-label {
  display: block;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.an-card .an-value {
  letter-spacing: -.02em;
  font-size: var(--fs-28);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.an-card .an-sub { display: block; margin-top: 7px; font-size: var(--fs-12); color: var(--text-secondary); }
.an-card .an-sub.up { color: var(--success); }
.an-card .an-sub.down { color: var(--danger); }
.an-card.accent { background: var(--pstat-accent-bg); }
.an-card.accent .an-value { color: var(--accent-text); }
.an-card.green { background: var(--pstat-green-bg); }
.an-card.green .an-value { color: var(--success); }
.analytics-section-title {
  font-size: var(--fs-15);
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 14px;
}
.an-bars { display: flex; flex-direction: column; gap: 12px; }
.an-bar-row { display: grid; grid-template-columns: 84px 1fr 70px; align-items: center; gap: 12px; }
.an-bar-label { font-size: var(--fs-13); color: var(--text-secondary); font-weight: 600; }
.an-bar-track { height: 12px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.an-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--clay), var(--clay-light)); }
.an-bar-val { font-size: var(--fs-13); color: var(--text); font-weight: 700; text-align: right; }
.analytics-empty { color: var(--text-secondary); font-size: var(--fs-14); text-align: center; padding: 40px 0; }
.orders-view {
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.orders-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.orders-view-title {
  font-size: var(--fs-28);
  margin: 4px 0 6px;
}
.orders-view-subtitle {
  color: var(--text-secondary);
  font-size: var(--fs-15);
  max-width: 60ch;
}
/* Messages fills the window under the header, so the factory list and the open
   conversation each scroll inside themselves and the composer stays in view. */
/* Messages is a workspace, not an article: it takes the whole window rather
   than a centred column, so the thread list and the conversation each get the
   room they can use. The only inset is a small gutter off the page edge. */
.messages-view {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* The hairline is the header's own, darkened while the chat is on screen, so
   there is one line rather than two faint ones stacked. */
body:has(#view-messages.active) .header { border-bottom-color: var(--header-border); }
/* The chat is the page here too — no card frame, no gutter. */
.messages-view .cf-inbox {
  border: 0;
  border-radius: 0;
}
/* Measured from the viewport itself rather than in vh: in an embedded webview
   vh can resolve shorter than the canvas, and the remainder shows as a band of
   page background under the chat. Scoped to the messages view so no other page
   gains a height it did not have. */
html {
  height: 100%;
  /* Keep the scrollbar's width reserved. Without it a taller tab summons the
     bar and every page shifts sideways as you switch. On this page body carries
     overflow-x, so the viewport takes its scrollbar behaviour from body too —
     both get the rule. */
  scrollbar-gutter: stable;
  /* scrollbar-gutter is not honoured for the viewport in every engine, and it
     was not here: a taller tab took 6px off clientWidth and the centred page
     slid 3px sideways. Always showing the track is the rule that actually
     holds — on overlay scrollbars it costs nothing. */
  overflow-y: scroll;
  /* Moved off body, where it was quietly breaking every sticky element on the
     page. html is the scroll container, so clipping here does the same job
     without standing between a sticky element and the viewport. */
  overflow-x: hidden;
}
/* body no longer carries overflow, so this is belt and braces for engines that
   still read the gutter off it. */
body { scrollbar-gutter: stable; }
/* The view takes whatever the header leaves, by flexing rather than by
   subtracting a number — the header is 68px plus its border, and that kind of
   arithmetic is how the strip appeared in the first place. */
body:has(#view-messages.active) {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(#view-messages.active) #view-messages { flex: 1; min-height: 0; }
.messages-view,
.messages-view-inbox { height: 100%; min-height: 0; }
.factory-profile-tools {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 20px;
}
.factory-profile-tools p {
  color: var(--text-secondary);
  font-size: var(--fs-15);
  line-height: 1.6;
  margin-bottom: 16px;
}
.factory-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.order-status {
  /* A pill is one object. Left inline it wrapped mid-background in the order
     detail table, putting the rounded ends on the outside of a two-line box and
     a straight cut down the middle of the label. The table it sits in already
     scrolls sideways, so keeping the pill whole costs nothing. */
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 50px;
}
.status-pending    { background: var(--status-pending-bg); color: var(--status-pending-text); }
.status-approved   { background: var(--status-approved-bg); color: var(--status-approved-text); }
.status-production { background: var(--status-production-bg); color: var(--status-production-text); }
.status-loaded     { background: var(--status-loaded-bg); color: var(--status-loaded-text); }
.status-shipped    { background: var(--status-shipped-bg); color: var(--status-shipped-text); }
.status-arrived    { background: var(--status-arrived-bg); color: var(--status-arrived-text); }
.status-declined   { background: var(--status-declined-bg); color: var(--status-declined-text); }
.status-dispatched { background: var(--status-shipped-bg); color: var(--status-shipped-text); }
.status-complete   { background: var(--status-approved-bg); color: var(--status-approved-text); }
/* ── MY ORDERS ─────────────────────────────────────────────────
   One line per order. Tiles answer what is owed and what is waiting and act as
   filters; chips filter by stage; the column heads sort. */
.mo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.mo-tile {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mo-tile:hover { border-color: var(--accent-text); }
.mo-tile.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.mo-tile-label { font-size: var(--fs-12); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
.mo-tile strong { font-size: var(--fs-24); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.mo-tile.is-money strong { color: var(--accent-text-hover); }
.mo-tile small { font-size: var(--fs-12); color: var(--text-secondary); }
.mo-tile small.is-late { color: var(--danger); font-weight: 600; }

.mo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.mo-chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.mo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
}
.mo-chip b { padding: 0 7px; border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--fs-12); }
.mo-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.mo-chip[aria-pressed="true"] b { background: rgb(var(--white-rgb) / .2); color: var(--on-accent); }
.mo-chip.is-attention[aria-pressed="false"] { border-color: rgb(var(--clay-soft-rgb) / .5); color: var(--accent-text-hover); }
.mo-search {
  flex: 1 1 220px;
  max-width: 320px;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.mo-search:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 3px rgb(var(--clay-soft-rgb) / .12); }
.mo-search svg { flex: none; width: 15px; height: 15px; color: var(--text-muted); }
.mo-search input { width: 100%; padding: 8px 0; border: 0; background: none; outline: none; color: var(--text); font-size: var(--fs-14); }
.mo-search input:focus-visible { box-shadow: none; }

.mo-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-variant-numeric: tabular-nums; }
.mo-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1.25fr 1fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-14);
  cursor: pointer;
}
.mo-row:first-child { border-top: 0; }
.mo-row:hover { background: var(--surface-sunken); }
.mo-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-text); }
.mo-head { padding-block: 10px; background: var(--surface-sunken); cursor: default; font-size: var(--fs-12); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
.mo-head:hover { background: var(--surface-sunken); }
.mo-head button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mo-head button:focus-visible { border-radius: 4px; box-shadow: 0 0 0 2px rgb(var(--clay-soft-rgb) / .45); }
.mo-head button.is-on { color: var(--text); }
.mo-name { display: block; font-weight: 600; font-size: var(--fs-14); color: var(--text); overflow-wrap: anywhere; }
.mo-sub { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--text-secondary); letter-spacing: .02em; }
.mo-none { color: var(--text-muted); }
.mo-right { text-align: right; justify-self: stretch; }
.mo-cell-status { display: grid; justify-items: start; gap: 6px; }
.mo-cell-status .order-status { font-size: var(--fs-12); padding: 3px 9px; }
.mo-steps { display: inline-flex; gap: 3px; }
.mo-steps i { width: 14px; height: 4px; border-radius: 2px; background: var(--surface-muted); }
.mo-steps i.on { background: var(--clay); }
.mo-steps.is-off i { background: var(--mo-steps-i-bg); }
.mo-fill { display: block; height: 5px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: var(--surface-muted); }
.mo-fill i { display: block; height: 100%; background: var(--clay); }
.mo-fill.is-high i { background: var(--amber); }
.mo-owed { font-weight: 700; color: var(--accent-text-hover); }
.mo-owed.is-late { color: var(--danger); }
.mo-narrow { display: none; }
.mo-cell-reorder { justify-self: end; }
.mo-cell-reorder .btn-outline-sm { padding: 5px 14px; white-space: nowrap; }
.mo-more { display: flex; justify-content: center; margin-top: 16px; }
.mo-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--text-secondary); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

@media (max-width: 900px) {
  .mo-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .mo-head { display: none; }
  .mo-wide { display: none; }
  /* The name gets the full width, then status beside what is owed, then one
     line of the remaining facts. */
  .mo-row > .mo-cell-order { grid-column: 1 / -1; }
  .mo-row > .mo-cell-status { grid-column: 1; grid-row: 2; }
  .mo-row > .mo-cell-pay { grid-column: 2; grid-row: 2; }
  .mo-row > .mo-narrow { display: block; grid-column: 1; grid-row: 3; font-size: var(--fs-12); color: var(--text-secondary); }
  .mo-row > .mo-cell-reorder { grid-column: 2; grid-row: 3; }
  .mo-cell-status .mo-steps { display: none; }
}
@media (max-width: 640px) {
  .mo-tiles { grid-template-columns: 1fr; gap: 10px; }
  .mo-search { max-width: none; }
}

/* ── ORDER WINDOW (buyer) ──────────────────────────────────────
   A rail on the right for what is owed, when the container is ready and every
   action; tabs on the left so only one kind of information shows at a time. */
/* A fixed-height window that never scrolls as a whole. The header stays put,
   and the tab content and the rail each scroll inside their own column, so no
   scrollbar runs over the window's rounded corners and the actions at the foot
   of the rail are always in reach. */
.order-detail-modal {
  max-width: min(1120px, calc(100vw - 32px));
  width: 100%;
  height: min(760px, calc(100dvh - 32px));
  max-height: none;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.order-detail-modal .modal-close-btn { position: absolute; top: 16px; right: 16px; margin: 0; float: none; }
#orderDetailContent { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.od-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 20px 72px 18px 32px;
}
.od-ref {
  font-size: var(--fs-12);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.od-head h2 {
  letter-spacing: -.02em;
  font-size: var(--fs-24);
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.od-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* Where the buyer's deposit stands. Sized like .order-status beside it so the
   two read as a pair. A statement, not a control: words and a dot, no box. */
.deposit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.deposit-badge::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mist);
}

.deposit-badge.is-received {
  border-color: rgb(var(--green-rgb) / .25);
  background: var(--deposit-badge-is-received-bg);
  color: var(--deposit-badge-is-received-text);
}

.deposit-badge.is-received::before { background: var(--green); }

.od-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border-top: 1px solid var(--border);
}
.od-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.od-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.od-tabs::-webkit-scrollbar { display: none; }
.od-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  padding: 13px 14px;
  color: var(--text-secondary);
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.od-tabs button:hover { color: var(--text); }
.od-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-text); }
.od-tabs button:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--clay-soft-rgb) / .45); border-radius: 8px 8px 0 0; }
.od-count {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border-radius: 999px;
  padding: 1px 8px;
}
.od-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.od-tab-dot[hidden] { display: none; }

.od-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 28px;
  align-content: start;
  padding: 26px 32px 32px;
}
.od-panel[hidden] { display: none; }
.od-panel:focus-visible { outline: 2px solid rgb(var(--clay-soft-rgb) / .35); outline-offset: -6px; }

.od-section { display: grid; }
.od-section[hidden] { display: none; }
.od-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.od-section-head h3 { font-size: var(--fs-16); font-weight: 700; color: var(--text); }
.od-section-head span { font-size: var(--fs-13); color: var(--text-secondary); }
.od-empty { color: var(--text-secondary); font-size: var(--fs-14); }
.od-hint { color: var(--text-secondary); font-size: var(--fs-13); margin-top: 12px; }
.od-link {
  justify-self: start;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text-hover);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--clay-rgb) / .3);
  text-underline-offset: 3px;
  cursor: pointer;
}
.od-link:hover { text-decoration-color: currentColor; }
.od-link[hidden] { display: none; }
.od-link.is-danger { margin-top: 0; color: var(--danger); text-decoration-color: rgb(var(--red-rgb) / .35); }

/* Progress — the steps carry the date each one happened. */
.od-progress {
  display: grid;
  gap: 20px;
  padding: 24px 24px 22px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.od-steps { list-style: none; display: flex; gap: 4px; }
.od-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.od-step::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--surface-muted);
}
.od-step:first-child::before { display: none; }
.od-step-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-muted);
  border: 2px solid var(--parchment);
}
.od-step-label { font-size: var(--fs-12); line-height: 1.2; color: var(--text-muted); }
.od-step-date { min-height: 1em; font-size: var(--fs-12); color: var(--text-muted); }
.od-step.is-done::before,
.od-step.is-current::before { background: var(--clay); }
.od-step.is-done .od-step-dot { background: var(--clay); border-color: var(--clay); }
.od-step.is-done .od-step-label { color: var(--text-secondary); }
.od-step.is-current .od-step-dot { background: var(--surface); border-color: var(--accent-text); box-shadow: 0 0 0 4px rgb(var(--clay-soft-rgb) / .2); }
.od-step.is-current .od-step-label { color: var(--accent-text); font-weight: 700; }
.od-now { padding-top: 18px; border-top: 1px solid var(--border); font-size: var(--fs-15); color: var(--text); }
.od-declined { display: grid; justify-items: start; gap: 10px; }
.od-declined p { color: var(--text-secondary); font-size: var(--fs-14); }

.od-callout {
  padding: 16px 18px;
  border: 1px solid rgb(var(--clay-soft-rgb) / .4);
  border-radius: var(--radius-sm);
  background: var(--od-callout-bg);
  font-size: var(--fs-14);
}
.od-callout.is-quiet { background: var(--surface-sunken); border-color: var(--border); }
.od-callout strong { display: block; margin-bottom: 6px; color: var(--text); }
.od-callout p,
.od-callout li { color: var(--text-secondary); }
.od-callout ul { display: grid; gap: 4px; padding-left: 18px; }

.od-thumb {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.od-thumb.is-empty { background: linear-gradient(135deg, var(--surface-sunken), var(--surface-muted)); }

.od-glance-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-14);
}
.od-glance-row:first-child { padding-top: 0; border-top: 0; }
.od-glance-row .od-thumb { width: 32px; height: 32px; }
.od-glance-qty { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Product lines */
.od-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 6px 18px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.od-line:first-child { padding-top: 0; border-top: 0; }
.od-line-main { min-width: 0; }
.od-line-name { font-size: var(--fs-15); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.od-line-meta { margin-top: 2px; font-size: var(--fs-12); color: var(--text-secondary); }
.od-line-qty { font-size: var(--fs-13); color: var(--text-secondary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.od-line-qty span { display: block; font-size: var(--fs-12); color: var(--accent-text-hover); }
.od-line-total { min-width: 96px; font-size: var(--fs-15); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.od-line-notes { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.od-note {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  line-height: 1.4;
}
.od-note b { margin-right: 6px; color: var(--text); }
.od-note.from-factory { background: var(--od-callout-bg); border-color: rgb(var(--clay-soft-rgb) / .3); }
.od-note.from-factory b { color: var(--accent-text-hover); }
.od-changed {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  vertical-align: middle;
  border: 1px solid rgb(var(--clay-soft-rgb) / .3);
  border-radius: 999px;
  background: var(--od-callout-bg);
  color: var(--accent-text-hover);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.od-lines-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1.5px solid var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.od-lines-total span:first-child { font-weight: 500; color: var(--text-secondary); }

.od-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 11px 28px; font-size: var(--fs-14); }
.od-kv dt { color: var(--text-secondary); }
.od-kv dd { color: var(--text); overflow-wrap: anywhere; }
.od-kv a { color: var(--accent-text-hover); font-weight: 600; }
.od-dd-note { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-12); font-style: italic; }

/* Invoices */
.od-invoice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.od-invoice:first-child { padding-top: 0; border-top: 0; }
.od-invoice-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-14); font-weight: 600; }
.od-invoice-amount { font-variant-numeric: tabular-nums; }
.od-invoice-meta { margin-top: 3px; font-size: var(--fs-12); color: var(--text-secondary); }
.od-invoice-payments {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.od-invoice-payments li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.od-invoice-payments li span:last-child { font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }

/* Activity — every word from the factory, in one place */
.od-feed { list-style: none; display: grid; }
.od-feed li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.od-feed li::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--surface-muted); }
.od-feed li:last-child { padding-bottom: 0; }
.od-feed li:last-child::before { display: none; }
.od-feed-dot { position: relative; width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--text-muted); border-radius: 50%; background: var(--surface); }
.od-feed li.from-factory .od-feed-dot { background: var(--clay); border-color: var(--clay); }
.od-feed-head { font-size: var(--fs-14); color: var(--text); }
.od-feed-head time { margin-left: 8px; font-size: var(--fs-12); color: var(--text-muted); }
.od-feed-text { margin-top: 3px; font-size: var(--fs-14); color: var(--text-secondary); }
.od-feed-changes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.od-feed-changes span {
  padding: 3px 9px;
  border: 1px solid rgb(var(--clay-soft-rgb) / .3);
  border-radius: 6px;
  background: var(--od-callout-bg);
  color: var(--accent-text-hover);
  font-size: var(--fs-12);
}

/* Rail */
.od-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  border-left: 1px solid var(--border);
}
.od-rail-in {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 20px 16px;
}
.od-rail-foot {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}
.od-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.od-card h4 { font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.od-card .od-link { margin-top: 0; }
.od-big { font-size: var(--fs-24); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.od-big small { display: block; margin-top: 8px; font-size: var(--fs-12); font-weight: 500; line-height: 1.4; color: var(--text-secondary); }
.od-paybar,
.od-fill { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-muted); }
.od-paybar i,
.od-fill i { display: block; height: 100%; }
.od-paybar i { background: var(--green); }
.od-fill i { background: var(--clay); }
.od-fill.is-high i { background: var(--amber); }
.od-ledger { display: grid; gap: 9px; font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.od-ledger div { display: flex; justify-content: space-between; gap: 12px; }
.od-ledger dt { color: var(--text-secondary); }
.od-ledger .is-due { padding-top: 10px; border-top: 1px solid var(--border); font-weight: 700; }
.od-ledger .is-due dt { color: var(--text); }
.od-packing { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.od-packing dt small { margin-left: 4px; color: var(--text-muted); }
.od-packing .is-pending dd { color: var(--text-muted); }

/* "Packing price not included": a small i beside a price, its note on hover,
   focus or tap. Packing is added by the factory once the container is packed. */
.packing-tip {
  position: relative; display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 6px; cursor: help; outline: none;
  text-transform: none; letter-spacing: 0;
}
/* A 28px target around the 16px "i". */
.packing-tip::after { content: ""; position: absolute; inset: -6px; }
.packing-tip > i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--accent-text); background: var(--surface); color: var(--accent-text-hover);
  font: 700 var(--fs-12)/1 var(--font-sans); font-style: normal;
  transition: background var(--transition), color var(--transition);
}
.packing-tip:hover > i, .packing-tip:focus > i { background: var(--clay); color: var(--on-accent); }
.packing-tip:focus-visible > i { box-shadow: var(--focus-ring); }
.packing-tip-pop {
  position: absolute; z-index: 30; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 7px; background: var(--ink); color: var(--on-accent);
  font: 600 var(--fs-12)/1.3 var(--font-sans); white-space: nowrap; text-transform: none; letter-spacing: 0;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition), visibility var(--transition);
}
.packing-tip-pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--text);
}
.packing-tip:hover .packing-tip-pop, .packing-tip:focus .packing-tip-pop { opacity: 1; visibility: visible; }
/* Near a right edge the note opens leftwards; near the top it opens downwards. */
.packing-tip-left .packing-tip-pop { left: auto; right: 0; transform: none; }
.packing-tip-left .packing-tip-pop::after { left: auto; right: 2px; transform: none; }
.packing-tip-down .packing-tip-pop { bottom: auto; top: calc(100% + 9px); }
.packing-tip-down .packing-tip-pop::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); }
.total-row > span:first-child { display: inline-flex; align-items: center; }
.cft-total { display: inline-flex; align-items: center; }
.cft-packing span:last-child { font-size: var(--fs-12); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .packing-tip-pop, .packing-tip > i { transition: none; } }
.od-when { display: grid; gap: 4px; }
.od-when p { font-size: var(--fs-17); font-weight: 700; color: var(--text); }
.od-when small { font-size: var(--fs-12); line-height: 1.4; color: var(--text-secondary); }
.od-mini { display: grid; gap: 4px; font-size: var(--fs-14); color: var(--text); }
.od-mini-label { font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.od-mini .od-fill { margin-top: 4px; }
.od-actions-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.od-rail-foot .btn-outline-sm { min-height: 36px; }
.od-cancel { display: grid; gap: 10px; padding: 4px 2px 0; }
.od-cancel p { font-size: var(--fs-13); color: var(--text-secondary); }
.od-cancel-form { display: grid; gap: 8px; }
.od-cancel-form[hidden] { display: none; }
.od-cancel-form label { font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }
.od-cancel-form textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
}
.od-cancel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.od-cancel-actions .btn { min-height: 38px; padding: 9px 18px; font-size: var(--fs-13); }

/* Narrow screens: one column, so the window scrolls as a whole again and the
   rail's answers sit above the tabs. */
@media (max-width: 900px) {
  .order-detail-modal { display: block; height: auto; max-height: calc(100dvh - 32px); overflow-y: auto; }
  .order-detail-modal .modal-close-btn { position: sticky; float: right; top: 14px; margin: 14px 14px -50px 0; }
  #orderDetailContent { display: block; }
  .od-grid { grid-template-columns: 1fr; }
  .od-panel,
  .od-rail-in { overflow: visible; }
  .od-rail { order: -1; border-left: 0; border-bottom: 1px solid var(--border); }
  .od-rail-in { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .od-rail-foot { border-top: 0; padding-top: 0; }
}
@media (max-width: 640px) {
  .od-head { padding: 18px 60px 16px 20px; }
  .od-head h2 { font-size: var(--fs-20); }
  /* Five tabs do not fit a phone, so the row scrolls; the fade at the right
     edge says there is more, and the end padding lets the last tab clear it. */
  .od-tabs {
    padding: 0 32px 0 8px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  .od-tabs button { padding: 13px 12px; }
  .od-panel { gap: 24px; padding: 22px 20px 30px; }
  .od-rail-in { gap: 12px; padding: 16px 20px 12px; }
  .od-rail-foot { padding: 0 20px 16px; }
  .od-card { gap: 10px; padding: 16px; }
  .od-big { font-size: var(--fs-24); }
  /* Above the tabs on a phone, the rail keeps only its answers; the
     breakdowns are one tap away in Payments and Shipping. */
  .od-card .od-ledger,
  .od-card .od-paybar,
  .od-card .od-mini { display: none; }
  /* Except the packing lines: they explain why the order value grew. */
  .od-card .od-ledger.od-packing { display: grid; }
  .od-progress { padding: 18px 14px; }
  .od-step-label { font-size: var(--fs-12); }
  .od-step-date { display: none; }
  .od-line { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .od-thumb { width: 40px; height: 40px; }
  .od-line-qty { grid-column: 2; grid-row: 2; text-align: left; }
  .od-line-total { grid-column: 3; grid-row: 1; min-width: 0; }
  .od-kv { grid-template-columns: 1fr; gap: 2px; }
  .od-kv dd { margin-bottom: 10px; }
  .od-invoice { grid-template-columns: 1fr; }
}

/* One column: the lines first, then the summary, with the total and the next
   step in a bar along the bottom of the screen so neither is a scroll away. */
@media (max-width: 980px) {
  .cart-page { padding: 18px 16px 120px; }
  .cart-page-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
  .cart-lines-head { display: none; }
  .cart-item { grid-template-columns: minmax(0, 1fr) auto 34px; column-gap: 10px; padding: 14px 14px 12px; }
  .cart-item .ci-space { display: none; }
  .cart-item .ci-controls { grid-column: 1; grid-row: 2; margin-left: 74px; }
  .cart-item .ci-price { grid-column: 2; grid-row: 1; }
  .cart-item .ci-remove { grid-column: 3; grid-row: 1; }
  .ci-name { white-space: normal; }
  .cart-lines-foot { flex-direction: column; align-items: flex-start; }
  .cart-mobile-bar:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-savebar);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgb(var(--shadow-rgb) / .06);
  }
  .cart-mobile-bar div { flex: 1; color: var(--text-secondary); font-size: var(--fs-12); }
  .cart-mobile-bar b { display: block; color: var(--text); font-size: var(--fs-17); font-variant-numeric: tabular-nums; }
}

@media (max-width: 600px) {
  .cart-page-head h1 { font-size: var(--fs-24); }
  .checkout-row-body { margin-left: 0; }
  .confirm-banner h1 { font-size: var(--fs-20); }
  .ci-image { width: 48px; height: 48px; }
  .ci-product { gap: 12px; }
  .cart-item .ci-controls { margin-left: 60px; }
  .ci-note { padding-left: 60px; }
  .form-row {
    grid-template-columns: 1fr;
  }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-header { padding: 24px 20px; flex-wrap: wrap; gap: 14px 18px; }
    .profile-orders-section {
    grid-template-columns: 1fr;
  }
  .profile-shell { flex-direction: column; }
  .profile-nav {
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .profile-nav-group { display: flex; gap: 6px; }
  .profile-nav-group-label { display: none; }
  .profile-nav-btn { width: auto; margin-bottom: 0; white-space: nowrap; }
  .profile-content { padding: 20px 16px; }
  .business-profile-editor,
  .profile-orders-panel {
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .auth-modal-box {
    width: min(100%, 380px);
    max-height: calc(100dvh - 24px);
  }
  .auth-layout {
    display: block;
    height: auto;
    max-height: calc(100dvh - 24px);
  }
  .auth-visual {
    display: none;
  }
  .auth-forms {
    padding: 32px 24px;
    max-height: calc(100dvh - 24px);
  }
  .auth-title {
    font-size: var(--fs-32);
  }
}

/* ── Storefront toast ─────────────────────────────────────────────
   Replaces the alert() dialogs the storefront used for every message.
   Multi-line because the cart's stock notices list one line per product. */
.sf-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 90px);
  max-width: min(92vw, 520px);
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-accent);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-line;
  text-align: left;
  box-shadow: 0 16px 38px rgb(var(--ink-rgb) / .28);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}

.sf-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.sf-toast.success { background: var(--green); }
.sf-toast.warning { background: var(--sf-toast-warning-fill); }
.sf-toast.error   { background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .sf-toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}


/* ── INVOICES (buyer side) ─────────────────────────────────────
   The factory issues an invoice against an order; the buyer reads it here and
   from the chat notice, which links to the same order. */
.order-invoice-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
}
.order-invoice-status.paid { background: rgb(var(--green-rgb) / .12); color: var(--success); }
.order-invoice-status.open { background: var(--order-invoice-status-open-bg); color: var(--order-invoice-status-open-text); }
.order-invoice-status.part { background: var(--order-invoice-status-part-bg); color: var(--order-invoice-status-part-text); }
.order-invoice-status.over { background: rgb(var(--red-rgb) / .12); color: var(--danger); }
.order-invoice-status.void { background: var(--surface-muted); color: var(--text-secondary); text-decoration: line-through; }
.invoice-modal-box {
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  background: var(--invoice-modal-box-bg);
}
.invoice-modal-box .inv-doc { margin: 18px auto; box-shadow: 0 6px 24px rgb(var(--shadow-warm-2-rgb) / .14); }
.invoice-modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--parchment, var(--border));
}

/* ===== BUYER HOME (/home) =====
   The storefront page with no factory: the factories this buyer orders from,
   and My Orders, Messages and Account as the same full-page views the
   storefront uses. body.buyer-home is set before first paint. */
.home-brand { display: none; align-items: center; gap: 14px; min-width: 0; }
.home-logo { display: flex; align-items: center; flex-shrink: 0; }
.home-logo img { height: 27px; width: auto; }
.buyer-home .home-brand { display: flex; }
.buyer-home .factory-wordmark,
.buyer-home .header-search,
.buyer-home #cartBtn,
.buyer-home .storefront-only { display: none !important; }
/* The header's "Home page" button does this job here. */
.buyer-home .orders-view-head > .btn-outline-sm { display: none; }
/* /home never shows the catalog, but the markup has it active until the inline
   script after the hub switches views, and a style pass before that fetched
   the storefront's 190 KB header photo on every first visit. */
.buyer-home #view-catalog { display: none; }

/* Back to the factory list, from Orders, Messages and Account. */
.home-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.home-back:hover { border-color: var(--accent-text); box-shadow: var(--shadow-md); }
.home-back-arrow { width: 16px; height: 16px; color: var(--accent-text-hover); transition: transform .18s ease; }
.home-back:hover .home-back-arrow { transform: translateX(-2px); }
.home-back-stack { display: inline-flex; }
.home-back-stack:empty { display: none; }
.home-back-stack > span {
  width: 24px;
  height: 24px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--clay) center / cover no-repeat;
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: 800;
}
.home-back-stack > span:first-child { margin-left: 0; }
.buyer-home:has(#view-hub.active) .home-back { display: none; }

/* The search lives in the header on /home, beside the logo, and only on the
   factory list itself. */
.home-search { display: none; }
.buyer-home:has(#view-hub.active) .home-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(440px, 100%);
  height: 40px;
  margin: 0 auto;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
}
.buyer-home .home-search:focus-within { border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.home-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.home-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--fs-15); }
.home-search input:focus-visible { box-shadow: none; }
.home-search input::-webkit-search-cancel-button { cursor: pointer; }

/* One page that reflows instead of switching layouts. .hub-layout is a
   reversed, wrapping row: where both fit, the factories take the room and the
   summary sits to their right; where they do not, the summary wraps to the top
   and its two boxes sit side by side, down to a phone. Cards and lists size
   themselves to their content, so nothing here measures the window. */
.hub { max-width: 1120px; margin: 0 auto; padding: 28px 24px 56px; }
.hub-hello { margin-bottom: 14px; }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.hub-tab {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: var(--fs-14); font-weight: 600;
  text-decoration: none; cursor: pointer; transition: var(--transition);
}
.hub-tab:hover { border-color: var(--accent-border); color: var(--text); }
.hub-tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
@media (max-width: 768px) { .hub-tab { min-height: 44px; } }
.hub-hello p { margin: 0 0 4px; font-size: var(--fs-14); color: var(--text-secondary); }
.hub-hello h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--text-strong); }
.hub-layout { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.hub-summary { flex: 1 1 260px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hub-content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hub-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.hub-label { margin: 0 0 8px; font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }

/* The summary: one figure each, a line or two under it, and where to go. */
.hub-stat { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.hub-stat h2 { margin: 0 0 2px; font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }
.hub-stat > div { display: flex; flex-direction: column; gap: 4px; transition: opacity .2s ease; }
.hub-figure { font-size: var(--fs-24); font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.hub-note { margin: 0; font-size: var(--fs-13); line-height: 1.45; color: var(--text-secondary); }
.hub-note.is-late { color: var(--hub-note-is-late-text); font-weight: 600; }
.hub-link { align-self: flex-start; margin-top: 4px; font-size: var(--fs-13); font-weight: 600; color: var(--accent-text-hover); text-decoration: none; }
.hub-link:hover { text-decoration: underline; }
/* Last visit's figures, shown while the fresh ones load (buyer-home.js). */
.hub-summary[aria-busy="true"] .hub-stat > div { opacity: .5; }

/* The status dots, shared by the cards and "Needs you". */
.hub-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--mist); }
.hub-dot.is-live { background: var(--clay); }
.hub-dot.is-late { background: var(--red); }
.hub-dot.is-wait { background: var(--amber); }
.hub-dot.is-idle { background: var(--hub-dot-is-idle-bg); }

/* Needs you: one line per thing, the way to deal with it at the end. */
.hub-todo-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.hub-todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; color: inherit; text-decoration: none; transition: background .15s ease; }
.hub-todo-list li + li .hub-todo-item { border-top: 1px solid var(--border); }
.hub-todo-item:hover { background: var(--surface-sunken); }
.hub-todo-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; box-shadow: none; }
.hub-todo-text { flex: 1 1 220px; min-width: 0; font-size: var(--fs-14); line-height: 1.45; color: var(--text); }
.hub-todo-text b { color: var(--text-strong); font-weight: 600; }
.hub-todo-text span { color: var(--text-secondary); }
.hub-todo-go {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--hub-todo-go-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text-hover);
  font-size: var(--fs-13);
  font-weight: 600;
  text-decoration: none;
}
.hub-todo-item:hover .hub-todo-go { border-color: var(--accent-text); }

/* A card per factory: who, one line of where things stand, the open container. */
/* auto-fit, so two factories share the row rather than leaving a third of it empty. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.hub-factory {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hub-factory:hover { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.hub-factory-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hub-mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--hub-mark-bg);
  color: var(--accent-text-hover);
  font-size: var(--fs-13);
  font-weight: 700;
}
/* Logos are mostly wide wordmarks: a wider box, or they shrink to a smudge. */
.hub-mark.is-logo { width: 66px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.hub-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.hub-factory-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-factory-name b,
.hub-factory-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-factory-name b { font-size: var(--fs-15); font-weight: 600; color: var(--text-strong); }
.hub-factory-name span { font-size: var(--fs-13); color: var(--text-secondary); }
.hub-new { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--hub-new-bg); color: var(--hub-new-text); font-size: var(--fs-12); font-weight: 700; }
.hub-status { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); line-height: 1.4; color: var(--text); }
.hub-box { display: flex; flex-direction: column; gap: 6px; }
.hub-box-line { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-13); color: var(--text-secondary); }
.hub-box-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.hub-bar { height: 5px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.hub-bar i { display: block; height: 100%; border-radius: inherit; background: var(--clay); }
.hub-empty { grid-column: 1 / -1; padding: 28px 20px; border: 1px dashed var(--hub-empty-border); border-radius: 16px; text-align: center; color: var(--text-secondary); }
.hub-empty b { display: block; margin-bottom: 4px; font-size: var(--fs-16); color: var(--text-strong); }
.hub-empty p { max-width: 46ch; margin: 0 auto; font-size: var(--fs-14); }

/* Every other factory: one line until asked for. */
.hub-more { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hub-more-toggle { padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--fs-14); font-weight: 600; color: var(--accent-text-hover); cursor: pointer; }
.hub-more-toggle:hover { text-decoration: underline; }
.hub-more-list { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.hub-more-list[hidden] { display: none; }
.hub-other { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.hub-other:hover { border-color: var(--accent-border); }
.hub-other .hub-mark { width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-12); }
.hub-other .hub-mark.is-logo { width: 54px; }

/* Placeholders while /home loads (index.html), in the catalog's shimmer. */
.hub-factory.is-loading { pointer-events: none; }
.hub-factory.is-loading .hub-mark {
  background: linear-gradient(90deg, var(--skeleton-bar-bg) 30%, var(--skeleton-bar-bg-2) 50%, var(--skeleton-bar-bg) 70%);
  background-size: 300% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-hub-name { width: 55%; height: 15px; }
.skeleton-status { width: 70%; height: 12px; }
.skeleton-stat { width: 96px; height: 26px; margin: 4px 0 6px; }
.skeleton-stat-line { width: 70%; height: 12px; }

/* The header search moves to its own row where the header gets narrow. */
@media (min-width: 769px) and (max-width: 1180px) {
  .home-brand { grid-row: 1; grid-column: 1; }
  .buyer-home:has(#view-hub.active) .home-search { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; }
}
@media (max-width: 768px) {
  .home-brand { grid-row: 1; grid-column: 1; }
  .buyer-home:has(#view-hub.active) .home-search { grid-row: 2; grid-column: 1 / -1; width: 100%; max-width: none; }
  .hub { padding: 20px 16px 40px; }
  .hub-hello { margin-bottom: 16px; }
}
@media (max-width: 560px) {
  /* Off the factory list the back button is the way home, so it takes the
     logo's place rather than squeezing beside it. */
  .buyer-home:not(:has(#view-hub.active)) .home-logo { display: none; }
}

/* ===== STACKABLE SETS & FINISH SWATCHES (sets.js) ===== */
.set-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-accent);
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: .8px;
  text-transform: uppercase;
  pointer-events: none;
}
.set-badge svg { width: 14px; height: 12px; }
.pm-image-side { position: relative; }
.pm-image-side .set-badge { top: 18px; left: 18px; }

.card-subline {
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 600;
}
.card-sets-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-text-hover);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.card-sets-link:hover { text-decoration: underline; }

.finish-dots { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.finish-dots b { font-size: var(--fs-12); color: var(--text-secondary); font-weight: 700; margin-left: 2px; }
.finish-dot {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
/* A 28px hit area around the 16px swatch, for the ones that switch the photo. */
.finish-dot[data-photo]::after { content: ""; position: absolute; inset: -8px; }
.finish-dots.is-live .finish-dot[data-photo] { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.finish-dots.is-live .finish-dot[data-photo]:hover,
.finish-dots.is-live .finish-dot.is-shown { transform: scale(1.18); box-shadow: 0 0 0 1.5px var(--text); }
.card-image-wrap img { transition: opacity .15s ease; }
.finish-code {
  color: var(--text-muted);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .3px;
}

.pm-chooser {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.pm-chooser-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.finish-chip {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: var(--transition);
}



.finish-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.finish-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-weight: 650;
}
.finish-chip i {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(var(--shadow-rgb) / .12);
}
.finish-chip:hover { border-color: var(--accent-text); }
.finish-chip.is-on {
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}
.finish-chip.is-elsewhere { opacity: .5; }
.finish-chip.is-elsewhere:hover { opacity: .85; }
.pm-choice-hint {
  margin: 8px 0 0;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgb(var(--amber-rgb) / .12);
  color: var(--cart-capacity-notice-warning-text);
  font-size: var(--fs-12);
  font-weight: 650;
}

.set-contents {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.also-in-sets { margin: 14px 0 0; }
.set-contents-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.set-contents-head h3 {
  margin: 0;
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}
.set-contents-head span { color: var(--text-secondary); font-size: var(--fs-12); }
.set-contents ul { list-style: none; margin: 0; padding: 0; }
.set-piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
}
.set-piece:first-child { border-top: 0; }
.set-piece > div > b { font-size: var(--fs-14); }
.set-piece-dims { display: block; color: var(--text-secondary); font-size: var(--fs-12); }
.set-piece.is-missing { color: var(--text-muted); }

.piece-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: 750;
  vertical-align: 1px;
}
.piece-tag.is-limit { background: rgb(var(--clay-soft-rgb) / .14); color: var(--accent-text-hover); }
.set-piece-stock { text-align: right; font-variant-numeric: tabular-nums; }
.set-piece-stock b { display: block; font-size: var(--fs-14); }
.set-piece-stock span { color: var(--text-secondary); font-size: var(--fs-12); }
.set-link {
  border: 0;
  padding: 0;
  margin-top: 4px;
  background: none;
  color: var(--accent-text-hover);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: 700;
  cursor: pointer;
}
.set-link:hover { text-decoration: underline; }

.pm-specs-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .pm-specs-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pm-availability { color: var(--text-secondary); font-size: var(--fs-13); }
.pm-availability b { color: var(--text); }

/* Phone catalog: two products a row, so a buyer sees four at a time instead
   of one per screen. Last in the file so it wins over the 768px block. */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 12px; gap: 8px; }
  .card-name { font-size: var(--fs-14); }
  .card-price { font-size: var(--fs-14); white-space: normal; }
  .card-specline { font-size: var(--fs-12); }
  .card-stock-row { flex-wrap: wrap; gap: 6px; }
  .card-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-actions .qty-input-group { justify-content: space-between; }
  .btn-add-minimal { min-height: 44px; padding: 8px 10px; }
  .owner-preview-note { font-size: var(--fs-12); }
}

/* Touch screens: every control at least 44px, the smallest a thumb hits
   reliably. */
@media (max-width: 768px) {
  .header-search { height: 44px; }
  .account-btn { width: 44px; height: 44px; }
  .owner-preview-banner a,
  .sfc-all,
  .filter-toggle-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .sort-select { min-height: 44px; }
  .mini-pager button { width: 44px; height: 44px; }
  .pagination-btn { min-width: 44px; min-height: 44px; }
  .header-icon-btn { width: 44px; height: 44px; }
  .cart-btn { min-height: 44px; }
  .qty-btn { width: 44px; height: 44px; }
}

/* Dark theme. theme.js sets data-theme on <html> from the visitor's choice or,
   on Auto, the system setting. Only colour tokens change, plus the few rules
   after them that need more than a colour. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171411;
  --text: #EEE6DD;
  --surface-sunken: #251F1A;
  --eyebrow-pill-bg: #2D2722;
  --eyebrow-pill-span-text: #D5B470;
  --text-secondary: #CBBFB3;
  --border: #3A322B;
  --surface: #201B17;
  --text-muted: #B1A497;
  --accent-border: #6F523E;
  --accent-text: #E8A274;
  --surface-alt-rgb: 37 31 26;
  --surface-muted: #2E2721;
  --accent-text-hover: #F2BC97;
  --nav-orders-badge-border: #3D352E;
  --account-avatar-border: #463E37;
  --text-strong: #F7F1EA;
  --nav-whatsapp-link-svg-text: #77C788;
  --nav-whatsapp-link-border: #4C6951;
  --nav-whatsapp-link-text: #6CC186;
  --nav-whatsapp-link-hover-text: #76CC90;
  --span-span-text: #E8B08A;
  --filter-box-border: #554D46;
  --filter-switch-track-bg: #3A342F;
  --card-image-wrap-bg: #251F1B;
  --skeleton-bar-bg: #2A2420;
  --skeleton-bar-bg-2: #312B26;
  --shade-rgb: 255 255 255;
  --success: #8FD0AE;
  --cart-remove-text-btn-text: #FB998B;
  --cart-remove-text-btn-hover-text: #FAB3A8;
  --warning: #E0B866;
  --vis-pct-full-text: #E08172;
  --cart-capacity-notice-warning-text: #DFAB63;
  --danger: #F2978A;
  --surface-rgb: 32 27 23;
  --form-hint-error-text: #FA988C;
  --form-hint-ok-text: #77C889;
  --input-error-text: #EB8A7F;
  --input-error-bg: #312B2B;
  --input-ok-text: #66B476;
  --input-ok-bg: #282E2A;
  --loading-option-pro-span-text: #52B788;
  --surface-alt-2-rgb: 35 30 25;
  --auth-error-bg: #332B2B;
  --auth-error-border: #5E3E3E;
  --auth-success-bg: #272F2B;
  --auth-success-border: #3B5943;
  --auth-success-text: #59AE74;
  --btn-account-hover-bg: #2D2823;
  --pstat-accent-bg: #231E19;
  --pstat-green-bg: #282F2B;
  --account-switch-track-bg: #322C28;
  --account-ready-tick-border: #4C433D;
  --account-invoice-paper-bg: #211C17;
  --account-invoice-paper-is-placeholder-text: #9B9087;
  --contract-status-active-bg: #26322A;
  --contract-status-pending-bg: #26211C;
  --header-border: #514942;
  --status-pending-bg: #372D07;
  --status-pending-text: #D1AE60;
  --status-approved-bg: #23372F;
  --status-approved-text: #9FDEB8;
  --status-production-bg: #392C17;
  --status-production-text: #F19F6A;
  --status-loaded-bg: #362B48;
  --status-loaded-text: #CBB9FE;
  --status-shipped-bg: #23334B;
  --status-shipped-text: #90BAFE;
  --status-arrived-bg: #1A352F;
  --status-arrived-text: #8CD5B8;
  --status-declined-bg: #452A2D;
  --status-declined-text: #FDB2B0;
  --mo-steps-i-bg: #402D2B;
  --deposit-badge-is-received-bg: #27332B;
  --deposit-badge-is-received-text: #98D6B3;
  --od-callout-bg: #241E1A;
  --order-invoice-status-open-bg: #2A3035;
  --order-invoice-status-open-text: #94C4EE;
  --order-invoice-status-part-bg: #362D15;
  --order-invoice-status-part-text: #E0AB64;
  --invoice-modal-box-bg: #2C2621;
  --hub-note-is-late-text: #F79687;
  --hub-dot-is-idle-bg: #453E39;
  --hub-todo-go-border: #4E463F;
  --hub-mark-bg: #29241F;
  --hub-new-bg: #2A2420;
  --hub-new-text: #F3B28E;
  --hub-empty-border: #544C45;
  --photo-plate: #DDD5CA;
  --search-icon: #B1A497;
  --container-inside: #2A2420;
  --form-ok: #7FCB95;
}

/* Product photos are white cutouts. On a dark page they would glow, so each
   sits on a soft plate and multiplies into it: the white becomes the plate
   and the frame around it reads as a tile. */
:root[data-theme="dark"] .card-image-wrap,
:root[data-theme="dark"] .sfc-photo,
:root[data-theme="dark"] .ci-image,
:root[data-theme="dark"] .pm-image-side,
:root[data-theme="dark"] .sum-item-img,
:root[data-theme="dark"] .od-thumb,
:root[data-theme="dark"] .cft-thumb,
:root[data-theme="dark"] .sf-head-logo,
:root[data-theme="dark"] .hub-mark.is-logo,
:root[data-theme="dark"] .factory-wordmark-mark.has-logo,
:root[data-theme="dark"] .factory-card-logo,
:root[data-theme="dark"] .directory-logo {
  background-color: var(--photo-plate);
}
:root[data-theme="dark"] .card-image-wrap img,
:root[data-theme="dark"] .sfc-photo img,
:root[data-theme="dark"] .ci-image img,
:root[data-theme="dark"] .pm-image-side img,
:root[data-theme="dark"] .sum-item-img img,
:root[data-theme="dark"] .od-thumb img,
:root[data-theme="dark"] .cft-thumb img,
:root[data-theme="dark"] .hub-mark.is-logo img,
:root[data-theme="dark"] .factory-wordmark-mark.has-logo img,
:root[data-theme="dark"] .factory-card-logo img,
:root[data-theme="dark"] .directory-logo img {
  mix-blend-mode: multiply;
}
/* The wordmark is dark ink; the white one is the same artwork for dark grounds. */
:root[data-theme="dark"] img[src$="ceramify-logo.png"] { content: url("/images/ceramify-logo-white.png"); }