/* 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 (#8a8a8a 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-charcoal);
  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-charcoal);
}

.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: #fff;
}

.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;
  }
}

/* ---------- 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: #8a8a8a;
  white-space: nowrap;
}

.np-story__brand {
  flex: 1 1 0;
  height: 52px;
  border: 1px solid var(--np-border);
  border-radius: 4px;
  background: #fff;
  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: #fff;
  /* 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: #8a8a8a;
  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: #fff;
  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: #fff;
  border: 2px solid var(--np-charcoal);
  border-radius: 50%;
  color: var(--np-charcoal);
}

.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 coral 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 a coral 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: #fff;
  border: 1px solid var(--np-border);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--np-charcoal);
  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-charcoal);
  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: #fff;
  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,
.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: #fff;
  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 #cfcfcf;
  border-radius: 5px;
  background: #fff;
  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;
}

/* ---------- 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-charcoal); 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: #fff; 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-charcoal); text-align: center; line-height: 1.1;
}