/* =========================================================
   SUPPLIER-SHOP3
   PRODUCT PAGE
   Desktop / Tablet / Mobile
========================================================= */


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

.product-page{
    width:min(1200px,92%);
    margin:50px auto;
    padding:0 10px;
}


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

.product-detail{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;

    padding:45px;

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

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

    border:1px solid rgba(255,255,255,.10);

    border-radius:35px;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

    transition:.3s ease;

    min-width:0;
}


.product-detail:hover{
    border-color:rgba(217,155,127,.15);

    box-shadow:
        0 30px 70px rgba(0,0,0,.40);
}


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

.product-image{
    width:100%;
    min-width:0;

    display:flex;

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

    background:rgba(0,0,0,.12);

    border-radius:28px;

    padding:20px;

    transition:.3s ease;

    overflow:hidden;
}


.product-image:hover{
    background:rgba(0,0,0,.18);
}


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

.product-image img{
    display:block;

    width:100%;

    max-width:450px;

    height:auto;

    max-height:450px;

    object-fit:contain;

    object-position:center;

    border-radius:24px;

    transition:
        transform .4s cubic-bezier(.34,1.56,.64,1);
}


.product-image:hover img{
    transform:scale(1.03);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info{
    width:100%;
    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
}


.product-info h1{
    color:#dae7ed;

    font-size:clamp(28px,3vw,38px);

    font-weight:800;

    margin:0 0 18px;

    line-height:1.5;

    letter-spacing:-.3px;

    overflow-wrap:anywhere;
}


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

.product-price{
    width:100%;

    color:#D99B7F;

    font-size:clamp(28px,3vw,34px);

    font-weight:800;

    margin:0 0 20px;

    padding:12px 0;

    border-top:1px solid rgba(217,155,127,.08);

    border-bottom:1px solid rgba(217,155,127,.08);

    overflow-wrap:anywhere;
}


.product-price .price{
    font-weight:800;
}


.product-price .old-price{
    color:#9eafb7;

    text-decoration:line-through;

    font-size:18px;

    font-weight:500;

    margin-left:10px;

    display:inline-block;
}


.product-price .discount-price{
    display:inline-block;

    color:#D99B7F;

    font-weight:900;
}


.product-price .discount-badge{
    display:inline-flex;

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

    background:linear-gradient(
        135deg,
        #A56F63,
        #D99B7F
    );

    color:#f5e9e5;

    font-size:13px;

    font-weight:700;

    padding:4px 14px;

    border-radius:50px;

    margin-right:10px;

    vertical-align:middle;

    white-space:nowrap;
}


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

.product-stock{
    color:#9eafb7;

    font-size:15px;

    font-weight:600;

    margin:0 0 20px;
}


.product-stock .in-stock{
    color:#6bcf97;

    display:inline-flex;

    align-items:center;

    gap:6px;
}


.product-stock .in-stock::before{
    content:"";

    display:inline-block;

    width:8px;
    height:8px;

    background:#6bcf97;

    border-radius:50%;

    animation:pulse-dot 1.5s ease-in-out infinite;
}


.product-stock .out-of-stock{
    color:#e8a7a7;
}


@keyframes pulse-dot{

    0%,
    100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.5;
        transform:scale(.8);
    }

}


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

.product-description{
    width:100%;

    color:#c5d0d6;

    font-size:16px;

    line-height:2;

    margin:0 0 30px;

    overflow-wrap:anywhere;

    word-break:break-word;
}


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

.product-quantity{
    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;
    max-width:100%;

    margin:0 0 25px;

    padding:6px 10px;

    background:rgba(7,28,38,.50);

    border:1px solid rgba(217,155,127,.08);

    border-radius:50px;

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

    box-shadow:
        0 4px 15px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.05);
}


.product-quantity form{
    display:flex;

    margin:0;
    padding:0;
}


.product-quantity button{
    all:unset;

    box-sizing:border-box;

    position:relative;

    width:32px;
    height:32px;

    display:flex;

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

    color:#dae7ed;

    background:rgba(217,155,127,.06);

    border:2px solid rgba(217,155,127,.12);

    border-radius:50%;

    font-size:0;

    line-height:1;

    cursor:pointer;

    transition:.3s cubic-bezier(.34,1.56,.64,1);
}


