/* eb-line.css: Shop by Product's pages on top of eb-site.css - the
   /shop-by-product index (with eb-page.css's Category Product Group) and
   the /lines/{slug} landing pages (with eb-listing.css for the listing).
   design.md: Hero "Product line", Category Product Group, Feature Section,
   the mega menu's quick-view card for the tiles. */

/* ---- the red ring tick before a benefit (the quick-view card's) ---- */
.eb-line-ticks { display: flex; flex-direction: column; gap: var(--spacing-8); }
.eb-line-ticks li { position: relative; padding-left: 26px; font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-line-ticks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23ED1C24' stroke-width='1.5'/%3E%3Cpath d='M4.8 8.2l2.1 2.1 4.3-4.5' fill='none' stroke='%23ED1C24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.eb-line-ticks--lg { gap: var(--spacing-16); }
.eb-line-ticks--lg li { padding-left: 34px; font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--font-weight-bold); }
.eb-line-ticks--lg li::before { top: 2px; width: 22px; height: 22px; }

/* ---- /shop-by-product ---- */
.eb-lindex__lead { max-width: 760px; }
.eb-lindex-jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-8); }
.eb-lindex-jump a {
  display: inline-block; padding: var(--spacing-8) var(--spacing-16); border: 1px solid var(--color-menu-line); border-radius: var(--radius-circle);
  color: var(--color-charcoal); font-size: var(--text-nav); font-weight: var(--font-weight-bold); text-transform: uppercase; white-space: nowrap;
  transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
}
.eb-lindex-jump a:hover { border-color: var(--color-charcoal); background: var(--color-fog); text-decoration: none; }
.eb-lindex-group { scroll-margin-top: var(--spacing-24); }

.eb-line-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-24); margin-top: var(--spacing-48); }
.eb-line-tile {
  position: relative; flex: 0 1 304px; display: flex; flex-direction: column; gap: var(--spacing-12); padding: var(--spacing-24);
  background: var(--color-snow); border: 1px solid var(--color-menu-line); border-radius: var(--radius-menu-card);
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.eb-line-tile:hover, .eb-line-tile:focus-within { border-color: var(--color-charcoal); box-shadow: var(--shadow-card); }
.eb-line-tile__title { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--font-weight-extrabold); text-transform: uppercase; }
.eb-line-tile__title a { color: var(--color-charcoal); }
.eb-line-tile__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole tile is the link */
.eb-line-tile__title a:hover { text-decoration: none; }
.eb-line-tile:hover .eb-line-tile__title a { text-decoration: underline; }
.eb-line-tile__title a:focus-visible { outline: 0; }
.eb-line-tile:focus-within { outline: 2px solid var(--color-charcoal); outline-offset: 2px; }
.eb-line-tile__desc { color: rgba(44, 44, 44, .68); font-size: var(--text-nav); line-height: var(--leading-caption); }
.eb-line-tile__ticks { margin-top: var(--spacing-4); }
.eb-line-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); margin-top: auto; padding-top: var(--spacing-16); border-top: 1px solid var(--color-fog); font-size: var(--text-nav); }
.eb-line-tile__count { color: var(--color-ash); }
.eb-line-tile__go { color: var(--color-eibach-red); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.eb-line-tile__go::after { content: " \203A"; }

/* ---- /lines/{slug}: the Product line hero ----
   .com's #hero: 465px tall (512px from 992px), the photo centered and covering, no wash
   (.com's hero photos come pre-darkened), the h1 as .com types it (2rem, 4rem from 1280px,
   800, not uppercased) with its subtitle the same size at 200 on its own line, then one
   button, 1rem between them and 1rem under the h1, the whole block centred */
.eb-line-hero {
  display: flex; align-items: center; min-height: 465px;
  background: radial-gradient(ellipse at 50% 0%, #3A3A3A 0%, var(--surface-charcoal-band) 70%); color: var(--color-snow);
  text-align: center; overflow: hidden;
}
.eb-line-hero__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.eb-line-hero__title { margin-bottom: 1rem; font-size: 2rem; font-weight: var(--font-weight-extrabold); line-height: 1.15; letter-spacing: -.025em; }
.eb-line-hero__sub { display: block; font-weight: 200; letter-spacing: inherit; }
.eb-line-hero__cta { letter-spacing: -.025em; text-transform: none; } /* sentence case, unlike the site's other buttons (Greg 2026-09-24) */
.eb-line-hero__vehicle { padding: var(--spacing-12) var(--spacing-24); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-buttons); }
.eb-line-hero__vehicle a { margin-left: var(--spacing-8); color: var(--color-snow); font-weight: var(--font-weight-bold); text-decoration: underline; }
.eb-line-hero__vehicle a:hover { color: var(--color-eibach-red); }
@media (min-width: 992px) { .eb-line-hero { min-height: 512px; } }
@media (min-width: 1280px) { .eb-line-hero__title { font-size: 4rem; } }

/* the hero with eibach.com's photo, full-bleed as .com's background-size: cover */
.eb-line-hero--image { position: relative; isolation: isolate; background: #2c2c2c; }
.eb-line-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* a colour car photo (eibach.de's heroes; hero.image_dark keeps .com's pre-darkened one): a wash,
   deepest behind the centred title, light enough at the edges that the car keeps its colour,
   and a soft shadow on the title for a bright patch of sky */
.eb-line-hero--colour::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(0, 0, 0, .56) 0%, rgba(0, 0, 0, .4) 55%, rgba(0, 0, 0, .22) 100%);
}
.eb-line-hero--colour .eb-line-hero__title { text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .45); }
.eb-line-hero--colour .eb-line-hero__vehicle { background: rgba(0, 0, 0, .35); }

