
.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;
  margin-top: 6px;
}
.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;
}
