/* === Spectrum Industries — global responsive stylesheet ===
   Mobile-first. <=640 = mobile, 641-1024 = tablet, >=1025 = desktop.
   Brand blue #204481. Accent amber ~#f5b800. */

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

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video, svg { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* === Tokens === */
:root {
  --brand: #204481;
  --brand-dark: #16315c;
  --brand-darker: #0e2347;
  --brand-light: #e6ecf6;
  --amber: #f5b800;
  --amber-dark: #d99e00;
  --text: #1d232a;
  --text-muted: #1d232a; /* same as --text; kept as a variable so existing rules don't need to be edited */
  --text-light: rgba(255,255,255,0.85);
  --border: #e2e6eb;
  --border-soft: #eef0f3;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --bg-softer: #fafbfc;
  --bg-dark: #16315c;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 29, 58, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 29, 58, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 29, 58, 0.12);
  --container: 1240px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* === Base === */
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--text); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin-bottom: 0.75em; }
a:hover { color: var(--brand); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1025px) {
  .container { padding: 0 32px; }
}

.ohnohoney {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s, transform 0.05s, box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
  border: 0;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-amber {
  background: var(--amber);
  color: #1d232a;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.btn-amber:hover { background: var(--amber-dark); color: #1d232a; }
.btn-amber:active { transform: translateY(1px); }
.btn-dark {
  background: var(--brand);
  color: #fff;
}
.btn-dark:hover { background: var(--brand-darker); color: #fff; }
.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.btn-outline:hover { background: var(--brand); color: #fff; }
/* Outline-light: solid white pill on dark backgrounds (e.g. the hero "Contact Us" button). */
.btn-outline-light {
  background: #fff;
  color: var(--brand);
  border: 1.5px solid #fff;
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--brand);
}
.btn-ghost {
  background: var(--bg-soft);
  color: var(--text);
  border-radius: var(--radius);
}
.btn-ghost:hover { background: var(--brand-light); }
.btn-block { width: 100%; }
.btn.is-added { background: #2e7d4f; color: #fff; }

.btn-doc-icon {
  width: 16px; height: 16px;
  display: inline-block;
  background: linear-gradient(180deg, currentColor 0%, currentColor 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M14 2v6h6' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><path d='M14 2v6h6' fill='none' stroke='black' stroke-width='2'/></svg>") center/contain no-repeat;
}

/* === Header utility strip (top dark band, desktop only) === */
/* Utility strip removed per design — phone/email/socials live in the header bar only. */

/* === Header === */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
@media (min-width: 1025px) {
  .site-header__bar { padding: 16px 32px; gap: 18px; }
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img {
  height: 38px;
  width: auto;
}
@media (min-width: 1025px) {
  .site-header__logo img { height: 50px; }
}

.site-header__search {
  display: none;
  flex: 1;
}
.site-header__search form {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.site-header__search input {
  width: 100%;
  padding: 11px 44px 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
}
.site-header__search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32,68,129,0.12);
}
.site-header__search button {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.site-header__search button:hover { background: var(--bg-soft); }

.site-header__contact {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.site-header__contact strong { color: var(--brand); font-weight: 700; }
.site-header__contact a { color: var(--brand); }

.site-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.site-header__cart:hover { background: var(--brand-dark); color: #fff; }
.site-header__cart .cart-icon {
  width: 18px; height: 18px;
  display: inline-block;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>") center/contain no-repeat;
  background: currentColor;
}
.site-header__cart-label { display: none; }
@media (min-width: 641px) { .site-header__cart-label { display: inline; } }
.site-header__cart .cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--amber);
  color: #1d232a;
  border-radius: 999px;
}

.site-header__lang {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.site-header__flag {
  width: 22px; height: 14px;
  background: linear-gradient(
    to bottom,
    #b22234 0, #b22234 14.3%,
    #fff 14.3%, #fff 28.5%,
    #b22234 28.5%, #b22234 42.8%,
    #fff 42.8%, #fff 57.1%,
    #b22234 57.1%, #b22234 71.4%,
    #fff 71.4%, #fff 85.7%,
    #b22234 85.7%, #b22234 100%
  );
  border-radius: 2px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.site-header__flag::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 9px; height: 7px;
  background: #3c3b6e;
}
.site-header__lang-caret { font-size: 0.7rem; color: var(--text-muted); }
@media (min-width: 1025px) {
  .site-header__search { display: block; }
  .site-header__contact { display: flex; }
}

.hamburger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  margin-left: auto;
}
.hamburger:hover { background: var(--bg-soft); }
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  position: relative;
}
.hamburger span::before { position: absolute; top: -7px; }
.hamburger span::after { position: absolute; top: 7px; }
@media (min-width: 1025px) { .hamburger { display: none; } }

/* Primary nav bar */
.site-nav {
  background: #fff;
  color: var(--brand);
  display: none;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.site-nav.is-open { display: block; }
.site-nav__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}
/* Scoped to the direct child <ul> so the language dropdown's <ul.site-nav__lang-menu>
   (which is nested inside .site-nav__lang) isn't matched. Without the > the main-list
   rule would override the dropdown's `display: none` via specificity (0,1,1 vs 0,1,0). */
.site-nav__inner > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-nav__inner > ul a {
  display: block;
  padding: 14px 16px;
  color: var(--brand);
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav__inner > ul a:hover { background: var(--bg-soft); color: var(--brand-dark); }
.site-nav__lang {
  display: none;
  position: relative;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text);
}
.site-nav__lang-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font: inherit;
  color: inherit;
}
.site-nav__lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 50;
}
.site-nav__lang.is-open .site-nav__lang-menu { display: block; }
.site-nav__lang-menu li a {
  display: block;
  padding: 8px 14px;
  color: var(--text);
}
.site-nav__lang-menu li a:hover { background: var(--bg-soft); color: var(--brand); }
@media (min-width: 1025px) {
  .site-nav { display: block; }
  .site-nav__inner {
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
  }
  .site-nav__inner > ul {
    flex-direction: row;
    gap: 4px;
  }
  .site-nav__inner > ul a {
    border-bottom: 0;
    padding: 14px 22px;
    font-size: 0.95rem;
  }
  .site-nav__lang { display: inline-flex; }
}

/* === Section heads === */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}
.section-head--left {
  text-align: left;
  margin-left: 0;
  max-width: 820px;
}
.section-title {
  margin-bottom: 12px;
  color: var(--text);
}
.section-title em {
  color: var(--brand);
  font-style: italic;
}
.section-intro {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}

/* === HOME: Hero === */
.home-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #1d3b6e;  /* fallback if image fails to load */
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 460px;
}
/* Dark gradient overlay on the LEFT side for text contrast.
   Fades to transparent on the right so the transformer image stays visible. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 30, 60, 0.92) 0%,
    rgba(15, 30, 60, 0.78) 35%,
    rgba(15, 30, 60, 0.30) 65%,
    rgba(15, 30, 60, 0.05) 100%
  );
  z-index: 1;
}
.home-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  padding-bottom: 60px;
}
.home-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 580px;
}
.home-hero__title {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  margin-bottom: 18px;
  font-weight: 700;
}
.home-hero__title em {
  font-style: normal;
  color: var(--amber);
}
.home-hero__sub {
  color: rgba(255,255,255,0.82);
  font-size: 1.02rem;
  margin-bottom: 26px;
  max-width: 540px;
}
.home-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
.stat-card {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 18px 20px;
  backdrop-filter: blur(8px);
}
.stat-card__num {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card__lbl {
  color: rgba(255,255,255,0.85);
  font-size: 0.88rem;
  line-height: 1.4;
}
.home-hero__cta { padding: 13px 30px; font-size: 0.98rem; }
.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (min-width: 641px) {
  .home-hero__stats { grid-template-columns: 1fr 1fr; max-width: 540px; }
}
@media (min-width: 1025px) {
  .home-hero__inner {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .home-hero { min-height: 540px; }
}

/* === HOME: Trust reasons === */
.trust-reasons {
  background: var(--bg-softer);
  padding: 48px 0;
}
@media (min-width: 1025px) { .trust-reasons { padding: 72px 0; } }
.trust-reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 48px;
}
.trust-reasons__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  padding: 22px 22px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
}
.trust-reasons__icon {
  width: 75px;
  height: 75px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-reasons__icon img {
  width: 75px;
  height: 75px;
  filter: brightness(0) saturate(100%) invert(20%) sepia(38%) saturate(1635%) hue-rotate(199deg) brightness(94%) contrast(94%);
}
.trust-reasons__text { flex: 1; min-width: 0; }
.trust-reasons__title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.trust-reasons__body {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 641px) { .trust-reasons__grid { grid-template-columns: repeat(3, 1fr); } }

/* === HOME: Trust logo strip === */
.trust-logo-strip { text-align: center; }
.trust-logo-strip__lead {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 20px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.trust-logo-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 32px;
}
.trust-logo-strip__row img {
  max-height: 42px;
  width: auto;
  filter: grayscale(0.4);
  opacity: 0.85;
  transition: filter 0.2s, opacity 0.2s;
}
.trust-logo-strip__row img:hover { filter: none; opacity: 1; }
@media (min-width: 1025px) { .trust-logo-strip__row { gap: 36px; } }

/* === HOME: Browse categories === */
.browse-categories {
  padding: 48px 0;
  background: var(--bg-soft);
}
@media (min-width: 1025px) { .browse-categories { padding: 80px 0; } }

.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 30px;
}
@media (min-width: 641px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1025px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
  color: var(--text);
}
.cat-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  color: var(--text);
}
.cat-card__img {
  aspect-ratio: 16 / 11;
  background: #fff;
  overflow: hidden;
}
.cat-card__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.cat-card:hover .cat-card__img img { transform: scale(1.04); }
.cat-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--border-soft);
}
.cat-card__title {
  color: var(--brand);
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.cat-card__text {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 16px;
  flex: 1;
}
.cat-card__more {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cat-card__arrow { transition: transform 0.2s; }
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }

/* Legacy alias so other templates keep working */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 641px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1025px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.category-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.category-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-card__img { aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.category-card__img img { width: 100%; height: 100%; object-fit: contain; }
.category-card__body { padding: 18px 20px 20px; }
.category-card__title { color: var(--brand); font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.category-card__text { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 14px; }
.category-card__more { color: var(--brand); font-weight: 600; }

.product-card {
  display: flex; flex-direction: column;
  gap: 14px;
  color: var(--text);
}
/* Bulletproof 4:3 card tile: padding-bottom trick + absolute-positioned
   image. `aspect-ratio` with flex + a child image was sometimes letting
   the intrinsic image size affect the container box, producing uneven
   tile heights across the grid. This approach cannot: the child img
   is out of flow, so it can't push the container. */
.product-card__img {
  position: relative;
  width: 100%;
  padding-bottom: 90%;   /* height = width × 0.90 */
  flex-shrink: 0;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.product-card:hover .product-card__img {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.product-card__img img {
  position: absolute;
  inset: 16px;                 /* 16px padding on every side */
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
}
.product-card__title {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.4;
}
.product-card:hover .product-card__title { color: var(--brand); }

/* === HOME: In-demand carousel + spotlight === */
.in-demand {
  background: var(--bg-softer);
  padding: 48px 0;
}
@media (min-width: 1025px) { .in-demand { padding: 80px 0; } }

.spotlight {
  display: grid;
  gap: 26px;
  margin-top: 28px;
  /* minmax(0, 1fr) instead of implicit `auto, 1fr` — otherwise the column
     grows to fit the widest child (the ~1300px carousel of 12 thumbs) and
     pushes the homepage past the viewport on mobile. With `0` as the min,
     the column is capped at 1fr and the carousel's own overflow-x scrolls
     internally instead. */
  grid-template-columns: minmax(0, 1fr);
}

.spotlight-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.spotlight-carousel__arrow {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--brand);
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.spotlight-carousel__arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (min-width: 641px) { .spotlight-carousel__arrow { display: inline-flex; } }

.spotlight-carousel__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  flex: 1;
  /* min-width: 0 lets the flex child shrink below its intrinsic content size —
     without this, ~12 100px thumbs push the track (and the whole homepage)
     wider than the mobile viewport instead of scrolling inside the track. */
  min-width: 0;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  /* Center thumbs when they don't fill the track width. `safe` falls back to
     start-alignment if the row overflows — otherwise centering would push the
     first thumb off-screen and it couldn't be scrolled back to. */
  justify-content: safe center;
}
.spotlight-thumb {
  flex: 0 0 100px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  border: 0;
}
.spotlight-thumb__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--border-soft);
  border-radius: 5px;
  padding: 3px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.spotlight-thumb__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spotlight-thumb__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  order: -1;  /* fallback in case markup order ever changes */
}
.spotlight-thumb:hover .spotlight-thumb__img-wrap { border-color: var(--brand); }
.spotlight-thumb.is-active .spotlight-thumb__img-wrap {
  border-color: var(--brand);
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(32,68,129,0.12);
}

.spotlight-panel {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
}
/* Decorative arrow line drawn from the left edge of each feature toward the
   image column. Hidden on mobile/tablet where the panel stacks vertically. */
.spotlight-feature { position: relative; }
.spotlight-feature__arrow {
  display: none;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
  pointer-events: none;
}
@media (min-width: 1025px) {
  .spotlight-feature__arrow { display: block; }
  .spotlight-feature:nth-child(1) .spotlight-feature__arrow { width: 25%; }
  .spotlight-feature:nth-child(2) .spotlight-feature__arrow { width: 45%; }
  .spotlight-feature:nth-child(3) .spotlight-feature__arrow { width: 35%; }
}
.spotlight-panel__head { margin-bottom: 24px; }
.spotlight-panel__title {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--text);
}
.spotlight-panel__title::after {
  content: ' \2014  GE';
  display: none;
}
.spotlight-panel__sub { color: var(--brand); margin-top: 6px; }

.spotlight-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
}
.spotlight-panel__media {
  background: #fff;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.spotlight-panel__media img { width: 100%; height: auto; object-fit: contain; }
.spotlight-panel__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.spotlight-features {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 18px;
}
.spotlight-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.spotlight-feature__num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
  margin-top: 2px;
}
.spotlight-feature__title {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 4px;
}
.spotlight-feature__body { color: var(--text-muted); font-size: 0.92rem; }

