/* =========================================
   PRODUCT DETAIL PAGE
========================================= */

.product-detail-page {
    width: 100%;

    padding:
        65px
        0
        90px;

    background: #f5f6fa;
}


.product-detail-container {
    width: min(
        1480px,
        calc(100% - 120px)
    );

    margin: 0 auto;
}


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

.product-detail-card {
    width: 100%;

    display: grid;

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

    gap: 55px;

    padding: 38px;

    border-radius: 32px;

    background: #ffffff;

    box-shadow:
        0 8px 30px
        rgba(17, 24, 39, 0.045);
}


/* =========================================
   LEFT SIDE
========================================= */

.product-detail-left {
    width: 100%;
}


.product-detail-image-box {
    width: 100%;

    min-height: 650px;

    height: 100%;

    display: flex;

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

    overflow: hidden;

    border-radius: 26px;

    background: #eef2f5;
}


.product-detail-image-box img {
    width: 100%;
    height: 100%;

    max-height: 650px;

    display: block;

    object-fit: contain;

    padding: 38px;
}


/* No image */

.product-detail-no-image {
    display: flex;

    flex-direction: column;

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

    gap: 13px;

    color: #9ca3af;
}


.product-detail-no-image i {
    font-size: 52px;
}


.product-detail-no-image span {
    font-size: 14px;
}


/* =========================================
   RIGHT SIDE
========================================= */

.product-detail-right {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        20px
        0;
}


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

.product-detail-title {
    margin: 0;

    color: #111111;

    font-size: clamp(
        38px,
        4vw,
        58px
    );

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;
}


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

.product-detail-rating {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;
}


.product-detail-stars {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #ffb400;

    font-size: 20px;
}


.product-detail-rating > span {
    color: #687386;

    font-size: 17px;

    font-weight: 600;
}


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

.product-detail-description {
    margin-top: 30px;

    color: #4f5a68;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================
   SPECIFICATION BOX
========================================= */

.product-specification-box {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        24px
        45px;

    margin-top: 36px;

    padding:
        27px
        25px;

    border:
        1px solid
        #e1e5eb;

    border-radius: 17px;

    background: #fafbfc;
}


.product-specification-item {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.product-specification-item span {
    color: #778090;

    font-size: 16px;

    font-weight: 600;
}


.product-specification-item strong {
    color: #202732;

    font-size: 16px;

    font-weight: 700;
}


.spec-stock-green {
    color: #168c47 !important;
}


.spec-stock-red {
    color: #df4141 !important;
}


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

.product-detail-price-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 44px;
}


.product-detail-current-price {
    color: #2f6fb7;

    font-size: clamp(
        38px,
        4vw,
        55px
    );

    line-height: 1;

    font-weight: 800;
}


.product-detail-old-price {
    color: #9da4ae;

    font-size: 20px;

    font-weight: 500;
}


.product-detail-discount {
    min-height: 34px;

    padding:
        0
        14px;

    display: inline-flex;

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

    border-radius: 8px;

    background: #e3faf3;

    color: #279476;

    font-size: 13px;

    font-weight: 800;
}


/* =========================================
   STOCK
========================================= */

.product-detail-stock {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    font-size: 17px;

    font-weight: 600;
}


.product-detail-stock.in-stock {
    color: #24945c;
}


.product-detail-stock.out-stock {
    color: #df4040;
}


.product-detail-stock i {
    font-size: 15px;
}


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

.product-detail-actions {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 45px;
}


/* WISHLIST */

.product-detail-wishlist {
    flex:
        0
        0
        62px;

    width: 62px;
    height: 62px;

    padding: 0;

    display: flex;

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

    border:
        1px solid
        #efdcdc;

    border-radius: 16px;

    background: #fff5f5;

    color: #e84545;

    font-size: 23px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease;
}


.product-detail-wishlist:hover {
    transform: translateY(-2px);

    background: #ffeaea;
}


.product-detail-wishlist.active {
    background: #ffe8e8;

    color: #e13232;
}


/* CART */

.product-detail-cart {
    flex: 1;

    height: 62px;

    padding:
        0
        20px;

    display: flex;

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

    gap: 12px;

    border: none;

    border-radius: 16px;

    background: #eaf0f4;

    color: #263342;

    font-family: inherit;

    font-size: 19px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.2s ease;
}


.product-detail-cart:hover {
    background: #dfe9ef;

    transform: translateY(-2px);
}


.product-detail-cart.disabled {
    background: #e0e3e7;

    color: #999fa8;

    cursor: not-allowed;

    transform: none;
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {

    .product-detail-container {
        width:
            calc(100% - 60px);
    }


    .product-detail-card {
        gap: 35px;

        padding: 30px;
    }


    .product-detail-image-box {
        min-height: 520px;
    }

}


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

@media (max-width: 900px) {

    .product-detail-page {
        padding:
            45px
            0
            65px;
    }


    .product-detail-container {
        width:
            calc(100% - 36px);
    }


    .product-detail-card {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .product-detail-image-box {
        min-height: 500px;
    }


    .product-detail-right {
        padding:
            5px
            0;
    }

}


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

@media (max-width: 600px) {

    .product-detail-page {
        padding:
            20px
            0
            45px;
    }


    .product-detail-container {
        width:
            calc(100% - 20px);
    }


    .product-detail-card {
        gap: 23px;

        padding: 15px;

        border-radius: 21px;
    }


    .product-detail-image-box {
        min-height: 330px;

        border-radius: 17px;
    }


    .product-detail-image-box img {
        max-height: 330px;

        padding: 20px;
    }


    .product-detail-title {
        font-size: 29px;

        letter-spacing: -0.5px;
    }


    .product-detail-stars {
        font-size: 15px;
    }


    .product-detail-rating > span {
        font-size: 13px;
    }


    .product-detail-description {
        margin-top: 20px;

        font-size: 14px;
    }


    .product-specification-box {
        gap:
            16px
            12px;

        margin-top: 24px;

        padding:
            18px
            14px;
    }


    .product-specification-item {
        display: block;
    }


    .product-specification-item span,
    .product-specification-item strong {
        display: block;

        font-size: 12px;
    }


    .product-specification-item strong {
        margin-top: 4px;
    }


    .product-detail-price-row {
        gap: 9px;

        margin-top: 30px;
    }


    .product-detail-current-price {
        font-size: 34px;
    }


    .product-detail-old-price {
        font-size: 14px;
    }


    .product-detail-discount {
        min-height: 28px;

        padding:
            0
            9px;

        font-size: 10px;
    }


    .product-detail-stock {
        margin-top: 18px;

        font-size: 14px;
    }


    .product-detail-actions {
        gap: 9px;

        margin-top: 28px;
    }


    .product-detail-wishlist {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        border-radius: 12px;

        font-size: 19px;
    }


    .product-detail-cart {
        height: 52px;

        border-radius: 12px;

        font-size: 15px;
    }

}