/* 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.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/Inter-Bold.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; }
.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; }
.bc-quote-preview { position: sticky; top: 1rem; min-width: 0; }
.bc-quote-preview > summary { cursor: pointer; font-weight: 600; color: var(--bc-blue); margin-bottom: 0.5rem; }
.bc-quote-preview[open] > summary { margin-bottom: 0.5rem; }
.bc-quote-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.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); }
@media (max-width: 1200px) { .bc-quote-detail { grid-template-columns: 1fr; } .bc-quote-preview { position: static; } .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 stack above the search box, centred, rather
   than sharing one line with it. The header keeps its three children in
   source order (logo, search, nav) for the skip link and screen readers;
   grid `order` rearranges 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: center; }
.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;
  grid-template-columns: repeat(3, 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-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%; }
.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; }
/* The queue's outcome column is prose, not data — let it wrap and keep it
   narrow enough that the message column stays readable. */
.bc-fb-outcome { max-width: 26rem; font-size: 0.85rem; color: var(--text-secondary); }
.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%; }
.bc-fb-col-msg { width: 34%; min-width: 16rem; }
.bc-fb-col-out { width: 22%; min-width: 12rem; }
.bc-fb-from { font-size: 0.8125rem; }
.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; }


/* 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; }