/* arrowlaundryequipment.com — storefront app layer.
   Loads AFTER arrow-ds/styles.css. Consumes Arrow Machinery Design System tokens
   only; defines no colors of its own. base.css already sets body/box-sizing/links/
   focus-visible/reduced-motion, so this file is components + page composition.
   Arrow brand is PRIMARY. Red is the single decisive accent. Braun-clean.
   Mobile-first: base targets ~375px, min-width queries scale up. */

/* ============================================================
   1. Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);            /* 1200px */
  margin-inline: auto;
  padding-inline: var(--space-4);             /* 16px at mobile */
}
@media (min-width: 600px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1000px) { .container { padding-inline: var(--space-8); } }
.container--narrow  { max-width: 820px; }
.container--reading { max-width: 760px; }

main { display: block; }

/* Shared mono helper + arrow link + alt section band + generic section title */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.section--alt { background: var(--color-surface-sunken); }
.section-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-6);
}
@media (min-width: 600px) { .section-title { font-size: var(--text-3xl); } }
.link-arrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--accent);
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.section-cta { margin: var(--space-8) 0 0; font-family: var(--font-serif); color: var(--text-muted); }
.no-print { }
@media print {
  .no-print, .site-header, .site-footer, .skip-link { display: none !important; }
}

.section { padding-block: var(--space-12); }
@media (min-width: 768px) { .section { padding-block: var(--space-16); } }

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

/* ============================================================
   2. Skip link — visible only on focus
   ============================================================ */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  display: inline-flex; align-items: center;
  min-height: 44px;
  background: var(--color-surface);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

/* ============================================================
   3. Site header — sticky, blurred, brand left / nav right
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 248, 245, 0.85);      /* --paper @ 85% */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  min-height: var(--header-height);            /* 68px */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5, 0.625rem);
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;                          /* push nav to the right */
}
.brand:hover { text-decoration: none; }
.brand__mark { height: 30px; width: auto; display: block; }
.brand__word {
  font-family: var(--font-serif);
  font-size: var(--text-md);                   /* 18px */
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: 1.05;
}
.brand__word small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.site-nav__link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: var(--transition-control);
}
.site-nav__link:hover {
  color: var(--text-strong);
  background: var(--color-surface-sunken);
  text-decoration: none;
}
.site-nav__link[aria-current="page"] { color: var(--text-strong); }

/* ============================================================
   4. Buttons — primary red / secondary surface / ghost / sizes
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  min-height: 44px;                            /* touch target */
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-md);             /* 10px control radius */
  padding: var(--pad-control-y, 0.625rem) var(--pad-control-x);
  transition: var(--transition-control);
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.btn--primary:hover  { background: var(--accent-hover);  border-color: var(--accent-hover);  color: var(--on-accent); }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); transform: scale(0.98); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--text-strong);
  border-color: var(--border-default);
}
.btn--secondary:hover  { background: var(--color-surface-sunken); border-color: var(--border-strong); color: var(--text-strong); }
.btn--secondary:active { transform: scale(0.98); }

.btn--ghost {
  background: transparent;
  color: var(--text-body);
  border-color: transparent;
}
.btn--ghost:hover  { background: var(--color-surface-sunken); color: var(--text-strong); }
.btn--ghost:active { transform: scale(0.98); }

.btn--sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.btn--lg { font-size: var(--text-base); padding: var(--space-3) var(--space-6); }
.btn--block { width: 100%; }

/* External-link affordance — CSS-drawn (no emoji / dingbats) */
.btn__ext {
  width: 0.7em; height: 0.7em;
  flex: 0 0 auto;
  border: 1.75px solid currentColor;
  border-left: 0; border-bottom: 0;
  position: relative;
  margin-left: 0.2em;
  transform: translateY(-0.04em);
}
.btn__ext::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 1.05em; height: 1.75px;
  background: currentColor;
  transform-origin: right bottom;
  transform: rotate(-45deg);
}

/* ============================================================
   5. Page head + hero + generic headings
   ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.hero { padding-block: var(--space-10) var(--space-8); }
@media (min-width: 768px) { .hero { padding-block: var(--space-16) var(--space-10); } }

.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);                  /* 38px mobile */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-3) 0 0;
  max-width: 18ch;
}
@media (min-width: 600px) { .hero__title { font-size: var(--text-4xl); } }
@media (min-width: 960px) { .hero__title { font-size: var(--text-5xl); } }

