/* ===== product_details.css ===== */

.product-page{

max-width:520px;

margin:auto;

padding:15px;

}



/* product_details.css file mein ye update karein */
/* Yeh hai aapka main container jo image slide ko hold kar raha hai */
.pd-slider-wrap {
    width: 220px;         /* Yahan aap 250px ya 200px karke check karein */
    margin: 0 auto;       /* Slider ko center mein rakhne ke liye */
    overflow: hidden;     /* Yeh bahar nikal rahi images ko chupa dega */
}

/* Slider ka wrapper jisme display flex hai */
.pd-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Har image ke liye styling */
.pd-slide {
    width: 220px;         /* Container ki width ke barabar rakhein */
    flex-shrink: 0;
    height: 190px;
    object-fit: contain;  /* Image box se bahar nahi jayegi */
    padding: 8px;
    border-radius: 14px;
    background: #fff;
}

/* PRODUCT NAME */

.product-page h1{

font-size:28px;

font-weight:700;

line-height:1.3;

margin:8px 0;

color:#111;

}



/* PRICE */

#price{

font-size:32px;

font-weight:800;

color:#16a34a;

margin-bottom:14px;

}



/* DETAILS */

.product-page div{

font-size:15px;

line-height:1.7;

color:#444;

}


.product-page b{

font-weight:600;

color:#111;

}



/* VARIANT TITLE */

.product-page h3{

margin-top:20px;

margin-bottom:10px;

font-size:18px;

}



/* VARIANT BUTTON */

.variant-btn{

border:none;

background:#f3f3f3;

padding:10px 14px;

border-radius:40px;

margin:4px;

cursor:pointer;

font-size:14px;

font-weight:600;

transition:.2s;

}


.variant-btn:hover{

background:#16a34a;

color:white;

}


.variant-btn.active{

background:#16a34a;

color:white;

}



/* VARIANT DETAILS CARD */

#variantDetails{

background:#fff;

padding:15px;

margin-top:15px;

border-radius:12px;

box-shadow:
0 3px 10px rgba(0,0,0,.05);

}



/* ADD CART */

.add-cart{

display:block;

width:100%;

padding:15px;

margin-top:22px;

text-align:center;

background:#16a34a;

color:white;

font-size:17px;

font-weight:700;

border-radius:12px;

text-decoration:none;

}


.add-cart:hover{

background:#0f8a38;

}



/* BACK BUTTON */

.back-btn{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 16px;

background:#fff;

border-radius:50px;

text-decoration:none;

font-size:15px;

font-weight:600;

color:#111;

box-shadow:
0 2px 10px rgba(0,0,0,.08);

transition:.2s;

margin-bottom:20px;

}


.back-btn:hover{

background:#16a34a;

color:#fff;

transform:translateY(-2px);

}



/* ===== MOBILE ===== */

@media(max-width:600px){

.product-page{

padding:12px;

}

.pd-slider-wrap{

max-width:170px;
height:170px;

}

.product-page h1{

font-size:24px;

}

#price{

font-size:28px;

}

}



/* ===== TABLET ===== */

@media(min-width:768px){

.product-page{

max-width:620px;

}

.pd-slider-wrap{

max-width:210px;
height:210px;

}

}



/* ===== DESKTOP ===== */

@media(min-width:1200px){

.product-page{

max-width:700px;

}

.pd-slider-wrap{

max-width:220px;
height:220px;

}

}