/* The product page (templates/parts/product.html), the counter's: pictures | the part over its
   features | the price block pinned while the page scrolls, the verdict and the vendor's conditions
   under the price; the description beside the specifications, then every vehicle the part fits;
   the ride height per vehicle (.parts-rh) sits under the top in the fitment table's look. Ported
   from store.orbitalparts.ca's catalog.css. The classes the listing shares
   (.parts-crumbs, .parts-fit, .parts-stock, .parts-btn, .parts-qty, .parts-mono, the lightbox
   .parts-lb) are parts.css's; this page reads 16/24 where the listing reads 14/20
   (Greg: "the text on this page feels pretty small"), so the shared lines it shows (the crumbs, the
   verdict, the stock) take the page's size here and nothing else of them.
   Every colour, font and radius is a --parts-* token (tokens.css); the rules sit in @layer kit. */
@layer base, kit, site;

@layer kit {

.parts-product { max-width: var(--parts-max); margin: 0 auto; padding: 12px var(--parts-gut) 40px; color: var(--parts-ink); background: var(--parts-page); font-family: var(--parts-font); font-size: 16px; line-height: 24px; }
.parts-product :is(h1, h2) { margin: 0; font-weight: 600; letter-spacing: -.015em; }
.parts-product p { margin: 0; }
.parts-product table { border-collapse: collapse; width: 100%; }
.parts-product :is(a, button, input, summary):focus-visible { outline: 2px solid var(--parts-focus); outline-offset: 2px; }
.parts-product .parts-crumbs { font-size: 14px; line-height: 22px; }

/* the top: gallery | head and features | buy */
.parts-pdp { display: grid; grid-template-columns: 400px minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: "gal head buy" "gal feat buy"; gap: 14px 28px; align-items: start; margin-top: 4px; }
.parts-pdp > * { min-width: 0; }
.parts-pdp > .parts-gallery { grid-area: gal; }
.parts-pdp > .parts-pinfo { grid-area: head; }
.parts-pdp > .parts-pfeat { grid-area: feat; }
.parts-pdp > .parts-buy { grid-area: buy; }

/* the pictures */
/* the column is definite (minmax(0, 1fr)) and the photo sits absolutely in its box, so a photo larger than the box (a 451px
   K&N file in a 400px column on shop.beyondauto.ca) can neither widen the column nor stretch the box: it is contained */
.parts-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.parts-gallery__main { all: unset; position: relative; box-sizing: border-box; aspect-ratio: 1; width: 100%; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); display: grid; place-items: center; padding: 14px; background: var(--parts-photo-bg); }
button.parts-gallery__main { cursor: zoom-in; }
button.parts-gallery__main:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: 2px; }
.parts-gallery__main img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; display: block; }
.parts-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.parts-gallery__thumbs button { width: 56px; height: 56px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); padding: 4px; background: var(--parts-photo-bg); cursor: pointer; }
.parts-gallery__thumbs button:hover { border-color: var(--parts-fog); }
.parts-gallery__thumbs button[aria-current="true"] { border-color: var(--parts-ink); }
.parts-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* the part */
.parts-pinfo { display: grid; gap: 14px; }
.parts-pinfo__brand { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.parts-pinfo__brand img { height: 26px; width: auto; max-width: 140px; object-fit: contain; box-sizing: content-box; padding: 3px 6px; border-radius: var(--parts-radius-image); background: var(--parts-logo-bg); }
.parts-pinfo__brand a { font-size: 15px; color: var(--parts-steel); text-underline-offset: 3px; }
.parts-pinfo__brand a:hover { color: var(--parts-ink); }
.parts-pinfo__line { font-size: 15px; font-weight: 600; color: var(--parts-ink); }
.parts-pinfo h1 { font-size: 26px; line-height: 32px; }
.parts-pinfo__ids { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--parts-steel); }
.parts-pinfo__ids b { font: 700 17px var(--parts-mono); color: var(--parts-ink); letter-spacing: -.02em; }
.parts-pinfo__ids .parts-mono { color: var(--parts-ink); }
.parts-copy { all: unset; cursor: pointer; font-size: 14px; color: var(--parts-steel); text-decoration: underline; text-decoration-color: var(--parts-dove); text-underline-offset: 3px; margin-left: 6px; }
.parts-copy:hover { color: var(--parts-ink); }
.parts-copy:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: 2px; }

