/* eb-home.css: the home page's sections on top of eb-site.css (design.md:
   Hero, Application Search band, Popular Product Tile, Motorsport Band,
   Apparel Item for the product row). */

/* ---- hero: a tall photo on the pitch base, the copy left-aligned under a gradient scrim that
   fades to the right so the car stays visible (the KW-style middle ground) ---- */
.eb-home-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: 600px;
  padding: var(--spacing-80) 0;
  background: var(--surface-hero-base) center / cover no-repeat;
  color: var(--color-snow); text-align: left;
}
/* the clip carries black bars in its frame (13% of its height at the top and the bottom): the video runs 18% past
   the hero at both edges, so a box narrower than the clip's picture (every width under about 1440) crops them too */
.eb-home-hero__video { position: absolute; inset: -18% 0; z-index: -2; width: 100%; height: 136%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .eb-home-hero__video { display: none; } }
/* pause / play: top right of the hero, only while the pointer is over it, or always once paused and on touch screens */
.eb-home-hero__pause { position: absolute; top: var(--spacing-24); right: var(--spacing-24); z-index: 1; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--radius-lg); background: none; color: var(--color-snow); cursor: pointer; opacity: 0; transition: opacity 200ms ease-in-out; }
.eb-home-hero__pause svg { opacity: .6; transition: opacity 150ms ease-in-out; }
.eb-home-hero:hover .eb-home-hero__pause, .eb-home-hero__pause:focus-visible, .eb-home-hero__pause.is-paused { opacity: 1; }
.eb-home-hero__pause:hover svg, .eb-home-hero__pause:focus-visible svg { opacity: 1; }
.eb-home-hero__pause:focus-visible { outline: 2px solid var(--color-snow); outline-offset: 2px; }
.eb-home-hero__ico-play, .eb-home-hero__pause.is-paused .eb-home-hero__ico-pause { display: none; }
.eb-home-hero__pause.is-paused .eb-home-hero__ico-play { display: block; }
@media (hover: none) { .eb-home-hero__pause { opacity: 1; width: 48px; height: 48px; top: var(--spacing-16); right: var(--spacing-16); } .eb-home-hero__pause svg { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .eb-home-hero__pause { display: none; } }
.eb-home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .18) 100%), linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .35) 100%); }
.eb-home-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); width: 100%; }
/* desktop: the copy keeps a fixed 30px from the window's left edge instead of following the page column (Greg 2026-09-23) */
@media (min-width: 1260px) { .eb-home-hero__inner { margin-left: 0; padding-left: 130px; } }
.eb-home-hero h1 { max-width: 13ch; }
@media (min-width: 1280px) { .eb-home-hero h1.display--xl { font-size: 56px; } }
.eb-home-hero__lead { max-width: 560px; }
.eb-home-hero__cta { margin-top: var(--spacing-8); padding: 0 40px; height: 56px; border-radius: var(--radius-buttons); font-size: var(--text-body); }

/* ---- the "view all" toggles: a hidden checkbox, its label swaps its two texts ---- */
.eb-home-more__label { margin-top: var(--spacing-32); }
.eb-home-more__label span:last-child, .eb-home-more:checked ~ .eb-home-more__label span:first-child { display: none; }
.eb-home-more:checked ~ .eb-home-more__label span:last-child { display: inline; }

/* ---- the vehicle band (eb-chrome.css) is fog like the make band under it when shown: a hairline between the two ---- */
.eb-vehicle-band + .eb-home-makes { border-top: 1px solid var(--color-menu-line); }

/* ---- fog make band: light uppercase labels, an inset underline that thickens on hover ---- */
.eb-home-makes .container { display: flex; flex-direction: column; align-items: center; }
.eb-home-makes__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-16) var(--spacing-24); margin-top: var(--spacing-32); }
.eb-home-makes__row a {
  display: inline-block; padding-bottom: var(--spacing-4);
  color: var(--color-charcoal); font-size: var(--text-caption); font-weight: var(--font-weight-light); line-height: var(--leading-caption); text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--color-charcoal); transition: box-shadow 150ms ease-in-out, font-weight 150ms ease-in-out;
}
.eb-home-makes__row a:hover, .eb-home-makes__row a:focus-visible { box-shadow: inset 0 -3px 0 var(--color-charcoal); font-weight: var(--font-weight-bold); }
.eb-home-makes__rest { display: none; }
.eb-home-more:checked ~ .eb-home-makes__row .eb-home-makes__rest { display: block; }

