/* =====================================================================
   site.css — shared site chrome + L2 commerce components
   Consumed by site/ wireframe pages (plp.html, pdp.html, …).
   Tokens come from tokens.css (symlink → design/assets/tokens.css).

   Scope:
   - Global chrome: wireframe banner, utility row, header, products menu
     (mega + drawer), account menu, Resources dropdown, footer.
   - Shared utilities: band primitives, containers, typography, buttons.
   - L2 commerce components (from design/pages/commerce.html §8):
     product card, badges, price bits, quantity stepper, filter panel.

   NOTE (wireframe-stage debt): site/index.html still carries its own
   inline copy of the chrome rules. Migrate index.html onto this file to
   remove the duplication (tracked in PAGE-DESIGN-LOG / PROJECT-STATE).
   ===================================================================== */

/* ============================================================ */
/* WIREFRAME CHROME                                             */
/* ============================================================ */
.wire-state-banner {
  /* Not sticky: scrolls away above the sticky chrome (avoids the nested-sticky wobble) */
  background: var(--ref-ink); color: var(--text-on-dark);
  font-size: var(--type-label-sm); letter-spacing: var(--ls-uppercase); text-transform: uppercase;
  padding: var(--space-2) var(--container-padding);
  display: flex; gap: var(--space-4); align-items: center; justify-content: space-between;
}
.wire-state-banner a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.wire-state-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
.wire-state-toggle button {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--text-on-dark); font: inherit;
  font-size: var(--type-label-sm); letter-spacing: var(--ls-uppercase); text-transform: uppercase;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; opacity: 0.65;
}
.wire-state-toggle button.is-on { opacity: 1; background: rgba(255,255,255,0.18); font-weight: 600; }

/* ============================================================ */
/* BAND PRIMITIVES + CONTAINERS                                 */
/* ============================================================ */
.band { padding: var(--spacing-section) var(--container-padding); }
.band-compact { padding: var(--spacing-section-compact) var(--container-padding); }
.band-hero { padding: var(--spacing-hero) var(--container-padding); }
.band-canvas { background: var(--surface-canvas); }
.band-soft { background: var(--surface-soft); }
.band-strong { background: var(--surface-strong); }
.band-cream { background: var(--surface-cream); }
.band-blue-soft { background: var(--surface-blue-soft); }
.container { max-width: var(--container-default); margin: 0 auto; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; }

/* ============================================================ */
/* TYPOGRAPHY UTILITIES                                         */
/* ============================================================ */
.t-display { font-size: var(--type-display-lg); line-height: var(--lh-display); color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.t-display-xl { font-size: var(--type-display-xl); line-height: var(--lh-display); color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.t-display-sm { font-size: var(--type-display-md); line-height: var(--lh-display); color: var(--text-primary); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.t-h2 { font-size: var(--type-h2); line-height: var(--lh-heading); color: var(--text-primary); font-weight: 600; margin: 0; }
.t-h3 { font-size: var(--type-h3); line-height: var(--lh-heading); color: var(--text-primary); font-weight: 600; margin: 0; }
.t-body { font-size: var(--type-body-md); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.t-body-sm { font-size: var(--type-body-sm); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.t-label { font-size: var(--type-label-sm); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--text-muted); margin: 0; }
.t-caption { font-size: var(--type-caption); line-height: var(--lh-caption); color: var(--text-muted); margin: 0; }
.t-muted { color: var(--text-muted); }

.stack-xs > * + * { margin-top: var(--spacing-stack-xs); }
.stack-sm > * + * { margin-top: var(--spacing-stack-sm); }
.stack-md > * + * { margin-top: var(--spacing-stack-md); }
.stack-lg > * + * { margin-top: var(--spacing-stack-lg); }
.stack-xl > * + * { margin-top: var(--spacing-stack-xl); }

.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--spacing-stack-xl); }
.group-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: var(--spacing-stack-xl) 0 var(--spacing-stack-md) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-hairline);
}
.group-head:first-of-type { margin-top: 0; }
.group-head-title { font-size: var(--type-label-md); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--text-primary); font-weight: 600; margin: 0; }
.group-head-helper { font-size: var(--type-caption); color: var(--text-muted); margin: 0; }

