/* =========================================================
                    PRODUCT PAGE COLORS
========================================================= */

:root {

    --ray-primary-background: #eee0cd;

    --ray-body-background: #fffdf9;

    --ray-section-background: #f8f2ea;

    --ray-heading-color: #4b3328;

    --ray-body-color: #6e5a50;

    --ray-hover-color: #a8743a;

    --ray-white-color: #ffffff;

    --ray-border-color: rgba(75, 51, 40, 0.15);

    --ray-card-shadow: 0 14px 35px rgba(75, 51, 40, 0.09);

}


/* =========================================================
                    GENERAL PAGE SETTINGS
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    color: var(--ray-body-color);

    background-color: var(--ray-body-background);

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

}


/* =========================================================
                    PRODUCT PAGE CONTAINER
========================================================= */

.product-page {

    max-width: 1350px;

    margin: 0 auto;

    padding: 45px 30px 75px;

}


/* =========================================================
                    PRODUCT DETAIL LAYOUT
========================================================= */

.product-detail-container {

    display: grid;

    grid-template-columns:
        minmax(0, 520px)
        minmax(480px, 560px);

    gap: 45px;

    justify-content: center;

    align-items: start;

}


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

.product-gallery {

    display: grid;

    grid-template-columns: 72px minmax(0, 1fr);

    gap: 14px;

    align-items: start;

}


/* =========================================================
                    PRODUCT THUMBNAILS
========================================================= */

.product-thumbnails {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.thumbnail-button {

    width: 72px;

    aspect-ratio: 3 / 4;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 13px;

    overflow: hidden;

    background-color: var(--ray-section-background);

    cursor: pointer;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;

}


.thumbnail-button:hover {

    transform: translateY(-2px);

}


.thumbnail-button.active-thumbnail {

    border-color: var(--ray-heading-color);

}


.thumbnail-button img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


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

.main-product-image-container {

    position: relative;

    width: 100%;

    max-width: 430px;

    aspect-ratio: 3 / 4;

    border-radius: 22px;

    overflow: hidden;

    background-color: var(--ray-section-background);

    box-shadow: var(--ray-card-shadow);

}


.main-product-image-container img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


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

.product-discount-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 2;

    padding: 7px 13px;

    border-radius: 50px;

    color: var(--ray-white-color);

    background-color: var(--ray-heading-color);

    font-size: 10px;

    font-weight: 600;

}


/* =========================================================
                    PRODUCT DETAILS SECTION
========================================================= */

.product-details {

    position: sticky;

    top: 110px;

    width: 100%;

    padding: 28px 34px;

    border: 1px solid var(--ray-border-color);

    border-radius: 24px;

    background-color: var(--ray-white-color);

    box-shadow: var(--ray-card-shadow);

}


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

.product-detail-category {

    color: var(--ray-hover-color);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}


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

.product-details h1 {

    margin-top: 9px;

    color: var(--ray-heading-color);

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(32px, 3vw, 42px);

    font-weight: 700;

    line-height: 1.05;

}


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

.product-detail-price {

    margin-top: 16px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}


.product-old-price {

    color: #a4938c;

    font-size: 13px;

    text-decoration: line-through;

}


.product-current-price {

    color: var(--ray-heading-color);

    font-size: 19px;

    font-weight: 600;

}


/* =========================================================
                    PRODUCT DESCRIPTION
========================================================= */

.product-description {

    margin-top: 19px;

    font-size: 13px;

    line-height: 1.65;

}


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

.product-information-list {

    margin-top: 20px;

    border-top: 1px solid var(--ray-border-color);

}


