/* Filter & search UX */

.filter-visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

#shopFilterRoot {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.filter-search-wrap {
 position: relative;
}

.filter-search-input--hero {
 min-height: 48px;
 font-size: 15px;
 padding-right: 40px;
}

.filter-search-clear {
 position: absolute;
 right: 8px;
 top: 50%;
 transform: translateY(-50%);
 width: 44px;
 height: 44px;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-size: 22px;
 line-height: 1;
 cursor: pointer;
 border-radius: 8px;
}

.filter-search-clear:hover,
.filter-search-clear:focus-visible {
 color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.1);
}

.filter-search-clear.is-hidden {
 display: none;
}

.filter-suggestions {
 position: absolute;
 left: 0;
 right: 0;
 top: calc(100% + 4px);
 z-index: 30;
 list-style: none;
 margin: 0;
 padding: 6px;
 background: var(--card-bg, #0a1628);
 border: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 10px;
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
 max-height: 240px;
 overflow-y: auto;
}

.filter-suggestion-item {
 display: block;
 width: 100%;
 min-height: 44px;
 padding: 10px 12px;
 text-align: left;
 border: none;
 background: transparent;
 color: var(--text);
 font-size: 14px;
 border-radius: 6px;
 cursor: pointer;
}

.filter-suggestion-item:hover,
.filter-suggestion-item:focus-visible {
 background: rgba(77, 184, 224, 0.12);
 color: var(--bright-cyan);
}

.filter-active-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.filter-chip {
 min-height: 36px;
 padding: 6px 12px;
 border-radius: 999px;
 border: 1px solid rgba(77, 184, 224, 0.35);
 background: rgba(77, 184, 224, 0.08);
 color: var(--text);
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
}

.filter-chip:hover {
 border-color: var(--bright-cyan);
 color: var(--bright-cyan);
}

.filter-chip--reset {
 border-style: dashed;
 color: var(--text-muted);
}

.filter-panel-body {
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.filter-section {
 border: 1px solid rgba(77, 184, 224, 0.12);
 border-radius: 10px;
 padding: 12px;
 background: rgba(6, 11, 18, 0.45);
}

.filter-group-title {
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--text-muted);
 margin: 0 0 10px;
}

/* Category radios */
.filter-shop-group-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.filter-radio-row {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 44px;
 padding: 8px 10px;
 border: 1px solid rgba(77, 184, 224, 0.1);
 border-radius: 8px;
 cursor: pointer;
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 600;
}

.filter-radio-row input {
 accent-color: var(--bright-cyan);
 width: 18px;
 height: 18px;
 flex-shrink: 0;
}

.filter-radio-row.is-active,
.filter-radio-row:has(input:checked) {
 border-color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.12);
 color: var(--bright-cyan);
}

/* Vehicle types  -  full list, no inner scroll on desktop */
.filter-section--vehicle-types {
 overflow: visible;
 max-height: none;
}

.filter-vehicle-type-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.filter-vehicle-type-btn {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 min-height: 48px;
 padding: 8px 10px;
 border: 1px solid rgba(77, 184, 224, 0.1);
 border-radius: 8px;
 background: rgba(6, 11, 18, 0.55);
 color: var(--text-muted);
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
}

.filter-vehicle-type-btn input {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

.filter-vehicle-type-btn.is-active,
.filter-vehicle-type-btn:has(input:checked) {
 border-color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.12);
 color: var(--bright-cyan);
 box-shadow: 0 0 0 1px rgba(77, 184, 224, 0.2);
}

.filter-vehicle-type-icon {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 max-width: 28px;
 max-height: 28px;
 object-fit: contain;
 object-position: center;
}

.filter-vehicle-type-label {
 flex: 1;
 min-width: 0;
}

.filter-vehicle-type-btn .filter-count {
 margin-left: auto;
 font-size: 11px;
 opacity: 0.85;
 flex-shrink: 0;
}

/* Manufacturer scroll list (~10 visible rows) */
.filter-make-active {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 min-height: 40px;
 padding: 8px 10px;
 margin-bottom: 8px;
 border-radius: 8px;
 background: rgba(77, 184, 224, 0.1);
 border: 1px solid rgba(77, 184, 224, 0.3);
 font-size: 13px;
 font-weight: 700;
 color: var(--bright-cyan);
}

.make-scroll-list {
 list-style: none;
 margin: 8px 0 0;
 padding: 0;
 max-height: 440px;
 overflow-y: auto;
 overscroll-behavior: contain;
 scrollbar-width: thin;
 scrollbar-color: rgba(77, 184, 224, 0.35) transparent;
}

