/* Northern Performance product page: the np-product block (gallery, info
   column, buy stack, does-it-fit panel, description + specs, fitment
   table, phone sticky buy bar) and the np-product-rail cross-sell cards.
   Round 2b (2026-09-04): the ECS grammar - a card-less right-aligned buy
   stack, square corners on the gallery, panel fields and specs table, an
   ECS-green Add to Cart, 20px section titles.
   Loaded per-section Dawn-style: each section includes this file via
   {{ 'np-product.css' | asset_url | stylesheet_tag }}; browsers dedupe.
   Palette tokens come from np-header.css :root (global); no new token roots.
   The amber (#B45309), the Add to Cart green (#009933, ECS's own, sampled
   from their coilover page at Greg's ask) and greys (#8a8a8a heads,
   #b9b9b9 field borders, #c9c9c9 hover borders) are design values with no
   token equivalent.
   Structural layout (stepped containers 1300/1000/768, the 3-column grid)
   is locked, never a merchant setting. */

/* ---------- stepped container ---------- */
/* Mirrors the np-header.css container steps so the product block lines up
   with the header; the other np-*.css files are not loaded on this page. */
.np-container {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 990px) {
  .np-container {
    max-width: 768px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1000px) {
  .np-container {
    max-width: 1000px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1300px) {
  .np-container {
    max-width: 1300px;
  }
}

/* the Garage theme resets don't cover everything; our buttons and fields
   style themselves from zero. The does-it-fit checker's dropdown buttons
   are the vehicle band's control and keep np-header.css's clothes */
.np-pd button:where(:not(.np-ymm-field__button):not(.np-ymm-field__option)),
.np-rail button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.np-pd a,
.np-rail a {
  color: inherit;
  text-decoration: none;
}

/* an author display rule must never resurrect an element JS hid */
.np-pd [hidden],
.np-rail[hidden],
.np-rail [hidden] {
  display: none !important;
}

/* ---------- product block: gallery | info | buy stack ---------- */
.np-pd__grid {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr) 320px;
  gap: 40px;
  padding-top: 22px;
  padding-bottom: 8px;
  align-items: start;
}

/* ---- gallery (square, the ECS grammar) ---- */
.np-pd__gmain {
  border: 1px solid var(--np-border);
  border-radius: 0;
  background: #fff;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.np-pd__gmain img,
.np-pd__gmain svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.np-pd__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.np-pd__thumbs button {
  width: 72px;
  height: 72px;
  border: 1px solid var(--np-border);
  border-radius: 0;
  background: #fff;
  padding: 6px;
  transition: border-color 0.15s;
}

.np-pd__thumbs button:hover {
  border-color: #c9c9c9;
}

.np-pd__thumbs button.is-selected {
  border: 2px solid var(--np-charcoal);
  padding: 5px;
}

.np-pd__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- info column ---- */
.np-pd__title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--np-ink);
  letter-spacing: -0.01em;
}

.np-pd__fits {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--np-ink);
}

.np-pd__fits a {
  color: var(--np-red);
  white-space: nowrap;
}

.np-pd__sub {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--np-ink-soft);
  max-width: 46ch;
}

/* the ledger, ECS-style: bold right-aligned labels, plain values, no
   rules; each row is a div so the grid reads dt | dd per row */
.np-pd__nums {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  font-size: 14px;
}

.np-pd__nums > div {
  display: contents;
}

.np-pd__nums dt {
  text-align: right;
  font-weight: 700;
  color: var(--np-ink);
  align-self: center;
}

.np-pd__nums dd {
  margin: 0;
  color: var(--np-ink);
  font-weight: 500;
  align-self: center;
}

/* the two part numbers (Mfg Part #, NP#) alone keep the soft gray; their
   labels, the brand and the Fitment Note read in the body ink (Greg
   2026-09-09) */
.np-pd__nums dd.np-pd__num {
  color: var(--np-ink-soft);
}

/* the Brand row is the logo */
.np-pd__brandmark img {
  height: 28px;
  width: auto;
  display: block;
}

/* the vendor-text fallback the img's onerror reveals */
.np-pd__brandmark .np-pd__brand {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-charcoal);
}

/* the Fitment Alert: the operator's red line about a vehicle condition
   the vendor's data leaves out, between the ledger and the features
   (Greg 2026-09-09: "in red to draw attention to it") */
.np-pd__alert {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--np-red);
}

.np-pd__alert[hidden] {
  display: none;
}

