/* Self-hosted Inter — no CDN. Font files at static/fonts/inter/. SIL OFL. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/Inter-Regular.3875f8357497.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.7b7f3cfa2944.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.b72fa2728a8e.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold.66894432e7ff.woff2") format("woff2"); }

/* BlueChimps — scaffold styles. Meets WCAG 2.1 AA contrast and focus visibility. */
:root {
  --bc-blue: #000080;        /* primary brand navy — 16.0:1 on white */
  --bc-blue-600: #000099;    /* hover — a shade lighter; #000080 is too dark to darken visibly */
  --bc-blue-ink: #00004d;    /* darker text shade */
  --bc-wordmark: #1f1d69;    /* indigo of the monkey mark — header wordmark */
  --bc-primary: var(--bc-blue);        /* semantic alias */
  --bc-primary-hover: var(--bc-blue-600);
  --bc-primary-ink: var(--bc-blue-ink);
  --bc-primary-tint: #e0f2fe;          /* light primary fill for CTAs/banners */
  --bc-neutral-50: #f8fafc;
  --bc-neutral-100: #f1f5f9;
  --bc-neutral-200: #e2e8f0;
  --bc-warn-bg: #fef3c7;
  --bc-warn-ink: #713f12;
  --bc-warn-border: #f59e0b;
  --bc-ink: #0f172a;         /* body text — 16:1 on white */
  --bc-mute: #475569;        /* muted text — 7:1 on white (AA for body) */
  --bc-bg: #f8fafc;
  --bc-card: #ffffff;
  --bc-border: #64748b;      /* 4.86:1 on white — WCAG 1.4.11 UI */
  --bc-accent: #b45309;      /* 4.77:1 on white — WCAG 2.1 1.4.11 UI */      /* focus ring — high contrast yellow */
  --bc-success: #166534;
  --bc-error: #991b1b;

  /* ---- Note 1 design tokens (Batch 28 redesign) ---------------------- */
  --brand-navy: var(--bc-blue);                          /* logo navy */
  --hero-dark: #0a0e1a;                                  /* near-black hero bg */
  --accent-gradient: linear-gradient(135deg, #818cf8, #c084fc);  /* PO span */
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --border: #e5e7eb;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-on-dark: #f1f5f9;
  --text-muted-on-dark: rgba(255,255,255,0.7);
  --text-eyebrow-dark: rgba(255,255,255,0.55);

  /* Radii */
  --r-btn: 8px;
  --r-input: 8px;
  --r-card: 12px;
  --r-hero: 16px;
  --r-pill: 999px;

  /* Typography */
  --type-hero: clamp(2.5rem, 5vw + 1rem, 5rem);          /* 64-80px scale */
  --type-h1: clamp(2rem, 2vw + 1rem, 2.5rem);
  --type-h2: 1.5rem;
  --type-h3: 1.125rem;
  --type-body: 1rem;
  --type-sm: 0.875rem;
  --type-eyebrow: 0.8rem;
  --lh-hero: 1.05;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows */
  --shadow-rest: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.08);

  /* Status pill palette (Note 1 product card) */
  --pill-instock-bg: #dcfce7;
  --pill-instock-fg: #166534;
  --pill-new-bg: #dbeafe;
  --pill-new-fg: #1e40af;
  --pill-bulk-bg: #e0f2fe;
  --pill-bulk-fg: #075985;
  --pill-limited-bg: #fee2e2;
  --pill-limited-fg: #991b1b;
  --pill-backorder-bg: #f1f5f9;
  --pill-backorder-fg: #475569;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--bc-ink); background: var(--bc-bg); line-height: 1.5; }
a { color: var(--bc-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--bc-blue-600); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bc-skip-link { position: absolute; top: -40px; left: 0; background: var(--bc-blue); color: white; padding: 0.5rem 1rem; z-index: 100; transition: top 0.2s; }
.bc-skip-link:focus { top: 0; }

/* .bc-header structural props live in the Batch 28 header block below. */
.bc-logo { display: flex; flex-direction: row; align-items: center; gap: 9px; text-decoration: none; }
.bc-wordmark { font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--bc-wordmark); letter-spacing: -0.015em; }
.bc-tagline { font-weight: 400; color: var(--bc-mute); font-size: 0.75rem; }
.bc-search { flex: 1; display: flex; gap: 0.5rem; min-width: 200px; }
.bc-search input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--bc-border); border-radius: 4px; font: inherit; }
.bc-search button { padding: 0.5rem 1rem; background: var(--bc-blue); color: white; border: 0; border-radius: 4px; cursor: pointer; }
.bc-search button:hover { background: var(--bc-blue-600); }
.bc-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bc-nav a { text-decoration: none; color: var(--bc-ink); font-weight: 500; }
.bc-nav a:hover { color: var(--bc-blue); }
.bc-link-btn { background: none; border: 0; padding: 0; color: var(--bc-ink); font: inherit; cursor: pointer; text-decoration: none; }
.bc-link-btn:hover { color: var(--bc-blue); }
.bc-cart-link { font-weight: 600; color: var(--bc-blue) !important; display: inline-flex; align-items: center; gap: 0.25rem; }
.bc-cart-count { display: inline-block; background: var(--bc-blue); color: white; border-radius: 999px; padding: 0 0.5rem; font-size: 0.75rem; min-width: 1.5rem; text-align: center; }
.bc-banner-proto { background: var(--bc-warn-bg); color: var(--bc-warn-ink); text-align: center; padding: 0.4rem; font-size: 0.875rem; border-bottom: 1px solid var(--bc-warn-border); }
.bc-main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.bc-main:focus-visible { outline: none; }
/* (plain .bc-hero rules removed — no template uses it; the live hero is
   .bc-hero-shell, Batch 28) */
.bc-hero-lead { max-width: 60ch; color: var(--bc-mute); font-size: 1.125rem; }
/* (pre-redesign `.bc-how ol/li` text-list rules removed — they outranked
   .bc-steps/.bc-step and squeezed the step-card grid to 60ch) */
.bc-btn { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 4px; background: var(--bc-neutral-200); border: 1px solid transparent; color: var(--bc-ink); text-decoration: none; cursor: pointer; font: inherit; font-weight: 500; }
.bc-btn:hover { background: var(--bc-border); }
.bc-btn-primary { background: var(--bc-blue); color: white; }
.bc-btn-primary:hover { background: var(--bc-blue-600); color: white; }
.bc-btn-sm { padding: 0.25rem 0.6rem; font-size: 0.875rem; }
/* (scaffold .bc-grid/.bc-card/.bc-price rules removed — superseded by the
   Batch 28 product-card component; .bc-card h3 / article-element selectors
   were out-ranking the new .bc-card-title on specificity) */
.bc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .bc-layout { grid-template-columns: 1fr; } }
.bc-table { width: 100%; border-collapse: collapse; }
.bc-table th, .bc-table td { padding: 0.6rem; border-bottom: 1px solid var(--bc-border); text-align: left; }
.bc-table th { background: var(--bc-neutral-100); font-weight: 600; }
.bc-form label { display: block; margin-bottom: 0.75rem; font-weight: 500; }
.bc-form input, .bc-form textarea, .bc-form select { display: block; width: 100%; max-width: 480px; padding: 0.5rem; border: 1px solid var(--bc-border); border-radius: 4px; font: inherit; margin-top: 0.25rem; }
.bc-badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-weight: 600; font-size: 0.875rem; }
.bc-badge-expired { background: #fee2e2; color: var(--bc-error); }
.bc-badge-active { background: #dcfce7; color: var(--bc-success); }
.bc-messages { list-style: none; padding: 0.5rem 1rem; background: var(--bc-primary-tint); margin: 0; }
.bc-msg-error { color: var(--bc-error); }
/* (scaffold .bc-footer removed — Batch 28 footer component below) */
.bc-cookie { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid var(--bc-border); padding: 1rem 1.25rem; font-size: 0.9rem; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08); z-index: 50; }
.bc-cookie[hidden] { display: none !important; }
.bc-cookie-text { margin: 0; max-width: 55ch; color: var(--bc-ink); }
.bc-cookie-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bc-cookie-dialog { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.bc-cookie-dialog[hidden] { display: none !important; }
.bc-cookie-dialog-inner { background: white; border-radius: 8px; padding: 1.5rem; max-width: 34rem; width: 100%; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25); }
.bc-cookie-dialog-inner h2 { margin-top: 0; color: var(--bc-blue-ink); }
.bc-pref-row { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.75rem; }
.bc-pref-row input[type=checkbox] { margin-top: 0.25rem; }
.bc-pref-row label { font-weight: 400; }
.bc-legal { max-width: 62ch; }
.bc-legal section { margin-top: 1.5rem; }
.bc-legal h2 { color: var(--bc-blue-ink); font-size: 1.15rem; }
.bc-legal code { background: var(--bc-neutral-100); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.85em; }
.bc-cta { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--bc-primary-tint); border-radius: 8px; }
/* (.bc-product-img removed — superseded by .bc-pdp-imgwell, see Component 8 note) */
.bc-crumbs { font-size: 0.875rem; color: var(--bc-mute); margin-bottom: 0.5rem; }
.bc-sku { font-family: ui-monospace, monospace; color: var(--bc-mute); font-size: 0.875rem; }

