/* eb-chrome.css: the header (top bar, navbar, mega menu, search strip,
   mobile drawer), the Shop by Vehicle dialog, the application
   search form and the footer. Built on eb-site.css's tokens; every class
   here is eb-hd-*, eb-menu-*, eb-as-* or eb-ft-*. Desktop is 1260px and up (below it the desktop actions no longer fit beside the nav),
   the mega menu's dropdown too; below that the nav lives in the drawer. */

/* ---- top bar ---- */
.eb-hd-top { background: var(--color-snow); border-bottom: 1px solid var(--color-topbar-line); color: var(--color-ash); font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-hd-top-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-4) var(--spacing-24); padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.eb-hd-top a { color: inherit; }
.eb-hd-top a:hover { color: var(--color-eibach-red); }

/* ---- header wrapper and navbar: one slim translucent grey bar (the KW-style middle ground:
   the logo small at the left, the nav beside it, pill actions at the right) ---- */
.eb-hd { display: contents; } /* no box of its own, so the wrapper below sticks against the page, not the header */
.eb-hd-wrap { position: sticky; top: 0; z-index: 999; background: rgba(241, 241, 241, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } /* no hairline under the bar: the logo sits flush on the page below */
.eb-hd-bar { position: relative; display: flex; align-items: stretch; gap: var(--spacing-32); height: 86px; }
/* the logo's red parallelogram fills the bar top to bottom, as on eibach.com */
.eb-hd-logo { display: flex; align-items: stretch; flex: 0 0 auto; }
.eb-hd-logo img { height: 86px; width: auto; display: block; }

/* pills: the header's action buttons, the only rounded controls on the site */
.eb-hd-pill { display: inline-flex; align-items: center; gap: var(--spacing-8); height: 40px; padding: 0 18px; border-radius: var(--radius-buttons); font-size: var(--text-nav); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out; }
.eb-hd-pill--red { background: var(--color-eibach-red); color: var(--color-snow); }
.eb-hd-pill--red:hover { background: var(--color-red-pressed); color: var(--color-snow); }
.eb-hd-pill--outline { background: transparent; border: 1px solid var(--color-charcoal); color: var(--color-charcoal); }
.eb-hd-pill--outline:hover { background: var(--color-charcoal); color: var(--color-snow); }

.eb-hd-nav { flex: 1 1 auto; display: flex; }
.eb-hd-links { display: flex; justify-content: flex-start; gap: var(--spacing-24); width: 100%; }
.eb-hd-links > li { display: flex; align-items: center; }
.eb-hd-link { display: inline-flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-8) 0; border-bottom: 2px solid transparent; color: var(--color-charcoal); font-size: 15px; font-weight: var(--font-weight-regular); line-height: var(--leading-nav); cursor: pointer; white-space: nowrap; }
.eb-hd-link:hover, .eb-hd-link:focus, .eb-hd-link:focus-visible, .eb-hd-link.is-active, .eb-menu-label[aria-expanded="true"] { color: var(--color-charcoal); border-bottom-color: var(--color-eibach-red); text-decoration: none; outline: 0; }

.eb-hd-actions { display: flex; align-items: center; gap: var(--spacing-12); flex: 0 0 auto; }
.eb-hd-part { cursor: pointer; }
.eb-hd-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-charcoal); cursor: pointer; }
.eb-hd-icon:hover { color: var(--color-eibach-red); }
.eb-hd-icon svg { width: 24px; height: 24px; }
.eb-hd-icon::before { content: ""; position: absolute; inset: -6px; } /* a 44px touch target around the 32px icon */
.eb-hd-badge { position: absolute; top: -9px; right: -9px; min-width: 18px; height: 18px; padding: 0 var(--spacing-4); background: var(--color-eibach-red); color: var(--color-snow); font-size: var(--text-eyebrow); font-weight: var(--font-weight-extrabold); line-height: 18px; text-align: center; }
.eb-hd-badge:empty { display: none; }

/* a submodel makes the label long ("2020 Ford F-150 Crew Cab Pickup 4WD 3.5L 213 V6"): wide screens have the room */