.spotlight-panel__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}
@media (min-width: 1025px) {
  .spotlight-panel { padding: 36px; }
  .spotlight-panel__grid { grid-template-columns: 1.1fr 1fr; gap: 48px; }
}

/* === HOME: Amber CTA strip === */
.amber-strip {
  /* Background image comes from the Home entry's ctaBannerImage field via the
     --cta-banner-bg CSS var (set inline on the section). Amber tint is layered
     on top for legibility. */
  background:
    linear-gradient(rgba(232, 174, 42, 0.85), rgba(232, 174, 42, 0.85)),
    var(--cta-banner-bg, url('/assets/home/rectangle-2240.png')) center/cover no-repeat,
    var(--amber) !important;
  color: #fff;
  padding: 32px 0;
  position: relative;
}
.amber-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.amber-strip__title {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: #fff;
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}
.amber-strip .btn-dark {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  padding: 11px 22px;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.amber-strip__btn-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}
.amber-strip .btn-dark:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
@media (min-width: 768px) {
  .amber-strip__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* === HOME: About section === */
.about-section {
  padding: 48px 0;
  background: #fff;
}
@media (min-width: 1025px) { .about-section { padding: 80px 0; } }
.about-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1025px) {
  .about-section__grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.about-welcome {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
}
.about-welcome__media {
  position: absolute;
  inset: 0;
}
.about-welcome__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-welcome__overlay {
  position: absolute;
  left: 0; bottom: 0;
  width: 65%;
  padding: 22px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0.6) 100%);
  border-top-right-radius: var(--radius-xl);
}
.about-welcome__overlay-text {
  color: var(--text);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.3;
}
.about-welcome__overlay-text strong {
  display: block;
  color: var(--brand);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  margin-top: 4px;
}
/* Trigger button covers the whole video area — thumbnail + overlay text
   nested inside so the whole surface is clickable. */
