/*
 * 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-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

.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 -------------- */

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--cb-radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.cb-btn:active { transform: translateY(1px); }

.cb-btn--primary {
  background: var(--cb-primary);
  color: #fff !important;
  border-color: var(--cb-primary);
}
.cb-btn--primary:hover { background: var(--cb-primary-dark); border-color: var(--cb-primary-dark); color: #fff !important; }

.cb-btn--ghost {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
}
.cb-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff !important; }

.cb-btn--outline {
  background: transparent;
  color: var(--cb-primary) !important;
  border-color: var(--cb-primary);
}
.cb-btn--outline:hover { background: var(--cb-primary-light); color: var(--cb-primary) !important; }

/* Pre-order variant: deliberately inverted from Add-to-cart so the two
   states are instantly distinguishable at a glance in the catalog table. */
.cb-btn--preorder {
  background: #fff;
  color: var(--cb-primary) !important;
  border-color: var(--cb-primary);
}
.cb-btn--preorder:hover {
  background: var(--cb-primary-light);
  color: var(--cb-primary-dark) !important;
  border-color: var(--cb-primary-dark);
}

/* Fixed-width cart buttons so the Add-to-cart and Pre-order columns line
   up perfectly regardless of which state each row is in. */
.cb-btn--cart {
  width: 120px;
  padding: .55rem .5rem;
  font-size: .82rem;
}

.cb-btn--sm  { padding: .45rem .8rem; font-size: .8rem; }
.cb-btn--lg  { padding: .9rem 1.75rem; font-size: 1rem; }
.cb-btn--block { display: flex; width: 100%; }

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

.cb-cart-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--cb-primary);
  color: #fff !important;
  border-radius: var(--cb-radius);
  font-weight: 600;
  font-size: .85rem;
  position: relative;
}
.cb-cart-link:hover { background: var(--cb-primary-dark); color: #fff !important; }
.cb-cart-link__badge {
  background: var(--cb-accent);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .5rem;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .25rem;
}

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

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

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

.cb-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.cb-badge--instock   { background: var(--cb-success-bg); color: var(--cb-success); }
.cb-badge--backorder { background: var(--cb-warning-bg); color: var(--cb-warning); }
.cb-badge--oos       { background: var(--cb-danger-bg);  color: var(--cb-danger); }
.cb-badge--request   { background: var(--cb-primary-light); color: var(--cb-primary); }

/* 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-dispatch-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .25rem;
  white-space: nowrap;
  width: fit-content;
}
.cb-dispatch-badge--instock   { background: var(--cb-success-bg); color: var(--cb-success); }
.cb-dispatch-badge--backorder { background: var(--cb-warning-bg); color: var(--cb-warning); }

.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) */
.cb-form-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  margin-top: 1.5rem;
}
.cb-form-grid__form h2,
.cb-form-grid__aside h2 { margin-top: 0; }
.cb-form-grid__aside { font-size: .92rem; }
.cb-form-grid__aside h3 { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .cb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cb-article--wide { padding: 2rem 1.5rem; }
}

/* Forms */
.cb-form { margin-top: 1.5rem; }
.cb-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cb-form__field { margin-bottom: 1rem; display: block; }
.cb-form__field label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-ink);
  margin-bottom: .35rem;
}
.cb-form__field label span { color: var(--cb-accent); }
.cb-form__field input[type="text"],
.cb-form__field input[type="email"],
.cb-form__field input[type="tel"],
.cb-form__field select,
.cb-form__field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--cb-ink);
  transition: border-color .15s, box-shadow .15s;
}
.cb-form__field input:focus,
.cb-form__field select:focus,
.cb-form__field textarea:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-light);
}
.cb-form__field textarea { resize: vertical; min-height: 110px; }
.cb-form__error {
  display: block;
  margin-top: .35rem;
  color: var(--cb-danger);
  font-size: .8rem;
  font-weight: 600;
}
.cb-form__hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--cb-ink-muted);
  font-weight: 400;
}

@media (max-width: 720px) {
  .cb-form__row { grid-template-columns: 1fr; }
}

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

.cb-cart {
  max-width: 1240px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}
.cb-cart__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cb-ink);
  margin: 0 0 1.5rem;
}
.cb-cart__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
}
.cb-cart__main {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
}

/* Cart table */
.cb-cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cb-cart-table thead th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
}
.cb-cart-table__th-product { width: auto; }
.cb-cart-table__th-qty    { width: 80px; text-align: center; }
.cb-cart-table__th-price  { width: 110px; text-align: right; }
.cb-cart-table__th-remove { width: 40px; }