/* ---- search strip: toggled by the checkbox on desktop, always open below 1260 ---- */
.eb-hd-search-row { display: none; padding-bottom: var(--spacing-12); }
.eb-hd-search-check:checked ~ .eb-hd-search-row { display: block; }
.eb-hd-search-host { position: relative; }
.eb-hd-search { position: relative; display: flex; align-items: stretch; gap: var(--spacing-8); }
.eb-hd-search-input { flex: 1 1 auto; min-width: 0; padding: 0 var(--spacing-8); background: var(--color-search-field); border: 1px solid var(--color-search-line); border-radius: var(--radius-inputs); line-height: var(--search-line-height); height: calc(var(--search-line-height) + 2px); color: var(--color-charcoal); -webkit-appearance: none; appearance: none; }
.eb-hd-search-input:focus { outline: 0; border-color: #313131; }
.eb-hd-search-input::-webkit-search-cancel-button { display: none; }
.eb-hd-search-clear { position: absolute; top: 0; right: 118px; width: 40px; height: calc(var(--search-line-height) + 2px); border: 0; background: none; color: var(--color-ash); font-size: 24px; line-height: 1; cursor: pointer; }
.eb-hd-search-go { padding: 0 var(--spacing-24); height: calc(var(--search-line-height) + 2px); }

/* ---- Shop by Product mega menu (desktop, 1260px and up): eibach.com's product-line menu
   (dotcom-shop-by-product notes). The button opens it on click (eb-site.js: outside click and
   Escape close it, no hover-open, no animation); a white panel under the bar with the groups in
   4 columns x 2 rows from 1280px, 2 columns below. Its height is capped to the viewport by the
   script, so a short window scrolls the panel, not the page under it. ---- */
.eb-menu { position: static; }
.eb-menu-chev { flex: 0 0 auto; transition: transform .1s ease-in-out; }
.eb-menu-label { background: none; border: 0; border-bottom: 2px solid transparent; font-family: inherit; }
.eb-menu-label[aria-expanded="true"] .eb-menu-chev { transform: rotate(180deg); }
.eb-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-32); background: var(--color-snow); border-top: 1px solid var(--color-menu-line); box-shadow: var(--shadow-dropdown); }
.eb-mega[hidden] { display: none; }
.eb-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32); }
.eb-mega-heading { margin-bottom: var(--spacing-16); color: var(--color-ink); font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1.15; text-transform: uppercase; }
.eb-mega-list { display: flex; flex-direction: column; align-items: flex-start; margin-left: -12px; }
.eb-mega-link { display: inline-block; padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-menu-card); color: var(--color-nav-faded); font-size: var(--text-body); font-weight: var(--font-weight-regular); line-height: 1.15; }
.eb-mega-link:hover, .eb-mega-link:focus-visible { background: var(--color-fog); color: var(--color-charcoal); text-decoration: none; outline: 0; }
.eb-menu-count { margin-left: var(--spacing-8); color: var(--color-ash); font-size: var(--text-caption); font-weight: var(--font-weight-regular); white-space: nowrap; }
.eb-mega-link.is-empty .eb-mega-label { opacity: .55; }
/* the line the page is for: a charcoal pill, hover and focus keep it */
.eb-mega-link.is-current, .eb-mega-link.is-current:hover, .eb-mega-link.is-current:focus-visible { background: var(--color-charcoal); color: var(--color-snow); }
.eb-mega-link.is-current .eb-mega-label { opacity: 1; }
.eb-mega-link.is-current .eb-menu-count { color: rgba(255, 255, 255, .75); }
.eb-mega-foot { display: flex; gap: var(--spacing-24); margin-top: var(--spacing-32); padding-top: var(--spacing-16); border-top: 1px solid var(--color-fog); font-size: var(--text-nav); font-weight: var(--font-weight-bold); }
.eb-qv { display: none; }
@media (min-width: 1280px) {
  .eb-mega { padding: var(--spacing-32) var(--spacing-64); }
  .eb-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the quick-view card: beside the hovered or focused link, 14px off with an invisible 14px
     bridge so the pointer can cross; eb-site.js flips it left near the edge and nudges it
     inside the panel through --qv-x / --qv-y */
  .eb-mega-link { position: relative; }
  .eb-qv { position: absolute; top: -16px; left: calc(100% + 14px); z-index: 2; flex-direction: column; width: 300px; padding: var(--spacing-16); background: var(--color-snow); border: 1px solid var(--color-menu-line); border-radius: var(--radius-menu-card); box-shadow: var(--shadow-card); color: var(--color-charcoal); white-space: normal; text-align: left; cursor: pointer; opacity: 0; transform: translate(calc(var(--qv-x, 0px) - 4px), var(--qv-y, 0px)); transition: opacity .12s ease, transform .12s ease, display .12s allow-discrete; }
  .eb-qv::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 14px; }
  .eb-mega-link.is-left .eb-qv { left: auto; right: calc(100% + 14px); }
  .eb-mega-link.is-left .eb-qv::before { right: auto; left: 100%; }
  .eb-mega-link:hover .eb-qv, .eb-mega-link:focus-visible .eb-qv { display: flex; opacity: 1; transform: translate(var(--qv-x, 0px), var(--qv-y, 0px)); }
  @starting-style {
    .eb-mega-link:hover .eb-qv, .eb-mega-link:focus-visible .eb-qv { opacity: 0; transform: translate(calc(var(--qv-x, 0px) - 4px), var(--qv-y, 0px)); }
  }
}
.eb-qv-eyebrow { margin-bottom: var(--spacing-8); color: var(--color-eibach-red); font-size: var(--text-eyebrow); font-weight: var(--font-weight-extrabold); line-height: var(--leading-eyebrow); text-transform: uppercase; }
.eb-qv-title { margin-bottom: var(--spacing-12); font-size: var(--text-body); font-weight: var(--font-weight-bold); line-height: 1.2; }
.eb-qv-desc { margin-bottom: var(--spacing-16); color: rgba(44, 44, 44, .68); font-size: var(--text-caption); line-height: 1.55; }
.eb-qv-benefits { display: flex; flex-direction: column; gap: var(--spacing-12); }
.eb-qv-benefit { display: flex; align-items: center; gap: 10px; color: rgba(44, 44, 44, .78); font-size: var(--text-caption); line-height: 1.3; }
.eb-qv-check { display: inline-flex; flex: 0 0 16px; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--color-eibach-red); border-radius: 50%; color: var(--color-eibach-red); font-size: 10px; font-weight: var(--font-weight-extrabold); line-height: 1; }