.about-welcome__trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
/* Centered white play button matching the About Us page. */
.about-welcome__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background 0.2s;
}
.about-welcome__trigger:hover .about-welcome__play {
  transform: scale(1.08);
  background: #fff;
}
.about-welcome__play svg { width: 32px; height: 32px; margin-left: 4px; }

/* Video swap target — video-embed.js unhides this and injects a
   <video> or YouTube <iframe> when the play button is clicked. */
.about-welcome__target {
  position: absolute;
  inset: 0;
  background: #000;
}
.about-welcome__target video,
.about-welcome__target iframe { width: 100%; height: 100%; display: block; }

.about-copy { color: var(--text); }
.about-copy__body { color: var(--text-muted); margin-bottom: 18px; }
.about-copy__body p { margin-bottom: 1em; }
.about-copy__cta { margin-top: 8px; }

.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.45;
}
.check-list li::before {
  content: '';
  width: 18px; height: 18px;
  flex-shrink: 0;
  background: url('/assets/home/essentials-check5.svg') center/contain no-repeat;
  margin-top: 2px;
}
.check-list--light li { color: rgba(255,255,255,0.92); }
.check-list--light li::before {
  background: url('/assets/home/essentials-check0.svg') center/contain no-repeat;
  filter: brightness(0) invert(1);
}

/* === Specialists banner (browse-categories, above the contact hero) === */
.specialists-banner {
  padding: 32px 0;
  background: transparent;
}
.specialists-banner__inner {
  position: relative;
  padding: 44px 48px;
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
  overflow: hidden;
  /* Same technician photo used by the contact hero, tinted blue for legibility. */
  background:
    linear-gradient(rgba(22, 49, 92, 0.88), rgba(22, 49, 92, 0.88)),
    url('/assets/home/frame-17074833080.png') center/cover no-repeat;
}
.specialists-banner__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.specialists-banner__sub {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 900px;
  margin: 0 auto 22px;
}
.specialists-banner__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}
.specialists-banner__contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
.specialists-banner__contact:hover { color: rgba(255,255,255,0.85); }
.specialists-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
  flex-shrink: 0;
}
.specialists-banner__icon svg { width: 20px; height: 20px; }
.specialists-banner__cta {
  background: #fff;
  color: var(--brand);
  padding: 12px 32px;
  font-weight: 600;
  border: 0;
  display: inline-block;
}
.specialists-banner__cta:hover {
  background: rgba(255,255,255,0.9);
  color: var(--brand);
}
@media (max-width: 640px) {
  .specialists-banner__inner { padding: 32px 24px; }
  .specialists-banner__contacts { gap: 16px; }
}

/* === Newsletter block ("Stay Connected with Spectrum") =================
   Full-width soft-gray section used on the contact page and anywhere else
   that wants a compact newsletter signup. Copy + form on the left, envelope
   illustration on the right. Falls back to a single column on mobile. */
.newsletter-block {
  padding: 40px 0;
  background: transparent;
}
.newsletter-block__inner {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .newsletter-block__inner {
    grid-template-columns: 1fr 180px;
    padding: 40px 48px;
    gap: 40px;
  }
}
.newsletter-block__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.newsletter-block__title em {
  font-style: normal;
  color: var(--brand);
}
.newsletter-block__sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 620px;
}
.newsletter-block__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  max-width: 520px;
}
.newsletter-block__form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.95rem;
}
.newsletter-block__form input[type="email"]:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32, 68, 129, 0.15);
}
.newsletter-block__form .btn { padding: 12px 22px; }
.newsletter-block__illustration {
  justify-self: center;
  width: 100%;
  /* max-width lives on the wrapper (not the svg) so the svg's `width: 100%`
     has a real reference frame — otherwise mobile browsers fall back to the
     svg's viewBox intrinsic size and the icon renders huge. */
  max-width: 88px;
}
@media (min-width: 900px) {
  .newsletter-block__illustration { max-width: 160px; }
}
.newsletter-block__illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

/* === HOME: Contact hero (Discover the Difference) === */
.contact-hero {
  /* Layer stack: photo behind, blue gradient overlay in front for legibility.
     The source PNG already has a blue tint baked in; the gradient darkens it
     just enough that white text and the form still read cleanly. */
  background:
    linear-gradient(135deg, rgba(22, 49, 92, 0.1) 0%, rgba(29, 59, 110, 0.85) 60%, rgba(36, 75, 138, 0.1) 100%),
    url('/assets/home/frame-17074833080.png') center/cover no-repeat;
  color: #fff;
  padding: 56px 0;
  position: relative;
}
@media (min-width: 1025px) { .contact-hero { padding: 80px 0; } }
.contact-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 1025px) {
  .contact-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 60px; }
}
.contact-hero__title {
  color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 22px;
}
.contact-hero__sub {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  margin-top: 18px;
  max-width: 480px;
}

.contact-hero__form-wrap {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
@media (min-width: 1025px) { .contact-hero__form-wrap { padding: 32px; } }

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form__title {
  color: var(--text);
  font-size: 1.4rem;
  margin: 0 0 4px;
}
.contact-form__row { display: flex; flex-direction: column; gap: 14px; }
.contact-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32,68,129,0.12);
}
.form-error {
  color: #aa0808;
  font-size: 0.9rem;
  margin-top: 8px;
  min-height: 1em;
}

