.filter-panel{
  --line:#dee4e8; --muted:#59616b; --brand-ink:#a63d16; --tint:#fff0e6; --text:#22262b;
  position:relative;margin-right:14px;margin-bottom:14px;isolation:isolate;
  border-radius:26px var(--pour-corner,56px) 26px 26px;
}
.filter-panel .filter-face{
  position:relative;z-index:1;padding:34px 40px 30px;border-radius:inherit;
  background:linear-gradient(130deg,#fffffffa 10%,#f9fbfcef 52%,#f8fafbdb 85%,#f5f7fac9);
  box-shadow:0 12px 22px -18px #67432885,inset 0 1px 0 #fff,inset -1px -2px 2px #fff9;
  backdrop-filter:blur(18px);
}
.filter-panel .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.filter-panel fieldset{border:0;margin:0;padding:0}

.filter-heading{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:22px}
.filter-heading h2{font-size:36px;font-weight:550;letter-spacing:-.025em;margin:0;display:flex;align-items:baseline;gap:12px}
.filter-heading h2 span{font-size:14px;font-weight:400;color:#667078;letter-spacing:0}
.filter-heading .search{display:flex;align-items:center;gap:10px;min-height:56px;border:0;border-radius:12px;padding:0 14px;background:#e9eef07a;box-shadow:inset 0 2px 5px #53657212,inset 0 -1px 0 #fff;width:40%;flex-shrink:0}
.filter-heading .search:focus-within{outline:none;background:#fff;box-shadow:0 0 0 1px rgba(34,38,43,.14)}
.filter-heading .search input{-webkit-appearance:none;appearance:none}
.filter-heading .search input:focus,.filter-heading .search input:focus-visible{outline:none;box-shadow:none}
.filter-heading .search>svg{color:#64717d;width:18px;flex:none}
.filter-heading .search input{width:100%;min-width:0;border:0;background:transparent;padding:10px 0;font-size:15px;outline:none;font:inherit}
.filter-heading .search button{border:0;background:none;width:28px;height:32px;padding:4px;cursor:pointer;color:#64717d}

.mouse-quick-filters{display:flex;gap:16px;align-items:end;flex-wrap:wrap;border-top:0;padding-top:0}
.mouse-quick-filters>label{display:grid;gap:6px;flex:1;min-width:130px;font-size:12px;color:var(--muted)}
.mouse-quick-filters select{width:100%;font-size:14px;background:#ffffffa8;min-height:44px;padding:8px 30px 8px 12px;border:0;border-radius:10px;font:inherit;color:var(--text)}
.mouse-quick-filters .desktop-more{margin:0 0 0 8px}

.quick-filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:0;padding-top:0}
.quick-filters>span{font-size:14px;color:var(--muted);flex:none;font-weight:500}
.quick-filters>.choices{flex:1;gap:8px}

.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{border:1px solid #c2cbd2;background:transparent;min-height:40px;padding:7px 13px;font-size:14px;display:inline-flex;align-items:center;gap:8px;border-radius:10px;color:#22262b;cursor:pointer;font:inherit;transition:background 160ms,box-shadow 160ms,transform 120ms}
.choice:hover{background:#fff;box-shadow:0 4px 9px -5px #4d5b6950}
.choice:active{transform:translateY(1px)}
.choice[aria-pressed=true]{background:#fff0e6;border-color:#bd7b5a;color:#a63d16}
.choice svg{width:15px;height:15px}

.desktop-more{margin-left:auto;min-height:44px;padding:8px 14px;border-radius:10px;background:#ffffffa0;box-shadow:0 3px 9px -7px #5b403550;color:#524333;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px}
.desktop-more:hover{background:#fff}
.desktop-more svg{width:15px;height:15px}
.mobile-filter{display:none}

.hot-brand-strip{margin-top:20px}
.hot-brand-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:14px}
.hot-brand-heading small{font-size:12px;color:var(--muted);margin-left:6px}
.hot-brand-heading .text-btn{font-size:14px;min-height:44px}
.hot-brand-strip .choices{gap:8px;min-height:44px}
.hot-brand-strip .choice{min-height:44px;white-space:normal;overflow-wrap:anywhere}
.hot-brand-strip .muted{font-size:14px;align-self:center;color:var(--muted)}

.text-btn{display:inline-flex;gap:8px;align-items:center;border:0;background:transparent;min-height:44px;padding:6px 2px;font-size:14px;white-space:nowrap;cursor:pointer;color:#354257;font:inherit}
.text-btn:hover{text-decoration:underline}
.text-btn svg{width:15px;height:15px}

.expanded-filters{border-top:1px solid #c8cfd480;margin-top:24px;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.expanded-filters .filter-group:first-child{grid-column:1/-1}
.filter-group{margin-top:14px}
.filter-group legend{font-size:15px;font-weight:550;margin-bottom:12px;color:var(--text)}
.filter-group .brand-search{width:240px;max-width:320px;font-size:14px;min-height:42px;margin-bottom:14px;border:1px solid #97a4af;border-radius:10px;padding:0 12px;background:#fff;font:inherit}
.expanded-filters .brand-options{max-height:none;overflow:visible;display:flex;flex-wrap:wrap;gap:8px}
.brand-scroll-region{grid-column:1/-1;padding:4px 0}
.other-brands-group{grid-column:1/-1;border-top:1px solid #c8cfd480;padding-top:16px;margin-top:14px}
.other-brands-group>summary{cursor:pointer;font-size:15px;font-weight:600;min-height:44px;align-content:center;list-style:none}
.other-brands-group>summary::-webkit-details-marker{display:none}
.other-brands-group>summary span{font-weight:400;color:var(--muted);margin-left:8px}
.other-brands-group>p{font-size:13px;color:var(--muted);margin:4px 0 12px;line-height:1.6}

.deferred-filter-group{grid-column:1/-1;border-top:1px solid #c8cfd480;padding-top:2px}
.deferred-filter-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 0;font-size:15px;font-weight:550;cursor:pointer;list-style:none}
.deferred-filter-group>summary::-webkit-details-marker{display:none}
.deferred-filter-group>summary:after{content:"＋";order:3;color:var(--muted);font-size:18px;font-weight:400;line-height:1}
.deferred-filter-group[open]>summary:after{content:"−"}
.deferred-filter-group>summary span{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400}
.switch-filter-sections{display:grid;grid-template-columns:1fr;gap:20px;padding:14px 0 8px}
.switch-filter-section{min-width:0;padding:0}
.switch-filter-section legend{margin-bottom:10px;font-size:14px;color:var(--text)}
.switch-filter-section .choices{display:flex;flex-wrap:wrap;gap:8px}
.switch-filter-section p.muted{color:var(--muted);font-size:13px}

.selected-filters{border-top:1px solid #c8cfd480;margin-top:20px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.selected-chip{display:flex;align-items:center;gap:6px;background:#fff9;color:var(--brand-ink);border:1px solid #e1bea8;border-radius:8px;padding:5px 10px;font-size:13px;min-height:38px;max-width:100%;overflow-wrap:anywhere;cursor:pointer;font:inherit}
.selected-chip svg{width:14px;height:14px}

.filter-drawer .filter-group{margin-bottom:28px}
.filter-drawer .choice{font-size:15px;min-height:44px}
.filter-drawer .brand-options{max-height:230px;overflow:auto}
.drawer-actions{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:18px 0 0;margin-top:10px;background:#fffffff5;border-top:1px solid var(--line)}
.drawer-actions .btn{font-size:14px;gap:8px;padding-inline:14px;min-height:44px;border-radius:10px;border:1px solid #cdd5df;background:#fff;display:inline-flex;align-items:center;cursor:pointer;font:inherit}
.drawer-actions .btn.primary{background:#1b1d20;color:#fff;border-color:#1b1d20}

@media(max-width:760px){
  .filter-panel{margin-right:0}
  .filter-panel .filter-face{padding:26px 20px 24px}
  .filter-heading{gap:0;margin-bottom:22px;display:block}
  .filter-heading h2{font-size:28px;gap:12px}
  .filter-heading .search{width:100%;margin-top:22px;min-height:52px}
  .mouse-quick-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
  .mouse-quick-filters>label{min-width:0;flex:none}
  .quick-filters{gap:10px}
  .desktop-more{display:none}
  .mobile-filter{display:inline-flex;min-height:44px;font-size:14px;padding:8px 14px;gap:8px;border:0;background:#fff9;border-radius:10px;align-items:center;cursor:pointer;font:inherit;margin-left:8px}
  .mouse-quick-filters .mobile-filter{align-self:end;margin-left:0;justify-content:center;white-space:nowrap}
  .expanded-filters{display:none}
}

.modal.filter-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(430px,100%);height:100svh;max-height:100svh;border:0;border-radius:20px 0 0 20px;padding:24px 22px;background:#fff;box-shadow:-20px 0 50px #00000030}
.modal.filter-drawer::backdrop{background:#00000040}
.modal .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal .modal-head h2{font-size:20px;margin:0}
.modal .icon-btn{width:36px;height:36px;border:0;background:#f0f1f3;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.modal .icon-btn svg{width:16px;height:16px}

.filter-group .choice:disabled{opacity:.4;cursor:default}
.mouse-quick-filters>.range-field,.mouse-quick-filters>.multi-field{position:relative;display:grid;gap:6px;flex:1;min-width:130px;font-size:13px;color:var(--muted)}
.range-box{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:10px;background:#ffffffa8;color:var(--text);font-size:14px}
.filter-group .range-box{background:#fff;border:1px solid #dee4e8;max-width:260px;margin-bottom:10px}
.range-box input{flex:1;min-width:0;width:100%;height:32px;border:0;padding:0;background:transparent;text-align:center;font:inherit;color:inherit}
.range-box input::placeholder{color:#9aa2ab}
.range-box:focus-within{outline:2px solid #66758d;outline-offset:1px}
.range-unit{color:var(--muted);font-size:13px}
.range-pop,.multi-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%;padding:12px;border:1px solid #e3e7ec;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(34,38,43,.12);color:var(--text)}
.range-pop{display:none;width:300px}
.range-field:focus-within .range-pop{display:block}
.range-pop .choices{display:flex;flex-wrap:wrap;gap:6px}
.range-note{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.multi-field details{position:relative}
.multi-field summary{display:flex;align-items:center;min-height:44px;padding:0 30px 0 12px;border-radius:10px;background:#ffffffa8;color:var(--text);font-size:14px;cursor:pointer;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.multi-field summary::-webkit-details-marker{display:none}
.multi-field summary::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.multi-pop{display:grid;gap:2px;min-width:200px}
.multi-option{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 8px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:14px;color:var(--text);text-align:left;cursor:pointer}
.multi-option:hover:not(:disabled){background:#f1f3f6}
.multi-option:disabled{color:#a9b0b8;cursor:default}
.multi-option.is-sub{padding-left:32px;font-size:13px}
.multi-box{display:grid;place-items:center;flex:none;width:16px;height:16px;border:1.5px solid #9aa2ab;border-radius:4px}
.multi-option[aria-pressed="true"] .multi-box{background:#22262b;border-color:#22262b;color:#fff}
.multi-box svg{width:12px;height:12px}
.multi-pop .text-btn{justify-self:start;margin-top:4px}
.multi-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px}
.range-box input:focus,.range-box input:focus-visible{outline:none;box-shadow:none}

.choice.hot-choice{min-height:40px;padding:0 14px 0 4px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #cbd3dd;gap:8px;transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1),transform .12s cubic-bezier(.16,1,.3,1)}
.choice.hot-choice:hover{background:#f1f3f6;box-shadow:inset 0 0 0 1px #cbd3dd}
.choice.hot-choice:active{transform:scale(.96)}
.choice.hot-choice[aria-pressed=true]{background:#22262b;color:#fff;box-shadow:none}
.hot-thumb{display:block;flex:none;width:32px;height:32px;border-radius:50%;background:#f1f3f6;padding:3px;box-sizing:border-box;overflow:hidden}
.hot-thumb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.choice.hot-choice[aria-pressed=true] .hot-thumb{background:#fff}