/* =========================================================
   ANS DHIVYAM
   MODERN LUXURY JEWELLERY PRODUCT CARD
   =========================================================
   CSS ONLY
   NO HTML / BLADE / PHP / JS CHANGES
   ========================================================= */


/* =========================================================
   LUXURY VARIABLES
   ========================================================= */

:root {
    --luxury-black: #181714;
    --luxury-dark: #24211c;
    --luxury-gold: #b89552;
    --luxury-gold-light: #d8bc7b;
    --luxury-cream: #faf8f3;
    --luxury-white: #ffffff;
    --luxury-text: #33302a;
    --luxury-muted: #858078;
    --luxury-border: rgba(184,149,82,.18);

    --luxury-transition:
        all .4s cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.products-list.grid .item-product {
    padding: 8px;
    margin: 0 0 25px;
    box-sizing: border-box;
}


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

.products-list.grid .product-wapper {
    position: relative;
    display: block;
    width: 100%;
    background: var(--luxury-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: var(--luxury-transition);
}


/* subtle lift */

.products-list.grid .product-wapper:hover {
    transform: translateY(-4px);
    box-shadow: none;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb {

    position: relative;
    display: block;
    width: 100%;

    background:
        linear-gradient(
            145deg,
            #fbfaf7 0%,
            #f6f2e9 100%
        );

    border: 0;
    border-radius: 0;

    overflow: hidden;

    aspect-ratio: 1 / 1.12;

    isolation: isolate;
}


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

.products-list.grid
.product-wapper
.products-thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .5s ease;
}


/* luxury image zoom */

.products-list.grid
.product-wapper:hover
.products-thumb > img {

    transform: scale(1.045);
}


/* =========================================================
   IMAGE GOLD FRAME
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    margin: auto;

    background:
        linear-gradient(
            90deg,
            var(--luxury-gold),
            var(--luxury-gold-light),
            var(--luxury-gold)
        );

    z-index: 15;

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


.products-list.grid
.product-wapper:hover
.products-thumb::after {

    width: 100%;
}


/* =========================================================
   IMAGE INNER BORDER
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb::before {

    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid transparent;

    pointer-events: none;

    z-index: 14;

    transition: var(--luxury-transition);
}


.products-list.grid
.product-wapper:hover
.products-thumb::before {

    border-color:
        rgba(184,149,82,.25);
}


/* =========================================================
   HOVER IMAGE
   Existing Mojuri hover-image is preserved
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb
.product-thumb-hover {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 5;
}


.products-list.grid
.product-wapper
.products-thumb
.product-thumb-hover
.hover-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .5s ease;
}


.products-list.grid
.product-wapper:hover
.products-thumb
.product-thumb-hover
.hover-image {

    transform: scale(1.045);
}


/* =========================================================
   PRODUCT ACTIONS
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb
.product-button {

    position: absolute;

    right: 14px;
    bottom: 18px;

    width: 44px;

    z-index: 30;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* hidden before hover */

.products-list.grid
.product-wapper
.products-thumb
.product-button > * {

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(15px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .4s ease;
}


/* show on hover */

.products-list.grid
.product-wapper:hover
.products-thumb
.product-button > * {

    opacity: 1;
    visibility: visible;

    transform:
        translateX(0);
}


/* =========================================================
   QUICK VIEW
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb
.product-button
.product-quickview {

    width: 44px;
    height: 44px;

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

    border:
        1px solid var(--luxury-border);

    box-shadow:
        0 8px 22px rgba(0,0,0,.10);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    transition:
        var(--luxury-transition);
}


.products-list.grid
.product-wapper
.products-thumb
.product-button
.product-quickview > a {

    width: 44px;
    height: 44px;

    line-height: 44px;

    border: 0;

    background: transparent;

    color:
        var(--luxury-black);
}


.products-list.grid
.product-wapper
.products-thumb
.product-button
.product-quickview > a > i {

    color:
        var(--luxury-black);

    font-size: 15px;

    transition:
        var(--luxury-transition);
}


.products-list.grid
.product-wapper
.products-thumb
.product-button
.product-quickview:hover {

    background:
        var(--luxury-black);

    border-color:
        var(--luxury-black);

    transform:
        translateY(-2px);
}


.products-list.grid
.product-wapper
.products-thumb
.product-button
.product-quickview:hover > a > i {

    color:
        var(--luxury-gold-light);
}


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

.products-list.grid
.product-wapper
.products-thumb
.onsale {

    position: absolute;

    top: 13px;
    left: 13px;

    right: auto;

    z-index: 25;

    min-width: auto;

    padding:
        7px 11px;

    background:
        var(--luxury-black);

    color:
        #fff;

    border: 0;

    border-radius: 0;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);
}


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

.products-list.grid
.product-wapper
.products-content {

    position: relative;

    padding:
        17px 7px 5px;

    margin: 0;

    background:
        transparent;

    text-align: center;
}


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

.products-list.grid
.product-wapper
.products-content
.cat-products {

    margin:
        0 0 6px;

    color:
        var(--luxury-gold);

    font-size:
        9px;

    line-height:
        1.4;

    font-weight:
        600;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


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

.products-list.grid
.product-wapper
.products-content
h3.product-title {

    margin:
        3px 0 8px;

    padding: 0;

    font-size:
        14px;

    line-height:
        1.5;

    font-weight:
        500;

    letter-spacing:
        .3px;

    text-transform:
        none;
}


.products-list.grid
.product-wapper
.products-content
h3.product-title a {

    position: relative;

    color:
        var(--luxury-text);

    text-decoration:
        none;

    transition:
        var(--luxury-transition);
}


.products-list.grid
.product-wapper:hover
.products-content
h3.product-title a {

    color:
        var(--luxury-gold);
}


/* =========================================================
   TITLE GOLD UNDERLINE
   ========================================================= */

.products-list.grid
.product-wapper
.products-content
h3.product-title a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 0;
    height: 1px;

    background:
        var(--luxury-gold);

    transform:
        translateX(-50%);

    transition:
        width .35s ease;
}


.products-list.grid
.product-wapper:hover
.products-content
h3.product-title a::after {

    width: 30px;
}


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

.products-list.grid
.product-wapper
.products-content
.price {

    display: block;

    margin:
        6px 0 0;

    padding: 0;

    color:
        var(--luxury-black);

    font-size:
        15px;

    line-height:
        1.5;

    font-weight:
        600;

    letter-spacing:
        .3px;
}


.products-list.grid
.product-wapper
.products-content
.price del {

    margin-right: 6px;

    color:
        #aaa;

    font-size:
        12px;

    font-weight:
        400;
}


.products-list.grid
.product-wapper
.products-content
.price ins {

    color:
        var(--luxury-gold);

    text-decoration:
        none;
}


/* =========================================================
   RATING
   ========================================================= */

.products-list.grid
.product-wapper
.products-content
.rating {

    margin:
        6px 0 0;
}


.products-list.grid
.product-wapper
.products-content
.star-rating {

    color:
        var(--luxury-gold);

    font-size:
        11px;
}


.products-list.grid
.product-wapper
.products-content
.rating
.review-count {

    color:
        var(--luxury-muted);

    font-size:
        10px;
}


/* =========================================================
   ADD TO CART
   Existing functionality preserved
   ========================================================= */

.products-list.grid
.product-wapper
.products-content
.btn-atc {

    margin-top:
        13px;
}


.products-list.grid
.product-wapper
.products-content
.btn-atc a {

    position: relative;

    display: inline-flex;

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

    min-width:
        145px;

    height:
        40px;

    padding:
        0 20px;

    background:
        var(--luxury-black);

    border:
        1px solid var(--luxury-black);

    color:
        #fff;

    font-size:
        9px;

    line-height:
        40px;

    font-weight:
        600;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

    transition:
        var(--luxury-transition);

    overflow:
        hidden;
}


.products-list.grid
.product-wapper
.products-content
.btn-atc a:hover {

    background:
        var(--luxury-gold);

    border-color:
        var(--luxury-gold);

    color:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(184,149,82,.20);
}


/* remove old icon animation */

.products-list.grid
.product-wapper
.products-content
.btn-atc a::before {

    display:
        none;
}


/* =========================================================
   CONTENT GOLD ACCENT
   ========================================================= */

.products-list.grid
.product-wapper
.products-content::after {

    content: "";

    display: block;

    width: 0;
    height: 1px;

    margin:
        12px auto 0;

    background:
        var(--luxury-gold);

    transition:
        width .4s ease;
}


.products-list.grid
.product-wapper:hover
.products-content::after {

    width:
        28px;
}


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

@media (max-width: 767px) {

    .products-list.grid .item-product {

        padding:
            5px;

        margin-bottom:
            16px;
    }


    .products-list.grid
    .product-wapper {

        margin-bottom:
            18px;

        transform:
            none;
    }


    .products-list.grid
    .product-wapper:hover {

        transform:
            none;
    }


    .products-list.grid
    .product-wapper
    .products-thumb {

        aspect-ratio:
            1 / 1.15;
    }


    .products-list.grid
    .product-wapper
    .products-content {

        padding:
            12px 3px 3px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .cat-products {

        font-size:
            7px;

        letter-spacing:
            1.2px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    h3.product-title {

        font-size:
            11px;

        line-height:
            1.45;

        letter-spacing:
            .1px;

        margin-bottom:
            5px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .price {

        font-size:
            12px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .price del {

        font-size:
            10px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .btn-atc {

        margin-top:
            9px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .btn-atc a {

        width:
            100%;

        min-width:
            0;

        height:
            36px;

        line-height:
            36px;

        font-size:
            7px;

        letter-spacing:
            1.2px;
    }


    /* hide desktop action buttons on mobile */

    .products-list.grid
    .product-wapper
    .products-thumb
    .product-button {

        display:
            none;
    }


    /* mobile sale badge */

    .products-list.grid
    .product-wapper
    .products-thumb
    .onsale {

        top:
            8px;

        left:
            8px;

        padding:
            5px 7px;

        font-size:
            7px;

        letter-spacing:
            1px;
    }

}


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

@media (max-width: 480px) {

    .products-list.grid .item-product {

        padding:
            4px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    h3.product-title {

        font-size:
            10.5px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .price {

        font-size:
            11px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .btn-atc a {

        font-size:
            6.5px;

        letter-spacing:
            1px;
    }

}


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

@media (min-width: 768px) and (max-width: 1199px) {

    .products-list.grid
    .product-wapper
    .products-thumb {

        aspect-ratio:
            1 / 1.15;
    }


    .products-list.grid
    .product-wapper
    .products-content {

        padding:
            15px 5px 4px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    h3.product-title {

        font-size:
            13px;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .products-list.grid
    .product-wapper
    .products-thumb {

        aspect-ratio:
            1 / 1.20;
    }


    .products-list.grid
    .product-wapper
    .products-content {

        padding-top:
            20px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    h3.product-title {

        font-size:
            15px;
    }


    .products-list.grid
    .product-wapper
    .products-content
    .price {

        font-size:
            16px;
    }

}


/* =========================================================
   SAFETY — DO NOT AFFECT PRODUCT FUNCTIONALITY
   ========================================================= */

.products-list.grid
.product-wapper
a {

    cursor:
        pointer;
}


/* =========================================================
   END
   ========================================================= */