/*=========================================
MITTIVAH PRODUCT PAGE
PART 1
==========================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,sans-serif;
background:#f6f7fb;
color:#222;
}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

.container{
max-width:1200px;
margin:auto;
padding:15px;
}

/*========================
HEADER
========================*/

.product-header{

background:#fff;

padding:15px;

position:sticky;

top:0;

z-index:999;

box-shadow:0 2px 12px rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:space-between;

}

.header-left{

display:flex;

align-items:center;

gap:15px;

}

.back-btn{

font-size:24px;

cursor:pointer;

}

.brand-logo{

height:45px;

}

.header-right{

display:flex;

gap:20px;

font-size:24px;

cursor:pointer;

}

/*========================
PRODUCT BOX
========================*/

.product-box{

background:#fff;

margin-top:20px;

border-radius:25px;

padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

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

.discount-badge{

position:absolute;

left:15px;

top:15px;

background:#1b8b2c;

color:#fff;

padding:10px 14px;

border-radius:12px;

font-weight:bold;

font-size:18px;

}

/*========================
IMAGE SECTION
========================*/

.product-gallery{

position:relative;

text-align:center;

}

.main-image{

width:100%;

max-width:420px;

margin:auto;

border-radius:20px;

transition:.3s;

cursor:pointer;

}

.main-image:hover{

transform:scale(1.03);

}

/*========================
ZOOM BUTTON
========================*/

.zoom-btn{

position:absolute;

right:10px;

bottom:100px;

background:#fff;

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 4px 20px rgba(0,0,0,.15);

font-size:22px;

cursor:pointer;

}

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

.thumb-row{

display:flex;

justify-content:center;

gap:12px;

margin-top:18px;

flex-wrap:wrap;

}

.thumb{

width:75px;

height:75px;

border-radius:15px;

overflow:hidden;

border:2px solid #ddd;

cursor:pointer;

transition:.3s;

background:#fff;

}

.thumb img{

width:100%;

height:100%;

object-fit:cover;

}

.thumb.active{

border:3px solid #1b8b2c;

}

.thumb:hover{

transform:translateY(-4px);

}

/*=========================================
PART 2
PRICE + RATING + BUTTONS
==========================================*/

/* Product Title */

.product-title{

font-size:34px;

font-weight:700;

line-height:1.3;

margin-top:25px;

color:#111;

}

/* Rating */

.rating-row{

display:flex;

align-items:center;

gap:15px;

margin-top:18px;

flex-wrap:wrap;

}

.rating-box{

background:#1b8b2c;

color:#fff;

padding:6px 12px;

border-radius:8px;

font-size:16px;

font-weight:bold;

}

.rating-text{

font-size:16px;

color:#555;

}

.genuine{

color:#1b8b2c;

font-weight:bold;

}

/* Price */

.price-row{

display:flex;

align-items:end;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}

.sale-price{

font-size:42px;

font-weight:700;

color:#111;

}

.mrp{

font-size:26px;

color:#888;

text-decoration:line-through;

}

.offer{

background:#1b8b2c;

color:#fff;

padding:6px 10px;

border-radius:8px;

font-weight:bold;

font-size:15px;

}

.tax{

margin-top:6px;

color:#666;

font-size:15px;

}

/* Delivery Cards */

.info-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

margin-top:25px;

}

.info-card{

background:#f7faf7;

border-radius:18px;

padding:18px;

text-align:center;

transition:.3s;

}

