.site-header[data-astro-cid-nen7h5rs] {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--header-height, 80px);
  background: linear-gradient(to right, #0a1cb6 0% 55%, #041399 100%);
  box-shadow: var(--shadow-sm, 0 2px 10px #0000000f);
  padding-right: 10%;
  transition: height .3s ease-in-out;
}

.header-left[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.header-right[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.header-logo-panel[data-astro-cid-nen7h5rs] {
  flex: 0 0 clamp(220px, 30vw, 280px);
  display: flex;
  align-items: center;
  padding-left: clamp(20px, 3vw, 36px);
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 68% 100%, 0 100%);
  transition: flex .3s ease-in-out, clip-path .3s ease-in, padding .3s ease-in-out, height .3s ease-in-out, width .3s ease-in-out;
}

.header-logo-panel[data-astro-cid-nen7h5rs] .brand[data-astro-cid-nen7h5rs] img[data-astro-cid-nen7h5rs] {
  width: auto;
  display: block;
  padding: 10px;
  transition: height .3s ease-in-out;
}

.header-nav-panel[data-astro-cid-nen7h5rs] {
  flex: 1;
  background: #000;
}

.header-nav-inner[data-astro-cid-nen7h5rs] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: auto;
  gap: 24px;
}

.main-nav[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs] {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white-text-dim);
  padding: 6px 0;
  border-bottom: 2px solid #0000;
  transition: color .15s, border-color .15s;
}

.main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:hover, .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs].active {
  color: var(--white-text);
  border-color: var(--accent-light);
}

.nav-utility[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle[data-astro-cid-nen7h5rs] {
  display: none;
  background: none;
  border: 1px solid var(--steel-light, #d8d9dc);
  border-radius: var(--radius-sm, 6px);
  color: var(--white-text);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cart-btn[data-astro-cid-nen7h5rs] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--steel-light, #dcd8d8);
  background: none;
  color: #fff;
  cursor: pointer;
  transition: border-color .15s;
}

.cart-btn[data-astro-cid-nen7h5rs]:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.cart-badge[data-astro-cid-nen7h5rs] {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-light);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

@media (width <= 960px) {
  .site-header[data-astro-cid-nen7h5rs].is-hidden {
    transform: translateY(-100%);
  }

  .site-header[data-astro-cid-nen7h5rs] {
    flex-direction: row;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 500;
    transition: height .3s ease-in-out, background-color .3s ease-in-out, transform .3s ease-in-out;
  }

  .header-logo-panel[data-astro-cid-nen7h5rs] {
    flex: none;
    width: 100%;
    height: var(--header-height-mobile);
    padding-left: 20px;
    clip-path: none;
    background: #0a1cb6;
  }

  .header-logo-panel[data-astro-cid-nen7h5rs] .brand[data-astro-cid-nen7h5rs] img[data-astro-cid-nen7h5rs] {
    max-height: 60px;
  }

  .header-nav-inner[data-astro-cid-nen7h5rs] {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .main-nav[data-astro-cid-nen7h5rs] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #fff;
    padding: 12px 20px 18px;
    box-shadow: var(--shadow-sm, 0 6px 14px #00000014);
  }

  .main-nav[data-astro-cid-nen7h5rs].open {
    display: flex;
  }

  .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs] {
    width: 100%;
    padding: 10px 0;
    color: var(--white-text-dim);
  }

  .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:hover, .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs].active {
    color: var(--text);
  }

  .nav-toggle[data-astro-cid-nen7h5rs] {
    display: flex;
  }

  .header-nav-panel[data-astro-cid-nen7h5rs] {
    position: relative;
  }
}

@media (width <= 480px) {
  .header-logo-panel[data-astro-cid-nen7h5rs] {
    height: 56px;
    padding-left: 16px;
  }

  .header-logo-panel[data-astro-cid-nen7h5rs] .brand[data-astro-cid-nen7h5rs] img[data-astro-cid-nen7h5rs] {
    max-height: auto;
  }
}

@media (width >= 961px) {
  .site-header[data-astro-cid-nen7h5rs].is-scrolled {
    background: #0a1cb6;
    height: 52px;
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .header-logo-panel[data-astro-cid-nen7h5rs] {
    background: none;
    clip-path: none;
    flex: 0 0 clamp(220px, 20vw, 280px);
    padding: 0 0 0 100px;
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .header-logo-panel[data-astro-cid-nen7h5rs] img[data-astro-cid-nen7h5rs] {
    height: 62px;
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs] {
    color: #ffffffbf;
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs]:hover, .site-header[data-astro-cid-nen7h5rs].is-scrolled .main-nav[data-astro-cid-nen7h5rs] a[data-astro-cid-nen7h5rs].active {
    color: #fff;
    border-color: var(--accent-light);
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .cart-btn[data-astro-cid-nen7h5rs] {
    background: none;
    border-color: #ffffff59;
    color: #fff;
  }

  .site-header[data-astro-cid-nen7h5rs].is-scrolled .cart-btn[data-astro-cid-nen7h5rs]:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}
.site-footer[data-astro-cid-jo6i4kqk] {
  margin-top: 50px;
  background: #0a116d;
}

.footer-black-panel[data-astro-cid-jo6i4kqk] {
  width: 100%;
  gap: 14px;
  display: grid;
  grid-template-columns: max-content max-content max-content;
}

.footer-brand[data-astro-cid-jo6i4kqk] {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.footer-brand[data-astro-cid-jo6i4kqk] img[data-astro-cid-jo6i4kqk] {
  height: 50px;
  width: auto;
  display: block;
}

.footer-address[data-astro-cid-jo6i4kqk] {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: #ffffffb8;
}

.footer-brand[data-astro-cid-jo6i4kqk], .footer-links[data-astro-cid-jo6i4kqk], .footer-social[data-astro-cid-jo6i4kqk] {
  grid-column: span 1;
  margin: 0 auto;
}

.footer-links[data-astro-cid-jo6i4kqk] {
  display: inline-block;
}

.footer-white-panel[data-astro-cid-jo6i4kqk] {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: center;
}

.footer-white-inner[data-astro-cid-jo6i4kqk] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 32px clamp(24px, 4vw, 56px);
}

.footer-col[data-astro-cid-jo6i4kqk] h4[data-astro-cid-jo6i4kqk] {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white-text);
  margin-bottom: 14px;
}

.footer-col[data-astro-cid-jo6i4kqk] ul[data-astro-cid-jo6i4kqk] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col[data-astro-cid-jo6i4kqk] ul[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk] {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color .15s;
}

.footer-col[data-astro-cid-jo6i4kqk] ul[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk]:hover {
  color: var(--white-text);
  text-shadow: .02em 0, -.02em 0;
  border-bottom: 2px solid #6495ed;
}

.social-icons[data-astro-cid-jo6i4kqk] {
  display: flex;
  gap: 12px;
}

.social-icon[data-astro-cid-jo6i4kqk] {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--steel-light, #d8d9dc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: border-color .15s, color .15s;
}

.social-icon[data-astro-cid-jo6i4kqk]:hover {
  border-color: var(--accent-light);
  color: var(--white-text);
}

.footer-copyright[data-astro-cid-jo6i4kqk] {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1cm;
  align-self: center;
  grid-column: span 3;
}

.footer-copyright[data-astro-cid-jo6i4kqk] p[data-astro-cid-jo6i4kqk] {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
  text-align: right;
}

@media (width <= 650px) {
  .site-footer[data-astro-cid-jo6i4kqk] {
    margin-top: 10px;
  }

  .footer-black-panel[data-astro-cid-jo6i4kqk] {
    flex: none;
    grid-template-columns: max-content max-content;
    width: 100%;
    justify-items: center;
    align-items: start;
  }

  .footer-brand[data-astro-cid-jo6i4kqk] {
    grid-column: span 2;
    margin-bottom: 15px;
  }

  .footer-links[data-astro-cid-jo6i4kqk], .footer-social[data-astro-cid-jo6i4kqk] {
    flex: none;
    align-items: start;
    text-align: left;
    grid-column: span 1;
    width: 100%;
    margin: 0 auto;
  }

  .footer-links[data-astro-cid-jo6i4kqk] {
    margin-left: 2cm;
  }

  .footer-social[data-astro-cid-jo6i4kqk] {
    margin-right: 2cm;
  }

  .footer-copyright[data-astro-cid-jo6i4kqk] {
    grid-column: span 2;
  }
}

@media (width <= 480px) {
  .footer-links[data-astro-cid-jo6i4kqk] {
    margin-left: .6cm;
  }

  .footer-social[data-astro-cid-jo6i4kqk] {
    margin-right: 0;
  }
}
/* =========================================================================
   IKK RACING — STYLESHEET
   -------------------------------------------------------------------------
   DESIGN SYSTEM (v2 — updated per client request)
   Theme is now a minimalist white base with charcoal/black text and a
   single vibrant "racing red" accent reserved for action points (primary
   buttons, hover states, badges, and critical highlights).

   BEGINNER TIP: every color still lives in the :root variables below.
   Change a value there ONCE and it updates everywhere on the site.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS (safe to edit)
   ------------------------------------------------------------------------- */
:root {
  /* ===== UPDATED: Minimalist white theme ===== */
  --bg-asphalt: #ffffff;      /* main page background (kept var name for compatibility) */
  --bg-panel: #ffffff;        /* cards, header, footer */
  --bg-panel-alt: #f6f6f7;    /* hover / alt rows */
  --bg-plate: #fafafa;        /* product "spec plate" cards */

  /* Structural lines (was "steel", now soft charcoal-gray hairlines) */
  --steel: #e6e6e8;
  --steel-light: #d4d4d8;

  /* Text: crisp dark charcoal/black */
  --text: #16171a;
  --text-dim: #3f4044;
  --text-faint: #8b8e94;

  /* Text: crisp dark charcoal/black */
  --white-text: #f4f5f8;
  --white-text-dim: #c0c2ca;
  --white-text-faint: #6d7075;

  /* ===== UPDATED: racing red — used ONLY for action points/highlights ===== */
  --accent: #0a1cb6;
  --accent-light: #62a7f9;
  --accent-soft: rgba(9, 128, 226, 0.09);

  /* Status colors */
  --success: #1f9d55;
  --success-soft: #1f9d5627;
  --danger: #d92d20;

  /* Subtle shadows for white panels (new token group) */
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.06);
  --shadow-md: 0 12px 28px -12px rgba(16, 17, 20, 0.14);
  --shadow-lg: 0 30px 60px -20px rgba(16, 17, 20, 0.18);
  --shadow-lgcn: 0 0px 6px 3px rgba(16, 17, 20, 0.18);

  /* Type scale */
  --font-display: "Montserrat", sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --header-height: 102px;
  --header-height-mobile: 54px;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-asphalt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Visually hidden but still readable by screen readers/crawlers — used
   where a visual label is split/decorative (e.g. the parent-category card
   title, broken across two styled lines with aria-hidden="true"). */
.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;
}

a { color: inherit; text-decoration: none; }

h1, h2, h4 {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  margin: 0 0 0.5em;
  color: var(--text);
}

h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  margin: 0 0 0.5em;
  color: var(--text);
}

p { margin: 0 0 1em; color: var(--text-dim); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Visible keyboard focus everywhere (accent ring, since accent = red now) */
a:focus-visible,
button:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

.search-bar input:focus-visible
{
  outline: none;
  box-shadow: var(--shadow-test);
}
.subcategory-item input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 32px 0; }
.section-tight { padding: 40px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent);
}

