[data-hp-filters] { --filter-color: #dc2626; }
[data-hp-filters][data-tone="blue"] { --filter-color: #2563eb; }
.hp-filter-label { font-size: .875rem; font-weight: 700; color: #374151; margin-bottom: .75rem; }
.hp-filter-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.hp-filter-buttons button { min-height: 44px; padding: .65rem 1.25rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #f3f4f6; color: #4b5563; font-size: .875rem; font-weight: 700; transition: background .15s, color .15s; }
.hp-filter-buttons button:hover { border-color: var(--filter-color); color: var(--filter-color); }
.hp-filter-buttons button[aria-pressed="true"] { background: var(--filter-color); border-color: var(--filter-color); color: white; box-shadow: 0 4px 6px #1118271a; }
.hp-filter-buttons button:focus-visible { outline: 3px solid var(--filter-color); outline-offset: 3px; }
.hp-filter-status { margin-top: 1rem; font-size: .875rem; color: #6b7280; }
[data-hp-class][hidden], [data-hp-filters][hidden] { display: none; }
#horsepower-results > [data-hp-class]:not([hidden]) { margin-top: 0; }
#horsepower-results > [data-hp-class]:not([hidden]) ~ [data-hp-class]:not([hidden]) { margin-top: 3.5rem; }
@media (prefers-reduced-motion: reduce) { .hp-filter-buttons button { transition: none; } }