/* Listing pages (visual refresh Plan D: category; mockup docs/design/2026-10-05-visual-refresh/v3/cat.html).
 * Loaded on shell listing pages only. Tokens from stp-ui.css. */
.stp-lp { padding-top: 20px; padding-bottom: var(--stp-sec); }
.stp-lp .stp-card, .stp-lp .stp-card.stp-fitbar { background: var(--stp-surface); border: 1px solid var(--stp-line); border-radius: var(--stp-r-lg); box-shadow: var(--stp-shadow); }
.stp-lp [hidden] { display: none !important; }
.stp-lp-crumbs { margin-bottom: 10px; font-size: 13.5px; color: var(--stp-muted); }
.stp-lp-crumbs a { color: var(--stp-muted); }
.stp-lp-head { margin-bottom: 18px; }
.stp-lp-head h1 { margin: 0; font-size: 34px; font-weight: 780; letter-spacing: -.025em; line-height: 1.1; color: var(--stp-ink); }
.stp-lp-sub { margin: 8px 0 0; font-size: 15.5px; color: var(--stp-muted); }
.stp-lp-sub b { color: var(--stp-ok-text); }

/* selects (mockup .sel) */
.stp-sel { position: relative; display: block; }
.stp-sel select { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; --has-height: 44px; padding: 0 32px 0 12px; border-radius: var(--stp-r);
  border: 1px solid var(--stp-line-strong); background: var(--stp-surface); font: inherit; font-size: 14.5px; color: var(--stp-ink); }
.stp-sel .stp-i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--stp-muted); pointer-events: none; }

/* fit bar */
.stp-fitbar { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 24px; }
.stp-fitbar-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--stp-ink); color: var(--stp-yellow); }
.stp-fitbar-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.stp-fitbar-txt b { font-size: 16px; color: var(--stp-ink); }
.stp-fitbar-txt span { font-size: 13.5px; color: var(--stp-muted); }
.stp-fitbar-finder { margin-left: auto; flex: 0 1 620px; min-width: 0; }
.stp-fitbar-finder .stp-finder-row { display: grid; grid-template-columns: repeat(3, minmax(0, 140px)) auto; gap: 8px; justify-content: end; }
.stp-fitbar-finder .stp-finder-row select, .stp-fitbar-finder .stp-finder-row input { width: 100%; min-width: 0; height: 44px; --has-height: 44px; }
.stp-fitbar-finder .stp-finder-btn { height: 44px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--stp-r); background: var(--stp-ink); color: var(--stp-on-dark); font-weight: 700; white-space: nowrap; cursor: pointer; }
.stp-fitbar-finder .stp-finder-btn:disabled { background: var(--stp-surface-2); color: var(--stp-disabled-ink); cursor: not-allowed; }
.stp-lp .stp-card.stp-fitbar-set { background: var(--stp-ok-soft); border-color: var(--stp-ok-line); }
.stp-fit-ok { flex: none; color: var(--stp-ok); display: flex; }
.stp-fit-link { margin-left: auto; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 650; color: var(--stp-ink); border-bottom: 1.5px solid var(--stp-yellow); cursor: pointer; }
html.stp-lp-veh .stp-fitbar-none { display: none; }

/* need another part (C15) */
.stp-op { margin: -8px 0 24px; }
.stp-op-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; border-radius: var(--stp-r-lg); border: 1px dashed var(--stp-line-strong); background: var(--stp-surface); }
.stp-op-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.stp-op-txt b { font-size: 15px; color: var(--stp-ink); }
.stp-op-txt span { font-size: 13px; color: var(--stp-muted); }
.stp-combo { position: relative; flex: none; width: 340px; margin-left: auto; }
.stp-combo-btn { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-radius: var(--stp-r);
  border: 1.5px solid var(--stp-ink); background: var(--stp-surface); font: inherit; font-size: 14.5px; font-weight: 600; color: var(--stp-ink); cursor: pointer; }