.hero__lede {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 52ch;
  margin: var(--space-5) 0 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.hero__trust {
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
}

/* Catalog / generic page header */
.page-head { padding-block: var(--space-10) var(--space-2); }
.page-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-3) 0 0;
  max-width: 24ch;
}
@media (min-width: 600px) { .page-title { font-size: var(--text-3xl); } }
.page-intro {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 60ch;
  margin: var(--space-4) 0 0;
}

/* ============================================================
   6. Value-prop cards (landing)
   ============================================================ */
.value-props {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) { .value-props { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.vp-card {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.vp-card__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.vp-card__body {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin: 0;
}

/* Closing band */
.closing {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.closing__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 auto;
  max-width: 22ch;
}
.closing__line {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  max-width: 56ch;
  margin: var(--space-4) auto 0;
}
.closing__actions { margin-top: var(--space-6); display: flex; justify-content: center; }

/* ============================================================
   7. Category filter chips (links, not buttons)
   ============================================================ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  transition: var(--transition-control);
}
.chip:hover { background: var(--color-surface-sunken); border-color: var(--border-strong); text-decoration: none; }
.chip__count { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] {
  color: var(--text-strong);
  border-color: var(--accent);
}
.chip[aria-current="true"]::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  flex: 0 0 auto;
}
.chip[aria-current="true"] .chip__count { color: var(--text-muted); }

/* ============================================================
   8. Product card grid + card
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
  transform: translateY(-2px);
  text-decoration: none;
}
.product-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-sunken);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  display: block;
}
.product-card__media-tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2-5, 0.625rem);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  background: rgba(250, 248, 245, 0.85);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.product-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.product-card__model {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}
.product-card__name {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--accent); }
.btn--add.is-added { background: var(--success); border-color: var(--success); color: var(--white); }
.product-card__capacity {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.product-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.product-card__cta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent);
}

/* Category badge / tag */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--color-surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-0-5) var(--space-2);
}
.tag--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }

/* ============================================================
   9. Price typography
   ============================================================ */
.price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.price--detail { font-size: var(--text-2xl); }
.price-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: var(--leading-normal);
  margin: var(--space-2) 0 0;
  max-width: 48ch;
}

/* ============================================================
   10. Breadcrumb
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 0;
  margin: 0;
  list-style: none;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.15em; }
.breadcrumb li + li::before { content: "/"; color: var(--text-disabled); }
.breadcrumb [aria-current="page"] { color: var(--text-strong); }

/* ============================================================
   11. Product detail layout
   ============================================================ */
.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-6);
  align-items: start;
}
@media (min-width: 820px) { .detail { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }

.detail__gallery { display: flex; flex-direction: column; gap: var(--space-4); }
.detail__media {
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.detail__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-6);
  display: block;
}
.detail__media--alt { aspect-ratio: 16 / 10; }
.detail__actions--secondary { margin-top: var(--space-4); gap: var(--space-2); }
.detail__actions--secondary .btn { padding-inline: var(--space-3); }

.detail__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.detail__model { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--accent); font-size: var(--text-sm); }
.detail__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
@media (min-width: 600px) { .detail__title { font-size: var(--text-3xl); } }
.detail__blurb {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
  max-width: 52ch;
}
.detail__price-wrap { margin-top: var(--space-6); }
.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Spec table — mono figures, hairline rows */
.spec {
  margin-top: var(--space-10);
}
.spec__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 var(--space-3);
}
.spec-table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}
.spec-table tr:first-child th,
.spec-table tr:first-child td { border-top: 0; }
.spec-table th {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  width: 44%;
}
.spec-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/* ============================================================
   12. Footer
   ============================================================ */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-20);
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-12);
}
@media (min-width: 700px) {
  .site-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-10); }
}
.site-footer__brand { display: inline-flex; align-items: center; gap: var(--space-2-5, 0.625rem); }
.site-footer__brand img { height: 28px; width: auto; }
.site-footer__word { font-family: var(--font-serif); font-size: var(--text-md); color: var(--text-strong); }
.site-footer__word small {
  display: block; font-family: var(--font-sans); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-subtle);
}
.site-footer__col { max-width: 36ch; }
.site-footer__eyebrow {
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--space-2);
}
.site-footer__blurb {
  font-family: var(--font-serif); font-size: var(--text-sm);
  line-height: var(--leading-normal); color: var(--text-muted); margin: 0;
}
.site-footer__blurb a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-link); font-weight: var(--weight-semibold);
}
.site-footer__bottom { border-top: 1px solid var(--border-subtle); padding-block: var(--space-3); }
.site-footer__bottom .container {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  justify-content: space-between;
  font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle);
}