/* ---- mobile drawer and its accordion (details/summary) ---- */
.eb-hd-menu { display: none; }
.eb-hd-burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 100%; list-style: none; cursor: pointer; color: var(--color-charcoal); }
.eb-hd-burger::-webkit-details-marker { display: none; }
.eb-hd-burger-close, .eb-hd-menu[open] .eb-hd-burger-open { display: none; }
.eb-hd-menu[open] .eb-hd-burger-close { display: block; }
.eb-hd-drawer { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; max-height: calc(100vh - 120px); overflow-x: hidden; overflow-y: auto; padding: var(--spacing-8) var(--gutter) var(--spacing-24); background: var(--color-snow); border-top: 1px solid var(--color-menu-line); box-shadow: var(--shadow-dropdown); }
.eb-hd-drawer-nav { display: flex; flex-direction: column; }
.eb-hd-drawer-link { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-12) 0; border-bottom: 1px solid var(--color-fog); color: var(--color-charcoal); font-size: var(--text-body); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; }
.eb-hd-drawer-link.is-active { color: var(--color-eibach-red); }
/* Shop by Product in the drawer: its entry is a label for the checkbox eb-sbp-check, which swaps
   the drawer's contents for the product panel sliding in from the right (a red Back row, then
   the groups as accordions, several open at once); no cards and no counts here */