.stp-combo-btn .stp-i-search { color: var(--stp-muted); }
.stp-combo-btn .stp-i-down { margin-left: auto; }
.stp-combo-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 100%; min-width: 320px; overflow: hidden; background: var(--stp-surface);
  border: 1px solid var(--stp-line); border-radius: var(--stp-r-lg); box-shadow: 0 18px 44px -12px rgba(14,15,18,.3); }
.stp-combo-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--stp-line); color: var(--stp-muted); }
.stp-combo-search input { flex: 1; min-width: 0; height: 32px; --has-height: 32px; padding: 0; border: 0 !important; outline: none; box-shadow: none; background: none; font: inherit; font-size: 16px; color: var(--stp-ink); }
.stp-combo-list { max-height: 340px; overflow: auto; padding: 6px; }
.stp-combo-h { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--stp-muted); }
.stp-combo-opt { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--stp-r-sm); font-size: 14.5px; color: var(--stp-ink-2); text-decoration: none; }
.stp-combo-opt:hover, .stp-combo-opt:focus-visible { background: var(--stp-surface-2); color: var(--stp-ink); }
.stp-combo-opt em, .stp-f-opt em, .stp-chip em { font-style: normal; font-size: 12.5px; color: var(--stp-muted); font-variant-numeric: tabular-nums; }
.stp-combo-none { padding: 14px 10px; font-size: 14px; color: var(--stp-muted); }
.stp-combo-none a { color: var(--stp-ink); font-weight: 650; border-bottom: 1.5px solid var(--stp-yellow); }
.stp-combo-all { display: flex; align-items: center; justify-content: center; padding: 12px; border-top: 1px solid var(--stp-line); background: var(--stp-surface-2);
  font-size: 14px; font-weight: 650; color: var(--stp-ink); text-decoration: none; }

/* body: filters + results */
.stp-lp-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.stp-filters { position: sticky; top: 16px; padding: 6px 18px 18px; background: var(--stp-surface); border: 1px solid var(--stp-line); border-radius: var(--stp-r-lg); box-shadow: var(--stp-shadow); }
.stp-f-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0 4px; border-bottom: 1px solid var(--stp-line); }
.stp-f-head b { font-size: 16px; color: var(--stp-ink); }
.stp-f-clear { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--stp-muted); }
.stp-f-x, .stp-f-apply { display: none; }
.stp-f-group { padding: 14px 0; border-bottom: 1px solid var(--stp-line); }
.stp-f-group:last-of-type { border-bottom: 0; }
.stp-f-title { margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--stp-muted); }
.stp-f-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.stp-f-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 10px; border-radius: var(--stp-r-sm);
  font-size: 14.5px; color: var(--stp-ink-2); text-decoration: none; }
.stp-f-opt:hover { background: var(--stp-surface-2); color: var(--stp-ink); }
.stp-f-opt.is-on, .stp-f-opt.is-on:hover { background: var(--stp-ink); color: var(--stp-on-dark); }
.stp-f-opt.is-on em { color: var(--stp-ftr-text); }
.stp-f-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; color: var(--stp-muted); }
.stp-f-range select { height: 40px; --has-height: 40px; }
.stp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stp-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--stp-r-pill); border: 1px solid var(--stp-line-strong);
  background: var(--stp-surface); font-size: 13.5px; font-weight: 550; color: var(--stp-ink-2); text-decoration: none; }
.stp-chip:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-chip.is-on, .stp-chip.is-on:hover { background: var(--stp-ink); border-color: var(--stp-ink); color: var(--stp-on-dark); }
.stp-f-toggle { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--stp-ink-2); text-decoration: none; }
.stp-sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--stp-r-pill); background: var(--stp-line-strong); transition: background .15s; }
.stp-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.stp-f-toggle.is-on .stp-sw { background: var(--stp-ink); }
.stp-f-toggle.is-on .stp-sw::after { transform: translateX(16px); }