/* -------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------
   UPDATED: primary buttons are now solid racing red with white text
   (was orange-on-dark). This is the ONLY place red fills a large area —
   everywhere else it's used sparingly as text/borders/badges.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-primary:disabled:hover { background: var(--accent); }

.btn-primary {
  background: var(--accent);
  color: #ffffff; /* UPDATED: white text for contrast against racing red */
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-light); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  background-color: var(--accent-soft);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px; font-size: 12px; }

.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover { background: var(--danger); color: #ffffff; }

/* -------------------------------------------------------------------------
   4. HEADER / NAVIGATION
   -------------------------------------------------------------------------
   UPDATED: white translucent header with a soft shadow instead of a
   dark, hard-bordered bar.
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 0px solid var(--steel);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent); /* UPDATED: racing red brand mark */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  font-weight: 400;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--text);
  border-color: var(--accent); /* UPDATED: red underline replaces orange */
}

.nav-utility {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--steel-light);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.cart-btn:hover { border-color: var(--accent-light); }

/* ---------------------------------------------------------------------
   "Fly to cart" animation — see flyToCart()/bumpCartButton() in cart.js.
   .fly-to-cart-item is a single cloned element appended to <body> (not
   scoped to any one page's markup) that JS animates from wherever "Add
   to Quote" was confirmed to this button's position; .cart-btn-bump is
   the little landing "impact" pulse played on arrival.
   --------------------------------------------------------------------- */
.fly-to-cart-item {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-plate);
  background-size: cover;
  background-position: center;
  border: 2px solid #ffffff;
  box-shadow: var(--shadow-md);
  z-index: 9999;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes cart-btn-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.cart-btn-bump { animation: cart-btn-bump 0.4s ease; }

/* -------------------------------------------------------------------------
   5. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--steel);
  background: var(--bg-panel);
  padding: 28px 0;
  margin-top: 80px;
}
.site-footer .container {
  display: grid;
  align-items:flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer p {
  margin: 0;
  font-size: 13px;
  color: var(--text-faint);
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 13px; color: var(--text-faint); }
.footer-links a:hover { color: var(--accent); }

/* -------------------------------------------------------------------------
   6. HOME / HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
  border-bottom: 1px solid var(--steel);
  /* UPDATED: faint red glow + a much subtler dark-on-white texture line */
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, var(--accent-soft), transparent 60%),
    repeating-linear-gradient(135deg, rgba(16,17,20,0.015) 0 2px, transparent 2px 26px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 0.98;
  margin-bottom: 20px;
}
.hero h1 span { color: var(--accent); }

.hero-lede {
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.hero-stats {
  display: flex;
  gap: 36px;
  border-top: 1px solid var(--steel);
  padding-top: 24px;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text);
  line-height: 1;
}
.hero-stat .label {
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* The "spec plate" signature visual on the homepage hero */
.hero-plate {
  position: relative;
  background: var(--bg-plate);
  border: 1px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-lg); /* UPDATED: shadow instead of pure-black drop */
}
.hero-plate img {
  width: 100%;
  border-radius: var(--radius-sm);
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.03);
}
.hero-plate-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--steel-light);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel-light);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
}
.rivet.tl { top: 12px; left: 12px; }
.rivet.tr { top: 12px; right: 12px; }
.rivet.bl { bottom: 12px; left: 12px; }
.rivet.br { bottom: 12px; right: 12px; }

/* Feature strip on homepage */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--bg-panel);
  border: 1px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-sm); /* UPDATED: subtle lift on white panel */
}
.feature-card .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; margin: 0; }