.product-quantity form:first-of-type button::before{
    content:"−";

    color:#D99B7F;

    font-size:22px;

    font-weight:300;
}


.product-quantity form:last-of-type button::before{
    content:"+";

    color:#D99B7F;

    font-size:22px;

    font-weight:300;
}


.product-quantity button:hover{
    background:
        linear-gradient(
            135deg,
            rgba(217,155,127,.20),
            rgba(165,111,99,.15)
        );

    border-color:#D99B7F;

    transform:translateY(-2px) scale(1.08);
}


.product-quantity button:active{
    transform:scale(.85);
}


.product-quantity button:focus-visible{
    outline:2px solid #D99B7F;

    outline-offset:3px;
}


.product-quantity span{
    min-width:44px;

    height:32px;

    display:flex;

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

    color:#dae7ed;

    font-size:18px;

    font-weight:700;

    line-height:32px;

    user-select:none;

    background:rgba(217,155,127,.04);

    border-radius:10px;

    padding:0 6px;
}


/* =========================================================
   ADD TO CART
========================================================= */

.add-cart-form{
    width:100%;
    max-width:100%;
}


.add-cart-btn{
    display:inline-flex;

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

    gap:10px;

    width:auto;
    max-width:100%;

    min-height:52px;

    padding:15px 40px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #A56F63,
            #D99B7F
        );

    color:#f5e9e5;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 30px rgba(165,111,99,.25);

    transition:
        .3s cubic-bezier(.34,1.56,.64,1);

    text-decoration:none;

    font-family:inherit;
}


.add-cart-btn:hover{
    transform:translateY(-4px) scale(1.02);

    box-shadow:
        0 18px 40px rgba(165,111,99,.35);

    filter:brightness(1.05);
}


.add-cart-btn:active{
    transform:scale(.96);
}


.add-cart-btn:focus-visible{
    outline:2px solid #D99B7F;

    outline-offset:4px;
}


.add-cart-btn:disabled{
    opacity:.55;

    cursor:not-allowed;

    transform:none;

    filter:none;
}


.add-cart-btn::before{
    content:"🛒";

    font-size:18px;
}


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

@media(max-width:992px){

    .product-page{
        width:94%;

        margin:35px auto;

        padding:0;
    }


    .product-detail{
        gap:30px;

        padding:35px;

        border-radius:30px;
    }


    .product-image{
        padding:18px;
    }


    .product-image img{
        max-width:380px;

        max-height:380px;
    }


    .product-info h1{
        font-size:30px;
    }


    .product-price{
        font-size:28px;
    }

}


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

@media(max-width:768px){

    .product-page{
        width:94%;

        margin:25px auto;

        padding:0;
    }


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

        gap:25px;

        padding:25px;

        border-radius:25px;
    }


    /* -----------------------------------------------
       تصویر
    ------------------------------------------------ */

    .product-image{
        width:100%;

        padding:15px;

        border-radius:20px;
    }


    .product-image img{
        width:100%;

        max-width:100%;

        height:auto;

        max-height:350px;

        object-fit:contain;

        border-radius:18px;
    }


    /* -----------------------------------------------
       اطلاعات
    ------------------------------------------------ */

    .product-info{
        width:100%;

        min-width:0;
    }


    .product-info h1{
        font-size:25px;

        line-height:1.6;

        margin-bottom:14px;

        text-align:right;
    }


    .product-price{
        font-size:24px;

        padding:10px 0;

        line-height:1.8;

        margin-bottom:18px;
    }


    .product-price .old-price{
        font-size:15px;

        margin-left:6px;
    }


    .product-price .discount-price{
        font-size:23px;
    }


    .product-price .discount-badge{
        font-size:11px;

        padding:3px 11px;

        margin-right:5px;
    }


    .product-description{
        font-size:15px;

        line-height:2;

        margin-bottom:22px;
    }


    /* -----------------------------------------------
       quantity
    ------------------------------------------------ */

    .product-quantity{
        gap:10px;

        padding:5px 8px;

        margin-bottom:20px;
    }


    .product-quantity button{
        width:30px;

        height:30px;
    }


    .product-quantity span{
        min-width:38px;

        height:30px;

        font-size:17px;

        line-height:30px;
    }


    /* -----------------------------------------------
       cart
    ------------------------------------------------ */

    .add-cart-form{
        width:100%;
    }


    .add-cart-btn{
        width:100%;

        min-height:50px;

        padding:14px 20px;

        font-size:15px;

        border-radius:15px;
    }

}


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