/* ---- popular products: one 4-column tile grid (2 on a phone) of the biggest categories ---- */
.eb-home-popular .container { display: flex; flex-direction: column; align-items: center; }
.eb-home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-48) var(--spacing-24); width: 100%; margin-top: var(--spacing-32); }
.eb-home-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-32);
  padding: var(--spacing-16); color: var(--color-charcoal); text-align: center; text-decoration: none;
  font-size: var(--text-body); font-weight: var(--font-weight-bold); text-transform: uppercase; line-height: var(--leading-body);
}
.eb-home-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--color-snow); }
.eb-home-tile:hover { text-decoration: none; color: var(--color-eibach-red); }

/* ---- eibach.com's popular products: the heading over 5 outline buttons (the open one filled), each a
   CSS-only tab holding its .com page's product groups (a centred head over a row of lines) and its
   one-product groups as cards. Radio, label and panel alternate; the panels drop under the button row. ---- */
.eb-home-lines__h { text-align: center; font-size: var(--text-display); font-weight: var(--font-weight-extrabold); line-height: var(--leading-display); }
.eb-home-lines__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-16); margin-top: var(--spacing-48); }
.eb-home-lines__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.eb-home-lines__tab { text-transform: none; }
.eb-home-lines__radio:checked + .eb-home-lines__tab { background: var(--color-charcoal); color: var(--color-snow); }
.eb-home-lines__radio:focus-visible + .eb-home-lines__tab { outline: 2px solid var(--color-charcoal); outline-offset: 2px; }
.eb-home-lines__panel { display: none; order: 1; width: 100%; flex-direction: column; gap: var(--spacing-64); margin-top: var(--spacing-48); }
.eb-home-lines__radio:checked + .eb-home-lines__tab + .eb-home-lines__panel { display: flex; }
.eb-home-lines__group { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eb-home-lines__gh { font-size: var(--text-heading); font-weight: var(--font-weight-extrabold); line-height: var(--leading-heading); }
.eb-home-lines__tagline { display: block; margin-top: var(--spacing-8); font-weight: var(--font-weight-bold); }
.eb-home-lines__summary { display: block; max-width: 760px; margin-top: var(--spacing-8); font-size: var(--text-nav); line-height: var(--leading-body-feature); }
.eb-home-lines__row { display: grid; grid-template-columns: repeat(var(--eb-n, 5), minmax(0, 1fr)); gap: var(--spacing-24); width: 100%; margin-top: var(--spacing-32); }
.eb-home-lines__item, .eb-home-lines__card { display: flex; flex-direction: column; align-items: center; height: 100%; color: var(--color-charcoal); text-align: center; text-decoration: none; }
.eb-home-lines__item:hover, .eb-home-lines__card:hover { color: var(--color-charcoal); text-decoration: none; }
.eb-home-lines__name { font-size: var(--text-body); font-weight: var(--font-weight-extrabold); line-height: var(--leading-body); text-transform: uppercase; }
.eb-home-lines__text { margin-top: var(--spacing-4); font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-home-lines__img { display: flex; align-items: center; justify-content: center; width: 100%; height: 240px; margin-top: var(--spacing-16); }
.eb-home-lines__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 200ms ease-in-out; }
.eb-home-lines__item:hover .eb-home-lines__img img, .eb-home-lines__card:hover .eb-home-lines__img img { transform: scale(1.04); }
.eb-home-lines__item:hover .eb-home-lines__name, .eb-home-lines__card:hover .eb-home-lines__cname { color: var(--color-eibach-red); }
.eb-home-lines__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-48) var(--spacing-24); }
.eb-home-lines__cards > li { flex: 0 0 calc((100% - 2 * var(--spacing-24)) / 3); }
.eb-home-lines__card .eb-home-lines__img { margin: 0 0 var(--spacing-24); }
.eb-home-lines__cname { font-size: var(--text-heading-sm); font-weight: var(--font-weight-extrabold); line-height: var(--leading-heading-sm); }
@media (prefers-reduced-motion: reduce) { .eb-home-lines__img img { transition: none; } .eb-home-lines__item:hover .eb-home-lines__img img, .eb-home-lines__card:hover .eb-home-lines__img img { transform: none; } }