/* Category strip */
.category-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.category-chip {
  background: var(--bg-panel);
  border: 1px solid var(--steel);
  border-radius: var(--radius-sm);
  padding: 18px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.category-chip:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-md); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-head h2 { margin-bottom: 6px; font-size: 30px; }
.section-head p { margin: 0; max-width: 50ch; }

/* -------------------------------------------------------------------------
   7. CATALOG PAGE
   ------------------------------------------------------------------------- */
.catalog-header {
  position: relative;
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--steel);
  background: var(--bg-panel);
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    url('/images/hero-banner.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.catalog-header h1 { margin-bottom: 6px; font-size: 32px; }
.catalog-header p { margin: 0; }

.catalog-header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
}

.catalog-header-content {
  position: relative;
  z-index: 1;
}

.search-bar {
  position: relative;
  margin-top: 24px;
}
.search-bar input {
  width: 100%;
  padding: 15px 18px 15px 46px;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  box-shadow: var(--shadow-sm); /* UPDATED: clean modern input shadow */
}
.search-bar input::placeholder { color: var(--text-faint); }
.search-bar input:focus { outline: 3px solid var(--accent-light); box-shadow: var(--shadow-md);}
.search-bar .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
}

.catalog-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 36px;
  padding: 40px 0 100px;
  align-items: start;
}

.parent-category-grid { padding: 20px 0 80px; }
.parent-category-grid .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
 
.parent-category-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  text-decoration: none;
  /* Deliberately NOT clipped — .parent-category-card-image is allowed to
     bleed past .parent-category-card-frame's edges here. Only the frame
     itself (below) clips its own background. */
  overflow: visible;
}
 
.parent-category-card-frame {
  position: absolute;
  inset: 0;
  overflow: hidden; /* keeps the background pattern contained to the frame, per spec */
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, #0020ad 0%, #0324e0 30%, #4c66f8 100%); /* same dark tone the footer band uses below, so frame + footer read as one shape */
  background-position: center;
    background-size: 120% auto;
    background-repeat: no-repeat;
  box-shadow: #0404bd;
  transition: box-shadow 0.2s ease;
}
 
.parent-category-card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    -20deg,
    rgba(255, 255, 255, 0.06) 0px,
    rgba(255, 255, 255, 0.06) 2px,
    transparent 2px,
    transparent 18px
  );
}
 
.parent-category-card-image {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 74%;
  transform: translate(-50%, -50%) scale(1.35); /* the "intentional overflow" — scaled past the frame on purpose */
  z-index: 1; /* above the frame's background pattern, below the footer + label */
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  transition: transform 0.25s ease;
}
.parent-category-card-image img { width: 100%; height: auto; display: block; }
 
.parent-category-card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: var(--text); /* matches .parent-category-card-frame exactly — one continuous dark shape */
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%); /* the angled top edge the label sits on */
  z-index: 2;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
 
/* -------------------------------------------------------------------------
   Two-line "seam" label. .parent-category-card-footer's clip-path draws an
   angled top edge that — at the card's horizontal center, on a square
   card with this footer height — rises at ~7deg, hence the -7deg rotation
   below (matches the footer's angle exactly rather than an arbitrary tilt).

   .parent-category-card-label is a zero-height anchor pinned to that exact
   seam point. .pccl-outside and .pccl-inside are both absolutely
   positioned from that SAME point (bottom:0 / top:0) and each rotates
   around the edge touching the seam (transform-origin), so:
     - a single word renders as .pccl-inside alone, entirely inside the
       black footer;
     - a multi-word title splits (see splitParentCardLabel() in
       catalog.astro) into .pccl-outside — sitting above the seam, over
       the artwork, outlined for legibility — and .pccl-inside below it,
       reading as one continuous run of text broken by the border.
   cart.js's fitParentCategoryLabels() shrinks the font-size of both
   spans together when a title is too wide for the card. ------------------- */
.parent-category-card-label {
  position: absolute;
  left: 50%;
  top: 74.1%; /* footer top (68%) + seam's mid-footer offset (32% * 19%) — see comment above */
  width: 92%;
  transform: translateX(-50%);
  z-index: 3; /* above both the footer AND the product image — sits right on the seam between them */
  pointer-events: none;
  /* Shared by both halves below so they render at the SAME size by
     default — cart.js's fitParentCategoryLabels() only ever shrinks this
     down (uniformly, on both spans together) when a title is too wide
     for the card; it never enlarges or diverges the two sizes. */
  --pccl-label-size: clamp(34px, 4.4vw, 40px);
}

.pccl-outside,
.pccl-inside {
  position: absolute;
  left: 50%;
  display: block;
  font-family: var(--font-display);
  font-size: var(--pccl-label-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
}

/* Above the seam, over the product artwork — black fill with a white
   outline so it reads clearly against the busy artwork/backdrop instead
   of relying on a solid background. */
.pccl-outside {
  bottom: -12px;
  transform: translateX(-50%) rotate(-7deg);
  transform-origin: 50% 100%; /* rotates around its own bottom edge, i.e. the seam */
  color: var(--text);
  -webkit-text-stroke: 2.5px var(--white-text);
  paint-order: stroke fill;
}

/* Inside the black footer. */
.pccl-inside {
  top: -12px;
  transform: translateX(-50%) rotate(-7deg);
  transform-origin: 50% 0%; /* rotates around its own top edge, i.e. the same seam point */
  color: var(--white-text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* Single-word titles render .pccl-inside only. Sitting right on the seam
   would look off-center inside the footer band, so nudge it down to read
   as centered in the black area instead. Font size is left alone — same
   shared size as the two-line cards, per spec. */
.parent-category-card-label.is-single-word .pccl-inside {
  top: -14px;
}
 
.parent-category-card:hover .parent-category-card-frame { box-shadow: var(--shadow-md); }
.parent-category-card:hover .parent-category-card-image { transform: translate(-50%, -50%) scale(1.42); }
 
/* ---------------------------------------------------------------------
   DRILLDOWN HEADING (catalog.astro Step 2) — "← All Categories" back
   link + the active parent category's name, sitting above the existing
   filters+grid layout.
   --------------------------------------------------------------------- */
.drilldown-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
.drilldown-heading h2 { margin: 0; font-size: 22px; }
 
.back-to-categories-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 20px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.back-to-categories-btn:hover { color: var(--accent-light); }
 
.catalog-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 36px;
  padding: 40px 0 100px;
  align-items: start;
}

.filters-panel {
  background: var(--bg-panel);
  border: 0px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) - 20px);
  box-shadow: 0; /* UPDATED */
  margin-right: 25px;
  margin-left: -25px;
  max-height: 720px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.filters-panel:hover {
  scrollbar-color: var(--steel-light) transparent;
}
.filters-panel::-webkit-scrollbar {
  width: 6px;
}
.filters-panel::-webkit-scrollbar-track {
  background: transparent;
}
.filters-panel::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}
.filters-panel:hover::-webkit-scrollbar-thumb {
  background-color: var(--steel-light);
}

/* Sticky head: title + conditional "Clear All" + mobile-only close X.
   Sticky relative to the panel's own scroll box, so it stays pinned both
   when the desktop sidebar is tall enough to scroll internally AND when
   the mobile full-screen modal (see @media max-width:960px below) has a
   long list underneath it. */
.filters-panel-head {
  position: sticky;
  top: -24px; /* cancels .filters-panel's own 24px padding so this sits flush at the very top */
  margin: -24px -24px 16px;
  padding: 20px 24px 16px;
  background: var(--bg-panel);
  border-bottom: 0px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 1;
}

.filters-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.clear-all-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.clear-all-btn:hover { color: var(--accent); }
.clear-all-btn[hidden] { display: none; }

