/* eb-product.css: the product page (design.md, Product Page, Tabs, Feature
   Section bullets, Apparel Item cards) on the tokens and base components of
   eb-site.css. Two columns that stack on phones, a fog panel for the fit
   checker, radio-driven tabs with the Documents box beside them, the rail. */

.eb-pd { padding: var(--spacing-16) var(--gutter) var(--spacing-64); }
.eb-pd__top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--spacing-48); align-items: start; }
@media (max-width: 991.98px) { .eb-pd__top { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); } }

/* ---- gallery: the main image on white, thumbnails under it, a dialog zoom ---- */
.eb-pd__main { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--color-snow); cursor: zoom-in; }
.eb-pd__main img { width: 100%; height: 100%; object-fit: contain; }
.eb-pd__main--empty { background: var(--color-fog); cursor: default; }
.eb-pd__thumbs { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.eb-pd__thumb { width: 72px; height: 72px; padding: 0; border: 1px solid var(--color-silver); background: var(--color-snow); cursor: pointer; }
.eb-pd__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eb-pd__thumb.is-selected { border-color: var(--color-charcoal); }
.eb-pd__zoom { width: min(96vw, 1100px); max-height: 96vh; padding: var(--spacing-24); border: 0; background: var(--color-fog); color: var(--color-charcoal); }
.eb-pd__zoom::backdrop { background: var(--color-scrim); }
.eb-pd__zoom img { width: auto; max-width: 100%; max-height: calc(96vh - 140px); margin: 0 auto var(--spacing-16); object-fit: contain; background: var(--color-snow); }
.eb-pd__zoom .btn { margin: 0 auto; }

/* ---- info column ---- */
.eb-pd__info { display: flex; flex-direction: column; gap: var(--spacing-16); min-width: 0; }
.eb-pd__title { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.eb-pd__subtitle { margin-top: calc(-1 * var(--spacing-8)); font-size: var(--text-lead); line-height: var(--leading-lead); }
.eb-pd__part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-16); }
.eb-pd__brand { height: 28px; width: auto; }
.eb-pd__brand-name { font-weight: var(--font-weight-bold); }
.eb-pd__desc { line-height: var(--leading-body-feature); }
.eb-pd__desc p + p { margin-top: var(--spacing-12); }
.eb-pd__note { font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-pd__note .eyebrow, .eb-pd__alert .eyebrow { margin-right: var(--spacing-4); }
.eb-pd__universal { font-weight: var(--font-weight-bold); }

/* ---- the fit checker: a fog panel, three fields in a row, Engine under them when it decides ---- */
.eb-pd__fit { padding: var(--spacing-24); background: var(--color-fog); }
.eb-pd__fit-heading { margin-bottom: var(--spacing-16); font-size: var(--text-body); font-weight: var(--font-weight-bold); line-height: var(--leading-body); }
.eb-pd__picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); }
/* stacked on a phone, and in the narrow buy column beside the gallery up to 1260px, where three across leave a model name 100px */
@media (max-width: 575.98px), (min-width: 992px) and (max-width: 1259.98px) { .eb-pd__picker { grid-template-columns: minmax(0, 1fr); } }
/* each field is the vehicle pickers' dropdown control (eb-chrome.css, eb-ymm-field) */
.eb-pd__field[data-eb-fit-engine-field], .eb-pd__field[data-eb-fit-submodel-field] { grid-column: 1 / -1; }
.eb-pd__verdict { margin-top: var(--spacing-16); font-weight: var(--font-weight-bold); }
.eb-pd__alert { margin-top: var(--spacing-8); font-size: var(--text-caption); line-height: var(--leading-caption); }

/* ---- the buy stack: price, availability and ship line, quantity, Add to Cart, the free-shipping note ---- */
.eb-pd__buy { display: flex; flex-direction: column; gap: var(--spacing-16); }
.eb-pd__offer:empty { display: none; }
.eb-pd__price { font-size: var(--text-heading-sm); font-weight: var(--font-weight-bold); line-height: var(--leading-heading-sm); }
.eb-pd__price--sale [data-eb-price] { color: var(--color-eibach-red); }
.eb-pd__cur { font-size: var(--text-caption); font-weight: var(--font-weight-regular); color: var(--color-ash); }
.eb-pd__list { margin-left: var(--spacing-8); font-size: var(--text-body); font-weight: var(--font-weight-regular); color: var(--color-ash); }
.eb-pd__avail { margin-top: var(--spacing-4); }
.eb-pd__avail b + .eb-pd__ships::before { content: "\00b7"; margin: 0 var(--spacing-8); color: var(--color-ash); }
.eb-pd__form { display: flex; flex-direction: column; gap: var(--spacing-16); }
.eb-pd__qty { display: flex; align-items: center; gap: var(--spacing-12); font-weight: var(--font-weight-bold); }
.eb-pd__qty .input { width: 96px; text-align: center; font-weight: var(--font-weight-bold); }
.eb-pd__free { display: flex; align-items: center; gap: var(--spacing-8); }
.eb-pd__phone { font-weight: var(--font-weight-bold); }