/* ============================================================ */
/* BUTTONS + ICON BUTTONS  (L1 primitives)                      */
/* ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-inline-sm);
  padding: var(--spacing-button-padding-y) var(--spacing-button-padding-x);
  font-family: var(--font-sans); font-size: var(--type-button); font-weight: 500;
  line-height: 1; border-radius: var(--radius-lg); border: 1px solid transparent;
  min-height: 44px; text-decoration: none; cursor: pointer;
  transition: background-color 0.12s ease;
}
.btn-sm { min-height: 36px; padding: var(--spacing-button-padding-y-sm) var(--spacing-button-padding-x-sm); }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--button-primary-bg); color: var(--text-on-dark); }
.btn-primary:hover { background: var(--button-primary-bg-hover); color: var(--text-on-dark); }
.btn-secondary { background: var(--button-secondary-bg); color: var(--color-ink); border-color: var(--border-hairline); }
.btn-secondary:hover { background: var(--button-secondary-bg-hover); color: var(--color-ink); }
.btn-tertiary { background: transparent; color: var(--button-tertiary-fg); padding-left: 0; padding-right: 0; }
.btn-tertiary:hover { color: var(--button-tertiary-fg-hover); text-decoration: underline; }
.btn-purchase { background: var(--color-purchase); color: var(--text-on-dark); }
.btn-purchase:hover { background: var(--button-primary-bg-hover); color: var(--text-on-dark); }
.btn-on-dark { background: var(--surface-canvas); color: var(--text-primary); }
.btn-on-dark:hover { background: var(--surface-soft); color: var(--text-primary); }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: transparent; border: 1px solid transparent;
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn.sm { width: 36px; height: 36px; }
.icon-btn:hover { background: var(--surface-soft); }
.ico { width: 1em; height: 1em; flex-shrink: 0; stroke: currentColor; stroke-width: 1.75; fill: none; }
.ico.lg { width: 20px; height: 20px; }

/* ============================================================ */
/* UTILITY ROW                                                  */
/* ============================================================ */
.util-row { background: var(--ref-ink); color: var(--text-on-dark); padding: var(--space-2) var(--container-padding); }
.util-inner {
  max-width: var(--container-full); margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-5); font-size: var(--type-body-sm);
}
.util-inner a { color: var(--text-on-dark); text-decoration: none; opacity: 0.85; }
.util-inner a:hover { opacity: 1; }
.util-left { display: flex; gap: var(--space-4); align-items: center; }
.util-right { display: flex; gap: var(--space-4); align-items: center; margin-left: auto; }
.market-select {
  display: inline-flex; gap: var(--space-2); align-items: center;
  padding: 2px var(--space-2);
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm);
  font-size: var(--type-label-md); cursor: pointer; background: transparent; color: var(--text-on-dark);
}
.market-select-caret { opacity: 0.6; font-size: 0.7em; }
.util-phone { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 500; }
.util-phone-label { opacity: 0.6; font-size: var(--type-label-sm); letter-spacing: var(--ls-uppercase); text-transform: uppercase; }

/* Account menu (logged-in) — desktop dropdown hung off the utility row */
.acct-menu { position: relative; display: inline-flex; align-items: center; }
.acct-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm); color: var(--text-on-dark);
  font: inherit; font-size: var(--type-body-sm); font-weight: 500;
  padding: 2px var(--space-2); cursor: pointer;
}
.acct-trigger:hover { background: rgba(255,255,255,0.08); }
.acct-trigger svg { opacity: 0.85; }
.acct-caret { font-size: 0.7em; opacity: 0.6; transition: transform 150ms ease; }
.acct-caret.open { transform: rotate(180deg); }
.acct-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: var(--surface-canvas); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--elevation-floating);
  padding: var(--space-2); z-index: 80; display: flex; flex-direction: column;
}
.acct-dropdown-greet { font-size: var(--type-caption); color: var(--text-muted); padding: var(--space-2) var(--space-3) var(--space-1); margin: 0; }
.acct-dropdown-greet strong { color: var(--text-primary); font-weight: 600; }
.acct-dropdown-item { padding: var(--space-2) var(--space-3); font-size: var(--type-body-sm); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); }
.acct-dropdown-item:hover { background: var(--surface-soft); }
.acct-dropdown-divider { height: 1px; background: var(--border-hairline); margin: var(--space-1) 0; }
.acct-dropdown-signout { color: var(--text-muted); }

/* ============================================================ */
/* MAIN HEADER                                                  */
/* ============================================================ */
.main-header { background: var(--surface-canvas); border-bottom: 1px solid var(--border-hairline); padding: var(--space-4) var(--container-padding); position: relative; z-index: 40; }
.main-header-inner { max-width: var(--container-full); margin: 0 auto; display: flex; align-items: center; gap: var(--space-8); }
.header-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.header-logo img { height: 110px; width: auto; display: block; }
.header-nav { display: flex; gap: var(--space-6); flex: 1; }
.header-nav a { color: var(--text-primary); text-decoration: none; font-size: var(--type-body-md); font-weight: 500; }
.header-nav a:hover { color: var(--text-link); }
.header-search {
  display: flex; align-items: center; background: var(--surface-soft);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: 0 var(--space-2); transition: width 200ms ease, background 200ms ease; width: 240px;
}
.header-search:focus-within { width: 380px; background: var(--surface-canvas); border-color: var(--border-focus); }
.header-search-icon { padding: 0 var(--space-1); color: var(--text-muted); display: inline-flex; align-items: center; }
.header-search input { flex: 1; border: none; background: transparent; padding: var(--space-2); font: inherit; font-size: var(--type-body-sm); color: var(--text-primary); min-width: 0; }
.header-search input:focus { outline: none; }
.header-cart {
  position: relative; width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  color: var(--text-primary); text-decoration: none; background: var(--surface-canvas);
}
.header-cart:hover { background: var(--surface-soft); }
.header-cart-count {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-ink); color: var(--text-on-dark);
  font-size: var(--type-caption); font-weight: 600; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
}
.header-search-btn {
  display: none; width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-canvas); color: var(--text-primary); text-decoration: none;
}
.header-search-btn:hover { background: var(--surface-soft); }

