/** Shopify CDN: Minification failed

Line 787:38 Unexpected "*"
Line 789:73 Unterminated string token

**/
/* PartCatalog product page — page shell, three-column grid, gallery frame,
   and the spec column (brand row, title, part number, spec table).
   Phase 3, Task 1. Source of truth for values: docs/redesign/Product Page.dc.html
   and docs/redesign/Design Notes.md §4. Consumes --pc-* tokens from pc-tokens.css
   and the .pc-t__brandlogo/.pc-t__brandword vocabulary from pc-collection.css.

   Scope: page shell, .pc-p__grid, gallery, title/brand/spec-table column,
   (Phase 3, Task 2) the buy box: price/stock header, Step 1 fitment
   panel (incl. the .pc-fdd searchable-dropdown skin) and Step 2 quantity/
   order-total/add-to-cart, and (Phase 3, Task 3) the below-fold tab strip
   + panels (Description/Compatibility/Interchange) and the .pv2-callouts
   remainder in the spec column, and (Phase 3, Task 4) the
   @media (max-width: 990px)/(max-width: 768px) mobile stacking rules
   at the end of the file.

   Rules above the mobile media queries are desktop-layout rules;
   the mobile overrides live in their own blocks at the bottom. */

/* ---------- Page shell ---------- */
.pc-p {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--pc-font-body);
  background: var(--pc-surface);
  color: var(--pc-text);
  line-height: 1.5;

  /* Back-compat aliases — the add-to-cart feedback <script> literal in
     main-product-v2.liquid (the pv2-btn-cart submit handler) still sets
     btn.style.background to the pre-redesign custom-property name
     var(--green). The old :root definition is gone (that was the site-wide
     leak), so it's re-declared here, scoped to the page wrapper only,
     aliased to its --pc-* equivalent, so that var(--green) reference still
     resolves. (--gray-5/--gray-7 are kept alongside it for the same reason,
     should any future inline usage need them.) */
  --gray-5: var(--pc-muted);
  --gray-7: var(--pc-text-2);
  --green: var(--pc-ok);
}

/* ---- RESET .main WRAPPER (from base.css) — PDP only ----
   base.css adds border, padding, and border-radius to .main for the
   collection catalog layout. Zero all of that out here so the product page
   sits flush against the shell with no extra box. Effect unchanged from the
   old inline <style> block. */
#pc-catalog .main,
.shopify-section-main {
  border: none;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
}

/* base.css sets gap:16px and padding:8px 0 0 0 on #pc-catalog .shell. */
#pc-catalog .shell {
  gap: 0;
  padding: 0;
}

#pc-catalog {
  background-color: var(--pc-surface);
}

/* ---------- Three-column grid ---------- */
.pc-p__grid {
  display: grid;
  /* leftnav branch: the sitewide 240px sidebar narrows the content column,
     so the fixed 520/372 rails are replaced with minmax ranges that flex
     down without crushing the middle spec column. */
  grid-template-columns: minmax(320px, 460px) minmax(300px, 1fr) minmax(310px, 356px);
  gap: 26px;
  align-items: start;
  padding: 26px 24px 0;
}

/* ---------- Gallery ---------- */
.pc-p__gallery {
  min-width: 0;
}
.pc-p__frame {
  position: relative;
  border: 1px solid var(--pc-rule-outer);
  background: var(--pc-surface);
}
.pc-p__frame img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: contain;
  background: var(--pc-surface-zebra);
}
.pc-p__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pc-p__badge {
  font: 700 13px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 9px;
}
.pc-p__badge--oe {
  background: var(--pc-ink);
  color: var(--pc-surface);
}
.pc-p__badge--warranty {
  background: var(--pc-ok-bg);
  color: var(--pc-ok);
  border: 1px solid var(--pc-ok-border);
}

.pc-p__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.pc-p__thumb {
  /* Border-clip fix (Phase 8, Task 4): the active/hover state used to swap
     `border` from 1px to 2px. Even with box-sizing:border-box (inherited
     from html via the *{box-sizing:inherit} rule in theme.liquid, which
     also overrides the button UA stylesheet's own border-box default), a
     border-WIDTH change is still a box-model change on every state
     transition — on a row of fixed-height (96px) grid items that's the one
     piece of live geometry that can end up a pixel short of the border's
     own paint area at fractional-DPI/zoom, clipping the bottom edge of the
     thicker active/selected border first. Fixed by keeping the border
     width constant (2px) always and only swapping its color — no border
     property changes size at any point now, so there's nothing left for a
     row/track to under-size. box-sizing is re-declared explicitly here too
     so this rule doesn't rely on the cross-file inheritance chain. */
  display: block;
  width: 100%;
  height: 96px;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--pc-rule-outer);
  background: var(--pc-surface-zebra);
  cursor: pointer;
}
.pc-p__thumb.active,
.pc-p__thumb:hover {
  border-color: var(--pc-ink);
}
.pc-p__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Zoom lightbox trigger (Phase 8, Task 4) ----
   .pv2-zoomable is only added to #pv2MainImg when there's a real gallery
   image (never on the no-image placeholder), so the cursor hint and click
   handler only ever apply to a genuine product photo. */
