/*
 * Cutlass Bearings Theme
 * Industrial-catalog styling for a Solidus store. Single file, variable-
 * driven. Every class is namespaced `cb-*` so it never collides with the
 * host Solidus layout/admin styles.
 */

:root {
  /* Palette */
  --cb-primary:       #0f3d6e;
  --cb-primary-dark:  #0a2a4d;
  --cb-primary-light: #e6efff;
  --cb-accent:        #f97316;
  --cb-accent-dark:   #c2410c;
  --cb-ink:           #0f172a;
  --cb-ink-soft:      #334155;
  --cb-ink-muted:     #64748b;
  --cb-bg:            #f8fafc;
  --cb-surface:       #ffffff;
  --cb-border:        #e2e8f0;
  --cb-border-strong: #cbd5e1;
  --cb-success:       #15803d;
  --cb-success-bg:    #dcfce7;
  --cb-warning:       #b45309;
  --cb-warning-bg:    #fef3c7;
  --cb-danger:        #b91c1c;
  --cb-danger-bg:     #fee2e2;

  /* Shape + shadow */
  --cb-radius-sm:     4px;
  --cb-radius:        8px;
  --cb-radius-lg:     12px;
  --cb-shadow-sm:     0 1px 2px rgba(15, 23, 42, .04);
  --cb-shadow:        0 4px 16px rgba(15, 23, 42, .07);
  --cb-shadow-lg:     0 12px 32px rgba(15, 23, 42, .12);

  /* Typography — 100% sans-serif, Inter preferred */
  --cb-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --cb-font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* -------------- Global resets -------------- */

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

html, body {
  font-family: var(--cb-font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  background: var(--cb-bg);
  color: var(--cb-ink);
  margin: 0;
  padding: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Override any serif inheritance from Spree backend bleed-through */
body, body *, h1, h2, h3, h4, h5, h6, p, span, a, li, label, input, button, select, textarea, table, th, td {
  font-family: var(--cb-font-sans) !important;
}
code, pre, .cb-mono, .cb-mono * {
  font-family: var(--cb-font-mono) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cb-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 .75rem;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1rem; color: var(--cb-ink-soft); }

a { color: var(--cb-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--cb-accent); }

.cb-body { min-height: 100vh; display: flex; flex-direction: column; }
.cb-main { flex: 1 0 auto; padding-bottom: 3rem; }


.cb-skip {
  position: absolute; left: -9999px;
  background: var(--cb-primary); color: #fff;
  padding: .5rem 1rem; border-radius: var(--cb-radius);
  z-index: 1000;
}
.cb-skip:focus { left: 1rem; top: 1rem; }

/* -------------- Buttons -------------- */













/* Pre-order variant: deliberately inverted from Add-to-cart so the two
   states are instantly distinguishable at a glance in the catalog table. */



/* Fixed-width cart buttons so the Add-to-cart and Pre-order columns line
   up perfectly regardless of which state each row is in. */






/* -------------- Site header -------------- */

.cb-siteheader {
  background: #fff;
  border-bottom: 1px solid var(--cb-border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--cb-shadow-sm);
}
.cb-siteheader__top {
  background: var(--cb-primary-dark);
  color: #fff;
  font-size: .8rem;
}
.cb-siteheader__topinner {
  display: flex;
  gap: 2rem;
  padding: .5rem 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cb-siteheader__topinner span { opacity: .92; }

.cb-siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1.5rem;
}

.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none !important;
  color: var(--cb-ink) !important;
}
.cb-brand__mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: var(--cb-primary);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  border-radius: var(--cb-radius);
  letter-spacing: .02em;
}
.cb-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.cb-brand__text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.cb-brand__text small  { font-size: .7rem; color: var(--cb-ink-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cb-brand--light .cb-brand__text strong { color: #fff; }
.cb-brand--light .cb-brand__text small  { color: rgba(255,255,255,.7); }
.cb-brand--light .cb-brand__mark { background: #fff; color: var(--cb-primary-dark); }

.cb-sitenav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.cb-sitenav a {
  color: var(--cb-ink-soft);
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cb-sitenav a:hover { color: var(--cb-primary); border-bottom-color: var(--cb-accent); }

.cb-siteheader__actions { display: flex; align-items: center; gap: 1rem; }





/* -------------- Flash messages -------------- */

.cb-flash {
  padding: .75rem 1.5rem;
  font-weight: 500;
  border-bottom: 1px solid var(--cb-border);
}
.cb-flash--notice  { background: var(--cb-success-bg); color: var(--cb-success); }
.cb-flash--alert   { background: var(--cb-danger-bg);  color: var(--cb-danger); }
.cb-flash--error   { background: var(--cb-danger-bg);  color: var(--cb-danger); }

/* -------------- Hero -------------- */

.cb-hero {
  background: linear-gradient(135deg, var(--cb-primary-dark) 0%, var(--cb-primary) 60%, #1e3a8a 100%);
  color: #fff;
  padding: 5rem 1.5rem 6rem;
  position: relative;
  overflow: hidden;
}
.cb-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(249,115,22,.25) 0%, transparent 50%);
  pointer-events: none;
}
.cb-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.cb-hero__content {
  flex: 1;
  min-width: 0;
}
.cb-hero__image {
  flex: 0 0 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-hero__image img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
@media (max-width: 1100px) {
  .cb-hero__image {
    flex: 0 0 400px;
  }
}
@media (max-width: 900px) {
  .cb-hero__inner {
    flex-direction: column;
    text-align: center;
  }
  .cb-hero__image {
    flex: 0 0 auto;
    max-width: 420px;
    width: 100%;
  }
  .cb-hero__ctas {
    justify-content: center;
  }
}
.cb-hero__kicker {
  display: inline-block;
  padding: .35rem .85rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.5rem;
}
.cb-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  max-width: 22ch;
}
.cb-hero p {
  color: rgba(255,255,255,.88);
  font-size: 1.1rem;
  max-width: 60ch;
  margin-bottom: 2.5rem;
}
.cb-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* -------------- Shaft and housing selector -------------- */

.cb-hero--selector { padding: 3.5rem 1.5rem; }
.cb-hero--selector .cb-hero__content { flex: 1 1 0; }
.cb-hero--selector .cb-hero__content > p { margin-bottom: 0; }
.cb-hero--selector .cb-selector { flex: 1 1 0; }
.cb-selector {
  min-width: 0;
  background: #fff;
  color: var(--cb-ink);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  padding: 1.75rem;
  text-align: left;
  scroll-margin-top: 9rem;
}
.cb-selector h2 { color: var(--cb-primary-dark); font-size: 1.5rem; margin: 0 0 .65rem; }
.cb-selector .cb-selector__intro { color: var(--cb-ink-soft); font-size: .95rem; margin: 0 0 1.25rem; }
.cb-selector__fields { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cb-selector__field { min-width: 0; }
.cb-selector label { display: block; color: var(--cb-ink); font-weight: 700; margin-bottom: .4rem; }
.cb-selector select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 1rem;
  color: var(--cb-ink);
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f3d6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  padding: .65rem 2.75rem .65rem .9rem;
  cursor: pointer;
}
.cb-selector select:not(:disabled):hover { border-color: var(--cb-primary); }
.cb-selector select:disabled { background-color: #f1f5f9; color: #475569; opacity: 1; cursor: default; }
@media (forced-colors: active) {
  .cb-selector select { appearance: auto; -webkit-appearance: auto; background-image: none; }
}
.cb-selector :is(select, button, a):focus-visible { outline: 3px solid #ea580c; outline-offset: 3px; }
.cb-selector .cb-selector__hint { color: #475569; font-size: .8rem; margin: .4rem 0 0; }
.cb-selector .cb-selector__error { color: #991b1b; background: #fef2f2; padding: .75rem; font-size: .95rem; margin: 0 0 1rem; }
.cb-selector__submit { width: 100%; min-height: 48px; margin-top: 1.25rem; white-space: normal; }
.cb-selector .cb-selector__help { font-size: .85rem; margin: .85rem 0 0; text-align: center; }
.cb-selector__help a { color: var(--cb-primary); text-decoration: underline; }
.cb-selector-page { max-width: 1240px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.cb-selector-page .cb-selector__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-selector-page .cb-selector__submit { max-width: 20rem; }
.cb-selector-page .cb-selector__help { text-align: left; }
.cb-selector-results { margin-top: 2.5rem; scroll-margin-top: 9rem; }
.cb-selector-results:focus { outline: none; }
.cb-selector-results:focus-visible > .cb-selector-results__heading { outline: 2px solid var(--cb-primary); outline-offset: 4px; border-radius: 4px; }
.cb-selector-results__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cb-selector-results__heading h2 { margin: 0; }
.cb-selector-results__heading a { padding: .65rem 0; text-decoration: underline; }
.cb-selector-results > p { color: var(--cb-ink-soft); margin: .75rem 0 1.5rem; }
.cb-selector-results__caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cb-selector-results > .cb-selector-results__scroll-hint { display: none; font-size: .85rem; margin: 0 0 .5rem; }
.cb-selector-results .cb-selector-results__table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.cb-selector-results__table:focus-visible { outline: 3px solid #ea580c; outline-offset: 3px; }
.cb-selector-results__table .cb-table { min-width: 980px; }
.cb-selector-results__table .cb-table tbody :is(th, td) { padding: .65rem .85rem; border-bottom: 1px solid var(--cb-border); vertical-align: middle; }
.cb-selector-results__table .cb-table tbody th { text-align: left; }
.cb-selector-results__table .cb-table tbody tr:last-child th { border-bottom: none; }
.cb-selector-results__table .cb-col-code code, .cb-selector-results__table .cb-col-dim { white-space: nowrap; }
.cb-selector-results__table .cb-col-price { min-width: 100px; }
.cb-selector-results__table .cb-col-stock { min-width: 190px; }
.cb-selector-results__table .cb-badge { white-space: nowrap; }
.cb-selector-results__table .cb-btn { min-height: 44px; }
@media (max-width: 1100px) {
  .cb-selector-results > .cb-selector-results__scroll-hint { display: block; }
}
.cb-selector-page__help { margin-top: 2rem; }
@media (max-width: 900px) {
  /* The promotion bar wraps above the compact-header breakpoint. */
  .cb-selector, .cb-selector-results { scroll-margin-top: 12rem; }
  .cb-hero--selector .cb-hero__inner { align-items: stretch; gap: 1.5rem; }
  .cb-hero--selector .cb-hero__content { text-align: left; }
  .cb-hero--selector h1 { max-width: none; font-size: 2.25rem; margin-bottom: .75rem; }
  .cb-hero--selector .cb-hero__kicker { margin-bottom: 1rem; }
}
@media (max-width: 720px) {
  .cb-selector, .cb-selector-results { scroll-margin-top: 7.5rem; }
}
@media (max-width: 600px) {
  .cb-hero.cb-hero--selector { padding: 1.5rem 1rem; }
  .cb-hero--selector h1 { font-size: 1.85rem; }
  .cb-hero--selector .cb-hero__content > p { font-size: .95rem; }
  .cb-hero--selector .cb-hero__kicker { font-size: .62rem; padding: .3rem .6rem; letter-spacing: .03em; }
  .cb-selector { padding: 1.25rem; }
  .cb-selector h2 { font-size: 1.3rem; }
  .cb-selector-page { padding: 1.5rem 1rem; }
  .cb-selector-page .cb-selector__fields { grid-template-columns: minmax(0, 1fr); }
}

/* -------------- Trust row -------------- */

.cb-trust {
  background: #fff;
  border-bottom: 1px solid var(--cb-border);
  padding: 2.5rem 1.5rem;
}
.cb-trust__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
}
.cb-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.cb-trust__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.cb-trust__item strong {
  display: block;
  font-size: 1rem;
  color: var(--cb-ink);
  margin-bottom: .25rem;
}
.cb-trust__item p {
  margin: 0;
  font-size: .85rem;
  color: var(--cb-ink-muted);
}

/* -------------- Materials grid -------------- */

.cb-materials {
  padding: 4rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.cb-materials__header {
  text-align: center;
  margin-bottom: 3rem;
}
.cb-materials__header h2 {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.cb-materials__header p { font-size: 1.05rem; }

.cb-materials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.cb-material-card {
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 2rem 1.75rem;
  text-decoration: none !important;
  color: var(--cb-ink) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
}
.cb-material-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cb-shadow-lg);
  border-color: var(--cb-primary);
  color: var(--cb-ink) !important;
}
.cb-material-card h3 {
  font-size: 1.5rem;
  margin-bottom: .75rem;
  color: var(--cb-primary) !important;
}
.cb-material-card p {
  flex: 1;
  font-size: .9rem;
  margin-bottom: 1.5rem;
  color: var(--cb-ink-soft);
}
.cb-material-card__cta {
  font-weight: 600;
  color: var(--cb-accent);
  font-size: .9rem;
}
.cb-material-card__tag {
  position: absolute;
  top: -.65rem;
  left: 1.5rem;
  background: var(--cb-accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(249,115,22,.35);
}

/* -------------- Feature split block -------------- */

.cb-feature {
  background: var(--cb-primary-light);
  padding: 4rem 1.5rem;
}
.cb-feature__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.cb-feature__text h2 { font-size: 2rem; }
.cb-feature__text p { font-size: 1rem; }

.cb-spec-card {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--cb-shadow);
}
.cb-spec-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--cb-border);
  font-size: .9rem;
}
.cb-spec-card__row:last-child { border-bottom: none; }
.cb-spec-card__row span { color: var(--cb-ink-muted); }
.cb-spec-card__row strong { color: var(--cb-ink); font-weight: 600; }
.cb-spec-card__row--highlight strong {
  color: var(--cb-accent-dark);
  font-size: 1.1rem;
}

/* -------------- FAQ -------------- */

.cb-faq {
  padding: 4rem 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}
.cb-faq h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
}
.cb-faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
}
.cb-faq__item h3 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.cb-faq__item p { font-size: .9rem; }

/* -------------- CTA strip -------------- */

.cb-ctastrip {
  background: var(--cb-primary-dark);
  color: #fff;
  padding: 3.5rem 1.5rem;
}
.cb-ctastrip__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.cb-ctastrip h2 { color: #fff; font-size: 2rem; }
.cb-ctastrip p  { color: rgba(255,255,255,.85); font-size: 1.05rem; margin-bottom: 2rem; }

/* -------------- Catalog page -------------- */

.cb-catalog {
  max-width: 1240px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.cb-catalog__header {
  margin-bottom: 1.5rem;
}
.cb-catalog__header h1 { font-size: 2rem; }
.cb-catalog__lede {
  color: var(--cb-ink-soft);
  max-width: 62ch;
  font-size: 1rem;
}

/* Material tabs */
.cb-material-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--cb-border);
  margin: 1.5rem 0 0;
  flex-wrap: wrap;
}
.cb-material-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--cb-ink-muted) !important;
  text-decoration: none !important;
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
  transition: background .15s, color .15s;
}
.cb-material-tab:hover { background: var(--cb-primary-light); color: var(--cb-primary) !important; }
.cb-material-tab.is-active {
  background: #fff;
  color: var(--cb-primary) !important;
  box-shadow: inset 0 -3px 0 var(--cb-accent);
}
.cb-material-tab.is-empty { opacity: .5; }
.cb-material-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0 .45rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--cb-border);
  font-size: .7rem;
  font-weight: 700;
  color: var(--cb-ink-soft);
}
.cb-material-tab.is-active .cb-material-tab__count {
  background: var(--cb-primary);
  color: #fff;
}

/* Filter bar: three stacked rows (dims / unit / toggles) */
.cb-filters {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-top: none;
  border-radius: 0 0 var(--cb-radius) var(--cb-radius);
  padding: 1.75rem 2rem 1.5rem;
  box-shadow: var(--cb-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Row 1: the three dimension dropdowns — the primary interaction. */
.cb-filters__dims {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.cb-filters__field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink);
  margin-bottom: .5rem;
}
.cb-filters__field--dim select {
  width: 100%;
  padding: .85rem 1rem;
  padding-right: 2.5rem;
  border: 2px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  color: var(--cb-ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f3d6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.cb-filters__field--dim select:hover   { border-color: var(--cb-primary); }
.cb-filters__field--dim select:focus   {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 4px var(--cb-primary-light);
}
.cb-filters__field--dim select optgroup {
  font-weight: 700;
  font-style: normal;
  color: var(--cb-primary);
  background: var(--cb-primary-light);
  padding: .25rem 0;
}
.cb-filters__field--dim select option {
  font-weight: 500;
  color: var(--cb-ink);
  padding: .3rem 0;
}

/* Row 2: Unit System label + 4 buttons on one line. */
.cb-filters__units {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-filters__unit-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}
.cb-filters__unit-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: nowrap;
}
.cb-unit-tab {
  padding: .55rem 1.1rem;
  border-radius: var(--cb-radius-sm);
  background: var(--cb-bg);
  color: var(--cb-ink-soft);
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid var(--cb-border);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.cb-unit-tab:hover      { background: var(--cb-primary-light); color: var(--cb-primary); }
.cb-unit-tab.is-active  { background: var(--cb-primary); color: #fff; border-color: var(--cb-primary); }

/* Fractional / decimal size toggle.
   Reuses .cb-filters__unit-tabs + .cb-unit-tab so it reads as the same
   control as the unit-system tabs rather than a second, competing widget. */
.cb-dimfmt {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-dimfmt__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}
/* In the catalog filter bar the toggle sits in its own row. */
.cb-dimfmt--compact { margin-top: -.25rem; }

/* Specifications heading + toggle on one line, stacking on narrow screens. */
.cb-spec-table__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cb-spec-table__head h2 { margin-bottom: 0; }

/* Standalone toggle above the size chart. */
.cb-article--wide + .cb-dimfmt,
.cb-dimfmt:not(.cb-dimfmt--compact) { margin: 0 auto 1rem; }

@media (max-width: 640px) {
  .cb-dimfmt { gap: .6rem; }
  .cb-dimfmt .cb-unit-tab { padding: .5rem .85rem; font-size: .78rem; }
}

/* Row 3: In Stock Only + Clear filters (inline) + result counter on the
   right. Fixed vertical layout so toggling filters never shifts anything. */
.cb-filters__toggles {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--cb-border);
}
.cb-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--cb-ink-soft);
  cursor: pointer;
}
.cb-filters__clear {
  background: none;
  border: none;
  color: var(--cb-primary);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  visibility: hidden;
  line-height: 1;
}
.cb-filters__clear.is-active { visibility: visible; }
.cb-filters__status {
  margin-left: auto;
  font-size: .85rem;
  color: var(--cb-ink-muted);
}
.cb-filters__status span[data-bearing-filter-target="counter"] {
  color: var(--cb-ink);
  font-weight: 700;
}

/* Catalog table */
.cb-table-wrapper {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  overflow: hidden;
  box-shadow: var(--cb-shadow);
}

.cb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.cb-table thead th {
  background: #f1f5f9;
  text-align: left;
  padding: .85rem 1rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cb-ink-muted);
  border-bottom: 1px solid var(--cb-border);
}
.cb-table tbody td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: middle;
}
.cb-table tbody tr:last-child td { border-bottom: none; }
.cb-table tbody tr:hover { background: #f8fafc; }

.cb-col-code { width: 120px; }
.cb-col-code a { text-decoration: none !important; }
.cb-col-code code {
  display: inline-block;
  font-weight: 700;
  color: var(--cb-primary) !important;
  background: var(--cb-primary-light);
  padding: .35rem .65rem;
  border-radius: var(--cb-radius-sm);
  font-size: .85rem;
  transition: background .15s, color .15s;
}
.cb-col-code a:hover code { background: var(--cb-primary); color: #fff !important; }

.cb-col-dim {
  width: 130px;
  color: var(--cb-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cb-col-stock { width: 170px; }
.cb-col-price { width: 110px; text-align: right; font-weight: 700; color: var(--cb-ink); font-variant-numeric: tabular-nums; }
.cb-price--poa {
  font-size: .72rem;
  font-weight: 600;
  color: var(--cb-ink-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cb-col-action { width: 140px; text-align: right; }

.cb-mono { font-size: .92rem; }







/* Dispatch badge used on cart / checkout / order confirmation — same
   semantic as cb-badge but scoped to line-item lists where the badge
   sits beneath the product name rather than inside a product card. */




.cb-add-form { margin: 0; }

/* Empty state */
.cb-empty {
  margin-top: 2rem;
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--cb-border-strong);
  border-radius: var(--cb-radius);
  color: var(--cb-ink-soft);
}
.cb-empty__hint { font-size: .875rem; color: var(--cb-ink-muted); }
.cb-empty code { background: var(--cb-bg); padding: .2rem .5rem; border-radius: var(--cb-radius-sm); font-size: .85rem; }

/* -------------- Product detail page -------------- */

.cb-product {
  max-width: 1240px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.cb-breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .85rem;
  color: var(--cb-ink-muted);
  margin-bottom: 1.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cb-breadcrumb::-webkit-scrollbar { display: none; }
.cb-breadcrumb__link,
.cb-breadcrumb a { color: var(--cb-ink-soft); }
.cb-breadcrumb__link:hover,
.cb-breadcrumb a:hover { color: var(--cb-primary); }
.cb-breadcrumb__current,
.cb-breadcrumb span:last-child { color: var(--cb-ink); font-weight: 600; }
.cb-breadcrumb__sep { color: var(--cb-border-strong); flex: 0 0 auto; }

.cb-kicker {
  display: inline-block;
  padding: .25rem .75rem;
  background: var(--cb-primary-light);
  color: var(--cb-primary);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.cb-product__header { margin-bottom: 2.5rem; }
.cb-product__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cb-ink);
  margin: .5rem 0 1rem;
  max-width: 28ch;
}
.cb-product__subtitle {
  font-size: 1.05rem;
  color: var(--cb-ink-soft);
  margin: 0;
  max-width: 62ch;
  line-height: 1.55;
}

/* SVG dimension diagram */
.cb-diagram {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.5rem 2rem 1.25rem;
  margin: 0 0 2rem;
  box-shadow: var(--cb-shadow-sm);
}
.cb-diagram svg {
  width: 100%;
  height: auto;
  max-height: 320px;
}
.cb-diagram figcaption {
  font-size: .85rem;
  color: var(--cb-ink-muted);
  text-align: center;
  margin-top: .5rem;
}

.cb-product__grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 3rem;
  align-items: flex-start;
}
.cb-product__main { order: 1; }
.cb-product__sidebar { order: 2; }

.cb-price-card {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cb-shadow);
}

/* Material hero photo — sits directly below the price card in the
   sidebar, card-styled to match. Visually a quiet second panel after
   the main buy-path. */
.cb-product__hero-img {
  margin: 1.25rem 0 0;
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1rem;
  box-shadow: var(--cb-shadow);
}
.cb-product__hero-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--cb-radius-lg) - 4px);
}
.cb-product__hero-img figcaption {
  margin-top: .65rem;
  font-size: .78rem;
  color: var(--cb-ink-muted);
  line-height: 1.4;
  text-align: center;
}

/* Cross-sell panel — "same size, different material" is now a nested
   section inside the price card, separated from the bullets above by
   a hairline divider. No outer card treatment because the price card
   already provides the background, border, radius and shadow. */
.cb-alternates {
  margin: 1.25rem -.25rem 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--cb-border);
}
.cb-alternates__urgent {
  background: var(--cb-warning-bg);
  color: var(--cb-warning);
  border-left: 4px solid var(--cb-accent);
  padding: .6rem .75rem;
  border-radius: var(--cb-radius);
  font-size: .85rem;
  line-height: 1.35;
  margin-bottom: .9rem;
}
.cb-alternates__urgent strong {
  display: block;
  color: var(--cb-accent-dark);
  font-size: .95rem;
  margin-bottom: .15rem;
}
.cb-alternates__title {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cb-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cb-alternates__lead {
  margin: 0 0 .85rem;
  font-size: .85rem;
  color: var(--cb-ink-muted);
  line-height: 1.4;
}
.cb-alternates__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cb-alternates__item {
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-alternates__item:hover {
  border-color: var(--cb-primary);
  box-shadow: 0 2px 6px rgba(15, 61, 110, .08);
  transform: translateY(-1px);
}
.cb-alternates__item--instock {
  border-color: var(--cb-success);
  background: var(--cb-success-bg);
}
.cb-alternates__item--instock:hover {
  border-color: var(--cb-success);
  box-shadow: 0 2px 6px rgba(21, 128, 61, .18);
}
.cb-alternates__link {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: .65rem;
  align-items: center;
  padding: .7rem .85rem;
  text-decoration: none;
  color: inherit;
}
.cb-alternates__swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  background: #666;
  flex-shrink: 0;
}
/* Material-specific swatch colours — roughly match the hero photos so
   the row is instantly recognisable without reading the label. */
.cb-alternates__item--phenolic .cb-alternates__swatch { background: #8b4a2b; }
.cb-alternates__item--brass    .cb-alternates__swatch { background: #c9a25f; }
.cb-alternates__item--grp      .cb-alternates__swatch { background: #d9c9a3; }
.cb-alternates__item--rubber   .cb-alternates__swatch { background: #1c1c1c; }
.cb-alternates__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.cb-alternates__material {
  font-weight: 700;
  font-size: .95rem;
  color: var(--cb-ink);
  line-height: 1.2;
}
.cb-alternates__sku {
  font-size: .75rem;
  color: var(--cb-ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cb-alternates__status {
  display: inline-block;
  margin-top: .1rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1rem .4rem;
  border-radius: 999px;
  width: fit-content;
}
.cb-alternates__status--instock {
  background: var(--cb-success);
  color: #fff;
}
.cb-alternates__status--preorder {
  background: var(--cb-warning-bg);
  color: var(--cb-warning);
  border: 1px solid var(--cb-warning);
}
.cb-alternates__price {
  font-weight: 700;
  color: var(--cb-ink);
  font-size: 1rem;
  white-space: nowrap;
}
.cb-price-card__price {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--cb-ink);
  margin-bottom: .25rem;
  line-height: 1;
}
.cb-price-card__gst {
  font-size: .8rem;
  font-weight: 500;
  color: var(--cb-ink-muted);
  margin-left: .5rem;
}
.cb-price-card__status {
  margin: 1rem 0;
}
.cb-price-card__notice {
  font-size: .85rem;
  color: var(--cb-ink-soft);
  background: var(--cb-bg);
  padding: .85rem 1rem;
  border-radius: var(--cb-radius-sm);
  margin: 1rem 0 1.25rem;
  border-left: 3px solid var(--cb-primary);
}
.cb-price-card__form { margin: 0 0 1.25rem; }
.cb-qty {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.cb-qty label { font-size: .85rem; color: var(--cb-ink-soft); font-weight: 600; }
.cb-qty input {
  width: 80px;
  padding: .5rem .75rem;
  border: 1px solid var(--cb-border-strong);
  border-radius: var(--cb-radius-sm);
  font-size: .95rem;
  font-weight: 600;
}
.cb-price-card__bullets {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: var(--cb-ink-soft);
}
.cb-price-card__bullets li { padding: .3rem 0; }

.cb-spec-table {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--cb-shadow-sm);
}
.cb-spec-table h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.cb-spec-table dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cb-spec-table dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px dashed var(--cb-border);
}
.cb-spec-table dl div:last-child { border-bottom: none; }
.cb-spec-table dt { color: var(--cb-ink-muted); font-size: .9rem; }
.cb-spec-table dd { margin: 0; color: var(--cb-ink); font-weight: 600; font-size: .95rem; }
.cb-spec-table code { font-size: .9rem; color: var(--cb-primary); font-weight: 700; }

.cb-product__description {
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--cb-shadow-sm);
}
.cb-product__description h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.cb-product__description p { color: var(--cb-ink-soft); margin-bottom: 1rem; }

.cb-back-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--cb-primary);
  font-weight: 600;
  font-size: .9rem;
}

/* -------------- Article (static pages) -------------- */

.cb-article {
  max-width: 780px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  background: #fff;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 3rem 3.5rem;
  box-shadow: var(--cb-shadow);
}
.cb-article__header h1 { font-size: 2.25rem; }
.cb-article__lede {
  font-size: 1.1rem;
  color: var(--cb-ink-soft);
  margin-bottom: 2rem;
}
.cb-article section { margin-top: 2rem; }
.cb-article h2 {
  font-size: 1.4rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cb-border);
}
.cb-article h3 { font-size: 1.1rem; }
.cb-article p  { color: var(--cb-ink-soft); font-size: .95rem; line-height: 1.7; }
.cb-article code {
  background: var(--cb-primary-light);
  color: var(--cb-primary);
  padding: .1rem .4rem;
  border-radius: var(--cb-radius-sm);
  font-size: .85rem;
}
.cb-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.cb-checks li {
  padding: .5rem 0 .5rem 1.75rem;
  position: relative;
  color: var(--cb-ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.cb-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--cb-success);
  font-weight: 800;
}

/* Wider article variant for pages that contain forms / two-col layouts */
.cb-article--wide { max-width: 1100px; padding: 3rem 4rem; }

/* Two-column form-and-aside layout (used on the contact page) */





@media (max-width: 900px) {
  
  .cb-article--wide { padding: 2rem 1.5rem; }
}

/* Forms */













/* Inline business address block (contact page sidebar) */
.cb-business {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--cb-ink-soft);
  margin: .75rem 0 0;
  padding: 1rem;
  background: var(--cb-bg);
  border-left: 3px solid var(--cb-primary);
  border-radius: var(--cb-radius-sm);
}