.contact-form__captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f9f9f9;
  font-size: 0.85rem;
}
.contact-form__captcha-box {
  width: 22px; height: 22px;
  border: 2px solid #c1c1c1;
  border-radius: 3px;
  background: #fff;
  flex-shrink: 0;
}
.contact-form__captcha-label { flex: 1; color: var(--text); }
.contact-form__captcha-logo {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* === HOME: Inventory strip === */
.inventory-strip {
  background: var(--bg-softer);
  padding: 32px 0;
  border-top: 1px solid var(--border-soft);
}
.inventory-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.inventory-strip__copy { }
.inventory-strip__eyebrow {
  color: var(--brand);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.inventory-strip__title {
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin: 0;
  line-height: 1.3;
}
.inventory-strip__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.inventory-strip__icon {
  position: relative;
  width: 88px;
  height: 64px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.inventory-strip__rows {
  height: 4px;
  background: linear-gradient(90deg, var(--brand) 30%, var(--border) 30%);
  border-radius: 2px;
  display: block;
}
.inventory-strip__rows:nth-child(2) {
  background: linear-gradient(90deg, var(--brand) 60%, var(--border) 60%);
}
.inventory-strip__rows:nth-child(3) {
  background: linear-gradient(90deg, var(--brand) 45%, var(--border) 45%);
}
.inventory-strip__badge {
  position: absolute;
  right: -10px;
  top: -8px;
  background: #2e7d4f;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
@media (min-width: 768px) {
  .inventory-strip__inner {
    grid-template-columns: 1fr auto;
    gap: 36px;
  }
  .inventory-strip__action {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
}
@media (min-width: 1025px) { .inventory-strip { padding: 48px 0; } }

/* === Footer === */
.site-footer {
  background: #fff;
  color: var(--text);
  padding: 48px 0 18px;
  margin-top: 0;
  border-top: 1px solid var(--border-soft);
}
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--brand); }
.site-footer__cols {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
.site-footer__col h4 {
  color: var(--brand);
  font-size: 1rem;
  margin-bottom: 14px;
  font-weight: 700;
}
.site-footer__col--brand .site-footer__logo img {
  max-height: 56px;
  margin-bottom: 16px;
}
.site-footer__address { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); }
.site-footer__address strong { color: var(--text); font-weight: 700; }
.site-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-light);
  border-radius: 999px;
  transition: background 0.2s;
}
.site-footer__social a:hover { background: var(--amber); }
.site-footer__social img { width: 16px; height: 16px; }
.site-footer__social svg { width: 16px; height: 16px; display: block; }
.site-footer__col ul li { margin-bottom: 10px; font-size: 0.92rem; }

.site-footer__col--subscribe { }
.site-footer__subscribe-copy {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.site-footer__subscribe { display: flex; flex-direction: column; gap: 10px; }
.site-footer__subscribe input {
  padding: 11px 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
}
.site-footer__subscribe input::placeholder { color: var(--text-muted); }
.site-footer__subscribe input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.site-footer__subscribe button {
  padding: 11px 16px;
  background: var(--amber);
  color: #1d232a;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.92rem;
}
.site-footer__subscribe button:hover { background: var(--amber-dark); }

.site-footer__legal {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  position: relative;
}
.site-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer__top {
  align-self: flex-end;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text);
  font-size: 1rem;
}
.site-footer__top:hover { background: var(--amber); color: #1d232a; border-color: var(--amber); }

@media (min-width: 641px) {
  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1.4fr; }
}
@media (min-width: 1025px) {
  .site-footer__legal { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* === Breadcrumb === */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 14px 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* === Product page === */
.product-hero {
  display: grid;
  gap: 32px;
  padding: 16px 0 32px;
}
.product-hero__main-img {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  aspect-ratio: 1 / 1;
}
.product-hero__main-img img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }

/* Lightbox — click product image to view full-size */
.product-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
}
.product-lightbox.is-open { display: flex; }
.product-lightbox img {
  /* Fill up to 96% of the viewport in both directions so the image is
     dominant on screen. object-fit still preserves aspect ratio. */
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.product-lightbox__close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none; color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.product-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.product-hero__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.product-hero__thumbs img {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}
.product-hero__thumbs img:hover { border-color: var(--brand); }
.product-hero__certs {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}
.product-hero__certs img {
  max-height: 56px;
  width: auto;
  display: block;
}

.product-hero__title {
  color: var(--text);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  margin: 0 0 10px;
}
.product-hero__subtitle {
  color: var(--brand);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.product-hero__body {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.product-hero__body p { margin: 0 0 10px; }
.product-hero__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-hero__features li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--text);
}
.product-hero__check {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #22a06b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.product-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
/* Contact sales inline with qty + Add to Quote per the design. Grows to fill
   any remaining space so the row lays out cleanly on wider breakpoints. */
.product-hero__contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1025px) {
  /* image column ~2/7 (a touch under 30%), text/CTA column the rest — the
     transformer/meter photos don't benefit from a larger footprint, and
     the extra room on the right side keeps specs, options, and CTAs on
     tidy single lines. */
  .product-hero { grid-template-columns: 1fr 2.5fr; gap: 48px; padding: 24px 0 48px; }
}

/* === Product page layout (main + sidebar) === */
.product-page { padding-bottom: 48px; }
.product-layout {
  display: grid;
  gap: 32px;
}
@media (min-width: 1025px) {
  .product-layout { grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
}
/* Grid children default to min-width:auto, which lets wide content
   (variant tables, code blocks) push the whole layout wide. Cap the
   main column so overflow-x on inner containers actually kicks in. */
.product-layout__main { min-width: 0; }

/* === Sidebar panels === */
.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-panel {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 20px;
}
.sidebar-panel__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
.sidebar-panel__body { font-size: 0.9rem; color: var(--text-muted); }
.sidebar-panel__body p { margin: 0 0 12px; }
/* Browse Other Transformers — blue vertical bar on the left, no row dividers. */
.sidebar-panel--browse {
  border: 0;
  padding: 0 0 0 16px;
  background: transparent;
  border-radius: 0;
  border-left: 4px solid var(--brand);
}
.sidebar-panel--browse .sidebar-panel__title {
  color: var(--brand);
  margin-bottom: 14px;
}
.sidebar-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-panel__list a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 0;
}
.sidebar-panel__list a:hover { color: var(--brand); }
.sidebar-panel__chev {
  color: var(--text);
  font-weight: 600;
  margin-left: 8px;
  transition: transform 0.2s, color 0.2s;
}
.sidebar-panel__list a:hover .sidebar-panel__chev {
  color: var(--brand);
  transform: translateX(2px);
}
/* Highlight the sidebar category that contains the current product —
   mirrors .filter-sidebar__cat-link--active on category pages. */
.sidebar-panel__list a.sidebar-panel__list-link--active {
  color: var(--amber);
  font-weight: 700;
}
.sidebar-panel__list a.sidebar-panel__list-link--active:hover { color: var(--amber-dark); }
.sidebar-panel__list a.sidebar-panel__list-link--active .sidebar-panel__chev { color: var(--amber); }

/* My Quote Request panel — same dark navy as before, only renders when cart has items. */
.sidebar-panel--quote {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.sidebar-panel--quote .sidebar-panel__title { color: #fff; }
.sidebar-panel--quote .sidebar-panel__body { color: rgba(255,255,255,0.85); }

/* Need Help — centered icon, big heading, two phone numbers. */
.sidebar-panel--help {
  text-align: center;
  padding: 28px 22px;
}
.sidebar-panel--help .sidebar-panel__help-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.sidebar-panel--help .sidebar-panel__help-icon svg { width: 26px; height: 26px; }
.sidebar-panel__help-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.sidebar-panel__help-text {
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.45;
}
.sidebar-panel__help-phones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-panel__help-phones a {
  color: var(--brand);
  font-size: 1.18rem;
  font-weight: 700;
  text-decoration: none;
}
.sidebar-panel__help-phones a:hover { color: var(--brand-dark); }

/* === Product page contact form === */
.product-contact {
  margin-top: 32px;
  padding: 28px;
  background: var(--bg-soft);
  border-radius: 5px;
}
.product-contact h2 {
  font-size: 1.15rem;
  margin: 0 0 18px;
  color: var(--text);
}
.product-contact__form { display: flex; flex-direction: column; gap: 14px; }

.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.form-field input,
.form-field textarea,
.form-field select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  font-size: 0.95rem;
}
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }

/* === Discover Similar Products === */
.similar-products { margin-top: 48px; }
.similar-products h2 {
  font-size: 1.3rem;
  margin: 0 0 20px;
  color: var(--text);
}
.similar-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) { .similar-products__grid { grid-template-columns: repeat(4, 1fr); } }
.similar-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.similar-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.similar-card__media img { width: 100%; height: 100%; object-fit: contain; }
.similar-card__title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  display: block;
}
.similar-card__title:hover { color: var(--brand); }

/* === Browse Other Transformers (product page, grid of category cards) === */
.browse-other { margin-top: 48px; }
.browse-other h2 {
  font-size: 1.3rem;
  margin: 0 0 20px;
  color: var(--text);
}
.browse-other__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) { .browse-other__grid { grid-template-columns: repeat(4, 1fr); } }
.browse-other__card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.browse-other__card img {
  width: 100%; height: 100%; object-fit: contain;
}
.browse-other__title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  padding: 24px 14px 14px;
  font-weight: 700;
  font-size: 0.95rem;
}