.pv2-zoomable {
  cursor: zoom-in;
}
.pc-p__zoom-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  color: var(--pc-ink);
  cursor: pointer;
}
.pc-p__zoom-btn:hover {
  border-color: var(--pc-ink);
}
.pc-p__zoom-btn:focus-visible {
  outline: none;
  border-color: var(--pc-link);
  box-shadow: 0 0 0 3px rgba(26,75,140,.5);
}

/* ---------- Spec column ---------- */
.pc-p__spec-col {
  min-width: 0;
}

.pc-p__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Round 22: brand-logo PNGs vary wildly in aspect ratio — the shared
   96x22 box (right for the collections table) crushed wide logos like
   Victor Reinz to illegible. On the PDP the row has room, so drive the
   size by HEIGHT: every logo renders 34px tall (width follows its own
   ratio, capped so ultra-wide art can't blow out the row). */
.pc-p__brand-row .pc-t__brandlogo {
  height: 34px;
  width: auto;
  max-width: 220px;
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}
/* Task 2 (Phase 9): divider + product line, appended after the existing
   logo/wordmark. Mirrors the mockup's "BRAND | PRODUCT-LINE" header —
   thin 1px rule + condensed uppercase muted text. */
.pc-p__brand-divider {
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--pc-rule-inner);
}
.pc-p__brand-line {
  font: 600 13px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-muted);
}

.pc-p__title {
  margin: 8px 0 0;
  font: 700 38px/1.05 var(--pc-font-structure);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--pc-ink);
}

.pc-p__spec-wrap {
  margin-top: 14px;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
}
.pc-p__spec {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px var(--pc-font-body);
}
.pc-p__spec tr {
  border-bottom: 1px solid var(--pc-rule-inner);
}
.pc-p__spec tr:last-child {
  border-bottom: 0;
}
.pc-p__spec th {
  width: 148px;
  text-align: left;
  vertical-align: top;
  background: var(--pc-surface-panel-2);
  padding: 9px 12px;
  font: 600 14px/1 var(--pc-font-structure);
  letter-spacing: .12em;
  color: var(--pc-muted);
  border-right: 1px solid var(--pc-rule-inner);
}
.pc-p__spec td {
  padding: 9px 12px;
  color: var(--pc-text);
}
.pc-p__spec td.pc-mono {
  font-weight: 600;
}
/* Part number: plain body face and weight, per owner request (Round 11) —
   NOT mono; the markup deliberately has no pc-mono class. It sits inline
   in the Brand row's cell next to the vendor name. */
.pc-p__spec .pc-p__spec-partno {
  font-weight: 400;
}
.pc-p__spec a {
  color: var(--pc-link);
}

/* ---- Spec table 12-row cap (Round 15, feature 4) ----
   .pc-spec-hidden is applied by the inline script in main-product-v2.liquid
   to tbody rows 13+; .pc-p__spec-toggle is the script-inserted link-styled
   button appended inside .pc-p__spec-wrap below the table. The --capped
   modifier restores the last row's bottom rule (the base tr:last-child
   rule zeroes it) so exactly one 1px rule separates the rows from the
   toggle in both the collapsed and expanded states. */
.pc-spec-hidden {
  display: none;
}
.pc-p__spec-toggle {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  text-align: left;
  font: 400 14px var(--pc-font-body);
  color: var(--pc-link);
  text-decoration: underline;
  cursor: pointer;
}
.pc-p__spec-wrap--capped .pc-p__spec tr:last-child {
  border-bottom: 1px solid var(--pc-rule-inner);
}

/* P3: .pv2-callouts (📦/🚗 emoji lines) removed — duplicated the spec table's
   Position/Product-line/Fits rows and violated the no-emoji design rule. */

/* ---- Callouts block (Round 15, features 1+2) ----
   Sits directly below .pc-p__spec-wrap in the spec column. Each line is a
   flex row: the 14×14 check SVG is a fixed flex-none column (stroke via
   currentColor ← --pc-ok here), so wrapped detail text hang-indents under
   the text column, never under the check. margin-top optically centers
   the glyph on the first 21px (14px × 1.5) text line. */