/* ============================================================
   13. Focus rings (augments base.css :focus-visible)
   ============================================================ */
.btn:focus-visible,
.chip:focus-visible,
.site-nav__link:focus-visible,
.brand:focus-visible,
.product-card:focus-visible,
.breadcrumb a:focus-visible,
.skip-link:focus-visible,
.site-footer a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);               /* 0 0 0 3px var(--focus-ring-soft) */
}
.product-card:focus-visible { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card:hover,
  .btn,
  .btn:active,
  .skip-link { transition: none !important; transform: none !important; }
}

/* ============================================================
   14. Header quote pill (cart indicator)
   ============================================================ */
.quote-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  margin-left: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: var(--transition-control);
}
.quote-pill:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.quote-pill__icon {
  width: 16px; height: 14px; flex: 0 0 auto;
  border: 2px solid currentColor; border-top: 0;
  border-radius: 0 0 3px 3px; position: relative;
}
.quote-pill__icon::before {
  content: ""; position: absolute; left: 50%; top: -6px;
  width: 9px; height: 7px; transform: translateX(-50%);
  border: 2px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0;
}
.quote-pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--white); color: var(--accent);
  border-radius: var(--radius-pill); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
}
@media (max-width: 380px) { .quote-pill__label { display: none; } }

/* ============================================================
   15. Build-a-Quote tool — shared shell, stepper, states
   ============================================================ */
.hero--builder .hero__trust {
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
}
.product-card--builder .product-card__body { gap: var(--space-2); }
.btn--add { margin-top: var(--space-3); }

.build-head { margin-bottom: var(--space-2); }
.build-intro {
  font-family: var(--font-serif); color: var(--text-muted);
  font-size: var(--text-md); margin: var(--space-2) 0 var(--space-5); max-width: 56ch;
}
.cat-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.build-more { margin-top: var(--space-8); }

/* The tool sits on a raised paper surface so the four states read as one tool. */
.quote-tool { background: var(--color-surface-sunken); border-block: 1px solid var(--border-subtle); }
.state {
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
}
@media (max-width: 559px) { .state { padding: var(--space-6) var(--space-4); } }
.state__lede { font-family: var(--font-serif); font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0 0 var(--space-3); max-width: 60ch; }
.state__sub { font-family: var(--font-serif); font-size: var(--text-base); color: var(--text-muted); margin: 0 0 var(--space-6); max-width: 60ch; }
.state__note { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-subtle); margin: var(--space-4) 0 0; max-width: 64ch; line-height: var(--leading-normal); }
.state__note--flag { color: var(--text-muted); background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.state__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8); align-items: center;
}
.state__actions .btn--lg { margin-left: auto; }
@media (max-width: 479px) {
  .state__actions { flex-direction: column-reverse; align-items: stretch; }
  .state__actions .btn--lg { margin-left: 0; }
}

/* Stepper */
.stepper {
  display: flex; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  counter-reset: step;
}
.stepper__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-subtle); flex: 1 1 auto; min-width: 0;
}
.stepper__item + .stepper__item::before {
  content: ""; height: 1px; flex: 1 1 auto; min-width: var(--space-3);
  background: var(--border-default); margin-right: var(--space-1);
}
.stepper__num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: var(--radius-circle);
  background: var(--color-surface); border: 1px solid var(--border-strong);
  color: var(--text-subtle); font-weight: var(--weight-bold);
}
.stepper__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 519px) { .stepper__label { display: none; } }
.stepper__item.is-active { color: var(--text-strong); }
.stepper__item.is-active .stepper__num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stepper__item.is-done { color: var(--text-muted); }
.stepper__item.is-done .stepper__num { background: var(--success); border-color: var(--success); color: var(--white); }

