/* Northern Performance homepage content sections.
   Loaded per-section Dawn-style: each np-* section includes this file via
   {{ 'np-home.css' | asset_url | stylesheet_tag }}; browsers dedupe the href.
   Palette tokens come from np-header.css :root (global); no new token roots here.
   The few literals outside the tokens (var(--np-muted) labels, #fafbfc row hover, navy-tinted
   shadows) are design values with no token equivalent; new roots are disallowed.
   Structural layout (stepped containers 1300/1000/768, grids) is locked, never a merchant setting.
   Desktop styling is >=990px; below 990px each section gets a simple single-column treatment. */

/* ---------- stepped container ---------- */
/* Mirrors the np-header.css container steps so bands line up with the header. */
.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;
  }
}

/* ---------- shared section head ---------- */
.np-sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.np-sect-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--np-ink-strong);
  letter-spacing: 0.01em;
}

.np-sect-head a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-navy);
  text-decoration: none;
  white-space: nowrap;
}

.np-sect-head a:hover {
  text-decoration: underline;
}

/* a linked heading keeps reading as the heading, not as the side link */
.np-sect-head h2 a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: normal;
}

.np-sect-head h2 a:hover {
  color: var(--np-navy);
  text-decoration: none;
}

/* ---------- missing-image placeholder ---------- */
.np-placeholder-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--np-field);
  fill: var(--np-ink-soft);
}

/* ---------- story + facts ---------- */
.np-story {
  padding-top: 44px;
}

.np-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.np-story h1 {
  margin: 0 0 14px;
  font-size: 23px;
  font-weight: 800;
  color: var(--np-ink-strong);
}

.np-story h1::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--np-red);
  margin-bottom: 14px;
  border-radius: 2px;
}

.np-story__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--np-ink-soft);
  max-width: 62ch;
}

.np-story__body p + p {
  margin-top: 12px;
}

.np-story__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.np-fact {
  border: 1px solid var(--np-border);
  border-radius: 6px;
  padding: 16px 18px;
  background: var(--np-bg);
}

.np-fact__num {
  font-size: 22px;
  font-weight: 800;
  color: var(--np-navy);
  margin-bottom: 4px;
}

.np-fact__txt {
  font-size: 13px;
  color: var(--np-ink-soft);
  line-height: 1.45;
}

@media (min-width: 1300px) {
  .np-story__grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 40px;
  }
}

/* the story on a photo (content/home.json hero.image, the section's --np-hero-img): the photo fills the section,
   its right kept, under a tint deepest at the left where the words are, the facts as frosted cards on it */
.np-story--photo .np-story {
  padding: 98px 0 90px;
  color: #fff;
  background: linear-gradient(90deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .8) 42%, rgba(8, 8, 10, .3) 100%), var(--np-hero-img) center right / cover no-repeat;
}
.np-story--photo .np-story h1 { color: #fff; }
.np-story--photo .np-story__body p { color: rgba(255, 255, 255, .84); }
.np-story--photo .np-story__brands-label { color: rgba(255, 255, 255, .7); }
.np-story--photo .np-fact { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); }
.np-story--photo .np-fact__num { color: #fff; }
.np-story--photo .np-fact__txt { color: rgba(255, 255, 255, .78); }
@media (max-width: 1299.98px) {
  .np-story--photo .np-story { background-image: linear-gradient(180deg, rgba(8, 8, 10, .9) 0%, rgba(8, 8, 10, .82) 100%), var(--np-hero-img); }
}

/* ---------- story brands row (brand blocks under the body) ---------- */
.np-story__brands {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.np-story__brands-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 100%;
}

.np-story__brands-label {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--np-muted);
  white-space: nowrap;
}