/* the specifications and the features */
.parts-specs { font-size: 15px; line-height: 22px; border-top: 1px solid var(--parts-dove); }
.parts-specs th, .parts-specs td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--parts-dove); vertical-align: top; }
.parts-specs th { width: 38%; font-weight: 500; color: var(--parts-steel); padding-right: 12px; }
.parts-specs td { overflow-wrap: anywhere; }
.parts-features { list-style: none; margin: 0; padding: 0; columns: 2 240px; column-gap: 24px; font-size: 15px; line-height: 22px; color: var(--parts-steel); }
.parts-features li { break-inside: avoid; padding: 3px 0 3px 16px; position: relative; }
.parts-features li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 1px; background: var(--parts-ink); }

/* the price block */
.parts-buy { position: sticky; top: 12px; border: 1px solid var(--parts-ink); border-radius: var(--parts-radius); display: grid; background: var(--parts-bg); }
.parts-buy__price { padding: 16px 18px 14px; display: grid; gap: 3px; }
.parts-buy__price small { font-size: 14px; color: var(--parts-steel); }
.parts-buy__price b { font: 700 34px/40px var(--parts-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.parts-buy__none { font-size: 16px; font-weight: 600; color: var(--parts-steel); padding: 6px 0 2px; }
.parts-buy__compare { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--parts-fog); }
.parts-buy__compare .parts-mono { color: var(--parts-steel); }
/* the verdict under the price, right aligned; the vendor's conditions on the fit in red under it, one line each;
   then the Fitment Alert, the operator's amber note, full width */
.parts-buy__fit { padding: 10px 18px 12px; border-top: 1px solid var(--parts-dove); display: grid; gap: 4px; justify-items: end; text-align: right; }
/* the verdict runs inline here, not as the listing's flex row, so a long one wraps with its mark at the head of its words, right aligned */
.parts-buy__fit .parts-fit { display: inline; font-size: 15px; line-height: 22px; text-align: right; }
.parts-buy__fit .parts-fit svg { display: inline; width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.parts-buy__note { color: var(--parts-red); font-size: 15px; line-height: 22px; font-weight: 500; }
/* the no verdict: 2 red lines, the second the underlined link to similar parts for the vehicle */
.parts-buy__verdict--no .parts-fit__similar { display: block; margin-top: 4px; color: var(--parts-red); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.parts-buy__verdict--no .parts-fit__similar:hover { color: var(--parts-ink); }
/* the Product Options (parts/_options.html, a products API term) under the verdict: the answers given as chips
   that ask again, the open question's answers as square tiles (40px at least, a picture tile where WeatherTech drew
   one), the ones this part fits ticked in the fit colour; once answered, what it fits instead and the parts that do */
.parts-opts { justify-self: stretch; display: grid; gap: 10px; margin-top: 6px; text-align: left; }
.parts-opts ul { list-style: none; margin: 0; padding: 0; }
.parts-opts__instead { text-align: right; font-size: 15px; line-height: 22px; font-weight: 500; }
.parts-opts__parts { display: grid; gap: 2px; justify-items: end; text-align: right; font-size: 15px; line-height: 22px; }
.parts-opts__parts a { color: var(--parts-ink); text-decoration: underline; text-underline-offset: 3px; }
.parts-opts__parts a:hover { text-decoration-thickness: 2px; }
.parts-opts__given { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.parts-opts__step { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--parts-ink); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink); font-size: 14px; line-height: 18px; text-decoration: none; }
.parts-opts__step svg { flex-shrink: 0; }
.parts-opts__step img { flex-shrink: 0; width: 28px; height: 28px; object-fit: contain; background: var(--parts-photo-bg); border-radius: var(--parts-radius); }
.parts-opts__step:hover { background: var(--parts-chip-bg); }
.parts-opts__ask { display: grid; gap: 8px; }
.parts-opts__q { font-size: 15px; line-height: 22px; font-weight: 600; }
.parts-opts__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.parts-opts__tile { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink); font-size: 15px; line-height: 20px; text-decoration: none; overflow-wrap: anywhere; }
.parts-opts__tile:hover { border-color: var(--parts-ink); }
.parts-opts__tile--fits { border-color: var(--parts-fit); }
.parts-opts__tick { flex-shrink: 0; color: var(--parts-fit); }
.parts-opts__tiles--pictures .parts-opts__tile { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px; }
.parts-opts__pic { display: block; aspect-ratio: 4 / 3; background: var(--parts-photo-bg); border-radius: var(--parts-radius); overflow: hidden; }
.parts-opts__pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.parts-opts__tiles--pictures .parts-opts__word { padding: 0 2px 2px; }
.parts-opts__tiles--pictures .parts-opts__tick { position: absolute; top: 10px; right: 10px; }
.parts-opts__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.parts-alert { display: flex; gap: 8px; padding: 8px 10px; background: var(--parts-alert-bg, #fdf6e8); border: 1px solid var(--parts-alert-rule, #f0dfb8); color: var(--parts-alert-ink, #6b4e12); border-radius: var(--parts-radius); font-size: 15px; line-height: 22px; }
.parts-alert b { font-weight: 600; flex-shrink: 0; }
.parts-buy__fit .parts-alert { justify-self: stretch; text-align: left; margin-top: 6px; }
.parts-buy__stock { position: relative; padding: 12px 18px; border-top: 1px solid var(--parts-dove); display: grid; gap: 8px; }
.parts-buy .parts-stock { font-size: 15px; line-height: 22px; gap: 2px; }
/* the state is a button (northernperformance.ca's): underlined so a thumb knows, its tap target
   stretched to 40px by the pseudo-element without moving the line; a tap opens the drawer of the four states */
.parts-stock__state { position: relative; display: inline; padding: 0; margin: 0; border: 0; min-height: 0; min-width: 0; width: auto; background: none; box-shadow: none; font: inherit; line-height: inherit; color: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.parts-stock__state::after { content: ""; position: absolute; left: -4px; right: -4px; top: -9px; bottom: -9px; }
.parts-stock__state:hover, .parts-stock__state[aria-expanded="true"] { text-decoration-thickness: 2px; }
.parts-stock__state:focus-visible { outline: 2px solid var(--parts-ink); outline-offset: 2px; }
.parts-states { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink); font-size: 14px; line-height: 20px; text-align: left; }
.parts-states__row { display: grid; gap: 1px; padding-left: 10px; border-left: 3px solid transparent; }
.parts-states__row b { font-weight: 600; }
.parts-states__row.is-current { border-left-color: var(--parts-ink); }
.parts-buy__form { padding: 14px 18px 16px; border-top: 1px solid var(--parts-dove); display: grid; gap: 10px; }
.parts-buy__row { display: flex; gap: 8px; }
.parts-buy__row .parts-btn { flex: 1; height: 44px; font-size: 16px; }
.parts-buy__nudge { padding: 14px 18px 16px; border-top: 1px solid var(--parts-dove); display: grid; gap: 8px; font-size: 15px; line-height: 22px; color: var(--parts-steel); }
.parts-buy__signin { height: 44px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* the quantity stepper: the number box between − and + */
.parts-stepper { display: inline-flex; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); height: 44px; overflow: hidden; }
.parts-stepper button { width: 40px; border: 0; background: var(--parts-cream); color: var(--parts-ink); cursor: pointer; font-size: 20px; line-height: 1; }
.parts-stepper button:hover { background: var(--parts-sand); }
.parts-stepper .parts-qty { border: 0; border-radius: 0; height: 42px; width: 60px; font-size: 16px; border-left: 1px solid var(--parts-dove); border-right: 1px solid var(--parts-dove); }

/* the lower band: the description | the specifications table, half each */
.parts-pdp-lower { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.parts-pdp-lower > .parts-pspecs:only-child { grid-column: 2; }
.parts-product .parts-h2 { font-size: 20px; line-height: 26px; margin-bottom: 14px; }  /* over the reset above, which zeroes every h2 */
.parts-desc__body { color: var(--parts-steel); font-size: 16px; line-height: 25px; display: grid; gap: 10px; }
.parts-desc__body :is(p, ul, ol) { margin: 0; }

/* every vehicle it fits */
.parts-fitment { margin-top: 32px; }
.parts-fitment__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.parts-fitment__bar h2 { font-size: 20px; line-height: 26px; margin-right: auto; }
.parts-fitment__count { font-weight: 400; font-size: 15px; color: var(--parts-fog); }
.parts-fitment__filter { width: 260px; height: 40px; padding: 0 12px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink); font: inherit; font-size: 16px; }
.parts-fitment__filter:focus { border-color: var(--parts-ink); outline: 2px solid var(--parts-focus); outline-offset: 0; }
.parts-ftable__wrap { max-height: 460px; overflow: auto; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); }
.parts-ftable { font-size: 15px; line-height: 22px; }
.parts-ftable th { text-align: left; font-weight: 500; font-size: 13px; color: var(--parts-steel); background: var(--parts-cream); padding: 8px 12px; border-bottom: 1px solid var(--parts-dove); position: sticky; top: 0; }
.parts-ftable td { padding: 7px 12px; border-bottom: 1px solid var(--parts-cream); }
.parts-ftable td.parts-mono { font-size: 14.5px; white-space: nowrap; }
.parts-ftable tr.is-yours td { background: var(--parts-accent-bg); font-weight: 600; }
.parts-ftable td.parts-ftable__note { min-width: 40ch; font-size: 14.5px; color: var(--parts-steel); }  /* the vendor's condition: wide enough to read, the table scrolls on a phone */

/* the ride height per vehicle: the fitment table's look; the range is the specs table's row, linked here */
.parts-rh__sub { color: var(--parts-steel); }
.parts-rhtable td.parts-rh__h { white-space: nowrap; font-variant-numeric: tabular-nums; }
.parts-rhtable td.parts-rh__h small { font-size: 13px; font-weight: 400; color: var(--parts-fog); }
.parts-rhtable td.parts-rh__note { font-size: 14.5px; color: var(--parts-steel); min-width: 40ch; }
.parts-rhtable td:first-child { min-width: 20ch; }  /* on a phone the table scrolls rather than squeeze the vehicle under a long note */
.parts-specs td a[href="#parts-ride-height"] { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--parts-dove); }

@media (max-width: 1080px) {
  .parts-pdp { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "gal head" "gal buy" "feat feat"; }
  .parts-buy { position: static; }
}

@media (max-width: 720px) {
  .parts-pdp { grid-template-columns: 1fr; grid-template-areas: "gal" "head" "buy" "feat"; }
  .parts-pdp-lower { grid-template-columns: 1fr; }
  .parts-pdp-lower > .parts-pspecs:only-child { grid-column: auto; }
  .parts-gallery__main { aspect-ratio: auto; height: 220px; }
  .parts-pinfo h1 { font-size: 28px; line-height: 34px; }  /* bigger than the desktop's 26px on a phone */
  .parts-fitment__filter { width: 100%; }
  .parts-ftable { min-width: 560px; }
}

}

