/* =========================================================
   PRODUCT CARDS COMPONENT
   Shared by:
   - Homepage
   - Shop archive
   - Product categories
   - Related products
   ========================================================= */

.woocommerce ul.products {
    margin: 0;
    padding: 0;

    list-style: none;

    display: grid;
    gap: 18px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;

    position: relative;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--th-border);
    border-radius: 16px;

    background: #fff;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

@media (hover: hover) {

    .woocommerce ul.products li.product:hover {
        transform: translateY(-3px);

        border-color: rgba(23,105,232,.28);

        box-shadow:
            0 14px 34px
            rgba(16,24,40,.07);
    }
}

.woocommerce
ul.products
li.product
.woocommerce-loop-product__link {
    display: flex;
    flex: 1;
    flex-direction: column;

    color: inherit;
}

.woocommerce
ul.products
li.product
a img {
    display: block;

    width: 100%;
    height: 220px;

    margin: 0;
    padding: 24px;

    object-fit: contain;

    background: #f7f9fc;

    border-bottom:
        1px solid
        var(--th-border);
}

.woocommerce
ul.products
li.product
.woocommerce-loop-product__title {
    min-height: 69px;

    margin: 0;
    padding: 17px 16px 6px;

    color: var(--th-text);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.65;

    text-align: right;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.woocommerce
ul.products
li.product
.price {
    margin: 0;
    padding: 0 16px 15px;

    color: var(--th-blue);

    font-size: 20px;
    font-weight: 900;

    text-align: right;
}

.woocommerce
ul.products
li.product
.price del {
    margin-inline-start: 5px;

    color: var(--th-muted-2);

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

    opacity: 1;
}

.woocommerce
ul.products
li.product
.price ins {
    text-decoration: none;
}

.woocommerce
ul.products
li.product
.button {
    min-height: 46px;

    margin: auto 16px 16px;
    padding: 0 15px;

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

    border: 0;
    border-radius: 10px;

    background: var(--th-blue);
    color: #fff;

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

    text-align: center;
}

.woocommerce
ul.products
li.product
.button:hover {
    background: var(--th-blue-hover);
    color: #fff;
}

.woocommerce ul.products .thanyh-product-badge {
    position: absolute;
    z-index: 3;

    top: 11px;
    right: 11px;

    padding: 5px 9px;

    border: 1px solid var(--th-border);
    border-radius: 999px;

    background: rgba(255,255,255,.95);

    color: var(--th-muted);

    font-size: 9px;
    font-weight: 800;
}

.woocommerce ul.products .onsale {
    position: absolute;
    z-index: 4;

    top: 11px;
    left: 11px;
    right: auto;

    min-width: auto;
    min-height: auto;

    margin: 0;
    padding: 5px 8px;

    border-radius: 999px;

    background: var(--th-blue);
    color: #fff;

    font-size: 9px;
    line-height: 1.4;
}


/* Tablet */

@media (max-width: 1024px) {

    .woocommerce ul.products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* Mobile */

@media (max-width: 767px) {

    .woocommerce ul.products {
        

        gap: 10px;
    }

    .woocommerce ul.products li.product {
        border-radius: 13px;
    }

    .woocommerce
    ul.products
    li.product
    a img {
        height: 145px;

        padding: 15px;
    }

    .woocommerce
    ul.products
    li.product
    .woocommerce-loop-product__title {
        min-height: 58px;

        padding: 11px 10px 4px;

        font-size: 14px;
        line-height: 1.55;
    }

    .woocommerce
    ul.products
    li.product
    .price {
        padding: 0 10px 10px;

        font-size: 15px;
    }

    .woocommerce
    ul.products
    li.product
    .button {
        min-height: 38px;

        margin: auto 10px 10px;
        padding: 0 8px;

        font-size: 12px;
    }

    .woocommerce
    ul.products
    .thanyh-product-badge {
        top: 8px;
        right: 8px;

        padding: 4px 6px;

        font-size: 8px;
    }

    .woocommerce
    ul.products
    .onsale {
        top: 8px;
        left: 8px;

        padding: 4px 6px;

        font-size: 8px;
    }
}