.bc-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; color: var(--bc-blue); margin: 0 0 0.5rem; }
.bc-hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.bc-btn-ghost { background: transparent; border: 1px solid var(--bc-blue); color: var(--bc-blue); }
.bc-btn-ghost:hover { background: var(--bc-blue); color: white; }
/* (scaffold .bc-pillars rules removed — Batch 28 trust-strip component;
   the article h2/p element selectors out-ranked .bc-pillar-title/-body) */
.bc-link { color: var(--bc-blue); font-weight: 600; }

/* --- accessible form fields --- */
.bc-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; }
.bc-field { margin-bottom: 1rem; }
.bc-field label { display: block; font-weight: 500; margin-bottom: 0.35rem; }
.bc-field input, .bc-field textarea, .bc-field select { display: block; width: 100%; max-width: 28rem; padding: 0.5rem 0.6rem; border: 1px solid var(--bc-border); border-radius: 4px; font: inherit; background: white; color: var(--bc-ink); }
.bc-field input:focus-visible, .bc-field textarea:focus-visible, .bc-field select:focus-visible { outline: 3px solid var(--bc-accent); outline-offset: 2px; border-color: var(--bc-blue); }
.bc-field-error input, .bc-field-error textarea, .bc-field-error select { border-color: var(--bc-error); }
.bc-required { color: var(--bc-error); font-weight: 700; }
.bc-error { color: var(--bc-error); background: #fef2f2; border: 1px solid #fecaca; padding: 0.6rem 0.75rem; border-radius: 4px; margin: 0.25rem 0 0; font-size: 0.9rem; }
.bc-help { color: var(--bc-mute); font-size: 0.85rem; margin: 0.25rem 0 0; }
.bc-help-inline { color: var(--bc-mute); font-weight: 400; font-size: 0.85rem; }
.bc-inline-form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0; }
.bc-summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; max-width: 30rem; }
.bc-summary dt { color: var(--bc-mute); }
.bc-summary dd { margin: 0; }
.bc-timeline { padding-left: 1.1rem; }
.bc-timeline li { margin-bottom: 0.35rem; color: var(--bc-ink); }
.bc-timeline time { color: var(--bc-mute); font-variant-numeric: tabular-nums; }

.bc-recent { margin: 1.5rem 0 0.75rem; }
.bc-recent h2 { font-size: 1.15rem; color: var(--bc-blue-ink); margin: 0 0 0.5rem; }
.bc-recent-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bc-recent[hidden] { display: none; }


/* ---- Logo image ---- */
.bc-logo-img { height: 40px; width: auto; display: block; }

/* ---- Empty states ---- */
.bc-empty { text-align: center; padding: 3rem 1rem; color: var(--bc-mute); }
.bc-empty-title { font-size: 1.5rem; color: var(--bc-primary-ink); margin: 0 0 0.5rem; }
.bc-empty-body { max-width: 40ch; margin: 0 auto 1rem; }
.bc-empty-cta { margin-top: 1rem; }

/* ---- Prototype access gate (Layer 1) ---- */
.bc-gate { max-width: 26rem; margin: 4rem auto; text-align: center; }
.bc-gate-title { font-size: var(--type-h1); font-weight: 700; color: var(--navy, var(--bc-blue-ink)); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.bc-gate-lead { color: var(--bc-mute); margin: 0 0 1.5rem; }
.bc-gate .bc-form { text-align: left; }
.bc-gate .bc-field input { max-width: none; }
.bc-gate .bc-btn-primary { width: 100%; }

/* ---- Reports (Batch 28 design language) ---- */
.bc-report-scope { color: var(--text-secondary); font-size: var(--type-sm); margin: 0.25rem 0 1.5rem; }
/* Order page: the packing-slip link under the title (feedback #96). Pulled up
   into the status line's bottom margin so the page does not grow a gap. */
.bc-order-top-actions { margin: -0.75rem 0 1.5rem; }
.bc-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bc-report-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: var(--type-sm); color: var(--text-secondary); }
.bc-report-controls select, .bc-report-qinput { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--r-input); font: inherit; background: var(--surface); }

/* elevated panel so tables read like the site's cards */
.bc-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-rest); overflow: hidden; }
.bc-rtable { width: 100%; border-collapse: collapse; font-size: var(--type-sm); }
.bc-rtable thead th { background: var(--surface-muted); color: var(--brand-navy); font-weight: 600; text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bc-rtable tbody td, .bc-rtable tbody th { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; color: var(--text-primary); }
.bc-rtable tbody tr:last-child td, .bc-rtable tbody tr:last-child th { border-bottom: 0; }
.bc-rtable tbody tr:hover { background: var(--surface-muted); }
.bc-rtable tfoot th, .bc-rtable tfoot td { padding: 0.7rem 0.9rem; font-weight: 700; background: var(--surface-muted); border-top: 2px solid var(--border); }
.bc-rtable th.bc-num, .bc-rtable td.bc-num { text-align: right; }

.bc-num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
.bc-num a { color: var(--brand-navy); text-decoration: none; }
.bc-num a:hover { text-decoration: underline; }
.bc-trend-up { color: var(--bc-success); font-weight: 600; }
.bc-trend-down { color: var(--bc-error); font-weight: 600; }
.bc-trend-new { color: var(--brand-navy); font-weight: 600; }
.bc-trend-flat { color: var(--text-secondary); }
.bc-report-note { font-size: 12px; color: var(--text-secondary); max-width: 80ch; margin: 0.9rem 0 0; }

.bc-card.bc-report-feature { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; }
.bc-card.bc-report-feature > div:first-child { flex: 1 1 34ch; min-width: 0; text-align: left; }
.bc-report-feature .bc-card-title { font-size: var(--type-h3); }
.bc-report-feature-body { color: var(--text-secondary); font-size: 0.95rem; line-height: var(--lh-body); margin: 0.4rem 0 0; max-width: 60ch; }
.bc-report-feature-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.bc-report-h2 { margin-top: 2.25rem; }
.bc-report-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: 0.85rem; }
@media (max-width: 720px) { .bc-report-cards { grid-template-columns: 1fr; } }
.bc-card.bc-report-card { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; }
.bc-card.bc-report-feature, .bc-card.bc-report-card { overflow: visible; }
.bc-card.bc-report-feature:hover, .bc-card.bc-report-card:hover { transform: none; box-shadow: var(--shadow-rest); }
.bc-report-card .bc-report-form, .bc-report-card .bc-report-actions { margin-top: auto; }
.bc-report-card .bc-card-title { font-size: var(--type-h3); }
.bc-report-card-body { color: var(--text-secondary); font-size: var(--type-sm); line-height: var(--lh-body); margin: 0.3rem 0 0.85rem; }
.bc-report-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
.bc-report-form label { font-size: var(--type-sm); color: var(--text-secondary); display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; }
.bc-report-form input, .bc-report-form select { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--r-input); font: inherit; background: var(--surface); color: var(--text-primary); }
.bc-report-form button { align-self: flex-start; margin-top: 0.2rem; }
.bc-report-form .bc-report-check input { width: auto; }
.bc-report-check { flex-direction: row !important; align-items: center; gap: 0.45rem !important; }
.bc-report-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Floating feedback button ---- */
.bc-fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.bc-fab > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: var(--brand-navy, var(--bc-blue)); color: #fff; font: 500 13px/1 Inter, sans-serif; padding: 11px 16px; border-radius: 999px; box-shadow: var(--shadow-hover, 0 8px 24px rgba(0,0,0,0.18)); }
.bc-fab > summary::-webkit-details-marker { display: none; }
.bc-fab > summary:hover, .bc-fab[open] > summary { background: var(--bc-blue-ink, #00004d); }
.bc-fab-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 320px; max-width: 86vw; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-card, 12px); box-shadow: var(--shadow-hover, 0 12px 32px rgba(15,23,42,0.18)); padding: 16px; }
.bc-fab-title { font-weight: 600; color: var(--text-primary, var(--bc-ink)); margin: 0 0 2px; }
.bc-fab-sub { font-size: 12px; color: var(--text-secondary, var(--bc-mute)); margin: 0 0 10px; }
.bc-fab-panel textarea, .bc-fab-panel input { width: 100%; border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-input, 8px); padding: 8px 10px; font: inherit; margin-bottom: 10px; resize: vertical; }
.bc-fab-result { font-size: 14px; color: var(--bc-success, #166534); margin: 0; padding: 6px 0; }
.bc-fab-result.bc-fb-error { color: var(--bc-error, #991b1b); }
@media (max-width: 600px) { .bc-fab-btn-label { display: none; } .bc-fab { right: 14px; bottom: 14px; } }

/* ---- Settings / console lists ---- */
.bc-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--type-sm); }
.bc-member-list .bc-status { margin-left: 0.35rem; }

/* ---- Sortable tables ---- */
.bc-sortable thead th[role="button"] { cursor: pointer; user-select: none; }
.bc-sortable thead th[role="button"]:hover { color: var(--accent-deep, var(--bc-blue-ink)); }
.bc-sortable thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.65em; vertical-align: middle; }
.bc-sortable thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.65em; vertical-align: middle; }