/* === Inventory callout — legacy product-page wrapper preserved for spacing.
   The real callout styles are defined further down (see "Inventory Callout
   (light card, two-tone title, CSV illustration on right)"). === */
.inventory-callout-section { margin-top: 48px; }

/* === Quote page === */
.quote-page__head { margin: 8px 0 24px; }
.quote-page__head h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text);
  margin: 0 0 10px;
}
.quote-page__lead {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 720px;
  margin: 0;
}

/* Legacy .quote-cart wrapper kept for older markup; the new /quote form
   uses .quote-form which contains cart + contact fields as one surface. */
.quote-cart {
  margin-bottom: 28px;
}
.quote-cart__title {
  font-size: 1.15rem;
  margin: 0 0 18px;
  color: var(--text);
}
.quote-cart__list { display: block; }
.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.cart-line-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden;
  background: var(--bg-soft);
}
.cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-title { font-weight: 600; color: var(--text); }
.cart-line-sku { font-size: 0.85rem; color: var(--text-muted); }
.cart-line-qty { display: flex; align-items: center; gap: 6px; }
.cart-line-qty input {
  width: 56px; text-align: center;
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px;
}
.cart-line-qty button {
  cursor: pointer; font-size: 16px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff;
}
.cart-line-remove {
  cursor: pointer; font-size: 18px; color: #c0392b;
  padding: 6px 10px; background: transparent; border: 0;
}
.cart-empty { text-align: center; padding: 32px 0; color: var(--text-muted); }

/* Editable option rows inside a cart line (rendered on /quote by quote-form.js).
   Pin the thumbnail and remove-× to the top so both visually sit in the same
   row as the title, no matter how tall the options / comments area gets. */
.cart-line { align-items: flex-start; padding: 20px 0; }
.cart-line-thumb { align-self: flex-start; }
.cart-line-remove { align-self: flex-start; margin-top: 4px; }
.cart-line-body { display: flex; flex-direction: column; gap: 8px; }
/* Title + qty stepper share the first row of the body per the design. */
.cart-line-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-line-header .cart-line-title { flex: 1; min-width: 0; font-size: 1.05rem; }
/* Qty stepper — force both buttons and input to the same height so the − / +
   glyphs and the number sit on the same baseline. */
