@import url('navBar.css');
/* category section style */
.category-section{
    padding: 20px 0 50px;
    display: none;

}
.category-section .container{
    width: 97%;
    display: flex;
    justify-content: space-between;
}
.filter-section, .filtered-product{
    padding: 15px;
    background-color: rgb(212, 212, 212);
    border: 1px solid rgb(187, 186, 186);
    border-radius: 3px;
}
.filter-section{
    width: 20%;
    display: flex;
    flex-direction: column;
}
.filtered-product{
    width: 79%;
}
/* start filter section style */
.clear-filter{
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    border: solid 1px black;
    border-radius: 5px;
    color: black;
    font-size: 15px;
    font-weight: 700;
    background-color: #ffd814;
    cursor: pointer;
}
.filter-section span{
    margin-top: 30px;
    font-size: 20px;
    font-weight: 700;
}
.filter-section label{
    width: fit-content;
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 10px;
    border: solid 1px rgb(184, 184, 184);
    background-color: white;
    font-size: 13px;
    color: rgb(102, 102, 102);
}
.filter-section label:first-of-type{
    margin-top: 20px;
}
/* end filter section style */
/* start products style */
.products{
    margin: 40px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 50vh;
}
.category-para{
    margin-top: 20px;
    font-weight: bold;
    font-size: 25px;
    color: rgb(95, 95, 95);
}
.product{
    width: calc((100% - 30px) / 4);
    background-color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product .product-img{
    width: 90%;
    height: 200px;
}
.product .product-img:hover{
    transition: .5s;
    transform: scale(1.03);
    cursor: pointer;
}
.title{
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.2;
    color: rgb(109, 109, 109);
}
.rating-details{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}
.rating-details img:not(:first-child){
    margin-left: 3px;
}
.reviews{
    color: gray;
    font-size: 13px;
}
.price{
    margin-top: 10px;
    font-weight: 800;
}
.discount{
    font-size: 10px;
    color: gray;
}
.shipping{
    font-size: 11px;
}
.rating img{
    width: 15px;
}
.add-to-cart{
    width: 100%;
    margin-top: 30px;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    color: black;
    font-size: 15px;
    background-color: #ffd814;
    cursor: pointer;
}
/* end products style */