/* ---- Order progress checklist ---- */
.bc-order-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .bc-order-grid { grid-template-columns: 1fr; } }
.bc-progress-panel { padding: 1.25rem 1.5rem; }
.bc-progress-h { margin: 0 0 0.75rem; font-size: var(--type-h3); color: var(--brand-navy, var(--bc-blue-ink)); }
.bc-checklist { list-style: none; margin: 0; padding: 0; }
.bc-check { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--border, var(--bc-border)); }
.bc-check:last-child { border-bottom: 0; }
.bc-check-box { flex: none; width: 1.35rem; height: 1.35rem; border: 2px solid var(--border, var(--bc-border)); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--surface, #fff); transform: translateY(0.2rem); }
.bc-check.is-done .bc-check-box { background: var(--bc-success, #166534); border-color: var(--bc-success, #166534); }
.bc-check.is-current .bc-check-label { font-weight: 600; color: var(--brand-navy, var(--bc-blue-ink)); }
.bc-check-label { display: flex; flex-direction: column; }
.bc-check-at { font-size: 12px; color: var(--text-secondary, var(--bc-mute)); font-weight: 400; }
.bc-progress-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.bc-progress-done { color: var(--bc-success, #166534); font-weight: 600; margin: 0; }
.bc-progress-cell { display: inline-flex; align-items: center; gap: 0.5rem; }
.bc-progress-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--surface-muted, #eef2f7); overflow: hidden; display: inline-block; }
.bc-progress-bar > span { display: block; height: 100%; background: var(--bc-success, #166534); }

/* ---- Quote detail: two-pane + PDF preview ---- */
/* Working area gets the room; the preview is a reference, not the point.
   Was 1fr / 1.15fr, which gave the PDF MORE width than the item grid and
   squeezed item names into one-word-per-line towers with the line total and
   Remove column pushed under the preview. */
.bc-quote-detail { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
/* Long item names must wrap inside their own cell and the table must never
   spill under the preview column. */
.bc-quote-lines { overflow-x: auto; }
.bc-quote-lines table { min-width: 640px; }
.bc-cell-item { min-width: 220px; overflow-wrap: anywhere; }
/* The preview column holds a new-tab link and, after it, the collapsible
   preview. The link lives outside the <details> so it shows whether the
   preview is open or closed (feedback #46). Open, the preview takes the
   column's full width, which leaves the link alone on the line above it,
   pushed right by its auto margin. Closed, the two share the slim bar. */
.bc-quote-side { position: sticky; top: 1rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.bc-quote-preview { min-width: 0; }
.bc-quote-preview[open] { flex: 1 0 100%; }
.bc-quote-preview > summary { cursor: pointer; font-weight: 600; color: var(--bc-blue); }
.bc-quote-preview[open] > summary { margin-bottom: 0.5rem; }
.bc-quote-newtab { margin-left: auto; font-size: 0.875rem; white-space: nowrap; }
.bc-pdf-frame { width: 100%; height: 70vh; min-height: 520px; border: 1px solid var(--border, var(--bc-border)); border-radius: var(--r-card, 12px); box-shadow: var(--shadow-rest, 0 1px 2px rgba(0,0,0,0.05)); background: var(--surface-muted, #f8f9fb); }
/* Feedback #46: "too tiny, and just duplicates what's in the grid." Closed,
   the preview stops holding a column open — before, closing it left the item
   grid at three quarters of the page beside an empty strip. The grid takes
   the whole width and the preview folds to a slim bar at the top right.
   Sticky only while open: a closed bar has nothing to keep in view.
   Keyed on the open attribute itself with :has(), so the native toggle
   relays the page out without any script. */
.bc-quote-detail:has(> .bc-quote-side > .bc-quote-preview:not([open])) { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
.bc-quote-side:has(> .bc-quote-preview:not([open])) { position: static; order: -1; justify-self: end; padding: 0.3rem 0.9rem; border: 1px solid var(--border, var(--bc-border)); border-radius: 999px; background: var(--surface-muted, #f8f9fb); }
/* Narrow screens already stack the preview under everything else, open or
   closed. Pulling only the closed bar to the top would make it jump to the
   bottom of the page the moment it is opened, so it stays where it was.
   minmax(0, 1fr), not 1fr: a plain 1fr column grows to the line table's
   640px minimum and the whole page scrolls sideways on a phone, where the
   table's own overflow-x should scroll instead. */
@media (max-width: 1200px) { .bc-quote-detail { grid-template-columns: minmax(0, 1fr); } .bc-quote-side { position: static; } .bc-quote-side:has(> .bc-quote-preview:not([open])) { order: 0; } .bc-pdf-frame { height: 70vh; } }

/* ---- Error pages (404 / 500) ---- */
.bc-error-page { text-align: center; padding: 4rem 1rem; max-width: 640px; margin: 0 auto; }
.bc-error-code { font-size: 5rem; font-weight: 800; color: var(--bc-primary); margin: 0; letter-spacing: -0.03em; line-height: 1; }
.bc-error-title { font-size: 1.75rem; margin: 0.5rem 0 1rem; color: var(--bc-primary-ink); }
.bc-error-body { color: var(--bc-mute); max-width: 50ch; margin: 0 auto 1.5rem; line-height: 1.6; }

/* Honeypot field — invisible to humans, present in HTML for bots. */
.bc-honeypot,
.bc-honeypot:focus,
label[for*="website_url"] {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* ---- Pagination (catalog list / category / search) ---- */
.bc-pagination { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 0.5rem; }
.bc-pagination a, .bc-pagination .bc-page-current, .bc-pagination .bc-page-gap { display: inline-block; padding: 0.4rem 0.7rem; border-radius: 4px; font-size: 0.9rem; text-decoration: none; }
.bc-pagination a.bc-page { color: var(--bc-ink); border: 1px solid var(--bc-border); }
.bc-pagination a.bc-page:hover { background: var(--bc-neutral-100); color: var(--bc-blue); }
.bc-pagination .bc-page-current { background: var(--bc-blue); color: white; font-weight: 600; border: 1px solid var(--bc-blue); }
.bc-pagination .bc-page-gap { color: var(--bc-mute); padding: 0.4rem 0.3rem; }
.bc-pagination .bc-page-summary { margin-left: auto; color: var(--bc-mute); font-size: 0.875rem; }
@media (max-width: 600px) { .bc-pagination .bc-page-summary { margin-left: 0; flex-basis: 100%; text-align: center; } }


/* ---- Component 2: Header (Batch 28) ---- */
/* Feedback #73: the text links sit on the brand's row, above the search box,
   rather than sharing one line with it. They were centred at first; since
   2 Oct 2026 they are back at the right-hand edge, where a visitor looks for
   Sign in and the quote button. The search box keeps its own row. The header
   keeps its three children in source order (logo, search, nav) for the skip
   link and screen readers; grid areas rearrange only what is painted. */
.bc-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nav"
    "search search";
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.75rem var(--s-5) 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-3);
}
.bc-header .bc-logo { grid-area: logo; }
.bc-header .bc-nav { grid-area: nav; justify-content: flex-end; }
.bc-header .bc-search { grid-area: search; max-width: 880px; justify-self: center; width: 100%; }
@media (max-width: 720px) {
  .bc-header { grid-template-columns: 1fr; grid-template-areas: "logo" "nav" "search"; }
  .bc-header .bc-nav { justify-content: flex-start; }
}
.bc-header .bc-search { gap: var(--s-2); }
.bc-header .bc-search input {
  height: 56px;
  padding: 0 var(--s-4);
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--type-body);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.bc-header .bc-search input:focus-visible {
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(11, 79, 158, 0.15);
}
.bc-header .bc-search button {
  height: 56px;
  padding: 0 var(--s-5);
  border-radius: var(--r-btn);
  font-size: var(--type-sm);
  font-weight: 600;
}
.bc-header .bc-nav { gap: var(--s-4); }
.bc-header .bc-nav a:not(.bc-cart-link) {
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--type-sm);
}
.bc-header .bc-nav a:not(.bc-cart-link):hover { color: var(--brand-navy); }
.bc-header .bc-cart-link {
  background: var(--brand-navy);
  color: white !important;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--type-sm);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  transition: background 150ms ease;
}
.bc-header .bc-cart-link:hover { background: var(--bc-blue-600); }
.bc-header .bc-cart-link .bc-cart-count {
  background: rgba(255, 255, 255, 0.22);
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0 0.45rem;
  min-width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  border-radius: var(--r-pill);
  text-align: center;
}
@media (max-width: 720px) {
  .bc-header .bc-search input { height: 48px; }
  .bc-header .bc-search button { height: 48px; padding: 0 var(--s-4); }
  .bc-header .bc-nav { gap: var(--s-3); flex-wrap: wrap; }
}


/* ---- Component 3: Hero (Batch 28) ---- */
.bc-hero-shell {
  position: relative;
  background: var(--hero-dark);
  border-radius: var(--r-hero);
  color: var(--text-on-dark);
  padding: var(--s-6) var(--s-6);
  margin: var(--s-4) 0 var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  overflow: hidden;
}
.bc-hero-content { display: flex; flex-direction: column; gap: var(--s-4); max-width: 520px; }
.bc-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--type-eyebrow);
  font-weight: 600;
  color: var(--text-eyebrow-dark);
  margin: 0;
}
.bc-hero-headline {
  font-size: var(--type-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
  color: var(--text-on-dark);
}
.bc-accent-grad {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bc-hero-shell .bc-hero-lead {
  color: var(--text-muted-on-dark);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  max-width: 480px;
  margin: 0;
  font-weight: 400;
}
.bc-hero-shell .bc-hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 0; }
.bc-btn-hero {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-btn);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--type-body);
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}
.bc-btn-hero-primary {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--surface);
}
.bc-btn-hero-primary:hover { transform: translateY(-1px); color: var(--text-primary); }
.bc-btn-hero-ghost {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid rgba(255,255,255,0.5);
}
.bc-btn-hero-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text-on-dark); }
.bc-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.bc-hero-visual svg { width: 100%; max-width: 360px; height: auto; }
@media (max-width: 900px) {
  .bc-hero-shell { grid-template-columns: 1fr; padding: var(--s-5) var(--s-5); }
  .bc-hero-visual { order: 2; }
  .bc-hero-headline { font-size: clamp(2rem, 6vw + 1rem, 3rem); }
}


/* ---- Component 4: Trust strip (Batch 28) ---- */
.bc-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0;
  padding: 0;
  border: 0;
}
.bc-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bc-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--brand-navy);
}
.bc-pillar-title {
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--brand-navy);
  margin: 0;
  letter-spacing: -0.005em;
}
.bc-pillar-body {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text-secondary);
  margin: 0;
}
.bc-pillar-body a { color: var(--brand-navy); font-weight: 500; }
@media (max-width: 900px) {
  .bc-pillars { grid-template-columns: 1fr; gap: var(--s-3); }
}