/* ============================================================ */
/* PRODUCTS MENU — mega (desktop) + drawer (mobile)             */
/* ============================================================ */
[x-cloak] { display: none !important; }

.nav-burger {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-canvas); color: var(--text-primary); flex-shrink: 0;
}
.nav-burger:hover { background: var(--surface-soft); }
.nav-link {
  background: none; border: none; font: inherit; font-size: var(--type-body-md); font-weight: 500;
  color: var(--text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0;
}
.nav-link:hover { color: var(--text-link); }
.nav-caret { transition: transform 150ms ease; }
.nav-caret.open { transform: rotate(180deg); }

/* Resources dropdown (desktop) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown {
  position: absolute; top: calc(100% + var(--space-4)); left: 0; min-width: 240px;
  background: var(--surface-canvas); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--elevation-floating);
  padding: var(--space-2); z-index: 50; display: flex; flex-direction: column;
}
.nav-dropdown-item { padding: var(--space-2) var(--space-3); font-size: var(--type-body-sm); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); }
.nav-dropdown-item:hover { background: var(--surface-soft); color: var(--text-link); }

/* Mega panel */
.mega { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-canvas); border-top: 1px solid var(--border-hairline); box-shadow: var(--elevation-floating); z-index: 45; }
.mega-inner { max-width: var(--container-wide); margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; min-height: 320px; }
.mega-left { display: flex; flex-direction: column; padding: var(--space-5); gap: var(--space-1); border-right: 1px solid var(--border-hairline); }
.mega-group {
  display: flex; align-items: center; justify-content: space-between; text-align: left;
  background: none; border: none; cursor: pointer; font: inherit; font-size: var(--type-title-sm); font-weight: 500;
  color: var(--text-muted); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.mega-group:hover { color: var(--text-primary); background: var(--surface-soft); }
.mega-group.active { color: var(--text-primary); font-weight: 600; background: var(--surface-soft); }
.mega-group-arrow { color: var(--text-disabled); }
.mega-group.active .mega-group-arrow { color: var(--text-primary); }
.mega-left-foot { margin-top: auto; padding: var(--space-3) var(--space-4); font-size: var(--type-body-sm); font-weight: 500; color: var(--text-link); text-decoration: none; }
.mega-right { padding: var(--space-6) var(--space-8); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.mega-item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; }
.mega-item:hover { background: var(--surface-soft); }
.mega-item-label { font-size: var(--type-body-md); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); }
.mega-item-desc { font-size: var(--type-body-sm); color: var(--text-muted); }
.mega-item-badge { font-size: var(--type-caption); letter-spacing: var(--ls-uppercase); text-transform: uppercase; background: var(--surface-strong); color: var(--text-muted); padding: 0 5px; border-radius: var(--radius-sm); font-weight: 500; }