/* ---- the details: the tabs, and the Documents box beside them on desktop (first, right after the offer, on phones) ---- */
.eb-pd__details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-48); margin-top: var(--spacing-64); }
@media (max-width: 991.98px) { .eb-pd__details--docs { margin-top: var(--spacing-32); } }
@media (min-width: 992px) {
  .eb-pd__details--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .eb-pd__details--split .eb-pd__tabs { grid-column: 1; grid-row: 1; }
  .eb-pd__details--split .eb-pd__docs { grid-column: 2; grid-row: 1; }
}
.eb-pd__details > .eb-pd__docs:only-child { max-width: 520px; }

/* ---- the Documents box: a heading on the tab row's rule, one row per PDF ---- */
.eb-pd__docs { min-width: 0; }
.eb-pd__docs-heading { display: flex; border-bottom: 1px solid var(--color-silver); font-size: var(--text-body); font-weight: var(--font-weight-bold); line-height: var(--leading-body); }
.eb-pd__docs-heading span { padding: var(--spacing-12) 0; margin-bottom: -1px; border-bottom: 2px solid var(--color-red-rule); }
.eb-pd__doc { display: flex; align-items: center; gap: var(--spacing-16); padding: var(--spacing-16) 0; border-bottom: 1px solid var(--color-silver); color: var(--color-charcoal); }
.eb-pd__doc:hover { text-decoration: none; }
.eb-pd__doc:hover .eb-pd__doc-title { text-decoration: underline; }
.eb-pd__doc-icon { flex: none; color: var(--color-charcoal); }
.eb-pd__doc-text { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }
.eb-pd__doc-title { font-weight: var(--font-weight-bold); line-height: var(--leading-body); overflow-wrap: anywhere; }
.eb-pd__doc-meta { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-ash); }
.eb-pd__doc-meta span::before { content: "\00b7"; margin: 0 var(--spacing-8); }

/* ---- tabs: radios drive the labels and the panels ---- */
.eb-pd__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.eb-pd__tablist { display: flex; flex-wrap: wrap; gap: var(--spacing-16); border-bottom: 1px solid var(--color-silver); }
.eb-pd__tab { padding: var(--spacing-12) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer; }
.eb-pd__panel { display: none; max-width: 960px; padding-top: var(--spacing-32); line-height: var(--leading-body-feature); }
#eb-pd-tab-height:checked ~ .eb-pd__tablist [for="eb-pd-tab-height"],
#eb-pd-tab-features:checked ~ .eb-pd__tablist [for="eb-pd-tab-features"],
#eb-pd-tab-specs:checked ~ .eb-pd__tablist [for="eb-pd-tab-specs"],
#eb-pd-tab-fits:checked ~ .eb-pd__tablist [for="eb-pd-tab-fits"],
#eb-pd-tab-warranty:checked ~ .eb-pd__tablist [for="eb-pd-tab-warranty"] { font-weight: var(--font-weight-bold); border-bottom-color: var(--color-red-rule); }
#eb-pd-tab-height:checked ~ .eb-pd__panels .eb-pd__panel--height,
#eb-pd-tab-features:checked ~ .eb-pd__panels .eb-pd__panel--features,
#eb-pd-tab-specs:checked ~ .eb-pd__panels .eb-pd__panel--specs,
#eb-pd-tab-fits:checked ~ .eb-pd__panels .eb-pd__panel--fits,
#eb-pd-tab-warranty:checked ~ .eb-pd__panels .eb-pd__panel--warranty { display: block; }

