/* =========================================================
   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 {
    margin-left: -8px;
    margin-right: -8px;
}

.products-list.grid .item-product,
.products-list.grid > .product-wapper {
    box-sizing: border-box;
}


/* =========================================================
   PRODUCT CARD
   EQUAL HEIGHT
   ========================================================= */

.products-list.grid .product-wapper {

    position: relative;

    display: flex !important;
    flex-direction: column !important;

    width: 100%;

    height: 100% !important;

    margin: 0 0 28px !important;
    padding: 0 !important;

    background: var(--luxury-white);

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible;

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


/* Desktop subtle lift */

@media (min-width: 768px) {

    .products-list.grid .product-wapper:hover {
        transform: translateY(-3px);
    }

}


/* =========================================================
   PRODUCT IMAGE AREA
   EXACT 1 : 1
   ========================================================= */

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

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #faf8f3 100%
        );

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden;

    isolation: isolate;
}


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

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

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 0;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    z-index: 2;
}


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

    display: block;

    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   PRODUCT IMAGE
   EXACT 1 : 1
   ========================================================= */

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

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;

    object-position: center center;

    border: 0 !important;

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


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

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

    z-index: 1;
}


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

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

    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    opacity: 0;

    z-index: 3;
}


/* Show hover image */

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

    opacity: 1;

    transform: scale(1.035);
}


/* Zoom image */

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

    transform: scale(1.035);
}


/* =========================================================
   IMAGE GOLD BOTTOM LINE
   ========================================================= */

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

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

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

    z-index: 20;

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


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

    width: 100%;
}


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

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

    content: "";

    position: absolute;

    inset: 0;

    border: 1px solid transparent;

    pointer-events: none;

    z-index: 19;

    transition:
        border-color .4s ease;
}


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

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


/* =========================================================
   SOLD OUT LABEL
   STATIC
   ========================================================= */

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

    position: absolute !important;

    top: 14px !important;
    left: 14px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 50 !important;

    margin: 0 !important;
    padding: 0 !important;

    animation: none !important;

    transition: none !important;

    transform: none !important;
}


/* =========================================================
   SOLD OUT BADGE
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb
.product-lable
.vgwc-label {

    display: inline-block !important;

    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    padding: 7px 12px !important;

    background:
        #c72e45 !important;

    color:
        #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: inherit;

    font-size: 9px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;

    letter-spacing: 1.4px !important;

    text-transform: uppercase !important;

    white-space: nowrap;

    animation: none !important;

    transition: none !important;

    transform: none !important;
}


/* Absolutely no sold-out animation */

.products-list.grid
.product-wapper:hover
.product-lable,

.products-list.grid
.product-wapper:hover
.product-lable
.vgwc-label {

    animation: none !important;

    transition: none !important;

    transform: none !important;

    box-shadow: none !important;
}


/* Remove theme pseudo animation */

.products-list.grid
.product-wapper
.product-lable
.vgwc-label::before,

.products-list.grid
.product-wapper
.product-lable
.vgwc-label::after {

    display: none !important;

    content: none !important;

    animation: none !important;

    transition: none !important;

    transform: none !important;
}


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

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

    position: absolute;

    right: 14px;
    bottom: 14px;

    z-index: 40;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    width: 44px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   ACTION BUTTON BASE
   ========================================================= */

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

    display: flex;

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

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

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

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

    color:
        var(--luxury-black);

    box-shadow:
        0 6px 20px rgba(0,0,0,.10);

    opacity: 0;
    visibility: hidden;

    transform: translateX(14px);

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


/* Show actions */

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

    opacity: 1;

    visibility: visible;

    transform: translateX(0);
}


/* =========================================================
   ACTION LINKS / BUTTONS
   ========================================================= */

.products-list.grid
.product-wapper
.products-thumb
.product-button
a,

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

    display: flex;

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

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

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

    color:
        var(--luxury-black);

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

    border-radius: 0;

    box-shadow:
        0 6px 20px rgba(0,0,0,.10);

    font-size: 12px;

    cursor: pointer;

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


