.filter-bar{background:#fff;border-bottom:1px solid #e2e8f0;padding:1.5rem 0}.filter-container{max-width:1400px;margin:0 auto;padding:0 2rem}.sort-section{border-top:1px solid #e2e8f0;justify-content:flex-end;margin-top:1.5rem;padding-top:1.5rem;display:flex}.sort-wrapper{align-items:center;gap:.5rem;display:flex;position:relative}.sort-icon{color:#64748b;font-size:1rem}.sort-select{color:#1e293b;cursor:pointer;appearance:none;background:#fff;border:2px solid #e2e8f0;border-radius:8px;outline:none;min-width:180px;padding:.5rem 2.5rem .5rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s}.sort-select:hover{border-color:#1e293b}.sort-select:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b1a}.sort-select-icon{color:#64748b;pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.filter-section{flex-direction:column;gap:1.5rem;display:flex}.filter-group{align-items:center;gap:1rem;display:flex}.filter-label{color:#1e293b;flex-shrink:0;min-width:80px;font-size:.95rem;font-weight:600}.filter-options-scroll{flex-wrap:wrap;flex:1;gap:.5rem;display:flex}.filter-chip{color:#64748b;cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #e2e8f0;border-radius:20px;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s}.filter-chip:hover{color:#1e293b;border-color:#1e293b}.filter-chip.active{color:#fff;background:#1e293b;border-color:#1e293b}.filter-select-wrapper{flex:1;max-width:250px;position:relative}.filter-select{color:#1e293b;cursor:pointer;appearance:none;background:#fff;border:2px solid #e2e8f0;border-radius:8px;outline:none;width:100%;padding:.65rem 2.5rem .65rem 1rem;font-size:.9rem;transition:all .3s}.filter-select:hover{border-color:#1e293b}.filter-select:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b1a}.select-icon{color:#64748b;pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.color-options{flex-wrap:wrap;flex:1;gap:.75rem;display:flex}.color-chip{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:all .3s;display:flex}.color-chip:hover{border-color:#1e293b;transform:scale(1.05)}.color-chip.active{border-width:3px;border-color:#1e293b;box-shadow:0 0 0 2px #1e293b1a}.color-circle{border-radius:50%;width:28px;height:28px;display:block}.color-all{color:#64748b;font-size:.75rem;font-weight:600}.reset-button{color:#fff;cursor:pointer;background:#3b82f6;border:2px solid #3b82f6;border-radius:8px;align-self:center;margin:0 auto;padding:.65rem 1.5rem;font-weight:600;transition:all .3s}.reset-button:hover{color:#fff;background:#2563eb;border-color:#2563eb;transform:scale(1.05)}@media (max-width:1024px){.sort-section{justify-content:flex-start}.sort-select{min-width:150px}.filter-group{flex-direction:column;align-items:flex-start}.filter-label{min-width:auto}.filter-options-scroll,.color-options{width:100%}.filter-select-wrapper{max-width:100%}.reset-button{width:100%;margin-left:0}}@media (max-width:768px){.filter-bar{padding:1rem 0}.filter-container{padding:0 1rem}.sort-section{margin-top:1rem;padding-top:1rem}.sort-wrapper{width:100%}.sort-select{width:100%;min-width:auto}.filter-section{gap:1rem}.filter-chip{padding:.4rem .8rem;font-size:.85rem}.color-chip{width:40px;height:40px}.color-circle{width:24px;height:24px}}