.pc-p__callouts {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-p__callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pc-p__callout-check {
  flex: none;
  margin-top: 3px;
  color: var(--pc-ok);
}
.pc-p__callout-text {
  margin: 0;
  font: 400 14px/1.5 var(--pc-font-body);
  color: var(--pc-text);
}
.pc-p__callout-text strong {
  font-weight: 700;
}
.pc-p__callout-link {
  color: var(--pc-link);
  text-decoration: underline;
}

/* ============================================================
   Buy box (Phase 3, Task 2)
   ============================================================
   .pc-p__buy is the grid's third column: a sticky 2px-bordered card with a
   price/stock header, Step 1 (fitment — wraps the relocated, byte-identical
   .pv2-fitment-wrap) and Step 2 (quantity + live order total + add to
   cart), then the trust list and the "not the one" collection link. */
.pc-p__buy {
  min-width: 0;
  position: sticky;
  top: 16px;
}
.pc-p__buy-card {
  border: 2px solid var(--pc-ink);
  border-radius: var(--pc-radius);
}

/* ---- Price / stock header ---- */
.pc-p__buy-price {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--pc-rule-inner);
}
.pc-p__buy-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pc-p__buy-compare {
  font: 500 16px var(--pc-font-mono);
  color: var(--pc-muted);
  text-decoration: line-through;
}
.pc-p__buy-current {
  font: 600 28px/1 var(--pc-font-mono);
  color: var(--pc-ink);
}
.pc-p__buy-tag {
  font: 600 13px var(--pc-font-structure);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc-ok);
}
.pc-p__buy-stock {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 14px var(--pc-font-body);
  color: var(--pc-ok);
}
.pc-p__buy-stock--out {
  color: var(--pc-muted);
}
.pc-p__buy-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ---- Step sections ---- */
.pc-p__step {
  padding: 16px 18px;
  border-bottom: 1px solid var(--pc-rule-inner);
}
.pc-p__step:last-child {
  border-bottom: 0;
}
.pc-p__step--fitment {
  background: var(--pc-surface-panel-2);
}
.pc-p__step-label {
  font: 700 13px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-ink);
}
.pc-p__step-copy {
  margin-top: 6px;
  font: 400 14px/1.45 var(--pc-font-body);
  color: var(--pc-text-2);
}

/* Step 1 — fitment checker's own status header + result panels.
   #fitment-checker's markup/IDs are untouched; these rules only skin them.
   P4: .pv2-fit-status ("🔍 Select your vehicle to confirm fitment / Verify
   this part fits before purchasing…") is redundant with the Step 1 label/copy
   above it. It lives INSIDE the byte-frozen #fitment-checker markup (no JS
   ever reads/toggles it — confirmed no fitment-checker.js references), so it
   is hidden via CSS only, same pattern already used for the guarantee-modal
   copy of this element (#pcg-vehicle-slot .pv2-fit-status in
   pc-guarantee-modal.liquid). DOM is unchanged. */
.pv2-fit-status {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  font: 400 14px/1.45 var(--pc-font-body);
  color: var(--pc-text-2);
}
.pv2-fit-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.4;
}
.pv2-fit-label {
  font-weight: 600;
  color: var(--pc-text);
}
.pv2-fit-sub {
  margin-top: 2px;
  color: var(--pc-muted);
}
.pv2-btn-check-fit {
  margin-top: 8px;
  width: 100%;
  border: 2px solid var(--pc-ink);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  color: var(--pc-ink);
  font: 700 14px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 11px;
  cursor: pointer;
}
/* #fitment-verify.pv2-btn-check-fit:disabled (ID + class) is needed to beat
   base.css's `button#fitment-verify:disabled` (ID selector, (1,1,1) — a
   plain class rule here can't out-specificity an ID rule from another
   stylesheet). That legacy rule paints a gray slab (#ccc/#666); this keeps
   the ghost treatment, just muted, instead. base.css is left untouched. */
#fitment-verify.pv2-btn-check-fit:disabled {
  opacity: 1;
  background: var(--pc-surface);
  border-color: var(--pc-rule-outer);
  color: var(--pc-muted);
  cursor: not-allowed;
}
.pv2-fitment-result:empty {
  display: none;
}
#fitment-result-true {
  margin-top: 10px;
  border: 1px solid var(--pc-ok-border);
  border-radius: var(--pc-radius);
  background: var(--pc-ok-bg);
  padding: 10px 12px;
  font: 500 14px/1.45 var(--pc-font-body);
  color: var(--pc-text);
}
#fitment-result-false {
  margin-top: 10px;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  background: var(--pc-surface-panel);
  padding: 10px 12px;
  font: 500 14px/1.45 var(--pc-font-body);
  color: var(--pc-text);
}
.fitment-change-vehicle {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 14px var(--pc-font-body);
  color: var(--pc-link);
  cursor: pointer;
}

