.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-filter-wrapper{flex-wrap:wrap;flex:1;align-items:flex-start;gap:.75rem;display:flex}.color-filter-wrapper .filter-chip{color:#64748b;cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:12px;justify-content:center;align-items:center;min-width:70px;height:70px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:all .3s;display:flex}.color-filter-wrapper .filter-chip:hover{color:#1e293b;border-color:#1e293b}.color-filter-wrapper .filter-chip.active{color:#fff;background:#1e293b;border-color:#1e293b}.color-options{flex-wrap:wrap;gap:.75rem;display:flex}.color-chip-wrapper{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;width:70px;height:70px;padding:.5rem;transition:all .3s;display:flex}.color-chip-wrapper:hover{border-color:#1e293b;transform:scale(1.05)}.color-chip-wrapper.active{background:#1e293b;border-width:3px;border-color:#1e293b}.color-chip-wrapper.active .color-name{color:#fff;font-weight:700}.color-circle{border-radius:50%;flex-shrink:0;width:28px;height:28px;display:block;box-shadow:inset 0 0 0 1px #0000001a}.color-name{color:#64748b;text-align:center;font-size:.75rem;font-weight:600;line-height:1.1;transition:all .3s}.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-filter-wrapper .filter-chip{min-width:60px;height:60px;font-size:.85rem}.color-chip-wrapper{width:60px;height:60px}.color-circle{width:24px;height:24px}.color-name{font-size:.7rem}.color-options,.color-filter-wrapper{gap:.5rem}.mobile-filter-button{color:#fff;cursor:pointer;background:#1e293b;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:calc(100% - 2rem);margin:1rem;padding:1rem;font-size:1rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 12px #1e293b4d}.mobile-filter-button:active{transform:scale(.98)}.mobile-filter-overlay{z-index:999;background:#00000080;animation:.3s fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.filter-bar.mobile-modal-open{z-index:1000;background:#fff;padding:1rem;animation:.3s slideUp;position:fixed;inset:0;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-modal-close{display:none}.filter-bar.mobile-modal-open .mobile-modal-close{color:#fff;cursor:pointer;z-index:1001;background:#1e293b;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex;position:fixed;top:1rem;right:1rem;box-shadow:0 4px 12px #0000004d}.mobile-apply-button{display:none}.filter-bar.mobile-modal-open .mobile-apply-button{color:#fff;cursor:pointer;background:#1e293b;border:none;border-radius:12px;width:100%;margin-top:1rem;padding:1rem;font-size:1rem;font-weight:600;display:block}.filter-bar:not(.mobile-modal-open){display:none}}@media (min-width:769px){.mobile-filter-button,.mobile-filter-overlay,.mobile-modal-close{display:none}.mobile-apply-button{display:none!important}}