/* the Features and Benefits bullets: a plain disc list in the body ink
   (the theme's global reset strips list markers, so the disc is set on
   the items too; Greg 2026-09-09: "not gray, normal bullets") */
.np-pd__points {
  margin: 18px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--np-ink);
  list-style: disc outside;
}

.np-pd__points li {
  display: list-item;
  list-style: disc outside;
  margin-bottom: 6px;
  padding-left: 2px;
}

.np-pd__points li::marker {
  color: var(--np-ink);
}

/* ---- buy stack: no card, right-aligned, square (the ECS grammar) ---- */
.np-pd__buy {
  text-align: right;
  padding-top: 4px;
}

.np-pd__price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 10px; /* no row gap: the list price hugs the price */
  flex-wrap: wrap;
}

/* the phone's ship date beside the price; the truck line and the delivery line say it on wider screens */
.np-pd__price-ships {
  display: none;
  font-size: 14px;
  color: var(--np-ink);
}

.np-pd__price {
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  color: var(--np-ink);
  line-height: 1.1;
}

/* the sale label before the price, the one red word in the buy box (Greg 2026-09-15) */
.np-pd__sale {
  font-size: 22px;
  font-weight: 700;
  color: var(--np-red);
}

.np-pd__cur {
  font-size: 15px;
  font-weight: 600;
}

/* its own line under the price: the struck list price, then the saving */
.np-pd__msrp {
  flex-basis: 100%;
  margin-top: 0;
  font-size: 15px;
  color: #8a8a8a;
}

.np-pd__msrp s {
  margin-right: 5px;
}

/* not red: the buy stack spends its one accent on Add to Cart */
.np-pd__msrp .np-pd__off {
  color: var(--np-ink-soft);
  font-weight: 700;
}

/* free-shipping line under the price, with the truck */
.np-pd__ship {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--np-ink);
}

.np-pd__ship img {
  width: 28px;
  height: auto;
}

/* Availability and Est. ship date, ECS-style facts */
.np-pd__facts {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--np-ink);
}

.np-pd__facts b {
  font-weight: 700;
  color: var(--np-ink);
}

.np-pd__fact {
  font-weight: 700;
}

.np-pd__fact--ok {
  color: var(--np-stock-green);
}

.np-pd__fact--wait {
  color: #b45309;
}

.np-pd__fact--out {
  color: var(--np-red);
}

/* the Availability State line: the offer read's state in its colour
   (green in stock locally, yellow warehouse and manufacturer stock, red out
   of stock), the ? whose tooltip carries that state's note, then the
   estimated ship date (all right-aligned with the buy stack, left on
   phones) */
.np-pd__avail {
  margin-top: 6px;
}

.np-pd__avail .np-pd__stock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 5px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--np-ink);
}

.np-pd__avail .np-pd__stock b {
  font-weight: 700;
  color: var(--np-ink);
}

.np-pd__avail .np-pd__eta {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--np-ink-soft);
}

/* the state: a button in the buy stack (hover underlines it, a click opens
   the drawer), plain text again inside the drawer */
.np-pd .np-pd__avail-state {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  min-height: 0;
  min-width: 0; /* the theme's button rule gives every button an 8rem floor, which pushed the state away from its label */
  width: auto;
  text-align: inherit;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  color: var(--np-ink-soft);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.np-pd button.np-pd__avail-state:hover:not(:disabled),
.np-pd button.np-pd__avail-state:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the theme's button hover and active glow, off: only the underline shows */
.np-pd button.np-pd__avail-state:hover,
.np-pd button.np-pd__avail-state:active,
.np-pd button.np-pd__avail-state:focus {
  background: none;
  box-shadow: none;
  transform: none;
}

.np-pd button.np-pd__avail-state:disabled {
  cursor: default;
}

/* a mouse click leaves no focus ring, the keyboard keeps its underline */
.np-pd button.np-pd__avail-state:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.np-pd__drawer {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--np-line, #e5e7eb);
  border-radius: 4px;
  background: #fff;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--np-ink-soft);
}

.np-pd__drawer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
}

.np-pd__drawer-row + .np-pd__drawer-row {
  margin-top: 8px;
}

.np-pd__drawer-row .np-pd__avail-state {
  cursor: default;
  font-size: 12.5px;
}

.np-pd__drawer-row .np-pd__avail-state::after {
  content: ":";
  color: var(--np-ink-soft);
}

.np-pd__drawer-row.is-current span {
  color: var(--np-ink);
}