.product-information-row {

    padding: 10px 0;

    border-bottom: 1px solid var(--ray-border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 12px;

}


.product-information-row strong {

    color: var(--ray-heading-color);

}


.product-information-row span {

    text-align: right;

}


/* =========================================================
                    PRODUCT OPTION SECTION
========================================================= */

.product-option-section {

    margin-top: 17px;

}


.product-option-section label {

    display: block;

    margin-bottom: 7px;

    color: var(--ray-heading-color);

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
                    PRODUCT SIZE DROPDOWN
========================================================= */

.product-option-section select {

    width: 100%;

    min-height: 44px;

    padding: 0 17px;

    border: 1px solid var(--ray-border-color);

    border-radius: 50px;

    outline: none;

    color: var(--ray-heading-color);

    background-color: var(--ray-section-background);

    font-size: 12px;

    cursor: pointer;

}


/* =========================================================
                    QUANTITY SELECTOR
========================================================= */

.quantity-selector {

    width: 135px;

    height: 42px;

    border: 1px solid var(--ray-border-color);

    border-radius: 50px;

    display: grid;

    grid-template-columns: 42px 1fr 42px;

    overflow: hidden;

    background-color: var(--ray-section-background);

}


.quantity-selector button {

    border: none;

    color: var(--ray-heading-color);

    background-color: transparent;

    font-size: 18px;

    cursor: pointer;

}


.quantity-selector input {

    width: 100%;

    border: none;

    outline: none;

    color: var(--ray-heading-color);

    background-color: transparent;

    text-align: center;

    font-size: 13px;

}




/* =========================================================
                    PRODUCT PURCHASE FORM
========================================================= */

.product-purchase-form {

    margin: 0;

}


.product-option-section select:focus-visible,
.quantity-selector button:focus-visible,
.add-to-cart-button:focus-visible,
.buy-now-button:focus-visible {

    outline: 2px solid var(--ray-hover-color);

    outline-offset: 3px;

}


/* =========================================================
                    PRODUCT ACTION BUTTONS
========================================================= */

.product-action-buttons {

    margin-top: 20px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}


.add-to-cart-button,
.buy-now-button {

    min-height: 46px;

    padding: 10px 16px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

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

}


.add-to-cart-button {

    border: 1px solid var(--ray-heading-color);

    color: var(--ray-white-color);

    background-color: var(--ray-heading-color);

}


.add-to-cart-button i {

    margin-right: 7px;

}


.buy-now-button {

    border: 1px solid var(--ray-heading-color);

    color: var(--ray-heading-color);

    background-color: transparent;

}


.add-to-cart-button:hover,
.buy-now-button:hover {

    transform: translateY(-2px);

}


.add-to-cart-button:hover {

    background-color: var(--ray-hover-color);

    border-color: var(--ray-hover-color);

}


.buy-now-button:hover {

    color: var(--ray-white-color);

    background-color: var(--ray-heading-color);

}


/* =========================================================
                    DELIVERY INFORMATION
========================================================= */

.delivery-information {

    margin-top: 20px;

    padding: 16px 18px;

    border-radius: 18px;

    background-color: var(--ray-section-background);

}


.delivery-information p {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 9px;

    font-size: 11px;

}


.delivery-information p:last-child {

    margin-bottom: 0;

}


.delivery-information i {

    width: 17px;

    color: var(--ray-hover-color);

    text-align: center;

}


/* =========================================================
                    MEDIUM DESKTOP
========================================================= */

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

    .product-page {

        max-width: 1050px;

        padding-left: 24px;

        padding-right: 24px;

    }


    .product-detail-container {

        grid-template-columns:
            minmax(0, 460px)
            minmax(420px, 500px);

        gap: 32px;

    }


    .main-product-image-container {

        max-width: 380px;

    }


    .product-gallery {

        grid-template-columns: 68px minmax(0, 1fr);

    }


    .thumbnail-button {

        width: 68px;

    }

}


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

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

    .product-page {

        max-width: 760px;

        padding: 40px 24px 75px;

    }


    .product-detail-container {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .product-gallery {

        grid-template-columns: 75px minmax(0, 1fr);

    }


    .main-product-image-container {

        max-width: 100%;

    }


    .product-details {

        position: static;

    }

}


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

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

    .product-page {

        padding: 26px 16px 60px;

    }


    .product-detail-container {

        gap: 22px;

    }


    .product-gallery {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .product-thumbnails {

        order: 2;

        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 4px;

    }


    .thumbnail-button {

        flex: 0 0 65px;

        width: 65px;

        border-radius: 12px;

    }


    .main-product-image-container {

        border-radius: 18px;

    }


    .product-discount-badge {

        top: 12px;

        left: 12px;

        padding: 6px 11px;

    }


    .product-details {

        padding: 22px 18px;

        border-radius: 20px;

    }


    .product-details h1 {

        font-size: 32px;

    }


    .product-detail-price {

        margin-top: 14px;

    }


    .product-description {

        margin-top: 16px;

    }


    .product-information-list {

        margin-top: 18px;

    }


    .product-information-row {

        padding: 9px 0;

    }


    .product-option-section {

        margin-top: 15px;

    }


    .product-action-buttons {

        margin-top: 18px;

        grid-template-columns: 1fr;

    }


    .delivery-information {

        margin-top: 18px;

        padding: 15px;

    }

}


/* =========================================================
                VERY SMALL MOBILE DEVICES
========================================================= */

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

    .product-page {

        padding-left: 12px;

        padding-right: 12px;

    }


    .product-details {

        padding: 20px 15px;

    }


    .product-details h1 {

        font-size: 29px;

    }


    .product-current-price {

        font-size: 18px;

    }

}