/* Mobile drawer */
.drawer-scrim { position: fixed; inset: 0; background: var(--color-overlay-subtle); z-index: 90; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px);
  background: var(--surface-canvas); z-index: 95; display: flex; flex-direction: column;
  box-shadow: var(--elevation-modal); transform: translateX(0); transition: transform 220ms ease; overflow-y: auto;
}
.drawer-off { transform: translateX(-100%); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-hairline); position: sticky; top: 0; background: var(--surface-canvas); }
.drawer-logo { height: 44px; width: auto; }
.drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-primary); }
.drawer-nav { display: flex; flex-direction: column; padding: var(--space-3); }
.drawer-row {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-4);
  font-size: var(--type-title-sm); font-weight: 500; color: var(--text-primary); text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; border-radius: var(--radius-md);
}
.drawer-row:hover { background: var(--surface-soft); }
.drawer-chevron { color: var(--text-disabled); font-size: var(--type-h3); }
.drawer-row-quiet { font-weight: 400; color: var(--text-body); font-size: var(--type-body-md); }
.drawer-divider { height: 1px; background: var(--border-hairline); margin: var(--space-2) var(--space-4); }
.drawer-back { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--type-body-sm); font-weight: 500; letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; }
.drawer-group-title { font-size: var(--type-label-sm); letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--text-muted); margin: var(--space-4) var(--space-4) var(--space-1); }
.drawer-row-sub { font-weight: 400; font-size: var(--type-body-md); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.drawer-row-allcat { font-weight: 600; color: var(--text-link); margin-top: var(--space-3); }

/* ============================================================ */
/* FOOTER                                                       */
/* ============================================================ */
.footer { background: var(--ref-ink); color: var(--text-on-dark); padding: var(--spacing-section) var(--container-padding) var(--space-8); border-top: 1px solid rgba(255,255,255,0.15); }
.footer a { color: var(--text-on-dark); }
.footer-inner { max-width: var(--container-default); margin: 0 auto; }
.footer-trustbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-trust-item { font-size: var(--type-body-sm); color: var(--text-on-dark); }
.footer-trust-item-label { font-size: var(--type-label-sm); text-transform: uppercase; letter-spacing: var(--ls-uppercase); opacity: 0.6; display: block; margin-bottom: var(--space-1); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-top: var(--space-8); }
.footer-col h4 { font-size: var(--type-label-sm); text-transform: uppercase; letter-spacing: var(--ls-uppercase); opacity: 0.6; margin: 0 0 var(--space-3) 0; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { font-size: var(--type-body-sm); text-decoration: none; opacity: 0.85; }
.footer-col a:hover { opacity: 1; }

/* ============================================================ */
/* L2 COMMERCE — badges                                         */
/* ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: var(--type-label-sm); font-weight: 500; border-radius: var(--radius-sm); border: 1px solid transparent; line-height: 1; }
.badge.promo { background: var(--color-purchase); color: var(--text-on-dark); }
.badge.stock-in { background: var(--state-success-bg); color: var(--state-success-fg); border-color: var(--state-success-border); }
.badge.stock-low { background: var(--state-warning-bg); color: var(--state-warning-fg); border-color: var(--state-warning-border); }
.badge.stock-out { background: var(--state-danger-bg); color: var(--state-danger-fg); border-color: var(--state-danger-border); }
.badge.made-to-order { background: var(--surface-soft); color: var(--text-muted); border-color: var(--border-hairline); }

/* Ghost button on dark surfaces (Apply for trade account on the Home CTA band) */
.btn-ghost-dark { background: transparent; color: var(--text-on-dark); border-color: rgba(255,255,255,0.4); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.12); color: var(--text-on-dark); border-color: rgba(255,255,255,0.7); }

/* ============================================================ */
/* L2 COMMERCE — product card (§8.1)                            */
/* ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pcard {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: var(--card-padding, var(--spacing-card-padding)); background: var(--surface-canvas);
  display: flex; flex-direction: column; gap: var(--spacing-stack-sm);
  transition: border-color 0.15s ease; position: relative;
}
.pcard:hover { border-color: var(--card-border-hover); }
.pcard .img {
  aspect-ratio: 1/1; background: var(--surface-soft); border-radius: var(--radius-sm);
  margin-bottom: var(--space-2); position: relative; display: grid; place-items: center;
  color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); overflow: hidden;
}
.pcard .img.desat { filter: grayscale(0.5) opacity(0.7); }
.pcard .img.stripes {
  background-image: linear-gradient(45deg, var(--surface-soft) 25%, var(--surface-canvas) 25%, var(--surface-canvas) 50%, var(--surface-soft) 50%, var(--surface-soft) 75%, var(--surface-canvas) 75%);
  background-size: 12px 12px;
}
.pcard .badge-slot { position: absolute; top: var(--space-3); left: var(--space-3); }
.pcard .wish-slot { position: absolute; top: var(--space-2); right: var(--space-2); background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
.pcard .industry-tag { display: inline-flex; padding: 2px 8px; background: var(--surface-soft); border: 1px solid var(--border-hairline); font-size: var(--type-label-sm); color: var(--text-muted); border-radius: var(--radius-sm); width: fit-content; }
.pcard .sku { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); }
.pcard .name {
  font-size: var(--type-product-title); font-weight: 500; color: var(--text-primary);
  line-height: var(--lh-body-tight); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pcard .price-row { display: flex; align-items: baseline; gap: var(--spacing-inline-sm); flex-wrap: wrap; }
.pcard .price { font-size: var(--type-price-default); font-weight: 500; color: var(--text-price-sale); font-variant-numeric: tabular-nums; }
.pcard .strike { font-size: var(--type-strike-default); color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pcard .per { font-size: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Trade / case pricing cue — blue is the UX colour for quantity pricing */
.pcard .trade-cue { font-size: var(--type-caption); color: var(--text-link); font-weight: 500; font-variant-numeric: tabular-nums; }
.pcard .quick { margin-top: auto; }

/* ============================================================ */
/* L2 COMMERCE — quantity stepper (§8.4)                        */
/* ============================================================ */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: var(--surface-canvas); height: 44px; }
.qty button { width: 36px; height: 100%; background: transparent; border: none; color: var(--text-primary); cursor: pointer; display: grid; place-items: center; }
.qty button:hover { background: var(--surface-soft); }
.qty input { width: 56px; height: 100%; border: none; outline: none; text-align: center; font-size: var(--type-body-md); font-variant-numeric: tabular-nums; background: transparent; color: var(--text-primary); }