.np-story__brand {
  flex: 1 1 0;
  height: 52px;
  border: 1px solid var(--np-border);
  border-radius: 4px;
  background: var(--np-logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-story__brand:hover {
  border-color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.np-story__brand img,
.np-story__brand svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* the link's row is a wrapper so the anchor itself spans only its words and
   the hover box is the text, not the row (Greg 2026-09-09) */
.np-story__brands-foot {
  flex-basis: 100%;
}

.np-story__brands-all {
  display: inline-block;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--np-navy);
  white-space: nowrap;
  text-decoration: none;
}

.np-story__brands-all:hover {
  text-decoration: underline;
}

/* ---------- story promo flyer viewer (flyer blocks, dot-switched) ---------- */
/* the flyer reads like a poster; at stacked (sub-1300) widths the grid column
   runs the full container and blew the square frame up past 1200px - cap and
   center it instead */
.np-promo {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.np-promo__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--np-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--np-bg);
  /* horizontal drags belong to the flyer swipe, vertical stays page scroll */
  touch-action: pan-y;
}

.np-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  user-select: none;
  -webkit-user-drag: none;
}

.np-promo__img.is-active,
.np-promo__img.is-drag {
  display: block;
}

.np-promo__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.np-promo__dot {
  /* the theme's body-rendered button rules force min sizes; pin every axis */
  width: 13px !important;
  min-width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  background: var(--np-charcoal);
  transition: background 0.15s, transform 0.15s;
}

.np-promo__dot:hover {
  background: var(--np-charcoal-light);
  transform: scale(1.15);
}

.np-promo__dot.is-active {
  background: var(--np-red);
}

/* ---------- top brands line ---------- */
.np-brands-line {
  margin-top: 34px;
}

.np-brands-line__row {
  padding: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.np-brands-line__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--np-muted);
  margin-right: 6px;
  white-space: nowrap;
}

.np-brands-line__brand {
  flex: 1 1 0;
  height: 52px;
  border: 1px solid var(--np-border);
  border-radius: 4px;
  background: var(--np-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-brands-line__brand:hover {
  border-color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.np-brands-line__brand img,
.np-brands-line__brand svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.np-brands-line__all-row {
  text-align: center;
  margin-top: 12px;
}

.np-brands-line__all {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--np-navy);
  white-space: nowrap;
  text-decoration: none;
}

.np-brands-line__all:hover {
  text-decoration: underline;
}

/* mobile: label and link get their own lines, logos wrap 3-up */
@media (max-width: 989.98px) {
  .np-brands-line__label {
    flex-basis: 100%;
    margin-right: 0;
  }

  .np-brands-line__brand {
    flex: 1 1 calc(33.333% - 8px);
  }

  .np-brands-line__all {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ---------- shop popular categories: the reel ---------- */
/* A row of 3:4 photo panels on a light band, scrolling off the right edge and
   snapping per panel (the prototype's Scroller, Greg 2026-09-22, at a smaller
   size); the arrows in the section head page it two panels at a time from 700px
   up, a swipe does it below. The six photos are one low-key series (near-black,
   one red or warm highlight); a shared grade and floor gradient hold them
   together and keep the white name legible on every one. The last panel is the
   link to every category. The track's gutter mirrors the stepped container so
   the first panel lines up with the heading. */
.np-cat-reel {
  --np-reel-gutter: max(20px, calc((100% - 768px) / 2 + 20px));
  margin-top: 36px;
  padding: 30px 0 32px;
  background: var(--np-surface);
}

@media (min-width: 990px) { .np-cat-reel { --np-reel-gutter: calc((100% - 768px) / 2 + 24px); } }
@media (min-width: 1000px) { .np-cat-reel { --np-reel-gutter: calc((100% - 1000px) / 2 + 32px); } }
@media (min-width: 1300px) { .np-cat-reel { --np-reel-gutter: calc((100% - 1300px) / 2 + 32px); } }

.np-cat-reel .np-sect-head {
  margin-bottom: 16px;
}

.np-cat-reel__nav {
  display: none;
  gap: 8px;
}

@media (min-width: 700px) {
  .np-cat-reel__nav {
    display: flex;
  }
}

.np-cat-reel__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--np-bg);
  border: 2px solid var(--np-ink-strong);
  border-radius: 50%;
  color: var(--np-ink-strong);
}

.np-cat-reel__btn svg,
.np-cat-reel__go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-cat-reel__btn:hover:not(:disabled) {
  background: var(--np-charcoal);
  color: #fff;
}

.np-cat-reel__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.np-cat-reel__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--np-reel-gutter);
  padding: 0 var(--np-reel-gutter) 4px;
  scrollbar-width: none;
}