.eb-sbp { display: none; }
.eb-sbp-check:checked ~ .eb-hd-drawer-nav, .eb-sbp-check:checked ~ .eb-hd-drawer-foot { display: none; }
.eb-sbp-check:checked ~ .eb-sbp { display: block; animation: eb-sbp-in .2s ease-out; }
.eb-sbp-check:focus-visible ~ .eb-hd-drawer-nav .eb-sbp-open { outline: 2px solid var(--color-eibach-red); outline-offset: 2px; }
@keyframes eb-sbp-in { from { transform: translateX(100%); } }
.eb-sbp-back { display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-12) 0; border-bottom: 1px solid var(--color-fog); color: var(--color-eibach-red); font-size: var(--text-body); font-weight: var(--font-weight-semibold); cursor: pointer; }
.eb-sbp-sum { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-12); padding: var(--spacing-12) 0; color: var(--color-ink); font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.2; text-transform: uppercase; cursor: pointer; list-style: none; }
.eb-sbp-sum::-webkit-details-marker { display: none; }
.eb-sbp-acc[open] > .eb-sbp-sum .eb-menu-chev { transform: rotate(90deg); }
.eb-sbp-acc[open] > .eb-sbp-list { animation: eb-sbp-reveal .2s ease-out; transform-origin: top; }
@keyframes eb-sbp-reveal { from { transform: scaleY(0); opacity: 0; } }
.eb-sbp-list { padding: 0 0 var(--spacing-12); }
.eb-sbp-link { display: block; padding: var(--spacing-12) var(--spacing-4); color: var(--color-nav-faded); font-size: var(--text-body); line-height: 1.15; }
.eb-sbp-link:hover { color: var(--color-charcoal); text-decoration: none; }
/* the line the page is for: the same charcoal pill as the mega menu, its text kept in line with the others */
.eb-sbp-link.is-current, .eb-sbp-link.is-current:hover { margin: 0 calc(-1 * var(--spacing-8)); padding-left: var(--spacing-12); padding-right: var(--spacing-12); border-radius: var(--radius-menu-card); background: var(--color-charcoal); color: var(--color-snow); }
.eb-sbp-foot { display: flex; flex-direction: column; gap: var(--spacing-12); margin-top: var(--spacing-8); padding-top: var(--spacing-16); border-top: 1px solid var(--color-fog); font-size: var(--text-nav); font-weight: var(--font-weight-bold); }
@media (prefers-reduced-motion: reduce) {
  .eb-sbp-check:checked ~ .eb-sbp, .eb-sbp-acc[open] > .eb-sbp-list { animation: none; }
}
.eb-hd-drawer-h { font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-8); }
.eb-hd-drawer-h span { color: var(--color-eibach-red); }
.eb-hd-drawer-foot { display: flex; flex-direction: column; gap: var(--spacing-16); padding-top: var(--spacing-16); font-size: var(--text-nav); color: var(--color-ash); }
.eb-hd-drawer-foot a { position: relative; color: var(--color-charcoal); }
.eb-hd-drawer-foot a::before { content: ""; position: absolute; inset: calc(-1 * var(--spacing-8)) 0; } /* the phone and mail links' touch targets fill the gaps */

@media (max-width: 1259.98px) {
  .eb-hd-bar { height: 60px; gap: var(--spacing-12); align-items: center; }
  .eb-hd-menu { display: block; align-self: stretch; }
  .eb-hd-logo { margin-right: auto; }
  .eb-hd-logo img { height: 60px; }
  .eb-hd-nav, .eb-hd-part, .eb-hd-actions > a:not(.eb-hd-cart) { display: none; }
  .eb-hd-search-row { display: block; padding-top: var(--spacing-12); } /* a gap under the logo */
  .eb-hd-search-go { display: none; }
  .eb-hd-search-clear { right: 0; }
}
@media (max-width: 767.98px) {
  .eb-hd-top-extra { display: none; }
  .eb-hd-top-row { gap: var(--spacing-4) var(--spacing-16); }
}
/* a phone on its side: the bar and search strip (130px) would hold a third of a 390px window, so they scroll away with the page */
@media (max-width: 1259.98px) and (max-height: 499.98px) {
  .eb-hd-wrap { position: relative; }
}

/* ---- Shop by Vehicle dialog ---- */
.eb-as-modal { width: min(1040px, calc(100% - 32px)); padding: var(--spacing-32); border: 0; border-radius: 0; background: var(--color-fog); color: var(--color-charcoal); }
.eb-as-modal::backdrop { background: var(--color-scrim); }
.eb-as-modal:has(.eb-ymm-field__panel:not([hidden])) { overflow: visible; } /* an open vehicle list runs past the dialog's edge */
.eb-as-modal > form[method="dialog"] { position: absolute; top: var(--spacing-8); right: var(--spacing-8); }
.eb-as-modal-close { width: 40px; height: 40px; border: 0; background: none; color: var(--color-charcoal); font-size: 28px; line-height: 1; cursor: pointer; }
.eb-as-modal-close:hover { color: var(--color-eibach-red); }
.eb-as-modal .eb-finder__title { margin: var(--spacing-8) 0; }
.eb-as-modal .eb-finder__lead { margin-bottom: var(--spacing-24); }
/* the dialog's fields and button run taller and larger than the site's inputs */
.eb-as-modal .eb-as-select, .eb-as-modal .eb-ymm-field__button { height: 60px; padding-left: var(--spacing-16); font-size: 18px; }
.eb-as-modal .eb-as-go { height: 60px; padding-left: var(--spacing-32); padding-right: var(--spacing-32); font-size: 18px; }