/* the parts page cards' colours per state (products API classic.css):
   the manufacturer orange replaced the yellow here (Greg 2026-09-09) and
   both In stock states are the one green (Greg 2026-09-15) */
.np-pd__avail-state.is-local,
.np-pd__avail-state.is-warehouse { color: #009933; }
.np-pd__avail-state.is-manufacturer { color: #b45309; }
.np-pd__avail-state.is-out-of-stock { color: var(--np-red); }

/* the ? and its tooltip: shown on hover, and on focus so a tap or the
   keyboard reaches it too */
.np-pd__tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.np-pd .np-pd__avail-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  min-width: 0;
  max-width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
  background: var(--np-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  cursor: help;
  vertical-align: middle;
}

.np-pd__tip-bubble {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 6;
  width: max-content;
  max-width: 270px;
  padding: 10px 12px;
  border: 1px solid var(--np-line, #e5e7eb);
  border-radius: 4px;
  background: #fff;
  color: var(--np-ink);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.15s, visibility 0.12s ease 0.15s;
  user-select: text;
}

/* an invisible bridge over the gap below the ?, so the cursor can travel
   from the ? onto the card (and select its text) without closing it */
.np-pd__tip-bubble::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.np-pd__tip-bubble::before {
  content: "";
  position: absolute;
  right: 4px;
  top: -6px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--np-line, #e5e7eb);
  border-width: 1px 0 0 1px;
  background: #fff;
  transform: rotate(45deg);
}

.np-pd__tip:hover .np-pd__tip-bubble,
.np-pd__tip:focus-within .np-pd__tip-bubble {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.np-pd__fits-vehicle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #009933; /* the Add to Cart green, the same as the In stock state beside it (Greg, 2026-09-08) */
}

.np-pd__fits-vehicle svg {
  flex: none;
}

.np-pd__variants {
  margin-top: 14px;
  text-align: left;
}

.np-pd__variants label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 6px;
}

.np-pd__variants select {
  width: 100%;
  height: 46px;
  border: 1px solid #b9b9b9;
  border-radius: 0;
  background: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--np-ink);
  min-width: 0;
}

/* labelled Qty box beside the button, right-aligned */
.np-pd__qty-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.np-pd__qty-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--np-ink);
}

.np-pd__qty {
  width: 64px;
  height: 50px;
  flex: none;
  border: 1px solid #b9b9b9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  background: #fff;
}

/* native number spinners hidden in every engine; plain centered number,
   same as the search rows' qty box */
.np-pd__qty input {
  width: 100%;
  border: 0;
  outline: none;
  text-align: center;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--np-ink);
  appearance: textfield;
  -moz-appearance: textfield;
}

.np-pd__qty input:focus-visible {
  outline: 2px solid var(--np-navy);
  outline-offset: -2px;
}

.np-pd__qty input::-webkit-outer-spin-button,
.np-pd__qty input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ECS green (Greg's ask, 2026-09-02); .np-pd prefix so it outranks the
   .np-pd button reset above; the theme's body-rendered button rules put
   a min-width floor under every button, hence the pins */
.np-pd .np-pd__atc {
  flex: 1;
  max-width: 220px;
  min-width: 0;
  height: 50px;
  min-height: 0;
  padding: 0 28px;
  background: var(--np-red);
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
}

.np-pd .np-pd__atc:hover:not(:disabled) {
  background: var(--np-red-dark);
}

.np-pd .np-pd__atc:focus-visible {
  outline: 2px solid var(--np-navy);
  outline-offset: 2px;
}

.np-pd .np-pd__atc:disabled {
  opacity: 0.65;
  cursor: default;
}

/* a part with no Shopify product behind it sells by phone */
.np-pd__call p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}

.np-pd .np-pd__call .np-pd__atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* installation as a single link, the NP differentiator */
.np-pd__links {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.np-pd__links a {
  color: var(--np-navy);
}

.np-pd__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- the one fitment surface: the does-it-fit panel under the stack ---- */
.np-pd__fit {
  margin-top: 30px;
}

/* the block sits on the buy column's right rail with the price, the
   availability lines and Add to Cart; the words inside the dropdowns
   stay left-aligned (Greg 2026-09-09) */
.np-pd__fit h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--np-ink);
  text-align: right;
}

/* the panel ships collapsed and opens only on products with fitment
   rows (np-product.js); a checker over no data reads as broken */
.np-pd__fit--pending {
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}