.eb-pd__features { display: flex; flex-direction: column; gap: var(--spacing-16); }
.eb-pd__features li { position: relative; padding-left: var(--spacing-24); }
.eb-pd__features li::before { content: "\2022"; position: absolute; left: 0; color: var(--color-eibach-red); font-weight: var(--font-weight-bold); }
.eb-pd__specs, .eb-pd__fit-table table { width: 100%; border-collapse: collapse; }
.eb-pd__specs th, .eb-pd__specs td, .eb-pd__fit-table th, .eb-pd__fit-table td { padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0; border-bottom: 1px solid var(--color-silver); text-align: left; vertical-align: top; }
.eb-pd__specs th { width: 40%; font-weight: var(--font-weight-bold); }
.eb-pd__fit-table { max-height: 520px; overflow: auto; }
.eb-pd__fit-table th { position: sticky; top: 0; background: var(--color-snow); font-weight: var(--font-weight-bold); }
.eb-pd__fit-table td:first-child { white-space: nowrap; }

/* ---- the Ride height table: application | front | rear, inches over mm, the page vehicle's row first and marked ---- */
.eb-pd__height-caption { margin-bottom: var(--spacing-16); font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-pd__height { max-height: 520px; overflow: auto; }
.eb-pd__height table { width: 100%; border-collapse: collapse; }
.eb-pd__height th, .eb-pd__height td { padding: var(--spacing-12) var(--spacing-16) var(--spacing-12) 0; border-bottom: 1px solid var(--color-silver); text-align: left; vertical-align: top; }
.eb-pd__height thead th { position: sticky; top: 0; background: var(--color-snow); font-weight: var(--font-weight-bold); }
.eb-pd__height tbody th { font-weight: var(--font-weight-regular); }
.eb-pd__height td { width: 7.5em; white-space: nowrap; }
.eb-pd__height td b { display: block; font-weight: var(--font-weight-bold); }
.eb-pd__height td span { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-pd__height tr.is-fitted > * { background: var(--color-fog); }
.eb-pd__height tr.is-fitted > :first-child { box-shadow: inset 3px 0 0 var(--color-eibach-red); padding-left: var(--spacing-12); }
.eb-pd__height tbody tr:not(.is-fitted) > :first-child { padding-left: var(--spacing-12); }
.eb-pd__height thead th:first-child { padding-left: var(--spacing-12); }
.eb-pd__height-yours { display: inline-block; margin-left: 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; white-space: nowrap; }
.eb-pd__height-sub { display: block; margin-top: var(--spacing-4); color: var(--color-ash); font-size: var(--text-caption); font-weight: var(--font-weight-regular); }
@media (max-width: 575.98px) { .eb-pd__height td { width: auto; } }

/* ---- the rail: Apparel Items ---- */
.eb-pd__rail { margin-top: var(--spacing-96); }
.eb-pd__rail .heading-sm { margin-bottom: var(--spacing-32); }
.eb-pd__rail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-24); }
@media (max-width: 767.98px) { .eb-pd__rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eb-pd__card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); color: var(--color-charcoal); text-align: center; }
.eb-pd__card:hover { text-decoration: none; }
.eb-pd__card:hover .eb-pd__card-title { text-decoration: underline; }
.eb-pd__card-img { display: block; width: 100%; aspect-ratio: 1; padding: var(--spacing-16); background: var(--color-fog); }
.eb-pd__card-img img { width: 100%; height: 100%; object-fit: contain; background: var(--color-snow); }
.eb-pd__card-price { font-weight: var(--font-weight-bold); }
.eb-pd__card-price--sale { color: var(--color-eibach-red); }
.eb-pd__card-price s { font-weight: var(--font-weight-regular); color: var(--color-ash); }

/* ---- the warranty card under the buy box ---- */
.eb-pd__warranty { display: flex; align-items: flex-start; gap: var(--spacing-16); margin-top: var(--spacing-24); padding: var(--spacing-16) var(--spacing-24) var(--spacing-16) var(--spacing-16); background: var(--color-fog); }
.eb-pd__warranty-icon { flex: none; color: var(--color-eibach-red); }
.eb-pd__warranty-heading { font-size: var(--text-body); font-weight: var(--font-weight-extrabold); line-height: var(--leading-body); text-transform: uppercase; }
.eb-pd__warranty-text { margin-top: var(--spacing-4); font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-pd__warranty-links { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-16); margin-top: var(--spacing-8); font-size: var(--text-caption); font-weight: var(--font-weight-bold); line-height: var(--leading-caption); }

/* a Special Order's acceptance box above Add to Cart (the cart refuses the part without it) */
.eb-pd__accept { display: flex; align-items: flex-start; gap: var(--spacing-8); font-size: var(--text-caption); line-height: var(--leading-caption); }
.eb-pd__accept input { flex: none; width: 18px; height: 18px; margin-top: 1px; }