/* ---- Component 5: How it works (Batch 28) ---- */
.bc-section-title {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
}
.bc-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.bc-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bc-step-num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: "tnum" 1;
}
.bc-step-title {
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}
.bc-step-body {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
}
.bc-how-cta { margin: var(--s-4) 0 0; }
@media (max-width: 1024px) { .bc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .bc-steps { grid-template-columns: 1fr; } }


/* ---- Component 6: Product card (Batch 28) ---- */
.bc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) { .bc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }
@media (max-width: 600px)  { .bc-grid { grid-template-columns: 1fr; gap: var(--s-3); } }

.bc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition: transform 200ms ease, box-shadow 200ms ease;
  position: relative;
}
.bc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.bc-card-link {
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2);
  position: relative;
}
.bc-card-pill {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bc-pill-instock   { background: var(--pill-instock-bg);   color: var(--pill-instock-fg); }
.bc-pill-new       { background: var(--pill-new-bg);       color: var(--pill-new-fg); }
.bc-pill-bulk      { background: var(--pill-bulk-bg);      color: var(--pill-bulk-fg); }
.bc-pill-limited   { background: var(--pill-limited-bg);   color: var(--pill-limited-fg); }
.bc-pill-backorder { background: var(--pill-backorder-bg); color: var(--pill-backorder-fg); }

.bc-card-imgwell {
  background: var(--surface-muted);
  border-radius: calc(var(--r-card) - 4px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--s-2);
}
.bc-card-imgwell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bc-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: var(--s-1) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bc-card-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-navy);
  margin: 0 0 var(--s-1);
}
.bc-card-add {
  /* top:auto pins the Add button to the card bottom so buttons align
     across a grid row (was the scaffold's `.bc-card form` rule) */
  margin: auto 0 0;
  padding: 0 var(--s-2) var(--s-2);
}
.bc-card-add-btn {
  width: 100%;
  padding: 0.55rem 1rem;
  background: var(--surface-muted);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  font-size: var(--type-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bc-card-add-btn:hover { background: var(--brand-navy); color: white; border-color: var(--brand-navy); }


/* ---- Component 7: Product row sections (Batch 28) ---- */
.bc-row { margin: var(--s-5) 0 var(--s-4); }
.bc-row + .bc-row { margin-top: var(--s-4); }
.bc-related { margin: var(--s-5) 0 0; }


/* ---- Component 8: PDP (Batch 28) ---- */
.bc-pdp { margin: var(--s-4) 0; }
.bc-pdp .bc-crumbs { margin-bottom: var(--s-3); font-size: var(--type-sm); color: var(--text-secondary); }
.bc-pdp .bc-crumbs a { color: var(--text-secondary); }
.bc-pdp .bc-crumbs a:hover { color: var(--brand-navy); }

.bc-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.bc-pdp-image {
  position: sticky;
  top: 80px;
}
.bc-pdp-imgwell {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  overflow: hidden;
}
.bc-pdp-imgwell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bc-pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
}
.bc-pdp-info .bc-card-pill {
  position: static;
  align-self: flex-start;
}
.bc-pdp-title {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}
.bc-pdp-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.bc-pdp-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-sm);
  color: var(--text-secondary);
  margin: 0;
}
.bc-pdp-summary {
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin: 0;
}
.bc-pdp-form {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.bc-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  overflow: hidden;
  background: var(--surface);
}
.bc-qty-btn {
  width: 44px;
  background: var(--surface);
  border: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
}
.bc-qty-btn:hover { background: var(--surface-muted); }
.bc-qty-input {
  width: 64px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  font: inherit;
  font-weight: 600;
  background: var(--surface);
  -moz-appearance: textfield;
  appearance: textfield;
}
.bc-qty-input::-webkit-outer-spin-button,
.bc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bc-pdp-add {
  flex: 1;
  min-width: 220px;
  padding: 0 var(--s-5);
  height: 48px;
  background: var(--brand-navy);
  color: white;
  border: 0;
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: var(--type-body);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.bc-pdp-add:hover { background: var(--bc-blue-600); transform: translateY(-1px); }

.bc-pdp-details {
  margin: var(--s-5) 0;
  max-width: 70ch;
}
.bc-pdp-details p {
  color: var(--text-primary);
  line-height: var(--lh-body);
}

@media (max-width: 900px) {
  .bc-pdp-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .bc-pdp-image { position: static; }
  .bc-pdp-add { min-width: 0; width: 100%; }
}

/* Hide the legacy .bc-product-img float style — superseded by the new
   .bc-pdp-imgwell. Keep the rule absent rather than empty so we don't
   ship dead CSS. The float-right class no longer renders. */


/* ---- Component 9: Footer (Batch 28) ---- */
.bc-footer {
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  padding: var(--s-5) var(--s-5);
  text-align: left;
  color: var(--text-primary);
  margin-top: var(--s-5);
}
.bc-footer-inner {
  display: grid;
  /* As many equal columns as there are sections (four with "Follow us"). */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-5);
  max-width: 1100px;
  margin: 0 auto;
}
.bc-footer-col h2.bc-footer-h {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin: 0 0 var(--s-3);
}
.bc-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.bc-footer-col a, .bc-footer-col button {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--type-sm);
}
.bc-footer-col a:hover, .bc-footer-col button:hover { color: var(--brand-navy); }
.bc-footer-social a { display: inline-flex; align-items: center; gap: var(--s-2); }
.bc-footer-social .bc-social-icon { flex: none; }
.bc-footer-meta {
  max-width: 1100px;
  margin: var(--s-4) auto 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--type-sm);
}
.bc-footer-meta p { margin: 0; }
@media (max-width: 720px) {
  .bc-footer-inner { grid-template-columns: 1fr; gap: var(--s-4); }
}


/* ---- search.html admin notice (neutralized from orange to muted) ---- */
.bc-admin-notice {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-btn);
  margin: 0 0 var(--s-4);
  font-size: var(--type-sm);
  color: var(--text-secondary);
}
.bc-admin-notice strong { color: var(--text-primary); }