.make-scroll-list::-webkit-scrollbar {
 width: 6px;
}

.make-scroll-list::-webkit-scrollbar-thumb {
 background: rgba(77, 184, 224, 0.35);
 border-radius: 3px;
}

.make-list-option {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 min-height: 44px;
 padding: 8px 10px;
 border: none;
 background: transparent;
 color: var(--text);
 font-size: 13px;
 text-align: left;
 border-radius: 8px;
 cursor: pointer;
}

.make-list-option:hover,
.make-list-option:focus-visible {
 background: rgba(77, 184, 224, 0.1);
}

.make-list-option .filter-count {
 margin-left: auto;
 font-size: 11px;
 color: var(--text-muted);
}

.make-list-option img {
 width: 24px;
 height: 24px;
 object-fit: contain;
 flex-shrink: 0;
}

.make-combobox-fallback {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: rgba(77, 184, 224, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 700;
 color: var(--bright-cyan);
 flex-shrink: 0;
}

.filter-chip-remove {
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 border: none;
 background: transparent;
 border-radius: 6px;
 color: var(--text-muted);
 font-size: 18px;
 cursor: pointer;
 flex-shrink: 0;
}

.filter-chip-remove:hover {
 color: var(--bright-cyan);
 background: rgba(77, 184, 224, 0.1);
}

.filter-field-label {
 display: block;
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--text-muted);
 margin: 12px 0 6px;
 font-weight: 700;
}

.filter-section--refine .filter-field-label:first-of-type {
 margin-top: 0;
}

.filter-select-input {
 width: 100%;
 min-height: 44px;
 padding: 10px 12px;
 background: var(--dark-bg);
 border: 1px solid rgba(8, 146, 212, 0.2);
 border-radius: 6px;
 color: #fff;
 font-size: 14px;
 cursor: pointer;
}

.filter-select-input:focus {
 outline: none;
 border-color: var(--brand-blue);
}

.filter-select-input:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

.price-range {
 display: flex;
 align-items: center;
 gap: 8px;
}

.price-prefix {
 color: var(--text-muted);
 font-size: 14px;
 flex-shrink: 0;
}

.price-range-sep {
 color: var(--text-muted);
}

.filter-hint {
 font-size: 12px;
 color: var(--text-muted);
 padding: 8px 4px;
}

.filter-apply-mobile {
 display: none;
}

.shop-mobile-bar-inner {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
}

.shop-mobile-filters-btn {
 min-height: 44px;
 flex-shrink: 0;
 white-space: nowrap;
}

.shop-mobile-summary {
 flex: 1;
 min-width: 0;
 margin: 0;
 font-size: 13px;
 font-weight: 600;
 color: var(--text);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.shop-mobile-reset-btn {
 min-height: 44px;
 flex-shrink: 0;
}

.shop-filter-sheet-backdrop {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 90;
 background: rgba(0, 0, 0, 0.55);
}

.shop-filter-sheet {
 display: none;
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 100;
 max-height: 88vh;
 background: #060b12;
 border-top: 1px solid rgba(77, 184, 224, 0.25);
 border-radius: 16px 16px 0 0;
 transform: translateY(100%);
 transition: transform 0.28s ease;
 overflow: hidden;
}

.shop-filter-sheet.is-open {
 transform: translateY(0);
}

.shop-filter-sheet-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 16px;
 border-bottom: 1px solid rgba(77, 184, 224, 0.15);
}

.shop-filter-sheet-header h2 {
 margin: 0;
 font-size: 16px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

.shop-filter-sheet-close {
 min-width: 44px;
 min-height: 44px;
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-size: 28px;
 line-height: 1;
 cursor: pointer;
 border-radius: 8px;
}

.shop-filter-sheet-body {
 padding: 16px;
 overflow-y: auto;
 max-height: calc(88vh - 64px);
 -webkit-overflow-scrolling: touch;
}

body.filter-sheet-open {
 overflow: hidden;
}

@media (max-width: 900px) {
 .shop-sidebar {
  display: none;
 }

 .shop-filter-sheet-backdrop.is-open,
 .shop-filter-sheet {
  display: block;
 }

 .filter-apply-mobile {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
 }

 .filter-vehicle-type-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
 }

 .filter-vehicle-type-btn {
  min-height: 52px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
 }

 .filter-vehicle-type-btn .filter-count {
  margin-left: 0;
 }
}

@media (min-width: 901px) {
 .shop-filter-sheet,
 .shop-filter-sheet-backdrop {
  display: none !important;
 }
}
/* deploy-stamp: 2026-07-07T14:40:15 */