/* ---- No-fit popup (#pv2-no-fit-popup, markup at section bottom) ---- */
#pv2-no-fit-popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#pv2-no-fit-popup.is-visible { display: flex; }
@keyframes pv2PopupIn { from { opacity: 0; } to { opacity: 1; } }
.pv2-popup-card {
  background: var(--pc-surface);
  border-radius: var(--pc-radius);
  padding: 44px 36px 36px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
@media (prefers-reduced-motion: no-preference) {
  #pv2-no-fit-popup.is-visible { animation: pv2PopupIn 0.3s ease; }
  .pv2-popup-card { animation: pv2CardUp 0.35s ease; }
}
@keyframes pv2CardUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pv2-popup-emoji { font-size: 52px; line-height: 1; margin-bottom: 18px; }
.pv2-popup-card h2 {
  font: 800 19px/1.3 var(--pc-font-structure);
  color: var(--pc-ink);
  margin: 0 0 10px;
}
.pv2-popup-card p {
  font: 400 14px/1.65 var(--pc-font-body);
  color: var(--pc-muted);
  margin: 0 0 24px;
}
.pv2-popup-actions { display: flex; flex-direction: column; gap: 10px; }
.pv2-popup-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: var(--pc-radius);
  font: 700 14px var(--pc-font-body);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.pv2-popup-btn--primary { background: var(--pc-ink); color: var(--pc-surface); border: none; }
.pv2-popup-btn--primary:hover { background: var(--pc-ink-bar); }
.pv2-popup-btn--secondary { background: none; color: var(--pc-ink); border: 1px solid var(--pc-rule-outer); }
.pv2-popup-btn--secondary:hover { border-color: var(--pc-ink); }

/* ============================================================
   Gallery zoom lightbox (Phase 8, Task 4)
   ============================================================
   Full-screen dialog, additive to the in-page gallery swap
   (#pv2MainImg / pv2SwapImg untouched). Chrome mirrors the no-fit
   popup just above: overlay + reduced-motion-guarded animation +
   the same focus-ring convention (box-shadow 0 0 0 3px
   rgba(26,75,140,.5)) used across the page for :focus-visible. */
#pv2-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(17, 19, 21, .92);
}
#pv2-lightbox.is-visible { display: flex; }

@keyframes pv2LbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv2LbImgIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  #pv2-lightbox.is-visible { animation: pv2LbIn .2s ease; }
  .pv2-lb-stage img { animation: pv2LbImgIn .25s ease; }
}

.pv2-lb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(92vw, 1600px);
  max-height: 90vh;
}
.pv2-lb-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: var(--pc-surface);
}
.pv2-lb-counter {
  margin: 12px 0 0;
  font: 600 13px/1 var(--pc-font-mono);
  letter-spacing: .08em;
  color: var(--pc-surface);
}
.pv2-lb-counter:empty { display: none; }

.pv2-lb-close,
.pv2-lb-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--pc-radius);
  background: rgba(23, 25, 27, .6);
  color: var(--pc-surface);
  cursor: pointer;
}
.pv2-lb-close:hover,
.pv2-lb-nav:hover {
  background: var(--pc-ink);
  border-color: var(--pc-surface);
}
.pv2-lb-close:focus-visible,
.pv2-lb-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,75,140,.5);
}
.pv2-lb-close {
  top: 20px;
  right: 20px;
}
.pv2-lb-nav {
  top: 50%;
  transform: translateY(-50%);
}
.pv2-lb-prev { left: 20px; }
.pv2-lb-next { right: 20px; }
.pv2-lb-nav[hidden] { display: none; }

/* Body scroll lock while the lightbox is open */
body.pv2-lb-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .pv2-lb-close,
  .pv2-lb-nav {
    width: 38px;
    height: 38px;
  }
  .pv2-lb-close { top: 12px; right: 12px; }
  .pv2-lb-prev { left: 8px; }
  .pv2-lb-next { right: 8px; }
  .pv2-lb-stage img { max-height: 78vh; }
}

/* ---- Step 2 — quantity, order total, add to cart ---- */
.pc-p__qty-presets {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.pc-p__preset {
  flex: 1;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  background: var(--pc-surface);
  color: var(--pc-text-2);
  padding: 10px 0;
  font: 600 14px var(--pc-font-body);
  cursor: pointer;
}
.pc-p__preset[aria-pressed="true"] {
  border-color: var(--pc-ink);
  background: var(--pc-ink);
  color: var(--pc-surface);
}
.pc-p__buy-qty {
  margin-top: 10px;
}
.pc-p__step--qty .pc-t__qty {
  width: 100%;
}
.pc-p__step--qty .pc-t__qty-dec,
.pc-p__step--qty .pc-t__qty-inc {
  flex: 0 0 auto;
  padding: 0 12px;
  font-size: 16px;
}
.pc-p__step--qty .pc-t__qty-n {
  flex: 1;
  width: auto;
}
#pv2-qty {
  -moz-appearance: textfield;
}
#pv2-qty::-webkit-outer-spin-button,
#pv2-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-p__order-total {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 400 14px var(--pc-font-body);
  color: var(--pc-text-2);
}
.pc-p__order-total-value {
  font: 600 20px var(--pc-font-mono);
  color: var(--pc-ink);
}
.pc-p__add-to-cart {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-accent);
  color: var(--pc-surface);
  font: 700 15px/1 var(--pc-font-structure);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
}
.pc-p__add-to-cart:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.pc-p__trust-list {
  margin-top: 12px;
  display: grid;
  gap: 7px;
  font: 400 14px/1.45 var(--pc-font-body);
  color: var(--pc-text-2);
}

/* ---- Collection escape link (below the card) ---- */
.pc-p__collection-link {
  margin-top: 12px;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  padding: 13px 16px;
  font: 400 14px/1.5 var(--pc-font-body);
  color: var(--pc-text-2);
}
.pc-p__collection-link a {
  color: var(--pc-link);
}