/* Action hover */

.products-list.grid
.product-wapper
.products-thumb
.product-button
a:hover,

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

    background:
        var(--luxury-black);

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

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

    transform:
        translateY(-2px);
}


/* =========================================================
   PRODUCT CONTENT
   EQUAL HEIGHT
   ========================================================= */

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

    position: relative;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

    width: 100%;

    height: auto !important;

    min-height: 78px !important;

    flex: 1 0 auto !important;

    margin: 0 !important;

    padding:
        13px 5px 4px !important;

    background:
        #ffffff;

    text-align: center;

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   THEME CONTENT WRAPPER
   ========================================================= */

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

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100%;

    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center;
}


/* =========================================================
   PRODUCT TITLE
   EQUAL TITLE HEIGHT
   ========================================================= */

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

    display: -webkit-box !important;

    width: 100%;

    min-height: 40px !important;
    max-height: 40px !important;

    margin:
        0 0 7px !important;

    padding:
        0 !important;

    font-size:
        14px !important;

    line-height:
        1.4 !important;

    font-weight:
        500 !important;

    letter-spacing:
        .15px;

    text-align:
        center;

    white-space:
        normal;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


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

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

    position: relative;

    display: inline;

    color:
        var(--luxury-text) !important;

    text-decoration:
        none !important;

    transition:
        color .3s ease;
}


/* Title hover */

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

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


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

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

    content: "";

    position: absolute;

    left: 50%;

    bottom: -4px;

    width: 0;

    height: 1px;

    background:
        var(--luxury-gold);

    transform:
        translateX(-50%);

    transition:
        width .35s ease;
}


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

    width: 26px;
}


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

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

    display: block;

    width: 100%;

    min-height: 20px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--luxury-black) !important;

    font-size:
        14px !important;

    line-height:
        1.45 !important;

    font-weight:
        600 !important;

    letter-spacing:
        .2px;

    text-align:
        center;
}


/* Price amount */

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

    color:
        inherit;
}


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

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

    margin-right:
        5px;

    color:
        #aaa !important;

    font-size:
        11px !important;

    font-weight:
        400;
}


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

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

    color:
        var(--luxury-gold) !important;

    text-decoration:
        none !important;
}


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

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

    content: "";

    display: block;

    width: 0;

    height: 1px;

    margin:
        8px auto 0;

    background:
        var(--luxury-gold);

    transition:
        width .4s ease;
}


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

    width:
        25px;
}


/* =========================================================
   REMOVE THEME SPACING
   ========================================================= */

.products-list.grid
.product-wapper
.products-content
.contents > * {

    margin-top:
        0;
}


.products-list.grid
.product-wapper
.products-content
.product-title:first-child {

    margin-top:
        0 !important;
}


.products-list.grid
.product-wapper
.products-content
.price:last-child {

    margin-bottom:
        0 !important;
}


/* =========================================================
   PRODUCT LINKS
   ========================================================= */

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

    text-decoration:
        none;
}


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

    cursor:
        pointer;
}


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