/* ---- intro and benefits (design.md's Feature Section, copy beside the list) ---- */
.eb-line-about { padding: var(--section-gap) 0; }
.eb-line-about__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--spacing-64); align-items: start; }
.eb-line-about__intro { font-size: 20px; line-height: var(--leading-body-feature); font-weight: var(--font-weight-light); }
.eb-line-about__benefits { display: flex; flex-direction: column; gap: var(--spacing-24); padding-left: var(--spacing-32); border-left: 2px solid var(--color-eibach-red); }

/* ---- eibach.com's sections (partials/line-sections.html) ----
   A copy of .com's product-group page rules (eibach.com/css/app.css, body.product-group):
   Bootstrap's container and grid, .feature bands 396px tall at least (content box) with
   4rem / 7rem of padding and the content centered in them, grey on even bands, h2 36px and
   h3 32px at 900 (800 here, the font's heaviest), words at 1.5 leading, red-dot lists
   in bold, .com's -0.025em tracking. Only the font and the red are ours. */
.eb-lsecs { color: #000; line-height: 1.15; }
.eb-lsecs, .eb-lsecs *, .eb-lsource, .eb-lsource * { letter-spacing: -.025em; }
.eb-lsec { position: relative; box-sizing: content-box; display: flex; align-items: center; min-height: 396px; padding: 4rem 0; background: #fff; }
.eb-lsec.is-fog { background: #f2f2f2; }
.eb-lsec--gallery { background: #fff; }
.eb-vehicle-band + .eb-lsecs > .eb-lsec:first-child.is-fog { border-top: 1px solid var(--color-menu-line); } /* a grey first band meeting the grey vehicle band above it */
@media (min-width: 992px) { .eb-lsec { padding: 7rem 0; } }

/* Bootstrap's container and grid, b- prefixed */
.eb-lsec > .container, .eb-lsource > .container { width: 100%; max-width: none; margin: 0 auto; padding: 0 .75rem; }
@media (max-width: 576px) { .eb-lsec > .container, .eb-lsource > .container { padding: 0 1.5rem; } }
@media (min-width: 576px) { .eb-lsec > .container, .eb-lsource > .container { max-width: 540px; } }
@media (min-width: 768px) { .eb-lsec > .container, .eb-lsource > .container { max-width: 720px; } }
@media (min-width: 992px) { .eb-lsec > .container, .eb-lsource > .container { max-width: 960px; } .eb-lsec.feature-offset > .container { width: 990px; } }
@media (min-width: 1200px) { .eb-lsec > .container, .eb-lsource > .container { max-width: 1140px; } }
@media (min-width: 1400px) { .eb-lsec > .container, .eb-lsource > .container { max-width: 1320px; } }
.b-row { --gx: 1.5rem; --gy: 0px; display: flex; flex-wrap: wrap; margin: calc(var(--gy) * -1) calc(var(--gx) * -.5) 0; }
.b-row > * { flex-shrink: 0; width: 100%; max-width: 100%; margin-top: var(--gy); padding: 0 calc(var(--gx) * .5); }
.b-g-2 { --gx: .5rem; --gy: .5rem; } .b-g-3 { --gx: 1rem; --gy: 1rem; } .b-g-4 { --gx: 1.5rem; --gy: 1.5rem; } .b-g-5 { --gx: 3rem; --gy: 3rem; }
.b-gy-2 { --gy: .5rem; } .b-gy-3 { --gy: 1rem; } .b-gy-4 { --gy: 1.5rem; } .b-gy-5 { --gy: 3rem; }
.b-gx-2 { --gx: .5rem; } .b-gx-3 { --gx: 1rem; } .b-gx-4 { --gx: 1.5rem; } .b-gx-5 { --gx: 3rem; }
.b-g-0 { --gx: 0px; --gy: 0px; } .b-gy-0 { --gy: 0px; } .b-gx-0 { --gx: 0px; }
.b-col { flex: 1 0 0; }
.b-col-1 { flex: 0 0 auto; width: 8.33333333%; } .b-col-2 { flex: 0 0 auto; width: 16.66666667%; } .b-col-3 { flex: 0 0 auto; width: 25%; }
.b-col-4 { flex: 0 0 auto; width: 33.33333333%; } .b-col-5 { flex: 0 0 auto; width: 41.66666667%; } .b-col-6 { flex: 0 0 auto; width: 50%; }
.b-col-7 { flex: 0 0 auto; width: 58.33333333%; } .b-col-8 { flex: 0 0 auto; width: 66.66666667%; } .b-col-9 { flex: 0 0 auto; width: 75%; }
.b-col-10 { flex: 0 0 auto; width: 83.33333333%; } .b-col-11 { flex: 0 0 auto; width: 91.66666667%; } .b-col-12 { flex: 0 0 auto; width: 100%; }
.b-offset-0 { margin-left: 0; } .b-offset-1 { margin-left: 8.33333333%; } .b-offset-2 { margin-left: 16.66666667%; } .b-offset-3 { margin-left: 25%; }
.b-offset-4 { margin-left: 33.33333333%; } .b-offset-5 { margin-left: 41.66666667%; } .b-offset-6 { margin-left: 50%; } .b-offset-7 { margin-left: 58.33333333%; }
.b-offset-8 { margin-left: 66.66666667%; } .b-offset-9 { margin-left: 75%; } .b-offset-10 { margin-left: 83.33333333%; } .b-offset-11 { margin-left: 91.66666667%; }
@media (min-width: 768px) {
  .b-col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .b-col-md-6 { flex: 0 0 auto; width: 50%; } .b-col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .b-col-md-12 { flex: 0 0 auto; width: 100%; }
  .b-offset-md-0 { margin-left: 0; } .b-offset-md-1 { margin-left: 8.33333333%; } .b-offset-md-2 { margin-left: 16.66666667%; } .b-offset-md-3 { margin-left: 25%; }
}
@media (min-width: 992px) {
  .b-col-lg { flex: 1 0 0; width: auto; }
  .b-col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .b-col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .b-col-lg-3 { flex: 0 0 auto; width: 25%; }
  .b-col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .b-col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .b-col-lg-6 { flex: 0 0 auto; width: 50%; }
  .b-col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .b-col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .b-col-lg-9 { flex: 0 0 auto; width: 75%; }
  .b-col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .b-col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .b-col-lg-12 { flex: 0 0 auto; width: 100%; }
  .b-offset-lg-0 { margin-left: 0; } .b-offset-lg-1 { margin-left: 8.33333333%; } .b-offset-lg-2 { margin-left: 16.66666667%; } .b-offset-lg-3 { margin-left: 25%; }
  .b-offset-lg-4 { margin-left: 33.33333333%; } .b-offset-lg-5 { margin-left: 41.66666667%; } .b-offset-lg-6 { margin-left: 50%; } .b-offset-lg-7 { margin-left: 58.33333333%; }
  .b-offset-lg-8 { margin-left: 66.66666667%; } .b-offset-lg-9 { margin-left: 75%; } .b-offset-lg-10 { margin-left: 83.33333333%; } .b-offset-lg-11 { margin-left: 91.66666667%; }
}

/* type: .com's sizes at every width; p, ul and ol keep the browser's 1em margins, as there */
/* element rules at element weight (:where), as .com's are, so the grid's .b-row > * margins and paddings win over them the same way */
:where(.eb-lsecs) :is(h2, h3, h4) { margin: 0; color: #2c2c2c; font-weight: var(--font-weight-black); }
:where(.eb-lsecs) h2 { font-size: 2.25rem; }
:where(.eb-lsecs) h3 { font-size: 2rem; }
:where(.eb-lsecs) h4 { font-size: 1.5rem; }
:where(.eb-lsecs) p { margin-block: 1em; line-height: 1.5; }
:where(.eb-lsecs) ol { margin-block: 1em; padding-left: 40px; list-style: decimal; }
:where(.eb-lsecs) img { display: inline; vertical-align: baseline; }
:where(.eb-lsecs img[style*="--w"]) { width: var(--w); } /* .com's width="50%" attribute, weaker than any rule */
:where(.eb-lsecs) a:not(.eb-lgallery__link) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
:where(.eb-lsecs) .highlight { color: var(--color-eibach-red); }
.eb-lsec ul { display: flex; flex-direction: column; gap: 1rem; margin-block: 1em; padding-left: 1.125rem; list-style: none; color: #2c2c2c; font-weight: 700; line-height: 1.5; }
.eb-lsec ul li::before { content: "\2022"; display: inline-block; width: 1em; margin-left: -1em; color: var(--color-eibach-red); font-weight: 700; }
.eb-lsec.feature-offset .content-wrapper ul, .eb-lsec#summary .content-wrapper ul, .eb-lsec#summary2 .content-wrapper ul { color: #000; }
.eb-lsec li ul, .eb-lsec li ol { font-weight: 400; }
.eb-lsec.feature-text-center { text-align: center; }
.eb-lsec.feature-heading-center h2 { text-align: center; }
.eb-lsec.feature-image-center [class*="b-col-"] { display: flex; flex-direction: column; }
.eb-lsec.feature-image-center [class*="b-col-"] img { align-self: center; }
.eb-lsec.feature-align-center div { align-items: center; }
.eb-lsec > .container { position: static; }
/* a call to action .com has as .btn-lg.btn-primary ("Learn More") after the words */
.eb-lsec .content-wrapper > a, .eb-lsec [class*="b-col-"] > a:not(.eb-lgallery__link) {
  display: inline-block; min-width: 210px; padding: 1.0625rem 2.125rem; border-radius: 3px; background: var(--color-eibach-red); color: #fff;
  font-size: 1rem; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; vertical-align: middle;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.eb-lsec .content-wrapper > a:hover, .eb-lsec [class*="b-col-"] > a:not(.eb-lgallery__link):hover { background: var(--color-red-pressed); color: #e6e6e6; text-decoration: none; }

.eb-lanchor { display: block; }
/* a link into the marketing (#hd-spacer, a merged product's band) lands below the sticky header (72px, 118px on a phone) */
.eb-lsecs > .eb-lsec, .eb-lanchor, .eb-lillus__item[id], .eb-lsec li[id], .eb-lsource { scroll-margin-top: 96px; }
@media (max-width: 767.98px) { .eb-lsecs > .eb-lsec, .eb-lanchor, .eb-lillus__item[id], .eb-lsec li[id], .eb-lsource { scroll-margin-top: 136px; } }
img.is-unsized { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* feature: on a phone an even band's image goes above its words */
@media (max-width: 576px) {
  .eb-lsec.is-even .b-row .content-wrapper { order: 2; }
  .eb-lsec.is-even .b-row .image-wrapper { order: 1; }
}
.eb-lfeature__media img { max-width: 100%; height: auto; }
/* feature-offset: the tall image hangs 7rem out of its band, down into the next one
   (from-top) or up into the one before (from-bottom), over that band's empty padding */
.eb-lsec.feature-offset img { width: 100%; }
@media (min-width: 992px) {
  .eb-lsec.feature-offset.from-top img { position: absolute; bottom: -7rem; z-index: 1; width: auto; max-width: 100%; max-height: 512px; }
  .eb-lsec.feature-offset.from-bottom img { position: absolute; top: -7rem; z-index: 1; width: auto; max-width: 100%; max-height: 512px; }
}

/* illustration (#illustration): h3, graphic, words; the items row 7rem under an intro row */
.eb-lsec.is-illustration img { margin: 2rem 0 1rem; }
.eb-lsec.is-illustration p { margin: 0; }
.eb-lsec.is-illustration h2 + p { margin-top: 1rem; }
.eb-lsec.is-illustration p + img { margin-top: 3rem; margin-bottom: 0; }
.eb-lsec.is-illustration .b-row:nth-child(2) { margin-top: 7rem; }
.eb-lillus__img, .eb-lstep__img { height: auto; }
.eb-lillus__lead { height: auto; }
/* feature-spacer-systems (pro-spacer "Find Your Spacer") */
.eb-lsec.feature-spacer-systems .intro { text-align: center; }
.eb-lsec.feature-spacer-systems .intro img { margin-top: 1rem; }
.eb-lsec.feature-spacer-systems .systems { margin-top: 6rem; }
.eb-lsec.feature-spacer-systems .systems h3 { margin-bottom: 1rem; }
.eb-lsec.feature-spacer-systems .systems h3 span { margin-left: 1rem; font-weight: 400; }
.eb-lsec.feature-spacer-systems .systems p { margin-bottom: 3rem; }

/* comparison: .com's .table in a .table-responsive */
.eb-lsec.is-comparison p { margin-bottom: 3rem; }
.eb-ltable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eb-ltable { width: auto; min-width: 100%; border-collapse: collapse; background: #fff; }
.eb-ltable th, .eb-ltable td { padding: 1rem 2rem; border: 2px solid #f2f2f2; line-height: 1.15; }
.eb-ltable thead th { background: #2c2c2c; color: #fff; font-size: 1.5rem; font-weight: 700; text-align: left; }
.eb-ltable tbody th { font-size: 1.125rem; font-weight: 400; text-align: left; }
.eb-ltable tbody td { font-size: 1.125rem; font-weight: 700; }
.eb-lsec.feature-table .eb-ltable-wrap { margin-top: 3rem; }
.eb-lsec.feature-table .b-row:first-child { text-align: center; } /* .com's inline style on that row */
.eb-lsec.feature-table .eb-ltable { background: #f2f2f2; }
.eb-lsec.feature-table .eb-ltable th, .eb-lsec.feature-table .eb-ltable td { border-color: #fff; }
.eb-lsec.feature-table ul, .eb-ltable__rich ul { gap: .5rem; line-height: 1.15; }
.eb-ltable__rich { vertical-align: top; }

/* gallery (#vehicle-gallery): the title on a charcoal panel, the thumbnails two to a row */
.eb-lgallery__title { display: flex; align-items: center; justify-content: center; min-height: 316px; padding: 3rem; background: #2c2c2c; }
.eb-lsec .eb-lgallery__title h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 4rem); text-align: left; text-transform: uppercase; }
.eb-lgallery__link { display: inline; }
.eb-lgallery__img { width: 100%; height: auto; }
.eb-lgallery__link:focus-visible { outline: 2px solid var(--color-eibach-red); outline-offset: 2px; }

/* the full image over the page */
.eb-lightbox { max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; overflow: visible; }
.eb-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.eb-lightbox__img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 32px); margin: 0 auto; }
.eb-lightbox__close {
  position: absolute; top: -12px; right: -12px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--color-snow); color: var(--color-charcoal); font-size: 28px; line-height: 40px; cursor: pointer; box-shadow: var(--shadow-card);
}
@media (max-width: 767.98px) { .eb-lightbox__close { top: 8px; right: 8px; } }

/* videos (.feature-video-gallery): .com's 560x315 players under their h3 */
.eb-lsec.feature-video-gallery .b-row { row-gap: 6rem; }
.eb-lsec.feature-video-gallery .b-row h3 { margin-bottom: 2rem; text-align: center; }
.eb-lvideo iframe, .eb-lvideo video { display: block; margin: 0 auto; border: 0; background: #000; }
@media (max-width: 991.98px) { .eb-lvideo iframe, .eb-lvideo video { width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; } } /* .com's fixed 560px runs off a phone; ours shrinks */

/* steps (.feature-steps): small charcoal number squares hanging left of each step */
.eb-lsec.feature-steps h2 { padding: 1rem; }
.eb-lsec.feature-steps ol { counter-reset: eb-step; display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; list-style: none; }
.eb-lsec.feature-steps ol li { position: relative; counter-increment: eb-step; }
.eb-lsec.feature-steps ol li::before {
  content: counter(eb-step); position: absolute; top: 0; left: -2.5rem; display: inline-block; width: 1.125rem; height: 1.125rem; margin: 0;
  border-radius: 2px; background: #2c2c2c; color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.125rem; text-align: center;
}
.eb-lsec.feature-steps ol li h3 { font-size: 1rem; }
.eb-lsec.feature-steps ol li img { margin-top: 4rem; }
.eb-lcalc input { width: auto; padding: 0 .5rem; border: 1px solid #d2d2d2; border-radius: 3px; background: #f2f2f2; font: inherit; font-weight: 300; line-height: 3rem; } /* .com's input.gray */

/* html: any other .com section; .feature-difference is the 2.0 | words | 2.5 row */
.eb-lsec .feature-difference { align-items: center; margin-top: 7rem; }
.eb-lsec .feature-difference img, .eb-lhtml__img { height: auto; }

/* .com's banner-redirect (ERO "Learn more about multi-spring systems"): a 630px photo band, the heading and its button over it */
.eb-lsecs > .eb-lsec--banner { display: flex; align-items: center; height: 630px; min-height: 0; padding: 0; overflow: hidden; background: #2c2c2c; }
.eb-lbanner__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.eb-lsec--banner > .container { position: relative; z-index: 1; }
.eb-lsec .banner-content { color: #fff; }
.eb-lsec .banner-content h2 { color: #fff; font-size: 4rem; text-transform: uppercase; }
.eb-lsec .banner-content a { display: block; margin-top: 1rem; }
@media (min-width: 1280px) { .eb-lsec .banner-content a { display: inline-block; } }

/* a loose photo between sections: edge to edge, as tall as it is */
.eb-lsecs > .eb-lsec--photo { display: block; padding: 0; min-height: 0; background: #fff; }
.eb-lphoto { display: block; width: 100%; max-width: none; height: auto; }

/* an appended .com page's own hero on a merged line (Stage 2R, the coilovers...): .com's
   #hero, 465px tall (512px from 992px), the photo as it is, the title at the h1's size */
.eb-lsource {
  position: relative; isolation: isolate; display: flex; align-items: center; height: 465px;
  background: #2c2c2c; color: #fff; text-align: center; overflow: hidden;
}
.eb-lsource__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* .com's page had its search button (50px and a 1rem gap) under the title: the space stays, so
   the title sits where it does there */
.eb-lsource__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.eb-lsource > .eb-lsource__inner { padding-bottom: calc(50px + 1rem); }
.eb-lsource__title { margin: 0 0 1rem; color: #fff; font-size: 2rem; line-height: 1.15; font-weight: var(--font-weight-extrabold); }
.eb-lsource__title span { display: block; font-weight: 200; }
.eb-lsource__logo { width: 200px; height: auto; }
@media (min-width: 992px) { .eb-lsource { height: 512px; } }
@media (min-width: 1280px) { .eb-lsource__title { font-size: 4rem; } }

/* ---- the listing ---- */
.eb-line-parts { padding-top: var(--section-gap); scroll-margin-top: 96px; }  /* under the sticky header, like the line's other anchors */
@media (max-width: 767.98px) { .eb-line-parts { scroll-margin-top: 136px; } }
.eb-line-parts__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-8) var(--spacing-16); padding-bottom: var(--spacing-16); border-bottom: 1px solid var(--color-menu-line); }
.eb-line-parts__count { color: var(--color-ash); }
.eb-line-parts__note { margin-top: var(--spacing-16); padding: var(--spacing-12) var(--spacing-16); background: var(--color-fog); border-left: 3px solid var(--color-eibach-red); font-weight: var(--font-weight-semibold); }
.eb-line .eb-ls { margin-top: var(--spacing-24); }
.eb-line-empty { margin: var(--spacing-24) 0 var(--spacing-48); padding: var(--spacing-48) var(--spacing-24); background: var(--color-fog); text-align: center; }
.eb-line-empty p + p { margin-top: var(--spacing-24); }
.eb-line-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-16); }

@media (max-width: 989.98px) {
  .eb-line-about__inner { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .eb-line-about__benefits { padding-left: var(--spacing-24); }
}
@media (max-width: 767.98px) {
  .eb-line-about { padding: var(--spacing-48) 0; }
  .eb-line-about__intro { font-size: var(--text-lead); }
  .eb-line-tiles { margin-top: var(--spacing-32); }
  .eb-line-tile { flex-basis: 100%; }
  .eb-line-parts { padding-top: var(--spacing-48); }
}

/* == pixel-race == */
/* the multi-spring formula (.com's .align-char, .fraction and a browser-default hr) */
.eb-lformula .align-char { display: flex; }
.eb-lformula .align-char span { flex: 1; }
.eb-lformula .align-char span:first-of-type { padding-right: .5rem; text-align: right; }
.eb-lformula .align-char span:last-of-type { padding-left: .5rem; text-align: left; }
.eb-lformula__eq { display: flex; justify-content: center; align-items: center; }
.eb-lformula .fraction { display: inline-block; }
.eb-lformula .fraction hr { box-sizing: content-box; width: 100%; height: 0; margin: 0; overflow: visible; border: 1px inset; color: gray; background-color: #d2d2d2; }
.eb-lformula sub { position: relative; bottom: -.25em; font-size: 75%; line-height: 0; vertical-align: baseline; }
/* the inches-to-mm converter's boxes: the width .com's number inputs get from the browser */
.eb-lcalc input { width: 252px; max-width: 100%; }

/* == pixel-illus == */
/* Bootstrap's .justify-content-center on a row: columns that leave some of the 12 free sit centred */
.b-justify-content-center { justify-content: center; }
/* #intro (pro-alignment "Why are Alignment Parts Necessary?"): light 24px item headings, 3rem around the tyre drawings, items 3rem under the intro */
.eb-lsec#intro .b-row:nth-child(2) { margin-top: 3rem; }
.eb-lsec#intro h3 { font-size: 1.5rem; font-weight: 400; }
.eb-lsec#intro img { margin: 3rem 0; }

/* == pixel-shocks == */
/* an img's height="400px" (image.h, --h): the file sized by its height, its width following, as .com's attribute does */
.eb-lsecs img[style*="--h"] { width: auto; height: var(--h); }
/* item headings .com marks as h4 (the shock cutaways): Bootstrap's h4, 1.5rem at weight 700 */
:where(.eb-lsecs) h4 { font-weight: 700; line-height: 1.15; }
/* a .row nested in the words column (com.copy_row): its list is a padded column too, 3rem under the words, as .com's .row > * makes it */
.eb-lsec .eb-lfeature__copy > .b-row > :is(ul, ol) { margin-top: var(--gy); padding: 0 calc(var(--gx) * .5); }

/* == pixel-hero == */
/* a gallery title with a hyphenated name (DRAG-LAUNCH, PRO-SPACER...): Plus Jakarta sets those
   names 0-3% wider than .com's Inter, enough to push DRAG-LAUNCH (453px) past the 451px box
   and break it at the hyphen where .com keeps it whole; 2% smaller type breaks the lines where
   .com does (names wider than the box in Inter too, PRO-TRUCK-LIFT, still break there) */
.eb-lsec .eb-lgallery__title--hyphen h2 { font-size: calc(clamp(2rem, 4.2vw, 4rem) * .98); }

/* == pixel-tablet == */
/* 992-1399px: .com lets two things run past the right edge of the window (its page scrolls sideways there); ours stays inside it */
/* a right-hand hanging spring keeps .com's spot and size, and shrinks only as far as it must to end 12px short of the window's edge
   (its column is the row's last col-lg-2; the offset container is 960px wide below 1200px and 990px from there) */
@media (min-width: 992px) { .eb-lsec.feature-offset .image-wrapper.b-col-lg-2:last-child img { max-width: calc((100% - 960px) / 2 + 136px); } }
@media (min-width: 1200px) { .eb-lsec.feature-offset .image-wrapper.b-col-lg-2:last-child img { max-width: calc((100% - 990px) / 2 + 141px); } }
/* install videos: .com's fixed 560px player only fits its column from 1400px, so below that it shrinks to the column as on a phone */
@media (min-width: 992px) and (max-width: 1399.98px) { .eb-lvideo iframe, .eb-lvideo video { width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; } }

/* ---- "More products" before the footer (eibach.de's row): lines from the other menu groups,
   all in one row on a wide screen (4 to 6), three across on a tablet, a sideways row of cards on a phone ---- */
.eb-line-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-16); margin-bottom: var(--spacing-32); }
.eb-line-more__all { flex: none; color: var(--color-eibach-red); font-size: var(--text-nav); font-weight: var(--font-weight-bold); text-transform: uppercase; }
.eb-line-more__all::after { content: " \203A"; }
.eb-line-more__list { display: grid; grid-template-columns: repeat(var(--eb-more-n, 6), minmax(0, 1fr)); gap: var(--spacing-16); }
.eb-line-more__tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-snow); border: 1px solid var(--color-menu-line); border-radius: var(--radius-menu-card);
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.eb-line-more__tile:hover, .eb-line-more__tile:focus-within { border-color: var(--color-charcoal); box-shadow: var(--shadow-card); }
.eb-line-more__tile:focus-within { outline: 2px solid var(--color-charcoal); outline-offset: 2px; }
.eb-line-more__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-charcoal); }
.eb-line-more__body { display: flex; flex: 1; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-16); }
.eb-line-more__eyebrow { color: rgba(44, 44, 44, .68); }
.eb-line-more__title { font-size: 16px; line-height: 1.25; font-weight: var(--font-weight-extrabold); text-transform: uppercase; }
.eb-line-more__title a { color: var(--color-charcoal); }
.eb-line-more__title a::after { content: ""; position: absolute; inset: 0; } /* the whole tile is the link */
.eb-line-more__title a:hover { text-decoration: none; }
.eb-line-more__title a:focus-visible { outline: 0; }
.eb-line-more__tile:hover .eb-line-more__title a { text-decoration: underline; }
.eb-line-more__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  color: rgba(44, 44, 44, .68); font-size: var(--text-caption); line-height: var(--leading-caption);
}
.eb-line-more__count { margin-top: auto; padding-top: var(--spacing-8); color: var(--color-charcoal); font-size: var(--text-caption); font-weight: var(--font-weight-bold); }
.eb-line-more__count.is-empty { color: rgba(44, 44, 44, .68); font-weight: var(--font-weight-regular); }
@media (max-width: 1199px) { .eb-line-more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .eb-line-more__head { margin-bottom: var(--spacing-24); }
  .eb-line-more .container { padding-right: 0; }
  .eb-line-more__list {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-right: var(--gutter); padding-bottom: var(--spacing-4);
  }
  .eb-line-more__list::-webkit-scrollbar { display: none; }
  .eb-line-more__tile { flex: 0 0 72%; scroll-snap-align: start; }
  .eb-line-more__head { padding-right: var(--gutter); }
}