/* toolbar */
.stp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 40px; margin-bottom: 16px; }
.stp-f-open { display: none; }
.stp-count { font-size: 14.5px; color: var(--stp-muted); }
.stp-count b { color: var(--stp-ink); }
.stp-chips-active { display: flex; flex-wrap: wrap; gap: 6px; }
.stp-chips-active a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: var(--stp-r-pill); background: var(--stp-ink);
  color: var(--stp-on-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.stp-chips-active a:hover { color: var(--stp-on-dark); background: var(--stp-ink-2); }
.stp-chips-active .stp-i { opacity: .8; }
.stp-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 13.5px; color: var(--stp-muted); }
.stp-sort select { height: 40px; --has-height: 40px; min-width: 190px; }

/* grid + cards (C12) */
.stp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.stp-lc { margin: 0; min-width: 0; }
.stp-lcard { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 10px 10px 16px; background: var(--stp-surface);
  border: 1px solid var(--stp-line); border-radius: var(--stp-r-lg); box-shadow: var(--stp-shadow); color: var(--stp-ink); text-decoration: none; }
.stp-lcard:hover { border-color: var(--stp-line-strong); color: var(--stp-ink); }
.stp-lc-img { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 6px; overflow: hidden; border-radius: var(--stp-r); background: var(--stp-surface-2); }
.stp-lc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stp-nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--stp-muted); background: repeating-linear-gradient(135deg, var(--stp-surface-2) 0 12px, #f1efea 12px 24px); }
.stp-nophoto .stp-i { color: #b3b0a8; }
.stp-fitb { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: var(--stp-r-pill);
  background: #fff; color: var(--stp-ok-text); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.stp-fitb .stp-i { color: var(--stp-ok); }
.stp-lc-t { margin: 0; padding: 0 6px; font-size: 15px; font-weight: 620; line-height: 1.35; color: var(--stp-ink); }
.stp-lc-meta { padding: 0 6px; font-size: 12.5px; color: var(--stp-muted); }
.stp-lc-ship { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12.5px; color: var(--stp-muted); }
.stp-lc-ship.is-ship { color: var(--stp-ok-text); }
.stp-lc-price { margin-top: auto; padding: 4px 6px 0; font-size: 17px; font-weight: 750; color: var(--stp-ink); }
.stp-lc-price del { font-weight: 500; color: var(--stp-muted); }
.stp-lc-price ins { text-decoration: none; }
.stp-cfp { font-size: 15px; font-weight: 650; color: var(--stp-ink-2); }
.stp-lp-none { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px; text-align: center; }
.stp-lp-none b { font-size: 18px; color: var(--stp-ink); }
.stp-lp-none span { margin-bottom: 8px; color: var(--stp-muted); }
.stp-lp-empty { display: flex; justify-content: center; padding: 32px; }

/* pager (C17) */
.stp-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.stp-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; box-sizing: border-box;
  border-radius: var(--stp-r-sm); border: 1px solid var(--stp-line); background: var(--stp-surface); font-weight: 600; color: var(--stp-ink-2); text-decoration: none; }
.stp-pg:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-pg.is-on, .stp-pg.is-on:hover { background: var(--stp-ink); border-color: var(--stp-ink); color: var(--stp-on-dark); }
.stp-pg.is-off { opacity: .4; }
.stp-pg-gap { align-self: center; padding: 0 2px; color: var(--stp-muted); }
.stp-flip { display: inline-flex; transform: rotate(180deg); }

/* below the results */
.stp-lp .stp-lp-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; margin-top: var(--stp-sec); padding: 32px 36px; }
.stp-lp-foot h2 { margin: 0 0 10px; font-size: 20px; font-weight: 720; color: var(--stp-ink); }
.stp-lp-foot h3 { margin: 0 0 12px; font-size: 14px; font-weight: 650; color: var(--stp-ink); }
.stp-lp-foot p { margin: 0 0 10px; line-height: 1.65; }

.stp-sheet-bd { display: none; }
html.stp-noscroll { overflow: hidden; }

/* ---------- narrower ---------- */
@media (max-width: 1240px) {
  .stp-fitbar-none { flex-wrap: wrap; }
  .stp-fitbar-finder { flex: 1 1 100%; margin-left: 0; }
  .stp-fitbar-finder .stp-finder-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; justify-content: stretch; }
}
@media (max-width: 1100px) { .stp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .stp-lp-body { grid-template-columns: minmax(0, 1fr); }
  .stp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stp-f-open { display: inline-flex; width: auto; height: 40px; padding: 0 14px; font-size: 14px; }
  .stp-f-badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
    background: var(--stp-yellow); color: var(--stp-ink); font-size: 11px; font-weight: 800; }
  /* filters become a bottom sheet */
  .stp-filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 100001; max-height: 85vh; overflow: auto; padding: 4px 20px calc(16px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
  .stp-filters.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .stp-f-x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--stp-ink); cursor: pointer; }
  .stp-f-head b + .stp-f-x { margin-left: auto; }   /* no "Clear all": the close button goes right */
  .stp-f-clear { margin-right: 4px; }
  .stp-f-apply { display: flex; width: 100%; margin-top: 12px; position: sticky; bottom: 0; }
  .stp-sheet-bd { display: block; position: fixed; inset: 0; z-index: 100000; background: var(--stp-backdrop); }
  .stp-sheet-bd[hidden] { display: none; }
  .stp-lp .stp-lp-foot { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
}
@media (max-width: 760px) {
  .stp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stp-op-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .stp-combo { width: 100%; margin: 0; }
  .stp-combo-pop { min-width: 0; }
}
@media (max-width: 600px) {
  .stp-lp-head h1 { font-size: 26px; }
  .stp-lp-sub { font-size: 14px; }
  .stp-fitbar { padding: 14px; gap: 12px; }
  .stp-fitbar-none { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; }
  .stp-fitbar-finder { grid-column: 1 / -1; }
  .stp-fitbar-finder .stp-finder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-fitbar-finder .stp-finder-row > :nth-child(3), .stp-fitbar-finder .stp-finder-btn { grid-column: 1 / -1; }
  .stp-fit-link { margin-left: 0; }
  .stp-fitbar-set { flex-wrap: wrap; }
  .stp-toolbar { gap: 8px; }
  .stp-count { order: 3; flex-basis: 100%; }
  .stp-chips-active { order: 4; flex-basis: 100%; }
  .stp-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stp-sort select { min-width: 0; width: 170px; }
  .stp-lcard { padding: 6px 6px 12px; }
  .stp-lc-t { font-size: 13.5px; }
  .stp-fitb { left: 6px; top: 6px; font-size: 11px; }
}
.stp-lp-crumbs .ct-breadcrumbs { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
.stp-combo-search input:focus, .stp-combo-search input:focus-visible { border: 0 !important; box-shadow: none !important; outline: none; }
.stp-combo-search:focus-within { box-shadow: inset 0 -2px 0 var(--stp-yellow); }

/* ---------- index pages: /part-types/ (Browse parts) and /yard-vehicles/ ---------- */
.stp-ix-crumbs { display: flex; align-items: center; gap: 6px; }
.stp-ix-crumbs .stp-i { color: var(--stp-muted); }
.stp-ix-crumbs span { color: var(--stp-ink-2); }
.stp-ix-veh-acts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.stp-ix-veh-acts .stp-btn { height: 44px; }
.stp-ix-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; margin: 0 0 18px; border: 1.5px solid var(--stp-ink); border-radius: var(--stp-r);
  background: var(--stp-surface); color: var(--stp-muted); }
