/* =========================================================
   ZIAJA PRODUCT CAROUSEL

   Green: #1A5B1E
   Title: #182730
   Background: #FCF7F1
========================================================= */

.ziaja-product-carousel {
    --ziaja-green: #1A5B1E;
    --ziaja-title: #182730;
    --ziaja-bg: #FCF7F1;
    --ziaja-border: rgba(26, 91, 30, 0.20);

    position: relative;
    width: 100%;
}


/* =========================================================
   VIEWPORT
   Có padding trên/dưới để tránh card bị crop border/shadow
========================================================= */

.ziaja-carousel-viewport {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding-top: 10px;
    padding-bottom: 16px;

    margin-top: -10px;
    margin-bottom: -16px;
}


/* =========================================================
   TRACK
========================================================= */

.ziaja-carousel-track {
    display: flex;
    align-items: stretch;

    width: 100%;

    gap: 14px;

    will-change: transform;

    transform: translate3d(0, 0, 0);

    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.ziaja-product-card {
    position: relative;

    flex:
        0 0
        calc((100% - 42px) / 4);

    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--ziaja-bg);

    border:
        1px solid
        rgba(26, 91, 30, .20);

    border-radius: 8px;

    overflow: hidden;

    box-sizing: border-box;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform .4s cubic-bezier(.2,.7,.3,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/*
 * Hover chỉ nhấc nhẹ 4px.
 * Viewport có padding-top 10px nên border trên
 * không còn bị cắt.
 */
.ziaja-product-card:hover {
    transform:
        translate3d(0, -4px, 0);

    border-color:
        rgba(26, 91, 30, .60);

    box-shadow:
        0 12px 30px
        rgba(24, 39, 48, .09);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.ziaja-product-image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.ziaja-product-image {
    position: relative;

    display: flex;

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

    width: 100%;
    aspect-ratio:1/1;


    box-sizing: border-box;

    overflow: hidden;

    text-decoration: none;
}


.ziaja-product-image img,
.ziaja-product-image .ziaja-main-product-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;

    object-position: center;

    transform:
        scale(1);

    transition:
        transform .6s
        cubic-bezier(.2,.7,.2,1);
}


.ziaja-product-card:hover
.ziaja-product-image img {

    transform:
        scale(1.045);
}


/* =========================================================
   GLASS / SHINE HOVER
========================================================= */

.ziaja-product-image-wrap::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -100%;

    width: 38%;
    height: 220%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.52),
            transparent
        );

    transform:
        rotate(17deg);

    pointer-events: none;

    z-index: 5;

    transition:
        left .75s ease;
}


.ziaja-product-card:hover
.ziaja-product-image-wrap::after {

    left: 140%;
}


/* =========================================================
   BADGE
========================================================= */

.ziaja-product-badge {
    position: absolute;

    top: 11px;
    left: 10px;

    z-index: 12;

    display: inline-flex;

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

    min-height: 21px;

    padding:
        4px 12px;

    background:
        var(--ziaja-green);

    color: #fff;

    font-size: 9px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: .2px;

    text-transform: uppercase;
}


/* =========================================================
   PRICE / ADD TO CART BUY ZONE
   Desktop: nút Add to cart trượt vào vùng giá,
   không còn đè lên thumbnail.
========================================================= */

.ziaja-product-buy-zone {
    position: relative;

    min-height: 45px;
    margin-top: auto;

    overflow: hidden;
}

.ziaja-product-buy-zone .ziaja-product-price {
    margin-top: 0;

    opacity: 1;
    visibility: visible;

    transform: translate3d(0,0,0);

    transition:
        transform .36s cubic-bezier(.2,.8,.3,1),
        opacity .24s ease,
        visibility .24s ease;
}

.ziaja-product-cart-overlay {
    position: absolute;

    inset: 0;
    z-index: 20;

    display: flex;
    align-items: flex-start;

    opacity: 0;
    visibility: hidden;

    transform: translate3d(0,110%,0);

    transition:
        transform .4s cubic-bezier(.2,.8,.3,1),
        opacity .28s ease,
        visibility .28s ease;
}

.ziaja-product-card:hover
.ziaja-product-buy-zone .ziaja-product-price {
    opacity: 0;
    visibility: hidden;

    transform: translate3d(0,-110%,0);
}

