.inv-filters {
  --accent: #cf1e27;
  --border: #ddd;
  color: var(--off-black, #111);
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 15px;
}
@media (min-width: 1025px) {
  .inv-filters { padding: 20px; }
}
.inv-filters-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  margin-bottom: 20px;
}

/* On mobile-collapsed accordion the inner content is hidden; remove the
   trailing gap so the heading sits flush inside the colored bar. */
@media (max-width: 1024px) {
  .inv-filters--accordion:not(.is-open) .inv-filters-toggle { margin-bottom: 0; }
}
.inv-filters--accordion:not(.is-open) { background: var(--accent); color: #fff; }
.inv-filters.inv-filters--static { background: #fff; color: inherit; }
.inv-filters.inv-filters--static .inv-filters-toggle { cursor: default; margin-bottom: 20px; }

@media (max-width: 1024px) {
  .inv-filters--accordion .inv-filters-toggle { cursor: pointer; }
  .inv-filters--accordion .inv-filters-toggle::after {
    content: '+';
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
  }
  .inv-filters--accordion.is-open .inv-filters-toggle::after { content: '–'; }
  .inv-filters--accordion:not(.is-open) .inv-filters-inner { display: none; }
}
@media (min-width: 1025px) {
  .inv-filters { background: #fff !important; color: inherit !important; }
  .inv-filters--accordion .inv-filters-toggle::after { content: ''; display: none; }
  .inv-filters--accordion .inv-filters-toggle { cursor: default; }
}
.inv-filters-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.inv-filters-row--desktop { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1025px) {
  .inv-filters-row--desktop { display: grid; grid-template-columns: 1fr 1fr 1fr; }
}
.inv-field { display: flex; flex-direction: column; gap: 6px; }
/* Search spans the year + price width on its own row; default auto-flow
   leaves col 3 of row 1 empty and drops the actions column directly to
   the right of the search input (row 2 col 3). When the search input is
   hidden (prod), the three remaining items fill row 1 naturally. */
.inv-field--search { grid-column: 1 / span 2; }

.inv-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.inv-filters .inv-select, .inv-filters .inv-input { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px; width: 100%; }
.inv-select--compact { padding: 8px 10px; }
.inv-filters-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.inv-inline { display: flex; gap: 8px; align-items: center; }
/* Scoped under .inv-filters to bump specificity above the parent
   theme's .btn rule in style-global.css — without the scope the
   cascade goes the wrong way on the homepage where archive.css
   (which re-declares these) isn't loaded. */
.inv-filters .inv-btn-primary { font-size: 17px; padding: 8px 10px; box-shadow: none; }
.inv-filters .inv-btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.inv-filters .inv-btn-blank   { background: transparent; color: var(--accent); border: 1px solid transparent; box-shadow: none; }

.inv-filters.inv-filters input, .inv-filters.inv-filters select { border-radius: 5px; border: 1px solid var(--accent); font-size: 16px; }

.inv-searchwrap .inv-searchbox { position: relative; display: flex; align-items: center; }
.inv-searchwrap .inv-searchbox .inv-input { padding-right: 48px; }
.inv-searchwrap .inv-search-btn {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  line-height: 0;
  z-index: 2;
  padding: 0 14px;
}
.inv-searchwrap .inv-search-btn svg { width: 18px; height: 18px; display: block; }
.inv-searchwrap .inv-search-btn:hover { opacity: 0.85; }

.inv-group .inv-range {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
  gap: 8px;
  align-items: center;
}
.inv-range-sep { text-align: center; opacity: 0.7; font-size: 12px; }

.inv-filters .inv-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
   Faceted search (Sep 2026 redesign)
   Cascading Condition / Type / Manufacturer / Model dropdowns with live
   counts, a visually separate "Refine Results" group (price / year /
   location / keyword — these don't affect the counts), and the custom
   listbox that replaces the native facet selects when JS is available.
--------------------------------------------------------------------------- */

.inv-facets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 641px) and (max-width: 1024px) {
  .inv-facets { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1025px) {
  .inv-facets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.inv-field { position: relative; }

/* Refine group — deliberately set apart: these filters narrow results on
   Search but never change the counts in the dropdowns above. */
.inv-refine {
  margin: 16px 0 0;
  padding: 17px 14px 14px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #f8f8f8;
}
/* Sits inside the card as its heading — not straddling the top border the
   way a <legend> would (which is why this is a role="group" div now). */
.inv-refine-head {
  margin: 0 0 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
}
.inv-refine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 641px) and (max-width: 1024px) {
  .inv-refine-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1025px) {
  .inv-refine-grid { grid-template-columns: 1.3fr 1.1fr 0.8fr 1.2fr; }
}
.inv-refine .inv-select,
.inv-refine .inv-input { background: #fff; }

/* Field titles in the filter-results group are visible (the global
   .inv-filters .inv-label rule below makes labels sr-only elsewhere). */
.inv-filters .inv-refine .inv-label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #444;
}

/* Native selects inside the filter form: replace the browser arrow (which
   sits flush against the border) with our own chevron, inset like the
   custom listbox buttons'. */
.inv-filters select.inv-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23cf1e27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 32px;
}

/* Actions row: live tally on the left, buttons on the right. */
.inv-filters-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 14px;
}
.inv-filters-actions-btns { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Sits between the facet dropdowns and the Filter Results panel, so it reads
   as the count for the dropdowns rather than for the whole form. */
.inv-tally {
  margin: 10px 0 0;
  font-size: 14px;
  color: #444;
}
.inv-tally-num { font-size: 16px; color: var(--accent); }
.inv-filters.has-pending .inv-tally-label { color: var(--accent); font-weight: 700; }

/* --- Custom listbox (select-only combobox) ------------------------------ */

/* The native select stays in the DOM as the form control + no-JS fallback;
   once enhanced it is hidden but still focusable by scripts. */
.inv-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.inv-combo { position: relative; }

.inv-combo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.3;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.inv-combo-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.inv-combo-value {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-combo.has-selection .inv-combo-value { font-weight: 700; }
.inv-combo-count {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
}
.inv-combo-count:empty { display: none; }
.inv-combo-chev { flex: none; color: var(--accent); }
.inv-combo-btn[aria-expanded="true"] .inv-combo-chev { transform: rotate(180deg); }

.inv-combo-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.inv-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}
.inv-opt--child { padding-left: 26px; }
.inv-opt--parent .inv-opt-label { font-weight: 700; }
.inv-opt.is-active { background: #f4e2e3; }
.inv-opt[aria-selected="true"] .inv-opt-label { color: var(--accent); font-weight: 700; }
.inv-opt-label { flex: 1 1 auto; min-width: 0; }
.inv-opt-count {
  flex: none;
  font-size: 12px;
  color: #8a8a8a;
  background: #f1f1f1;
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.inv-opt.is-disabled {
  cursor: not-allowed;
  color: #b5b5b5;
}
.inv-opt.is-disabled .inv-opt-count { color: #bbb; background: #f7f7f7; }

/* The legacy layout rule above (.inv-field--search { grid-column: 1 / span 2 })
   must not leak into the refine grid — it forces an implicit second column
   on mobile. Auto-place it, and let it span the full row on tablet. */
.inv-refine-grid .inv-field--search { grid-column: auto; }
@media (min-width: 641px) and (max-width: 1024px) {
  .inv-refine-grid .inv-field--search { grid-column: 1 / -1; }
}

/* --- Apply-on-change (sidebar) ------------------------------------------ */

.inv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The Search button is always shown: filters are applied explicitly, never
   on input. While the form holds changes that haven't been searched yet it
   pulses, because the results on screen no longer match the controls. */
.inv-filters .inv-submit-btn.is-pending {
  animation: fps-pending-pulse 1.7s ease-in-out infinite;
}
@keyframes fps-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 30, 39, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(207, 30, 39, 0); }
}
/* Motion-sensitive users get a static ring instead of the pulse. */
@media (prefers-reduced-motion: reduce) {
  /* Solid dark ring, not a tinted one: the translucent red sat at ~2.4:1 on
     the white panel, which is too faint for the users this fallback exists for. */
  .inv-filters .inv-submit-btn.is-pending {
    animation: none;
    outline: 3px solid var(--off-black, #1f211e);
    outline-offset: 2px;
  }
}

/* Brief "updating" state between a filter change and the new results. */
.inv-filters.is-applying .inv-facets,
.inv-filters.is-applying .inv-refine { opacity: 0.6; pointer-events: none; }
.inv-filters.is-applying .inv-tally-num { opacity: 0.5; }

/* Clear Filters reads as a plain link against the white panel — give it a
   light grey fill so it presents as the secondary button it is. */
.inv-filters .inv-clear-btn {
  background: #f1f1f1;
  border: 1px solid #e0e0e0;
}
/* The theme's .btn:is(:hover,:focus) turns the button off-black with white
   text. The rule above uses the `background` shorthand at equal specificity,
   so it was beating that dark fill while the white text still applied —
   white on light grey. Restore the site-standard black hover explicitly. */
.inv-filters .inv-clear-btn:is(:hover, :focus) {
  background: var(--off-black, #1f211e);
  border-color: var(--off-black, #1f211e);
  color: #fff;
}

/* Price/Year are .inv-group (display:block) so their label's 6px margin is the
   only gap, while Location/Keyword are .inv-field (flex column, gap:6px) and
   were picking up that gap ON TOP of the same margin — leaving their controls
   6px lower than the other two. Most obvious in the popup, where all four sit
   side by side. Drop the flex gap here and let the label margin set spacing
   for all four. */
.inv-refine .inv-field { gap: 0; }