@media (max-width: 767px) {

    .products-list.grid {

        margin-left:
            -5px;

        margin-right:
            -5px;
    }


    .products-list.grid .item-product,
    .products-list.grid > .product-wapper {

        padding:
            0 5px !important;

        margin-bottom:
            18px !important;

        box-sizing:
            border-box;
    }


    /* =====================================================
       MOBILE IMAGE
       EXACT 1 : 1
       ===================================================== */

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

        aspect-ratio:
            1 / 1 !important;

        height:
            auto !important;
    }


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

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

        min-height:
            58px !important;

        padding:
            10px 2px 3px !important;
    }


    /* =====================================================
       MOBILE TITLE
       EQUAL 2-LINE HEIGHT
       ===================================================== */

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

        min-height:
            30px !important;

        max-height:
            30px !important;

        margin-bottom:
            5px !important;

        font-size:
            11px !important;

        line-height:
            1.4 !important;

        letter-spacing:
            .05px;

        -webkit-line-clamp:
            2;
    }


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

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

        min-height:
            17px !important;

        font-size:
            12px !important;

        line-height:
            1.4 !important;
    }


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

        font-size:
            9px !important;
    }


    /* =====================================================
       SOLD OUT MOBILE
       ===================================================== */

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

        top:
            8px !important;

        left:
            8px !important;
    }


    .products-list.grid
    .product-wapper
    .products-thumb
    .product-lable
    .vgwc-label {

        padding:
            5px 8px !important;

        font-size:
            7px !important;

        letter-spacing:
            1px !important;

        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;
    }


    /* =====================================================
       HIDE ACTION BUTTONS MOBILE
       ===================================================== */

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

        display:
            none !important;
    }


    /* =====================================================
       DISABLE CARD MOVEMENT
       ===================================================== */

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

        transform:
            none !important;
    }


    /* =====================================================
       KEEP IMAGE CLEAN ON TOUCH
       ===================================================== */

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

        transform:
            none !important;
    }


    /* =====================================================
       GOLD LINE
       ===================================================== */

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

        width:
            100%;
    }

}


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

@media (max-width: 480px) {

    .products-list.grid .item-product,
    .products-list.grid > .product-wapper {

        padding:
            0 4px !important;

        margin-bottom:
            15px !important;
    }


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

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

        min-height:
            55px !important;

        padding:
            9px 2px 2px !important;
    }


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

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

        min-height:
            29px !important;

        max-height:
            29px !important;

        font-size:
            10.5px !important;

        line-height:
            1.35 !important;
    }


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

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

        min-height:
            16px !important;

        font-size:
            11px !important;
    }


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

        font-size:
            9px !important;
    }

}


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

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

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

        aspect-ratio:
            1 / 1 !important;
    }


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

        min-height:
            72px !important;

        padding:
            12px 4px 4px !important;
    }


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

        min-height:
            37px !important;

        max-height:
            37px !important;

        font-size:
            13px !important;

        line-height:
            1.4 !important;

        margin-bottom:
            6px !important;
    }


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

        min-height:
            19px !important;

        font-size:
            13px !important;
    }

}


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

@media (min-width: 1400px) {

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

        aspect-ratio:
            1 / 1 !important;
    }


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

        min-height:
            82px !important;

        padding:
            14px 6px 5px !important;
    }


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

        min-height:
            42px !important;

        max-height:
            42px !important;

        font-size:
            15px !important;

        line-height:
            1.4 !important;
    }


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

        min-height:
            21px !important;

        font-size:
            15px !important;
    }

}


/* =========================================================
   IMPORTANT MOJURI OVERRIDES
   ========================================================= */

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

    display:
        flex !important;

    flex-direction:
        column !important;

    height:
        100% !important;
}


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

    aspect-ratio:
        1 / 1 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        0 !important;

    margin:
        0 !important;

    flex:
        0 0 auto !important;
}


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

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


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

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        cover !important;
}


/* =========================================================
   FORCE CONTENT TO FILL CARD
   ========================================================= */

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

    flex:
        1 0 auto !important;

    height:
        auto !important;

    min-height:
        78px !important;
}


/* =========================================================
   FINAL RESET
   ========================================================= */

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

    vertical-align:
        middle !important;
}


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

    margin-top:
        0 !important;
}


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

    margin-top:
        0;
}


/* =========================================================
   FINAL EQUAL HEIGHT GRID FIX
   ========================================================= */

/*
   Slick / Bootstrap / Mojuri may give different heights
   to the parent product columns. This makes each product
   wrapper stretch to the available row height.
*/

.products-list.grid
.item-product {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;
}


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

    flex:
        1 1 auto !important;

    display:
        flex !important;

    flex-direction:
        column !important;
}


/* =========================================================
   END — ANS DHIVYAM LUXURY EQUAL HEIGHT PRODUCT CARD
   ========================================================= */