/* ============================================================
   Fitment checker — searchable-dropdown system (.pc-fdd)
   ============================================================
   The .pv2-fitment-wrap container itself is skinned above via .pc-p__step
   and the .pv2-fit-*/#fitment-result-* rules. BUT the rules below are
   carried over verbatim from the old inline <style> block
   (selectors and box model unchanged) because #fitment-checker's dynamic
   fake-dropdown markup (assets/fitment-checker.js + the inline script in this
   section) depends on them to function at all — .pc-fdd-field select must
   stay display:none (the native <select> is replaced by the fake dropdown),
   and the .pc-fdd__* rules position/open/close the dropdown panel. Removing
   these would leave two overlapping controls and an unusable checker in the
   interim, not just an unstyled one. var(--gray-*)/var(--blue)/var(--radius)
   references (the deleted :root leak) are remapped to their --pc-*
   equivalents below; selectors and box model are unchanged. The old literal
   hex interactive-state colors (#fff/#0056b3/#f0f4ff) ARE tokenized here
   (Task 2) to var(--pc-surface)/var(--pc-link)/var(--pc-surface-panel-2). */
.pv2-fitment-selects {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* Buy box only: lay the fixed Year/Make/Model row out 3-across. Scoped to
   #fitment-container's first .pv2-fitment-selects (excluding #fitment-dynamic,
   which shares the class) so the rule can't reach a reparented checker
   elsewhere (e.g. the guarantee modal's #pcg-vehicle-slot). #fitment-dynamic
   keeps the flex/wrap behavior above and stays a full-width row below the grid. */
.pc-p__buy #fitment-container > .pv2-fitment-selects:not(#fitment-dynamic) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pc-p__buy #fitment-dynamic.pv2-fitment-selects {
  width: 100%;
}
/* Native selects inside .pc-fdd-field are hidden — replaced by custom dropdown */
.pc-fdd-field select { display: none; }
.pc-fdd-field { flex: 1; min-width: 90px; position: relative; }

/* Extra dynamic fields (Body Type, Trim, etc.) */
.fitment-row { flex: 0 0 auto; min-width: 120px; }
.fitment-row label { display: none; }

/* ---- Custom searchable dropdown ---- */
.pc-fdd { position: relative; width: 100%; }
.pc-fdd__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 8px; gap: 4px;
  border: 1px solid var(--pc-rule-outer); border-radius: var(--pc-radius);
  font-size: 14px; font-family: inherit;
  background: var(--pc-surface); color: var(--pc-ink);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s;
}
.pc-fdd__trigger:hover { border-color: var(--pc-link); }
.pc-fdd.is-open .pc-fdd__trigger {
  border-color: var(--pc-link);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.pc-fdd.is-disabled .pc-fdd__trigger {
  opacity: 0.5; cursor: not-allowed; background: var(--pc-surface-panel);
}
.pc-fdd__placeholder { color: var(--pc-muted); }
.pc-fdd__chevron { flex-shrink: 0; transition: transform 0.2s; }
.pc-fdd.is-open .pc-fdd__chevron { transform: rotate(180deg); }
.pc-fdd__list {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
  background: var(--pc-surface); border: 1px solid var(--pc-link); border-top: none;
  border-radius: 0 0 var(--pc-radius) var(--pc-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.pc-fdd.is-open .pc-fdd__list { display: block; }
.pc-fdd__search {
  width: 100%; padding: 7px 10px; box-sizing: border-box;
  border: none; border-bottom: 1px solid var(--pc-rule-outer);
  font-size: 14px; font-family: inherit;
  outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.pc-fdd__search:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--pc-link); border-bottom-color: var(--pc-rule-outer);
}
.pc-fdd__items { max-height: 200px; overflow-y: auto; }
.pc-fdd__item {
  display: block; width: 100%; padding: 7px 10px;
  text-align: left; background: none; border: none;
  font-size: 14px; font-family: inherit;
  color: var(--pc-ink); cursor: pointer;
}
.pc-fdd__item:hover { background: var(--pc-surface-panel-2); color: var(--pc-link); }
.pc-fdd__item.is-selected { font-weight: 600; color: var(--pc-link); }
.pc-fdd__empty { padding: 10px; font-size: 13px; color: var(--pc-muted); text-align: center; }

/* ============================================================
   Position confirmation row (Phase 8, Task 3)
   ============================================================
   Rendered by Liquid as a sibling immediately after #fitment-checker
   (main-product-v2.liquid), NOT inside the byte-frozen div. Deliberately
   NOT reusing .pc-fdd/.pc-fdd-field: those classes are queried and
   MutationObserver-watched by the inline dropdown-builder script above
   (and by #fitment-dynamic's own observer, which auto-wraps any <select>
   appended inside it into a fake custom dropdown) — reusing them would
   risk that machinery reaching in and touching this control. This is a
   plain native <select> under its own class, styled to match the
   .pc-fdd__trigger box (border/radius/padding/font/color) so the row
   reads as part of the same family, with no JS dependency to duplicate. */
.pc-pos-row {
  margin-top: 10px;
}
.pc-pos-label {
  display: block;
  margin-bottom: 4px;
  font: 600 13px/1.2 var(--pc-font-structure);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-text-2);
}
.pc-pos-select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 28px 7px 8px;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--pc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b7075' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 12px 12px;
  color: var(--pc-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.pc-pos-select:hover { border-color: var(--pc-link); }
.pc-pos-select:focus {
  outline: none;
  border-color: var(--pc-link);
  box-shadow: 0 0 0 3px rgba(26,75,140,.5);
}
.pc-pos-select option[value=""] { color: var(--pc-muted); }
/* Attention state — set by the capture-phase gate script when Check
   Fitment is clicked before a position is chosen. Amber, not the design
   system's accent (accent stays reserved for buy/active). */
.pc-pos-row.is-attention .pc-pos-select {
  border-color: #b45309;
  box-shadow: 0 0 0 1px #b45309;
}
.pc-pos-hint {
  margin: 6px 0 0;
  font: 500 13px/1.35 var(--pc-font-body);
  color: #b45309;
}
.pc-pos-hint:empty { display: none; }

/* ============================================================
   Below-fold tabs (Phase 3, Task 3)
   ============================================================
   Description / Compatibility / Interchange. Tab strip is transparent
   buttons with a 3px accent underline on the active tab (accent-as-
   active-state — the one allowed non-cart use of --pc-accent). JS
   (pv2SwitchTab + roving tabindex, below in the section) toggles
   .active on .pv2-tab-btn/.pv2-tab-panel — selectors unchanged from
   pre-redesign, only skinned here. */
.pv2-below-fold {
  margin-top: 40px;
  border-top: 1px solid var(--pc-rule-section);
}
.pv2-tabs {
  display: flex;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--pc-rule-outer);
}
.pv2-tab-btn {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--pc-text-2);
  font: 700 14px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 20px;
  cursor: pointer;
}
.pv2-tab-btn:hover {
  color: var(--pc-ink);
}
.pv2-tab-btn.active {
  border-bottom-color: var(--pc-accent);
  color: var(--pc-ink);
}
.pv2-tab-btn:focus-visible {
  outline: 2px solid var(--pc-link);
  outline-offset: -2px;
}
.pv2-tab-panel {
  display: none;
}
.pv2-tab-panel.active {
  display: block;
}