.info-card:hover{

transform:translateY(-4px);

box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.info-icon{

font-size:28px;

margin-bottom:8px;

}

.info-title{

font-size:14px;

font-weight:700;

}

.info-sub{

font-size:13px;

color:#666;

margin-top:5px;

}

/* Buttons */

.button-row{

display:flex;

gap:18px;

margin-top:28px;

}

.cart-btn,

.buy-btn{

flex:1;

height:62px;

border-radius:18px;

font-size:20px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.cart-btn{

background:#fff;

border:2px solid #1b8b2c;

color:#1b8b2c;

}

.buy-btn{

background:#1b8b2c;

border:none;

color:#fff;

}

.cart-btn:hover{

background:#1b8b2c;

color:#fff;

}

.buy-btn:hover{

background:#14691f;

}

/* WhatsApp */

.whatsapp-btn{

margin-top:18px;

background:#fff;

border:2px solid #25D366;

color:#25D366;

padding:16px;

border-radius:15px;

text-align:center;

font-size:18px;

font-weight:bold;

transition:.3s;

cursor:pointer;

}

.whatsapp-btn:hover{

background:#25D366;

color:#fff;

}

/* Mobile */

@media(max-width:768px){

.product-title{

font-size:28px;

}

.sale-price{

font-size:36px;

}

.info-grid{

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

}

.button-row{

flex-direction:column;

}

.cart-btn,

.buy-btn{

width:100%;

}

}

/*=========================================
PART 3
ACCORDION + REVIEWS
==========================================*/

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

.section-title{

font-size:28px;

font-weight:700;

margin:40px 0 20px;

color:#111;

}

/*========================
ACCORDION
========================*/

.accordion{

background:#fff;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.accordion-btn{

width:100%;

padding:20px 22px;

background:#fff;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.accordion-btn:hover{

background:#f8faf8;

}

.accordion-btn span{

font-size:26px;

color:#1b8b2c;

transition:.3s;

}

.accordion.active .accordion-btn span{

transform:rotate(45deg);

}

.accordion-content{

display:none;

padding:22px;

border-top:1px solid #eee;

background:#fcfcfc;

font-size:16px;

line-height:1.9;

color:#555;

}

.accordion.active .accordion-content{

display:block;

}

/*========================
REVIEW SLIDER
========================*/

.review-slider{

overflow:hidden;

margin-top:20px;

}

.review-track{

display:flex;

gap:20px;

width:max-content;

animation:reviewScroll 35s linear infinite;

}

.review-card{

width:300px;

background:#fff;

padding:22px;

border-radius:20px;

box-shadow:0 6px 20px rgba(0,0,0,.08);

flex-shrink:0;

}

.review-stars{

font-size:20px;

color:#ffb400;

margin-bottom:12px;

}

.review-text{

font-size:15px;

line-height:1.8;

color:#555;

margin-bottom:15px;

}

.review-user{

font-weight:700;

color:#111;

}

@keyframes reviewScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

/*========================
ADD REVIEW
========================*/

.review-form{

background:#fff;

padding:25px;

border-radius:20px;

margin-top:30px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.review-form h3{

margin-bottom:20px;

font-size:24px;

}

.review-form input,

.review-form textarea,

.review-form select{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:14px;

font-size:15px;

outline:none;

}

.review-form textarea{

height:130px;

resize:none;

}

.review-submit{

background:#1b8b2c;

color:#fff;

border:none;

padding:16px;

width:100%;

border-radius:14px;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.review-submit:hover{

background:#14691f;

}

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

@media(max-width:768px){

.section-title{

font-size:24px;

}

.review-card{

width:260px;

}

.accordion-btn{

font-size:16px;

padding:18px;

}

}

/*=========================================
PART 4
RELATED PRODUCTS + PANDA + STICKY BAR
==========================================*/

/*========================
RELATED PRODUCTS
========================*/

.related-section{
margin-top:45px;
}

.related-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.related-card{
background:#fff;
border-radius:20px;
padding:15px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:.3s;
cursor:pointer;
}

.related-card:hover{
transform:translateY(-5px);
}

.related-card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:15px;
}

.related-card h4{
margin-top:12px;
font-size:18px;
color:#222;
}

.related-price{
margin-top:8px;
font-size:22px;
font-weight:bold;
color:#1b8b2c;
}

.related-old{
font-size:16px;
text-decoration:line-through;
color:#888;
margin-left:8px;
}

/*========================
FLOATING PANDA
========================*/

.panda-box{
position:fixed;
left:15px;
bottom:95px;
z-index:999;
animation:pandaFloat 2.5s infinite ease-in-out;
}

.panda-box img{
width:95px;
}

.panda-text{
background:#fff;
padding:10px 14px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.15);
font-size:13px;
font-weight:700;
margin-bottom:8px;
text-align:center;
max-width:150px;
}

@keyframes pandaFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

/*========================
STICKY BUY BAR
========================*/

.sticky-buy{
position:fixed;
left:0;
bottom:0;
width:100%;
background:#fff;
padding:12px 15px;
box-shadow:0 -5px 18px rgba(0,0,0,.12);
display:flex;
gap:12px;
z-index:1000;
}

.sticky-buy .cart-btn,
.sticky-buy .buy-btn{
height:52px;
font-size:17px;
}

/*========================
OFFER BOX
========================*/

.offer-box{
background:#e8f8eb;
border-left:5px solid #1b8b2c;
padding:18px;
border-radius:18px;
margin:25px 0;
}

.offer-box h3{
font-size:20px;
margin-bottom:10px;
color:#1b8b2c;
}

.offer-box ul{
padding-left:20px;
}

.offer-box li{
margin:8px 0;
color:#444;
}

/*========================
IMAGE ZOOM POPUP
========================*/

.image-popup{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.88);
display:none;
justify-content:center;
align-items:center;
z-index:5000;
}

.image-popup img{
max-width:90%;
max-height:90%;
border-radius:18px;
}

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

@media(max-width:768px){

.related-grid{
grid-template-columns:1fr 1fr;
gap:15px;
}

.related-card img{
height:140px;
}

.panda-box img{
width:75px;
}

.panda-text{
font-size:11px;
max-width:120px;
}

.sticky-buy{
padding:10px;
}

}

@media(max-width:480px){

.related-card h4{
font-size:15px;
}

.related-price{
font-size:18px;
}

}
.offer-buttons{

display:flex;

gap:12px;

margin-top:18px;

}

.offer-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
margin-top:15px;
}

.offer-buttons a,
.offer-buttons button{
width:90%;
max-width:360px;
height:52px;
border:none;
border-radius:14px;
display:flex;
justify-content:center;
align-items:center;
font-size:16px;
font-weight:600;
text-decoration:none;
cursor:pointer;
}

.whatsapp-btn{
background:#25D366;
color:#fff;
}

.share-btn{
background:#1f7a3f;
color:#fff;
}

.offer-buttons{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
margin:18px 0 !important;
}

.offer-buttons a,
.offer-buttons button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:52px !important;

position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
transform:none !important;

margin:0 !important;
padding:0 !important;
}

.share-btn{
background:#1f7a3f;
color:#fff;
}