.design-product-wrapper{
    max-width:1200px;
    margin:30px auto;
    display:flex;
    gap:30px;
    
    margin-top:130px;
	padding-left:0 !important;
    padding-right:0 !important;
	


}



/* RIGHT */
.right{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    
    background:#fff7f2;   /* 🔥 sandal background */
    padding:25px;
    border-radius:16px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border:1px solid #f1e3d8;

    margin-top:20px;
}


.section-title{
    font-size:20px !important;
    font-weight:600;
    margin-bottom:10px;
	margin-top:-10px;
    color:#333;
}




/* LEFT SIDE IMPROVE */
.left{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:40%;

}


.right{
    width:60% !important;
    flex:none !important;
}




/* PLAN BUTTONS FIX */
.plan-buttons{
    display:flex;
    gap:12px;
    margin-bottom:15px;
}

.plan-btn{
    padding:8px 20px;
    border-radius:22px;
    border:1px solid #e5e5e5;
    background:#fff;
    cursor:pointer;
    font-size:17px;
    transition:all 0.25s ease;
}

/* hover */
.plan-btn:hover{
    border-color:#f15a00;
    color:#f15a00;
    transform:translateY(-1px); /* 🔥 subtle lift */
}

.plan-btn.active{
    background:linear-gradient(135deg,#ff7a1a,#f15a00);
    color:#fff;
    border:none;
}


.plan-popup{
    background: linear-gradient(145deg, #fffaf6, #fff1e8);
    border-radius:14px;
    padding:18px;
    margin-top:0px;
    margin-bottom:20px;

    box-shadow:0 12px 30px rgba(241,90,0,0.08);

    border:1px solid #f5d8c5;
	color:#444;   /* 🔥 darker */
	position:relative;
	overflow:hidden;



}


.plan-popup::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        rgba(255,255,255,0.5) 0%,
        rgba(255,255,255,0.2) 40%,
        transparent 80%
    );

    border-radius:14px;
    pointer-events:none;
}





.section-title + .side-buttons{
    margin-top:6px;
}

.plan-popup h4{
    font-size:17px;
    margin-bottom:8px;
    color:#222;
}

.plan-popup ul{
    padding-left:18px;
    margin:0;
	margin-bottom:-20px !important;
}

.plan-popup li{
    font-size:14px;
	font-weight:500;
    margin-bottom:6px;
	
    color:#555;
}



/* SIDE BUTTONS FIX */
.side-buttons{
    display:flex;
    gap:12px;
    margin-top:8px;
    margin-bottom:10px;
}


.price-qty-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:1px;
}



.side-btn{
    padding:8px 18px;
    border-radius:25px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    transition:0.3s;
}

.side-btn:hover{
    border-color:#f15a00;
    color:#f15a00;
}

.side-btn.active{
    background:#f15a00;
    color:#fff;
    border:none;
	font-size:17px;
	
}










/* =========================
   TABS UI PREMIUM
========================= */

.tabs{
    display:flex;
    gap:30px;
    border-bottom:1px solid #e5e5e5;
    margin-top:20px;
}

/* NORMAL TAB */
.tab{
    position:relative;
    padding:12px 0;
    font-size:16px;
    font-weight:500;
    color:#666;
    cursor:pointer;
    transition:0.3s;
}

/* HOVER */
.tab:hover{
    color:#f15a00;
}

/* ACTIVE TAB */
.tab.active{
    color:#f15a00;
    font-weight:600;
}

/* 🔥 UNDERLINE EFFECT */
.tab.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,#ff7a1a,#f15a00);
    border-radius:3px;
}

/* =========================
   TAB CONTENT
========================= */

.tab-content{
    display:none;
    padding:20px 22px;
    margin-top:12px;

    background:#fff;

    border:1px solid #eee;
    border-radius:12px;

    /* 🔥 premium soft shadow */
    box-shadow:0 6px 18px rgba(0,0,0,0.05);

    transition:0.3s ease;
}

.tab-content.active{
    display:block;
}






.design-product-wrapper,
.tabs-container{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}


/* TITLE */
.product-title{
    font-size:30px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:8px;
    color:#222;
	margin-top:20px !important;
}

/* TAGLINE */
.desc{
    font-size:15px;
    color:#777;
    margin-bottom:-25px !important;
    margin-top:-8px !important;
}

/* RATING ROW */
.rating-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:5px;
	flex-wrap:wrap;
}