/* ---- Description panel ---- */
.pv2-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 40px;
  padding: 28px 28px 44px;
}
.pv2-desc-prose {
  grid-column: 1 / 3;
  column-count: 2;
  column-gap: 40px;
  font: 400 15px/1.6 var(--pc-font-body);
  color: var(--pc-text);
}
.pv2-desc-prose > *:first-child {
  margin-top: 0;
}
.pv2-desc-prose p,
.pv2-desc-prose ul,
.pv2-desc-prose ol {
  margin: 0 0 14px;
}
.pv2-desc-empty {
  color: var(--pc-muted);
}
.pv2-desc-sidebar {
  grid-column: 3;
  align-self: start;
  border: 1px solid var(--pc-rule-outer);
  background: var(--pc-surface-panel-2);
  padding: 18px;
}
.pv2-desc-sidebar-label {
  margin: 0;
  font: 700 13px/1 var(--pc-font-structure);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-muted);
}
.pv2-desc-sidebar-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.pv2-desc-sidebar-list a {
  font: 400 14px/1.45 var(--pc-font-body);
  color: var(--pc-link);
  text-decoration: none;
}
.pv2-desc-sidebar-list a:hover {
  text-decoration: underline;
}

/* ---- Compatibility panel ---- */
.pv2-tab-panel--compat {
  padding: 24px 28px 44px;
}
.pv2-compat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pv2-compat-title {
  font: 700 20px/1 var(--pc-font-structure);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-ink);
}
.pv2-compat-note {
  margin-top: 5px;
  font: 400 14px var(--pc-font-body);
  color: var(--pc-muted);
}
.pv2-compat-search {
  width: 300px;
  max-width: 100%;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  padding: 9px 11px;
  font: 400 14px var(--pc-font-mono);
  color: var(--pc-text);
}
.pv2-compat-search::placeholder {
  color: var(--pc-muted);
  font-family: var(--pc-font-mono);
}
.pv2-compat-wrapper {
  margin-top: 14px;
  border: 1px solid var(--pc-rule-outer);
  border-radius: var(--pc-radius);
  overflow: hidden;
}
.pv2-compat-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px var(--pc-font-body);
}
.pv2-compat-table thead th {
  background: var(--pc-ink);
  color: var(--pc-surface);
  font: 600 13px/1 var(--pc-font-structure);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 10px;
  text-align: left;
}
.pv2-compat-table tbody tr.pv2-compat-row {
  border-bottom: 1px solid var(--pc-rule-inner);
}
.pv2-compat-table tbody tr.pv2-compat-row:nth-child(even) {
  background: var(--pc-surface-zebra);
}
/* Once pv2FilterCompat() has run, rows carry a visible-position parity class
   (set on visible rows only) so stripes stay alternating after some rows
   are hidden by the filter. Same specificity as the nth-child rule above
   (table class + row class + one more selector each); being later in the
   cascade, these win the tie whenever JS has applied them. */