/* the finder's tabs (partials/finder.html): Vehicle and Race springs, in the dialog and a page's vehicle band */
.eb-as-tabs { display: flex; gap: var(--spacing-24); margin: 0 var(--spacing-32) var(--spacing-16) 0; border-bottom: 1px solid var(--color-menu-line); }
.eb-as-tab { margin-bottom: -1px; padding: var(--spacing-8) 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--color-ash); font: var(--font-weight-extrabold) var(--text-nav) / var(--leading-nav) var(--font-sans); letter-spacing: var(--tracking-base); text-transform: uppercase; cursor: pointer; }
.eb-as-tab:hover { color: var(--color-charcoal); }
.eb-as-tab[aria-selected="true"] { color: var(--color-charcoal); border-bottom-color: var(--color-eibach-red); }

/* ---- application search: Year / Make / Model / Search ---- */
.eb-as { display: flex; align-items: center; gap: var(--spacing-16); }
.eb-as-field { flex: 1 1 0; min-width: 0; display: block; }
.eb-as-select { -webkit-appearance: none; appearance: none; padding-right: var(--spacing-32); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%232C2C2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-8) center; background-size: 14px; }
.eb-as-select:disabled { background-color: var(--color-snow); opacity: .7; }
.eb-as-go { flex: 0 0 auto; height: var(--select-height); padding-top: 0; padding-bottom: 0; }
.eb-as-reset { flex: 0 0 auto; font-size: var(--text-nav); }
/* the submodel, when the API asks one: Year/Make/Model fill the first row, the submodel shares the second with Search */
@media (min-width: 768px) {
  .eb-as:has(.eb-as-field--submodel:not([hidden])) { flex-wrap: wrap; }
  .eb-as:has(.eb-as-field--submodel:not([hidden])) .eb-as-field { flex: 1 1 calc((100% - 2 * var(--spacing-16)) / 3); }
  .eb-as:has(.eb-as-field--submodel:not([hidden])) .eb-as-field--submodel { flex: 1 1 0; }
}
@media (max-width: 767.98px) {
  .eb-as { flex-direction: column; align-items: stretch; }
  .eb-as-field { flex-basis: auto; }
  .eb-as-go { width: 100%; }
  .eb-as-reset { text-align: center; }
}

/* ---- the vehicle pickers' dropdown control (eb-ymm-field.js): Northern Performance's control in eibach's
   clothes, in the application search and the product page's fit checker. The select is the hidden state; the
   button wears a select's clothes, its chevron points up while the list is open and turns to a red check once
   the step is picked; the list is an in-page panel under the field. Stacked on a phone, the steps are numbered. ---- */