/* Mobile-only close X — reuses .modal-close's base look/hover (see
   section 8) so it matches every other panel's close button exactly;
   this class just controls when it's visible. */
.filters-panel-close { display: none; }
.filters-panel h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: 0; /* sits flush inside .filters-panel-head's flex row now */
}
.filter-group { margin-bottom: 22px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.filter-group label, 
.category-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
.filter-group label:hover,
.category-toggle:hover {
  color: var(--accent, #ff4500); /* Substitutes your site's accent color */
}
.filter-group h4{
  background-color: #0a116d;
  text-align: left;
  margin-right: -10px;
  margin-left: -10%;
  padding: 10px 10px 10px;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.filter-group select {
  width: 100%;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow-sm); /* UPDATED: clean modern dropdown look */
}
.filter-group select:focus { border-color: var(--accent); }
.filter-group select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.filter-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  display: block;
}

/* ---------------------------------------------------------------------
   CATEGORY TREE — parent categories are full-width, borderless accordion
   rows (click anywhere on the row to expand/collapse); each one reveals a
   checklist of subcategories with a bracketed product count. Both row
   types bleed past .filters-panel's own 24px padding so the hover
   highlight spans edge-to-edge, matching the reference layout.
   --------------------------------------------------------------------- */
.category-tree {
  display: flex;
  flex-direction: column;
}

.category-node + .category-node {
  border-top: 0px solid var(--steel);
}

.category-toggle {
  width: calc(100% + 48px);
  margin: 0 -24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
  transition: background 0.15s ease;
}
.category-toggle:hover { background: var(--bg-panel-alt); }

.category-toggle .chevron {
  flex: 0 0 auto;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.category-node.is-open > .category-toggle .chevron {
  transform: rotate(90deg);
}

.subcategory-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

.subcategory-list[hidden] {
  display: none !important;
}

.subcategory-item {
  width: calc(100% + 48px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 24px 10px 40px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease;
}
.subcategory-item:hover { background: var(--bg-panel-alt); color: var(--text); }
.subcategory-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.subcategory-item .subcategory-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.subcategory-count {
  color: var(--text-faint);
  font-size: 12px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   ACTIVE FILTER PILLS — solid dark containers (not bare tinted text) per
   the reference: checked subcategories surface here as removable pills.
   --------------------------------------------------------------------- */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.active-filters:empty { margin: 0; }
.active-filters-panel { display: none; }

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: var(--text); /* solid dark container, not a bare tinted label */
  color: var(--white-text);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.filter-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  color: var(--white-text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.filter-pill-remove:hover { color: var(--accent); }

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.results-count { font-size: 13px; color: var(--text-faint); }
.results-count strong { color: var(--text); }

.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.sort-control select, .sort-control select::picker(select) {
  padding: 6px 12px;
  background: #ffffff00;
  border: 0px solid var(--steel-light);
  border-left: 2px solid var(--steel-light);
  border-radius: 0;
  color: var(--text);
  box-shadow: 0;
  font-size: 14px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 160px;
  appearance: base-select !important;
}
.sort-control select::picker(select){
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 
              0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Smooth modern shadow */
  padding: 6px 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.sort-control select::after {
  content: "▼";
  font-size: 0px;
  color: #666666;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sort-control select:focus { outline: none; border-color: transparent; border-left: 2px solid var(--steel-light);}
.sort-control select:hover, .sort-control select:focus-visible { outline: none; border-color: transparent; box-shadow: var(--shadow-lgcn); }

/* Groups the sort dropdown with the mobile-only filter toggle so they sit
   in one row (see .results-toolbar's own flex-wrap for narrower screens). */
.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-toggle-btn {
  display: none; /* revealed at the mobile breakpoint, section 12 */
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0;
  justify-content: center;
}
.filter-toggle-btn:hover, .filter-toggle-btn:focus-visible { outline: none; border-color: var(--accent-light); color: var(--accent-light); }
.filter-toggle-btn .active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}
.filter-toggle-btn .active-count:empty { display: none; }

/* Base state: hidden on desktop (revealed + fully styled at the mobile
   breakpoint, section 12) — .results-toolbar is easily reachable there
   regardless of scroll position, sticky or not, so this has no reason to
   exist outside of mobile. */
.floating-filter-btn { display: none; }


/* ---------------------------------------------------------------------
   UPDATED: PRODUCT GRID RESPONSIVENESS (section 2 of the change request)
   -------------------------------------------------------------------
   - Desktop / widescreen: exactly 4 cards per row.
   - Narrower desktop / tablet: 3 cards per row.
   - Mobile: collapses to a minimum of 2 cards per row (never to 1),
     so the grid stays compact and scannable on small screens.
   This class is used by the catalog grid (#productGrid) AND reused by
   the homepage's featured-products grid (#featuredGrid).
   --------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* UPDATED: 4-across on desktop */
  gap: 22px;
  scroll-margin-top: 150px;
}

/* Homepage only shows 3 featured items — give it its own column count so
   3 cards don't stretch oddly inside a 4-column track. See index.html,
   where #featuredGrid also carries the "product-grid--featured" class. */
.product-grid--featured {
  grid-template-columns: repeat(3, 1fr);
}

/* Product card = stamped "spec plate" */
.product-card {
  background: 0;
  border: 0px solid var(--steel);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md); /* UPDATED: soft shadow instead of dark card */
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: var(--steel-light); transform: translateY(-2px); box-shadow: var(--shadow-lgcn); }

.product-card .thumb-link {
  display: block;
  cursor: pointer;
  border-bottom: 0px solid var(--steel);
  background: #f2f2f3; /* UPDATED: light placeholder instead of near-black */
}
.product-card .thumb-link img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card .thumb-link:hover img { transform: scale(1.04); }

.card-quick-add-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #1a19198f;
  color: #ffffff91;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card-quick-add-btn:hover {
  background: var(--accent);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}
.card-quick-add-btn svg { pointer-events: none; }

.product-card .card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card .card-body-catalog { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.tag-row {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping only if the row completely runs out of space */
  gap: 6px;       /* Adds a clean space between the two badges */
}

.part-type-tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 8px;
  background-color: var(--accent-soft);
  border: 0px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 5px;
}

.product-card h3 {
  font-size: 16px;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.product-card .fit-line {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.product-card .price-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
  border-top: 0px dashed var(--steel);
}
.product-card .price {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
}
.product-card .price small {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.price-row .add-to-quote-btn {
  flex: 1;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--steel-light);
  border-radius: var(--radius-md);
  color: var(--text-dim);
}
.empty-state h3 { color: var(--text); margin-bottom: 8px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.pagination .page-info {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  min-width: 110px;
  text-align: center;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-num-btn {
  background: transparent;
  border: 0 solid var(--steel-light);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 14px;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}
.page-num-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.page-num-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff; /* Contrast text inside highlighted select stage */
  font-weight: bold;
}
.page-ellipsis {
  color: var(--text-faint);
  font-family: var(--font-body);
  padding: 0 4px;
  user-select: none;
}
.arrow-btn {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.arrow-btn:hover { transform: scale(1.4); }

/* -------------------------------------------------------------------------
   8. QUICK-ORDER MODAL + CART DRAWER
   ------------------------------------------------------------------------- */
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.45); /* UPDATED: lighter scrim fits a white theme */
  z-index: 900;
  display: none;
}
.overlay-backdrop.open { display: block; }
.quick-order-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 17, 0.6);
  z-index: 901;
  display: none;
}
.quick-order-overlay.open { display: block; }

/* Stops the page scrolling behind the mobile full-screen filters panel
   (see .filters-panel's @media max-width:960px rules, section 12) while
   it's open — toggled by cart.js's openFiltersPanel()/closeFiltersPanel(). */
body.filters-panel-open { overflow: hidden; }

/* Same idea, for the mobile dealer-list drawer (see .dealer-sidebar's
   @media max-width:960px rules, section 10) — toggled by cart.js's
   openDealerList()/closeDealerList(). */
body.dealer-sidebar-open { overflow: hidden; }

/* Same idea, for the mobile direction-app chooser sheet (see
   .direction-sheet, section 10) — toggled by dealers.astro's own
   openDirectionSheet()/closeDirectionSheet(). */
body.direction-sheet-open { overflow: hidden; }
body.cart-drawer-open { overflow: hidden; }
body.quick-order-modal-open { overflow: hidden; }


.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-md);
  padding: 28px;
  z-index: 901;
  display: none;
  box-shadow: var(--shadow-lg);
}
.modal.open { display: block; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
}
.modal-close:hover { color: var(--accent); }