.cb-cart-table__row td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: middle;
}
.cb-cart-table__row:last-child td { border-bottom: none; }

.cb-cart-table__name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--cb-ink);
  margin-bottom: .15rem;
}
.cb-cart-table__name a { color: var(--cb-ink); text-decoration: none; }
.cb-cart-table__name a:hover { color: var(--cb-primary); }

.cb-cart-table__sku {
  font-size: .78rem;
  color: var(--cb-primary);
  font-family: var(--cb-font-mono);
  font-weight: 500;
  letter-spacing: .02em;
}

/* Dispatch badge in the cart-table product cell — sits below the SKU,
   margin-top gives it a little breathing room from the product name. */
.cb-cart-table__row .cb-dispatch-badge {
  margin-top: .35rem;
}

.cb-cart-table__qty { text-align: center; }
.cb-cart-table__qty input[type="number"] {
  width: 56px;
  padding: .45rem .35rem;
  text-align: center;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  font-size: .9rem;
  font-family: var(--cb-font-sans);
  background: #fff;
  color: var(--cb-ink);
  transition: border-color .15s, box-shadow .15s;
}
.cb-cart-table__qty input:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-light);
}

.cb-cart-table__price {
  font-weight: 700;
  font-size: .95rem;
  color: var(--cb-ink);
  white-space: nowrap;
  text-align: right;
}

.cb-cart-table__remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm); cursor: pointer;
  color: var(--cb-ink-muted); font-size: 1.1rem; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.cb-cart-table__remove-btn:hover {
  color: var(--cb-danger);
  border-color: var(--cb-danger);
  background: var(--cb-danger-bg);
}

.cb-cart__update-row {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-bg);
}

/* Cart sidebar */
.cb-cart__sidebar {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cb-shadow-sm);
  position: sticky;
  top: 120px;
}
.cb-cart__sidebar h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-summary-row {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--cb-ink-soft);
}
.cb-summary-row span:last-child { font-weight: 600; color: var(--cb-ink); }

.cb-summary-total {
  display: flex;
  justify-content: space-between;
  padding: .75rem 0 0;
  margin-top: .5rem;
  border-top: 1px solid var(--cb-border);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-cart__checkout-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  text-align: center;
}

.cb-cart__free-ship {
  color: var(--cb-success);
  font-weight: 600;
}
.cb-cart__gst-note {
  font-size: .78rem;
  color: var(--cb-ink-muted);
  margin: .75rem 0 0;
  text-align: right;
}

/* 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. */
.cb-cart__disclosures {
  list-style: none;
  padding: .9rem 1rem;
  margin: 1rem 0;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  font-size: .82rem;
  color: var(--cb-ink-soft);
  line-height: 1.55;
}
.cb-cart__disclosures li + li { margin-top: .35rem; }
.cb-cart__disclosures strong { color: var(--cb-ink); }
.cb-cart__sidebar .cb-cart__checkout-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 1.05rem !important;
  padding: 1rem !important;
}

/* Empty cart */
.cb-cart-empty {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
}
.cb-cart-empty h2 {
  font-size: 1.5rem;
  margin-bottom: .75rem;
}
.cb-cart-empty p {
  color: var(--cb-ink-muted);
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

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

.cb-checkout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

/* Two-column checkout layout */
.cb-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

/* Main form area */
.cb-checkout__form {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 2rem;
  box-shadow: var(--cb-shadow-sm);
}

.cb-checkout__section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cb-ink);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

/* Checkout form fields — reuse .cb-form__field rules */
.cb-checkout__form .cb-form__field { margin-bottom: 1rem; }

/* Checkbox row */
.cb-check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--cb-ink-soft);
  cursor: pointer;
  margin-bottom: 1rem;
}
.cb-check-row input[type="checkbox"],
.cb-check-row input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--cb-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Checkout sidebar summary */
.cb-checkout__summary {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cb-shadow-sm);
  position: sticky;
  top: 120px;
}
.cb-checkout__summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

/* Checkout summary item rows */
.cb-checkout__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--cb-border);
}
.cb-checkout__item:last-of-type { border-bottom: none; }
.cb-checkout__item-info { flex: 1; min-width: 0; padding-right: 1rem; }
.cb-checkout__item-name {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cb-ink);
  line-height: 1.3;
}
.cb-checkout__item-sku {
  display: block;
  font-size: .73rem;
  color: var(--cb-primary);
  font-family: var(--cb-font-mono);
  font-weight: 500;
  margin-top: .1rem;
}
.cb-checkout__item-right {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.cb-checkout__item-qty {
  font-size: .78rem;
  color: var(--cb-ink-muted);
  display: block;
}
.cb-checkout__item-price {
  font-weight: 600;
  font-size: .9rem;
  color: var(--cb-ink);
}

.cb-checkout__summary-totals {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cb-border);
}