/* -------------- Site footer -------------- */

.cb-sitefooter {
  background: var(--cb-primary-dark);
  color: rgba(255,255,255,.85);
  margin-top: 4rem;
}
.cb-sitefooter__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3.5rem 1.5rem 2.5rem;
}
.cb-sitefooter__col h4 {
  color: #fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1rem;
}
.cb-sitefooter__col p,
.cb-sitefooter__col address {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  line-height: 1.6;
  margin: 1rem 0 0;
  font-style: normal;
}
.cb-sitefooter__address {
  font-size: .85rem;
  margin-top: 1rem !important;
}
.cb-sitefooter__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cb-sitefooter__col li { margin-bottom: .5rem; }
.cb-sitefooter__col a {
  color: rgba(255,255,255,.75) !important;
  font-size: .9rem;
}
.cb-sitefooter__col a:hover { color: #fff !important; }

.cb-sitefooter__bottom {
  background: rgba(0,0,0,.25);
  padding: 1.25rem 1.5rem;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.cb-sitefooter__bottominner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.cb-sitefooter__bottominner p { margin: 0; color: rgba(255,255,255,.55); font-size: .8rem; }

/* ==========================================================================
   CART / CHECKOUT / ORDER PAGES
   Full cb-* class system — no Tailwind dependency.
   ========================================================================== */

/* ---------- Cart page ---------- */






/* Cart table */
















/* Dispatch badge in the cart-table product cell — sits below the SKU,
   margin-top gives it a little breathing room from the product name. */













/* Cart sidebar */













/* Pre-checkout disclosures in the cart sidebar — stacked bullets just
   above the Checkout button covering the things Google needs visible
   (shipping, restocking fee, GST) before commitment. */





/* Empty cart */




/* ---------- Checkout ---------- */



/* Two-column checkout layout */


/* Main form area */




/* Checkout form fields — reuse .cb-form__field rules */


/* Checkbox row */



/* Checkout sidebar summary */



/* Checkout summary item rows */











/* Checkout button row */


/* Pay button */




/* Payment card info banner */



/* Payment fields wrapper */


/* Stripe Elements styling */
.solidus-stripe-payment {
  padding: 1rem 0;
}
.solidus-stripe-payment [data-solidus-stripe-payment-target="message"] {
  color: var(--cb-danger);
  font-size: .85rem;
  margin-top: .5rem;
}

/* Shipping method cards */






/* Payment method cards */




/* Shipment item list (delivery step) */
.cb-shipment-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--cb-border);
}
.cb-shipment-item:last-child { border-bottom: none; }
.cb-shipment-item__img {
  width: 70px; height: 70px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.cb-shipment-item__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cb-shipment-item__name { font-weight: 600; font-size: .9rem; }
.cb-shipment-item__price { font-size: .85rem; color: var(--cb-ink-muted); }

/* ---------- Order confirmation ---------- */




























/* ---------- Error messages ---------- */






/* ---------- Responsive cart / checkout ---------- */



@media (max-width: 600px) {
  
  
  
  
  
  
  
  .cb-steps li span,
  .cb-steps li a { font-size: .7rem; }
  
  
}

/* -------------- Mobile menu (hamburger) -------------- */

/* Hidden by default — only shown when the desktop nav is hidden. */
.cb-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  color: var(--cb-ink);
  cursor: pointer;
}
.cb-menu-btn:hover { background: var(--cb-primary-light); color: var(--cb-primary); border-color: var(--cb-primary); }
.cb-menu-btn__close { display: none; }
.is-menu-open .cb-menu-btn__open  { display: none; }
.is-menu-open .cb-menu-btn__close { display: block; }

