@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fadeInPage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --red:       #CC2929;
  --red-dark:  #a82020;
  --red-tint:  #fdecec;
  --red-tint-bdr: #f3cccc;
  --green:     #0f7a37;
  --green-tint: #e6f6ec;
  --green-tint-bdr: #c5e8d2;
  --dark:      #0e1116;
  --dark-2:    #0b1220;
  /* Structural ink + neutrals (B2B design system) */
  --ink:       #0e1116;
  --ink-2:     #161b22;
  --ink-3:     #222a35;
  --panel:     #f7f8fa;
  --panel-2:   #f0f2f5;
  --line:      #e4e7ec;
  --line-2:    #d6dae1;
  --muted-2:   #636d7b;
  --muted-on-dark: #9aa3ad;
  --bg:        #f6f7f9;
  --card:      #ffffff;
  --border:    #e4e7ec;
  --text:      #1b212b;
  --muted:     #5b6472;
  --radius:    6px;
  --shadow:    0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 6px 20px -6px rgba(16,24,40,0.14);
  --ease:      cubic-bezier(0.23, 1, 0.32, 1);
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  animation: fadeInPage 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Display typeface for headings — engineered, B2B character */
h1, h2, h3,
.detail-product-name,
.sidebar-product-name,
.section-heading,
.nav-logo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

/* ─── Nav ────────────────────────────────────────────────────── */
.nav {
  background: var(--dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
}

.nav-logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.nav-links a:hover { color: #fff; }

.nav-basket {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  background: var(--red);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  transition: background 0.2s;
}

.nav-basket:hover { background: var(--red-dark); }

.basket-count {
  background: #fff;
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Page Hero / Search ─────────────────────────────────────── */
.nav { animation: slideUp 0.35s cubic-bezier(0.23, 1, 0.32, 1) both; }

.page-hero {
  background: var(--ink);
  color: #fff;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 70% 0%, #000 35%, transparent 75%);
  mask-image: radial-gradient(120% 120% at 70% 0%, #000 35%, transparent 75%);
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red) 38%, transparent 38%);
}

.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 0;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #fff;
}

.page-hero p {
  color: #aeb6c2;
  margin-bottom: 0;
  font-size: 1rem;
}

.search-bar {
  display: flex;
  align-items: stretch;
  max-width: 560px;
  margin: 2rem 0 0;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Leading magnifier so the field reads unmistakably as search, and gives the bar
   a more considered, premium feel than a bare input. */
.search-bar-icon {
  display: flex;
  align-items: center;
  padding-left: 1.05rem;
  color: #7b8492;
  flex-shrink: 0;
  transition: color 0.2s var(--ease);
}

.search-bar input {
  flex: 1;
  padding: 1rem 1.1rem 1rem 0.7rem;
  border: none;
  background: transparent;
  font-size: 0.97rem;
  font-family: inherit;
  color: #fff;
  outline: none;
  min-width: 0;
}

.search-bar input::placeholder {
  color: #7b8492;
}

.search-bar button {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 0 1.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.2px;
  transition: background 0.2s;
}

.search-bar button:hover { background: var(--red-dark); }

/* Red focus ring: the field lifts and lights on focus, keyboard or click. */
.search-bar:focus-within {
  border-color: rgba(204, 41, 41, 0.6);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(204, 41, 41, 0.18);
}
.search-bar:focus-within .search-bar-icon { color: #cbd2db; }

/* ─── Hero search typeahead ──────────────────────────────────────
   Lightweight suggestion dropdown under the hero search bar. The hero inner
   uses overflow:hidden for its two-column layout, which would clip an absolute
   child, so the panel is position:fixed (escaping the clip) and its left/top/
   width are set in JS from the search bar's rect, repositioned on scroll. */
.hero-search { position: relative; }
.search-typeahead {
  position: fixed;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}
.search-typeahead[hidden] { display: none; }
.search-typeahead-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}
.search-typeahead-row:hover,
.search-typeahead-row[aria-selected="true"] { background: var(--red-tint); }
.search-typeahead-row .st-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
}
.search-typeahead-row .st-brand {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
/* Red highlight on the matched substring (override the default yellow mark). */
.search-typeahead-row .st-hit {
  background: none;
  color: var(--red);
  font-weight: 700;
}
.search-typeahead-empty {
  padding: 0.7rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ─── Layout: Sidebar + Grid ─────────────────────────────────── */
.catalogue-layout {
  display: flex;
  max-width: 1280px;
  margin: 1.5rem auto 4rem;
  padding: 0 2rem;
  gap: 2rem;
  align-items: flex-start;
}

/* ─── Filter Sidebar ──────────────────────────────────────────── */
.filter-sidebar {
  animation: slideInLeft 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.filter-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.filter-sub {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 1.1rem;
}

.filter-group {
  margin-bottom: 1.5rem;
}

.filter-group h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--red);
  color: #fff;
  padding: 0 0.4rem;
  height: 16px;
  min-width: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.2px;
  animation: popIn 0.18s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.filter-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text);
  padding: 0.2rem 0;
  cursor: pointer;
}

.filter-group input[type="checkbox"] {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.filter-clear {
  width: 100%;
  padding: 0.6rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.filter-clear:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Mobile filter toggle */
.filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  margin-bottom: 1rem;
  text-align: left;
  font-weight: 600;
}
.filter-toggle svg { flex-shrink: 0; color: var(--muted); }

/* ─── Product Grid ────────────────────────────────────────────── */
.product-grid-section {
  flex: 1;
}

.grid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ─── Product Card ────────────────────────────────────────────── */
.product-card.animate {
  animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
  border-radius: var(--radius) var(--radius) 0 0;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--line-2);
}

.product-card:hover::before {
  transform: scaleX(1);
}

.product-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* Uniform light plate so mismatched product photo backgrounds (some white,
     some grey) read as one consistent set rather than scraped shots. */
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  position: relative;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

/* Clickable image -> product detail. The compare button + status badge sit
   above this (z-index 3), so they stay independently clickable. */
.product-card-image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.product-card-image-link img { transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
.product-card:hover .product-card-image-link img { transform: scale(1.04); }

/* "Currently Unavailable" overlay badge on listing cards.
   Dark pill keeps strong contrast over any product image or placeholder.
   Available cards intentionally show no badge to keep the single-red-accent look. */
.card-status-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.62rem;
  border-radius: 20px;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
}

.card-status-badge .card-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

/* Desktop shows the full label; the short label is swapped in on mobile where the
   2-column card is too narrow for "Currently Unavailable". */
.card-status-badge .csb-short { display: none; }

/* On the narrow 2-column mobile card, shrink the badge and swap in the short
   "Unavailable" label so it no longer spans the image or crowds the quick-add. */
@media (max-width: 640px) {
  .card-status-badge {
    top: 0.4rem;
    left: 0.4rem;
    font-size: 0.6rem;
    padding: 0.22rem 0.5rem;
    gap: 0.28rem;
    border-radius: 16px;
  }
  .card-status-badge .csb-full { display: none; }
  .card-status-badge .csb-short { display: inline; }
}

/* Soften the imagery of unavailable products so the state reads at a glance */
.product-card.is-unavailable .product-card-image img {
  opacity: 0.78;
  filter: saturate(0.85);
}

.product-card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.brand-badge {
  display: inline-block;
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

.product-card-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--text);
  line-height: 1.3;
}