.stp-ix-search input { flex: 1; min-width: 0; height: 48px; --has-height: 48px; padding: 0; border: 0 !important; box-shadow: none !important; outline: none; background: none; font: inherit; font-size: 16px; color: var(--stp-ink); }
.stp-ix-search:focus-within { box-shadow: 0 0 0 3px rgba(255,205,0,.55); }
.stp-ix-none { margin: 0 0 18px; color: var(--stp-muted); }
.stp-ix-none a { color: var(--stp-ink); font-weight: 650; border-bottom: 1.5px solid var(--stp-yellow); }
.stp-ix-pop { margin-bottom: 22px; }
.stp-ix-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.stp-ix-jump a { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: var(--stp-r-sm); font-size: 13.5px; font-weight: 650; color: var(--stp-ink-2); text-decoration: none; }
.stp-ix-jump a:hover { background: var(--stp-surface); color: var(--stp-ink); }
.stp-lp .stp-ix-az { padding: 8px 28px 24px; }
.stp-ix-letter { padding-top: 16px; border-top: 1px solid var(--stp-line); scroll-margin-top: 16px; }
.stp-ix-letter:first-child { border-top: 0; }
.stp-ix-letter h2 { margin: 0 0 6px; font-family: var(--stp-font-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--stp-ink); }
.stp-ix-list { columns: 3; column-gap: 28px; padding-bottom: 12px; }
.stp-ix-list a { display: flex; justify-content: space-between; gap: 10px; break-inside: avoid; padding: 6px 8px; border-radius: var(--stp-r-sm);
  font-size: 14.5px; color: var(--stp-ink-2); text-decoration: none; }
