/* Homepage layout refinements. The guide pages and checkout use their own styles. */
.site-home {
  --home-panel: var(--km-panel);
  --home-raised: var(--km-raised);
  --home-border: var(--km-border);
  --home-muted: #c3c4be;
  --home-radius: 6px;
}

.hero-decision { display: contents; }
.marquee span { padding-inline-end: clamp(30px, 5vw, 82px); }
.marquee b { margin-inline-start: clamp(30px, 5vw, 82px); font-weight: inherit; }

.parents.fit-section { background: #171817; border-color: var(--home-border); }
.site-home .fit-guide,
.site-home .fit-buying-guide,
.site-home .gallery-thumb,
.site-home .question-column,
.site-home .safety-summary,
.site-home .ride-safety {
  background: var(--home-panel);
  border-color: var(--home-border);
  border-radius: var(--home-radius);
}
.site-home .fit-tabs,
.site-home .fit-tabs button+button,
.site-home .fit-copy,
.site-home .fit-dimensions,
.site-home .fit-next,
.site-home .fit-steps li,
.site-home .fit-age,
.site-home .order-heading,
.site-home .order-questions,
.site-home .purchase-facts > div,
.site-home .question-group-heading,
.site-home .question-column > details + details { border-color: var(--home-border); }
.site-home .fit-tabs button:is([aria-selected="true"], :hover),
.site-home .fit-age,
.site-home .question-group-heading { background: var(--home-raised); }
.site-home .fit-guide { overflow: clip; }
.site-home .fit-art {
  background: radial-gradient(ellipse at 48% 55%, #303130, #1a1b1a 82%);
}
.site-home .fit-art-label,
.site-home .fit-art figcaption,
.site-home .fit-copy > p:not(.fit-kicker),
.site-home .fit-steps li,
.site-home .fit-aftercare p,
.site-home .gallery-caption,
.site-home .purchase-facts dd,
.site-home .product-subtitle,
.site-home .question-column details > p { color: var(--home-muted); }
.site-home .fit-tabs button { padding-block: 15px; min-height: 58px; }
.site-home .fit-art-label { top: 17px; }
.site-home .fit-help {
  min-width: 0;
  margin: 0;
  padding: 16px 23px 18px;
  background: var(--home-raised);
  border-top: 1px solid var(--home-border);
  font: 400 14px/1.5 Barlow, Arial, sans-serif;
  color: var(--home-muted);
}
.site-home .fit-help > strong { color: var(--paper); }
.site-home .fit-help p { margin: 5px 0 0; }
.site-home .fit-help a { text-decoration: underline; text-underline-offset: 3px; }
.site-home .fit-help > a { display: inline-block; margin-top: 6px; font-weight: 700; }
.site-home .fit-help .fit-help-small { margin-top: 8px; }
.site-home .fit-help a:hover { color: var(--orange); }

@media (min-width: 761px) {
  .site-home .fit-panel { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .site-home .fit-copy { padding: 24px clamp(18px, 2.25vw, 32px); }
  .site-home .fit-copy h3 { margin: 10px 0 13px; }
  .site-home .fit-copy h3 br { display: none; }
  .site-home .fit-art { padding-top: 27px; }
  .site-home .fit-art > svg { max-height: 390px; }
  .site-home .fit-key-number { font-size: clamp(66px, 6.7vw, 86px); }
  .site-home .fit-measure-heading { margin: 16px 26px 5px; }
  .site-home .fit-measure-heading > span { margin-top: 6px; }
  .site-home .fit-measure-art > svg { max-height: 310px; }
  .site-home .fit-steps li { padding-block: 9px; }
  .site-home .fit-dimensions { margin-top: 15px; padding-block: 13px; }
  .site-home .fit-copy .fit-note { margin-top: 12px; }
  .site-home .fit-copy .fit-next { margin-top: auto; padding-block: 13px 0; }
  .site-home #fit-panel-reach {
    grid-template-areas: 'art copy' 'help copy';
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #fit-panel-reach > .fit-art { grid-area: art; }
  #fit-panel-reach > .fit-copy { grid-area: copy; }
  #fit-panel-reach > .fit-help { grid-area: help; }
  .site-home #fit-panel-reach .fit-art > svg { max-height: 305px; }
}

.site-home .fit-aftercare article { grid-template-columns: 24px minmax(0, 1fr); }
.site-home .fit-aftercare > article > .safety-icon { width: 24px; height: 24px; }
.site-home .fit-aftercare article a,
.site-home .fit-buying-guide a,
.site-home .parent-contact a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 36px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  font-weight: 700;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 5px;
}
.site-home :is(.fit-aftercare, .fit-buying-guide, .parent-contact) a:hover { color: var(--orange); }
.site-home :is(.fit-aftercare, .fit-buying-guide, .parent-contact) a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.site-home .purchase-summary {
  padding: clamp(18px, 2.3vw, 30px);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  background: var(--home-panel);
}
.site-home .order-copy .price-line { margin-top: 16px; gap: clamp(12px, 2vw, 22px); }
.site-home .order-copy .price-line > .delivery-summary { border-color: var(--home-border); color: var(--home-muted); }
.site-home .purchase-action { margin-top: 19px; }
.site-home .purchase-action .button { width: 100%; justify-content: center; min-height: 50px; }
.site-home .purchase-facts { margin-top: 16px; font-size: 15px; line-height: 1.55; }
.site-home .purchase-facts > div:first-child { border-top: 0; }
.site-home .purchase-facts > div { padding-block: 12px; }
.site-home .safety-summary { border-color: #b04e2d; font-family: Barlow, Arial, sans-serif; font-size: 15px; }
.site-home .safety-summary h3 { font-family: inherit; font-size: 15px; }
.site-home .safety-summary .safety-fuel {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--home-border);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
}
.site-home .order-word { color: #303130; }
.site-home .gallery-thumb { color: var(--home-muted); }
.site-home .gallery-thumb:is(:hover, .selected) { border-color: var(--orange); color: var(--paper); }
.site-home .gallery-thumb.selected { background: var(--home-raised); }
.site-home .question-group-icon { border-radius: var(--home-radius); }
.site-home .question-icon { width: 22px; height: 22px; color: #ff9c77; }

.site-home .racing-highlight {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #0b0c0b;
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
}
.site-home .racing-promo-preview figcaption { font-size: 10px; }

.site-home .home-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.55fr;
  gap: 24px 36px;
  padding: 24px 0;
  margin-bottom: 14px;
  border-block: 1px solid var(--home-border);
}
.home-footer-group h2 {
  color: var(--paper);
  font: 700 12px/1.4 Barlow, Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 9px;
}
.home-footer-group ul { display: grid; list-style: none; margin: 0; padding: 0; }
.home-footer-group:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.home-footer-group a { display: flex; align-items: center; min-height: 34px; color: var(--home-muted); }

@media (max-width: 760px) {
  .site-home .header-buy { white-space: nowrap; }
  .site-home .hero-decision {
    position: absolute;
    inset: auto var(--pad) 16.5%;
    display: grid;
    gap: 6px;
  }
  .site-home .hero-decision :is(.hero-caption, .hero-price, .hero-status) {
    position: static;
    max-width: none;
    text-align: left;
  }
  .site-home .hero-caption h2 { font-size: clamp(26px, 7vw, 40px); }
  .site-home .hero-caption h2 br { display: none; }
  .site-home .hero-caption h2 em::before { content: ' '; }
  .site-home .hero-caption p { max-width: none; margin: 5px 0 0; font-size: 15px; }
  .site-home .hero-price { display: flex; align-items: center; gap: 13px; }
  .site-home .hero-price > strong { font-size: 29px; }
  .site-home .hero-price > span { display: none; }
  .site-home .hero-price .text-link { margin: 0 0 0 auto; font-size: 14px; padding-block: 7px; }
  .site-home .hero-status { font-size: 13px; margin: 0; }
  .site-home .fit-enhanced .fit-panel[hidden] { display: none; }
  .site-home .fit-copy { min-height: 0; }
  .site-home .fit-measure-art .fit-art-label { top: 15px; }
  .site-home #fit-panel-reach { grid-template-rows: auto auto auto; }
  .site-home .fit-aftercare { gap: 20px; }
  .site-home .fit-aftercare p { font-size: 15px; }
  .site-home .order-copy .price-line > strong { font-size: clamp(31px, 9vw, 39px); }
  .site-home .order-copy .price-line > .delivery-summary { padding-left: 13px; }
  .site-home .order-copy .safety-summary { margin-top: 12px; }
  .site-home .home-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .home-footer-group:last-child { grid-column: 1 / -1; }
  .home-footer-group a { min-height: 39px; }
}

@media (max-width: 760px) and (max-height: 690px) {
  .site-home .hero-decision { bottom: 12%; gap: 4px; }
  .site-home .hero-caption h2 { font-size: clamp(23px, 6.4vw, 31px); }
  .site-home .hero-caption p { font-size: 14px; }
  .site-home .hero-price > strong { font-size: 25px; }
}