/* Rep escape hatch — on every state */
.rep-link {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted);
}
.rep-link a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-link); font-weight: var(--weight-semibold);
}
.rep-link__icon {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid var(--accent); border-radius: var(--radius-circle); position: relative;
}
.rep-link__icon::before {
  content: ""; position: absolute; inset: 3px 3px auto 3px; top: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  left: 50%; transform: translateX(-50%);
}

/* ============================================================
   16. Detail table (State 1 + State 4) — 5 columns, responsive
   ============================================================ */
.detail-table-wrap { width: 100%; overflow-x: auto; margin-top: var(--space-2); }
.detail-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.detail-table caption { text-align: left; }
.detail-table thead th {
  text-align: left; font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle); padding: 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.detail-table .num { text-align: right; }
.detail-table tbody td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.detail-table .dt-item { width: 100%; }
.detail-table tfoot th, .detail-table tfoot td {
  padding: var(--space-3) var(--space-2); font-family: var(--font-sans);
  font-weight: var(--weight-semibold); color: var(--text-body); font-size: var(--text-sm);
}
.detail-table tfoot tr:first-child th, .detail-table tfoot tr:first-child td { padding-top: var(--space-4); }
.detail-table tfoot .dt-grand th, .detail-table tfoot .dt-grand td {
  font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-md);
  border-top: 2px solid var(--text-strong); padding-top: var(--space-3);
}
.detail-table tfoot .dt-pending td { color: var(--text-muted); }

.qline__item { display: flex; align-items: center; gap: var(--space-3); }
.qline__img { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; background: var(--color-surface-sunken); border-radius: var(--radius-sm); }
.qline__img--ph { display: block; }
@media (max-width: 559px) { .qline__img { display: none; } }
.qline__text { display: flex; flex-direction: column; min-width: 0; }
.qline__name { font-family: var(--font-serif); font-weight: var(--weight-semibold); color: var(--text-strong); text-decoration: none; font-size: var(--text-base); line-height: var(--leading-snug); }
.qline__name:hover { color: var(--accent); }
.qline__sku { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 2px; letter-spacing: 0.04em; }

.qstepper { display: inline-flex; align-items: center; }
.qstep {
  width: 32px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); line-height: 1;
  background: var(--color-surface); color: var(--text-strong);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition-control);
}
.qstep:hover { background: var(--color-surface-sunken); border-color: var(--border-strong); }
.qline__qtyinput {
  width: 42px; height: 34px; text-align: center; margin: 0 4px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--text-strong); font-size: var(--text-base);
}
.qline__price, .qline__ext { white-space: nowrap; color: var(--text-strong); }
.qline__ext { font-weight: var(--weight-semibold); }
.qline__remove-cell { text-align: right; }
.qline__remove {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-subtle); text-decoration: underline; text-underline-offset: 2px;
  min-height: 36px; padding: 0 var(--space-1);
}
.qline__remove:hover { color: var(--danger); }

/* Taxable? pill */
.taxflag {
  display: inline-flex; align-items: center; font-family: var(--font-sans);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 2px var(--space-2);
}
.taxflag--yes { color: var(--text-muted); background: var(--color-surface-sunken); border: 1px solid var(--border-default); }
.taxflag--no { color: var(--text-subtle); background: transparent; border: 1px dashed var(--border-default); }

/* Stacked-card layout for the detail table at narrow widths (no h-scroll) */
@media (max-width: 559px) {
  .detail-table, .detail-table tbody, .detail-table tbody tr, .detail-table tbody td { display: block; width: 100%; }
  .detail-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .detail-table tbody tr {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface);
  }
  .detail-table tbody td { border: 0; padding: var(--space-1) 0; text-align: right; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .detail-table tbody td.dt-item, .detail-table tbody td.qline__item { text-align: left; }
  .detail-table tbody td::before {
    content: attr(data-label); font-family: var(--font-sans); font-weight: var(--weight-bold);
    font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--text-subtle); flex: 0 0 auto;
  }
  .detail-table tbody td.dt-item::before, .detail-table tbody td.qline__item::before { display: none; }
  .detail-table tbody td.qline__remove-cell { justify-content: flex-end; }
  .detail-table tbody td.qline__remove-cell::before { display: none; }
  .detail-table--review tbody td.dt-item { font-family: var(--font-serif); font-weight: var(--weight-semibold); color: var(--text-strong); }
}