.stp-ix-list a:hover { background: var(--stp-surface-2); color: var(--stp-ink); }
.stp-ix-list a[hidden] { display: none; }
.stp-ix-list em { font-style: normal; font-size: 12.5px; color: var(--stp-muted); font-variant-numeric: tabular-nums; }
.stp-yard-makes { margin-bottom: 18px; }
.stp-yard .stp-vcards { margin-bottom: 8px; }
.stp-yard-more { margin: 32px 0 0; text-align: center; color: var(--stp-muted); }
.stp-yard-more a { color: var(--stp-ink); font-weight: 650; border-bottom: 1.5px solid var(--stp-yellow); }
@media (max-width: 900px) { .stp-ix-list { columns: 2; } .stp-ix-veh { flex-wrap: wrap; } .stp-ix-veh-acts { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 600px) { .stp-ix-list { columns: 1; } .stp-lp .stp-ix-az { padding: 4px 16px 16px; } .stp-ix-veh { display: flex; } }
/* yard + donor pages (filter card beside the results) */
.stp-lp-results .stp-vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stp-donor-head { display: flex; align-items: center; gap: 18px; }
.stp-donor-photo { flex: none; width: 132px; aspect-ratio: 4 / 3; border-radius: var(--stp-r); overflow: hidden; box-shadow: var(--stp-shadow); }
.stp-donor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) { .stp-lp-results .stp-vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .stp-lp-results .stp-vcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stp-lp-results .stp-vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) { .stp-donor-photo { width: 84px; } .stp-donor-head { align-items: flex-start; gap: 12px; } }
/* searchable filter list (part type) */
.stp-f-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; margin-bottom: 8px; border: 1px solid var(--stp-line-strong); border-radius: var(--stp-r-sm); color: var(--stp-muted); background: var(--stp-surface); }
.stp-f-search:focus-within { border-color: var(--stp-ink); }
.stp-f-search input { flex: 1; min-width: 0; height: 36px; --has-height: 36px; padding: 0; border: 0 !important; box-shadow: none !important; outline: none; background: none; font: inherit; font-size: 16px; color: var(--stp-ink); }
.stp-f-opt[hidden] { display: none; }
.stp-f-none { margin: 4px 10px; font-size: 13.5px; color: var(--stp-muted); }
/* long filter lists: collapsed (no inner scrolling), fade + "Show all N"; the sticky card scrolls itself when taller than the window */
.stp-lp .stp-f-list { max-height: 300px; overflow: hidden; }
.stp-f-list.is-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
.stp-lp .stp-f-list.is-open, .stp-lp .stp-f-list.is-search { max-height: none; }
@media (min-width: 901px) { .stp-filters { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; } }
.stp-f-more { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0 10px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--stp-ink); border-bottom: 1.5px solid var(--stp-yellow); }
.stp-f-more::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.stp-f-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
.stp-f-more[hidden] { display: none; }