/* ---- Stephanie customer-signup prompt (Section 21.2) ---- */
.bc-prompt-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid;
  border-image: var(--accent-gradient) 1;
  border-radius: var(--r-card);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  box-shadow: var(--shadow-rest);
}
.bc-prompt-body { flex: 1; min-width: 0; }
.bc-prompt-title {
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.005em;
}
.bc-prompt-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: var(--lh-body);
}
.bc-prompt-cta {
  background: var(--brand-navy);
  color: white;
  border: 1px solid var(--brand-navy);
  white-space: nowrap;
  padding: 0.65rem 1.1rem;
  font-size: var(--type-sm);
}
.bc-prompt-cta:hover { background: var(--bc-blue-600); border-color: var(--bc-blue-600); color: white; }
@media (max-width: 720px) {
  .bc-prompt-card { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .bc-prompt-cta { width: 100%; text-align: center; }
}


/* ---- §21.1 Search dropdown wiring fix (Batch 28+) ---- */
.bc-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.bc-search-input-wrap input { width: 100%; }
.bc-ac-wrap {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
}
.bc-ac-wrap:empty { display: none; }
.bc-ac-results {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hover);
  max-height: min(60vh, 480px);
  overflow-y: auto;
}
.bc-ac-results[hidden] { display: none; }
.bc-ac-item { padding: 0; }
.bc-ac-item a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  color: var(--text-primary);
  text-decoration: none;
}
.bc-ac-item a:hover { background: var(--surface-muted); }
.bc-ac-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--surface-muted);
  flex-shrink: 0;
}
.bc-ac-name {
  flex: 1;
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-ac-sku {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.bc-ac-empty {
  padding: var(--s-3) var(--s-4);
  font-size: var(--type-sm);
  color: var(--text-secondary);
  list-style: none;
}
@media (max-width: 600px) {
  .bc-ac-results { max-height: 50vh; }
}

/* ---- Catalog sidebar: category browse nav (Batch 29) ----------------- */
.bc-layout > aside { align-self: start; position: sticky; top: var(--s-4); }
.bc-layout > aside > h2 {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-3);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bc-category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bc-category-list li { margin: 0; }
.bc-category-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-btn);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--type-sm);
  line-height: 1.35;
}
.bc-category-list a:hover { background: var(--surface-muted); color: var(--brand-navy); }
.bc-category-list a:focus-visible { outline: 2px solid var(--bc-blue); outline-offset: 2px; }
.bc-category-list a[aria-current="page"] {
  background: var(--bc-primary-tint);
  color: var(--bc-primary-ink);
  font-weight: 600;
}

/* ── Quote builder (staff create/edit, custom lines) ───────────────── */
.bc-badge-neutral { background: var(--surface-muted); color: var(--text-secondary); }
.bc-quote-customer { color: var(--text-secondary); margin: -0.25rem 0 1rem; }