/* ============================================================
   17. State 2 — delivery form + territory block
   ============================================================ */
.delivery-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4);
  margin-top: var(--space-2);
}
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field--state { grid-column: span 1; }
.field--zip { grid-column: span 1; }
@media (max-width: 479px) {
  .delivery-form { grid-template-columns: 1fr; }
  .field--wide, .field--state, .field--zip { grid-column: 1 / -1; }
}
.field label {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.field input {
  min-height: 46px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-base);
  color: var(--text-strong); background: var(--color-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  width: 100%;
}
.field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.field input:user-invalid { border-color: var(--danger); }
.delivery-form .state__actions, .delivery-form .form-msg, .delivery-form .terr-block { grid-column: 1 / -1; }

.form-msg { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0; }
.form-msg[data-state="error"] { color: var(--danger); }

.terr-block {
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.terr-block__title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 var(--space-2); }
.terr-block__body { font-family: var(--font-serif); color: var(--text-body); font-size: var(--text-base); margin: 0 0 var(--space-3); max-width: 60ch; }
.terr-block__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ============================================================
   18. State 3 — who installs
   ============================================================ */
.install-choice { border: 0; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.install-opt {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer;
  transition: var(--transition-control);
}
.install-opt:hover { border-color: var(--border-strong); background: var(--color-surface-sunken); }
.install-opt input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.install-opt.is-selected { border-color: var(--accent); box-shadow: var(--ring-focus); }
.install-opt__body { display: flex; flex-direction: column; gap: var(--space-1); }
.install-opt__title { font-family: var(--font-serif); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); }
.install-opt__desc { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); max-width: 60ch; }
.install-opt__price { font-size: var(--text-sm); color: var(--text-strong); font-weight: var(--weight-semibold); margin-top: var(--space-1); }

/* ============================================================
   19. State 4 — review, finish (pay / finance), download
   ============================================================ */
.quote-review { margin-top: var(--space-2); }
.quote-review__loading { font-family: var(--font-serif); color: var(--text-muted); font-size: var(--text-md); padding: var(--space-6) 0; }

/* Terms & Conditions (State 4 quote + the printable quote document) */
.terms { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.terms__heading {
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle);
  margin: 0 0 var(--space-3);
}
.terms__list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-2); }
.terms__list li { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted); }
.terms__list a { color: var(--text-link); word-break: break-word; }

/* Arrow install scope of work (State 3) */
.scope {
  margin-top: var(--space-5);
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.scope__heading {
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle);
  margin: 0 0 var(--space-3);
}
.scope__line { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin: 0 0 var(--space-2); }
.scope__line:last-child { margin-bottom: 0; }
.scope__line strong { color: var(--text-strong); }

/* Cookie notice (GA4 / Bucket 9) — slim, dismissible, fixed bottom */
.cookie-notice {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 40;
  max-width: 640px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
}
.cookie-notice__text { flex: 1 1 220px; margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.cookie-notice__text a { color: var(--text-link); }
.cookie-notice[hidden] { display: none; }
@media print { .cookie-notice { display: none !important; } }

.quote-info {
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
}
.quote-info__title { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--space-1); }
.quote-info__body { font-family: var(--font-serif); font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-normal); margin: 0; }

/* Pay seam atoms (reused from the old checkout) */
.pay-seam__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--success); background: var(--success-soft);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); margin-bottom: var(--space-3);
}
.pay-seam__lock {
  width: 11px; height: 9px; flex: 0 0 auto; margin-top: 2px;
  border: 1.75px solid currentColor; border-radius: 0 0 2px 2px; position: relative;
}
.pay-seam__lock::before {
  content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  width: 7px; height: 6px; border: 1.75px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0;
}
.pay-seam__assurances {
  list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted);
}
.pay-seam__assurances li { position: relative; padding-left: var(--space-6); }
.pay-seam__assurances li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 5px; border: 2px solid var(--success);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