/* the one note every ride height row shares, once under the table (decisions.md 47) */
.parts-rh__shared { margin: .5rem 0 0; font-size: .9em; color: var(--parts-steel); }

@layer kit {
/* a phone or a touch screen (0.9.1, the shop-page rules): the brand's link and the similar parts' link 40px targets */
@media (max-width: 760px), (pointer: coarse) {
  .parts-pinfo__brand { min-height: 40px; }
  .parts-pinfo__brand a { display: inline-flex; align-items: center; min-height: 40px; }
  .parts-fit__similar { display: inline-flex; align-items: center; min-height: 40px; }
  .parts-opts__parts a { display: inline-flex; align-items: center; min-height: 40px; }
}

}

/* The page's layout: the reading column and the buy rail (docs/prototype-2026-11-15-product-page.md). These rules
   sit outside the layers, so they hold over the shared rules above and over a site's shell: the page reads 16/26,
   one corner radius (--parts-radius), the site's ink, rules and Add from the tokens, red for a struck price's saving,
   green for a tick. A card is --parts-bg and a photo's plate --parts-photo-bg, so the dark kit flips them. */
.parts-product-page {
  --parts-mono: var(--parts-font);   /* money and numbers in the page's face, with tabular figures */
  --parts-p-line-soft: color-mix(in srgb, var(--parts-dove) 55%, var(--parts-bg));
  --parts-p-soft: color-mix(in srgb, var(--parts-cream) 40%, var(--parts-bg));
  --parts-p-soft-2: var(--parts-cream);
  --parts-p-sale: #d1221a;
  --parts-p-sale-ink: #fff;
  --parts-p-amber: #b86e00;
}
:root[data-parts-theme="dark"] .parts-product-page { --parts-p-sale: #ff7b6e; --parts-p-sale-ink: #121110; --parts-p-amber: #f0b34a; }

.parts-product-page .masthead { border-bottom: 1px solid var(--parts-dove); }

.parts-p-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.parts-p-num { font-variant-numeric: tabular-nums; }

/* the page */
.parts-product { font-family: var(--parts-font); font-size: 16px; line-height: 26px; padding: 18px var(--parts-gut) 96px; }
.parts-product .parts-crumbs { font-size: 14px; line-height: 22px; margin-bottom: 18px; }
.parts-product .parts-crumbs a { text-decoration: none; }
.parts-product .parts-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.parts-product .parts-crumbs [aria-current] { font-family: var(--parts-font); }

.parts-p-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  grid-template-areas: "head rail" "gal rail" "read rail";
  grid-template-rows: auto auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.parts-p-grid > * { min-width: 0; }
.parts-p-head { grid-area: head; }
.parts-p-gallery { grid-area: gal; }
.parts-p-read { grid-area: read; }
.parts-p-rail { grid-area: rail; align-self: stretch; }

/* the part's name */
.parts-p-head { display: grid; gap: 12px; padding-bottom: 24px; }
.parts-p-head__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 30px; }
.parts-p-head__brand img { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
.parts-p-head__brand a { font-size: 15px; font-weight: 600; color: var(--parts-ink); text-decoration: underline; text-decoration-color: var(--parts-dove); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.parts-p-head__brand a:hover { text-decoration-color: var(--parts-cta); }
.parts-p-head__line { font-size: 15px; font-weight: 700; }
.parts-product .parts-p-head h1 { font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.parts-p-head__num { font-size: 15px; }
.parts-p-head__num b { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* the gallery: one large picture, the thumbs under it */
.parts-p-gallery { gap: 12px; }
.parts-product .parts-p-gallery .parts-gallery__main { aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-photo-bg); }
.parts-product .parts-p-gallery .parts-gallery__main img { inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px); }
.parts-p-gallery__zoom { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--parts-bg); border: 1px solid var(--parts-dove); color: #0d1524; transition: border-color .15s; }
.parts-product button.parts-gallery__main:hover .parts-p-gallery__zoom { border-color: var(--parts-ink); }
.parts-product .parts-p-gallery .parts-gallery__thumbs { gap: 10px; }
.parts-product .parts-p-gallery .parts-gallery__thumbs button { width: 76px; height: 76px; padding: 6px; border-radius: var(--parts-radius); border-color: var(--parts-dove); background: var(--parts-photo-bg); }
.parts-product .parts-p-gallery .parts-gallery__thumbs button:hover { border-color: #9aa5b5; }
.parts-product .parts-p-gallery .parts-gallery__thumbs button[aria-current="true"] { border: 2px solid var(--parts-ink); padding: 5px; }

/* the reading column's sections */
.parts-p-read { padding-top: 8px; }
.parts-p-sec { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--parts-dove); }
.parts-product .parts-p-h2, .parts-product .parts-fitment__bar h2.parts-p-h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; }
.parts-product .parts-fitment__bar { margin-bottom: 16px; }
.parts-product .parts-fitment__bar h2.parts-p-h2 { margin: 0; }
.parts-product .parts-fitment { margin-top: 56px; }
.parts-product .parts-fitment__count { font-size: 16px; font-weight: 500; }

.parts-p-features { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; font-size: 16px; line-height: 24px; }
.parts-p-features li { position: relative; padding: 0 0 14px 22px; break-inside: avoid; }
.parts-p-features li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--parts-cta); }