.pv2-compat-table tbody tr.pv2-compat-row.pv2-compat-row--even {
  background: var(--pc-surface-zebra);
}
.pv2-compat-table tbody tr.pv2-compat-row.pv2-compat-row--odd {
  background: transparent;
}
.pv2-compat-table tbody tr.pv2-compat-row:hover {
  background: var(--pc-row-hover);
}
.pv2-compat-table td {
  padding: 9px 10px;
  color: var(--pc-text-2);
}
.pv2-compat-table tr.pv2-compat-row td:first-child {
  font: 500 14px var(--pc-font-mono);
  color: var(--pc-text);
}
.pv2-compat-empty-row td {
  padding: 14px 10px;
  font: 400 14px var(--pc-font-body);
  color: var(--pc-muted);
  text-align: center;
}

/* ---- Interchange panel ---- */
.pv2-tab-panel--interchange {
  padding: 24px 28px 44px;
}
.pv2-interchange-title {
  font: 700 20px/1 var(--pc-font-structure);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pc-ink);
}
.pv2-interchange-note {
  margin-top: 5px;
  font: 400 14px var(--pc-font-body);
  color: var(--pc-muted);
}
.pv2-interchange-grid {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pc-p__chip {
  display: inline-block;
  border: 1px solid var(--pc-rule-outer);
  background: var(--pc-surface-panel-2);
  border-radius: var(--pc-radius);
  padding: 9px 12px;
  font: 500 13px var(--pc-font-mono);
  color: var(--pc-text);
}

/* ============================================================
   Mobile stacking (Phase 3, Task 4)
   ============================================================
   Below 990px the three-column grid (.pc-p__grid: 520px 1fr 372px)
   collapses to a single column. Visual order becomes gallery, buy
   box, spec column — set with `order` on the three grid items
   rather than restructuring markup, since DOM order is already
   gallery/spec-col/buy. The below-fold tabs need no order rule:
   .pv2-below-fold is a sibling of .pc-p__grid (not a grid item),
   so it already follows the grid in source order.

   The buy box gives up position:sticky — a full-width mobile card
   pinned to the viewport would occupy the whole screen instead of
   scrolling with the page.

   Every fixed px width from the desktop layout that could force
   horizontal overflow is overridden here: the grid's 520px/372px
   columns, the description panel's 340px sidebar column, and the
   spec table's 148px label column. */
/* leftnav branch: stacking breakpoint raised 990 -> 1240 (the 240px
   sidebar means 3 columns need a wider viewport than the full-bleed theme). */
@media (max-width: 1240px) {
  .pc-p__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px 0;
  }
  /* Round 13: on the stacked layout the title must lead the page (it was
     buried below the gallery AND the whole buy box). display:contents
     promotes the spec column's children to grid items so brand+title can
     be ordered above the gallery while the spec table stays below. */
  .pc-p__spec-col {
    display: contents;
  }
  .pc-p__spec-col > * {
    order: 5;
  }
  .pc-p__brand-row {
    order: 1;
  }
  .pc-p__title {
    order: 2;
    margin-top: 0;
  }
  .pc-p__gallery {
    order: 3;
  }
  .pc-p__buy {
    order: 4;
    position: static;
    top: auto;
  }
  .pc-p__spec-wrap {
    order: 5;
  }
  /* Round 15: the callouts block participates in the promoted-children
     ordering — order 6 pins it directly after the spec table (all other
     spec-col children default to 5 above; no later defaults exist to
     bump). Title/gallery/buy ordering (1/2/3/4) untouched. */
  .pc-p__callouts {
    order: 6;
  }

  .pc-p__spec th {
    width: 120px;
  }

  .pv2-desc-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 36px;
  }
  .pv2-desc-prose {
    grid-column: 1;
  }
  .pv2-desc-sidebar {
    grid-column: 1;
  }

  .pv2-tabs {
    padding: 0 16px;
  }
  .pv2-tab-panel--compat,
  .pv2-tab-panel--interchange {
    padding: 20px 16px 36px;
  }
}

