.category-toolbar{border-bottom:1px solid #e5e5e5;justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 0;display:flex}.toolbar-left{align-items:center;display:flex}.item-count{color:#666;font-size:14px}.toolbar-right{align-items:center;gap:16px;display:flex}.view-toggle{border:1px solid #e5e5e5;border-radius:4px;align-items:center;gap:4px;padding:2px;display:flex}.view-btn{cursor:pointer;color:#999;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.view-btn:hover{color:#666}.view-btn.active{color:#111;background-color:#f5f5f5}.filter-btn{color:#333;cursor:pointer;background:0 0;border:1px solid #e5e5e5;border-radius:4px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;transition:all .2s;display:flex}.filter-btn:hover{color:#111;border-color:#111}@media (max-width:640px){.category-toolbar{flex-wrap:wrap;gap:12px}.toolbar-right{flex-wrap:wrap;gap:8px}.view-toggle{display:none}}
.sort-dropdown{position:relative}.sort-trigger{cursor:pointer;color:#333;background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;font-size:14px;transition:color .2s;display:flex}.sort-trigger:hover{color:#111}.sort-label{color:#666}.sort-value{color:#111;font-weight:500}.sort-chevron{transition:transform .2s}.sort-chevron.open{transform:rotate(180deg)}.sort-menu{z-index:100;background-color:#fff;border:1px solid #e5e5e5;border-radius:4px;min-width:200px;margin:4px 0 0;padding:4px 0;list-style:none;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #0000001a}.sort-option{color:#333;cursor:pointer;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;transition:background-color .2s;display:flex}.sort-option:hover{background-color:#f5f5f5}.sort-option.selected{color:#111;font-weight:500}.sort-option svg{color:#111}
.filter-overlay{z-index:998;opacity:0;visibility:hidden;background-color:#00000080;transition:opacity .3s,visibility .3s;position:fixed;inset:0}.filter-overlay.open{opacity:1;visibility:visible}.filter-sidebar{z-index:999;background-color:#fff;flex-direction:column;width:320px;max-width:90vw;height:100vh;transition:transform .3s;display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-4px 0 20px #0000001a}.filter-sidebar.open{transform:translate(0)}.filter-header{border-bottom:1px solid #e5e5e5;justify-content:space-between;align-items:center;padding:20px;display:flex}.filter-header h2{color:#111;margin:0;font-size:18px;font-weight:600}.filter-close{cursor:pointer;color:#666;background:0 0;border:none;padding:4px;transition:color .2s}.filter-close:hover{color:#111}.filter-content{flex:1;padding:20px;overflow-y:auto}.filter-section{margin-bottom:24px}.filter-section h3{color:#111;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;font-size:14px;font-weight:600}.price-inputs{align-items:flex-end;gap:12px;display:flex}.price-input-group{flex:1}.price-input-group label{color:#666;margin-bottom:4px;font-size:12px;display:block}.price-input-group input{border:1px solid #ddd;border-radius:4px;width:100%;padding:10px 12px;font-size:14px;transition:border-color .2s}.price-input-group input:focus{border-color:#111;outline:none}.price-separator{color:#666;margin-bottom:10px}.brand-list{flex-direction:column;gap:10px;display:flex}.brand-checkbox{cursor:pointer;color:#333;align-items:center;gap:10px;font-size:14px;display:flex}.brand-checkbox input{display:none}.brand-checkbox .checkmark{border:1px solid #ddd;border-radius:3px;justify-content:center;align-items:center;width:18px;height:18px;transition:all .2s;display:flex}.brand-checkbox input:checked+.checkmark{background-color:#111;border-color:#111}.brand-checkbox input:checked+.checkmark:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:9px;margin-bottom:2px;display:block;transform:rotate(45deg)}.brand-checkbox:hover .checkmark{border-color:#111}.brand-name{flex:1}.filter-footer{background-color:#fafafa;border-top:1px solid #e5e5e5;gap:12px;padding:20px;display:flex}.filter-clear{color:#333;cursor:pointer;background-color:#fff;border:1px solid #ddd;border-radius:4px;flex:1;padding:12px 20px;font-size:14px;font-weight:500;transition:all .2s}.filter-clear:hover{border-color:#111}.filter-apply{color:#fff;cursor:pointer;background-color:#111;border:none;border-radius:4px;flex:1;padding:12px 20px;font-size:14px;font-weight:500;transition:background-color .2s}.filter-apply:hover{background-color:#333}@media (max-width:480px){.filter-sidebar{width:100%;max-width:100%}}