/* ============================================================ */
/* L2 COMMERCE — filter panel (§8.5)                            */
/* ============================================================ */
.filter-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-6); background: var(--surface-canvas); }
.filter-panel { background: var(--surface-canvas); }
.filter-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--space-6); }
.filter-head h4 { font-size: var(--type-title-md); font-weight: 500; margin: 0; color: var(--text-primary); }
.filter-group { margin-bottom: var(--space-6); }
.filter-group-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; cursor: pointer; }
.filter-group-head .name { font-size: var(--type-label-md); font-weight: 500; color: var(--text-primary); }
.filter-group-head .active-count { font-size: var(--type-label-sm); color: var(--text-muted); background: var(--surface-soft); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); margin-left: auto; margin-right: var(--space-3); }
.filter-options { display: grid; gap: var(--space-4); padding-top: var(--space-3); }
.check { display: inline-flex; align-items: center; gap: var(--spacing-inline-sm); cursor: pointer; font-size: var(--type-body-sm); color: var(--text-body); position: relative; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface-canvas); display: inline-grid; place-items: center; flex-shrink: 0; }
.check input:checked + .box { background: var(--color-ink); border-color: var(--color-ink); }
.check input:checked + .box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--text-on-dark); border-bottom: 2px solid var(--text-on-dark); transform: rotate(-45deg) translate(1px, -1px); }
.check .count { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.check input:disabled ~ * { opacity: 0.5; }
.applied-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-hairline); }
.applied-tag { display: inline-flex; align-items: center; gap: var(--spacing-inline-sm); padding: 6px 12px; background: var(--surface-soft); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); font-size: var(--type-label-md); color: var(--text-primary); }
.applied-tag button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }

/* ============================================================ */
/* L2 COMMERCE — spec-table (Decision 11)                       */
/* Shared dense buy-row. PLP: rows = products. PDP: rows =       */
/* variants. Built on the base table primitive (tables.html §5). */
/* Identity pinned left + buy pinned right; specs scroll between.*/
/* ============================================================ */
.spec-table-wrap { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.spec-table-scroll { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); }
.spec-table thead th {
  text-align: left; background: var(--table-header-bg); color: var(--text-primary);
  font-size: var(--type-label-md); font-weight: 500; height: var(--table-header-height);
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-header-underline); white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.spec-table tbody td {
  padding: var(--space-2) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-divider);
  font-size: var(--type-body-sm); color: var(--text-body); vertical-align: middle;
}
.spec-table tbody tr:hover td { background: var(--table-row-bg-hover); }
.spec-table tbody tr.selected td { background: var(--table-row-bg-selected); }
.spec-table tbody:last-child tr:last-child td { border-bottom: none; } /* per-product tbodies: only drop the very last row's divider */
.spec-table .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-primary); white-space: nowrap; }
.spec-table th.right { text-align: right; }
/* keep data columns content-sized + packed (no big inter-column gaps) */
.spec-table td.is-spec, .spec-table td.is-meta, .spec-table th.is-col { white-space: nowrap; }

/* Pinned identity column: checkbox + thumb + code/name + ref */
.spec-table th.st-id, .spec-table td.st-id {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface-canvas);
  border-right: 1px solid var(--border-strong);
  min-width: 380px; width: 100%; /* greedy: absorbs slack so data columns pack tightly */
}
.spec-table thead th.st-id { z-index: 3; background: var(--table-header-bg); }
.spec-table tbody tr:hover td.st-id { background: var(--table-row-bg-hover); }
.spec-table tbody tr.selected td.st-id { background: var(--table-row-bg-selected); }
.st-id-inner { display: flex; align-items: flex-start; gap: var(--space-3); }
.st-check { flex-shrink: 0; padding-top: 2px; }
/* Thumbnail: small, low-focus, neutral; click to enlarge */
.st-thumb {
  width: 56px; height: 56px; flex-shrink: 0; padding: 0; cursor: zoom-in;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  background-color: var(--surface-soft);
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(0,0,0,0.04) 7px 14px);
}
.st-thumb:hover { border-color: var(--border-strong); }
.st-id-main { min-width: 250px; display: flex; flex-direction: column; gap: 2px; }
.spec-table .st-id .code { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--text-muted); display: block; }
.spec-table .st-id .name { color: var(--text-primary); font-weight: 500; }
.spec-table .st-id a { color: var(--text-primary); text-decoration: none; display: block; }
.spec-table .st-id a:hover .name { color: var(--text-link); }
.st-ref-toggle { align-self: flex-start; background: none; border: none; padding: 0; margin-top: var(--space-1); color: var(--text-link); font: inherit; font-size: var(--type-caption); cursor: pointer; }
.st-ref-input { margin-top: var(--space-2); width: 100%; max-width: 260px; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--type-body-sm); color: var(--text-primary); background: var(--surface-canvas); }
.st-specs-toggle { display: none; align-items: center; gap: var(--space-1); margin-top: var(--space-2); background: none; border: none; padding: 0; color: var(--text-link); font: inherit; font-size: var(--type-caption); cursor: pointer; }

