/* The parts hub (/shop-by-category, /parts): headings, category
   tiles (ruled grid: small square image on the left, name on the right).
   Northern Performance's np-category-preview.css, in the storefront kit since
   2026-10-01; it reads the --parts-* tokens (tokens.css: a default each, a
   site's :root overrides). Container mirrors the sitewide
   stepped container so the page lines 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;
  }
}

/* ---------- page heading: sitewide heavy rule + short red tick ---------- */
.np-catprev {
  padding-bottom: 56px;
}

.np-catprev__head {
  padding-top: 16px;
}

.np-catprev__head h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--parts-ink-strong);
}

@media (max-width: 599.98px) {
  .np-catprev__head h1 {
    font-size: 28px;
  }
}



/* ---------- the Include universal products switch under the rule ----------
   A sliding toggle: grey track with the knob left when off, red track with
   the knob right when on; greyed and dead when no category holds a fitted
   part (the switch is then forced on so the page is never empty). */
.np-catprev__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 16px;
}

.np-catprev .np-catprev__toggle {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--parts-ink-strong);
  white-space: nowrap;
  cursor: pointer;
}

.np-catprev .np-catprev__toggle:hover,
.np-catprev .np-catprev__toggle:focus-visible {
  color: var(--parts-accent);
}

/* the Garage theme rings every focused button (a Tailwind box-shadow in
   styles-deferred.css); this control shows a ring for keyboard focus only */
.np-catprev .np-catprev__toggle:focus {
  outline: none;
  box-shadow: none;
}

.np-catprev .np-catprev__toggle:focus-visible {
  outline: 2px solid var(--parts-accent);
  outline-offset: 3px;
}

.np-catprev__toggle-track {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: var(--parts-radius-toggle);
  background: var(--parts-toggle-off);
  transition: background 0.15s ease;
}

.np-catprev__toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--parts-radius-round);
  background: var(--parts-bg);
  box-shadow: var(--parts-toggle-knob-shadow);
  transition: transform 0.15s ease;
}

.np-catprev .np-catprev__toggle:hover .np-catprev__toggle-track {
  background: var(--parts-toggle-off-hover);
}

.np-catprev__toggle.is-on .np-catprev__toggle-track,
.np-catprev .np-catprev__toggle.is-on:hover .np-catprev__toggle-track {
  background: var(--parts-accent);
}

.np-catprev__toggle.is-on .np-catprev__toggle-knob {
  transform: translateX(14px);
}

.np-catprev .np-catprev__toggle.is-dead {
  color: var(--parts-ink-soft);
  cursor: not-allowed;
}

.np-catprev .np-catprev__toggle.is-dead .np-catprev__toggle-track {
  background: var(--parts-border);
}

@media (prefers-reduced-motion: reduce) {
  .np-catprev__toggle-track,
  .np-catprev__toggle-knob {
    transition: none;
  }
}

/* the no-vehicle invitation, in the switch's place under the rule */
.np-catprev__prompt {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--parts-ink-strong);
}

.np-catprev .np-catprev__prompt-link {
  color: var(--parts-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.np-catprev .np-catprev__prompt-link:hover,
.np-catprev .np-catprev__prompt-link:focus-visible {
  color: var(--parts-accent-strong);
}

.np-catprev__bar-note {
  font-size: 14px;
  color: var(--parts-ink-soft);
}

/* ---------- headings (no images) ---------- */
.np-catprev__group {
  padding: 34px 0 6px;
}

.np-catprev__group + .np-catprev__group {
  border-top: 1px solid var(--parts-border);
  margin-top: 28px;
}

.np-catprev__group-name {
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--parts-accent);
}

/* ---------- tiles: ruled grid, small image on the left, name on the right ----------
   The grid lines are real borders: the list carries the top and left edge, every
   cell its right and bottom edge, so lines are shared and a short last row
   simply stops where the tiles stop. */
.np-catprev__tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0;
  border-top: 1px solid var(--parts-border);
  border-left: 1px solid var(--parts-border);
}

.np-catprev__tiles > li {
  display: flex;
  min-width: 0;
  border-right: 1px solid var(--parts-border);
  border-bottom: 1px solid var(--parts-border);
}

.np-catprev .np-catprev__tile {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 8px 14px 8px 10px;
  color: var(--parts-ink-strong);
  text-decoration: none;
  transition: color 0.1s ease;
}

.np-catprev a.np-catprev__tile:hover,
.np-catprev a.np-catprev__tile:focus-visible {
  color: var(--parts-accent);
}

.np-catprev .np-catprev__tile img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--parts-photo-bg);
  border: 0;
  border-radius: var(--parts-radius-tile-image);
  transition: transform 0.15s ease;
}

.np-catprev a.np-catprev__tile:hover img,
.np-catprev a.np-catprev__tile:focus-visible img {
  transform: scale(1.08);
}

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

.np-catprev__tile--noimg img {
  opacity: 0.55;
}

.np-catprev__name {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (max-width: 679.98px) {
  .np-catprev__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .np-catprev .np-catprev__tile {
    gap: 10px;
    min-height: 74px;
    padding: 6px 8px;
  }

  .np-catprev .np-catprev__tile img {
    width: 60px;
    height: 60px;
  }

  .np-catprev__name {
    font-size: 14px;
  }

  .np-catprev__group-name {
    font-size: 21px;
  }
}