/* Clickable product title -> product detail. */
.product-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.product-card-title-link:hover { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.product-card-title-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

.product-card-body p {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.65rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Primary application line — the single red accent in the card body */
.card-application {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.card-application-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.card-application span:not(.card-application-label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

/* Labels the chips as a distinct taxonomy from the "Best for" line above.
   The label sits on its own line (full width) as a quiet eyebrow, with a
   small gap before the chip row so it does not read as cramped/flush. */
.product-tags-label {
  flex-basis: 100%;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.product-tag {
  font-size: 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}

.product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}

.btn {
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  line-height: 1.2;
  letter-spacing: 0.1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.btn:active:not(:disabled) { transform: scale(0.97); }

.btn-primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 1px 2px rgba(204, 41, 41, 0.18);
}

.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 0 2px 4px rgba(204, 41, 41, 0.22); }

.btn-outline {
  background: #fff;
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: 700;
}

.btn-outline:hover {
  border-color: #b3b3b3;
  color: var(--text);
  background: #fafafa;
}

/* Card actions stack full-width so the row never reflows when the enquiry
   button toggles between its long default label ("Add to Product Enquiry" /
   "Enquire About Availability") and the short "Selected" state. Full-width
   also gives larger, consistent tap targets on mobile and prevents clipping. */
.product-card-actions .btn { width: 100%; min-width: 0; }
.detail-cta .btn { flex: 1; }

/* Selected ("In Product Enquiry") state: calm, confirmed red-tint. Not an
   alert, not a checkbox, not a cart button. Same height/width as the default
   so toggling never shifts the card. */
.btn-added {
  background: var(--red-tint) !important;
  color: var(--red) !important;
  border: 1px solid var(--red-tint-bdr) !important;
}

/* "In Product Enquiry" on wider screens, "In Enquiry" on narrow mobile. The
   action button is full-width, so neither label truncates or shifts layout. */
.enq-label-short { display: none; }
@media (max-width: 480px) {
  .enq-label-full { display: none; }
  .enq-label-short { display: inline; }
}

/* legacy .btn-compare-card removed in Sprint 2 — replaced by .card-compare-btn */

/* ─── Empty State ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--muted);
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #c4c4c4;
  margin-bottom: 0.5rem;
}

.empty-state h2, .empty-state h3 { font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--text); font-weight: 700; }
.empty-state p { margin-bottom: 1rem; font-size: 0.9rem; }
.empty-state .btn { padding: 0.6rem 1.25rem; }

/* ─── Toast Notification ──────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--dark);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Filter chip pop-in ──────────────────────────────────────── */
.filter-chip { animation: popIn 0.2s cubic-bezier(0.23, 1, 0.32, 1) both; }

/* ─── Product Detail Page ─────────────────────────────────────── */
.breadcrumb {
  max-width: 1280px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span { margin: 0 0.4rem; }

/* ─── Light page breadcrumb (replaces dark hero band) ────────── */
.page-breadcrumb {
  max-width: 1280px;
  margin: 0.75rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.detail-image { animation: slideInLeft 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both; }
.detail-info  { animation: slideInRight 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both; }
.detail-full-desc { animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both; }
.related-section  { animation: slideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; }


.detail-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.detail-info h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.2;
}

.detail-info .short-desc {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.detail-section {
  margin-bottom: 1.25rem;
}

.detail-section h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
}

.features-list {
  list-style: none;
  padding: 0;
}

.features-list li {
  font-size: 0.9rem;
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text);
}

.features-list li::before {
  content: "✓";
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
}

.detail-cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

.detail-full-desc {
  max-width: 1280px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
}

.detail-full-desc h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

.detail-full-desc p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1rem;
}

.usage-box {
  background: rgba(204, 41, 41, 0.05);
  border: 1px solid rgba(204, 41, 41, 0.18);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-top: 1rem;
}

/* Product Documents (SDS / TDS downloads) on the product detail page.
   Only rendered when a document URL exists, so there is no empty state to style. */
.detail-downloads {
  margin-top: 2rem;
}

.doc-download-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.doc-download {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.doc-download:hover {
  border-color: var(--red);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.doc-download-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 41, 41, 0.08);
  color: var(--red);
}

.doc-download-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.doc-download-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.doc-download-sub {
  font-size: 0.74rem;
  color: var(--muted);
}

.doc-download-go {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
}

.doc-download:hover .doc-download-go {
  color: var(--red);
  transform: translateX(2px);
}

/* Enquiry guidance box on the product detail page */
.enquiry-guidance {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-top: 2rem;
}

.enquiry-guidance-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.45rem;
}

.enquiry-guidance p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 0.9rem;
  max-width: 62ch;
}

.enquiry-guidance-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enquiry-guidance-link:hover { color: var(--red-dark); }

.enquiry-guidance-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 3px;
}

.related-section {
  max-width: 1280px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.related-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* ─── Product Enquiry Page ────────────────────────────────────── */
.page-content {
  max-width: 900px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}

.page-content h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.page-content .sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.basket-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.basket-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.basket-item:last-child { border-bottom: none; }
.basket-item:hover { background: #fafafa; }

.basket-item-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fafafa 0%, #ececec 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #b8b8b8;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  padding: 0 4px;
}

.basket-item-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.025) 8px 9px);
  pointer-events: none;
}