/* Availability + lead-time sub-line */
.spec-table .st-lead { display: block; font-size: var(--type-caption); color: var(--text-muted); margin-top: 2px; white-space: nowrap; }

/* Pinned buy column — its own enclosed module: dividers both sides, padded.
   Layout: [price + bulk link] | [qty]   then   [Add to cart] [Save] equal. */
.spec-table th.st-buy, .spec-table td.st-buy {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface-canvas);
  border-left: 1px solid var(--border-strong);
  min-width: 256px; white-space: nowrap;
}
.spec-table thead th.st-buy { z-index: 3; background: var(--table-header-bg); text-align: left; }
.spec-table tbody tr:hover td.st-buy { background: var(--table-row-bg-hover); }
.spec-table tbody tr.selected td.st-buy { background: var(--table-row-bg-selected); }
.st-buy-inner { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.st-buy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.st-price-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-buy-inner .price { font-size: var(--type-price-default); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.st-buy-inner .price.from { font-size: var(--type-body-sm); font-weight: 500; color: var(--text-muted); }
/* Bulk pricing disclosure chip (expands the ladder inline) */
.st-bulk-chip { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; background: var(--surface-blue-soft); border: 1px solid var(--border-hairline); border-radius: var(--radius-full); padding: 2px var(--space-3); color: var(--text-link); font: inherit; font-size: var(--type-caption); font-weight: 500; cursor: pointer; white-space: nowrap; }
.st-bulk-chip svg { width: 12px; height: 12px; transition: transform 150ms ease; }
.st-bulk-chip.open svg { transform: rotate(180deg); }
/* Add to cart + Save: equal weighting, equal width */
.st-buy-actions { display: flex; align-items: stretch; gap: var(--space-2); }
.st-buy-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-2); white-space: nowrap; }
.st-save-btn .ico { width: 16px; height: 16px; }
.spec-table .qty.sm { height: 36px; flex: 0 0 auto; }
.spec-table .qty.sm input { width: 36px; }
.spec-table .qty.sm button { width: 28px; }

/* Column header = stable label + a separate filter chip beside it
   (Dust Spares pattern; the chip never replaces the label). */
.col-head { display: inline-flex; align-items: center; gap: var(--space-2); }
.col-label { font-size: var(--type-label-md); font-weight: 500; color: var(--text-primary); }
.col-filter {
  font: inherit; font-size: var(--type-caption); font-weight: 500; color: var(--text-link);
  background-color: var(--surface-canvas); border: 1px solid var(--border-hairline); border-radius: var(--radius-full);
  padding: 3px var(--space-5) 3px var(--space-6); cursor: pointer; min-height: 26px;
  -webkit-appearance: none; appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: left 8px center, right 7px center;
}
.col-filter:hover { border-color: var(--text-link); }
.col-filter:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--surface-blue-soft); }

/* Inline bulk-pricing disclosure row (expands under a product row).
   Ladder is right-aligned (under the buy column) and stays pinned to the
   right edge while the spec columns scroll horizontally. */
.spec-table tr.bulk-row td { background: var(--surface-soft); padding: var(--space-4) var(--table-cell-padding-x); }
.bulk-ladder { width: min(360px, 100%); margin-left: auto; position: sticky; right: var(--table-cell-padding-x); }

/* Row-click to PDP fires only on these zones (JS guard excludes interactives) */
.spec-table tbody td.st-id, .spec-table tbody td.is-spec, .spec-table tbody td.is-meta { cursor: pointer; }

/* Mobile (<=720): un-pin, reflow rows to cards, specs behind a reveal */
@media (max-width: 720px) {
  .spec-table-scroll { overflow-x: visible; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; }
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-table tr {
    border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); margin: var(--space-3) 0;
  }
  .spec-table td, .spec-table td.st-id, .spec-table td.st-buy {
    position: static; min-width: 0; border: none;
    background: transparent !important; padding: var(--space-1) 0;
  }
  /* always-visible meta rows (availability) */
  .spec-table td.is-meta { display: flex; justify-content: space-between; gap: var(--space-4); text-align: right; }
  .spec-table td.is-meta::before { content: attr(data-label); color: var(--text-muted); font-size: var(--type-caption); text-align: left; white-space: nowrap; }
  /* spec rows hidden until the per-row reveal */
  .spec-table td.is-spec { display: none; justify-content: space-between; gap: var(--space-4); text-align: right; }
  .spec-table tr.specs-open td.is-spec { display: flex; }
  .spec-table td.is-spec::before { content: attr(data-label); color: var(--text-muted); font-size: var(--type-caption); text-align: left; white-space: nowrap; }
  .spec-table td.st-id { padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--table-divider); }
  .st-id-main { min-width: 0; }
  .st-specs-toggle { display: inline-flex; }
  .spec-table td.st-buy { padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--table-divider); }
  .st-buy-inner { align-items: stretch; }
  .st-buy-actions { justify-content: space-between; }
}