.np-cat-reel__track::-webkit-scrollbar {
  display: none;
}

.np-cat-reel__panel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(168px, 44vw, 236px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  scroll-snap-align: start;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.np-cat-reel__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.np-cat-reel__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 24%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.np-cat-reel__name {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  font-family: var(--font-heading-family);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* the one accent touch: a short rule over the name that runs out on hover */
.np-cat-reel__name::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 9px;
  background: var(--np-red);
  transition: width 0.25s ease;
}

.np-cat-reel__panel:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05);
}

.np-cat-reel__panel:hover .np-cat-reel__name::before {
  width: 48px;
}

.np-cat-reel__panel:focus-visible,
.np-cat-reel__btn:focus-visible,
.np-cat-reel__track:focus-visible {
  outline: 2px solid var(--np-red);
  outline-offset: 2px;
}

/* the closing panel: charcoal, the link's words and an accent arrow */
.np-cat-reel__panel--all {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: var(--np-charcoal);
}

.np-cat-reel__panel--all::after {
  content: none;
}

.np-cat-reel__panel--all .np-cat-reel__name {
  position: static;
}

.np-cat-reel__go {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--np-red);
  color: #fff;
  transition: transform 0.2s;
}

.np-cat-reel__panel--all:hover .np-cat-reel__go {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .np-cat-reel__panel img,
  .np-cat-reel__name::before,
  .np-cat-reel__go {
    transition: none;
  }

  .np-cat-reel__panel:hover img {
    transform: none;
  }
}

/* ---------- shop by vehicle: square make tiles + popular-model chips ---------- */

.np-shop-by-vehicle {
  margin-top: 36px;
}

/* standalone /pages/shop-by-vehicle: the section is the whole page, so it
   carries its own room before the footer */
.page-shop-by-vehicle .np-shop-by-vehicle {
  padding-bottom: 72px;
}