.ziaja-product-card:hover
.ziaja-product-cart-overlay {
    opacity: 1;
    visibility: visible;

    transform: translate3d(0,0,0);
}


/* =========================================================
   ADD TO CART BUTTON
========================================================= */

.ziaja-product-carousel
.ziaja-add-to-cart,

.ziaja-product-carousel
.ziaja-add-to-cart.button {

    position: relative;

    z-index: 1;

    display: flex !important;

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

    width: 100%;

    min-height: 45px;

    padding:
        10px 15px !important;

    margin: 0 !important;

    border:
        1px solid
        var(--ziaja-green) !important;

    border-radius:
        0 !important;

    background:
        #fff !important;

    color:
        var(--ziaja-green) !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        600 !important;

    text-transform:
        uppercase;

    text-align:
        center;

    text-decoration:
        none !important;

    overflow:
        hidden;

    isolation:
        isolate;

    box-shadow:
        none !important;

    transition:
        color .35s ease !important;
}


/* Green hover layer */

.ziaja-product-carousel
.ziaja-add-to-cart::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--ziaja-green);

    transform:
        translate3d(-102%,0,0);

    transition:
        transform .4s
        cubic-bezier(.7,0,.3,1);
}


.ziaja-product-carousel
.ziaja-add-to-cart:hover {

    color:
        #fff !important;
}


.ziaja-product-carousel
.ziaja-add-to-cart:hover::before {

    transform:
        translate3d(0,0,0);
}


/* AJAX loading */

.ziaja-product-carousel
.ziaja-add-to-cart.loading {

    opacity: .65;

    pointer-events: none;
}


.ziaja-product-carousel
.ziaja-add-to-cart.added {

    background:
        var(--ziaja-green) !important;

    color:
        #fff !important;
}


.ziaja-product-carousel
.added_to_cart {

    display: none !important;
}


/* =========================================================
   CONTENT
========================================================= */

.ziaja-product-content {
    position: relative;

    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        12px 14px 17px;

    box-sizing:
        border-box;
}


/* =========================================================
   CATEGORY
========================================================= */