/* Shared "back" affordance for the three full-screen mobile takeovers
   (filters panel, dealer list, quote cart) — replaces the "x" on mobile
   for all three; each panel's own .*-close class stays reserved for
   desktop contexts (only the cart drawer actually has one, since the
   other two panels don't exist as an overlay on desktop at all). Hidden
   by default; each panel's own @media max-width:960px block turns it on
   alongside hiding that panel's "x". */
.panel-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -6px;
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}
.panel-back-btn:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
   Quick-order modal's product head (thumbnail + name) — see
   QuickOrderModal.astro. .modal-close above is absolutely positioned
   over the top-right corner rather than sharing a flex row with this,
   so padding-right here just keeps the title clear of it.
   --------------------------------------------------------------------- */
.modal-product-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-right: 26px;
}
.modal-thumb-btn {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--steel-light);
  padding: 0;
  cursor: zoom-in;
  background: var(--bg-plate);
}
.modal-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.15s ease;
}
.modal-thumb-btn:hover img { transform: scale(1.06); }
.modal-product-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.modal-field { margin-bottom: 18px; }
.modal-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.modal-field select,
.modal-field input {
  width: 100%;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.modal-field select:focus,
.modal-field input:focus { border-color: var(--accent); }

/* ---------------------------------------------------------------------
   Custom variation listbox (replaces a native <select> — see the big
   comment on #quickOrderVariationSelect in QuickOrderModal.astro for
   why: a native select's open list can't be height-capped or given a
   custom scrollbar in any mainstream browser).
   --------------------------------------------------------------------- */
.custom-select { position: relative; }
.custom-select-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.custom-select-toggle:hover,
.custom-select.is-open .custom-select-toggle { border-color: var(--accent); }
.custom-select-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--bg-plate);
}
.custom-select-toggle:disabled:hover { border-color: var(--steel-light); }
.custom-select-current {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.custom-select-current span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-toggle .chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.custom-select.is-open .custom-select-toggle .chevron { transform: rotate(180deg); }

/* Only rendered/shown when a variation actually has a dedicatedImageUrl
   (see populateQuickOrderVariations() in cart.js) — a variation without
   one just shows its name, no empty swatch box in its place. Reused for
   both the toggle's current-selection thumb and each option in the list
   below. */
.variation-option-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Availability badge for the quick-order modal's variation listbox —
   same available/soldOut/comingSoon states as [slug].astro's chip
   badges, just an inline pill here (that page uses a floating
   corner badge instead, since its chips are laid out differently). A
   status INDICATOR only, never a disabled state: sold-out/coming-soon
   variations stay fully selectable (see populateQuickOrderVariations()
   in cart.js). Gently pulses to draw the eye; respects
   prefers-reduced-motion.
   --------------------------------------------------------------------- */
.variation-status-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}
.variation-status-badge.is-soldout { background: var(--danger); }
.variation-status-badge.is-comingsoon { background: var(--accent); }
.variation-status-badge.is-new { background: var(--success); }

.custom-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 20;
  display: none;
}
.custom-select.is-open .custom-select-list { display: block; }
.custom-select-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.custom-select-list li:hover { background: var(--bg-plate); }
.custom-select-list li.is-selected { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------------
   Quantity stepper — same classes/markup as [slug].astro's own quantity
   selector, pulled into global.css since this modal (unlike that page)
   has no scoped \3c style> block of its own to hold them.
   --------------------------------------------------------------------- */
.qty-selector {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0; /* the stepper's buttons/input are fixed-size and shouldn't be squeezed — .modal-footer-row's button is what should give way first (see .modal-footer-row .btn below) */
}
.qty-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--steel-light);
  background: #ffffff;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.qty-btn:disabled,
.qty-input:disabled { opacity: 0.45; cursor: not-allowed; }
.qty-input {
  width: 52px;
  height: 38px;
  text-align: center;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Quantity + Add to Quote sitting side by side at the bottom of the
   modal (see QuickOrderModal.astro's .modal-footer-row). */
.modal-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap; /* if the qty stepper (now fixed-size, see .qty-selector above) and the button can't both fit on one line, the button drops to its own line below instead of the two crowding/overlapping each other */
}
.modal-footer-row .btn {
  flex: 1;
  min-width: 120px; /* stops "Add to Quote"/"Confirm" from being squeezed unreadably thin before flex-wrap above kicks in */
}

/* ---------------------------------------------------------------------
   Single-image enlarge overlay for the modal's thumbnail (see
   #quickOrderImageLightbox in QuickOrderModal.astro). Visually mirrors
   [slug].astro's own hero-image lightbox, just without </> nav since
   there's only ever one image here.
   --------------------------------------------------------------------- */
.modal-image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  z-index: 960; /* above .modal's 901 */
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-image-lightbox.is-open { display: flex; }
.modal-image-lightbox img {
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.modal-image-lightbox .lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-image-lightbox .lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* Cart drawer (slide-out) */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: min(420px, 92vw);
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--steel-light);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transition: right 0.28s ease;
  box-shadow: var(--shadow-lg);
}
.cart-drawer.open { right: 0; }

.cart-drawer-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cart-drawer-head h3 { margin: 0; font-size: 18px; }
.cart-drawer-close { display: inline-flex; align-items: center; justify-content: center; } /* desktop-only "x" — hidden on mobile in favor of .panel-back-btn, see @media max-width:960px below */

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-light) transparent;
}

/* Wraps the bordered card (.cart-line) and its trashcan button together,
   so the button can sit outside the card's border — matching the
   mock-up — while still scrolling/spacing as one unit inside
   .cart-drawer-body. */
.cart-line-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: -12px;
}