/* ---------- vehicle pages (Plan E, mockup v3/veh.html) + the /parts-for/ hub ---------- */
.stp-veh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.stp-veh-title { min-width: 0; }
.stp-veh-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.stp-vsel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--stp-muted); }
.stp-vsel select { min-width: 190px; font-weight: 650; }
.stp-vsave { height: 44px; font-size: 14.5px; }
.stp-vsave .stp-i { color: var(--stp-yellow); }
.stp-vsaved { display: none; align-items: center; gap: 7px; height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: var(--stp-r);
  background: var(--stp-ok-soft); border: 1px solid var(--stp-ok-line); color: var(--stp-ok-text); font-weight: 650; font-size: 14.5px; }
.stp-vsaved .stp-i { color: var(--stp-ok); }
.stp-veh.is-vsaved .stp-vsave { display: none; }
.stp-veh.is-vsaved .stp-vsaved { display: inline-flex; }
/* donor split: three tappable counts that set the Donor filter */
.stp-donor-split { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.stp-ds { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; box-sizing: border-box; border-radius: var(--stp-r-pill);
  border: 1px solid var(--stp-line-strong); background: var(--stp-surface); font-size: 13.5px; color: var(--stp-ink-2); text-decoration: none; }
.stp-ds b { font-size: 14px; color: var(--stp-ink); }
.stp-ds::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stp-muted); }
.stp-ds-same::before { background: var(--stp-ok); }
.stp-ds-year::before { background: #3b82c4; }
.stp-ds-other::before { background: #c98a00; }
.stp-ds:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-ds.is-on, .stp-ds.is-on:hover { background: var(--stp-ink); border-color: var(--stp-ink); color: var(--stp-on-dark); }
.stp-ds.is-on b { color: var(--stp-on-dark); }
.stp-veh .stp-fitment-notice { margin: 0 0 24px; }
.stp-f-sub { padding: 8px 10px 3px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--stp-muted); }
.stp-f-pop { display: flex; flex-direction: column; gap: 2px; }
.stp-f-sub[hidden], .stp-f-pop[hidden] { display: none; }
/* card extras: part-type label, donor tag on the photo */
.stp-lc-type { padding: 0 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--stp-muted); }
.stp-lc-donor { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 9px; border-radius: var(--stp-r-pill); background: rgba(20,21,24,.78); color: #fff; font-size: 11.5px; font-weight: 600; }
.stp-veh-req { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.stp-veh-empty { margin-bottom: 8px; }
.stp-veh-near .stp-vp-nearbanner { margin: 0 0 20px; border-radius: var(--stp-r-lg); }
.stp-veh-nearcta .stp-vp-empty { margin-top: 24px; }
.stp-veh-links .stp-chip em { margin-left: 2px; }
/* hub */
.stp-vh-find { flex-wrap: wrap; }
.stp-lp .stp-vh-az { padding: 22px 28px 28px; }
.stp-vh-az h2 { margin: 0 0 14px; font-size: 20px; font-weight: 720; color: var(--stp-ink); }
.stp-vh-makes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stp-vh-make { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 14px 16px;
  border: 1px solid var(--stp-line); border-radius: var(--stp-r); background: var(--stp-surface); color: var(--stp-ink); text-decoration: none; }
.stp-vh-make:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-vh-make b { font-size: 16px; font-weight: 700; }
.stp-vh-make em { grid-row: 2; font-style: normal; font-size: 13px; color: var(--stp-muted); font-variant-numeric: tabular-nums; }
.stp-vh-make .stp-i { grid-column: 2; grid-row: 1 / span 2; color: var(--stp-muted); }
@media (max-width: 1100px) { .stp-vh-makes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .stp-veh-head { flex-direction: column; align-items: flex-start; }
  .stp-veh-title { width: 100%; }
}
@media (max-width: 600px) {
  .stp-veh-acts { width: 100%; flex-direction: column; align-items: stretch; }
  .stp-vsel > span:first-child { display: none; }
  .stp-vsel .stp-sel { flex: 1; }
  .stp-vsel select { min-width: 0; }
  .stp-vsave, .stp-vsaved { width: 100%; height: 48px; justify-content: center; }
  .stp-donor-split { gap: 6px; }
  .stp-ds { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .stp-ds b { font-size: 13px; }
  .stp-lc-type { font-size: 10.5px; }
  .stp-lc-donor { left: 6px; bottom: 6px; font-size: 10.5px; }
  .stp-vh-makes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stp-lp .stp-vh-az { padding: 16px; }
  .stp-vh-make { padding: 12px; }
}

/* ---------- Plan G: follow-up question, card notes, year prompt, search results ---------- */
.stp-vq { display: flex; align-items: center; gap: 18px; padding: 16px 18px; margin-bottom: 18px; border: 1.5px solid var(--stp-ink) !important; }
.stp-vq-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.stp-vq-txt b { font-size: 17px; color: var(--stp-ink); }
.stp-vq-txt span { font-size: 13.5px; color: var(--stp-muted); }
.stp-vq-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; justify-content: flex-end; }
.stp-vq-opt { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: var(--stp-r);
  border: 1px solid var(--stp-line-strong); background: var(--stp-surface); font-weight: 650; font-size: 14.5px; color: var(--stp-ink); text-decoration: none; }
.stp-vq-opt:hover { border-color: var(--stp-ink); color: var(--stp-ink); }
.stp-vq-opt em { font-style: normal; font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: var(--stp-r-pill); background: var(--stp-surface-2); color: var(--stp-muted); }
.stp-vq-opt.is-zero { color: var(--stp-muted); }
.stp-vq-ns { border-style: dashed; color: var(--stp-ink-2); }
.stp-vq-line { margin: 0 0 18px; font-size: 14px; color: var(--stp-muted); }
.stp-vq-line a, .stp-veh-all { color: var(--stp-ink); font-weight: 650; border-bottom: 1.5px solid var(--stp-yellow); text-decoration: none; }
.stp-lp-none .stp-veh-all { margin-top: 8px; }
.stp-lc-note { margin: 2px 6px 0; padding: 6px 9px; border-radius: var(--stp-r-sm); background: var(--stp-brand-soft); color: var(--stp-brand-text); font-size: 12.5px; line-height: 1.4; }
.stp-vyear { flex-wrap: wrap; border-color: var(--stp-brand-line) !important; background: var(--stp-brand-soft) !important; }
.stp-vyear-sel { margin-left: auto; min-width: 220px; }
.stp-vyear-sel select { font-weight: 650; }
.stp-srch-veh { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 18px; padding: 6px 8px 6px 12px; border-radius: var(--stp-r-pill);
  background: var(--stp-ok-soft); border: 1px solid var(--stp-ok-line); font-size: 14px; color: var(--stp-ink-2); }
.stp-srch-veh .stp-i { color: var(--stp-ok); }
.stp-srch-veh .stp-fit-link { margin-left: 4px; }
.stp-lp .stp-srch-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin-top: 28px; padding: 18px 22px; color: var(--stp-ink); text-decoration: none; }
.stp-srch-more span { grid-column: 1; font-size: 14px; color: var(--stp-muted); }
.stp-srch-more .stp-i { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) { .stp-vq { flex-direction: column; align-items: stretch; } .stp-vq-opts { margin-left: 0; justify-content: flex-start; } .stp-vyear-sel { margin-left: 0; flex-basis: 100%; } }
@media (max-width: 600px) { .stp-vq-opt { flex: 1 1 calc(50% - 4px); justify-content: center; } .stp-lc-note { font-size: 11.5px; } }

/* ---------- vehicle search bar: a full-width dark band (Matt's 2026-10-06 review, mockup veh-polish/A-dark-band) ---------- */
.stp-vbar { margin: 0 0 22px; padding: 18px 0; background: var(--stp-ink); box-shadow: 0 0 0 100vmax var(--stp-ink); clip-path: inset(0 -100vmax); color: var(--stp-on-dark); }
.stp-vbar-toggle { display: none; }
.stp-vbar-hint { margin: 0 0 10px 2px; font-size: 15px; font-weight: 650; color: var(--stp-on-dark); }
.stp-vbar-row .stp-finder-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 8px; }
.stp-vbar-row select, .stp-vbar-row input { width: 100%; min-width: 0; height: 46px; --has-height: 46px; padding: 0 30px 0 12px; border-radius: var(--stp-r);
  border: 1px solid transparent; background-color: var(--stp-surface); font: inherit; font-size: 15px; color: var(--stp-ink); }
