.filter {
   padding: 0 20px;
    position: relative;
    width: 1240px;
    height: 100px;
    max-width: calc(100% - 20px);
}
.filter .filter-wrapper{
max-width:1200px;
margin:-36px auto 0 auto;
border:2px solid #005652;
border-radius:10px;
background:white;
padding:20px;
font-family: "Gilory", Gilroy;
position: absolute;
left: 20px;
z-index: 2;

}

/* header */

.filter .filter-header{
display:flex;
justify-content:space-between;
align-items:center;
gap: 20px;
}

.filter .filter-header .title{
display:flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:600;
color:#070E1B;
}

.filter .filter-header .title-icon{
width:52px;
}

.filter .filter-header .header-right{
display:flex;
align-items:center;
gap:20px;
}

.filter .filter-header .toggle-btn{
border:none;
background:transparent;
cursor:pointer;
}

.filter .filter-header .arrow{
width:18px;
transition:transform .3s;
}

.filter .filter-header .arrow.rotate{
transform:rotate(180deg);
}

/* active filters */

.filter .filter-header .active-filters{
display:flex;
flex-wrap:wrap;
}

.filter  .filter-header .tag {
    font-size: 14px;
    font-weight: 400;
    padding: 0 16px;
    border-right: 1px solid #E9E9E9;
}
.filter  .filter-header .tag span{
    cursor: pointer;
}
.filter .filter-header .clear{
    color: #005652;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px dashed #005652;
    margin-left: 16px;
    order: 1;
    display: none;
}
.filter .filter-header .active-filters:has(.tag) .clear {
    display: block;
}
/* hidden panel */

.filter .filter-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s ease;
}

.filter .filter-panel.open{
    max-height:800px;
}

/* grid */

.filter .filter-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-top:16px;
}

/* filter box */

.filter .filter-grid .filter-box{
background:#F4F4F4;
padding:20px 16px;
border-radius:6px;
}

.filter .filter-grid .filter-box h4{
color:#070E1B;
margin-top: 0;
margin-bottom:16px;
font-size: 16px;
font-weight: 700;
}

/* price */
.filter .filter-box .price-inputs {
    text-align: center;
}
.filter .filter-box .price-inputs input {
    background-color: #FFFFFF;
    border: 0;
    padding: 0 16px;
    height: 48px;
    text-align: center;
}
.filter .filter-box .range-slider{
    position:relative;
    width:100%;
    height:30px;
}

.filter .filter-box .range-slider input{
    position:absolute;
    width:100%;
    pointer-events:none;
    appearance:none;
    background:none;
    top:7px;
    z-index: 9;
    margin: 0;
}

/* thumb */

.filter .filter-box .range-slider input::-webkit-slider-thumb{
    pointer-events:auto;
    appearance:none;
    height:12px;
    width:12px;
    border-radius:50%;
    background:#005652;
    cursor:pointer;
    border:none;
    z-index: 9;
}

.filter .filter-box .range-slider input::-moz-range-thumb{
height:12px;
width:12px;
border-radius:50%;
background:#005652;
cursor:pointer;
border:none;
z-index: 9;
}

/* track */

.filter .filter-box .slider-track{
position:absolute;
height:3px;
width:100%;
background:#CFCFCF;
top:12px;
border-radius:10px;
z-index: 1;
}
/* price */
/* chips */

.filter .filter-box .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.filter .filter-box .chips button{
    background:#FFFFFF;
    color:#070E1B;
    border:none;
    padding:4px 12px;
    cursor:pointer;
    font-size:13px;
    transition:.2s;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    font-family: "Gilory", Gilroy;
}

.filter .filter-box .chips button:hover{
    background:#005652;
    color:#FFFFFF;
}
/* active chip */

.filter .filter-box .chips button.active{
background:#005652;
color:#FFFFFF;
position:relative;
padding-right:26px;
}

.filter .filter-box  .chips button.active::after{
content:"×";
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
font-size:14px;
}
/* footer */

.filter .filter-footer{
    margin-top:25px;
}

.filter .filter-footer .apply-btn{
    background:#005652;
    color:white;
    border:none;
    padding:4px 4px 4px 32px;
    border-radius:6px;
    cursor:pointer;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.filter .filter-footer .apply-btn span {
    width: 56px;
    height: 56px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 24px;
    background: #fff;
    color: #005652;
    border-radius: 4px;
}

@media(max-width:1100px){
    .filter .filter-grid{
            grid-template-columns: repeat(2, 1fr);
    }
    .filter .filter-panel.open{
    max-height:max-content;
}
}
@media(max-width:992px){
    .filter .filter-header{
        flex-wrap: wrap;
        gap: 0;
    }
    .filter .filter-header .active-filters{
        order: 1;
        width: 100%;
    }
    .filter .filter-wrapper{
        padding: 10px;
    }
}
@media(max-width:575px){
    .filter .filter-grid{
            grid-template-columns: repeat(1, 1fr);
    }
}




/* product */
.product-section { /*max-width: 1240px;*/ margin: auto; font-family: Arial; /*padding: 40px 20px;*/ }

/* grid */

.product-section .product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

/* card */

.product-section .product-card{background:#fff;border: 1px solid #E9E9E9;border-radius:8px;padding: 8px;text-align:center;transition:.3s;}

.product-section .product-card:hover{
    background: #F4F4F4;
}

/* image */

.product-section .product-card .product-image{position:relative;background-color: #fff;border-radius: 4px;}

.product-section .product-card .product-image .product-img{width:100%;height: 220px;object-fit: contain;object-position: center center;}

/* hover arrow */

.product-section .product-card .hover-arrow{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
width:56px;
height:56px;
background:#005652;
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:20px;
transition:.3s;
}

.product-section .product-card:hover .hover-arrow{
transform:translate(-50%,-50%) scale(1);
}
.product-section .product-card .hover-arrow .product-link-icon{
    width: 24px;
}
/* text */

.product-section .product-card .product-info {
    padding: 20px;
}
.product-section .product-card .product-info .brand{font-size:12px;color: #6B6B6B;margin: 0;}

.product-section .product-card .product-info h3{font-size: 20px;margin-top: 4px;color:#070E1B;margin-bottom: 0;}

/* load more */

.product-section .load-more-wrapper{text-align:center;margin-top: 44px;}

.product-section .load-more-wrapper .load-more{display:inline-flex;align-items:center;gap: 24px;background:white;border:2px solid #005652;color:#005652;padding: 4px 4px 4px 32px;border-radius: 3px;cursor:pointer;font-weight: 700;}

.product-section .load-more-wrapper .arrow-box{
background:#005652;
color:white;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
}

.product-not-found { grid-column: 1 / -1; text-align: center; }

@media(MAX-WIDTH:1200PX){
    .product-section .product-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(MAX-WIDTH:1024PX){
    .product-section .product-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(MAX-WIDTH:767PX){
    .product-section .product-grid{
        grid-template-columns: repeat(1, 1fr);
    }
}
/* product */