.finish {
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.finish__title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 var(--space-2); line-height: var(--leading-snug); }
.finish__lede { font-family: var(--font-serif); font-size: var(--text-md); color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 60ch; }
.finish__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 680px) { .finish__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.finish__card {
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.finish__card-title { font-family: var(--font-serif); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); margin: 0; }
.finish__card-body { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); margin: 0; flex: 1 1 auto; }
.finish__fine { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); margin: 0; }
.finish__seam-note { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-body); background: var(--info-soft); border: 1px solid var(--info); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0 0; line-height: var(--leading-normal); }
.finish__seam-note a { color: var(--text-link); font-weight: var(--weight-semibold); }
.finish__or { margin-top: var(--space-4); }

/* Pay-method choice (< $20k) */
.pay-choice { border: 0; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pay-opt {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; transition: var(--transition-control);
}
.pay-opt:hover { border-color: var(--border-strong); }
.pay-opt input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.pay-opt.is-selected { border-color: var(--accent); box-shadow: var(--ring-focus); }
.pay-opt__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.pay-opt__title { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-strong); }
.pay-opt__amt { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); }
.pay-opt__sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); }
.pay-total {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.pay-total__label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }
.pay-total__amt { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-strong); margin-left: auto; }
.pay-total__note { width: 100%; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); }

/* Download / email-quote form */
.dl-form { margin-top: var(--space-2); }
.dl-form__label { display: block; font-family: var(--font-sans); font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.dl-form__row { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 480px) { .dl-form__row { flex-direction: row; } }
.dl-form__input {
  flex: 1 1 auto; min-height: 44px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-base);
  color: var(--text-strong); background: var(--color-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.dl-form__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.dl-form__msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); min-height: 1.2em; }
.dl-form__msg[data-state="error"] { color: var(--danger); }
.dl-form__fine { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); margin: var(--space-2) 0 0; }

/* End-of-leg action bar (Download / Email / Print) — shared across all 3 funnel legs */
.leg-actions {
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.leg-actions__title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 var(--space-3); }
.leg-actions__gate {
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4);
}
.leg-actions__gate-label { display: block; font-family: var(--font-sans); font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.leg-actions__gate-row { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 480px) { .leg-actions__gate-row { flex-direction: row; } }
.leg-actions__input {
  flex: 1 1 auto; min-height: 44px; padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong);
  background: var(--color-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.leg-actions__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.leg-actions__have { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.leg-actions__have strong { color: var(--text-strong); }
.leg-actions__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.leg-actions__next { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.leg-actions__ico { flex: 0 0 auto; }
.leg-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.leg-actions__msg { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); min-height: 1.2em; }
.leg-actions__msg[data-state="ok"] { color: var(--success); }
.leg-actions__msg[data-state="error"] { color: var(--danger); }
.leg-actions__fine { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); margin: var(--space-2) 0 0; line-height: var(--leading-normal); }
.la-linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text-link); text-decoration: underline; cursor: pointer; }

/* ============================================================
   20. Quote document (emailed / printable)
   ============================================================ */
.quote-doc__success { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-6); }
.quote-doc__check {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--radius-circle);
  background: var(--success-soft); position: relative;
}
.quote-doc__check::after {
  content: ""; position: absolute; left: 12px; top: 9px;
  width: 8px; height: 14px; border: solid var(--success); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.quote-doc__heading { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--text-strong); margin: 0 0 var(--space-2); }