/* the three pickers are the vehicle band's .np-ymm-field control
   (np-header.css owns their look), stacked at half the column's width
   and left-aligned under the heading (Greg 2026-09-09) */
.np-pd__fit-widget {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  justify-items: end;
  counter-reset: np-ymm-step;
}

.np-pd__fit-widget .np-ymm-field {
  width: 50%;
}

.np-pd__fit-widget .np-ymm-field__button:focus-visible {
  outline: 2px solid var(--np-navy);
  outline-offset: -2px;
}

.np-pd__fit-verdict {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: var(--np-stock-green);
}

.np-pd__fit-verdict--no {
  color: var(--np-red);
}

/* the way to the fitment table under a does-not-fit verdict (outranks .np-pd a) */
.np-pd .np-pd__fit-see {
  display: block;
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the picked vehicle's Fitment Alert under a fitting verdict, in the
   same red as the line under the ledger */
.np-pd__fit-alert {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-align: right;
  color: var(--np-red);
}

.np-pd__fit-alert[hidden] {
  display: none;
}

/* ---------- stacked information sections ---------- */
.np-pd__sect {
  margin-top: 28px;
  padding-top: 34px;
  padding-bottom: 6px;
  border-top: 1px solid var(--np-border);
}

.np-pd__sect-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--np-ink);
  letter-spacing: 0;
}

.np-pd__sect-title small {
  font-size: 13.5px;
  font-weight: 600;
  color: #8a8a8a;
  margin-left: 10px;
}

/* ---- details: prose beside the specs table ---- */
/* the specs column sizes to its rows so each label and value sits on one
   line, from 320px up to 3/5 of the section; the prose takes the rest */
.np-pd__sect--details {
  display: grid;
  grid-template-columns: minmax(40%, 1fr) minmax(320px, max-content);
  gap: 48px;
  align-items: start;
}

.np-pd__sect--details.np-pd__sect--noside {
  grid-template-columns: minmax(0, 1fr);
}

/* the description reads in the body ink, never the soft gray (Greg
   2026-09-09) */
.np-pd__prose {
  font-size: 15px;
  line-height: 1.7;
  color: var(--np-ink);
}

/* legacy Prop 65 paragraph in already-imported copy; the rebuild no longer
   emits it, this hides it until every brand re-imports */
.np-pd__prose p:has(> small:only-child) {
  display: none;
}

.np-pd__prose p {
  margin: 0 0 14px;
  max-width: 72ch;
}

.np-pd__prose h2:not(.np-pd__sect-title),
.np-pd__prose h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--np-ink);
  letter-spacing: 0;
  margin: 22px 0 8px;
}

.np-pd__prose ul,
.np-pd__prose ol {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 72ch;
}

.np-pd__prose ul {
  list-style: disc;
}

.np-pd__prose ul li {
  margin: 0 0 5px;
}

.np-pd__side {
  display: grid;
  gap: 20px;
}

/* the specifications table: square corners (Greg, 2026-09-04) */
.np-pd__specs {
  border: 1px solid var(--np-border);
  border-radius: 0;
  overflow: hidden;
  /* a wide table scrolls inside its box, never the page (phone overflow on cold-air-intakes.ca, 2026-10-15) */
  overflow-x: auto;
  background: #fff;
}

@media (max-width: 480px) {
  .np-pd__specs th {
    white-space: normal;
  }
}

/* the class opts out of the theme's table:not([class]) chrome */
.np-pd__specs table {
  width: auto;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 0;
}

.np-pd__specs th,
.np-pd__specs td {
  text-align: left;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--np-border);
  vertical-align: top;
}

.np-pd__specs tr:last-child th,
.np-pd__specs tr:last-child td {
  border-bottom: 0;
}

.np-pd__specs th {
  white-space: nowrap;
  font-weight: 700;
  color: var(--np-ink);
  background: #fff;
}

.np-pd__specs td {
  font-weight: 500;
  color: var(--np-ink);
}

.np-pd__xref {
  border: 1px solid var(--np-border);
  border-radius: 0;
  padding: 16px 20px 18px;
  background: var(--np-surface);
}

.np-pd__xref h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.np-pd__xref ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--np-ink-soft);
}

/* ---- fitment section: our own table from the fetched fitment rows ---- */
.np-pd__fit-table {
  overflow-x: auto; /* a wide row scrolls inside the section, never the page */
}

.np-pd__fit-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.np-pd__fit-table th {
  padding: 13px 16px;
  background: var(--np-charcoal);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: #fff;
}