.stp-vbar-row select:disabled { background-color: #d9d7d1; color: var(--stp-muted); }
.stp-vbar-row .stp-finder-btn { height: 46px; min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--stp-r); background: var(--stp-yellow); color: var(--stp-ink);
  font-weight: 750; font-size: 15px; white-space: nowrap; cursor: pointer; }
.stp-vbar-row .stp-finder-btn:disabled { background: #4a4d55; color: #a9abb1; cursor: not-allowed; }
.stp-vbar.is-needyear .stp-finder-year { border: 2px solid var(--stp-yellow); }
@media (max-width: 999px) {
  .stp-vbar { padding: 4px 0; }
  .stp-vbar-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--stp-on-dark); font: inherit; }
  .stp-vbar-toggle .stp-i { color: var(--stp-yellow); }
  .stp-vbar-toggle > span { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
  .stp-vbar-toggle b { font-size: 14.5px; }
  .stp-vbar-toggle em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stp-vbar-toggle .stp-i-down { flex: none; transition: transform .15s; }
  .stp-vbar.is-open .stp-vbar-toggle .stp-i-down { transform: rotate(180deg); }
  .stp-vbar-hint { margin: 0 0 8px; }
  .stp-vbar-row { display: none; padding: 0 0 12px; }
  .stp-vbar.is-open .stp-vbar-row { display: block; }
  .stp-vbar-row .stp-finder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stp-vbar-row .stp-finder-field-type, .stp-vbar-row .stp-finder-btn { grid-column: 1 / -1; }
}
/* phones: less in the way of the results */
@media (max-width: 760px) {
  .stp-lp-crumbs.stp-ix-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-bottom: 8px; font-size: 13px; }
  .stp-lp-crumbs.stp-ix-crumbs::-webkit-scrollbar { display: none; }
  .stp-lp-crumbs.stp-ix-crumbs > * { flex: none; }
  .stp-donor-split { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .stp-donor-split::-webkit-scrollbar { display: none; }
  .stp-donor-split .stp-ds { flex: none; }
  /* bottom padding as a transparent border: overflow clips at the padding box, so no half third line shows */
  .stp-lp .stp-fitment-notice { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; font-size: 13.5px; cursor: pointer;
    padding-bottom: 0; border-bottom: 10px solid transparent; box-shadow: 0 1px 0 #f1dc7a; }
  .stp-lp .stp-fitment-notice.is-open { display: block; }
  .stp-veh .stp-lp-head { margin-bottom: 12px; }
  .stp-veh .stp-lp-crumbs { margin-bottom: 0; padding-bottom: 8px; }
}
@media (max-width: 600px) { .stp-vq-opt { padding: 0 10px; gap: 6px; } .stp-vq-opt em { white-space: nowrap; font-size: 11px; padding: 1px 6px; } }