.cart-line {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-plate);
  border: 1px solid var(--steel);
  border-radius: var(--radius-sm);
  align-items: start;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex: 1;
  min-width: 0;
}
.cart-line:hover { border-color: var(--accent); background: var(--bg-panel); }
.cart-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cart-line-thumb-link {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.cart-line-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.15s ease;
}
.cart-line-thumb-link:hover img { transform: scale(1.08); }
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .info h4 {
  font-size: 14px;
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-line .info .var-and-qty{
  display: grid;
  /* minmax(0, ...) lets this column actually shrink below its content's
     natural size — plain "1fr" refuses to go below min-content width,
     which is what was pushing .cart-line-qty out past the card's right
     edge on narrow screens. auto on the qty column means it always gets
     exactly the room it needs and is never the one asked to compress. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}
/* Variation shown as a compact dropdown-styled button — visually echoes
   .custom-select-toggle (the quick-order modal's own variation picker)
   but sized for a cart line. Clicking it opens the quick-order modal in
   edit mode (see openQuickOrderModalForEdit() in cart.js) rather than
   opening an actual dropdown list of its own. */
.cart-line-variation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cart-line-variation:hover { border-color: var(--accent); }
.cart-line-variation span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;    /* Caps the text at exactly 2 lines */
  overflow: hidden;         /* Hides the text beyond 2 lines */
  text-overflow: ellipsis;  /* Adds the "..." at the end of line 2 */
  white-space: normal;      /* ALLOWS wrapping up to 2 lines (Replaces nowrap) */
  overflow-wrap: anywhere;  /* Variation codes like "93.5L/28Pin/13Pin" have no spaces, so without this the browser treats the whole thing as one unbreakable "word" and refuses to shrink below its full width — this lets it actually break instead of forcing the card wider. */
  flex: 1;
  min-width: 0;             /* Flex children default to min-width:auto (their own content's width) — without this it fights overflow-wrap above and forces the same overflow it's meant to fix. */
  text-align: left;
}
.cart-line-variation .chevron { flex-shrink: 0; color: var(--text-faint); }

/* ---------------------------------------------------------------------
   Reminder note for a cart line whose variation was sold out / coming
   soon at the time it was added (see renderCartDrawer() in cart.js) —
   purely informational, the item was still added same as any other.
   --------------------------------------------------------------------- */
.cart-line-note {
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.4;
}
.cart-line-note.is-soldout {
  background: rgba(217, 45, 32, 0.08);
  color: var(--danger);
}
.cart-line-note.is-comingsoon {
  background: var(--accent-soft);
  color: var(--accent);
}
.cart-line-note.is-new {
  background: var(--success-soft);
  color: var(--success);
}
/* Qty stepper inside a cart line — same component as the quick-order
   modal's .qty-selector, just sized down to fit the drawer's width
   alongside the thumbnail and product info. Minus at qty 1 removes the
   line (see updateCartLineQuantity() in cart.js) — this is the drawer's
   only "remove" affordance now. */
.cart-line-qty {
  flex-shrink: 0;
  gap: 2px;
  margin-right: -10px;
}
.cart-line-qty .qty-btn {
  width: 28px;
  height: 28px;
  font-size: 15px;
}
.cart-line-qty .qty-input {
  width: 24px;
  height: 28px;
  font-size: 13px;
}
.cart-qty-minus, .cart-qty-plus{
  border: 0;
  background-color: #ffffff00;
  max-width: 20px;
}
.cart-qty-minus:hover, .cart-qty-plus:hover{
  transform: scale(1.5);
}

/* Dedicated remove button — now a sibling of .cart-line (not nested
   inside its bordered card) so it sits outside the box entirely, per the
   mock-up. .cart-line-row above is what lays the two out side by side.
   It's still outside the card's own click-to-navigate handler simply by
   virtue of no longer being inside .cart-line at all. */
.cart-line-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--danger);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-line-remove:hover { background: rgba(217, 45, 32, 0.1); }
.cart-line-remove svg { pointer-events: none; }

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-faint);
}

.cart-drawer-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--steel);
}
.cart-drawer-foot .count-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

/* -------------------------------------------------------------------------
   9. PRODUCT DETAIL PAGE
   ------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 13px;
  color: var(--text-faint);
  padding: 20px 0 0;
}
.breadcrumb a:hover { color: var(--accent); }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 20px 20px 100px;
  align-items: start;
}

.detail-media {
  background: var(--bg-plate);
  border: 1px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 2px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.detail-media img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.detail-media .plate-id {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--steel-light);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.detail-info .part-type-tag { margin-bottom: 14px; }
.detail-info h1 { font-size: 30px; margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.detail-info .fit-line {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.detail-info .price {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 22px;
}
.detail-info .desc {
  font-family: var(--font-body);
  font-size: 15px;
  margin-bottom: 26px;
  color: var(--text-dim);
}
.detail-info .desc p { margin: 0 0 14px; }
.detail-info .desc p:last-child { margin-bottom: 0; }
/* Line-spacing presets — picked per-paragraph from the block style
   dropdown in the Studio (see product.js's `description` field), output
   as these classes by the custom `block` components in [slug].astro. */
.detail-info .desc p.desc-compact { line-height: 1.25; margin-bottom: 4px; }
.detail-info .desc p.desc-loose { line-height: 2; margin-bottom: 24px; }
.detail-info .desc ul,
.detail-info .desc ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.detail-info .desc li { margin-bottom: 6px; line-height: 1.6; }
.detail-info .desc li:last-child { margin-bottom: 0; }
.detail-info .desc a {
  color: var(--accent);
  text-decoration: underline;
}
.detail-info .desc a:hover { color: var(--accent-dark, var(--accent)); }
.detail-info .desc strong { color: var(--text); }
.detail-info .btn { display:inline-flex; width: 45vw; max-width: 550px;}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  font-size: 14px;
}
.spec-table tr { border-bottom: 1px solid var(--steel); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 10px 0; }
.spec-table td:first-child {
  color: var(--text-faint);
  width: 140px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.variation-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.variation-chip {
  padding: 8px 14px;
  border: 1px solid var(--steel-light);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.detail-not-found {
  text-align: center;
  padding: 100px 20px;
}
.detail-not-found h2 { margin-bottom: 10px; }

/* -------------------------------------------------------------------------
   10. DEALERS PAGE
   -------------------------------------------------------------------------
   UPDATED (section 3 of the change request): the old 3-column card grid
   is replaced with a split-screen layout — a large mock map on one side
   and a scrollable sidebar of dealer cards on the other. See dealers.html
   for the new markup and app.js for the pin-click-highlights-card logic.
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--steel);
  background: var(--bg-panel);
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    url('/images/hero-banner.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero h1 { font-size: 34px; margin-bottom: 8px; }
.page-hero p { max-width: 60ch; margin: 0; }

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
}

.page-hero-content {
  position: relative;
  z-index: 1;
}

/* --- NEW: split-screen container --- */
.dealers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  padding: 48px 10px 10px;
  align-items: stretch;
}

.dealer-map {
  position: relative;
  min-height: 600px;
  border: 1px solid var(--steel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden; /* keeps Leaflet's tile layer inside our rounded corners */
  z-index: 0;
}
/* Leaflet needs an element with real, measurable height — .dealer-map's
   min-height above covers that; this just makes sure the library's own
   root div actually fills it. */
.dealer-map .leaflet-container {
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
}
 
/* Shown when the visitor's geolocated position is farther than
   INTERNATIONAL_THRESHOLD_KM from every store (see dealers.astro) */
.worldwide-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text);
}
.worldwide-banner a { color: var(--accent); text-decoration: underline; }
 
.dealer-empty-state {
  font-size: 14px;
  color: var(--text-faint);
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--steel);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------
   Mobile-only toolbar with the "List" button that opens #dealerSidebar
   as a full-screen slide-out drawer (see .dealer-sidebar's @media
   max-width:960px rules below) — same pattern as the catalog's
   #filterToggleBtn -> .filters-panel. Hidden entirely on desktop, where
   the sidebar already sits inline next to the map.
   --------------------------------------------------------------------- */
.dealer-mobile-toolbar {
  position: flex;
  top: calc(var(--header-height) - 110px);
  background-color: var(--bg-asphalt);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  margin-top: -10px;
  z-index: 1;
  height: 70px;
  border-bottom: 1px solid var(--steel);
  transition: top 0.3s ease-in-out;
}
.site-header:not(.is-hidden) ~ * .dealer-mobile-toolbar {
  top: var(--header-height-mobile, 64px);
}
.dealer-count-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dealer-list-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.dealer-list-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.dealer-list-toggle-btn .dealer-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}
.dealer-list-toggle-btn .dealer-count-badge:empty { display: none; }