.eb-ymm-field { position: relative; min-width: 0; counter-increment: eb-ymm-step; }
.eb-ymm-field > select { display: none; }
.eb-ymm-field__button {
  display: flex; align-items: center; gap: var(--spacing-8); width: 100%; height: var(--select-height); padding: 0 var(--spacing-16) 0 var(--spacing-8);
  border: 1px solid var(--color-muted); border-radius: var(--radius-inputs); background: var(--color-snow);
  color: var(--color-charcoal); font-weight: var(--font-weight-black); line-height: 1.2; text-align: left; cursor: pointer;
}
.eb-ymm-field__button:disabled { color: var(--color-ash); font-weight: var(--font-weight-regular); cursor: default; }
.eb-ymm-field__button[aria-expanded="true"], .eb-ymm-field__button:focus-visible { outline: 0; border-color: #313131; }
.eb-ymm-field__button:focus-visible { box-shadow: inset 0 0 0 1px #313131; }
.eb-ymm-field__button::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s, margin-top .15s;
}
.eb-ymm-field__button:not(:disabled):not(.eb-ymm-field__button--empty)[aria-expanded="false"]::after {
  width: 12px; height: 7px; border-right: 0; border-left: 2px solid var(--color-eibach-red); border-bottom-color: var(--color-eibach-red); transform: rotate(-45deg);
}
.eb-ymm-field__button[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(225deg); }
.eb-ymm-field__button::before { content: counter(eb-ymm-step); display: none; flex: none; min-width: 12px; margin-top: 3px; /* on the label's baseline */ font-size: var(--text-caption); font-weight: var(--font-weight-extrabold); color: var(--color-eibach-red); }
.eb-ymm-field__button:disabled::before { color: var(--color-muted); }
.eb-ymm-field__button:not(:disabled):not(.eb-ymm-field__button--empty)::before { color: var(--color-charcoal); }
.eb-ymm-field__panel {
  position: absolute; top: calc(100% + var(--spacing-4)); left: 0; right: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-snow); border: 1px solid var(--color-muted); box-shadow: var(--shadow-dropdown);
}
.eb-ymm-field__option {
  display: block; width: 100%; padding: var(--spacing-12) var(--spacing-16); border: 0; border-bottom: 1px solid var(--color-fog); background: none;
  color: var(--color-charcoal); font-weight: var(--font-weight-semibold); text-align: left; cursor: pointer;
}
.eb-ymm-field__option:last-child { border-bottom: 0; }
.eb-ymm-field__option:hover, .eb-ymm-field__option:focus-visible { outline: 0; background: var(--color-fog); }
.eb-ymm-field__option[aria-selected="true"] { color: var(--color-eibach-red); font-weight: var(--font-weight-extrabold); }
.eb-as, .eb-pd__picker { counter-reset: eb-ymm-step; }
@media (max-width: 767.98px) { .eb-as .eb-ymm-field__button::before { display: block; } }
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1259.98px) { .eb-pd__picker .eb-ymm-field__button::before { display: block; } }

/* ---- race spring picker (partials/springs.html): the application search's row with four selects, then the
   Metric switch and the count; tablets set the selects two by two ---- */
.eb-sp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-8) var(--spacing-24); margin-top: var(--spacing-12); font-size: var(--text-caption); }
.eb-sp__units { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-8); cursor: pointer; font-weight: var(--font-weight-semibold); }
.eb-sp__units::before { content: ""; position: absolute; inset: -11px 0; } /* a 40px touch target that moves nothing */
.eb-sp__units input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-charcoal); }
.eb-sp__count { margin: 0; color: var(--color-ash); }
.eb-sp__foot:has(.eb-sp__units[hidden]) { justify-content: flex-end; }
.eb-sp[aria-busy="true"] .eb-sp__count { opacity: .5; }
@media (min-width: 768px) and (max-width: 1259.98px) {
  .eb-sp__row { flex-wrap: wrap; }
  .eb-sp__row .eb-as-field { flex: 1 1 calc((100% - var(--spacing-16)) / 2); }
}
/* in the dialog the four selects sit two by two at every width, so "Any diameter" is never cut short beside
   the dialog's taller Search button, which then fills the last row */
@media (min-width: 768px) {
  .eb-as-modal .eb-sp__row { flex-wrap: wrap; }
  .eb-as-modal .eb-sp__row .eb-as-field { flex: 1 1 calc((100% - var(--spacing-16)) / 2); }
  .eb-as-modal .eb-sp__row .eb-as-go { flex: 1 1 auto; }
}
/* one unit system on the page: inches and lb/in unless the shopper picked metric (eb-springs.js) */
[data-eb-unit="mm"] { display: none; }
html[data-eb-units="mm"] [data-eb-unit="mm"] { display: inline; }
html[data-eb-units="mm"] [data-eb-unit="in"] { display: none; }

/* ---- vehicle band: a page's own application search under its hero (the line pages, the home),
   a fog strip with its heading centred over the selects ---- */
.eb-vehicle-band { padding: var(--spacing-48) 0; scroll-margin-top: var(--spacing-24); }
.eb-vehicle-band__title { margin-bottom: var(--spacing-24); text-align: center; text-transform: uppercase; }
.eb-vehicle-band__lead, .eb-vehicle-band__none { margin: calc(-1 * var(--spacing-12)) auto var(--spacing-24); max-width: 40rem; text-align: center; }
/* the finder in a band: its tabs centred over the fields, each tab's heading and lead as the band's */
.eb-vehicle-band .eb-as-tabs { justify-content: center; margin: 0 0 var(--spacing-24); }
.eb-vehicle-band .eb-finder__title { margin-bottom: var(--spacing-24); text-align: center; text-transform: uppercase; }
.eb-vehicle-band .eb-finder__lead { margin: 0 auto var(--spacing-24); max-width: 40rem; text-align: center; }
.eb-vehicle-band .eb-finder__title + .eb-finder__lead { margin-top: calc(-1 * var(--spacing-12)); }