.quote-doc__sub { font-family: var(--font-serif); color: var(--text-muted); margin: 0; max-width: 60ch; }
.quote-doc__paper {
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-sm);
}
.quote-doc__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-bottom: 2px solid var(--text-strong); padding-bottom: var(--space-4); }
.quote-doc__brand { display: flex; align-items: center; gap: var(--space-3); }
.quote-doc__brand img { height: 34px; width: auto; }
.quote-doc__brand strong { font-family: var(--font-serif); font-size: var(--text-md); color: var(--text-strong); display: block; }
.quote-doc__division { font-family: var(--font-sans); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle); }
.quote-doc__meta { font-size: var(--text-xs); color: var(--text-muted); text-align: right; line-height: var(--leading-relaxed); }
.quote-doc__ship { margin-top: var(--space-5); }
.quote-doc__ship-label { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.quote-doc__ship-body { font-family: var(--font-serif); font-size: var(--text-base); color: var(--text-body); margin: var(--space-1) 0 0; line-height: var(--leading-normal); }
.quote-doc__table { width: 100%; border-collapse: collapse; margin-top: var(--space-5); font-size: var(--text-sm); }
.quote-doc__table th, .quote-doc__table td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.quote-doc__table thead th { font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.quote-doc__table .num { text-align: right; white-space: nowrap; }
.quote-doc__table tbody td { color: var(--text-body); }
.quote-doc__model { color: var(--accent); font-weight: var(--weight-semibold); }
.quote-doc__table tfoot th, .quote-doc__table tfoot td { font-family: var(--font-sans); font-weight: var(--weight-semibold); color: var(--text-body); font-size: var(--text-sm); border-bottom: 0; padding-top: var(--space-2); }
.quote-doc__table tfoot tr:first-child th, .quote-doc__table tfoot tr:first-child td { padding-top: var(--space-4); }
.quote-doc__table tfoot .quote-doc__grand th, .quote-doc__table tfoot .quote-doc__grand td { font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-md); border-top: 2px solid var(--text-strong); padding-top: var(--space-3); }
.quote-doc__note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-subtle); margin: var(--space-5) 0 0; line-height: var(--leading-normal); }
.quote-doc__contact { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-family: var(--font-serif); color: var(--text-muted); }
.quote-doc__contact strong { color: var(--text-strong); display: block; }
.quote-doc__contact p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.quote-doc__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media (max-width: 559px) {
  .quote-doc__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .quote-doc__table, .quote-doc__table tbody, .quote-doc__table tbody tr, .quote-doc__table tbody td { display: block; width: 100%; }
  .quote-doc__table tbody tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); }
  .quote-doc__table tbody td { border: 0; padding: 2px 0; }
}

/* ============================================================
   21. Editorial — article (buying guide) + value-list (why arrow)
   ============================================================ */
.article__block { margin-bottom: var(--space-8); }
.article__h2 {
  font-family: var(--font-serif); font-weight: var(--weight-semibold);
  font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--text-strong); margin: 0 0 var(--space-3);
}
.article p, .value-list__body {
  font-family: var(--font-serif); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 var(--space-4); max-width: 68ch;
}
.article__aside {
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-8) 0;
}
.link-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.link-list a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-link); font-weight: var(--weight-semibold); font-family: var(--font-sans); font-size: var(--text-sm); }

.value-list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 720px) { .value-list { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.value-list__item { background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.value-list__title { font-family: var(--font-serif); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 var(--space-2); }
.value-list__body { font-size: var(--text-base); margin-bottom: 0; }

.article-cta {
  background: var(--color-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6); text-align: center; margin-top: var(--space-10);
}
.article-cta__title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--text-strong); margin: 0 auto; max-width: 22ch; }
.article-cta__line { font-family: var(--font-serif); color: var(--text-muted); font-size: var(--text-md); max-width: 56ch; margin: var(--space-4) auto 0; }
.article-cta__actions, .closing__actions--pair { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

/* Footer link list */
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--font-serif); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none;
}
.site-footer__links a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.15em; }

/* ============================================================
   22. Hero image + focus rings for new controls
   ============================================================ */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; }
@media (min-width: 860px) { .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); } }
.hero__media {
  display: flex; justify-content: center; align-items: center;
  background: var(--color-surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-6);
}
.hero__img { display: block; width: auto; max-width: 100%; max-height: 360px; height: auto; object-fit: contain; }
@media (min-width: 860px) { .hero__img { max-height: 520px; } }

.quote-pill:focus-visible,
.qstep:focus-visible,
.qline__remove:focus-visible,
.qline__qtyinput:focus-visible,
.field input:focus-visible,
.dl-form__input:focus-visible,
.install-opt:focus-within,
.pay-opt:focus-within,
.stepper__item:focus-visible,
.link-arrow:focus-visible,
.link-list a:focus-visible,
.site-footer__links a:focus-visible {
  outline: none; box-shadow: var(--ring-focus);
}