/* --- NEW: scrollable dealer sidebar ---
   Plain inline flex wrapper on desktop (its child .dealer-sidebar-head is
   hidden there — see below — so only .dealer-sidebar-body shows,
   unchanged from before). Becomes a fixed, full-viewport slide-out
   drawer on mobile (see @media max-width:960px below). */
.dealer-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
  border: 0px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 0 4px 16px 20px;
}

/* Sticky drawer head (title + close X) — same visual language as
   .filters-panel-head. Only shown once .dealer-sidebar becomes a
   full-screen drawer on mobile; desktop keeps its original look. */
.dealer-sidebar-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 32px 16px 20px;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--steel);
  margin: 0 -24px 16px;
}
/* Mobile-only close X — reuses .modal-close's base look/hover (see
   section 8) so it matches every other panel's close button exactly;
   this class just controls when it's visible. */
.dealer-sidebar-close { display: none; }

.dealer-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-light) transparent;
}

/* ---------------------------------------------------------------------
   Search / locate toolbar — sits above the dealer list. "Search" filters
   the list (and the map pins) by address; "Locate" recenters the map on
   the visitor's device location and drops a distinct "you are here" pin
   (see .user-location-marker below). Both are wired in dealers.astro's
   own <script>.
   --------------------------------------------------------------------- */
.dealer-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: calc(var(--header-height) - 50px);
  background: #0e21c9;
  z-index: 2;
  padding: 12px 12px;
  border-bottom: 1px solid var(--steel);
  margin-left: -21px;
  margin-right: -4px;
  margin-top: -2px;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.dealer-toolbar-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dealer-results-count {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--white-text);
}
.dealer-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-text);
  cursor: pointer;
}
.dealer-reset-btn:hover { color: var(--accent-light); }

.dealer-search-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.dealer-search-input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.dealer-search-input:focus { outline: 3px solid var(--accent-light); box-shadow: var(--shadow-md); }
.dealer-search-btn,
.dealer-locate-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dealer-search-btn {
  border: none;
  background: var(--white-text-faint);
  color: #ffffff;
}
.dealer-search-btn:hover { background: var(--accent-light); }
.dealer-locate-btn {
  position: relative;
  border: 1px solid #0e21c9;
  background: #ffffff;
  color: #0e21c9;
}
.dealer-locate-btn:hover {background: var(--accent-light); color: var(--white-text); border-color: var(--accent-light);}
.dealer-locate-btn.is-loading { background: var(--accent-soft); }
.dealer-locate-btn.is-loading svg { animation: dealer-locate-spin 0.9s linear infinite; }
@keyframes dealer-locate-spin {
  to { transform: rotate(360deg); }
}

/* Simple hover tooltip ("Recenter map") driven by data-tooltip — no
   extra markup needed. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--text);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dealer-locate-status {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}
.dealer-locate-status[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Collapsible dealer list — each card is a single-row toggle (name +
   distance + chevron) that expands to reveal address / direction link /
   phone / badges. Re-rendered from JS on every search/sort/locate (see
   renderDealerList() in dealers.astro), so all markup below reflects
   what the script builds.
   --------------------------------------------------------------------- */
.dealer-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 10px;
}

.dealer-card {
  background: var(--bg-panel-alt);
  border: 0px solid var(--steel);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  scroll-margin-top: 12px;
}
/* Highlighted state applied by dealers.astro's script when its matching
   map pin is clicked, or its card toggle is opened. */
.dealer-card.is-active {
  background-color: var(--accent-soft);
  border: 0px solid var(--accent);
}

.dealer-card-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.dealer-card-toggle:hover { background: var(--accent-soft); }
.dealer-card-toggle:focus-visible { 
  border: 2px solid var(--accent-light);
  outline-offset: 5px; 
  background: var(--bg-panel-alt); 
}
.dealer-card-toggle-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dealer-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.dealer-card-distance {
  font-size: 12px;
  color: var(--text-faint);
}
.dealer-card-toggle .chevron {
  flex: 0 0 auto;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.dealer-card.is-expanded .dealer-card-toggle .chevron { transform: rotate(180deg); }

.dealer-card-details {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--steel);
  padding-top: 14px;
}
.dealer-card-details[hidden] { display: none; }
.dealer-card-details .dealer-line {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
}
.dealer-card-details .dealer-line svg { flex-shrink: 0; margin-top: 2px; color: var(--text-faint); }
.dealer-card-details .dealer-line a { color: inherit; }
.dealer-direction-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  margin: 2px 0 12px;
}
.dealer-direction-link:hover { color: var(--text); }
.dealer-card-details .badges { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dealer-badge {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--bg-plate);
  color: var(--text-faint);
  border: 1px solid var(--steel);
}

/* ---------------------------------------------------------------------
   "You are here" pin — a plain Leaflet divIcon (see dealers.astro),
   styled here since Leaflet renders it outside any scoped component
   style. Distinct from the default red dealer pins.
   --------------------------------------------------------------------- */
.user-location-marker { position: relative; }
.user-location-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
  z-index: 1;
}
.user-location-pulse {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.35);
  animation: user-location-pulse 1.8s ease-out infinite;
}
@keyframes user-location-pulse {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.popup-info-btn {
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.popup-info-btn:hover { background: var(--accent-soft); }

/* ---------------------------------------------------------------------
   Direction chooser — mobile only (see IS_MOBILE_OS in dealers.astro).
   Reuses the site's #overlayBackdrop, same fixed-bottom-sheet pattern as
   the cart drawer / quick-order modal.
   --------------------------------------------------------------------- */
.direction-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--steel);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-md);
  padding: 8px 20px 28px;
  z-index: 902;
  transform: translateY(100%);
  transition: transform 0.28s ease;
}
.direction-sheet.is-open { transform: translateY(0); }
.direction-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px;
}
.direction-sheet-head h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.direction-sheet-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.direction-option {
  display: block;
  padding: 13px 16px;
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text);
  text-align: center;
}
.direction-option:hover { border-color: var(--accent); color: var(--accent); }
 

