.product-grid{
    margin-top: 54px;
    margin-left: -8px;
    margin-right: -8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.product{
    display: grid;
    grid-template-rows: 220px 38px 33px 36px 36px 36px 36px;
    padding: 20px 28px;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(99, 99, 99, 0.3);
    border-left-width: 0px;
    border-top-width: 0px;
}
.image{
    width: 100%;
    height: 200px;
    object-fit: contain;
}
.product-name{
    font-family: Arial;
}
.product-rating{
    display: grid;
    grid-template-columns: 110px 10px;
    padding-top: 8px;
}
.rating-pic{
    height: 20px;
}
.rating-count{
    font-family: Roboto, Arial;
    padding-top: 3px;
    color: rgb(1,124,182);
    cursor: pointer;
    width: 5px;
}
.product-price{
    font-family: Roboto, Arial;
    font-weight: 700;
    padding-top: 8px;
}
.product-item{
    margin-top: 8px;
    padding: 4px 5px;
    border-radius: 7px;
    cursor: pointer;
    background-color: rgb(239, 239, 239);
    border-width: 0.3px;
    border-style: solid;
    border-color: rgb(197, 197, 197);
    box-shadow: 0px 2px 3px rgba(0,0,0,0.12);
}
.product-add{
    display: grid;
    grid-template-columns: 20px 50px;
    padding-top: 10px;
    opacity: 0;
}
.checkmark-image{
    width: 20px;
    margin-right: 5px;
}
.add-checkmark{
    font-family: Roboto, Arial;
    color: rgb(6, 125, 98);
}
.add-to-cart-button{
    width: 100%;
    height: 32px;
    border-radius: 16px;
    border-width: 0px;
    border-style: solid;
    background-color: rgb(255, 216, 20);
    cursor: pointer;
    transition: background-color 0.12s;
}
.add-to-cart-button:hover{
    background-color:rgb(230, 195, 22);
}
.product-added{
    opacity: 1;
}