/* 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 on 2026-10-15. 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; since 2026-10-27 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, shop.beyondauto.ca 2026-10-26) 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); }
.parts-buy__margin { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--parts-fit-strong, var(--parts-fit)); }
/* the verdict under the price (Greg 2026-10-27), 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); }
.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 availability legend: a "?" after the state, a <details> with no script, its list laid over the box below the line */
.parts-legend { display: inline-block; }
/* the disc's own box: a site's theme pads every summary (beyondauto's .7em), which made the disc an egg (Greg 2026-10-26) */
.parts-legend summary { position: relative; z-index: 0; list-style: none; cursor: pointer; box-sizing: border-box; width: 40px; height: 40px; margin: -10px -10px -10px -8px; padding: 0; flex-shrink: 0; border: 0; border-radius: var(--parts-radius-round); background: none; color: var(--parts-ink); font: 600 14px/1 var(--parts-font); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
/* the disc drawn 22px inside the 40px target (0.9.1: a tap target is 40px), its words at full contrast */
.parts-legend summary::before { content: ""; position: absolute; z-index: -1; inset: 9px; border: 1px solid var(--parts-ink); border-radius: var(--parts-radius-round); background: var(--parts-bg); }
.parts-legend summary::-webkit-details-marker { display: none; }
.parts-legend summary:hover, .parts-legend[open] summary { color: var(--parts-bg); }
.parts-legend summary:hover::before, .parts-legend[open] summary::before { background: var(--parts-ink); }
.parts-legend__list { position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(100% - 4px); margin: 0; padding: 12px 14px; display: grid; gap: 8px; background: var(--parts-bg); border: 1px solid var(--parts-ink); border-radius: var(--parts-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 14px; line-height: 20px; font-weight: 400; text-align: left; }
.parts-legend__list div { display: grid; gap: 1px; }
.parts-legend__list dt { font-weight: 600; color: var(--parts-ink); }
.parts-legend__list dd { margin: 0; color: var(--parts-steel); }
.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 (Greg 2026-10-29) */
  .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; }
}
}