@media(max-width:480px){

    .product-page{
        width:94%;

        margin:20px auto;
    }


    .product-detail{
        padding:16px;

        gap:18px;

        border-radius:20px;
    }


    /* -----------------------------------------------
       تصویر محصول
    ------------------------------------------------ */

    .product-image{
        padding:10px;

        border-radius:17px;
    }


    .product-image img{
        width:100%;

        max-width:100%;

        height:auto;

        max-height:280px;

        object-fit:contain;

        border-radius:15px;
    }


    /* -----------------------------------------------
       عنوان
    ------------------------------------------------ */

    .product-info h1{
        font-size:21px;

        line-height:1.6;

        margin-bottom:12px;
    }


    /* -----------------------------------------------
       قیمت
    ------------------------------------------------ */

    .product-price{
        font-size:21px;

        padding:9px 0;

        margin-bottom:16px;
    }


    .product-price .old-price{
        display:block;

        margin:0 0 3px;

        font-size:14px;
    }


    .product-price .discount-price{
        font-size:21px;
    }


    .product-price .discount-badge{
        margin-right:5px;

        font-size:10px;

        padding:3px 9px;
    }


    /* -----------------------------------------------
       توضیحات
    ------------------------------------------------ */

    .product-description{
        font-size:14px;

        line-height:1.9;

        margin-bottom:20px;
    }


    /* -----------------------------------------------
       quantity
    ------------------------------------------------ */

    .product-quantity{
        gap:8px;

        padding:4px 6px;
    }


    .product-quantity button{
        width:28px;

        height:28px;

        border-width:1.5px;
    }


    .product-quantity form:first-of-type button::before,
    .product-quantity form:last-of-type button::before{
        font-size:18px;
    }


    .product-quantity span{
        min-width:34px;

        height:28px;

        font-size:16px;

        line-height:28px;
    }


    /* -----------------------------------------------
       دکمه
    ------------------------------------------------ */

    .add-cart-btn{
        width:100%;

        min-height:48px;

        padding:13px 16px;

        font-size:14px;

        border-radius:14px;
    }


    .add-cart-btn::before{
        font-size:16px;
    }

}


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

@media(max-width:360px){

    .product-page{
        width:95%;

        margin:15px auto;
    }


    .product-detail{
        padding:12px;

        gap:15px;

        border-radius:18px;
    }


    .product-image{
        padding:7px;

        border-radius:15px;
    }


    .product-image img{
        max-height:230px;
    }


    .product-info h1{
        font-size:19px;
    }


    .product-price{
        font-size:19px;
    }


    .product-price .discount-price{
        font-size:19px;
    }


    .product-description{
        font-size:13px;

        line-height:1.8;
    }


    .add-cart-btn{
        min-height:46px;

        font-size:13px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media(hover:none) and (max-width:768px){

    .product-detail:hover{
        border-color:rgba(255,255,255,.10);

        box-shadow:
            0 25px 60px rgba(0,0,0,.35);
    }


    .product-image:hover{
        background:rgba(0,0,0,.12);
    }


    .product-image:hover img{
        transform:none;
    }


    .add-cart-btn:hover{
        transform:none;

        filter:none;

        box-shadow:
            0 10px 30px rgba(165,111,99,.25);
    }


    .product-quantity button:hover{
        transform:none;
    }


    .add-cart-btn:active{
        transform:scale(.97);

        background:
            linear-gradient(
                135deg,
                #A56F63,
                #D99B7F
            );
    }

}


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

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

    .product-detail,
    .product-image,
    .product-image img,
    .product-quantity button,
    .add-cart-btn,
    .product-stock .in-stock::before{
        transition:none !important;

        animation:none !important;
    }


    .product-image:hover img{
        transform:none !important;
    }


    .product-quantity button:hover,
    .add-cart-btn:hover{
        transform:none !important;
    }

}