/* ---- footer ---- */
.eb-ft { padding: var(--spacing-80) 0; background: var(--color-snow); }
.eb-ft-social { display: flex; justify-content: center; gap: var(--spacing-24); margin-bottom: var(--spacing-48); }
.eb-ft-social a { color: var(--color-charcoal); display: block; }
.eb-ft-social a:hover { color: var(--color-eibach-red); }
.eb-ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-48) var(--spacing-32); }
.eb-ft-h { margin-bottom: var(--spacing-16); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--font-weight-bold); }
.eb-ft-links { display: flex; flex-direction: column; gap: var(--spacing-8); font-size: var(--text-body); }
.eb-ft-links a { color: var(--color-charcoal); }
.eb-ft-links a:hover { color: var(--color-eibach-red); }
.eb-ft-address { font-style: normal; }
.eb-ft-about { line-height: var(--leading-body-feature); }
.eb-ft-copy { padding: var(--spacing-16) 0; background: var(--color-fog); font-size: var(--text-caption); line-height: var(--leading-caption); text-align: center; }
@media (max-width: 767.98px) {
  .eb-ft { padding: var(--spacing-48) 0; }
  .eb-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a finger's spacing: each link's touch target reaches halfway into the gaps */
  .eb-ft-links { gap: var(--spacing-16); }
  .eb-ft-links a { position: relative; }
  .eb-ft-links a::before { content: ""; position: absolute; inset: calc(-1 * var(--spacing-8)) 0; }
}
@media (max-width: 479.98px) { .eb-ft-cols { grid-template-columns: 1fr; } }

/* desktop: the bar runs edge to edge so the logo block starts at the window's left edge, as on eibach.com; the mega panel below keeps the page width.
   The right side sits 32px in, not the 16px gutter, so a scroll bar drawn over the page (macOS) never covers the cart and the icons beside it (Greg 2026-09-29) */
@media (min-width: 1260px) {
  .eb-hd-bar { max-width: none; padding-left: 0; padding-right: var(--spacing-32); }
  .eb-mega { left: 50%; right: auto; width: min(100%, var(--page-max-width)); transform: translateX(-50%); }
}

/* the account icon: signed in, the customer's first name beside it (wide screens only) */
.eb-hd-account.is-signed-in { width: auto; min-width: 32px; gap: 6px; }
.eb-hd-account-name { display: none; max-width: 10ch; overflow: hidden; font-size: var(--text-nav); font-weight: var(--font-weight-bold); text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1280px) { .eb-hd-account-name { display: inline; } }
.eb-hd-drawer-who { margin-left: var(--spacing-8); color: var(--color-ash); font-weight: var(--font-weight-regular); text-transform: none; }

/* ---- the desktop search field: from 1260 the script parks the search form in
   the actions' slot right of the red search icon, the grey search box joined
   to it and always open; the dropdown hangs under it right-aligned ---- */
.eb-hd-search-slot { display: none; }
@media (min-width: 1260px) {
  .eb-hd-search-slot { display: block; margin-left: calc(-1 * var(--spacing-12)); }
  .eb-hd-part { padding: 0 12px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .eb-hd-search-row.is-inline, .eb-hd-search-check:checked ~ .eb-hd-search-row.is-inline { display: none; }
  .eb-hd-search-slot .eb-hd-search-host { width: 195px; max-width: none; margin: 0; padding: 0; }
  .eb-hd-search-slot .eb-hd-search { gap: 0; }
  .eb-hd-search-slot .eb-hd-search-input { width: 100%; height: 40px; line-height: 38px; padding: 0 36px 0 var(--spacing-12); border-left: 0; border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0; font-size: var(--text-nav); }
  .eb-hd-search-slot .eb-hd-search-go { display: none; }
  .eb-hd-search-slot .eb-hd-search-clear { right: 0; height: 40px; }
  .eb-hd-search-slot .np-suggest { top: calc(100% + 8px); left: auto; right: 0; width: 480px; }
}
@media (min-width: 1440px) {
  .eb-hd-search-slot .eb-hd-search-host { width: 210px; }
}