/* -------------------------------------------------------------------------
   11. CONTACT / BE-A-DEALER FORM
   ------------------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 56px 20px 100px;
  align-items: start;
}
.form-card {
  background: var(--accent-soft);
  border: 0px solid var(--steel);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 0px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  resize: vertical;
  box-shadow: var(--shadow-sm);
}
.form-row input:focus,
.form-row textarea:focus { outline: 3px solid var(--accent-light); box-shadow: var(--shadow-md); }
.form-row textarea { min-height: 190px; }

.rfq-summary-box {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  resize: vertical;
  white-space: pre-wrap;
}

.form-side h2 { font-size: 22px; margin-bottom: 14px; }
.info-line {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--text-dim);
}
.info-line svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.form-success {
  display: none;
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--text);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-top: 20px;
}
.form-success.show { display: block; }

.form-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 8px;
}

/* -------------------------------------------------------------------------
   12. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .section{ padding: 12px 0; }
  .section-head { margin-bottom: 12px;}
  .hero-grid,
  .form-layout { grid-template-columns: 1fr; }

  .catalog-layout { grid-template-columns: 1fr; }

  /* ---- Mobile filters panel: full-screen modal takeover ----
     Replaces the old inline/static "floating" placement — .filters-panel
     is now fixed full-viewport, hidden off-screen until #filterToggleBtn
     (in .results-toolbar below) adds .is-open, sharing .overlay-backdrop
     with the cart drawer / quick-order modal (same z-index convention:
     backdrop 900, panel 901 — see section 8). Closed via
     #filtersPanelClose, Escape, or tapping the backdrop. */
  .filters-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: max-content;
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    z-index: 901;
    transform: translateX(100%);
    transition: transform 0.28s ease;
  }
  .filters-panel.is-open { transform: translateX(0); }

  /* "x" is reserved for desktop (there is none here, so this just stays
     hidden); .panel-back-btn (shared with the dealer list and quote
     cart) is the mobile close affordance instead. Switches off
     space-between so the title sits right next to the back arrow rather
     than getting pushed to the far edge once the "x" is gone — "Clear
     All" (.filters-panel-head-actions) gets pushed to the right instead,
     via margin-left: auto, whenever it's actually visible. */
  .filters-panel-head { justify-content: flex-start; }
  .filters-panel-close { display: none; }
  .panel-back-btn { display: inline-flex; }
  .cart-drawer-head .panel-back-btn { display: none; }
  .filters-panel-head-actions { margin-left: auto; }

  .active-filters-panel { display: flex; }
  .active-filters-panel:empty { display: none; }

  .catalog-panel-a { order: 2; }

  /* ---- Results toolbar (result count / sort / filter button) ----
     No longer sticky — .floating-filter-btn (see below) takes over as
     the reachable "open filters" affordance once this scrolls out of
     view, so there's no need to pin the whole toolbar (with its sort
     dropdown) to the top of the viewport while scrolling the grid. */
  .results-toolbar {
    background: var(--bg-asphalt);
    padding: 15px 3vw;
    margin-left: -3vw;
    margin-right: -3vw;
    margin-bottom: 14px;
    border-bottom: 0px solid var(--steel);
  }

  .sort-control label {display: none;}
  .sort-control select {
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--steel-light);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0;
    width: 170px;
  }
  .sort-control select:focus { border: 1px solid var(--steel-light); color: var(--text); }
  .sort-control select:hover, .sort-control select:focus-visible { border-color: var(--accent-light); color: var(--accent-light); box-shadow: none;}


  .filter-toggle-btn { display: inline-flex; }

  /* ---- Floating filter button — the sticky toolbar's replacement ----
     Fixed just below the header, semi-transparent so it sits unobtrusively
     over whatever product card scrolls underneath it. Hidden by default;
     .is-visible (toggled by the IntersectionObserver in cart.js's
     initCatalogPage()) is what actually shows it once .results-toolbar
     has scrolled out of view. Desktop never sees this at all — the panel
     sits inline there and .results-toolbar is easily reachable, sticky or
     not. */
  .floating-filter-btn {
    position: fixed;
    top: calc(var(--header-height-mobile, 54px) + 12px);
    right: -1px;
    justify-self: flex-end;
    z-index: 399; /* just under .results-toolbar's old 400, and under the panel/backdrop at 900+ */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50% 0 0 50%;
    border: 1px solid #8f8f8f;
    background: rgba(233, 233, 233, 0.55);
    backdrop-filter: blur(3px);
    color: #000000;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .floating-filter-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .floating-filter-btn:hover { background: var(--accent-light); }
  .floating-filter-btn svg { pointer-events: none; }

  .filter-group h4{ margin-left: -2vw; clip-path: none; }

  .feature-strip { grid-template-columns: 1fr 1fr; }

  .category-strip { grid-template-columns: repeat(2, 1fr); }

  /* UPDATED: product grid steps down to 3-across before the mobile breakpoint */
  .product-grid,
  .product-grid--featured { grid-template-columns: repeat(3, 1fr); }


  /* ---- Mobile dealers page: map-primary view with a slide-out dealer
     list drawer, same full-screen-drawer pattern as .filters-panel on
     the catalog page (open/close wired by cart.js's
     openDealerList()/closeDealerList()). ---- */
  .dealers-layout { grid-template-columns: 1fr; padding-top: 24px; gap: 0; }

  .dealer-mobile-toolbar { display: flex; }

  /* Map is now the primary element on screen — let it fill most of the
     viewport instead of the old fixed 340px strip. */
  .dealer-map { min-height: 70vh; }

  .dealer-sidebar {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-panel);
    z-index: 901;
    transform: translateX(101%);
    transition: transform 0.28s ease;
    border-radius: 0;
  }
  .dealer-sidebar.is-open { transform: translateX(0); }

  .dealer-sidebar-head { display: flex; justify-content: flex-start; margin: 0 -24px 2px;}
  /* "x" is desktop-only elsewhere (the cart drawer); this panel never
     shows it on mobile — .panel-back-btn takes over instead. */
  .dealer-sidebar-close { display: none; }

  .dealer-sidebar-body {
    max-height: none;
    height: 100%;
    padding: 0 10px 24px 0;
  }
  .dealer-sidebar-body h3 { font-size: 14px; }
  .dealer-toolbar { border-radius: 0; padding: 20px; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--steel);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;
    display: none;
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }

  .feature-strip { grid-template-columns: 1fr; }

  .category-strip { grid-template-columns: repeat(2, 1fr); }

  /* UPDATED: product grid holds at a MINIMUM of 2-across on mobile,
     per the spec — it never collapses to a single column. */
  .product-grid,
  .product-grid--featured { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .hero { padding: 60px 0; }
  .hero-stats { gap: 22px; flex-wrap: wrap; }

  .parent-category-grid .container{
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-layout{ grid-template-columns: 1fr; }
  .detail-info .btn { display:inline-flex; width: 91vw; max-width: 750px;}  

  /* ---- Mobile quote cart: full-screen takeover ----
     Same pattern as .filters-panel / .dealer-sidebar above — fills the
     viewport instead of the desktop 420px side panel, and swaps its "x"
     for .panel-back-btn at the top-left. */
  .cart-drawer {
    top: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    border-left: none;
    transform: translateX(101%);
    transition: transform 0.28s ease;
  }
  .cart-drawer.open { transform: translateX(0); }
  .cart-drawer-head { justify-content: flex-start; }
  .cart-drawer-close { display: none; }
  .cart-drawer-head .panel-back-btn { display: inline-flex; }
}

@media (max-width: 485px) {
  .container{
    padding: 20px 14px;
  }
  .catalog-layout {
    padding: 0 0 50px;
  }
  .results-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "count     ."
      "sort filter";
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
    margin-top: -4vh;
  }
  .results-count { grid-area: count; font-size: 10px; }
  .toolbar-controls { display: contents; }
  .filter-toggle-btn { grid-area: filter; justify-self: end; width: 100%; }
  .sort-control { grid-area: sort; display: flex; flex-direction: column; }
  .sort-control label { font-size: 10px; }
  .sort-control label { font-size: 10px; }
  .sort-control select { font-size: 12px; padding: 7px 12px; width: 100%; box-sizing: border-box; }
  
  .filter-pill{
    font-size: 10px;
  }

  .product-grid { gap: 14px; scroll-margin-top: 200px; }

  .product-card .card-body { padding: 4px;}
  .product-card .card-body h3 {
    font-size: 14px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
  }
  .product-card .card-body-catalog { padding: 8px; gap: 10px; }

  .part-type-tag { font-size: 8px; padding: 2px 4px; }

  .form-layout{ padding: 40px 12px 50px;}
  .form-card { padding: 20px 20px 30px; }
}

@media (max-width: 360px) {
  .results-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "count"
      "filter"
      "sort";
  }

  .product-grid { grid-template-columns: repeat(1, 1fr); }
}html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(to right, #fff 0% 20%, #f0f0f0 65%, #eee 100%);
  background-attachment: fixed;
}

@media (width <= 960px) {
  html, body {
    background-image: none;
  }
}