.parts-product .parts-p-prose { color: var(--parts-ink); font-size: 17px; line-height: 29px; max-width: 68ch; gap: 14px; }

.parts-product .parts-p-specs { border-top: 0; font-size: 16px; line-height: 24px; background: var(--parts-bg); border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.parts-product .parts-p-specs th, .parts-product .parts-p-specs td { padding: 13px 18px; border-bottom: 1px solid var(--parts-p-line-soft); }
.parts-product .parts-p-specs tr:last-child :is(th, td) { border-bottom: 0; }
.parts-product .parts-p-specs th { width: 36%; font-weight: 600; color: var(--parts-ink); background: var(--parts-p-soft); }
/* a long sheet in two columns of label and value, read across */
@media (min-width: 901px) {
  .parts-product .parts-p-specs--two tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parts-product .parts-p-specs--two tr:nth-child(odd) { border-right: 1px solid var(--parts-p-line-soft); }
  .parts-product .parts-p-specs--two tr { display: grid; grid-template-columns: 46% minmax(0, 1fr); background: var(--parts-bg); border-bottom: 1px solid var(--parts-p-line-soft); }
  .parts-product .parts-p-specs--two :is(th, td) { width: auto; border-bottom: 0; padding: 12px 16px; }
  .parts-product .parts-p-specs--two tr:nth-last-child(-n+2):nth-child(odd), .parts-product .parts-p-specs--two tr:last-child { border-bottom: 0; }
  .parts-product .parts-p-specs--two th { background: var(--parts-p-soft); }
}

.parts-product .parts-ftable__wrap { border-color: var(--parts-dove); background: var(--parts-bg); max-height: 520px; }
.parts-product .parts-ftable { font-size: 15px; }
.parts-product .parts-ftable th { background: var(--parts-p-soft-2); white-space: nowrap; color: var(--parts-ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 10px 14px; border-bottom-color: var(--parts-dove); }
.parts-product .parts-ftable td { padding: 10px 14px; border-bottom-color: var(--parts-p-line-soft); }
.parts-product .parts-ftable td.parts-p-num { font-weight: 600; white-space: nowrap; }
.parts-p-nw { white-space: nowrap; }
.parts-product .parts-ftable td.parts-ftable__note { min-width: 16ch; }
.parts-product .parts-ftable tr.is-yours td { background: var(--parts-accent-bg); }
.parts-product .parts-ftable td.parts-ftable__note, .parts-product .parts-rhtable td.parts-rh__note, .parts-product .parts-rh__sub, .parts-product .parts-rh__shared { color: var(--parts-ink); }
.parts-product .parts-rhtable td.parts-rh__h small { color: var(--parts-ink); }
.parts-product .parts-fitment__filter { height: 44px; border-color: var(--parts-dove); font-family: var(--parts-font); }

.parts-p-rel { list-style: none; margin: 0; padding: 0; background: var(--parts-bg); border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); }
.parts-p-rel li + li { border-top: 1px solid var(--parts-p-line-soft); }
.parts-p-rel a { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto auto; grid-template-areas: "num what fits go" "num diff fits go"; align-items: center; column-gap: 16px; min-height: 52px; padding: 10px 18px; color: var(--parts-ink); text-decoration: none; }
.parts-p-rel a:hover { background: var(--parts-p-soft); }
.parts-p-rel a:hover .parts-p-rel__what { text-decoration: underline; text-underline-offset: 3px; }
.parts-p-rel__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.parts-p-rel__num { grid-area: num; }
.parts-p-rel__what { grid-area: what; }
.parts-p-rel__diff { grid-area: diff; font-size: 14px; line-height: 20px; }
.parts-p-rel__fits { grid-area: fits; }
.parts-p-rel__go { grid-area: go; }
.parts-p-rel__fits { display: inline-flex; align-items: center; gap: 6px; color: var(--parts-fit-strong); font-weight: 600; font-size: 14px; }
.parts-p-rel__fits svg { width: 16px; height: 16px; color: var(--parts-fit); }
.parts-p-rel__go { color: var(--parts-ink); }

/* the buy rail: a white card pinned for the whole scroll */
.parts-p-rail { padding-bottom: 8px; }
.parts-product .parts-p-buy {
  position: sticky; top: 20px;
  display: block;
  border: 1px solid var(--parts-dove);
  border-radius: var(--parts-radius);
  background: var(--parts-bg);
  box-shadow: 0 1px 2px rgb(13 21 36 / .04), 0 12px 32px -12px rgb(13 21 36 / .14);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.parts-p-price { padding: 22px 24px 20px; display: grid; gap: 6px; }
.parts-p-price__label { font-size: 14px; font-weight: 600; }
.parts-p-price__now b { display: block; font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--parts-p-sale); font-variant-numeric: tabular-nums; }
.parts-p-price__was { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.parts-p-price__was s { font-weight: 500; text-decoration-thickness: 1.5px; }
.parts-p-save { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--parts-radius); background: var(--parts-p-sale); color: var(--parts-p-sale-ink); font-size: 14px; font-weight: 700; letter-spacing: .005em; }
.parts-p-price__none { font-size: 18px; font-weight: 700; }

.parts-p-before { padding: 20px 24px 6px; border-top: 1px solid var(--parts-p-line-soft); }
.parts-p-before h2 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
.parts-p-checks { list-style: none; margin: 0; padding: 0; }
.parts-p-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 10px 0; font-size: 15.5px; line-height: 22px; }
.parts-p-check + .parts-p-check { border-top: 1px dashed var(--parts-dove); }
.parts-p-check__mark { display: block; width: 20px; height: 20px; margin-top: 1px; color: var(--parts-fit); }
.parts-p-check__mark svg { display: block; }
.parts-p-check--no .parts-p-check__mark { color: var(--parts-red); }
.parts-p-check--ask .parts-p-check__mark { color: var(--parts-p-amber); }
.parts-p-check--wait .parts-p-check__mark { color: var(--parts-ink); }
.parts-p-check__body { min-width: 0; display: grid; gap: 4px; }
.parts-p-check__main { font-weight: 500; }
.parts-p-check__main b { font-weight: 700; font-variant-numeric: tabular-nums; }
.parts-p-check--fits .parts-p-check__main { color: var(--parts-fit-strong); font-weight: 700; }
.parts-p-check--no .parts-p-check__main { color: var(--parts-red); font-weight: 700; }
.parts-p-check__note { color: var(--parts-red); font-weight: 500; }
.parts-p-check__link { justify-self: start; color: var(--parts-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.parts-p-check--alert { display: block; }
.parts-product .parts-p-check .parts-alert { font-size: 14.5px; line-height: 21px; border-radius: var(--parts-radius); }
.parts-product .parts-p-check .parts-opts { justify-self: stretch; text-align: left; margin-top: 6px; }
.parts-product .parts-p-check .parts-opts__given, .parts-product .parts-p-check .parts-opts__parts { justify-content: flex-start; justify-items: start; text-align: left; }
.parts-product .parts-p-check .parts-opts__instead { text-align: left; }

.parts-product .parts-p-buy .parts-buy__stock { position: relative; padding: 10px 0; border-top: 1px dashed var(--parts-dove); display: grid; gap: 12px; }
.parts-product .parts-p-buy .parts-stock { display: block; font-size: 15.5px; line-height: 22px; }
.parts-product .parts-p-buy .parts-stock b { font-weight: 700; }
.parts-product .parts-p-buy .parts-stock b::before { display: none; }
.parts-product .parts-stock__state { font-weight: 700; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.parts-product .parts-states { font-size: 14px; line-height: 20px; border-color: var(--parts-dove); background: var(--parts-p-soft); }

.parts-product .parts-p-add { padding: 16px 24px 8px; border-top: 0; display: grid; gap: 10px; }
.parts-product .parts-p-add .parts-buy__row { display: flex; gap: 10px; }
.parts-product .parts-p-add .parts-stepper { height: 52px; border-color: var(--parts-dove); border-radius: var(--parts-radius); }
.parts-product .parts-stepper button { width: 42px; background: var(--parts-p-soft-2); font-size: 20px; }
.parts-product .parts-stepper button:hover { background: var(--parts-sand); }
.parts-product .parts-p-add .parts-stepper .parts-qty { height: 50px; width: 52px; font-family: var(--parts-font); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; border-color: var(--parts-dove); }
.parts-product .parts-btn--go { font-family: var(--parts-font); font-weight: 700; letter-spacing: .005em; border-radius: var(--parts-radius); }
.parts-product .parts-p-add .parts-btn--go { flex: 1; height: 52px; font-size: 17px; }
.parts-p-dealer { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 0 24px; font-size: 15px; font-weight: 600; color: var(--parts-ink); text-decoration: underline; text-decoration-color: var(--parts-dove); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.parts-p-dealer:hover { text-decoration-color: var(--parts-cta); }
.parts-product .parts-p-buy .parts-buy__nudge { padding: 16px 24px 8px; border-top: 0; }

.parts-p-help { margin: 12px 0 0; padding: 14px 24px 18px; border-top: 1px solid var(--parts-p-line-soft); background: var(--parts-p-soft); font-size: 14px; line-height: 21px; display: flex; flex-wrap: wrap; gap: 0 6px; }
.parts-p-help a { font-weight: 600; color: var(--parts-ink); text-underline-offset: 3px; }
.parts-p-help span { flex-basis: 100%; }

/* the phone's bar: hidden on a desktop */
.parts-p-bar { display: none; }

/* a narrower desktop: a slimmer rail */
@media (max-width: 1180px) {
  .parts-p-grid { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 36px; }
  .parts-p-features { columns: 1; }
}

/* a tablet and a phone: one column, the rail a block under the gallery, the bar at the foot */
@media (max-width: 900px) {
  .parts-product { padding-top: 12px; }
  .parts-product .parts-crumbs { margin-bottom: 12px; }
  .parts-p-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gal" "rail" "read"; grid-template-rows: none; }
  .parts-p-head { padding-bottom: 16px; gap: 8px; }
  .parts-product .parts-p-head h1 { font-size: 26px; line-height: 33px; }
  .parts-p-rail { margin-top: 20px; }
  .parts-product .parts-p-buy { position: static; max-height: none; overflow: visible; box-shadow: 0 1px 2px rgb(13 21 36 / .04); }
  .parts-product .parts-p-gallery .parts-gallery__main { aspect-ratio: 4 / 3; height: auto; }
  .parts-product .parts-p-gallery .parts-gallery__main img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .parts-product .parts-p-gallery .parts-gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .parts-product .parts-p-gallery .parts-gallery__thumbs button { flex: none; width: 64px; height: 64px; }
  .parts-p-sec, .parts-product .parts-fitment { margin-top: 36px; padding-top: 28px; }
  .parts-product .parts-p-h2, .parts-product .parts-fitment__bar h2.parts-p-h2 { font-size: 21px; line-height: 28px; }
  .parts-product .parts-p-prose { font-size: 16px; line-height: 27px; }
  .parts-product .parts-p-specs th, .parts-product .parts-p-specs td { padding: 11px 14px; }
  .parts-product .parts-p-specs th { width: 42%; }
  .parts-p-rel a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num go" "what go" "diff go" "fits go"; row-gap: 2px; padding: 10px 14px; }

  .parts-p-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;  /* under the cart drawer and its veil (190, 200) */
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--parts-gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--parts-bg); border-top: 1px solid var(--parts-dove);
    box-shadow: 0 -8px 24px -10px rgb(13 21 36 / .18);
    transition: transform .2s ease;
  }
  .parts-p-bar[data-parts-bar-hide] { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
  .parts-p-bar__price { display: grid; min-width: 0; line-height: 1.2; }
  .parts-p-bar__price b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--parts-p-sale); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .parts-p-bar__price span { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .parts-p-bar__price s { font-weight: 500; margin-right: 4px; }
  .parts-p-bar__add.parts-btn--go { margin-left: auto; height: 48px; padding: 0 22px; font-size: 16px; flex: none; }
  .parts-product-page .foot { padding-bottom: 96px; }
}

@media (max-width: 720px) {
  .parts-product .parts-p-gallery .parts-gallery__main { aspect-ratio: 1; height: auto; }
  .parts-p-price { padding: 18px 16px 16px; }
  .parts-p-price__now b { font-size: 36px; line-height: 40px; }
  .parts-p-before { padding: 16px 16px 4px; }
  .parts-product .parts-p-add { padding: 14px 16px 6px; }
  .parts-p-dealer { margin: 0 16px; }
  .parts-p-help { padding: 12px 16px 16px; }
  .parts-p-features { font-size: 15.5px; }
  .parts-p-features li { padding-bottom: 12px; }
  /* the crumbs on one line that scrolls, without the last one, which the heading repeats */
  .parts-product .parts-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .parts-product .parts-crumbs li:has([aria-current]) { display: none; }
  .parts-product .parts-crumbs :is(ol, li) { gap: 2px; }
  .parts-product .parts-crumbs a { min-width: 0; padding: 0 5px; }
  .parts-product .parts-crumbs li:first-child a { padding-left: 0; }
  .parts-product .parts-p-specs { font-size: 15px; }
  .parts-product .parts-ftable { min-width: 820px; }
  .parts-product .parts-rhtable { min-width: 560px; }
  .parts-product .parts-p-specs tr { display: grid; border-bottom: 1px solid var(--parts-p-line-soft); }
  .parts-product .parts-p-specs tr:last-child { border-bottom: 0; }
  .parts-product .parts-p-specs th, .parts-product .parts-p-specs td { width: auto; border-bottom: 0; background: none; }
  .parts-product .parts-p-specs th { padding: 11px 14px 0; }
  .parts-product .parts-p-specs td { padding: 0 14px 11px; }
}