/* The mobile dropdown panel — full-width strip under the brand row.
   Hidden by default at every breakpoint. Visible only when both
   (a) the viewport is small enough to show the hamburger button AND
   (b) the header has `.is-menu-open` from a hamburger tap. */
.cb-mobile-nav {
  display: none;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--cb-border);
  padding: .5rem 0;
}
.cb-mobile-nav a {
  display: block;
  padding: .85rem 1.5rem;
  color: var(--cb-ink);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid var(--cb-border);
  text-decoration: none;
}
.cb-mobile-nav a:last-child { border-bottom: none; }
.cb-mobile-nav a:hover { background: var(--cb-primary-light); color: var(--cb-primary); }

/* Top promo bar — full version (desktop) vs compact (mobile). */
.cb-siteheader__topcompact { display: none; }

/* -------------- Responsive -------------- */

@media (max-width: 1024px) {
  .cb-feature__inner { grid-template-columns: 1fr; gap: 2rem; }
  .cb-product__grid { grid-template-columns: 1fr; }
  .cb-product__sidebar { order: 1; }
  .cb-product__main { order: 2; }
  .cb-price-card { position: static; }
  .cb-sitefooter__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cb-filters__dims { grid-template-columns: 1fr 1fr; }
  /* Hide the desktop in-row nav, but DON'T hide the mobile-nav panel — that
     one is gated by the `hidden` attribute and toggled by the hamburger. */
  .cb-sitenav { display: none; }
  .cb-menu-btn { display: inline-flex; }
  /* Reveal the dropdown panel only after the hamburger has been tapped. */
  .is-menu-open .cb-mobile-nav { display: flex; }
}