.ziaja-product-category {
    margin-bottom:
        5px;

    color:
        var(--ziaja-green);

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        700;

    letter-spacing:
        .55px;

    text-transform:
        uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.ziaja-product-title {
    display:
        -webkit-box;

    min-height:
        39px;

    margin:
        0 0 7px !important;

    padding:
        0 !important;

    color:
        var(--ziaja-title);

    font-size:
        16px !important;

    line-height:
        1.4 !important;

    font-weight:
        700 !important;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


.ziaja-product-title a {

    color:
        var(--ziaja-title) !important;

    text-decoration:
        none !important;

    transition:
        color .3s ease;
}


.ziaja-product-title a:hover,
.ziaja-product-card:hover
.ziaja-product-title a {

    color:
        var(--ziaja-green) !important;
}


/* =========================================================
   RATING + SALES
========================================================= */

.ziaja-product-meta {
    display: flex;

    align-items: center;

    min-height:
        18px;

    margin-top:
        1px;

    gap:
        5px;

    white-space:
        nowrap;
}


.ziaja-product-rating {
    display: flex;

    align-items: center;

    gap:
        4px;
}


.ziaja-rating-stars {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        1px;
}


.ziaja-rating-stars span {
    display:
        inline-block;

    color:
        #C49A36;

    font-size:
        12px;

    line-height:
        1;
}


.ziaja-rating-count,
.ziaja-sales-count,
.ziaja-meta-separator {

    color:
        #AAA49C;

    font-size:
        12px;

    line-height:
        1;
}


.ziaja-sales-count {
    transition:
        color .3s ease;
}


.ziaja-product-card:hover
.ziaja-sales-count {

    color:
        var(--ziaja-green);
}


/* =========================================================
   DIVIDER
========================================================= */

.ziaja-product-divider {
    width:
        60%;

    max-width:
        150px;

    height:
        1px;

    margin:
        9px 0 12px;

    background:
        rgba(24,39,48,.12);
}


/* =========================================================
   PRICE
========================================================= */

.ziaja-product-price {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        5px 8px;

    min-height:
        24px;

    margin-top:
        0;

    color:
        var(--ziaja-title);

    font-size:
        14px;

    line-height:
        1.2;

    font-weight:
        700;
}


.ziaja-product-price
.woocommerce-Price-amount {

    color:
        var(--ziaja-title);

    font-weight:
        700;
}


/* sale */

.ziaja-product-price ins {
    order:
        -1;

    text-decoration:
        none !important;

    color:
        var(--ziaja-title);
}


.ziaja-product-price ins
.woocommerce-Price-amount {

    color:
        var(--ziaja-title);
}


/* regular */

.ziaja-product-price del {

    color:
        #AAA49C;

    font-size:
        11px;

    font-weight:
        400;

    opacity:
        1 !important;
}


.ziaja-product-price del
.woocommerce-Price-amount {

    color:
        #AAA49C;

    font-weight:
        400;
}


/* =========================================================
   ARROWS
========================================================= */

.ziaja-carousel-arrow {
    position:
        absolute;

    top:
        43%;

    z-index:
        50;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        1px solid
        rgba(26,91,30,.18);

    border-radius:
        50%;

    background:
        #fff;

    color:
        var(--ziaja-green);

    cursor:
        pointer;

    box-shadow:
        0 5px 18px
        rgba(24,39,48,.08);

    transform:
        translateY(-50%);

    opacity:
        1;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.ziaja-carousel-arrow:hover {

    background:
        var(--ziaja-green);

    border-color:
        var(--ziaja-green);

    color:
        #fff;

    box-shadow:
        0 8px 22px
        rgba(26,91,30,.17);
}


.ziaja-carousel-arrow svg {
    display:
        block;
}


.ziaja-carousel-prev {
    left:
        -19px;
}


.ziaja-carousel-next {
    right:
        -19px;
}


.ziaja-carousel-arrow.is-hidden {
    display:
        none !important;
}


/* =========================================================
   CLONES
========================================================= */

.ziaja-product-card.ziaja-carousel-clone {
    pointer-events:
        auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .ziaja-product-card {
        flex-basis:
            calc((100% - 28px) / 3);
    }


    .ziaja-product-image {
        height:
            280px;
    }


    .ziaja-carousel-prev {
        left:
            5px;
    }


    .ziaja-carousel-next {
        right:
            5px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ziaja-carousel-track {
        gap:
            10px;
    }


    .ziaja-product-card {
        flex-basis:
            calc((100% - 10px) / 2);
    }


    .ziaja-product-image {
        height:
            220px;

        padding:
            15px 10px;
    }


    .ziaja-product-content {
        padding:
            10px 10px 14px;
    }


    .ziaja-product-title {
        min-height:
            36px;

        font-size:
            14px !important;
    }


    .ziaja-product-meta {
        gap:
            3px;
    }


    .ziaja-rating-count,
    .ziaja-sales-count,
    .ziaja-meta-separator {

        font-size:
            8px;
    }


    .ziaja-product-price {
        font-size:
            13px;
    }


    /*
     * Mobile không có hover ổn định:
     * hiển thị giá và nút add-to-cart theo chiều dọc.
     */
    .ziaja-product-buy-zone {
        min-height: 0;
        overflow: visible;
    }

    .ziaja-product-buy-zone .ziaja-product-price,
    .ziaja-product-card:hover .ziaja-product-buy-zone .ziaja-product-price {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ziaja-product-cart-overlay,
    .ziaja-product-card:hover .ziaja-product-cart-overlay {
        position: relative;
        inset: auto;

        margin-top: 8px;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .ziaja-product-carousel
    .ziaja-add-to-cart,

    .ziaja-product-carousel
    .ziaja-add-to-cart.button {

        min-height:
            38px;

        padding:
            8px 5px !important;

        font-size:
            10px !important;
    }


    .ziaja-carousel-arrow {
        width:
            34px;

        height:
            34px;
    }


    .ziaja-carousel-prev {
        left:
            3px;
    }


    .ziaja-carousel-next {
        right:
            3px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ziaja-product-image {
        height:
            190px;
    }


    .ziaja-product-category {
        font-size:
            8px;
    }


    /*
     * Nếu màn hình quá hẹp,
     * ẩn lượt bán để tránh vỡ layout.
     */
    .ziaja-sales-count,
    .ziaja-meta-separator {

        display:
            none;
    }
}