/* ---- Small-mobile refinements (Phase 3, Task 4) ----
   Two-column justified prose (column-count:2 on .pv2-desc-prose)
   is too cramped once its own measure drops under a full-width
   mobile column, so it goes back to a single reading column.

   The tab strip (.pv2-tabs) becomes its own horizontal-scroll
   container — flex-shrink:0 on the buttons stops them from
   squeezing/wrapping, which is what would otherwise push the page
   itself wide. white-space:nowrap on the button text is added
   alongside flex-shrink:0 (Round 12) — on real WebKit/iOS the two
   together are needed: flex-shrink:0 alone can still let a WebKit
   layout pass measure a button's intrinsic width against a wrapped
   line before the overflow-x:auto box is sized, clipping the third
   (Interchange) tab with no way to reach it. Forcing nowrap up front
   removes that ambiguity. The scrollbar itself is hidden — this is a
   swipeable strip, not a scrollbar-driven one — via scrollbar-width
   (Firefox) and the ::-webkit-scrollbar rule (Safari/Chrome); a
   right-edge fade is the "more content" affordance instead.

   Design-audit fix (Phase 3 follow-up): this was originally a
   mask-image fade (with the -webkit-mask-image prefix pair already in
   place), but on real WebKit/iOS the mask silently fails to paint when
   combined with -webkit-overflow-scrolling:touch on the same element —
   the touch-scroll compositing layer drops the mask, a known WebKit
   quirk, not a prefix-coverage gap. Switched to a positioned ::after
   gradient overlay instead: no mask involved, so it renders identically
   everywhere. It fades to var(--pc-surface) (the page background the
   strip sits on) rather than to transparent, matching what the old
   mask-over-content fade visually produced. pointer-events:none keeps
   it from intercepting taps on the last tab. Still a static fade, not
   scroll-position-aware — doing that would need JS, off-limits here —
   so it keeps showing even once fully scrolled to the end; an accepted
   simplification (documented previously, unchanged). The Compatibility
   table (already wrapped in .pv2-compat-wrapper, which clips to the
   card's border-radius via overflow:hidden on desktop) gets a
   horizontal scrollbar of its own instead: overflow-x is overridden
   here (overflow-y stays hidden from the desktop rule) and the table
   gets a min-width so columns stay readable instead of being crushed.
   The page itself must never scroll horizontally — both of these give
   the wide content its own scroll container instead. */
@media (max-width: 768px) {
  .pv2-desc-prose {
    column-count: 1;
  }

  .pv2-tabs {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pv2-tabs::-webkit-scrollbar {
    display: none;
  }
  .pv2-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--pc-surface));
    pointer-events: none;
  }
  .pv2-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .pv2-compat-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pv2-compat-table {
    min-width: 620px;
  }
}

/* ---- Fitment selects: stacked full-width on small phones (Round 12) ----
   Below 480px the Step-1 Year/Make/Model row (.pc-p__buy #fitment-container
   > .pv2-fitment-selects, forced to a 3-column grid unconditionally by the
   rule near line 723 — needed for the desktop 3-across layout, but too
   cramped on a 390px screen) goes to a single column instead: same
   selector, later in the cascade, so grid-template-columns simply wins the
   tie. Each .pc-fdd-field is then a full-width grid row, which is what
   makes its .pc-fdd__list panel (position:absolute; left:0; right:0 — see
   line ~762) open full width too, instead of clipped to a ~110px column
   with the search box floating awkwardly over the Check Fitment button
   below it. #fitment-dynamic's extra fields (Body Type/Trim/etc., each a
   .fitment-row wrapping a .pc-fdd-field) get the same column stack so any
   dynamic dropdown is full width too.

   Scoped under .pc-p__buy exactly like the desktop grid rule it overrides,
   so it can't reach the guarantee modal (#pcg-overlay) — the modal isn't a
   descendant of .pc-p__buy. That's deliberate: inside the modal the base
   .pv2-fitment-selects rule (flex + wrap, further up this file) already
   wraps Year/Make/Model onto their own lines at .pcg-card's ~560px/420px
   width, which is already a reasonable mobile layout without this rule
   needing to leak in.

   z-index: .pc-fdd__list already paints above #fitment-verify and
   .pc-pos-row without any z-index math — both are plain static-position
   elements, and a positioned descendant (.pc-fdd__list is
   position:absolute) always paints after in-flow static content in the
   same stacking context, regardless of source order (CSS2.1 §E). The
   min-width:100% below is redundant with left:0;right:0 on a now
   full-width .pc-fdd-field, kept anyway as an explicit belt-and-suspenders
   match for the full-width contract. Same logic holds unchanged inside
   #pcg-overlay (.pcg-card has no overflow:hidden, by its own comment, for
   exactly this reason) so the panel isn't clipped there either. */
@media (max-width: 480px) {
  .pc-p__buy #fitment-container > .pv2-fitment-selects:not(#fitment-dynamic) {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fitment-row {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
  .pc-fdd-field {
    min-width: 0;
  }
  .pc-fdd__list {
    min-width: 100%;
  }
  .pc-fdd__search {
    font-size: 16px; /* iOS zoom-on-focus prevention */
  }

  /* Task-3 position row + select: already full-width (.pc-pos-row has no
     fixed width, .pc-pos-select is width:100%) — this just confirms the
     same stacking contract explicitly rather than relying on the absence
     of a competing rule. */
  .pc-pos-row {
    width: 100%;
  }
  .pc-pos-select {
    width: 100%;
  }
}