.stars{
    color:#ffb400;
    font-size:28px;
}

.rating-text{
    font-size:16px;
    color:#444;
    font-weight:500;
}

/* 🔥 PRICE UI IMPROVE */
.price-box{
    margin-bottom:15px;
	display:flex;
    align-items:center;
    gap:10px;

}



.price-box #originalPrice{
    font-size:15px;
    color:#999;
}

.price-box #discountedPrice{
    font-size:30px;
    font-weight:700;
    color:#f15a00;
}

/* 🔥 ORIGINAL PRICE STRIKE */
#originalPrice{
    text-decoration: line-through;
    color:#999;
    font-size:1px;
}




/* 🔥 IMAGE PERFECT SQUARE */
.image-box{
    width:100%;
    aspect-ratio:1/1;
    max-width:420px;   /* 🔥 bigger */
    background:#fff3eb;   /* 🔥 main fix */
    border-radius:18px;
    
    margin-top:-5px;

    /* 🔥 PREMIUM SHADOW */
        box-shadow:0 8px 25px rgba(0,0,0,0.05);
    padding:14px;
    transition:0.3s;
	 
	
	 margin-left:0px !important; 
	 
	  position: relative;
	  z-index: 1;
	   overflow: visible;  

}



.image-box::before{
    content: "";
    position: absolute;

    top: -25px;
    left: -25px;
    right: -25px;
    bottom: -25px;

    background: linear-gradient(145deg, #fff4ec, #ffe9dc);

    border-radius: 30px;

    z-index: 0;

    box-shadow: 
        0 25px 50px rgba(241,90,0,0.10);
}


/* 🔥 HOVER EFFECT (premium feel) */
.image-box:hover{
    transform:translateY(-5px);
}

.image-box:hover img{
    filter: brightness(1.08) contrast(1.08);
}

.image-box img{
    width:100%;
    height:100%;
    object-fit:contain;  /* 🔥 clean fit */
    border-radius:8px;
	  filter: brightness(1.05) contrast(1.05);
	   background:#fff;
	   position: relative;
	       z-index: 2;

}

.add-cart{
    margin-top:5px;
    padding:14px;
    border:none;
    border-radius:30px;
    background:linear-gradient(135deg,#ff7a1a,#f15a00);
    color:#fff;
    font-weight:700;
    letter-spacing:0.8px;   /* 🔥 strong CTA */
    transition:0.3s;
    width:100%;   /* 🔥 full width */
}

.add-cart:hover{
    background:linear-gradient(135deg,#f15a00,#d84300);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}



/* =========================
   REVIEW CARD UI
========================= */

.review-card{
    background:#fffaf6;
    border:1px solid #ffe3d3;
    border-radius:12px;
    padding:15px 18px;
    margin-bottom:12px;

    box-shadow:0 6px 15px rgba(0,0,0,0.04);
    transition:0.3s;
}

.review-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* HEADER */
.review-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.review-name{
    font-weight:600;
    font-size:15px;
    color:#222;
}

.review-date{
    font-size:13px;
    color:#888;
}

/* STARS */
.review-stars{
    color:#ffb400;
    font-size:16px;
    margin-bottom:6px;
}

/* TEXT */
.review-text{
    font-size:16px;
    color:#444;
    line-height:1.5;
}

/* EMPTY */
.no-reviews{
    padding:15px;
    text-align:center;
    color:#777;
    font-size:14px;
}

.productGallery{
    width:100%;
    display:block; 
	 position: relative;
	     z-index: 2;

    
}

.productGallery .swiper-slide{
    display:flex;
    justify-content:flex-start !important;  /* 🔥 FIX */
    align-items:center;
    width:100%;
    height:100%;
}


.productGallery .swiper-wrapper{
    display:flex;
    align-items:center;
}



.productGallery img{
    width:100%;
    height:100%;
    object-fit:contain;   /* 🔥 change back (cover → contain) */
    border-radius:10px;
	display:block;   /* 🔥 IMPORTANT */
    margin:0;        /* 🔥 reset */
}


.swiper-button-next,
.swiper-button-prev{
    width:28px;
    height:28px;

    background:rgba(255,255,255,0.7);
    border-radius:50%;

    color:#f15a00;
    font-size:12px;

    opacity:0;   /* 🔥 hide default */

    transition:0.3s;
}

/* 🔥 SHOW ONLY ON HOVER */
.image-box:hover .swiper-button-next,
.image-box:hover .swiper-button-prev{
    opacity:1;
}

/* 🔥 ICON SIZE */
.swiper-button-next::after,
.swiper-button-prev::after{
    font-size:12px;
    font-weight:bold;
}



.swiper-pagination-bullet{
    background:#ccc;
    opacity:1;
}

.swiper-pagination-bullet-active{
    background:#f15a00;
}




/* 🔥 QUANTITY FULL FIX */
.quantity{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    font-weight:600;
}

/* 🔥 BOX */
.qty-box{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
	margin-bottom:10px;
	margin-top:5px;

}

/* 🔥 INPUT CENTER */
.qty-box input{
    width:50px;
    height:38px;
    text-align:center;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:16px;
    font-weight:600;
    outline:none;
}

/* 🔥 BUTTON BASE */
.qty-btn{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:#f15a00;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;

    /* 🔥 IMPORTANT */
    opacity:1 !important;   /* always visible */
    visibility:visible !important;
}

/* 🔥 REMOVE HOVER DEPENDENCY */
.qty-btn:hover{
    background:#d84300;
}






/* =========================================
   📱 MOBILE RESPONSIVE (FULL FIX)
========================================= */
@media (max-width: 768px){








    /* 🔥 WRAPPER STACK */
    .design-product-wrapper{
        flex-direction: column;
        margin-top: 90px;
        gap: 20px;
        padding: 0 12px !important;
		padding-left: 22px !important;
        padding-right: 22px !important;
		
    }
	.rating-row {

	margin-bottom: 8px;
	margin-top: -10px;

	 }


    /* 🔥 LEFT & RIGHT FULL WIDTH */
    .left,
    .right{
        width: 100% !important;
        flex: unset !important;
		

    }

    /* 🔥 TITLE */
    .product-title{
        font-size: 30px;
        margin-top: -40px !important;
    }

    /* 🔥 DESC */
    .desc{
        font-size: 15px;
        margin-bottom: -10px !important;
    }

    /* 🔥 RATING */
    .stars{
        font-size: 22px;
    }

    .rating-text{
        font-size: 14px;
    }

    /* 🔥 IMAGE FIX */
    .image-box{
        max-width: 100%;
        border-radius: 16px;
        padding: 10px;
    }

    /* 🔥 REMOVE BIG BACKGROUND SHAPE (optional clean) */
    .image-box::before{
        display: none;
    }

    /* 🔥 PLAN BUTTONS SCROLL */
    .plan-buttons{
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }

    .plan-btn{
        flex: 0 0 auto;
       font-size: 19px !important;
        padding: 6px 14px;
    }
	
	
	

    /* 🔥 PLAN BOX */
    .plan-popup{
        padding: 14px;
         font-size: 50px !important;
		margin-bottom: 22px;
    }

    .plan-popup h4{
        font-size: 15px;
    }

    .plan-popup li{
        font-size: 15px;
		font-weight:600;
    }

    /* 🔥 SIDE BUTTONS */
    .side-buttons{
        flex-wrap: wrap;
        gap: 15px;
    }

    .side-btn{
        font-size: 18px;
        padding: 6px 12px;
		margin-bottom: 20px;
		
    }
	
	
.price-qty-row{
        flex-direction: column !important;   /* 🔥 MAIN FIX */
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Quantity full width */
    .quantity{
        width: 100%;
        display: flex;
        gap: 30px;
        align-items: center;
		font-size: 20px !important;
		
		margin-bottom: 20px;
		margin-top: -10px;	
		

    }

    

	.discountedPrice{
			
			color:#f15a00;
		margin-left: 110px !important;
		}


.price-box
{
		font-size:1px !important;
		font-weight:900;
		margin-left: 100px !important;

}
 


    /* 🔥 BUTTON */
    .add-cart{
        padding: 12px;
        font-size: 16px;
    }

    /* 🔥 TABS SCROLL */
    .tabs{
        overflow-x: auto;
        gap: 20px;
		
		margin-top: -20px !important;
		
		
		
    }
	
	.tab.active {
   
    font-weight: 600;
	font-size: 16px !important;
	}

    .tab{
        flex: 0 0 auto;
        font-size: 16px;
    }

    /* 🔥 TAB CONTENT */
    .tab-content{
        padding: 15px;
		margin-bottom: -25px;
		margin-top: 25px;
    }
	
	
	 /* 🔥 FIX TABS SECTION WRAPPER */
    .tabs-container{
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    
}