.np-pd__fit-table td {
  padding: 13px 16px;
  text-align: left;
  color: #000;
}

/* "2017 - 2018" stays on one line on phones */
.np-pd__fit-table td:first-child {
  white-space: nowrap;
}

.np-pd__fit-table tbody tr:nth-child(even) {
  background: var(--np-surface);
}

.np-pd__fit-table tbody tr:hover {
  background: var(--np-border);
}

/* ---------- sticky buy bar (phones only) ---------- */
.np-pd__sticky {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: #fff;
  border-top: 1px solid var(--np-border);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 14px;
  transform: translateY(100%);
  transition: transform 0.2s;
}

.np-pd__sticky.is-shown {
  transform: translateY(0);
}

.np-pd__sticky-price {
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: var(--np-ink);
}

.np-pd__sticky-price .np-pd__cur {
  font-size: 12px;
}

.np-pd__sticky-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--np-ink-soft);
}

.np-pd .np-pd__sticky .np-pd__atc {
  flex: 1;
  max-width: none;
  height: 46px;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .np-pd__sticky {
    transition: none;
  }
}

/* ---------- cross-sell rail ---------- */
.np-rail {
  padding-top: 44px;
  padding-bottom: 52px;
}

.np-rail h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--np-ink);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--np-charcoal);
  position: relative;
}

.np-rail h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 42px;
  height: 2px;
  background: var(--np-red);
}

.np-rail__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 22px;
}

.np-rail__card {
  border: 1px solid var(--np-border);
  border-radius: 6px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-rail__card:hover {
  border-color: #c9c9c9;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.np-rail__shot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.np-rail__shot img,
.np-rail__shot svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.np-rail__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--np-ink);
}

.np-rail__title a:hover {
  color: var(--np-navy);
}

.np-rail__sku {
  margin-top: 5px;
  font-size: 12px;
  color: #8a8a8a;
}

.np-rail__stock {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--np-stock-green);
}

.np-rail__price {
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  color: var(--np-ink);
}

.np-rail__price .np-pd__cur {
  font-size: 11.5px;
  font-weight: 600;
}

.np-rail__list {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  color: #8a8a8a;
}

/* auto margin pins the button to the card bottom so ragged title wraps
   don't stagger it */
.np-rail__form {
  margin-top: auto;
  display: flex;
}