.cart-line-qty {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.cart-line-qty button,
.cart-line-qty input {
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text);
  box-sizing: border-box;
}
.cart-line-qty button {
  width: 34px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-line-qty button:hover { background: var(--bg-soft); }
.cart-line-qty input {
  width: 48px;
  text-align: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-line-qty input::-webkit-outer-spin-button,
.cart-line-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line-options { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* Wider label column so long option names + the required "*" stay on one line.
   `max-content` on the label column keeps it snug when labels are short. */
.cart-line-option { display: grid; grid-template-columns: minmax(200px, max-content) 1fr; gap: 12px; align-items: center; }
.cart-line-option__label { white-space: normal; }
.cart-line-option__label .cart-line-option__required { white-space: nowrap; margin-left: 2px; }
@media (max-width: 640px) { .cart-line-option { grid-template-columns: 1fr; } }
/* Bigger thumbnail on the /quote page's detailed cart list. */
.cart-list--detailed .cart-line-thumb { width: 96px; height: 96px; }
.cart-line-option__label {
  font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
}
.cart-line-option__required { color: #c0392b; }
.cart-line-option__select,
.cart-line-option__input,
.cart-line-option__textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  background: #fff; font: inherit; color: var(--text);
}
.cart-line-option__textarea { resize: vertical; min-height: 40px; }
.cart-line-option__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cart-line-option__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.85rem; cursor: pointer; background: #fff;
}
.cart-line-option__chip input { accent-color: var(--brand); }
.cart-line-option__chip:hover { border-color: var(--brand); }
.cart-line-notes { margin-top: 6px; }
.cart-line-notes .cart-line-option__label {
  display: block; margin-bottom: 4px;
}

/* === Quote Thanks card === */
.quote-thanks { padding: 32px 0 64px; }
.quote-thanks__card {
  max-width: 640px;
  margin: 32px auto 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 48px 32px;
  text-align: center;
}
.quote-thanks__icon {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e8f6ef;
  color: #22a06b;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.quote-thanks__card h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  margin: 0 0 12px;
}
.quote-thanks__card p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 24px;
  max-width: 480px;
}
.quote-thanks__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === Tabs === */
.tabs {
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: 24px;
}
.tabs button {
  padding: 12px 18px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.tabs button:hover { color: var(--brand); }
.tabs button.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.tab-panel { padding: 8px 0 32px; }

/* === Overview tab === */
.overview-section { margin-bottom: 32px; }
.overview-section h2 {
  color: var(--brand);
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.overview-section ul { padding-left: 20px; list-style: disc; }
.overview-section li { margin-bottom: 6px; }
.overview-section .body-rich { color: var(--text); }
.overview-section .body-rich p { margin-bottom: 0.75em; }
.overview-section .body-rich ul { padding-left: 20px; list-style: disc; margin: 8px 0; }

/* Variant specification table — rendered on the Overview tab from the
   productVariants matrix. One table per block type; horizontally
   scrolls on narrow viewports rather than pushing the layout wide. */
.variant-tables { margin-top: 32px; }
.variant-table__wrap { margin-bottom: 32px; }
.variant-table__title {
  color: var(--brand);
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.variant-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--border, #e2e5ea);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.variant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.variant-table th,
.variant-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #eef0f3);
  white-space: nowrap;
}
.variant-table thead th {
  background: var(--surface-alt, #f5f7fa);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.variant-table tbody tr:last-child th,
.variant-table tbody tr:last-child td { border-bottom: 0; }
.variant-table tbody tr:hover { background: var(--surface-alt, #f7f9fc); }
.variant-table__catno { font-weight: 600; }
.variant-table__notes {
  font-size: 0.85rem;
  color: var(--text-muted, #6c7684);
  margin-top: 8px;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.specs-table th, .specs-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.specs-table th { background: var(--bg-soft); font-weight: 700; color: var(--brand); }
.specs-table tr:last-child td { border-bottom: 0; }
.specs-table tr:nth-child(even) td { background: var(--bg-soft); }

/* === Quotation tab === */
.quote-form-block {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.quote-form-block h3 {
  color: var(--brand);
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.product-options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }

/* Hero form only — pack options into a 2-column grid so the "Add to Quote"
   block stays compact on the desktop hero. The Advanced Quotation tab keeps
   the single-column stacked layout. */
@media (min-width: 720px) {
  .product-hero__info .product-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }
  /* Textarea options fill the row — they need the width to breathe. */
  .product-hero__info .product-option:has(textarea),
  .product-hero__info .product-option[data-option-type="optTextarea"] {
    grid-column: 1 / -1;
  }
}
.product-option label.option-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.product-option .option-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.product-option .required { color: #aa0808; margin-left: 2px; }
.product-option input,
.product-option textarea,
.product-option select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.product-option input:focus,
.product-option textarea:focus,
.product-option select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32,68,129,0.12);
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: max-content;
}
.qty-control button { padding: 8px 14px; background: var(--bg-soft); }
.qty-control button:hover { background: var(--brand-light); }
.qty-control input {
  width: 56px;
  border: 0;
  text-align: center;
  padding: 8px 0;
  -moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* === Download tab === */
/* Download rows — larger rows with title + meta on left, file icon on right. */
.download-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.download-row__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.download-row__link:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(32, 68, 129, 0.08);
}
.download-row__info { flex: 1; min-width: 0; }
.download-row__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}
.download-row__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.download-row__icon {
  flex: 0 0 auto;
  width: 56px;
}
.download-row__icon svg { display: block; width: 100%; height: auto; }

/* Legacy single-row download-link kept for backwards compatibility. */
.download-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.download-link:hover { border-color: var(--brand); color: var(--brand); }
.download-link .download-size { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; }

/* === Quote / cart review === */
.quote-page { padding: 16px 0 48px; }
.cart-empty {
  padding: 24px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
}
.cart-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cart-line-thumb img { width: 56px; height: 56px; object-fit: contain; background: var(--bg-soft); border-radius: var(--radius); }
.cart-line-title { font-weight: 600; }
.cart-line-sku, .cart-line-options { font-size: 0.82rem; color: var(--text-muted); }
.cart-line-qty { display: inline-flex; align-items: center; gap: 4px; }
.cart-line-qty button {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.cart-line-qty input {
  width: 44px;
  text-align: center;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cart-line-remove {
  width: 28px; height: 28px;
  color: var(--text-muted);
  border-radius: var(--radius);
}
.cart-line-remove:hover { background: #fee; color: #aa0808; }

/* === Generic content page === */
.page-hero { margin-bottom: 24px; }
.page-hero img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.page-body h1 { margin-bottom: 16px; color: var(--brand); }
.page-body { padding: 16px 0 48px; }
.page-body .body-content p { margin-bottom: 1em; }
.page-body .body-content h2,
.page-body .body-content h3 { margin: 1.2em 0 0.4em; color: var(--brand); }
.page-body .body-content ul { padding-left: 20px; list-style: disc; margin: 0.5em 0 1em; }

/* === Category landing === */
.category-landing { padding: 16px 0 48px; }
.category-landing .category-hero {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.category-landing__intro {
  color: var(--text-muted);
  max-width: 720px;
  margin-bottom: 24px;
}

/* === Generic section helpers (kept so non-home templates still render) === */
.section { padding: 48px 0; }
.section--soft { background: var(--bg-soft); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.section__title { margin-bottom: 12px; }
.section__title em,
.section-title em { color: var(--brand); font-style: normal; }
.section__intro { color: var(--text-muted); }
@media (min-width: 1025px) { .section { padding: 80px 0; } }

/* === Utilities === */
.sr-only {
  position: absolute !important;
  clip: rect(0,0,0,0);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.text-center { text-align: center; }
.flex { display: flex; }
.gap-12 { gap: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
[hidden] { display: none !important; }

/* === Browse Categories page — hero === */
.browse-hero {
  padding: 24px 0 64px;
}
.browse-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1025px) {
  .browse-hero { padding: 40px 0 96px; }
  .browse-hero__grid {
    grid-template-columns: 458px 1fr;
    gap: 56px;
    align-items: start;
  }
}
.browse-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
}
.browse-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.browse-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.2;
}
@media (min-width: 1025px) {
  .browse-hero__title { font-size: 2.5rem; }
}
.browse-hero__body {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.browse-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

/* === Category landing hero (parent + leaf) === */
.category-hero {
  padding: 24px 0 24px;
}
.category-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1025px) {
  .category-hero { padding: 40px 0 32px; }
  .category-hero__grid {
    grid-template-columns: 458px 1fr;
    gap: 56px;
    align-items: start;
  }
}
.category-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #fff;
}
.category-hero__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.category-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.2;
}
@media (min-width: 1025px) { .category-hero__title { font-size: 2.5rem; } }
.category-hero__body {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.category-hero__lead {
  color: var(--brand);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 16px;
}
.category-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

/* === Category — child tile grid (parent mode) === */
.category-children {
  padding: 48px 0;
  background: var(--bg-soft);
}
@media (min-width: 1025px) { .category-children { padding: 72px 0; } }

/* === Category — leaf mode (sidebar + product grid) === */
.category-products { padding: 16px 0 48px; }
@media (min-width: 1025px) { .category-products { padding: 24px 0 72px; } }
.category-products__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 1025px) {
  .category-products__wrap { grid-template-columns: 260px 1fr; gap: 44px; }
}

/* Fade + disable-pointer while a filter fetch is in flight — see category-filter.js. */
[data-filter-main].is-loading,
[data-filter-sidebar].is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: start;
}

/* Browse Categories block (siblings list) */
.filter-sidebar__cats {
  border-left: 4px solid var(--brand);
  padding-left: 16px;
}
.filter-sidebar__cats-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 12px;
}
.filter-sidebar__cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-sidebar__cat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}
.filter-sidebar__cat-link:hover { color: var(--brand); }
.filter-sidebar__cat-link--active {
  color: var(--amber);
  font-weight: 700;
}
.filter-sidebar__cat-link--active:hover { color: var(--amber-dark); }

/* Refine Your Search block */
.filter-sidebar__refine-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 16px;
}
.filter-group {
  margin: 0 0 22px;
}
.filter-group:last-child { margin-bottom: 0; }
.filter-group__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.filter-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-option {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.4;
}
.filter-option:hover { color: var(--brand); }
.filter-option__count { color: var(--text-muted); }
.filter-option--active {
  color: var(--amber);
  font-weight: 600;
}
.filter-option--active:hover { color: var(--amber-dark); }
.filter-option__remove { font-weight: 700; }

/* Need Help CTA */
.filter-sidebar__help {
  margin-top: 8px;
  padding: 24px 22px 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-align: center;
}
.filter-sidebar__help-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin: 0 auto 14px;
}
.filter-sidebar__help-icon svg { width: 22px; height: 22px; }
.filter-sidebar__help-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.filter-sidebar__help-text {
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.45;
}
.filter-sidebar__help-phone {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1.5;
}
.filter-sidebar__help-phone:hover { color: var(--brand-dark); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 1025px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.empty-state {
  padding: 32px;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-muted);
}
.empty-state a { color: var(--brand); font-weight: 600; }

/* === About Us page — hero with video + copy === */
.about-hero {
  padding: 32px 0 56px;
}
@media (min-width: 1025px) { .about-hero { padding: 48px 0 96px; } }

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1025px) {
  .about-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
}

.about-hero__video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--bg-soft);
}
.about-hero__video-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.about-hero__video-target {
  position: absolute;
  inset: 0;
  background: #000;
}
.about-hero__video-target video,
.about-hero__video-target iframe { width: 100%; height: 100%; display: block; }
.about-hero__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-hero__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background 0.2s;
}
.about-hero__video-link:hover .about-hero__play {
  transform: scale(1.08);
  background: #fff;
}
.about-hero__play svg { width: 32px; height: 32px; margin-left: 4px; }

.about-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.2;
}
@media (min-width: 1025px) { .about-hero__title { font-size: 2.5rem; } }
.about-hero__title em {
  font-style: normal;
  color: var(--brand);
}
.about-hero__body {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.about-hero__body p + p { margin-top: 14px; }

/* === Why Choose Spectrum cards === */
.why-choose {
  padding: 48px 0;
}
@media (min-width: 1025px) { .why-choose { padding: 72px 0 96px; } }

.why-choose__heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 32px;
  line-height: 1.2;
}
@media (min-width: 1025px) { .why-choose__heading { font-size: 2.1rem; margin-bottom: 40px; } }

.why-choose__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.why-card {
  display: flex;
  flex-direction: column;
}
.why-card__tab {
  align-self: flex-start;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  line-height: 1.3;
}
.why-card__body {
  background: var(--bg-soft);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}
@media (min-width: 641px) {
  .why-card__body { grid-template-columns: 140px 1fr; gap: 22px; }
}
.why-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
@media (min-width: 641px) {
  .why-card__media { width: 140px; aspect-ratio: 1 / 1; }
}
.why-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.why-card__text {
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  font-size: 0.95rem;
}

/* === Inventory Callout (light card, two-tone title, CSV illustration on right) === */
.inventory-callout { padding: 48px 0; }
@media (min-width: 1025px) { .inventory-callout { padding: 80px 0; } }