.np-make-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.np-make-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 6px;
  background: var(--np-bg);
  border: 1px solid var(--np-border);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--np-ink-strong);
  text-align: center;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.np-make-tile:hover {
  border-color: var(--np-navy);
  color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* tiles rendered without links keep their resting look */
.np-make-tile.np-is-static:hover {
  border-color: var(--np-border);
  color: var(--np-ink-strong);
  box-shadow: none;
}

/* modern/classics toggle under the API-loaded grid (hidden until it loads) */
.np-make-more {
  margin-top: 10px;
}

.np-make-toggle {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--np-bg);
  border: 1px solid var(--np-border);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--np-navy);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-make-toggle:hover {
  border-color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---------- in-place vehicle picker ----------
   clicking a make tile swaps the grid for one row of the picked tile +
   Year select + Model select, with a back pill on its own line below.
   The handoff is animated (np-shop-by-vehicle.js): the other tiles fade
   away, the picked tile glides diagonally to the grid's top-left corner,
   and the picker controls fade in - transform/opacity only. */
.np-shop-by-vehicle.np-is-picking .np-make-grid:not(.np-model-grid),
.np-shop-by-vehicle.np-is-picking .np-make-more {
  display: none;
}

.np-make-picker {
  display: none;
}

.np-is-picking .np-make-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.np-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* only the controls fade in: the adopted tile must sit dead still, so the
   entrance animation goes on its neighbours, never the container */
.np-is-picking .np-picker-row > :not(.np-is-picked),
.np-is-picking .np-picker-back {
  animation: np-picker-in 0.22s ease-out both;
}

@keyframes np-picker-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes np-picker-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.np-make-grid.np-is-animating .np-make-tile {
  transition: opacity 0.24s ease;
}

.np-make-grid .np-make-tile.np-is-flying {
  position: relative;
  z-index: 2;
  border-color: var(--np-navy);
  color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.27s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the landed tile is adopted into the picker row as-is (width frozen to
   its grid size), so the box never turns into text or shifts */
.np-make-tile.np-is-picked {
  border-color: var(--np-navy);
  color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.np-picker-back {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--np-bg);
  border: 1px solid var(--np-border);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--np-navy);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.np-picker-back:hover {
  border-color: var(--np-navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.np-make-picker select {
  height: 42px;
  min-width: 130px;
  border: 1px solid var(--np-line);
  border-radius: 5px;
  background: var(--np-bg);
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--np-ink);
}

.np-make-picker select:disabled {
  color: var(--np-ink-soft);
  background: var(--np-field);
}

.np-picker-note {
  font-size: 13px;
  color: var(--np-ink-soft);
}

.np-picker-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--np-navy);
  white-space: nowrap;
  text-decoration: none;
}

/* reduced motion: the handoff keeps its fades but drops the movement
   (the page script also skips the glide and enters the picker directly) */
@media (prefers-reduced-motion: reduce) {
  .np-make-grid .np-make-tile.np-is-flying {
    transition: none;
  }

  .np-is-picking .np-picker-row > :not(.np-is-picked),
  .np-is-picking .np-picker-back {
    animation-name: np-picker-fade;
  }
}


/* fixed 5-up make tiles across the design's whole 768-step range; below 768 the
   auto-fill base rule takes over so phone tiles keep a readable width and long
   names like Mercedes-Benz still fit */
@media (min-width: 768px) and (max-width: 999.98px) {
  .np-make-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* the makes past the featured set render hidden behind View all makes; the
   flex display above would otherwise beat the hidden attribute */
.np-make-tile[hidden] {
  display: none;
}

/* standalone /shop-by-vehicle: the make grid is the whole page, so the tiles,
   the heading, the toggle and the picker grow to fill it (Greg 2026-10-15);
   the homepage block above keeps its compact size */
.page-shop-by-vehicle .np-sect-head {
  margin-bottom: 26px;
}

.page-shop-by-vehicle .np-sect-head h2 {
  font-size: 30px;
}

.page-shop-by-vehicle .np-make-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.page-shop-by-vehicle .np-make-tile {
  min-height: 76px;
  padding: 12px 10px;
  font-size: 16px;
  border-radius: 5px;
}

.page-shop-by-vehicle .np-make-more {
  margin-top: 22px;
}

.page-shop-by-vehicle .np-make-toggle,
.page-shop-by-vehicle .np-picker-back {
  padding: 12px 26px;
  font-size: 15px;
}

.page-shop-by-vehicle .np-make-picker select {
  height: 52px;
  min-width: 180px;
  font-size: 16px;
}

.page-shop-by-vehicle .np-picker-note,
.page-shop-by-vehicle .np-picker-all {
  font-size: 15px;
}

@media (min-width: 768px) {
  .page-shop-by-vehicle .np-make-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }

  .page-shop-by-vehicle .np-make-tile {
    min-height: 96px;
    font-size: 17px;
  }
}

/* a make tile with its car photo: Bring a Trailer's makes directory format (Greg 2026-10-15) - the photo at
   470:318 under a 50% black tint, the make's name white and centred over it, 4px corners. The picker adopts the
   tile as-is, so the photo rides along into the picker row. A make without a photo keeps the plain tile. */
.page-shop-by-vehicle .np-make-grid:has(.np-make-tile--photo) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.np-make-tile--photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 470 / 318;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--np-charcoal);
  color: #fff;
}

/* a make without a photo, in a grid of them, and any model or generation tile without one (the model stage): the
   same shape and corners, charcoal in place of the car */
.page-shop-by-vehicle .np-make-grid:has(.np-make-tile--photo) .np-make-tile:not(.np-make-tile--photo),
.np-model-grid .np-make-tile:not(.np-make-tile--photo) {
  aspect-ratio: 470 / 318;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--np-charcoal-light) 0%, var(--np-charcoal) 45%, #000 100%);
  color: #fff;
  font-size: 18px;
}

.np-make-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.np-make-tile--photo .np-make-tile__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  transition: background 0.15s;
}

