.hs-sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.hs-sidebar-overlay.active {
opacity: 1;
visibility: visible;
} .hs-sidebar-filter {
position: fixed;
top: 0;
right: 0;
width: 400px;
max-width: 100vw;
height: 100vh;
background: #fff;
z-index: 9999;
transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
display: flex;
flex-direction: column;
padding: 40px;
box-sizing: border-box;
overflow-y: auto;
}
.hs-sidebar-filter.active {
transform: translateX(0); } .hs-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.hs-sidebar-title {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.hs-sidebar-close {
background: transparent;
border: none;
font-size: 40px;
cursor: pointer;
line-height: 1;
} .hs-filter-group {
margin-bottom: 40px;
}
.hs-filter-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
margin-bottom: 20px;
}
.hs-filter-list {
list-style: none;
padding: 0;
margin: 0;
}
.hs-filter-list li {
margin-bottom: 15px;
}
.hs-radio-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: 'General Sans', sans-serif;
font-size: 16px;
} .hs-price-slider-wrap {
position: relative;
width: 100%;
height: 20px;
margin-bottom: 20px;
}
.hs-slider-track {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 4px;
background: #eaeaea;
border-radius: 2px;
z-index: 1;
} .hs-price-slider-wrap input[type="range"] {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
appearance: none;
background: transparent;
pointer-events: none; z-index: 2;
margin: 0;
}
.hs-price-slider-wrap input[type="range"]::-webkit-slider-thumb {
pointer-events: auto; appearance: none;
width: 20px;
height: 20px;
background: #000;
cursor: pointer;
transform: rotate(45deg); }
.hs-price-values {
text-align: right;
font-family: 'General Sans', sans-serif;
color: #666;
margin-bottom: 20px;
}
.hs-apply-btn {
width: 100%;
padding: 10px;
background: #000;
color: #fff;
border: none;
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
cursor: pointer;
}