/* Checkout button row */
.cb-checkout__actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cb-border);
}

/* Pay button */
.cb-checkout__pay-btn {
  font-size: 1.05rem !important;
  padding: 1rem !important;
  letter-spacing: .01em;
}

.cb-checkout__secure-note {
  text-align: center;
  font-size: .78rem;
  color: var(--cb-ink-muted);
  margin: 1rem 0 0;
}

/* Payment card info banner */
.cb-pay-card-info {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
}
.cb-pay-card-info p {
  margin: 0;
  font-size: .85rem;
  color: var(--cb-ink-muted);
}

/* Payment fields wrapper */
.cb-pay-fields {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.25rem;
}

/* 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 */
.cb-ship-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .75rem;
}
.cb-ship-option:hover { border-color: var(--cb-primary); background: var(--cb-primary-light); }
.cb-ship-option--selected {
  border-color: var(--cb-primary);
  background: var(--cb-primary-light);
}
.cb-ship-option input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--cb-primary); flex-shrink: 0;
}
.cb-ship-option__label { font-weight: 500; font-size: .9rem; }

/* Payment method cards */
.cb-pay-option {
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: border-color .15s;
}
.cb-pay-option--selected {
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 2px var(--cb-primary-light);
}
.cb-pay-option__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .75rem;
}

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

.cb-order {
  max-width: 900px;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}
.cb-order__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.cb-order__notice {
  background: var(--cb-success-bg);
  color: var(--cb-success);
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius);
  font-weight: 600;
  margin-bottom: 2rem;
}

.cb-order__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.cb-order__detail-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-ink);
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cb-order__detail-title a {
  font-size: .75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.cb-order__detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .9rem;
  color: var(--cb-ink-soft);
  line-height: 1.6;
}

.cb-order__items {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.cb-order__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cb-border);
}
.cb-order__item:last-child { border-bottom: none; }
.cb-order__item-img {
  width: 60px; height: 60px;
  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-order__item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cb-order__item-info { flex: 1; min-width: 0; }
.cb-order__item-name { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; }
.cb-order__item-name a { color: var(--cb-ink); text-decoration: none; }
.cb-order__item-name a:hover { color: var(--cb-primary); }
.cb-order__item-meta { font-size: .8rem; color: var(--cb-ink-muted); margin: 0; }
.cb-order__item-price { font-weight: 700; white-space: nowrap; }

.cb-order__totals {
  background: var(--cb-bg);
  border-radius: 0 0 var(--cb-radius-lg) var(--cb-radius-lg);
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--cb-border);
}
.cb-order__totals dl { margin: 0; }
.cb-order__totals .cb-summary-row { font-size: .9rem; }

.cb-order__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

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

.cb-errors {
  background: var(--cb-danger-bg);
  color: var(--cb-danger);
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius);
  margin-bottom: 1.5rem;
  font-size: .9rem;
  border: 1px solid rgba(185, 28, 28, .2);
}
.cb-errors h2 { font-size: 1rem; color: var(--cb-danger); margin-bottom: .5rem; }
.cb-errors ul { padding-left: 1.25rem; margin: .5rem 0 0; }
.cb-errors p  { margin: .25rem 0 .5rem; font-size: .85rem; }

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

@media (max-width: 900px) {
  .cb-cart__grid,
  .cb-checkout__grid {
    grid-template-columns: 1fr;
  }
  .cb-cart__sidebar,
  .cb-checkout__summary {
    position: static;
  }
  .cb-cart__checkout-form {
    max-width: 100%;
  }
  .cb-order__details { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .cb-cart-table thead { display: none; }
  .cb-cart-table,
  .cb-cart-table tbody,
  .cb-cart-table__row,
  .cb-cart-table__row td { display: block; }
  .cb-cart-table__row { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cb-border); }
  .cb-cart-table__row td { padding: .25rem 0; border: none; }
  .cb-cart-table__qty { text-align: left; }
  .cb-cart-table__price { text-align: left; font-size: 1rem; }
  .cb-cart-table__remove { position: absolute; right: 1.25rem; top: 1rem; }
  .cb-steps li span,
  .cb-steps li a { font-size: .7rem; }
  .cb-checkout__card { padding: 1.25rem; }
  .cb-order__details { grid-template-columns: 1fr; }
}

/* -------------- 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; }
  .cb-cart-link { padding: .5rem .7rem; font-size: .8rem; }
  .cb-cart-link__text { display: none; } /* Just the icon + badge on phones */
}