.np-make-tile--photo:hover,
.np-make-tile--photo.np-is-picked,
.np-make-grid .np-make-tile--photo.np-is-flying {
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ---------- the model stage (Greg 2026-10-15): under the picker row once a make is picked, the make's models as
   tiles in the make tiles' format, then a model's generations, then a generation's years as chips ---------- */
.np-model-stage { margin-top: 28px; }
.np-model-stage__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.np-model-stage__title { margin: 0; font-size: 24px; font-weight: 600; color: var(--np-ink-strong); }
.page-shop-by-vehicle .np-model-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 768px) { .page-shop-by-vehicle .np-model-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } }
.np-model-grid .np-make-tile__name { flex-direction: column; }
.np-make-tile__sub { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 18px; opacity: .85; }
.np-model-stage__back[hidden] { display: none; }
.np-model-grid .np-make-tile { transition: filter .15s, box-shadow .15s; }
.np-model-grid .np-make-tile:hover { filter: brightness(1.18); }
.np-model-grid .np-make-tile.np-is-current { box-shadow: 0 0 0 3px var(--np-bg), 0 0 0 6px var(--np-red); }
.np-year-strip { margin-top: 22px; }
.np-year-strip__label { display: block; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--np-ink-strong); }
.np-year-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.np-year-chips a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 8px 12px;
  border: 2px solid var(--np-ink-strong); border-radius: 5px; background: var(--np-bg);
  font-size: 15px; font-weight: 700; color: var(--np-ink-strong); text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.np-year-chips a:hover, .np-year-chips a:focus-visible { background: var(--np-red); border-color: var(--np-red); color: #fff; }

.np-make-tile--photo:hover .np-make-tile__name {
  background: rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .page-shop-by-vehicle .np-make-grid:has(.np-make-tile--photo) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

/* ---------- the generic part-name store's home (template-generic) ---------- */
/* a part type tile without a photo: the reel's closing panel's charcoal, the name and its count at the foot */
.np-cat-reel__panel--text {
  background: linear-gradient(160deg, var(--np-charcoal-light) 0%, var(--np-charcoal) 45%, #000 100%);
}
.np-cat-reel__panel--text::after { content: none; }
.np-cat-reel__count {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body-family);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #c9c9c9;
}

/* "Also carried": the related part types as chips */
.np-also { padding-top: 40px; }
.np-also__text { margin: 0 0 16px; max-width: 80ch; font-size: 15px; line-height: 1.7; color: var(--np-ink-soft); }
.np-also__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.np-also__chip {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--np-border); border-radius: 4px; background: var(--np-surface);
  font-size: 13.5px; font-weight: 600; color: var(--np-ink-strong); transition: border-color 0.15s, color 0.15s;
}
.np-also__chip:hover { border-color: var(--np-red); color: var(--np-red-dark); }

/* the brand wall: logo tiles, the name when there is no logo */
.np-wall { padding-top: 40px; padding-bottom: 8px; }
.np-wall__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .np-wall__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .np-wall__grid { grid-template-columns: repeat(6, 1fr); } }
.np-wall__brand {
  height: 64px; display: flex; align-items: center; justify-content: center; padding: 8px 12px;
  border: 1px solid var(--np-border); border-radius: 4px; background: var(--np-logo-bg); transition: border-color 0.15s, box-shadow 0.15s;
}
.np-wall__brand:hover { border-color: var(--np-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.np-wall__brand img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.np-wall__word {
  font-family: var(--font-heading-family); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--np-logo-ink); text-align: center; line-height: 1.1;
}

/* the make photos' credits: Wikimedia Commons photographers and licences, folded under a line at the page's foot */
.np-make-credits {
  margin-top: 40px;
  font-size: 13px;
  color: var(--np-ink-soft);
}

.np-make-credits summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--np-ink-strong);
}

.np-make-credits p {
  margin: 10px 0;
}

.np-make-credits ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 3;
  column-gap: 24px;
}

.np-make-credits li {
  break-inside: avoid;
  margin-bottom: 4px;
}

.np-make-credits a {
  color: inherit;
}

@media (max-width: 767.98px) {
  .np-make-credits ul {
    columns: 1;
  }
}