/* .np-rail prefix so it outranks the .np-rail button reset above */
.np-rail .np-rail__atc {
  flex: 1;
  height: 38px;
  background: var(--np-red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  text-align: center;
  line-height: 38px;
  transition: background 0.15s;
}

.np-rail .np-rail__atc:hover {
  background: var(--np-red-dark);
}

/* ---------- steps ---------- */
@media (max-width: 1299.98px) {
  .np-pd__grid {
    grid-template-columns: 340px minmax(0, 1fr) 290px;
    gap: 28px;
  }

  .np-pd__title {
    font-size: 22px;
  }

  .np-pd__sect--details {
    grid-template-columns: minmax(40%, 1fr) minmax(280px, max-content);
    gap: 32px;
  }

  .np-pd__sect--details.np-pd__sect--noside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 999.98px) {
  /* buy stack joins the second row beside the fit panel; gallery + info
     share the first */
  .np-pd__grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
  }

  .np-pd__col-buy {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .np-pd__col-buy .np-pd__fit {
    margin-top: 0;
  }

  .np-pd__sect--details {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .np-pd__xref ul {
    columns: 3;
  }

  .np-rail__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  /* one column, read in the phone's order (Greg 2026-09-16): title, the ledger, the images, the price with its
     ship date, then the fitment sentence, the features and the buy stack. The three columns, the buy stack
     and the offer give up their boxes so their children sit in the one grid and take an order. */
  .np-pd__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .np-pd__col-gallery,
  .np-pd__col-info,
  .np-pd__col-buy,
  .np-pd__buy,
  .np-pd__offer {
    display: contents;
  }

  .np-pd__title { order: -5; }
  .np-pd__nums { order: -4; }
  .np-pd__gmain { order: -3; }
  .np-pd__thumbs { order: -2; }
  .np-pd__price-row { order: -1; }

  .np-pd__nums,
  .np-pd__thumbs,
  .np-pd__fits,
  .np-pd__points,
  .np-pd__ship,
  .np-pd__fits-vehicle,
  .np-pd__avail,
  .np-pd__qty-row {
    margin-top: 0;
  }

  .np-pd__price-row {
    align-items: baseline;
    gap: 0 14px;
  }

  .np-pd__price-ships {
    display: inline;
  }

  .np-pd__ship-date,
  .np-pd__delivery {
    display: none;
  }

  .np-pd__col-buy .np-pd__fit {
    margin-top: 6px;
  }

  .np-pd__buy {
    text-align: left;
  }

  .np-pd__price-row,
  .np-pd__qty-row,
  .np-pd__fits-vehicle,
  .np-pd__avail .np-pd__stock {
    justify-content: flex-start;
  }

  /* the ? sits mid-line here, so the bubble anchors to the whole
     availability line instead and spans it, no arrow */
  .np-pd__avail .np-pd__stock {
    position: relative;
  }

  .np-pd__tip {
    position: static;
  }

  .np-pd__tip-bubble {
    left: 0;
    right: 0;
    width: auto;
    top: calc(100% + 6px);
  }

  .np-pd__tip-bubble::before {
    display: none;
  }

  .np-pd .np-pd__atc {
    max-width: none;
  }

  .np-pd__xref ul {
    columns: 2;
  }

  .np-rail__cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .np-rail__card {
    padding: 12px;
  }

  .np-pd__sticky {
    display: flex;
  }
}

/* ---------- the Year/Make/Model dropdown control (np-ymm-field.js) ----------
   The vehicle band's control, carried over from the theme's np-header.css so the
   does-it-fit checker keeps the band's clothes: hidden select, button, panel. */
.np-ymm-cascade {
  display: flex;
  align-items: center;
  gap: 18px;
  counter-reset: np-ymm-step;
}

/* each select's wrapper carries the row sizing and anchors the dropdown
   panel; the select itself stays hidden at every width - it is the state
   the section script mirrors, the button + panel are the control */
.np-ymm-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  counter-increment: np-ymm-step;
}

.np-ymm-cascade__select {
  display: none;
}

/* the field button wears the old select's clothes plus the step numeral
   and a chevron; the panel is the in-page scrollable option list. One
   look at every width (2026-08-31: the desktop row adopts the phone
   dropdowns instead of the native OS picker). */
.np-ymm-field__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--np-ink);
  text-align: left;
  cursor: pointer;
}

.np-ymm-field__button:disabled {
  color: var(--np-ink-soft);
  cursor: default;
}

.np-ymm-field__button::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: auto;
  border-right: 2px solid var(--np-ink-soft);
  border-bottom: 2px solid var(--np-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.15s, margin-top 0.15s;
}

/* a completed, closed step swaps the chevron for a red check */
.np-ymm-field__button:not(:disabled):not(.np-ymm-field__button--empty)[aria-expanded='false']::after {
  width: 12px;
  height: 7px;
  margin-top: -4px;
  border-right: 0;
  border-left: 2px solid var(--np-red);
  border-bottom: 2px solid var(--np-red);
  transform: rotate(-45deg);
}

.np-ymm-field__button[aria-expanded='true']::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

.np-ymm-field__panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.np-ymm-field__panel[hidden] {
  display: none;
}

.np-ymm-field__panel:not([hidden]) {
  display: block;
}

.np-ymm-field__option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  font-weight: 500;
  color: var(--np-ink);
  text-align: left;
  cursor: pointer;
}

.np-ymm-field__option:last-child {
  border-bottom: 0;
}

.np-ymm-field__option[aria-selected='true'] {
  color: var(--np-red);
  font-weight: 700;
}


@media (max-width: 679.98px) {
  .np-ymm-field__button::before {
    content: counter(np-ymm-step);
    flex: 0 0 auto;
    min-width: 13px;
    font-size: 12px;
    font-weight: 800;
    color: var(--np-red);
    transition: color 0.15s;
  }

  .np-ymm-field__button:disabled::before {
    color: #b6bcc3;
  }

  .np-ymm-field__button:not(:disabled):not(.np-ymm-field__button--empty)::before {
    color: var(--np-charcoal);
  }
}

/* a phone never scrolls sideways on a product page: a wide gallery image, fitment row or description shrinks or
   scrolls inside the page (brakedrums.ca's POW358R, 2026-10-15) */
@media (max-width: 480px) {
  .np-pd { overflow-x: hidden; }
  .np-pd img { max-width: 100%; height: auto; }
  .np-pd__fit-table th, .np-pd__fit-table td { white-space: normal; }
}