@media (max-width: 720px) {
  .cb-hero { padding: 3rem 1.5rem; }
  .cb-col-id, .cb-col-od { display: none; }
  .cb-col-size { min-width: 120px; font-size: .8rem; }

  /* Filter dropdowns stack 1-up so the option labels aren't truncated. */
  .cb-filters { padding: 1.25rem 1rem; gap: 1.25rem; }
  .cb-filters__dims { grid-template-columns: 1fr; gap: .9rem; }
  .cb-filters__field--dim select { font-size: .95rem; padding: .75rem .9rem; padding-right: 2.5rem; }

  /* Unit tabs: allow wrap on narrow screens; tighter padding so all 4 fit. */
  .cb-filters__units { gap: .5rem; }
  .cb-filters__unit-tabs { flex-wrap: wrap; gap: .35rem; }
  .cb-unit-tab { padding: .5rem .75rem; font-size: .78rem; }

  /* Toggles row stacks the counter under the controls so nothing overflows. */
  .cb-filters__toggles { flex-wrap: wrap; gap: .75rem 1rem; padding-top: .85rem; }
  .cb-filters__status { margin-left: 0; width: 100%; }

  /* Material tabs (Phenolic / Rubber / Brass / GRP) — slim down so all 4
     fit side-by-side on a phone instead of wrapping awkwardly. */
  .cb-material-tabs { gap: .15rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cb-material-tabs::-webkit-scrollbar { display: none; }
  .cb-material-tab { padding: .65rem .65rem; font-size: .82rem; gap: .35rem; flex: 0 0 auto; }
  .cb-material-tab__count { min-width: 1.3rem; height: 1.25rem; font-size: .65rem; padding: 0 .35rem; }

  .cb-catalog__header h1 { font-size: 1.5rem; line-height: 1.2; }
  .cb-catalog__lede { font-size: .92rem; }

  /* Breadcrumb: keep on one line, smaller, tighter — scrolls if a very
     long SKU would otherwise overflow. */
  .cb-breadcrumb { font-size: .78rem; gap: .35rem; margin-bottom: 1rem; }

  .cb-sitefooter__grid { grid-template-columns: 1fr; }
  .cb-article { padding: 2rem 1.5rem; margin: 1.5rem; }

  /* Header: single-line promo bar + tighter brand row. */
  .cb-siteheader__topfull    { display: none; }
  .cb-siteheader__topcompact { display: inline; }
  .cb-siteheader__topinner { padding: .4rem 1rem; font-size: .7rem; justify-content: center; gap: 0; }
  .cb-siteheader__inner { gap: .5rem; padding: .65rem 1rem; flex-wrap: nowrap; }
  .cb-brand { gap: .5rem; }
  .cb-brand__mark { width: 36px; height: 36px; font-size: .85rem; }
  .cb-brand__text strong { font-size: .95rem; }
  .cb-brand__text small  { display: none; }
  .cb-siteheader__actions { gap: .5rem; }
  
   /* Just the icon + badge on phones */
}