.inventory-callout__card {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 1025px) {
  .inventory-callout__card {
    /* Match Figma: ~343 tall card, copy column ~550 wide, CSV illustration ~300 on right. */
    grid-template-columns: 1fr 320px;
    padding: 40px 56px;
    gap: 48px;
    min-height: 280px;
  }
}

/* Copy column: title + subtitle group pinned to the top, button pinned to the bottom. */
.inventory-callout__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 240px;
}
@media (min-width: 1025px) {
  .inventory-callout__copy { justify-content: space-between; gap: 0; min-height: 0; }
}

.inventory-callout__text { display: flex; flex-direction: column; gap: 8px; }

.inventory-callout__title {
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 1025px) { .inventory-callout__title { font-size: 2.5rem; } }
.inventory-callout__title em {
  font-style: normal;
  color: var(--brand);
}

.inventory-callout__sub {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 640px;
}
@media (min-width: 1025px) { .inventory-callout__sub { font-size: 1rem; } }

.inventory-callout__btn {
  align-self: flex-start;
  padding: 12px 26px;
}

.inventory-callout__icon {
  justify-self: center;
  max-width: 220px;
  width: 100%;
}
@media (min-width: 1025px) {
  .inventory-callout__icon { justify-self: end; align-self: center; max-width: 280px; }
}
.inventory-callout__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* === Product detail — Product Options matrix === */
.product-options {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 24px 0 28px;
}
.product-option__label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 2px;
}
.product-option__required { color: var(--brand); }
.product-option__hint {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.product-option__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.product-option-chip {
  position: relative;
  cursor: pointer;
}
.product-option-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.product-option-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  min-width: 54px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.product-option-chip:hover span { border-color: var(--brand); color: var(--brand); }
.product-option-chip input:checked + span {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.product-option-chip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.product-option__select,
.product-option__input,
.product-option__textarea {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 8px;
}
.product-option__textarea { resize: vertical; min-height: 84px; }
.product-option__select:focus,
.product-option__input:focus,
.product-option__textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32, 68, 129, 0.15);
}

/* === Cart list (sidebar + quotation tab on product page) === */
.cart-list__empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.cart-list__items {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-list__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  position: relative;
}
.cart-list__thumb {
  width: 56px;
  height: 56px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.cart-list__placeholder {
  width: 100%;
  height: 100%;
  background: var(--border-soft);
}
.cart-list__body { min-width: 0; }
.cart-list__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cart-list__sku,
.cart-list__opts,
.cart-list__qty-plain {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cart-list__qty-plain { margin-top: 4px; }
.cart-list__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.cart-list__qty button {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.cart-list__qty button:hover { background: var(--bg-soft); border-color: var(--brand); }
.cart-list__qty span {
  min-width: 24px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
}
.cart-list__remove {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  align-self: start;
  justify-self: end;
  line-height: 1;
}
.cart-list__remove:hover { background: var(--bg-soft); color: var(--brand); }

/* Tab variant: more roomy, larger thumb */
.cart-list--detailed .cart-list__item {
  grid-template-columns: 96px 1fr auto auto;
  gap: 16px;
  padding: 16px;
}
.cart-list--detailed .cart-list__thumb { width: 96px; height: 96px; }
.cart-list--detailed .cart-list__title { font-size: 1rem; }
.cart-list--detailed .cart-list__qty { margin-top: 0; }

/* === Quote (RFQ) hero === */
.quote-hero {
  background: var(--brand);
  color: #fff;
  padding: 44px 0;
}
.quote-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.quote-hero__title {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 8px;
}
@media (min-width: 1025px) { .quote-hero__title { font-size: 2.3rem; } }
.quote-hero__lead {
  color: rgba(255,255,255,0.85);
  margin: 0;
  max-width: 760px;
  line-height: 1.55;
}

/* === Contact Us page === */
.contact-intro { padding: 48px 0 32px; }
@media (min-width: 1025px) { .contact-intro { padding: 72px 0 56px; } }
.contact-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1025px) { .contact-intro__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.contact-intro__title { font-size: 2rem; font-weight: 700; margin: 0 0 12px; }
@media (min-width: 1025px) { .contact-intro__title { font-size: 2.5rem; } }
.contact-intro__body { color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.contact-intro__map { aspect-ratio: 16 / 9; background: var(--bg-soft); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 28px; }
.contact-intro__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-intro__map--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.contact-intro__offices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-office__label { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.contact-office__text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.contact-office__text a { color: var(--brand); }

.contact-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-tile {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-tile__icon {
  width: 32px;
  height: 32px;
  background: var(--brand-light);
  border-radius: var(--radius);
  margin-bottom: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.contact-tile__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.contact-tile__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text); }
.contact-tile__body { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.45; }
.contact-tile__link { color: var(--brand); font-weight: 600; font-size: 0.92rem; margin-top: 4px; }

.contact-form-section {
  padding: 48px 0;
  background: #fff;
}
@media (min-width: 1025px) { .contact-form-section { padding: 72px 0; } }
.contact-form-section__heading { font-size: 1.75rem; font-weight: 700; margin: 0 0 32px; text-align: center; }
/* The design shows the form flat on the page (no card / no gray backdrop).
   Constrain the width for readability but drop the wrapper card styles. */
.contact-form--wide { max-width: 980px; margin: 0 auto; background: transparent; padding: 0; }
.contact-form__row--2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 641px) { .contact-form__row--2 { grid-template-columns: 1fr 1fr; } }
/* 4-column row (First / Last / Email / Phone) — collapses gracefully on smaller breakpoints. */
.contact-form__row--4 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 641px) { .contact-form__row--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .contact-form__row--4 { grid-template-columns: repeat(4, 1fr); } }
.contact-form-section__submit { width: 100%; margin-top: 8px; padding-top: 14px; padding-bottom: 14px; font-size: 1rem; }
.ohnohoney { position: absolute; left: -9999px; }
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 14px; font-size: 0.95rem; }
.alert--success { background: #ecf7e9; color: #2a6a23; border: 1px solid #cce6c3; }
.alert--error   { background: #fbeceb; color: #8b2520; border: 1px solid #ecc7c4; }

/* === Newsletter page === */
.newsletter-page { padding: 48px 0 80px; }
@media (min-width: 1025px) { .newsletter-page { padding: 72px 0 120px; } }
.newsletter-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1025px) { .newsletter-page__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.newsletter-page__title { font-size: 2.2rem; font-weight: 700; margin: 0 0 12px; }
.newsletter-page__subtitle { color: var(--text-muted); line-height: 1.55; margin: 0 0 24px; max-width: 460px; }
.newsletter-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.newsletter-form__row--2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.newsletter-form__submit { width: 100%; }
.newsletter-page__media { background: var(--bg-soft); border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.newsletter-page__media img { width: 100%; height: 100%; object-fit: cover; }
.newsletter-page__envelope { padding: 32px; }

/* === Resources page === */
.ct-selector {
  padding: 32px 0;
  background: var(--bg-soft);
}
.ct-selector__title { font-size: 1.75rem; font-weight: 700; margin: 0 0 24px; }
.ct-selector__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
}
@media (min-width: 1025px) { .ct-selector__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.ct-selector__form { display: flex; flex-direction: column; gap: 14px; }
.ct-selector__field { display: flex; flex-direction: column; gap: 6px; }
.ct-selector__field label { font-weight: 600; font-size: 0.92rem; }
.ct-selector__field select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.95rem;
}
.ct-selector__submit { align-self: flex-start; }
.ct-selector__result {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-selector__result-label { color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.ct-selector__result-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.ct-selector__result-body { color: var(--text-muted); margin: 0; }

.resources { padding: 48px 0; }
@media (min-width: 1025px) { .resources { padding: 72px 0; } }
.resources__heading { font-size: 1.75rem; font-weight: 700; margin: 0 0 28px; }
.resources__tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 28px;
}
.resources__tab {
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.resources__tab:hover { color: var(--brand); }
.resources__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.resources__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (min-width: 641px)  { .resources__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .resources__grid { grid-template-columns: repeat(5, 1fr); } }

.resource-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.resource-card__thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 6px;
}
.resource-card__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
.resource-card__placeholder svg { width: 48px; height: 48px; }
.resource-card__title { font-size: 0.95rem; font-weight: 600; margin: 0; line-height: 1.35; }
.resource-card__title a { color: var(--text); }
.resource-card__title a:hover { color: var(--brand); }
.resource-card__summary { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.resource-card__download {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
}
.resource-card__download svg { width: 14px; height: 14px; }
.resource-card__download:hover { background: var(--brand-dark); color: #fff; }

/* Resources page — product documents browser ============================ */
.resources__subheading {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 28px;
  max-width: 720px;
}
.resources--legacy { padding-top: 0; }

.document-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 769px) {
  .document-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}

.document-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border, #d8dee8);
  border-radius: var(--radius);
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.document-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 49, 92, 0.12);
}
.document-search__icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.document-search input {
  border: 0;
  outline: 0;
  padding: 10px 8px;
  font-size: 0.95rem;
  background: transparent;
  width: 100%;
}

.document-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.document-filter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border, #d8dee8);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.document-filter:hover { border-color: var(--brand); color: var(--brand); }
.document-filter.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.document-filter__count {
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: 600;
}
.document-filter.is-active .document-filter__count { opacity: 1; }
/* Dim chips that would return 0 documents given the current search text. */
.document-filter.is-empty { opacity: 0.45; }

.document-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 641px)  { .document-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .document-grid { grid-template-columns: repeat(3, 1fr); } }

.document-card {
  background: #fff;
  border: 1px solid var(--border, #d8dee8);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.document-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(22, 49, 92, 0.08);
  transform: translateY(-1px);
}
.document-card__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
}
.document-card__icon {
  flex-shrink: 0;
  width: 44px;
}
.document-card__icon svg {
  width: 44px;
  height: auto;
  display: block;
}
.document-card__body {
  flex: 1;
  min-width: 0;
}
.document-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
  word-break: break-word;
}
.document-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.document-card__mfg {
  font-size: 0.82rem;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 4px;
}
.document-card__source {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.document-card__source-name {
  color: var(--brand);
  font-weight: 500;
}

.document-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
  background: var(--bg-soft, #f5f7fa);
  border-radius: var(--radius);
  margin-top: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Resource detail page */
.resource-entry { padding: 32px 0 56px; }
.resource-entry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1025px) { .resource-entry__grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.resource-entry__media { background: var(--bg-soft); border-radius: var(--radius-lg); aspect-ratio: 4 / 3; overflow: hidden; }
.resource-entry__media img { width: 100%; height: 100%; object-fit: cover; }
.resource-entry__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--brand); }
.resource-entry__placeholder svg { width: 96px; height: 96px; }
.resource-entry__eyebrow { color: var(--brand); font-weight: 600; font-size: 0.85rem; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.resource-entry__title { font-size: 2rem; font-weight: 700; margin: 0 0 14px; }
.resource-entry__summary { color: var(--text-muted); line-height: 1.55; margin: 0 0 22px; }
.resource-entry__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* === Search page === */
.search-hero {
  background: var(--brand);
  color: #fff;
  padding: 48px 0;
}
.search-hero__title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 1025px) { .search-hero__title { font-size: 2.5rem; } }

.search-helpbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0;
}
.search-helpbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.search-helpbar__text {
  color: var(--text);
  font-size: 1rem;
}

.search-results__heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 24px;
}
.search-results__query { color: var(--brand); }

