/* Start custom CSS for html, class: .elementor-element-1087a34 *//* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY */

body{

    background:#050705;
    font-family:'Poppins',sans-serif;
    color:white;

}

/* WRAPPER */

.shop-wrapper{

    width:100%;
    display:flex;
    gap:55px;

    padding:90px 5%;

    background:
    linear-gradient(
    to bottom,
    #050705,
    #08110b
    );

}

/* SIDEBAR */

.shop-sidebar{

    width:300px;
    flex-shrink:0;

}

.shop-title{

    font-size:72px;
    line-height:0.95;
    font-weight:300;

    margin-bottom:35px;

    color:#dce8d8;

}

.shop-description{

    color:#a7b0a6;

    line-height:1.9;
    font-size:15px;

    margin-bottom:55px;

}

/* FILTER */

.filter-group{

    margin-bottom:45px;

}

.filter-group h3{

    font-size:28px;
    margin-bottom:22px;

    color:#dce9d9;

    font-weight:500;

}

.filter-group label{

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:16px;

    color:#e1e1e1;

}

/* WEIGHT BUTTONS */

.weight-buttons{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:14px;

}

.weight-buttons button{

    height:52px;

    background:transparent;

    border:1px solid #2d3a30;

    border-radius:14px;

    color:white;

    font-size:15px;
    font-weight:500;

    cursor:pointer;

    transition:0.3s;

}

.weight-buttons button:hover{

    background:#dce9d8;
    color:black;

}

/* RANGE */

input[type="range"]{

    width:100%;
    accent-color:#dce9d8;

}

.price-values{

    display:flex;
    justify-content:space-between;

    margin-top:12px;

    color:#9ca59c;

    font-size:13px;

}

/* BUTTON */

.clear-filter-btn{

    width:100%;
    height:58px;

    border-radius:15px;

    border:1px solid #2d3a30;

    background:transparent;

    color:#dce9d8;

    font-size:14px;
    font-weight:600;

    letter-spacing:1px;

    cursor:pointer;

    transition:0.3s;

}

.clear-filter-btn:hover{

    background:#dce9d8;
    color:black;

}

/* PRODUCTS */

.shop-products{

    flex:1;

}

/* TOPBAR */

.shop-topbar{

    display:flex;
    justify-content:flex-end;

    margin-bottom:35px;

}

.sort-button{

    width:auto;

    padding:16px 26px;

    border-radius:14px;

    background:#131713;

    border:1px solid #283228;

    color:white;

    font-size:14px;
    font-weight:500;

    cursor:pointer;

}

/* GRID */

.product-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}

/* CARD */

.product-card{

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.05);

    border-radius:22px;

    overflow:hidden;

    transition:0.4s;

}

.product-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(220,233,216,0.18);

}

/* IMAGE */

.product-card img{

    width:100%;
    height:320px;

    object-fit:cover;

    display:block;

}

/* CONTENT */

.product-content{

    padding:22px;

}

/* TITLE */

.product-content h2{

    font-size:18px;
    line-height:1.5;

    font-weight:500;

    margin-bottom:10px;

    color:#eef3ec;

}

/* WEIGHT */

.weight{

    font-size:13px;

    color:#98a198;

    margin-bottom:26px;

}

/* BOTTOM */

.product-bottom{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

/* PRICE */

.price{

    font-size:20px;

    font-weight:500;

    color:#dce8d8;

}

/* ADD BUTTON */

.add-btn{

    width:78px;
    height:42px;

    border:none;

    border-radius:12px;

    background:#dce9d8;

    color:black;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:0.3s;

}

.add-btn:hover{

    transform:scale(1.05);

}

/* MOBILE */

@media(max-width:991px){

    .shop-wrapper{

        flex-direction:column;

        padding:60px 20px;

    }

    .shop-sidebar{

        width:100%;

    }

    .shop-title{

        font-size:46px;

    }

    .product-grid{

        grid-template-columns:1fr;

    }

    .product-card img{

        height:260px;

    }

    .product-content h2{

        font-size:20px;

    }

}/* End custom CSS */