.product {
    background-image: url('../assets/bg_pattern.png');
    background-repeat: repeat;
    background-size: 50%;
}

.product .container {
    padding: 72px 6%;
}

.category__links {
    text-align: center;
    margin: 18px auto 52px auto;
}

.category__links a {
    font-size: 14px;
    color: #454545 !important;
    padding-bottom: 2px;
    margin: 0px 4px;
    cursor: pointer;
    transition: all 0.1s ease 0s;
}

.category__links a:hover,
.category__links .activated {
    color: #ffac58 !important;
    border-bottom: 1.5px solid #ffac58;
}

/* Class: card__wrapper */
.card__wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card__wrapper .product__card {
    max-width: 48%;
    /* max-width: 170px !important; */
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 8px;
    margin-bottom: 28px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.045), 0 6px 24px 0 rgba(41, 41, 41, 0.025);
    transition: all 0.3s ease 0s;
}

.thumbnail a img {
    transition: all 0.3s ease 0s;
}

.thumbnail a img:hover {
    /* transform: scale(1.075); */
    transform: scale(1.05);
    border-radius: 7px;
    border: 1.75px solid #ffac58;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.045), 0 6px 24px 0 rgba(41, 41, 41, 0.025);
}

.product__card .product__detail {
    padding: 2px 10px 12px 10px!important;
}

.product__detail h3 {
    font-size: 14px !important;
    color: #333333 !important;
    /* padding-bottom: 2px; */
}

.product__detail a h3:hover {
    text-decoration: underline;
    /* border-bottom: 1px solid #ffac58; */
}

.price h3 span {
    font-size: 16px !important;
}

.price {
    margin-top: 12px;
}

.discount {
    font-size: 14px !important;
}

/* Product Card on Tablet */
@media only screen and (min-width: 680px) {
    .card__wrapper .product__card {
        max-width: 31.5%;
    }

    .product__card .product__detail {
        padding: 8px 16px 16px 16px !important;
    }
}

/* Rendered on Desktop Web */
@media only screen and (min-width: 800px) {
    .product {
        padding: 0 10%;
        background-size: 18%;
    }
  
    .product .container {
        max-width: 1080px;
        margin: 0 auto;
        padding: 100px 0px 0px 0px !important;
    }

    .category__links {
        margin: 18px auto 75px auto;
    }

    .category__links a {
        font-size: 16px;
        padding: 0px 3px;
        margin: 0px 12px;
    }
}

/* Product Card on Desktop Web */
@media only screen and (min-width: 965px) {
    .card__wrapper .product__card {
        max-width: 23.5%;
    }

    .product__card .product__detail {
        padding: 8px 16px 16px 16px !important;
    }

    .price {
        margin-top: 16px;
    }

    .product__detail h3 {
        font-size: 16px !important;
    }
    
    .product__detail h3 span {
        font-size: 18px !important;
    }
    
    .discount {
        font-size: 16px !important;
    }

    .product__card .category__detail {
        padding: 4px 12px 10px 12px !important;
    }
}