/* ---- motorsport band: 630px of charcoal under a cover photo ---- */
.eb-home-motorsport {
  display: flex; align-items: center; min-height: 630px;
  background: var(--surface-charcoal-band) center / cover no-repeat; color: var(--color-snow);
}
.eb-home-motorsport__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); max-width: 720px; margin-left: max(var(--gutter), calc((100% - var(--page-max-width)) / 2 + var(--gutter))); }
.eb-home-motorsport__h { font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: var(--font-weight-black); text-transform: uppercase; }
.eb-home-motorsport p { line-height: var(--leading-body-feature); }
.eb-home-motorsport__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }

/* ---- product row: scroll-snap cards, bare chevrons either side ---- */
.eb-home-latest__head { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); }
.eb-home-rail-wrap { position: relative; margin-top: var(--spacing-32); }
.eb-home-rail {
  display: flex; gap: var(--spacing-24); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding: 0; -webkit-overflow-scrolling: touch;
}
.eb-home-rail::-webkit-scrollbar { display: none; }
.eb-home-card { flex: 0 0 calc((100% - 3 * var(--spacing-24)) / 4); scroll-snap-align: start; }
.eb-home-card a { display: flex; flex-direction: column; gap: var(--spacing-8); color: var(--color-charcoal); text-decoration: none; }
.eb-home-card__img { display: block; aspect-ratio: 1; background: var(--color-fog); }
.eb-home-card__img img { width: 100%; height: 100%; object-fit: contain; background: var(--color-snow); }
.eb-home-card__brand, .eb-home-card__promise { color: var(--color-ash); }
.eb-home-card__title { font-size: var(--text-body); font-weight: var(--font-weight-regular); }
.eb-home-card__price { font-weight: var(--font-weight-bold); }
.eb-home-card__price.is-sale { color: var(--color-eibach-red); }
.eb-home-card__price s { color: var(--color-ash); font-weight: var(--font-weight-regular); }
.eb-home-card a:hover .eb-home-card__title { text-decoration: underline; }
.eb-home-rail__btn {
  position: absolute; top: 30%; z-index: 1;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-buttons); cursor: pointer;
  background: var(--color-snow); color: var(--color-charcoal); opacity: .8; transition: opacity 150ms ease-in-out;
  display: inline-flex; align-items: center; justify-content: center;
}
.eb-home-rail__btn:hover { opacity: 1; }
.eb-home-rail__btn--prev { left: -8px; }
.eb-home-rail__btn--next { right: -8px; }

/* ---- phones ---- */
@media (max-width: 767.98px) {
  .eb-home-hero { min-height: 0; padding: var(--spacing-64) 0 var(--spacing-48); }
  .eb-home-hero h1 { max-width: none; }
  .eb-home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-48) var(--spacing-16); }
  .eb-home-tile { gap: var(--spacing-16); padding: var(--spacing-8); }
  /* eibach.com at 390: the buttons stack full width; a row of lines runs 2 across, the cards 1 */
  .eb-home-lines__h { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
  .eb-home-lines__tabs { flex-direction: column; align-items: stretch; margin-top: var(--spacing-32); }
  .eb-home-lines__panel { gap: var(--spacing-48); margin-top: var(--spacing-32); }
  .eb-home-lines__gh { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
  .eb-home-lines__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32) var(--spacing-16); }
  .eb-home-lines__img { height: 180px; }
  .eb-home-lines__cards > li { flex-basis: 100%; }
  .eb-home-motorsport { min-height: 480px; padding: var(--spacing-64) 0; }
  .eb-home-card { flex-basis: calc((100% - var(--spacing-16)) / 2); }
  .eb-home-rail { gap: var(--spacing-16); }
  .eb-home-rail__btn { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .eb-home-card { flex-basis: calc((100% - 2 * var(--spacing-24)) / 3); }
  .eb-home-lines__row { grid-template-columns: repeat(min(var(--eb-n, 5), 3), minmax(0, 1fr)); }
  .eb-home-lines__cards > li { flex-basis: calc((100% - var(--spacing-24)) / 2); }
}