/* Real product photo inside the compact enquiry thumb. */
.basket-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.basket-item-thumb:has(img) { background: #fff; }
.basket-item-thumb:has(img)::after { display: none; }
.basket-item-thumb .no-image-mark { font-size: 0.6rem; letter-spacing: 0.3px; padding: 0 3px; text-align: center; }

.basket-item-info { flex: 1; min-width: 0; }
.basket-item-brand {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.basket-item-info .basket-item-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: var(--text);
  line-height: 1.3;
}
.basket-item-info p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.basket-remove {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.basket-remove:hover {
  background: var(--red-tint);
  color: var(--red);
  border-color: var(--red-tint-bdr);
}

.basket-remove:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Larger, comfortable remove target on touch devices (keeps the tidy 32px
   button for mouse/trackpad users). */
@media (pointer: coarse) {
  .basket-remove { width: 44px; height: 44px; }
}

.basket-empty {
  text-align: center;
  padding: 3rem;
  color: var(--muted);
}

.enquiry-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.enquiry-form h2 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9ca3af;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: #b3b3b3;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204, 41, 41, 0.15);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-submit { margin-top: 1.25rem; }

.confirmation {
  text-align: center;
  padding: 3rem;
  display: none;
}

.confirmation h2 { color: var(--text); font-size: 1.25rem; margin-bottom: 0.5rem; }
.confirmation .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 auto 1rem;
  border: 1px solid var(--red-tint-bdr);
}
.confirmation p { color: var(--muted); margin-bottom: 1.5rem; }

/* ─── Footer ──────────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: #aaa;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
}

/* ─── Hamburger & Mobile Nav ──────────────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

.nav-mobile {
  background: var(--dark-2);
  display: none;
  flex-direction: column;
  padding: 0.75rem 2rem;
  gap: 0;
}

.nav-mobile.open { display: flex; }

.nav-mobile a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #222;
  transition: color 0.2s;
}

.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: #fff; }

/* ─── Sort Dropdown ───────────────────────────────────────────── */
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0.55rem 2.25rem 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  line-height: 1.3;
}

.sort-select:hover { border-color: #b3b3b3; }

.sort-select:focus,
.sort-select:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204, 41, 41, 0.15);
}

/* ─── Active Filter Chips ─────────────────────────────────────── */
.active-filter-chips {
  max-width: 1280px;
  margin: 0.75rem auto 0;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fff0f0;
  border: 1px solid #f5cccc;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}

.filter-chip:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.filter-chip-clear {
  background: #f0f0f0;
  border-color: var(--border);
  color: var(--muted);
}

.filter-chip-clear:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

/* ─── No-Image Placeholder ────────────────────────────────────── */
.product-card-image.no-image {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.product-card-image.no-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14,17,22,0.06) 1px, transparent 0);
  background-size: 16px 16px;
  pointer-events: none;
}

.no-image-mark {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* Legacy no-image-icon/-label kept for product-detail.js gallery placeholder */
.no-image-icon {
  font-size: 2rem;
  opacity: 0.25;
}

.no-image-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Admin Image Preview ─────────────────────────────────────── */
.image-preview-box {
  width: 100%;
  height: 110px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.5rem;
  transition: border-color 0.2s;
}

.image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .catalogue-layout { flex-direction: column; padding: 0 1rem; }
  .active-filter-chips { padding: 0 1rem; }
  .filter-toggle { display: flex; }
  .filter-sidebar { width: 100%; display: none; }
  .filter-sidebar.open { display: block; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-cta { flex-direction: column; }
  .detail-cta .btn { width: 100%; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .hero-inner { padding: 3rem 1.25rem 2.4rem; }
  .page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.2rem); }
  .search-bar { margin-top: 1.5rem; }
}

/* ─── Detail Page — Gallery + Sidebar Row ────────────────────── */
.detail-gallery-row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  max-width: 1280px;
  margin: 0.75rem auto 0;
  padding: 0 1.5rem;
  align-items: start;
}

/* Full-width content section below gallery row */
.detail-content {
  max-width: 1280px;
  margin: 2rem auto 2.5rem;
  padding: 0 1.5rem;
}

/* ─── Gallery ────────────────────────────────────────────────── */
.gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  cursor: default;
}

.gallery-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