/* ============================================================ */
/* SHARED RESPONSIVE (chrome + commerce)                        */
/* ============================================================ */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .header-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .mega { display: none; }
  .main-header-inner { gap: var(--space-3); }
  .header-logo { margin-right: auto; }
  .header-search { display: none; }
  .header-search-btn { display: inline-flex; }
  .header-acct-btn { display: inline-flex; }
  .util-left { gap: var(--space-3); }
  /* On mobile the utility-row account/sign-in moves to the header account button + hamburger */
  .util-right { display: none; }
  .util-phone-label { display: none; }
  .header-logo img { height: 128px; }
  .footer-trustbar, .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .filter-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .util-phone { display: none; }
  .util-inner { gap: var(--space-3); font-size: var(--type-caption); }
  .util-right { gap: var(--space-3); }
  .acct-menu { display: none; }
}
@media (max-width: 600px) {
  .footer-trustbar, .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* STICKY HEADER + COLLAPSIBLE PREVIEW BAR                      */
/* ============================================================ */
/* The whole header region is one sticky block; the wireframe   */
/* banner inside it collapses (x-show) on scroll-down.          */
.site-sticky { position: relative; z-index: 50; }
/* Only the chrome (util row + main header) sticks; the wireframe banner scrolls away above it. */
.site-chrome { position: sticky; top: 0; z-index: 50; background: var(--surface-canvas); }

/* ============================================================ */
/* MOBILE ACCOUNT BUTTON (header) — hidden on desktop           */
/* ============================================================ */
.header-acct-btn {
  display: none; width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-canvas); color: var(--text-primary); text-decoration: none; position: relative;
}
.header-acct-btn:hover { background: var(--surface-soft); }
/* Must come AFTER the base rule above so it wins at <=900 */
@media (max-width: 900px) { .header-acct-btn { display: inline-flex; } }

/* ============================================================ */
/* COMPACT-ON-SCROLL  (.site-sticky gets .compact when scrolled) */
/* ============================================================ */
.util-row, .main-header { transition: padding 160ms ease; }
.header-logo img { transition: height 160ms ease; }
.site-chrome.compact .util-row { padding-top: 2px; padding-bottom: 2px; }
.site-chrome.compact .main-header { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.site-chrome.compact .header-logo img { height: 68px; }

/* ============================================================ */
/* RESOURCES MEGA (matches Products mega; single pane)          */
/* ============================================================ */
.mega-inner-simple { grid-template-columns: 1fr; min-height: auto; }

/* ============================================================ */
/* ACCOUNT DRAWER (right slide-in)                              */
/* ============================================================ */
.acct-drawer-scrim { position: fixed; inset: 0; background: var(--color-overlay-subtle); z-index: 95; }
.acct-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 420px);
  background: var(--surface-canvas); z-index: 96;
  display: flex; flex-direction: column; box-shadow: var(--elevation-modal);
  transform: translateX(100%); transition: transform 240ms ease; overflow-y: auto;
}
.acct-drawer.open { transform: translateX(0); }
.acct-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-5); border-bottom: 1px solid var(--border-hairline);
  position: sticky; top: 0; background: var(--surface-canvas);
}
.acct-drawer-eyebrow { font-size: var(--type-label-sm); text-transform: uppercase; letter-spacing: var(--ls-uppercase); color: var(--text-muted); margin: 0 0 var(--space-1); }
.acct-drawer-name { font-size: var(--type-title-md); font-weight: 600; color: var(--text-primary); margin: 0; }
.acct-drawer-body { padding: var(--space-5); flex: 1; }
.acct-drawer-foot { padding: var(--space-5); border-top: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: var(--space-3); }

.acct-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.acct-action {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); min-height: 104px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-canvas); text-decoration: none;
}
.acct-action:hover { border-color: var(--card-border-hover); background: var(--surface-soft); }
.acct-action-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--surface-soft); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-action-icon svg { width: 20px; height: 20px; }
.acct-action-label { font-size: var(--type-body-md); font-weight: 600; color: var(--text-primary); }
.acct-action-sub { font-size: var(--type-caption); color: var(--text-muted); margin-top: auto; }

/* Logged-out account drawer block */
.acct-drawer-signin { display: flex; flex-direction: column; gap: var(--space-3); }
.acct-drawer-benefits { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.acct-drawer-benefits li { font-size: var(--type-body-sm); color: var(--text-body); padding-left: var(--space-5); position: relative; }
.acct-drawer-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--text-link); font-weight: 600; }