/* === About Us — vendor list (navy band) === */
.vendors {
  background: var(--brand);
  color: #fff;
  padding: 56px 0 64px;
}
@media (min-width: 1025px) { .vendors { padding: 80px 0 96px; } }
.vendors__heading {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.2;
}
@media (min-width: 1025px) { .vendors__heading { font-size: 2.1rem; } }
.vendors__intro {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 1100px;
}
.vendors__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 641px)  { .vendors__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1025px) { .vendors__grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.vendor-card {
  background: #fff;
  border-radius: var(--radius);
  min-height: 96px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.2s;
}
a.vendor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.vendor-card__logo {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.vendor-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  text-align: center;
}
.vendors__empty {
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

/* === Image-led trust cards (Browse Categories etc.) === */
.trust-cards-section {
  padding: 48px 0;
  background: #fff;
}
@media (min-width: 1025px) { .trust-cards-section { padding: 80px 0; } }

.trust-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 32px;
}
@media (min-width: 641px)  { .trust-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .trust-cards { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.trust-card {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.trust-card__media {
  aspect-ratio: 365 / 287;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.trust-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Card 1 variant — 2×2 grid of vendor logos in white cells. */
.trust-card__logo-grid {
  aspect-ratio: 365 / 287;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.trust-card__logo-cell {
  background: #fff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.trust-card__logo-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.trust-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.trust-card__icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trust-card__icon img {
  width: 24px;
  height: 24px;
  /* Tint the black-stroked SVGs to brand blue to match the design. */
  filter: invert(15%) sepia(38%) saturate(1728%) hue-rotate(197deg) brightness(96%) contrast(93%);
}
.trust-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}
.trust-card__text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 14px;
}
.trust-card__more {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.trust-card__arrow { transition: transform 0.2s; }
.trust-card__more:hover .trust-card__arrow { transform: translateX(4px); }

/* === Compact in-demand slider (Browse Categories etc.) === */
.in-demand-slider {
  padding: 48px 0;
  background: #fff;
}
@media (min-width: 1025px) { .in-demand-slider { padding: 80px 0; } }

.in-demand-slider__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.in-demand-slider__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1;
  /* Same story as .spotlight-carousel__track — without min-width: 0 the flex
     child grows to fit all cards and pushes the browse-categories page
     sideways on mobile. */
  min-width: 0;
  padding: 4px 4px 8px;
  scrollbar-width: none;
}
.in-demand-slider__track::-webkit-scrollbar { display: none; }

.in-demand-slider__arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  /* Align the arrow's vertical center to the middle of the card's IMAGE
     (image is 137px tall from the top of the card). Center of image is at
     ~68px; subtract half the arrow height (20px) → 48px offset from top. */
  align-self: flex-start;
  margin-top: 48px;
}
.in-demand-slider__arrow:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.in-demand-card {
  flex: 0 0 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.in-demand-card__img {
  display: block;
  aspect-ratio: 180 / 137;
  /* No fill — just the outline. */
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.in-demand-card__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
}
.in-demand-card__title {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--text);
  /* Clamp to 2 lines — anything longer gets truncated with an ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}
.in-demand-card__title a { color: inherit; }
.in-demand-card__title a:hover { color: var(--brand); }
.in-demand-card__btn {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 0.85rem;
}

/* === Advanced Quotation: spec summary + variant picker ===================== */
.spec-summary {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.spec-summary__title {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec-summary__grid {
  display: grid;
  gap: 4px 24px;
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 720px) {
  .spec-summary__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spec-summary__row {
  display: grid;
  grid-template-columns: minmax(140px, 40%) 1fr;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}
.spec-summary__row:last-child { border-bottom: 0; }
.spec-summary__label {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}
.spec-summary__value {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.product-option--variant .option-subtext {
  margin-bottom: 6px;
}

/* === /quote — unified form surface (no visual boxes) ===================== */
.quote-form { display: flex; flex-direction: column; gap: 24px; }
.quote-form__heading {
  font-size: 1.15rem;
  margin: 0;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.quote-form__heading--secondary { margin-top: 8px; }
.quote-form__submit { align-self: flex-start; padding: 12px 28px; }