.filter-panel { position: fixed !important; top: 4.5rem; right: 0.75rem; z-index: 35; display: flex; flex-direction: column; width: min(32rem, calc(100vw - 1.5rem)); max-width: none; max-height: min(62vh, 32rem); padding: 0; overflow: hidden; }
html.filter-panel-open, html.filter-panel-open body { overflow: hidden; }
.filter-options-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; flex: none; border-top: 1px solid #cbd5e1; background: #fff; padding: 0.75rem 1rem; box-shadow: 0 -4px 10px rgb(15 23 42 / 0.06); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.filter-chip { position: relative; display: inline-flex; cursor: pointer; }
.filter-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; }
.filter-chip span { display: inline-flex; align-items: center; min-height: 1.75rem; border: 1px solid #cbd5e1; background: #fff; padding: 0.2rem 0.55rem; color: #334155; font-size: 0.75rem; font-weight: 400; line-height: 1rem; pointer-events: none; }
.filter-chip input:checked + span { border-color: #00a6c8; background: #cffafe; color: #164e63; box-shadow: inset 0 0 0 1px #00a6c8; }
.filter-chip input:focus-visible + span { outline: 2px solid #00a6c8; outline-offset: 2px; }
.grade-badge.grade-badge-wide { width: auto; min-width: 2.5rem; padding-left: 0.4rem; padding-right: 0.4rem; }
.stock-search-control { height: 2.875rem; min-height: 2.875rem; }
.desktop-filter-control { height: 2.875rem; min-height: 2.875rem; }
.icon-only-control { width: 2rem !important; min-width: 2rem !important; height: 2rem !important; min-height: 2rem !important; padding: 0 !important; }
.filter-action-icon { width: 1.375rem !important; height: 1.375rem !important; flex: none; stroke-width: 2.1; }
.sort-action-icon { width: 1.25rem !important; height: 1.25rem !important; flex: none; stroke-width: 2.1; }
.stock-sort-icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 639px) { .stock-search-control { height: 2.5rem; min-height: 2.5rem; } .filter-action-icon { width: 1.25rem !important; height: 1.25rem !important; } }