/* ============================================================ */
/* SEARCH DRAWER (top slide-down)                               */
/* ============================================================ */
.search-drawer-scrim { position: fixed; inset: 0; background: var(--color-overlay-subtle); z-index: 95; }
.search-drawer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 96;
  background: var(--surface-canvas); box-shadow: var(--elevation-modal);
  transform: translateY(-100%); transition: transform 220ms ease;
  padding: var(--space-4) var(--container-padding);
}
.search-drawer.open { transform: translateY(0); }
.search-drawer-form {
  max-width: var(--container-default); margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 var(--space-3);
}
.search-drawer-form svg { color: var(--text-muted); flex-shrink: 0; }
.search-drawer-form input { flex: 1; border: none; background: transparent; padding: var(--space-4) var(--space-2); font: inherit; font-size: var(--type-body-md); color: var(--text-primary); min-width: 0; }
.search-drawer-form input:focus { outline: none; }
.search-drawer-close { background: none; border: none; cursor: pointer; color: var(--text-muted); display: inline-flex; padding: var(--space-2); }
.search-drawer-hint { max-width: var(--container-default); margin: var(--space-3) auto 0; font-size: var(--type-caption); color: var(--text-muted); }
.search-drawer-hint a { color: var(--text-link); text-decoration: none; }

/* ============================================================ */
/* SEARCH TYPEAHEAD (WIREFRAME) — shared by nav search + Home Search tab
   Candidate components to formalise (see PAGE-DESIGN-LOG):
   · L2 — search-result row (.ta-row): horizontal thumb + code + name
           (NOT the vertical product card §8.1 or its compact variant).
   · L3 — grouped-results container (.typeahead): the light preview shell.
   · Code badge (.ta-badge) = existing Badge primitive, status intent (§7.6). */
/* ============================================================ */
.typeahead {
  margin-top: var(--space-2);
  background: var(--surface-canvas);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);
  overflow: hidden;
  text-align: left;
}
.ta-group { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-hairline); }
.ta-group-head {
  margin: 0; padding: var(--space-1) var(--space-3);
  font-size: var(--type-caption);
  letter-spacing: var(--ls-uppercase); text-transform: uppercase;
  color: var(--text-muted);
}
.ta-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  text-decoration: none; color: var(--text-primary);
}
.ta-row:hover { background: var(--surface-soft); }
/* Recognition-size thumb slot — provisional dimension, depends on the
   image-quality / AI-upscaling track (Phase 1). Empty soft box = silhouette. */
.ta-thumb {
  flex: none; width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border-hairline);
}
/* Categories / Series carry a slightly larger image than product rows — the
   shape/family is recognised visually, so the thumb earns more room. */
.ta-thumb-lg { width: 56px; height: 56px; }
.ta-cat-name { font-size: var(--type-body-md); font-weight: 500; color: var(--text-primary); }
.ta-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ta-code {
  font-size: var(--type-body-sm); font-weight: 600;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.ta-name {
  font-size: var(--type-body-sm); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ta-link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-decoration: none; color: var(--text-link);
  font-size: var(--type-body-sm);
}
.ta-link:hover { background: var(--surface-soft); }
.ta-link svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.ta-viewall {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-body-sm); font-weight: 500;
  color: var(--text-link); text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
}
.ta-viewall:hover { background: var(--surface-soft); }
.ta-empty { padding: var(--space-4) var(--space-3); }
.ta-empty-lead { margin: 0; font-size: var(--type-body-sm); color: var(--text-body); }
.ta-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-soft);
  font-size: var(--type-body-sm);
}
.ta-foot a { color: var(--text-link); text-decoration: none; }
.ta-foot a:hover { text-decoration: underline; }

/* Nav-search desktop instance — dropdown anchored below the inline input */
.header-search-wrap { position: relative; display: inline-flex; }
.header-typeahead {
  position: absolute; top: calc(100% + var(--space-1)); right: 0;
  width: 380px; max-width: 90vw; z-index: 45;
}
.header-typeahead .typeahead { margin-top: 0; }
/* Mobile search drawer instance — full-width, in-flow under the drawer input */
.search-drawer .typeahead { max-width: var(--container-default); margin-left: auto; margin-right: auto; }

/* ============================================================ */
/* BREADCRUMB (AirTable style: slim bar, chevron separators)    */
/* ============================================================ */
.breadcrumb-bar {
  background: var(--surface-canvas);
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-3) var(--container-padding);
}
.breadcrumb {
  max-width: var(--container-full); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--type-body-sm); color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-link); }
.breadcrumb .sep { color: var(--text-disabled); display: inline-flex; font-size: 1.1em; line-height: 1; }
.breadcrumb .current { color: var(--text-primary); }