/* ============================================================
                RAY STUDIO - SHARED PRODUCT CARD
============================================================ */


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

.product-card {

    min-width: 0;

    padding: 0;

    border: none;

    border-radius: 18px;

    overflow: hidden;

    background-color: #ffffff;

    box-shadow: none;

    transition:
        transform 0.35s ease;
}


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

.product-card:hover {

    transform:
        translateY(-4px);
}


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

.product-image-container {

    position: relative;

    width: 100%;

    aspect-ratio:
        3 / 4;

    border-radius: 18px;

    overflow: hidden;

    background-color:
        #f8f2ea;
}


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

.product-image-link {

    width: 100%;

    height: 100%;

    display: block;
}


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

.product-image-container img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.5s ease;
}


/* ============================================================
                    PRODUCT IMAGE HOVER ZOOM
============================================================ */

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

    transform:
        scale(1.045);
}


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

.discount-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    z-index: 3;

    padding:
        6px
        11px;

    border-radius: 50px;

    color:
        #ffffff;

    background-color:
        #4b3328;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 9px;

    font-weight: 600;
}


/* ============================================================
                    WISHLIST BUTTON
============================================================ */

.wishlist-button {

    position: absolute;

    top: 11px;

    right: 11px;

    z-index: 3;

    width: 38px;

    height: 38px;

    padding: 0;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #4b3328;

    background-color:
        rgba(255, 255, 255, 0.94);

    font-size: 15px;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}


/* ============================================================
                    WISHLIST HOVER
============================================================ */

.wishlist-button:hover {

    color:
        #ffffff;

    background-color:
        #4b3328;

    transform:
        scale(1.07);
}


/* ============================================================
                    PRODUCT INFORMATION
============================================================ */

.product-information {

    padding:
        12px
        11px
        11px;

    text-align: left;
}


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

.product-category {

    margin: 0;

    color:
        #9b6b43;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing:
        2.2px;

    text-transform:
        uppercase;
}


/* ============================================================
                    PRODUCT NAME
============================================================ */

.product-name {

    margin-top: 3px;

    margin-bottom: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;

    font-weight: 600;

    line-height: 1.12;

    letter-spacing:
        0.1px;
}


/* ============================================================
                    PRODUCT NAME LINK
============================================================ */

.product-name a {

    color:
        #3d2a21;

    text-decoration:
        none;

    transition:
        color 0.3s ease;
}


/* ============================================================
                    PRODUCT NAME HOVER
============================================================ */

.product-name a:hover {

    color:
        #8d5f38;
}


/* ============================================================
                    PRODUCT PRICE SECTION
============================================================ */

.product-price {

    margin-top: 6px;

    margin-bottom: 0;

    display: flex;

    align-items: center;

    justify-content:
        flex-start;

    flex-wrap: wrap;

    gap: 9px;
}


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

.old-price {

    color:
        #b3a49c;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 11px;

    font-weight: 400;

    text-decoration:
        line-through;
}


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

.current-price {

    color:
        #4a3025;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing:
        0.1px;
}


/* ============================================================
                REMOVE OLD VIEW ARTICLE BUTTON
============================================================ */

/*
    IMPORTANT:

    Some old Ray Studio pages still contain
    the View Article button inside their HTML.

    Until we remove that old HTML code,
    this shared stylesheet hides the button.
*/

.product-button {

    display:
        none !important;
}


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

@media screen and (max-width: 800px) {


    /* ========================================================
                    TABLET PRODUCT NAME
    ========================================================= */

    .product-name {

        font-size: 20px;
    }


}


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

@media screen and (max-width: 550px) {


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

    .product-card {

        border-radius:
            16px;
    }


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

    .product-image-container {

        border-radius:
            16px;
    }


    /* ========================================================
                    MOBILE PRODUCT INFORMATION
    ========================================================= */

    .product-information {

        padding:
            10px
            8px
            10px;
    }


    /* ========================================================
                    MOBILE PRODUCT CATEGORY
    ========================================================= */

    .product-category {

        font-size:
            8px;

        letter-spacing:
            1.4px;
    }


    /* ========================================================
                    MOBILE PRODUCT NAME
    ========================================================= */

    .product-name {

        font-size:
            17px;

        font-weight:
            600;
    }


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

    .old-price {

        font-size:
            9px;
    }


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

    .current-price {

        font-size:
            10px;
    }


    /* ========================================================
                    MOBILE DISCOUNT BADGE
    ========================================================= */

    .discount-badge {

        top: 8px;

        left: 8px;

        padding:
            5px
            8px;

        font-size:
            8px;
    }


    /* ========================================================
                    MOBILE WISHLIST BUTTON
    ========================================================= */

    .wishlist-button {

        top: 7px;

        right: 7px;

        width: 32px;

        height: 32px;

        font-size:
            13px;
    }


}


/* ============================================================
                    REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {


    /* ========================================================
                    DISABLE CARD ANIMATIONS
    ========================================================= */

    .product-card,
    .product-image-container img,
    .wishlist-button {

        transition:
            none;
    }


}