/* Product shots sit cleanly inside the frame (no awkward crop). */
.gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Subtle prev/next controls + counter - only rendered when >1 image. */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink, #0e1116);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  z-index: 2;
}
.gallery-nav:hover { background: #fff; border-color: #bbb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.gallery-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.gallery-prev { left: 0.6rem; }
.gallery-next { right: 0.6rem; }

.gallery-counter {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  background: rgba(14, 17, 22, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  z-index: 2;
  user-select: none;
}

.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  width: 100%;
  height: 100%;
}

.gallery-placeholder-brand {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -1px;
  color: #c0c0c0;
  line-height: 1;
  user-select: none;
}

.gallery-thumb-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gallery-thumb {
  width: 66px;
  height: 56px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gallery-thumb:hover { border-color: #aaa; }
.gallery-thumb.active { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.gallery-thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.gallery-thumb svg { opacity: 0.25; }

@media (max-width: 560px) {
  .gallery-stage { padding: 0.75rem; }
  .gallery-nav { width: 34px; height: 34px; }
  .gallery-prev { left: 0.4rem; }
  .gallery-next { right: 0.4rem; }
}

/* ─── Product Header (availability + name + desc) ────────────── */
.detail-product-header { margin-bottom: 1rem; }

.detail-product-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

.avail-badge.available {
  background: var(--green-tint);
  color: var(--green);
  border: 1px solid var(--green-tint-bdr);
}

.avail-badge.unavailable {
  background: #f3f4f6;
  color: var(--muted);
  border: 1px solid var(--border);
}

.avail-badge .avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.detail-product-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.detail-product-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ─── Spec Table ─────────────────────────────────────────────── */
.spec-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.25rem 0;
}

.spec-table-heading {
  background: var(--bg);
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.spec-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid var(--border);
}

.spec-row:last-child { border-bottom: none; }

.spec-key {
  background: var(--bg);
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  border-right: 1px solid var(--border);
}

.spec-val {
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}

.spec-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.spec-tag {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.spec-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.spec-feature {
  font-size: 0.82rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.spec-feature::before {
  content: "✓";
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.detail-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sidebar-avail-bar {
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
}

.sidebar-avail-bar.available {
  background: var(--green-tint);
  color: var(--green);
  border-bottom-color: var(--green-tint-bdr);
}

.sidebar-avail-bar.unavailable {
  background: #f3f4f6;
  color: var(--muted);
  border-bottom-color: var(--border);
}

.sidebar-avail-bar .avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.sidebar-identity {
  padding: 1.1rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sidebar-product-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.sidebar-brand {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.sidebar-actions {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-actions .btn {
  width: 100%;
  text-align: center;
  display: block;
}

.sidebar-foot {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
}

.sidebar-enquiry-link {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.sidebar-enquiry-link:hover { color: var(--red); }

.sidebar-note {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.btn-compare-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
  font-family: inherit;
}

.btn-compare-sidebar:hover { border-color: var(--red); color: var(--red); }
.btn-compare-sidebar.in-compare { border-color: var(--red); color: var(--red); background: #fff5f5; font-weight: 600; }
.btn-compare-sidebar:active { transform: scale(0.97); }

/* ─── Responsive — detail page ───────────────────────────────── */
@media (max-width: 900px) {
  .detail-gallery-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* Natural mobile order: show the product image first, then the action
     sidebar (name, availability, Add to Enquiry / Compare). Previously the
     sidebar was forced above the gallery (order:-1), which made the page feel
     CTA-first before the visitor had even seen the product. */
}

/* On phones the action card sits directly above the full header (brand,
   availability badge, h1 name, description), so its own name + availability
   just repeat what the h1 block shows one screen down. Drop them here so the
   card leads straight into the buttons; the h1 block is the single source of
   identity. Desktop keeps the buy-box identity since the card sits beside the
   gallery, not stacked above the header. */
@media (max-width: 640px) {
  .detail-sidebar .sidebar-avail-bar,
  .detail-sidebar .sidebar-identity { display: none; }
  .detail-sidebar .sidebar-actions { padding-top: 1.1rem; }
}

/* ─── Compare Tray (fixed bottom) ───────────────────────────── */
.compare-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.09);
  flex-wrap: wrap;
}

.compare-tray.visible { transform: translateY(0); }

.compare-tray-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  flex-shrink: 0;
}

.compare-tray-slots { display: flex; gap: 0.625rem; flex: 1; min-width: 0; flex-wrap: wrap; }

.compare-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
}

.compare-slot-filled {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  max-width: 215px;
}

.compare-slot-empty {
  border: 1.5px dashed #ccc;
  color: #aaa;
  padding: 0.6rem 1rem;
  min-width: 140px;
  justify-content: center;
  font-size: 0.73rem;
}

.compare-slot-thumb {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-slot-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.compare-slot-thumb .no-image-mark { font-size: 0.58rem; letter-spacing: 0.3px; text-align: center; padding: 0 2px; }

.compare-slot-name {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 110px;
}

.compare-slot-remove {
  background: none;
  border: 1.5px solid #ccc;
  color: var(--muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1;
  padding: 0;
}

.compare-slot-remove:hover { border-color: var(--red); color: var(--red); }

.compare-tray-actions { display: flex; align-items: center; gap: 0.875rem; flex-shrink: 0; }

.compare-tray-btn {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.55rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  font-family: inherit;
  white-space: nowrap;
}

.compare-tray-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.compare-tray-btn:not(:disabled):hover { background: var(--red-dark); }
.compare-tray-btn:not(:disabled):active { transform: scale(0.97); }

.compare-tray-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem;
  font-family: inherit;
  transition: color 0.15s;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.compare-tray-clear:hover { color: var(--text); }

/* Tablet band (641-860px): keep the tray a single row. The desktop default
   lets the slot cluster wrap, which dropped "+ Add product" onto a ragged
   second line at this width. Scroll the chips horizontally instead so the
   label and the Compare / Clear all actions stay pinned and the tray height
   is constant. Phones (<=640px) use the stacked layout below. */
@media (min-width: 641px) and (max-width: 860px) {
  .compare-tray { flex-wrap: nowrap; gap: 1rem; }
  .compare-tray-slots {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .compare-tray-slots .compare-slot { flex-shrink: 0; }
}

/* Mobile compare tray: stack into clean rows instead of one cramped line.
   "Comparing:" gets its own row, the selected products scroll horizontally if
   space is tight (no wrapping, no page overflow), and the Compare / Clear all
   actions sit in a tidy row with Compare leading and Clear all secondary. */
@media (max-width: 640px) {
  .compare-tray {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }
  .compare-tray-label { width: 100%; }
  .compare-tray-slots {
    flex: 1;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .compare-slot-filled {
    flex-shrink: 0;
    width: 9.75rem;
    max-width: none;
  }
  .compare-slot-empty {
    flex-shrink: 0;
    min-width: 8rem;
    padding: 0.55rem 0.85rem;
  }
  .compare-slot-name { max-width: none; }
  .compare-tray-actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .compare-tray-btn { flex: 1; text-align: center; }
  /* Easier-to-tap remove control on the mobile compare tray. */
  .compare-slot-remove { width: 28px; height: 28px; }
}

/* ─── Comparison overlay removed; comparison now uses dedicated compare.html page ─── */

.compare-table-wrap { overflow-x: auto; }

.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.compare-label-col { width: 150px; min-width: 150px; }

.compare-col-header {
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.compare-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: #e8e8e8;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  /* Query container so the brand monogram below can size to THIS column's
     width (cqi), not the viewport. Column width depends on how many products
     are compared, so vw-based sizing overflowed narrow 3-4 col layouts. */
  container-type: inline-size;
}

.compare-product-img img { width: 100%; height: 100%; object-fit: cover; }

.compare-product-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.compare-product-brand {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.compare-col-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.compare-col-avail.available { background: var(--green-tint); color: var(--green); border: 1px solid var(--green-tint-bdr); }
.compare-col-avail.unavailable { background: #f3f4f6; color: var(--muted); border: 1px solid var(--border); }
.compare-col-avail .avail-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.compare-col-remove {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  display: inline;
  margin-top: 0.75rem;
}

.compare-col-remove:hover { color: var(--red); }

.compare-row-label {
  padding: 0.875rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

.compare-row-value {
  padding: 0.875rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text);
  border-top: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}

.compare-tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin: 0.1rem 0.15rem 0.1rem 0;
  white-space: nowrap;
}

.compare-feature { font-size: 0.82rem; padding: 0.15rem 0; color: var(--text); }
.compare-feature::before { content: "• "; color: var(--muted); font-weight: 700; }

.compare-product-spec-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color 0.15s;
}
.compare-product-spec-link:hover { color: var(--red); }

.btn-add-enquiry {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: 0.5rem;
}

.btn-add-enquiry:hover { background: var(--red-dark); }
.btn-add-enquiry:active { transform: scale(0.97); }

.btn-add-enquiry.added {
  background: var(--red-tint);
  color: var(--red);
  border: 1px solid var(--red-tint-bdr);
}
.btn-add-enquiry.added:hover { background: var(--red-tint); }

@media (max-width: 480px) {
  .compare-col-header { padding: 1rem 0.4rem 0.75rem; }

  .btn-add-enquiry {
    font-size: 0.7rem;
    padding: 0.45rem 0.3rem;
    line-height: 1.3;
  }
}

/* ─── Comparison Page ────────────────────────────────────────── */
.compare-page-top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.compare-page-top .breadcrumb {
  margin: 0;
  max-width: none;
  padding: 0;
}

.compare-img-placeholder {
  font-size: clamp(0.85rem, 26cqi, 2.5rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: #c0c0c0;
  user-select: none;
  line-height: 1;
  max-width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  text-align: center;
  overflow-wrap: break-word;
}

.compare-img-placeholder-sub {
  font-size: 0.72rem;
  color: #bbb;
  margin-top: 0.4rem;
  letter-spacing: 0.3px;
}

/* When a product photo fails to load in the compare grid, ylImageFallback()
   drops a .no-image-mark monogram into this column. The base mark is a fixed
   1.5rem with no width cap, so a long brand word (e.g. "HORSEMEN") overflows
   the narrow column and clips. Scope it to scale with the column instead. */
.compare-product-img .no-image-mark {
  font-size: clamp(0.8rem, 18cqi, 1.5rem);
  max-width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  text-align: center;
  overflow-wrap: break-word;
}

.compare-page-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.compare-page-clear:hover {
  border-color: var(--red);
  color: var(--red);
}

.compare-page-body {
  max-width: 1280px;
  margin: 1rem auto 3rem;
  padding: 0 1.5rem;
}

.compare-page-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.compare-page-table-wrap .compare-table { border-radius: var(--radius); }

/* On narrow screens, give each product column a readable width and let the
   wrapper scroll horizontally instead of crushing 3 columns into ~80px each.
   The scroll is contained in the wrapper, so the page itself never overflows. */
@media (max-width: 640px) {
  .compare-page-table-wrap .compare-table { min-width: 540px; }
  .compare-page-table-wrap .compare-label-col { width: 116px; min-width: 116px; }
}

.compare-product-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
  line-height: 1.3;
  display: block;
  text-decoration: none;
}

.compare-product-name:hover { color: var(--red); }

/* ─── Section headings (detail page description area) ────────── */
.section-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}

/* ─── Focus states ───────────────────────────────────────────── */
.gallery-thumb:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.btn-compare-sidebar:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.compare-tray-btn:focus-visible,
.compare-slot-remove:focus-visible,
.compare-col-remove:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ─── Toast offset when compare tray is open ─────────────────── */
body:has(.compare-tray.visible) .toast {
  bottom: calc(5rem + 1.5rem);
  transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ════════════════════════════════════════════════════════════════
   SPRINT 2 ADDITIONS — card compare icon, filter counts, skeleton
   ════════════════════════════════════════════════════════════════ */

/* ─── Card compare icon button (top-right of image) ─────────── */
.card-compare-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.1s;
  z-index: 3;
  line-height: 1;
}

.card-compare-btn:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red-tint-bdr);
  background: #fff;
}

.card-compare-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.card-compare-btn.in-compare {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.card-compare-btn.in-compare:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: #fff;
}

.card-compare-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-compare-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.card-compare-btn svg {
  flex-shrink: 0;
}

/* ─── Filter checkbox: label + count ─────────────────────────── */
.filter-group label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text);
  padding: 0.3rem 0;
  cursor: pointer;
  line-height: 1.3;
}

.filter-group label.is-empty {
  opacity: 0.4;
  cursor: not-allowed;
}

.filter-label-text {
  font-size: 0.875rem;
}

.filter-count {
  font-size: 0.7rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 18px;
  text-align: right;
  padding-right: 2px;
}

.filter-group label:hover:not(.is-empty) .filter-count {
  color: var(--red);
}

.filter-group label input:checked ~ .filter-count {
  color: var(--red);
  font-weight: 600;
}

/* ─── Skeleton loading state for product grid ────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-card {
  pointer-events: none;
}

.skeleton-card::before {
  display: none;
}

.skeleton-img,
.skeleton-line {
  background: linear-gradient(90deg, #f1f1f1 0%, #e7e7e7 50%, #f1f1f1 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 4px;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.skeleton-line {
  height: 12px;
  margin-bottom: 0.6rem;
}

.skeleton-line-short { width: 35%; height: 14px; margin-bottom: 0.75rem; }
.skeleton-line-title { width: 80%; height: 16px; margin-bottom: 0.6rem; }
.skeleton-line-mid   { width: 60%; }

.skeleton-card .product-card-body {
  padding: 1rem;
}

/* ─── Grid meta tweaks ─────────────────────────────────────────── */
.grid-meta {
  font-weight: 500;
}

#resultCount {
  font-size: 0.9rem;
  color: var(--text);
}

/* Slight breadcrumb hierarchy tightening */
.page-breadcrumb {
  font-size: 0.82rem;
  margin-top: 1rem;
  color: var(--muted);
}

.page-breadcrumb a { color: var(--muted); font-weight: 500; }
.page-breadcrumb a:hover { color: var(--red); }
.page-breadcrumb span[aria-hidden] { margin: 0 0.4rem; opacity: 0.5; }

/* ─── Enquiring-about callout (in enquiry form) ───────────────── */
.enquiring-about {
  background: var(--red-tint);
  border: 1px solid var(--red-tint-bdr);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.enquiring-about-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--red);
  margin-bottom: 0.4rem;
}

.enquiring-about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.enquiring-about-list li {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  position: relative;
  padding-left: 1rem;
}

.enquiring-about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}

/* On phones the basket list directly above already shows the selected products
   (with remove controls), so this summary box just repeats them. Hide it here;
   it stays on larger screens where the form sits beside, not below, the list. */
@media (max-width: 640px) {
  .enquiring-about { display: none; }
}

/* ─── Compare page polish ─────────────────────────────────────── */
.compare-page-top h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.compare-page-top .compare-page-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE ADDITIONS
   ════════════════════════════════════════════════════════════════ */


/* ─── Contact Page ───────────────────────────────────────────── */
/* Hero spacing now comes from the shared .hero-inner container (max-width +
   side padding) so the heading lines up with every other page hero instead of
   sitting flush against the viewport edge. */
.contact-hero .hero-inner {
  padding-bottom: 3.25rem;
}

.contact-page {
  max-width: 1180px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.5rem;
  align-items: start;
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.contact-info-card {
  position: sticky;
  top: 84px;
}

.contact-eyebrow {
  display: inline-block;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.contact-card h2 {
  color: var(--dark);
  font-size: 1.55rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.contact-card p {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.contact-detail-list {
  display: grid;
  gap: 0.9rem;
  margin: 1.25rem 0;
}

.contact-detail {
  border: 1px solid var(--border);
  background: #fafafa;
  border-radius: var(--radius);
  padding: 0.9rem;
}

.contact-detail strong {
  display: block;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.contact-detail span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}


.contact-form {
  margin-top: 1rem;
}

.contact-form textarea {
  min-height: 140px;
}

.contact-submit-btn {
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
}

.contact-form-status {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  min-height: 1.35rem;
}

.contact-form-status.success {
  color: #16803a;
}

.contact-form-status.error {
  color: #c0392b;
}

@media (max-width: 900px) {
  .contact-page {
    grid-template-columns: 1fr;
  }

  .contact-info-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .contact-page {
    margin: 1.5rem auto;
    padding: 0 1rem;
  }

  .contact-card {
    padding: 1.25rem;
  }

  .contact-card h2 {
    font-size: 1.3rem;
  }

  .contact-submit-btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   B2B REVAMP — hero, trust strip, applications, catalogue head
   ════════════════════════════════════════════════════════════════ */

/* ─── Hero (positioning) ─────────────────────────────────────── */
.hero-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4.5rem 2rem 3.2rem;
}

.page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ff8a8a;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1.1rem;
}

.page-hero .hero-eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: var(--red);
}

.page-hero h1 {
  max-width: 24ch;
  margin-left: 0;
  margin-right: 0;
}


.page-hero .hero-lead {
  color: #aeb6c2;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 1.3rem 0 0;
}

/* ════════════════════════════════════════════════════════════════
   Hero: Bold Red Rail (Direction C)
   Scoped to .page-hero--rail so the contact-page hero is untouched.
   ════════════════════════════════════════════════════════════════ */
.page-hero.page-hero--rail {
  display: grid;
  grid-template-columns: 62px 1fr;
}

/* The rail carries the red accent, so drop the dot-grid + red top line */
.page-hero.page-hero--rail::before,
.page-hero.page-hero--rail::after {
  content: none;
}

/* Vertical red rail with rotated heritage line (desktop) */
.hero-rail {
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-rail-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

/* Horizontal red strip: shown only on mobile */
.hero-strip { display: none; }

/* Two-column content: text/actions on the left, brand stack on the right */
.page-hero--rail .hero-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.hero-main {
  padding: 58px 56px 60px;
  position: relative;
  min-width: 0;
  max-width: 1180px;
}

/* Ranges: a quiet, secondary shortcut below the search for buyers who already
   know which Yee Lim range they want. Deliberately subordinate to the search:
   small label, low-contrast chips, neutral until hover. The red stays earned. */
.hero-ranges {
  margin-top: 34px;
  max-width: 700px;
}
.hero-ranges-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-bottom: 12px;
}
.hero-ranges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.range-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.range-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.range-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Logo sits in a tile that mirrors the Common Applications icon: neutral at rest,
   red on hover/active so the accent follows the user's intent and the ranges read
   as part of the same family as the application cards below. */
.range-chip-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.range-chip-mark img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.range-chip:hover .range-chip-mark,
.range-chip.active .range-chip-mark {
  background: var(--red);
  border-color: var(--red);
}

.range-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.range-chip-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.range-chip-text small {
  font-size: 0.71rem;
  color: var(--muted-on-dark);
  margin-top: 2px;
}

/* Active range chip: lit while its brand is the current catalogue filter. */
.range-chip.active {
  border-color: var(--red);
  background: rgba(204, 41, 41, 0.12);
}

/* Eyebrow: mono, dim, no leading dash for this variant */
.page-hero--rail .hero-eyebrow {
  font-family: var(--mono);
  color: var(--muted-on-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.page-hero--rail .hero-eyebrow::before { content: none; }

/* Headline + red highlight on "perform" */
.page-hero--rail .hero-inner h1 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 13ch;
}
/* line-height + asymmetric padding stop the red box clipping descenders */
.page-hero--rail .hero-inner h1 mark {
  background: var(--red);
  color: #fff;
  padding: 0.02em 0.12em 0.1em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Intro line */
.page-hero--rail .hero-lead {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 20px 0 0;
}

/* Actions: kept balanced against the open right side */
.page-hero--rail .hero-actions {
  max-width: 700px;
  margin-top: 30px;
}
.page-hero--rail .hero-actions .search-bar {
  max-width: none;
  margin: 0;
}

/* ── Rail → horizontal strip + scaled type (single breakpoint) ── */
@media (max-width: 860px) {
  .page-hero.page-hero--rail {
    grid-template-columns: 1fr;
  }
  .hero-rail { display: none; }
  .hero-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--red);
    padding: 0.5rem 1.1rem;
  }
  .hero-strip span {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
  }
  .hero-strip span:last-child {
    letter-spacing: 0.12em;
  }
  /* Brand stack drops below the text as a full-width single column */
  .page-hero--rail .hero-inner {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .hero-main {
    padding: 30px 28px 30px;
  }
  .page-hero--rail .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
  }
  .page-hero--rail .hero-inner h1 {
    font-size: 33px;
    line-height: 1.02;
    max-width: none;
  }
  .page-hero--rail .hero-lead {
    font-size: 15px;
    margin-top: 14px;
  }
  .page-hero--rail .hero-actions {
    max-width: none;
    margin-top: 22px;
  }
  .page-hero--rail .hero-actions .search-bar { margin-bottom: 0; }
}

/* ─── Stats strip (dark continuation of hero) ────────────────── */
.trust-strip {
  background: var(--ink);
}

/* Full-bleed to match the hero (which is edge-to-edge with the red rail), so the
   first stat lines up with the hero content column at every viewport width
   instead of drifting right once the viewport passes the old 1280 cap. */
.trust-strip-inner {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0 2rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem 1.4rem;
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Align first stat with hero content (past the 62px rail + 56px content indent) */
.trust-item:first-child { padding-left: calc(62px + 56px - 2rem); }
.trust-item:last-child { border-right: none; }

.trust-num {
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.trust-plus { font-size: 1.05rem; vertical-align: top; color: var(--red); margin-left: 1px; }

/* Uppercase, tracked labels read as precise spec-sheet data rather than soft
   captions, matching the mono eyebrow language used across the page. */
.trust-label {
  font-size: 0.72rem;
  color: var(--muted-on-dark);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  overflow-wrap: break-word;
}

/* ─── Section heading (shared by applications + catalogue head) ── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--red);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.7rem;
}

.section-eyebrow::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: var(--red);
}

/* ─── Browse by Application ──────────────────────────────────── */
.applications {
  position: relative;
  background: var(--panel);
  /* Crisp red keyline marks the dark-to-light boundary as a deliberate, precise
     seam (echoing the footer's red top rule) instead of a muddy gradient blend. */
  border-top: 3px solid var(--red);
  padding: 4rem 2rem;
  scroll-margin-top: 76px;
}

.applications-inner { max-width: 1280px; margin: 0 auto; }

.section-head { margin-bottom: 2.4rem; max-width: 680px; }

.section-head h2 {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}

.section-head p { color: var(--muted); font-size: 1rem; }

.application-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.application-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "icon  count"
    "text  text";
  column-gap: 0.75rem;
  row-gap: 1.05rem;
  text-align: left;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.35rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16, 20, 28, 0.05);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.application-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.application-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.application-card.active {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.application-icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius);
  /* Neutral at rest for an industrial read; red is revealed on hover/active */
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.application-card:hover .application-icon,
.application-card.active .application-icon {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.application-text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.application-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.application-blurb {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.application-count {
  grid-area: count;
  align-self: start;
  text-align: right;
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.application-count span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 0.3rem;
}

/* ─── Catalogue head ─────────────────────────────────────────── */
.catalogue-head {
  max-width: 1280px;
  margin: 4rem auto 0;
  padding: 0 2rem;
  scroll-margin-top: 76px;
}

.catalogue-head h2 {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}

.catalogue-head p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 62ch;
}

/* ─── Advisor prompt (companion to Common Applications) ──────────
   The "describe your own job" option below the preset application tiles: same
   find-by-job idea, for jobs the tiles do not cover. One placement, identical on
   desktop and mobile; stacks on phones. */
.advisor-prompt {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.advisor-prompt-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
}
.advisor-prompt-icon svg { width: 20px; height: 20px; }
.advisor-prompt-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.advisor-prompt-text strong { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.advisor-prompt-text span { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.advisor-prompt-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.advisor-prompt-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.advisor-prompt-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 640px) {
  .advisor-prompt { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1rem; }
  .advisor-prompt-btn { width: 100%; text-align: center; }
}

/* ─── Responsive — B2B sections ──────────────────────────────── */
@media (max-width: 900px) {
  .application-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .trust-strip-inner { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0 1.25rem; }
  .trust-item { padding: 1.1rem 1rem; }
  .trust-item:first-child { padding-left: 0; }
  .trust-item:nth-child(2) { border-right: none; padding-right: 0; }
  .trust-item:nth-child(3) { padding-left: 0; }
  .trust-num { font-size: 1.5rem; }
  .applications { padding: 2.25rem 1.25rem; }
  /* Compact guided-shortcut rows on mobile: icon, label/blurb, count on one
     line so the section stays short instead of six tall stacked cards. */
  .application-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .application-card {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon text count";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0;
    padding: 0.8rem 1rem;
  }
  .application-icon { width: 40px; height: 40px; }
  .application-text { gap: 0.15rem; }
  .application-label { font-size: 0.98rem; }
  .application-blurb { font-size: 0.8rem; }
  .application-count { align-self: center; font-size: 1.15rem; }
  .application-count span { margin-top: 0.15rem; }
  .catalogue-head { padding: 0 1.25rem; margin-top: 2.75rem; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE REDESIGN — phones ≤640px
   Desktop layout is untouched below this line.
   ════════════════════════════════════════════════════════════════ */

/* ─── Mobile card: floating enquiry button on image ─────────── */
.pcard-add {
  display: none; /* revealed at ≤640px */
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(204,41,41,0.30);
  transition: transform 0.12s, background 0.15s;
  cursor: pointer;
  z-index: 4;
}
.pcard-add:active { transform: scale(0.88); }
/* Keep the visible circle at 34px but extend the tap target to ~44px. */
.pcard-add::before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
}
.pcard-add.added {
  background: var(--green);
  box-shadow: 0 2px 8px rgba(15,122,55,0.28);
}

/* ─── Mobile card: compare checkbox row in card footer ─────── */
.pcard-cmp-row {
  display: none; /* revealed at ≤640px */
  margin-top: auto;
  padding-top: 0.7rem;
}
.pcard-cmp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  position: relative; /* anchor the expanded hit area below */
}
/* The visible toggle stays compact (checkbox + label), but the tap target was
   only ~15px tall. Extend the clickable area to ~44px via an overlay without
   changing the visual layout. */
.pcard-cmp::before {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -8px;
  right: -8px;
}
.pcard-cb {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.pcard-cb svg { width: 10px; height: 10px; opacity: 0; }
.pcard-cmp.on          { color: var(--red); }
.pcard-cmp.on .pcard-cb { background: var(--red); border-color: var(--red); }
.pcard-cmp.on .pcard-cb svg { opacity: 1; }
.pcard-cmp:disabled    { opacity: 0.45; cursor: not-allowed; }

/* ─── Filter group bar — desktop appearance (button replaces h3) */
.filter-group-bar {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--border);
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.filter-group-bar .r   { display: flex; align-items: center; gap: 0.55rem; }
.fg-chev               { display: none; } /* revealed on mobile */
.filter-group-panel    { display: block; } /* always visible on desktop */
.drawer-head           { display: none; } /* mobile only */
.drawer-foot           { display: none; } /* mobile only */
.mobile-filter-bar     { display: none; } /* mobile only */

/* ─── Step 1: 2-col grid + stripped cards ────────────────────── */
@media (max-width: 640px) {
  /* The ranges strip is hidden on phones: it duplicates the Brand filter (in the
     Refine Products drawer and the footer), and on a narrow layout it just pushes
     the catalogue down. Job-first entry (Common Applications) and search stay.
     It remains on tablet/desktop below the search. */
  .page-hero--rail .hero-ranges { display: none; }

  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }

  /* Reveal mobile-only card controls */
  .pcard-add     { display: flex; }
  .pcard-cmp-row { display: flex; }

  /* Hide desktop card extras that don't fit the 2-col layout */
  .product-card .card-application,
  .product-card .product-card-body > p,
  .product-card .product-tags,
  .product-card .product-card-actions,
  .product-card .card-compare-btn { display: none !important; }

  /* Tight card body */
  .product-card .product-card-body {
    padding: 0.65rem 0.7rem 0.7rem;
    gap: 0.2rem;
    display: flex;
    flex-direction: column;
  }
  .product-card .brand-badge {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    margin-bottom: 0;
  }
  .product-card .product-card-body h3 {
    font-size: 0.86rem;
    margin-bottom: 0;
    line-height: 1.25;
  }

  /* Catalogue layout padding */
  .catalogue-layout { padding: 0 0.75rem; margin-top: 0.75rem; }
  .grid-meta        { padding: 0.4rem 0 0.2rem; font-size: 0.74rem; }

  /* Filter chips: horizontal scroll, no wrap */
  .active-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0.75rem;
    margin: 0;
  }
  .active-filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip, .filter-chip-clear        { flex-shrink: 0; white-space: nowrap; }

  /* Hide desktop sort select (mirrored in mobile filter bar). custom-select.js
     wraps #sortSelect in a styled .custom-select-wrap trigger that isn't
     covered by hiding .sort-select alone, so hide the wrapper too. */
  .grid-meta .sort-select,
  .grid-meta .custom-select-wrap { display: none; }

  /* Hide existing 768px filter toggle (replaced by mobile filter bar) */
  .filter-toggle { display: none; }

  /* ─── Step 2: mobile filter bar ───────────────────────────── */
  .mobile-filter-bar {
    display: flex;
    gap: 0.5rem;
    position: sticky;
    top: 60px;
    z-index: 30;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    margin: 0 -0.75rem;
    padding: 0.7rem 0.75rem;
  }

  .mfb-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem;
    min-height: 44px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .mfb-btn:active { opacity: 0.85; }

  .mfb-count {
    background: var(--red);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  .mfb-sort-wrap {
    flex: 1;
    min-width: 0;
    /* The custom-select trigger (below) now supplies the border + background,
       so the wrapper stays transparent and unclipped: overflow:hidden here
       would cut off the dropdown listbox. */
  }
  /* Mobile sort uses the same polished custom dropdown as desktop (enhanced by
     custom-select.js) instead of the raw OS <select>. Size its trigger to fill
     the slot at the 44px height of the neighbouring Filters button. */
  .mfb-sort-wrap .custom-select-wrap { display: block; width: 100%; }
  .mfb-sort-wrap .custom-select-trigger {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.8rem;
  }
  /* Comfortable touch height for each option in the mobile dropdown. */
  .mfb-sort-wrap .custom-select-listbox { min-width: 180px; }
  .mfb-sort-wrap .custom-select-option { min-height: 44px; }

  .mfb-sort-sel {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0.7rem 2rem 0.7rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
  }

  /* ─── Step 2: full-screen drawer ─────────────────────────── */
  .filter-sidebar.open {
    position: fixed !important;
    inset: 0;
    z-index: 1000;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
  }

  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .drawer-head h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
  }
  .drawer-x {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
  }

  .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .filter-heading { display: none; }
  .filter-sub     { display: none; }
  .filter-clear   { display: none; }

  /* ─── Step 2: accordion filter groups ────────────────────── */
  .filter-group-bar {
    cursor: pointer !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 0 !important;
    font-size: 0.95rem;
  }

  .fg-chev {
    display: block;
    color: #888;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .filter-group.open .fg-chev  { transform: rotate(180deg); }

  .filter-group-panel          { display: none; }
  .filter-group.open .filter-group-panel {
    display: block;
    padding-bottom: 0.85rem;
  }

  .filter-group label {
    padding: 0.5rem 0.55rem;
    margin: 0.05rem 0;
    border-radius: 6px;
    font-size: 0.88rem;
  }
  .filter-group label:hover { background: var(--panel); }

  /* ─── Step 2: drawer footer ─────────────────────────────── */
  .drawer-foot {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
  }
  .drawer-clear {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    padding: 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .drawer-apply {
    flex: 2;
    background: var(--red);
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE STEP 3–5 — product detail CTA, compare tab/sheet, compare page
   All hidden on desktop; revealed only at ≤640px.
   ════════════════════════════════════════════════════════════════ */
.sticky-cta,
.cmp-tab,
.cmp-modal,
.cx-wrap { display: none; }

@media (max-width: 640px) {
  /* ─── Step 3: product detail spec fixes ─────────────────────── */
  .spec-features { grid-template-columns: 1fr; gap: 0.4rem 0; }

  /* ─── Step 3: sticky bottom action bar ──────────────────────── */
  body.detail-has-cta { padding-bottom: 4.9rem; }
  .sticky-cta {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .sticky-cta-cmp {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 62px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
  }
  .sticky-cta-cmp.on {
    color: var(--red);
    border-color: var(--red);
    background: var(--red-tint);
  }
  .sticky-cta-add {
    flex: 1;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
  }
  .sticky-cta-add:active { transform: scale(0.99); }
  .sticky-cta-add.added { background: var(--green); }

  /* The desktop compare tray is replaced on phones by the edge tab + sheet */
  .compare-tray { display: none !important; }

  /* ─── Step 4: compare edge tab ──────────────────────────────── */
  /* Bottom-anchored (not vertical-center) so it never sits on top of the
     hero search bar on load or scrolling product cards further down — the
     same reasoning as the bottom-anchored .sticky-cta on product-detail. */
  .cmp-tab {
    position: fixed;
    left: 0;
    bottom: 6.5rem;
    z-index: 850;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 0 12px 12px 0;
    padding: 0.6rem 0.5rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    cursor: pointer;
  }
  .cmp-tab.show { display: flex; }
  .cmp-tab-count {
    background: #fff;
    color: var(--red);
    font-size: 0.66rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ─── Step 4: compare review sheet ──────────────────────────── */
  .cmp-modal.open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
  }
  .cmp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,17,22,0.5);
    animation: cmpFade 0.18s ease;
  }
  .cmp-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: cmpSlide 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes cmpFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cmpSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .cmp-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .cmp-sheet-head h3 {
    margin: 0;
    font-size: 1rem;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
  }
  .cmp-sheet-x {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cmp-sheet-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1.1rem;
    flex: 1;
  }
  .cmp-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
  }
  .cmp-sheet-item:last-child { border-bottom: none; }
  .cmp-sheet-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--muted);
  }
  .cmp-sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cmp-sheet-name {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
  }
  .cmp-sheet-rm {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  .cmp-sheet-foot {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1.1rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .cmp-sheet-clear {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 9px;
    padding: 0.75rem;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .cmp-sheet-go {
    flex: 2;
    background: var(--red);
    border: none;
    color: #fff;
    border-radius: 9px;
    padding: 0.75rem;
    font-size: 0.84rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .cmp-sheet-go:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ─── Step 5: compare page — mobile column view ─────────────── */
  .compare-page-table-wrap { display: none; }
  .cx-wrap { display: block; padding: 0 0.75rem 1.5rem; }

  .cx-difftoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.85rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
  }
  .cx-switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: var(--line-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s;
  }
  .cx-switch.on { background: var(--red); }
  .cx-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s;
  }
  .cx-switch.on .cx-knob { transform: translateX(18px); }

  .cx-scrollhint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    color: var(--red);
    font-size: 0.76rem;
    font-weight: 600;
    transition: opacity 0.2s;
  }
  .cx-scrollhint svg { flex-shrink: 0; }
  .cx-scrollhint[hidden] { display: none; }
  .cx-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .cx-grid {
    display: grid;
    min-width: min-content;
  }
  .cx-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .cx-head {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .cx-head-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--bg);
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
  }
  .cx-head-img img { width: 100%; height: 100%; object-fit: cover; }
  .cx-head-name {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    text-decoration: none;
  }
  .cx-head-avail {
    font-size: 0.66rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .cx-head-avail.available   { color: var(--green); }
  .cx-head-avail.unavailable { color: var(--muted); }
  .cx-head-select {
    margin-top: 0.15rem;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .cx-head-select.added {
    background: var(--red-tint);
    color: var(--red);
    border: 1px solid var(--red-tint-bdr);
  }
  .cx-head-rm {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }
  .cx-rowlabel {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    display: flex;
    align-items: center;
  }
  .cx-cell {
    padding: 0.6rem 0.55rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text);
  }
  .cx-grid > .cx-cell:nth-last-child(-n + 1),
  .cx-grid > .cx-rowlabel:last-of-type { }
  .cx-celltag {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.64rem;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin: 0 0.2rem 0.2rem 0;
  }
  .cx-cellfeat {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
  }
  .cx-cellfeat::before {
    content: "✓";
    color: var(--red);
    font-weight: 700;
    flex-shrink: 0;
  }
  /* Diff highlight — only active when the toggle is on */
  .cx-grid.diffon .cx-diff { background: #fff7e6; }
  .cx-grid.diffon .cx-rowlabel.cx-diff { background: #fdf3da; }

  .cx-add {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    background: #fff;
    border: 1.5px dashed var(--line-2);
    color: var(--red);
    border-radius: 10px;
    padding: 0.8rem;
    font-size: 0.84rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
}