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

.product-detail{

    padding:120px 0;

    background:var(--background-color);

}

.product-grid{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:80px;

    align-items:start;

}

.product-image{

    background:var(--card-bg);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

    aspect-ratio:4/5;

    overflow:hidden;

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

    padding:40px;

}

.product-image img{

    width:85%;
    height:85%;

    object-fit:contain;

    margin:auto;

}

.product-info h1{

    font-size:3rem;

    color:var(--heading-color);

    margin-bottom:20px;

}

.price{

    display:block;

    font-size:2rem;

    color:var(--secondary-color);

    font-weight:700;

    margin-bottom:40px;

}

.quantity{

    margin-bottom:35px;

}

.quantity label{

    display:block;

    margin-bottom:15px;

    font-weight:600;

}

.quantity-box{

    display:flex;

    align-items:center;

    width:180px;

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

    border-radius:50px;

    overflow:hidden;

}

.qty-btn{

    width:55px;

    height:55px;

    background:transparent;

    cursor:pointer;

    color:var(--text-color);

    font-size:1.3rem;

}

.quantity-box input{

    width:70px;

    text-align:center;

    background:transparent;

    color:var(--text-color);

    font-size:1rem;

}

.add-cart{

    width:100%;

    margin-bottom:15px;

}

.buy-now{

    width:100%;

    margin-bottom:40px;

}

.description{

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

    padding-top:30px;

}

.description h3{

    margin-bottom:15px;

    color:var(--heading-color);

}

.description p{

    line-height:1.9;

}

@media(max-width:900px){

.product-grid{

    grid-template-columns:1fr;
    gap:35px;

}

.product-image{

    aspect-ratio:4/5;
    padding:20px;
    max-width:450px;
    margin:0 auto;

}

.product-image img{

    width:100%;
    height:100%;
    object-fit:contain;

}

.product-info{

    text-align:left;

}

.product-info h1{

    font-size:2rem;
    margin-bottom:15px;

}

.price{

    font-size:1.6rem;
    margin-bottom:30px;

}

.quantity{

    margin-bottom:25px;

}

.quantity-box{

    width:160px;

}

.add-cart,
.buy-now{

    width:100%;

}

}

.stock{

    margin:15px 0;

    font-weight:600;

}

.in-stock{

    color:#2e7d32;

}

.out-stock{

    color:#d32f2f;

}

.btn-disabled{

    width:100%;

    background:#999;

    color:#fff;

    cursor:not-allowed;

    opacity:.7;

}

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

.product-gallery{

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.main-image-wrapper{

    position:relative;

    flex:1;

}

#main-product-image{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:18px;

    transition:.35s;

}

.gallery-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

    z-index:10;

}

.gallery-btn:hover{

    background:var(--secondary-color);

}

#prev-image{

    left:15px;

}

#next-image{

    right:15px;

}

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

.product-image-slider{

    position:relative;

    width:100%;

    height:400px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--card-bg);

    border-radius:20px;

    overflow:hidden;

}

#product-main-image{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.35s ease;

}

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:26px;

    cursor:pointer;

    z-index:20;

    transition:.3s;
}

.slider-btn:hover{

    background:var(--secondary-color);

}

.prev-btn{

    left:20px;

}

.next-btn{

    right:20px;

}

.gallery-image{

    display:none;
}