.bc-add-panel {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.bc-add-panel-h { margin: 0 0 0.5rem; font-size: 0.95rem; }
.bc-custom-line { margin-top: 0.75rem; }
.bc-custom-line > summary { cursor: pointer; color: var(--bc-blue); font-weight: 600; }

.bc-line-search { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.bc-line-search-row { border-bottom: 1px solid var(--border); }
.bc-line-search-row:last-child { border-bottom: 0; }
.bc-line-search-row .bc-inline-form { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--surface); }
.bc-line-search-name { flex: 1 1 auto; min-width: 0; }

.bc-form-narrow { max-width: 640px; }
.bc-fieldset { border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.75rem 1rem; margin: 1rem 0; }
.bc-fieldset > legend { padding: 0 0.4rem; color: var(--text-secondary); font-weight: 600; }
.bc-field-check label { display: flex; align-items: baseline; gap: 0.4rem; font-weight: 400; }

/* ── Catalog admin quick-edit + stock status (item 3) ──────────────── */
.bc-pill-oos { background: var(--surface-muted); color: var(--text-secondary); }
.bc-card-unavailable, .bc-pdp-unavailable { color: var(--text-secondary); font-weight: 600; }

.bc-manage-search { margin-bottom: 1rem; }
.bc-manage { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.bc-manage-row {
  display: grid;
  grid-template-columns: 120px 1fr 110px 64px 150px 130px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  margin: 0;
}
.bc-manage-row:last-child { border-bottom: 0; }
.bc-manage-head { background: var(--surface-muted); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); }
.bc-manage-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-manage-price .bc-qty-input { width: 100%; }
/* "set by staff" under a held price: a second line in the cell, so the
   column keeps its width. */
.bc-manage-price .bc-price-source { display: block; font-size: 0.75rem; line-height: 1.2; }
.bc-manage-save { display: flex; align-items: center; gap: 0.4rem; }
.bc-row-saved { background: var(--bc-primary-tint, #eef4fb); }
.bc-saved-tick { color: var(--bc-success); font-size: 0.8rem; font-weight: 600; }

.bc-staff-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.bc-staff-edit label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.bc-staff-edit .bc-qty-input { width: 100px; }
.bc-field-check-inline { font-weight: 400; }

.bc-pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

/* ── Ship-to fields + tax review (CDTFA) ───────────────────────────── */
.bc-ship-row { display: grid; grid-template-columns: 1fr 90px 130px; gap: 0.75rem; }
.bc-tax-review {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  background: #fef3c7;              /* soft amber — needs attention, not an error */
  border: 1px solid #f59e0b;
  border-radius: var(--r-card);
  color: #713f12;
  font-size: 0.9rem;
}
/* ── "What's new" admin popup ──────────────────────────────────────── */
.bc-whatsnew {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
}
/* Sits AFTER .bc-whatsnew on purpose. Both are a single class, so specificity
   ties and source order decides; above the shell this rule loses silently and
   the modal stays buried. */
.bc-whatsnew-top { z-index: 1010; }
.bc-whatsnew-panel {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hover);
  width: min(680px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bc-whatsnew-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.bc-whatsnew-title { margin: 0.15rem 0 0; font-size: 1.35rem; }
.bc-whatsnew-x {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--r-card);
}
.bc-whatsnew-x:hover { background: var(--surface-muted); color: var(--text-primary); }
.bc-whatsnew-body { overflow-y: auto; padding: 0.25rem 1.25rem; }

.bc-wn-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.bc-wn-item:last-child { border-bottom: 0; }
.bc-wn-item-title { margin: 0 0 0.2rem; font-size: 1.02rem; }
.bc-wn-meta { margin: 0 0 0.6rem; color: var(--text-secondary); font-size: 0.83rem; }
.bc-wn-label {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bc-wn-prompt { margin-bottom: 0.7rem; }
.bc-wn-prompt blockquote {
  margin: 0;
  padding: 0.5rem 0.8rem;
  background: var(--surface-muted);
  border-left: 3px solid var(--bc-blue);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.bc-wn-summary p:last-child { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.bc-whatsnew-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.bc-wn-note { margin: 0; color: var(--text-secondary); font-size: 0.82rem; }

/* ── Amazon lookup from the quote page ─────────────────────────────── */
.bc-lookup-offer {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.bc-lookup-error { background: #fef3c7; border-color: #f59e0b; }
.bc-lookup-title { margin: 0 0 0.2rem; font-weight: 600; }
.bc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bc-lookup-bar {
  margin-top: 0.5rem; height: 4px; border-radius: 999px;
  background: var(--surface-muted); overflow: hidden;
}
.bc-lookup-bar > span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--bc-blue);
}

.bc-sync-form { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bc-price-input { width: 84px; }
.bc-price-changed { color: var(--text-secondary); text-decoration: line-through; }
.bc-staff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.bc-staff-bar-h { margin: 0; font-size: 1.6rem; }
.bc-staff-bar-sub { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.bc-staff-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.bc-shipto-edit { margin: 0.75rem 0; }
.bc-shipto-edit > summary { cursor: pointer; color: var(--bc-blue); font-weight: 600; }
.bc-district-panel { margin-top: 1rem; }
.bc-district-h { margin: 0 0 0.5rem; font-size: 1rem; }
.bc-district-tac { color: var(--text-secondary); font-weight: 400; font-size: 0.85rem; }

.bc-bulk-add textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.bc-lookup-list { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--text-secondary); }

/* ── Feedback button: fields added for screenshots + page URL ───────── */
.bc-fab-panel { max-height: 80vh; overflow-y: auto; }
.bc-fab-label {
  display: block; margin: 0.6rem 0 0.15rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.bc-fab-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.bc-fab-hint { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-secondary); }
.bc-fab-panel input[type="text"],
.bc-fab-panel input[type="file"] { width: 100%; }
.bc-fab-panel input[type="file"] { font-size: 0.82rem; }

/* Panel header + footer: a close control, and room for the status line the
   send response swaps in underneath the buttons. */
.bc-fab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.bc-fab-close {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 0.15rem;
  color: var(--text-secondary); border-radius: 4px;
}
.bc-fab-close:hover { color: var(--bc-ink); }
.bc-fab-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
#bc-fab-status:empty { display: none; }

/* ── Overridden figures + editable contacts ─────────────────────────────── */
/* An outlined label reads as "this one was changed" faster than a badge that
   has to be parsed as a word. Colour alone isn't the signal — the box is —
   so this still works without colour perception. */
.bc-overridden {
  outline: 1px solid var(--bc-error);
  outline-offset: 2px;
  border-radius: 3px;
}
.bc-contact-edit-row > td { padding-top: 0; border-top: 0; }
.bc-contact-edit > summary {
  cursor: pointer; font-size: 0.85rem; color: var(--bc-blue);
  padding: 0.15rem 0;
}
.bc-contact-edit .bc-form { padding: 0.5rem 0 0.75rem; max-width: 720px; }
.bc-field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bc-field-row > .bc-field { flex: 1 1 12rem; min-width: 0; }
.bc-quote-identity { margin: 0.1rem 0 0; font-weight: 600; color: var(--bc-ink); }
/* Sign-up prompt on the login page — a shopper sent here mid-quote needs a
   way forward, not just a password box. */
.bc-signup-cta {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border, #e5e7eb); max-width: 34rem;
}
.bc-signup-cta h2 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.bc-signup-cta p { margin: 0 0 0.75rem; color: var(--text-secondary); }
/* Staff-only provenance for non-catalog lines. Deliberately quiet — it is a
   working note, not part of the quote. */
.bc-source-links { margin-top: 1.5rem; }
.bc-source-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.bc-source-list li { padding: 0.3rem 0; font-size: 0.9rem; border-bottom: 1px solid var(--border, #e5e7eb); }
.bc-source-qty { font-weight: 600; color: var(--text-secondary); }

/* ── Setup dialogs ──────────────────────────────────────────────────────────
   The "what's new" panel was built to display prose; these ask someone to DO
   something. Scoped to .bc-setup so the changelog popup is unaffected.

   The people answering these are not staring at a screen all day — they get
   one shot at understanding what's being asked. Bare radios and an unstyled
   <ol> read as a rough draft, and a form that looks unfinished gets treated
   as optional. */

.bc-setup .bc-whatsnew-body { padding: 1rem 1.5rem 0.5rem; }
.bc-setup .bc-whatsnew-head { padding: 1.15rem 1.5rem 0.9rem; }
.bc-setup .bc-whatsnew-body > p { line-height: 1.6; margin: 0 0 0.85rem; }

/* Inputs fill the dialog — a 28rem cap looks accidental inside a panel. */
.bc-setup .bc-field input,
.bc-setup .bc-field textarea,
.bc-setup .bc-field select { max-width: none; padding: 0.55rem 0.7rem; }
.bc-setup .bc-field { margin-bottom: 0.9rem; }
.bc-setup .bc-field > label { font-size: 0.9rem; margin-bottom: 0.3rem; }

/* The thing they must not miss. */
.bc-setup-callout {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--bc-warn-bg, #fef3c7);
  border-left: 3px solid var(--bc-warn-border, #f59e0b);
  border-radius: 0 var(--r-card, 8px) var(--r-card, 8px) 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bc-warn-ink, #713f12);
}

/* Numbered steps with real numerals instead of a default bullet list. */
.bc-es-steps {
  list-style: none;
  counter-reset: bcstep;
  margin: 0 0 1rem;
  padding: 0;
}
.bc-es-steps > li {
  counter-increment: bcstep;
  position: relative;
  padding: 0.3rem 0 0.3rem 2.1rem;
  line-height: 1.55;
  font-size: 0.93rem;
}
.bc-es-steps > li::before {
  content: counter(bcstep);
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--bc-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Choices as pickable rows. The whole row is the target, not a 13px circle. */
.bc-setup .bc-fieldset {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--r-card, 8px);
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.1rem;
}
.bc-setup .bc-fieldset > legend {
  padding: 0 0.45rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.bc-setup .bc-field-check { margin-bottom: 0.4rem; }
.bc-setup .bc-field-check > label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--r-input, 8px);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 400;
  margin: 0;
  transition: background-color 0.12s, border-color 0.12s;
}
.bc-setup .bc-field-check > label:hover { background: var(--surface-muted, #f8f9fb); }
.bc-setup .bc-field-check > label:has(input:checked) {
  border-color: var(--bc-blue);
  background: var(--bc-primary-tint, #e0f2fe);
  font-weight: 500;
}
.bc-setup .bc-field-check > label:has(input:focus-visible) {
  outline: 3px solid var(--bc-accent);
  outline-offset: 2px;
}
.bc-setup .bc-field-check input { width: auto; margin: 0; flex: none; }

/* Actions pinned to the bottom so they never scroll out of reach. */
.bc-setup .bc-fab-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.2rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e7eb);
}
.bc-setup .bc-help { font-size: 0.85rem; line-height: 1.5; }

/* Feedback queue: a flagged customer's note, sorted to the top. Clay rather
   than red — it means "read this first", not "something is broken". */
.bc-badge-priority { background: #f5ead8; color: #7a5320; border-color: #e0c9a0; }

/* ── Shipping-label picker (feedback #40) ──────────────────────────────────
   The three sheet layouts are hard to tell apart in words, so each option
   carries a scale diagram of the sheet: a landscape rectangle split down the
   middle, a portrait one split across, and a single inset label. */
.bc-labels-form .bc-panel { margin-bottom: 1.5rem; }
.bc-layout-picker { list-style: none; margin: 0.75rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bc-layout-option { flex: 1 1 15rem; min-width: 14rem; }
/* The radio itself is visually hidden but focusable — the label is the target. */
.bc-layout-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bc-layout-label { display: block; height: 100%; padding: 0.9rem; border: 2px solid var(--bc-neutral-200); border-radius: 6px; background: var(--bc-card); cursor: pointer; }
.bc-layout-label:hover { border-color: var(--bc-border); }
.bc-layout-radio:checked + .bc-layout-label { border-color: var(--bc-primary); background: var(--bc-primary-tint); }
.bc-layout-radio:focus-visible + .bc-layout-label { outline: 3px solid var(--bc-accent); outline-offset: 2px; }
.bc-layout-name { display: block; font-weight: 600; margin-top: 0.6rem; }
.bc-layout-meta { display: block; font-size: 0.8125rem; color: var(--bc-mute); }
.bc-layout-size { display: block; font-size: 0.8125rem; font-weight: 500; }
.bc-layout-hint { display: block; font-size: 0.8125rem; color: var(--bc-mute); margin-top: 0.4rem; }

/* Diagrams. Sized 8px per inch so the three are honestly to scale against
   each other — a landscape sheet really is wider than a portrait one here. */
.bc-layout-fig { display: block; background: var(--bc-card); border: 1px solid var(--bc-ink); position: relative; }
.bc-fig-cell { position: absolute; border: 1px dashed var(--bc-border); }
.bc-fig-side_by_side { width: 88px; height: 68px; }
.bc-fig-side_by_side .bc-fig-cell { top: 0; width: 50%; height: 100%; }
.bc-fig-side_by_side .bc-fig-cell:first-child { left: 0; }
.bc-fig-side_by_side .bc-fig-cell:last-child { left: 50%; }
.bc-fig-stacked { width: 68px; height: 88px; }
.bc-fig-stacked .bc-fig-cell { left: 0; width: 100%; height: 50%; }
.bc-fig-stacked .bc-fig-cell:first-child { top: 0; }
.bc-fig-stacked .bc-fig-cell:last-child { top: 50%; }
.bc-fig-one_per_page { width: 68px; height: 88px; }
.bc-fig-one_per_page .bc-fig-cell:first-child { top: 10px; left: 8px; right: 8px; bottom: 10px; }
.bc-fig-one_per_page .bc-fig-cell:last-child { display: none; }

.bc-label-facts { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.bc-label-facts .bc-fact { flex: 1 1 14rem; min-width: 13rem; }
.bc-label-facts h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bc-mute); margin: 0 0 0.4rem; }
.bc-fact-address { margin: 0; line-height: 1.5; }
.bc-fact-value { margin: 0; font-weight: 600; }
.bc-fact-missing { margin: 0; font-size: 0.875rem; color: var(--bc-mute); }
.bc-input-sm { width: 100%; max-width: 14rem; padding: 0.4rem 0.5rem; border: 1px solid var(--bc-border); border-radius: 4px; font: inherit; }
.bc-input-num { width: 4.5rem; padding: 0.3rem 0.4rem; border: 1px solid var(--bc-border); border-radius: 4px; font: inherit; text-align: right; }
.bc-label-items .bc-line-no { font-weight: 600; }

/* ── Updates page + per-update acknowledgement ─────────────────────────────
   The count is what brings someone back to the updates they left unread, so
   it rides in the nav rather than only inside the popup they just closed. */
.bc-nav-count {
  display: inline-block; min-width: 1.25rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--bc-blue); color: #fff;
  font-size: 0.75rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.bc-wn-count {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem;
  border-radius: 999px; background: var(--bc-neutral-200); color: var(--bc-ink);
  font-size: 0.75rem; font-weight: 600; vertical-align: middle;
}
.bc-updates-section { margin-bottom: 2.5rem; }
.bc-updates-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.bc-updates-list .bc-wn-item {
  border: 1px solid var(--bc-neutral-200); border-radius: 6px;
  padding: 1.1rem 1.25rem; background: var(--bc-card);
}
/* Reviewed items stay readable but stop competing for attention. */
.bc-updates-list .bc-wn-item.is-reviewed { background: var(--bc-neutral-50); }
.bc-wn-acked { color: var(--bc-success); font-weight: 600; }
.bc-wn-ack { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.bc-wn-ack-hint { font-size: 0.8125rem; color: var(--bc-mute); }
.bc-updates-clear { color: var(--bc-success); font-weight: 500; }

/* ── Quote line items: number + thumbnail (feedback #44) ───────────────── */
.bc-line-no-col { width: 2.5rem; }
.bc-line-no { font-weight: 600; color: var(--bc-mute); vertical-align: top; }
.bc-line-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.bc-line-thumb {
  flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain;
  border: 1px solid var(--bc-neutral-200); border-radius: 4px; background: #fff;
}
/* Keeps the names in a column when one line has no picture. */
.bc-line-thumb-empty { background: var(--bc-neutral-100); }
.bc-line-name { min-width: 0; }
.bc-fb-id { font-weight: 600; white-space: nowrap; }

/* ── Feedback queue: triage controls (feedback #58, #59) ───────────────── */
.bc-select-sm {
  padding: 0.25rem 0.4rem; border: 1px solid var(--bc-border);
  border-radius: 4px; font: inherit; font-size: 0.8125rem; max-width: 8.5rem;
}
/* Both selects stack in one cell so the column stays narrow and the message
   keeps the width it needs. */
/* min-width, not width: in an auto-layout table `width` is only a hint, and
   the wide message column squeezed these selects down to clipping "In
   progress" to "In pro". The header cell carries the class too, or the column
   is sized by whichever cell the browser likes. */
.bc-fb-triage { width: 10.5rem; min-width: 10.5rem; }
.bc-fb-triage form { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }
.bc-fb-triage .bc-select-sm { max-width: none; width: 100%; }
/* ── Feedback queue: nothing clipped, notes full width (feedback #85) ─────
   "Can't read what's in the What We Did column." The panel was already as
   wide as the page; the table inside it was wider. One unbroken URL in a
   message or note set that column's minimum to the URL's whole length, the
   shared .bc-panel hides overflow, and the column on the far right — the
   note — was the one cut off, with no scrollbar to hint at it.

   So: long strings may break anywhere in the cells that hold free text,
   the note moves to a full-width row under its request (see the template),
   and this one panel scrolls instead of clipping should the table ever
   outgrow it again. .bc-panel itself is untouched; other tables rely on it. */
.bc-fb-panel { overflow-x: auto; }
/* The message takes whatever the fixed columns leave, which at the 1100px
   page width is about 480px. `width: 100%` is how an auto-layout table is
   told that: every other column drops to its own minimum (each of which is
   protected — nowrap, or a min-width) and the message gets the remainder.
   Without it the slack was shared out by content length, and a long page
   path in From took 40px the message needed. */
.bc-fb-col-msg { width: 100%; min-width: 16rem; overflow-wrap: anywhere; }
/* Breaking anywhere would let the table squeeze From until a plain address
   splits mid-word, so it keeps a floor. 13rem includes the cell's 1.8rem of
   padding (border-box): about 11rem of text, which holds
   stephanie@bluechimps.com on one line. Longer addresses wrap. */
.bc-fb-col-from { min-width: 13rem; overflow-wrap: anywhere; }
.bc-fb-from { font-size: 0.8125rem; }
/* A request and its note are one item: no rule between the two rows, and
   hovering either one lights both. Two rules, not one selector list: a
   browser without :has() drops the WHOLE rule it appears in, and the first
   half should survive that. */
/* Top-aligned, so a short message sits right above its note instead of
   floating halfway down beside the taller triage form. */
.bc-fb-table tbody tr.bc-fb-req > td { border-bottom: 0; vertical-align: top; }
.bc-fb-table tbody tr.bc-fb-req:hover + tr.bc-fb-outcome-row { background: var(--surface-muted); }
.bc-fb-table tbody tr.bc-fb-req:has(+ tr.bc-fb-outcome-row:hover) { background: var(--surface-muted); }
/* Spelled out this long on purpose: the shared `.bc-rtable tbody td` padding
   outranks a bare `.bc-fb-outcome-row > td`, and that shorter rule silently
   did nothing. */
.bc-fb-table tbody tr.bc-fb-outcome-row > td { padding-top: 0; }
/* Label in a narrow gutter, note beside it, so an empty one is still a
   single short line and a long one gets the rest of the panel.

   On a narrow screen the table is wider than the panel and the panel
   scrolls. The note's cell spans the whole table, so left alone every line
   of a long note would run off the right edge, and reading it would mean
   scrolling sideways and back for each line. Instead the note is kept to
   the visible width of the panel (100cqw: the panel is the size container)
   and pinned to its left edge while the request row above scrolls. While
   the table fits, the panel and the cell are the same width and both rules
   do nothing. left matches the cell's 0.9rem padding, so nothing jumps when
   scrolling starts. A browser without container units drops the max-width
   and the note goes back to full table width: still all there, just wide. */
.bc-fb-panel { container-type: inline-size; }
.bc-fb-outcome {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline;
  position: sticky; left: 0.9rem; max-width: calc(100cqw - 1.8rem);
}
.bc-fb-outcome-label {
  margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary);
}
.bc-fb-outcome-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.bc-fb-outcome-none { color: var(--bc-mute); }
/* The date and the time are each kept whole, so when When is allowed to wrap
   it breaks between them ("Oct 22," over "14:05") and never inside either. */
.bc-fb-when > span { white-space: nowrap; }
/* Below about 880px the minimums above add up to more than the panel. The
   room comes from When, which drops to two lines and gives back about 50px,
   and from the message's floor. From keeps its full 13rem: shrinking it
   split ordinary addresses mid-word ("alex@bluechimps.co / m"), which is
   what that floor is there to stop. Every column stays on screen down to
   tablet width (768px); narrower than that, the panel scrolls. */
@media (max-width: 880px) {
  .bc-fb-table td.bc-fb-when { white-space: normal; }
  .bc-fb-col-msg { min-width: 12rem; }
}
/* Phone width: the label goes above the note, so the note gets the whole
   visible width rather than what is left beside a 7rem gutter. */
@media (max-width: 720px) {
  .bc-fb-outcome { grid-template-columns: minmax(0, 1fr); }
}
.bc-fb-page { display: inline-block; word-break: break-all; }
.bc-fb-own { margin-top: 0.6rem; }
.bc-fb-own > summary { cursor: pointer; font-size: 0.8125rem; color: var(--bc-mute); }
.bc-fb-edit-form textarea {
  width: 100%; margin: 0.5rem 0; padding: 0.4rem; font: inherit;
  border: 1px solid var(--bc-border); border-radius: 4px;
}
/* Destructive action sits behind its own disclosure: there is no JS confirm to
   lean on (the CSP refuses inline script), so the second click is the guard. */
.bc-fb-danger { margin-top: 0.5rem; }
.bc-fb-danger > summary { cursor: pointer; font-size: 0.8125rem; color: var(--bc-error); }
.bc-btn-danger { background: var(--bc-error); color: #fff; }
.bc-btn-danger:hover { background: #7f1d1d; color: #fff; }

/* ── Quote lines: keep Remove reachable (feedback #60) ─────────────────────
   The line table sits in a ~780px panel. It had grown to 837px — 808 before
   the item number and thumbnail were added — and `overflow-x: auto` on the
   wrapper quietly clipped the last column, which is the one holding Remove.
   Nobody scrolls a table sideways to find a button they don't know is there,
   so it read as a missing feature.

   Two parts. Reclaim the width: the per-row edit form was inline-flex with
   nowrap, forcing quantity, price and Update onto one line and making that
   column 252px wide on its own. */
.bc-quote-lines td .bc-inline-form { flex-wrap: wrap; justify-content: flex-end; }
.bc-quote-lines .bc-qty-input { width: 4rem; }
.bc-quote-lines .bc-price-input { width: 5rem; }
.bc-quote-lines .bc-line-thumb { flex: 0 0 36px; width: 36px; height: 36px; }

/* And make the guarantee structural rather than arithmetic: pin the actions
   column to the right edge. A no-op while the table fits; if it ever overflows
   again, Remove stays on screen instead of being the casualty. */
.bc-quote-lines table { position: relative; }
.bc-quote-lines .bc-row-actions {
  position: sticky; right: 0; background: var(--bc-card);
  box-shadow: -6px 0 6px -6px rgba(15, 23, 42, 0.18);
}

/* ---- Custom quote requests ---------------------------------------------
   The link block carries a visual job, not just a decorative one: a staff
   member skimming twenty requests has to be able to tell a checked link from
   an unchecked one and a flagged one without reading. Flagged gets the only
   loud treatment on the page. Nothing here styles a bare URL to look like a
   link, because in the resting state there isn't one. */
/* This sits INSIDE the dark hero, so it takes the on-dark tokens. The
   light-background values it first had rendered it almost invisible against
   --hero-dark, and the navy link colour was unreadable outright. */
.bc-hero-aside { margin: var(--s-3) 0 0; font-size: 0.9375rem;
                 color: var(--text-muted-on-dark); }
.bc-hero-aside a { color: #c4b5fd; font-weight: 600;
                   text-decoration: underline;
                   text-underline-offset: 0.15em; }
.bc-hero-aside a:hover { color: #ddd6fe; }

.bc-qr-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }
.bc-qr-card { margin-bottom: 1rem; padding: 1rem 1.1rem; }
.bc-qr-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.bc-qr-who { margin: 0 0 0.5rem; font-size: 0.875rem; color: #475569; }
.bc-qr-desc { margin: 0 0 0.5rem; white-space: pre-wrap; }

.bc-qr-link { margin: 0.75rem 0; padding: 0.7rem 0.85rem; border-radius: 6px;
              background: #f8fafc; border: 1px solid #e2e8f0; }
.bc-qr-link-bad { background: #fef2f2; border-color: #fecaca; }
.bc-qr-link-host { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.bc-qr-verdict { display: block; font-size: 0.8125rem; color: #475569; line-height: 1.5; }
.bc-qr-link-bad .bc-qr-verdict { color: #991b1b; }
.bc-qr-reveal { margin-top: 0.6rem; }
.bc-qr-reveal > summary { cursor: pointer; font-size: 0.8125rem; color: #475569; }
/* Long URLs break rather than stretching the card — a URL that runs off the
   edge is a URL whose end nobody checked. */
.bc-qr-url { margin: 0.5rem 0 0.35rem; font-size: 0.8125rem; word-break: break-all;
             background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
             padding: 0.4rem 0.5rem; }

/* The staff Inbox (quotes/inbox.html). */
.bc-ib-status { margin: 0.75rem 0; font-size: 0.875rem; color: #475569; }
.bc-ib-status-bad { padding: 0.6rem 0.8rem; border-radius: 6px; background: #f5ead8;
                    border: 1px solid #e0c9a0; color: #7a5320; }
.bc-ib-summary { margin: 0 0 0.35rem; font-weight: 600; }
.bc-ib-attach fieldset { margin: 0.75rem 0; padding: 0.75rem 0.85rem; border: 1px solid #e2e8f0;
                         border-radius: 6px; display: grid; gap: 0.5rem; }
.bc-ib-attach legend { font-weight: 600; padding: 0 0.25rem; }
.bc-ib-choice { display: block; font-size: 0.875rem; line-height: 1.5; }
.bc-ib-field { display: grid; gap: 0.2rem; font-size: 0.875rem; max-width: 22rem; }
.bc-ib-check { font-size: 0.8125rem; color: #475569; }
.bc-ib-attach button { justify-self: start; }
.bc-ib-close { margin-top: 0.5rem; flex-wrap: wrap; }
.bc-ib-closed td, .bc-ib-unplaced td { font-size: 0.875rem; vertical-align: top; }


/* Feedback #71/#72: browse chrome. */
.bc-category-list li.is-current > a { font-weight: 700; color: var(--brand-navy); }
.bc-sort { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1rem; font-size: 0.875rem; }
.bc-sort select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; }
/* Feedback #74: an "Ordered" pill that is also a link to the order. */
.bc-status-ordered { text-decoration: none; }
/* Feedback #54: inline disclosure on a table row. */
.bc-inline-details { display: inline-block; margin-left: 0.4rem; }
.bc-inline-details > summary { cursor: pointer; font-size: 0.8125rem; color: #991b1b; }
.bc-inline-details form { margin-top: 0.35rem; }
/* Feedback #64: the ask link under an update. */
.bc-wn-ask { margin: 0.5rem 0 0; font-size: 0.875rem; }

/* Email-me buttons on sign-in questions and updates. */
.bc-mailme { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin: 0 0 0.75rem; }
.bc-mailme-done { padding: 0.35rem 0; }

/* Staff "send this to the customer" block on the quote page.
   NOT .bc-card — that is the product-card component: padding 0, overflow
   hidden, and a translateY(-2px) hover lift. A form panel borrowing it comes
   out cramped and bounces under the cursor. */
.bc-send-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.2rem;
}
.bc-send-block h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.bc-send-block .bc-help { margin: 0 0 0.75rem; }
.bc-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.bc-send-state { list-style: none; margin: 0 0 0.9rem; padding: 0; font-size: 0.92rem; }
.bc-send-state li { padding: 0.15rem 0; }
.bc-send-state .bc-tick { color: var(--ok, #2e7d5b); font-weight: 700; margin-right: 0.35rem; }
.bc-send-state .bc-dash { color: var(--text-muted); margin-right: 0.35rem; }

/* ---- Hero window: photos inside the layered PO frame ---- */
.bc-hero-window { position: relative; width: 100%; max-width: 445px; }
/* The two cards peeking out behind, same idea the SVG drew with <rect>. */
.bc-hero-stack {
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
}
.bc-hero-stack-back { transform: translate(16px, -14px) scale(0.97); }
.bc-hero-stack-mid  { transform: translate(8px, -7px) scale(0.985);
                      border-color: rgba(255,255,255,0.16); }
.bc-hero-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.bc-hero-bar {
  position: relative; height: 42px;
  background: linear-gradient(135deg, #818cf8, #c084fc);
}
/* Labels stack in the same cell so the bar never changes height mid-fade. */
.bc-hero-label {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 18px; color: #fff; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; transition: opacity 600ms ease;
}
.bc-hero-label.is-on { opacity: 1; }
/* 4:3 window. Reserved by aspect-ratio so the hero never reflows when a photo
   arrives — a late layout shift here would shove the headline. */
.bc-hero-shots { position: relative; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.04); }
.bc-hero-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 900ms ease;
}
.bc-hero-shot.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bc-hero-shot, .bc-hero-label { transition: none; }
}

/* ---- Sign in / auth pages ----
   A narrow centred column. The page used to run the full content width, so a
   single token input stretched to 480px and the eye had to travel the whole
   way across to find a six-digit box. */
.bc-auth { max-width: 26rem; margin: var(--s-6, 32px) auto var(--s-8, 48px); }
.bc-auth-title { font-size: 1.6rem; margin: 0 0 0.5rem; }
.bc-auth-lead { color: var(--text-secondary); margin: 0 0 1.25rem; line-height: 1.55; }

.bc-auth-field { margin: 0 0 1rem; }
.bc-auth-field label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0 0 0.35rem; }
.bc-auth-field input {
  display: block; width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--bc-border); border-radius: 6px; background: #fff;
}
.bc-auth-field .bc-help { display: block; margin-top: 0.35rem; }

/* Checkbox beside its words, not stranded under a colon on its own line. */
.bc-auth-check {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--text-secondary);
  cursor: pointer;
}
.bc-auth-check input { width: auto; margin: 0; flex: none; }

.bc-auth-submit { display: block; width: 100%; text-align: center; padding: 0.6rem 1rem; }

/* Secondary actions read as sentences. These have to stay <button> — they
   submit a challenge_device value — but they were rendering as grey chips
   dropped mid-sentence, which made the page look like a row of controls
   rather than a few words of help. */
.bc-auth-alt { margin: 0.85rem 0 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }
.bc-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
  color: var(--bc-blue); text-decoration: underline; cursor: pointer;
}
.bc-linkbtn:hover { color: var(--bc-blue-600); }
.bc-linkbtn:focus-visible { outline: 3px solid var(--bc-accent); outline-offset: 2px; border-radius: 2px; }

.bc-auth-error { color: var(--bc-danger, #b5524a); font-size: 0.875rem; margin: 0.35rem 0 0.75rem; }

.bc-auth-new {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bc-border);
}
.bc-auth-new h2 { font-size: 1rem; margin: 0 0 0.35rem; }
.bc-auth-new p { margin: 0 0 0.9rem; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }