:root{
--primary:#ee7d01;
--secondary:#ff1e1e;
--dark:#050505;
--glass:rgba(255,255,255,0.08);
--text:#ffffff;
}

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

body{
	font-family:Arial,sans-serif;
	background:#000 url('../images/site-bg.jpg') no-repeat center center fixed !important;
	background-size: cover !important;
	background-attachment: fixed;
	color:#fff;
	overflow-x:hidden;
	padding-top:40px;
}

body::after{
	content:'';
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.35);
	backdrop-filter:blur(8px);
	z-index:-1;
	pointer-events:none;
}

.hero-slider{
margin-top:-90px;
}

/* body::before removed to show background image */

.header{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(20px);
z-index:1000;
}

.logo img{
height:105px;
}

.nav{
display:flex;
gap:30px;
}

.nav a{
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.nav a:hover{
color:var(--primary);
}

.whatsapp-btn{
background:linear-gradient(45deg,var(--primary),var(--secondary));
padding:14px 22px;
border-radius:50px;
text-decoration:none;
color:white;
font-weight:bold;
box-shadow:0 0 25px rgba(255,90,31,.5);
}

.hero-slider{
height:100vh;
position:relative;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
top:0;
left:0;
height:100%;
background-size:cover;
background-position:center;
opacity:0;
transition:1s ease;
}

.slide.active{
opacity:1;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}

.hero-content{
position:absolute;
top:50%;
left:8%;
transform:translateY(-50%);
max-width:600px;
z-index:2;
}

.hero-content h1,
.hero-content h2{
font-size:68px;
margin-bottom:20px;
line-height:1.1;
}

.hero-content p{
font-size:22px;
margin-bottom:30px;
opacity:.9;
}

.cta-btn{
display:inline-block;
padding:18px 36px;
background:linear-gradient(45deg,var(--primary),var(--secondary));
border-radius:60px;
color:white;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.cta-btn:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 15px 40px rgba(255,90,31,.4);
}

.categories,
.best-sellers,
.benefits,
.faq{
padding:40px 8%;
}

.categories h2,
.best-sellers h2,
.benefits h2,
.faq h2{
font-size:48px;
margin-bottom:50px;
}

.category-grid,
.products-grid,
.benefits-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.category-card,
.product-card,
.benefit{
background:var(--glass);
border:1px solid #ee7d01;
backdrop-filter:blur(20px);
padding:30px;
border-radius:28px;
transition:.4s;
}

.category-card:hover,
.product-card:hover,
.benefit:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(255,90,31,.15);
}

.product-card img{
width:100%;
height:400px;
object-fit:cover;
border-radius:20px;
margin-bottom:20px;
}

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

.price-row button{
background:var(--primary);
border:none;
padding:12px 18px;
border-radius:14px;
color:white;
cursor:pointer;
font-weight:bold;
}

	.floating-cart{
	position:fixed;
	right:25px;
	bottom:25px;
	width:70px;
	height:70px;
	border-radius:50%;
	background:linear-gradient(45deg,var(--primary),var(--secondary));
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:28px;
	cursor:pointer;
	z-index:999;
	box-shadow:0 0 30px rgba(255,90,31,.5);
	}

	body.checkout-page .floating-cart {
		display: none !important;
	}

#cart-count{
position:absolute;
top:-5px;
right:-5px;
background:white;
color:black;
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:13px;
font-weight:bold;
}

.footer{
padding:80px 8%;
background:#050505;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
border-top:1px solid rgba(255,255,255,.08);
}

@media(max-width:768px){

.nav{
display:none;
}

.hero-content h1,
.hero-content h2{
font-size:42px;
}

.categories,
.best-sellers,
.benefits,
.faq{
padding:40px 20px;
}

}

.toast{
position:fixed;
bottom:110px;
right:25px;
background:rgba(15,15,15,.95);
border:1px solid rgba(255,90,31,.3);
backdrop-filter:blur(20px);
padding:18px 22px;
border-radius:18px;
color:white;
z-index:99999;
transform:translateY(40px);
opacity:0;
transition:.35s ease;
box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.toast.show{
transform:translateY(0);
opacity:1;
}

.toast-content{
display:flex;
align-items:center;
gap:12px;
}

.toast-content span{
font-size:24px;
}

.cart-bounce{
animation:cartBounce .5s ease;
}

@keyframes cartBounce{

0%{
transform:scale(1);
}

50%{
transform:scale(1.18);
}

100%{
transform:scale(1);
}

}

.floating-cart{
position:fixed;
right:25px;
bottom:25px;
width:72px;
height:72px;
border-radius:50%;
background:linear-gradient(135deg,#ee7d01,#ff1e1e);
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
cursor:pointer;
z-index:9999;
box-shadow:
0 10px 40px rgba(255,90,31,.45),
0 0 0 8px rgba(255,90,31,.08);
transition:.3s ease;
}

.floating-cart:hover{
transform:translateY(-5px) scale(1.05);
}

#cart-count{
position:absolute;
top:-4px;
right:-4px;
width:28px;
height:28px;
background:white;
color:black;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:13px;
font-weight:700;
}


/* FLYING BURGER */

.flying-product{
position:fixed;
width:80px;
height:80px;
border-radius:50%;
pointer-events:none;
z-index:100000;
transition:
transform .9s cubic-bezier(.22,1,.36,1),
opacity .9s ease;
box-shadow:
0 20px 40px rgba(0,0,0,.4);
}

/* GLASS CHECKOUT */

.checkout-glass{
background:rgba(255,255,255,.05);
backdrop-filter:blur(30px);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:35px;
box-shadow:
0 20px 60px rgba(0,0,0,.35);
}


/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}

.hamburger span{
width:28px;
height:3px;
background:white;
border-radius:20px;
transition:.3s ease;
}

/* FAQ */

.faq-item{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
margin-bottom:18px;
overflow:hidden;
backdrop-filter:blur(20px);
}

.faq-question{
width:100%;
background:none;
border:none;
padding:24px;
color:#222;
font-size:18px;
font-weight:700;
text-align:left;
cursor:pointer;
}

.faq-answer{
max-height:0;
overflow:hidden;
padding:0 24px;
opacity:0;
transition:.4s ease;
}

.faq-item.active .faq-answer{
max-height:200px;
padding:0 24px 24px;
opacity:1;
}

/* SCROLL ANIMATIONS */

.product-card,
.category-card,
.benefit{
opacity:0;
transform:translateY(40px);
transition:
opacity .7s ease,
transform .7s ease;
}

.show-animation{
opacity:1 !important;
transform:translateY(0) !important;
}

/* MOBILE */

@media(max-width:768px){

.hamburger{
display:flex;
}

}

.menu-page{
padding:
140px 8%
120px;
}

.menu-hero{
margin-bottom:50px;
}

.menu-hero h1{
font-size:64px;
margin-bottom:20px;
}

.menu-hero p{
font-size:22px;
opacity:.8;
max-width:800px;
line-height:1.6;
}

#searchInput{
	width:100%;
	padding:16px 20px;
	margin-bottom:30px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:16px;
	color:white;
	font-size:16px;
	outline:none;
	transition:0.3s ease;
}

#searchInput::placeholder{
	color:rgba(255,255,255,0.6);
}

#searchInput:focus{
	background:rgba(255,255,255,0.12);
	border-color:rgba(255,90,31,0.4);
	box-shadow:0 0 20px rgba(255,90,31,0.2);
}

.menu-filters{
	display:flex;
	gap:14px;
	flex-wrap:wrap;
	margin-bottom:50px;
	position:sticky;
	top:90px;
	z-index:100;
	padding:15px 0;
	backdrop-filter:blur(20px);
}

.filter-btn{
height:52px;
padding:0 24px;
border:none;
border-radius:50px;
background:rgba(255,255,255,.06);
color:white;
cursor:pointer;
font-weight:700;
transition:.3s ease;
}

.filter-btn.active,
.filter-btn:hover{
background:
linear-gradient(
135deg,
#ee7d01,
#ff1e1e
);
}

@media(max-width:768px){

.menu-page{
padding:
120px 20px
100px;
}

.menu-hero h1{
font-size:42px;
}

.menu-hero p{
font-size:18px;
}

.menu-filters{
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:10px;
}

}

.fly-item{
position:fixed;
width:60px;
height:60px;
border-radius:50%;
z-index:99999;
transition:all .8s cubic-bezier(.22,1,.36,1);
pointer-events:none;
}

.badge{
position:absolute;
top:10px;
left:10px;
background:orange;
padding:5px 10px;
border-radius:20px;
font-size:12px;
}

/* =========================
GLOBAL LAYOUT FIXES
========================= */

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

/* body override removed to prevent background conflict */

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

section{
width:100%;
}

h1,h2,h3{
line-height:1.2;
}

h2{
font-size:42px;
margin-bottom:20px;
}

p{
font-size:18px;
color:rgba(255,255,255,0.85);
max-width:900px;
}

/* =========================
BUTTONS
========================= */

.cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:999px;
background:linear-gradient(45deg,#ee7d01,#ff1e1e);
color:#fff;
text-decoration:none;
font-weight:700;
transition:.3s ease;
box-shadow:0 10px 30px rgba(255,80,30,.25);
}

.cta-btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(255,80,30,.4);
}

.cta-btn.secondary{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.1);
}

/* =========================
HERO SECTION
========================= */

.about-hero{
	min-height:80vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:120px 20px 100px;
	position:relative;
	overflow:hidden;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(5px);
	}

.about-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg,
rgba(255,0,0,.08),
transparent 20%,
transparent 80%,
rgba(255,90,31,.08));
pointer-events:none;
}

.about-hero-content{
max-width:900px;
position:relative;
z-index:2;
}

.about-hero h1{
font-size:clamp(52px,8vw,96px);
font-weight:800;
margin-bottom:20px;
letter-spacing:-2px;
}

.slogan{
font-size:clamp(20px,2vw,28px);
opacity:.9;
margin-bottom:40px;
}

.hero-buttons{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

/* =========================
CONTENT SECTIONS
========================= */

.about-section,
.about-grid,
.about-values,
.about-cta{
padding:110px 10%;
position:relative;
}

.about-section::before,
.about-grid::before,
.about-values::before,
.about-cta::before{
content:"";
position:absolute;
left:0;
top:0;
width:280px;
height:100%;
background:linear-gradient(to right,rgba(140,0,0,.35),transparent);
pointer-events:none;
}

.about-section.dark{
background:rgba(255,255,255,0.03);
backdrop-filter:blur(4px);
}

.about-section h2,
.about-grid h2,
.about-values h2,
.about-cta h2{
margin-bottom:24px;
}

/* =========================
GRID FIX
========================= */

.about-grid .grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
margin-top:40px;
}

.about-grid .card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
padding:28px 24px;
border-radius:22px;
transition:.3s ease;
min-height:120px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:600;
backdrop-filter:blur(10px);
}

.about-grid .card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,0.08);
box-shadow:0 20px 40px rgba(0,0,0,.35);
}

/* =========================
MENU LIST
========================= */

.about-list{
list-style:none;
padding-left:0;
margin-top:30px;
max-width:900px;
}

.about-list li{
padding:20px 0;
border-bottom:1px solid rgba(255,255,255,0.08);
font-size:20px;
transition:.3s ease;
}

.about-list li:hover{
padding-left:10px;
color:#ee7d01;
}

/* =========================
VALUES SECTION
========================= */

.about-values .values{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:35px;
margin-bottom:24px;
}

.about-values span{
background:linear-gradient(45deg,#ee7d01,#ff1e1e);
padding:14px 22px;
border-radius:999px;
font-weight:700;
font-size:16px;
box-shadow:0 8px 20px rgba(255,80,30,.2);
}

.tagline{
font-size:24px;
font-weight:700;
margin-top:20px;
}

/* =========================
CTA SECTION
========================= */

.about-cta{
text-align:center;
padding-bottom:140px;
}

.about-cta h2{
margin-bottom:40px;
font-size:clamp(38px,5vw,62px);
}

/* =========================
RESPONSIVE FIXES
========================= */

@media(max-width:768px){

.about-section,
.about-grid,
.about-values,
.about-cta{
padding:80px 24px;
}

.about-hero{
padding:100px 24px 80px;
min-height:70vh;
}

.about-hero h1{
font-size:52px;
}

h2{
font-size:34px;
}

p{
font-size:17px;
}

.about-grid .grid{
grid-template-columns:1fr;
}

.about-grid .card{
min-height:40px;
font-size:17px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.cta-btn{
width:100%;
max-width:320px;
}

.about-list li{
font-size:18px;
}

.tagline{
font-size:20px;
}

}

/* =========================================================
PREMIUM CART V2
Uber Eats + Apple Wallet Style
========================================================= */

.cart-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
transition:.3s ease;
z-index:9998;
}

.cart-overlay.active{
opacity:1;
visibility:visible;
}

/* =========================================================
CART SHEET
========================================================= */

.cart-sheet{
position:fixed;
left:0;
bottom:-100%;
width:100%;
will-change:transform;
height:92vh;

background:
linear-gradient(
180deg,
rgba(20,20,20,.98),
rgba(8,8,8,.98)
);

border-top-left-radius:34px;
border-top-right-radius:34px;

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

backdrop-filter:blur(40px);

z-index:9999;

display:flex;
flex-direction:column;

transition:
bottom .45s cubic-bezier(.22,1,.36,1);

overflow:hidden;

box-shadow:
0 -20px 60px rgba(0,0,0,.6),
0 0 120px rgba(255,90,31,.08);
}

.cart-sheet.active{
bottom:0;
}

/* =========================================================
DESKTOP MODE
========================================================= */

@media(min-width:1024px){

.cart-sheet{

top:50%;
left:50%;

bottom:auto;

transform:
translate(-50%, -50%)
scale(.96);

width:min(1100px,92vw);

height:min(920px,94vh);

border-radius:34px;

transition:
opacity .25s ease,
transform .3s ease;

opacity:0;
pointer-events:none;
}

.cart-sheet.active{

opacity:1;

pointer-events:auto;

transform:
translate(-50%, -50%)
scale(1);
}

}

/* =========================================================
HANDLE
========================================================= */

.cart-handle{
width:64px;
height:6px;
border-radius:999px;

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

margin:10px auto 12px;

transition:.25s ease;

cursor:grab;
}

.cart-handle:active{
cursor:grabbing;
transform:scaleX(1.1);
}

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

.cart-header{
display:flex;
align-items:center;
justify-content:space-between;

padding:
14px 22px 16px;

border-bottom:
1px solid rgba(255,255,255,.06);

flex-shrink:0;
}

.cart-header h2{
font-size:clamp(28px,3vw,42px);
font-weight:800;
letter-spacing:-1px;
}

.close-cart{
width:40px;
height:40px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.06);
color:white;
font-size:18px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.25s ease;
}

.close-cart:hover{
background:rgba(255,255,255,.12);
}

/* =========================================================
SCROLLABLE ITEMS
========================================================= */

.cart-items{
flex:1;

overflow-y:auto;

padding:
14px 18px 12px;

display:flex;
flex-direction:column;

gap:10px;

min-height:0;

/* IMPORTANT */
overscroll-behavior:contain;
}

/* =========================================================
ITEM CARD
========================================================= */



@media(max-width:480px){
	.cart-item{
		flex-wrap:nowrap;
		align-items:flex-start;
		min-height:auto;
	}
}

.cart-item:hover{
background:rgba(255,255,255,.07);
}

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

.cart-item img{
	width:84px;
	height:84px;
	border-radius:18px;
	object-fit:cover;
	flex-shrink:0;
}

@media(max-width:480px){
	.cart-item img{
		width:70px;
		height:70px;
		order:1;
	}
}

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

.cart-item-info{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}

.cart-item-top{
	display:flex;
	justify-content:space-between;
	gap:10px;
	align-items:flex-start;
	margin-bottom:10px;
	width:100%;
}

@media(max-width:480px){
	.cart-item-top{
		width:100%;
		order:2;
	}
}

.cart-item-info h4{
font-size:14px;
font-weight:700;
line-height:1.2;
}

.cart-price{
font-size:18px;
font-weight:800;
color:#ff7a1a;
white-space:nowrap;
}

/* =========================================================
BOTTOM ROW
========================================================= */

.cart-item-bottom{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	width:100%;
}

@media(max-width:480px){
	.cart-item-bottom{
		width:100%;
		order:3;
	}
}

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

.quantity-controls{
display:flex;
align-items:center;
gap:10px;

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

padding:5px;

border-radius:16px;
}

.quantity-btn{
width:34px;
height:34px;

border:none;

border-radius:12px;

background:
linear-gradient(
135deg,
#ee7d01,
#ff1e1e
);

color:white;

font-size:18px;
font-weight:800;

cursor:pointer;

transition:.2s ease;
}

.quantity-btn:hover{
transform:scale(1.05);
}

.quantity-value{
min-width:20px;
text-align:center;
font-weight:700;
font-size:16px;
}

/* =========================================================
REMOVE BUTTON
========================================================= */

.remove-item{
display:flex;
align-items:center;
gap:8px;

height:38px;

padding:0 14px;

border:none;
border-radius:14px;

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

color:
rgba(255,255,255,.75);

font-size:14px;
font-weight:700;

cursor:pointer;

transition:.25s ease;
}

.remove-item:hover{
background:
rgba(255,90,31,.12);

color:#ee7d01;

transform:translateY(-1px);
}

.remove-item svg{
width:16px;
height:16px;
fill:currentColor;
}

.cart-item.removing{
opacity:0;
transform:
translateX(40px)
scale(.96);

transition:.25s ease;
}

/* =========================================================
FOOTER
========================================================= */

.cart-footer{
	padding:
	14px 18px calc(16px + env(safe-area-inset-bottom));

	background:
	linear-gradient(
	180deg,
	rgba(20,20,20,.72),
	rgba(10,10,10,.96)
	);

	border-top:
	1px solid rgba(255,255,255,.06);

	backdrop-filter:blur(30px);

	flex-shrink:0;
}

.cart-footer .checkout-btn{
	width:100%;
	height:60px;
	border:none;
	border-radius:16px;
	background:linear-gradient(135deg, #ee7d01, #ff1e1e);
	color:white;
	font-size:18px;
	font-weight:800;
	cursor:pointer;
	transition:0.3s ease;
	margin-top:12px;
}

.cart-footer .checkout-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 30px rgba(255,90,31,0.3);
}

/* =========================================================
SUMMARY
========================================================= */

.cart-summary{
margin-bottom:12px;
}

.summary-row{
display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:6px;

font-size:14px;
color:rgba(255,255,255,.72);
}

.summary-row.total{
margin-top:6px;
padding-top:10px;

font-size:22px;
}

/* =========================================================
CHECKOUT BUTTON
========================================================= */

.checkout-btn{
height:54px;

border-radius:20px;

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

background:
linear-gradient(
135deg,
#ee7d01,
#ff1e1e
);

color:white;
text-decoration:none;

font-size:19px;
font-weight:800;

box-shadow:
0 15px 40px rgba(255,90,31,.35);

transition:.25s ease;
}

.checkout-btn:hover{
transform:translateY(-2px);
}

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

@media(max-width:768px){

.cart-sheet{
height:96vh;
}



.cart-item img{
width:72px;
height:72px;
border-radius:16px;
}

.cart-item-info h4{
font-size:16px;
}

.cart-price{
font-size:17px;
}

.quantity-btn{
width:32px;
height:32px;
}

.checkout-btn{
height:58px;
font-size:18px;
}

.summary-row.total{
font-size:22px;
}

/* =========================
MINIMIZED CART
========================= */

.cart-sheet.minimized{
overflow:hidden;
}

/* hide upper content */

.cart-sheet.minimized .cart-header,
.cart-sheet.minimized .cart-items{
opacity:0;
pointer-events:none;
}

/* compact footer */

.cart-sheet.minimized .cart-footer{
  display:flex;
  flex-direction:column;
  gap:10px;

  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.98);
  backdrop-filter:blur(30px);
}

/* hide subtotal rows */

.cart-sheet.minimized .cart-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
}

/* hide extra rows */

.cart-sheet.minimized .summary-row:not(.total){
display:none;
}

/* keep total visible */

.cart-sheet.minimized .summary-row.total{
  display:block;
  font-size:18px;
  font-weight:800;
  color:#ff7a1a;
  margin:0;
  padding:0;
  white-space:nowrap;
}

/* horizontal layout */

.cart-sheet.minimized .checkout-btn{
  margin-top:10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-sheet{
  transition:
    bottom .45s cubic-bezier(.22,1,.36,1),
    height .3s ease;
}

.cart-sheet.minimized{
  height:160px;
}

}

.contact-page{
  padding:140px 8% 80px;
}

.contact-hero{
  text-align:center;
  margin-bottom:60px;
}

.contact-hero h1{
  font-size:52px;
  margin-bottom:15px;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  margin-bottom:50px;
}

.contact-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:25px;
  backdrop-filter:blur(20px);
  text-align:center;
}

.contact-map iframe{
  width:100%;
  height:400px;
  border-radius:24px;
  border:0;
}

/* =========================
PREMIUM CONTACT UX
========================= */

/* HERO */
.contact-hero{
  text-align:center;
  margin-bottom:60px;
}

.contact-hero h1{
  font-size:clamp(42px,5vw,64px);
  margin-bottom:15px;
}

.contact-hero p{
  opacity:.8;
}

/* GRID */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:25px;
  margin-bottom:60px;
}

/* CARD */
.contact-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:30px;
  text-align:center;
  backdrop-filter:blur(25px);

  cursor:pointer;

  transition:.4s ease;

  transform:translateY(40px);
  opacity:0;
}

.contact-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 20px 60px rgba(255,90,31,.15);
}

/* ICON */
.contact-card .icon{
  font-size:32px;
  margin-bottom:12px;
}

/* HINT */
.hint{
  display:block;
  margin-top:10px;
  font-size:12px;
  opacity:.6;
}

/* MAP GLOW */
.map-glow{
  position:relative;
  border-radius:30px;
  overflow:hidden;
  padding:6px;

  background:radial-gradient(circle at top left,rgba(255,90,31,.3),transparent 60%),
             radial-gradient(circle at bottom right,rgba(255,0,0,.2),transparent 60%);
}

.map-glow iframe{
  width:100%;
  height:420px;
  border:0;
  border-radius:24px;
  filter:contrast(1.05) saturate(1.2);
}

/* FLOATING WHATSAPP */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:62px;
  height:62px;
  border-radius:50%;

  background:linear-gradient(135deg,#25D366,#128C7E);
  color:white;

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

  font-size:26px;

  box-shadow:0 10px 30px rgba(37,211,102,.4);

  z-index:9999;

  animation:floatPulse 2.5s infinite;
}

@keyframes floatPulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.08);}
  100%{transform:scale(1);}
}

/* REVEAL ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s cubic-bezier(.22,1,.36,1);
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* =========================
STATUS PILL
========================= */

.status-pill{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  margin-bottom:20px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);

  color:#aaa;
}

.status-pill.open{
  color:#00ff88;
  border-color:rgba(0,255,136,.3);
  box-shadow:0 0 20px rgba(0,255,136,.15);
}

.status-pill.closed{
  color:#ff4d4d;
  border-color:rgba(255,77,77,.3);
}

/* =========================
TYPING EFFECT
========================= */

.cursor{
  display:inline-block;
  animation:blink .8s infinite;
}

@keyframes blink{
  50%{opacity:0;}
}

/* =========================
DRAG TO CALL BUTTON
========================= */

.drag-call{
  width:260px;
  height:70px;
  margin:40px auto;

  background:linear-gradient(135deg,#ee7d01,#ff1e1e);
  border-radius:999px;

  display:flex;
  align-items:center;

  position:relative;

  user-select:none;

  box-shadow:0 15px 40px rgba(255,90,31,.35);

  overflow:hidden;
}

.drag-inner{
  position:absolute;
  left:10px;

  width:60px;
  height:60px;

  border-radius:50%;
  background:white;
  color:black;

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

  cursor:grab;

  transition:transform .2s ease;
}

.drag-call.active{
  animation:shake .3s ease;
}

/* =========================
SHAKE (HAPTIC FEEL)
========================= */

@keyframes shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  50%{transform:translateX(6px);}
  75%{transform:translateX(-3px);}
  100%{transform:translateX(0);}
}

/* =========================
MAP PIN PULSE
========================= */

.map-glow iframe{
  position:relative;
}

.map-glow::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;

  width:20px;
  height:20px;

  background:#ee7d01;
  border-radius:50%;

  transform:translate(-50%,-50%);

  box-shadow:
    0 0 0 0 rgba(255,90,31,.6);

  animation:pulse 1.8s infinite;
}

@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(255,90,31,.5);
  }
  100%{
    box-shadow:0 0 0 25px rgba(255,90,31,0);
  }
}

/* CHECKOUT QUANTITY SELECTOR */
.checkout-qty {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    background: rgba(255,255,255,0.08);
    padding: 8px 12px;
    border-radius: 12px;
    width: fit-content;
}

.checkout-qty button {
    background: linear-gradient(135deg, rgba(255,90,31,0.3), rgba(255,30,30,0.3));
    border: 1px solid rgba(255,90,31,0.4);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ee7d01;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-qty button:hover {
    background: linear-gradient(135deg, rgba(255,90,31,0.5), rgba(255,30,30,0.5));
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255,90,31,0.3);
}

.checkout-qty button:active {
    transform: scale(0.95);
}

.checkout-qty span {
    font-size: 16px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

.empty-cart-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	margin-top:20px;
	padding:14px 28px;

	background:linear-gradient(
		135deg,
		#ee7d01,
		#ff1e1e
	);

	color:#fff;
	text-decoration:none;
	font-weight:700;
	font-size:16px;

	border-radius:999px;

	box-shadow:
		0 10px 30px rgba(255,90,31,.25);

	transition:.3s ease;
}

.empty-cart-link:hover{
	transform:translateY(-3px);
	box-shadow:
		0 15px 40px rgba(255,90,31,.4);
}

.checkout-methods-card{
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	backdrop-filter:blur(30px);

	padding:30px;
	margin-bottom:35px;

	border-radius:30px;
}

.checkout-methods-card h3{
	margin-bottom:25px;
	font-size:24px;
}

.method-row{
	display:flex;
	align-items:center;
	gap:16px;
}

.method-icon{
	width:56px;
	height:56px;

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

	font-size:24px;

	border-radius:18px;

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

.method-content{
	display:flex;
	flex-direction:column;
}

.method-content strong{
	font-size:18px;
	margin-bottom:4px;
}

.method-content span{
	opacity:.7;
	font-size:14px;
}

.method-divider{
	height:1px;
	background:rgba(255,255,255,.08);
	margin:20px 0;
}

.payment-note{
	margin-top:20px;
	padding:16px;

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

	border-radius:16px;

	font-size:14px;
	line-height:1.6;

	opacity:.8;
}

.checkout-methods-card{
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	backdrop-filter:blur(30px);

	padding:30px;
	margin-bottom:35px;

	border-radius:30px;
}

.checkout-methods-card h3{
	margin-bottom:25px;
	font-size:24px;
}

.method-row{
	display:flex;
	align-items:center;
	gap:16px;
}

.method-icon{
	width:56px;
	height:56px;

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

	font-size:24px;

	border-radius:18px;

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

.method-content{
	display:flex;
	flex-direction:column;
}

.method-content strong{
	font-size:18px;
	margin-bottom:4px;
}

.method-content span{
	font-size:14px;
	opacity:.7;
}

.method-divider{
	height:1px;
	background:rgba(255,255,255,.08);
	margin:20px 0;
}

.payment-note{
	margin-top:20px;
	padding:16px;
	border-radius:16px;

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

	font-size:14px;
	line-height:1.6;
	opacity:.8;
}

.place-order-card{
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.08);
	backdrop-filter:blur(30px);

	border-radius:30px;
	padding:35px;

	margin-top:25px;
}

.place-order-tag{
	display:inline-block;

	padding:10px 16px;

	border-radius:999px;

	background:rgba(255,90,31,.12);
	border:1px solid rgba(255,90,31,.25);

	margin-bottom:16px;
}

.place-order-card h3{
	font-size:28px;
	margin-bottom:12px;
}

.place-order-card p{
	opacity:.75;
	margin-bottom:25px;
	line-height:1.6;
}

.place-order-btn{
	width:100%;
	height:72px;

	border:none;
	border-radius:24px;

	background:
	linear-gradient(
	135deg,
	#ee7d01,
	#ff1e1e
	);

	color:white;

	font-size:20px;
	font-weight:800;

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

	padding:0 28px;

	cursor:pointer;

	box-shadow:
	0 15px 40px rgba(255,90,31,.35);

	transition:.3s ease;
}

.place-order-btn:hover{
	transform:translateY(-3px);

	box-shadow:
	0 20px 50px rgba(255,90,31,.45);
}

.place-order-btn strong{
	font-size:22px;
}

@media(max-width:768px){

    .place-order-btn{
        display:flex;
        align-items:center;
        justify-content:flex-start;

        flex-wrap:nowrap;
        gap:12px;

        padding:0 18px;
        height:72px;
    }

    .place-order-btn span{
        white-space:nowrap;
        font-size:16px;
        font-weight:700;
        flex-shrink:0;
    }

    .place-order-btn strong{
        white-space:nowrap;
        font-size:18px;
        font-weight:800;
        margin-left:auto; /* THIS is the key fix */
        flex-shrink:0;
    }
}

/* =========================
MOBILE FIXED ORDER BUTTON
========================= */

@media (max-width: 768px) {

.place-order-card {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 99999;

    border-radius: 0;

    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));

    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(25px);

    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* hide extra text on mobile for clean UX */
.place-order-card h3,
.place-order-card p,
.place-order-tag {
    display: none;
}

/* button becomes full smart bar */
.place-order-btn {
    width: 100%;
    height: 56px;

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

    padding: 0 18px;

    border-radius: 16px;

    font-size: 16px;
}

/* fix text overlap */
.place-order-btn span {
    font-weight: 700;
    white-space: nowrap;
}

.place-order-btn strong {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

/* prevent content hidden behind button */
.checkout-right {
    padding-bottom: 90px;
}

}

@media (max-width: 768px) {

/* prevent overlap with fixed bottom bar */
.checkout-right {
    padding-bottom: 120px !important;
}

/* fix Comanda ta card spacing */
.summary-card {
    margin-bottom: 16px;
}

/* make cart items breathe better */
.checkout-items {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    padding-bottom: 10px;
}

/* fix card spacing on mobile */
.summary-card {
    border-radius: 20px;
}

/* optional: improve visual separation */
.checkout-items {
    max-height: 45vh;
    overflow-y: auto;
}

}

/* =========================
STRIPE CHECKOUT UI (FIXED)
========================= */

.stripe-checkout {
	display: none;
}

/* =========================
DESKTOP LAYOUT
========================= */

.stripe-checkout-desktop {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 40px;
	padding: 140px 8% 80px;
	position: relative;
	z-index: 1;
	align-items: start;
}

/* =========================
CARDS
========================= */

.checkout-left,
.summary-card,
.upsell-box,
.place-order-card {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	backdrop-filter: blur(30px);
	border-radius: 30px;
	padding: 35px;
}

/* =========================
MOBILE LAYOUT FIX
========================= */

@media (max-width: 980px) {

	.stripe-checkout-desktop {
		display: grid !important;
		grid-template-columns: 1fr;
		padding: 100px 20px 140px; /* IMPORTANT: bottom space for fixed button */
	}

	.checkout-left {
		order: 1;
	}

	.mobile-summary-section {
		order: 2;
		margin-top: 30px;
	}

	.checkout-right {
		display: block !important;
	}

	/* FIX: prevent overlap with fixed button */
	body.checkout-page {
		padding-bottom: 110px;
	}

}

/* =========================
CHECKOUT HEADER TEXT
========================= */

.checkout-brand h1 {
	font-size: 52px;
	margin-bottom: 12px;
}

.checkout-brand p {
	opacity: .7;
	margin-bottom: 40px;
}

/* =========================
INPUTS
========================= */

.input-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.input-group label {
	margin-bottom: 10px;
	font-size: 14px;
	opacity: .8;
}

.input-group input,
.input-group textarea,
.input-group select {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	height: 60px;
	border-radius: 18px;
	padding: 0 20px;
	color: white;
	font-size: 16px;
	outline: none;
}

.input-group textarea {
	height: 120px;
	padding-top: 18px;
	resize: none;
}

/* =========================
PAY BUTTON (DESKTOP)
========================= */

.pay-btn {
	width: 100%;
	height: 72px;
	border: none;
	border-radius: 24px;
	background: linear-gradient(135deg, #ee7d01, #ff1e1e);
	color: white;
	font-size: 20px;
	font-weight: 800;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 28px;
	cursor: pointer;
	box-shadow: 0 15px 40px rgba(255,90,31,.35);
	transition: .3s;
	margin-top: 30px;
}

.pay-btn:hover {
	transform: translateY(-3px);
}

/* =========================
🔥 FIXED MOBILE BUTTON (IMPORTANT)
========================= */

@media (max-width: 980px) {

	.pay-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		width: 100%;
		height: 78px;
		border-radius: 0;

		z-index: 99999;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		padding: 0 18px;

		font-size: 16px;

		/* prevent text breaking issues */
		white-space: nowrap;
	}

	/* FIX: prevent "Plasează / 44 RON" splitting */
	.pay-btn span {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.pay-btn strong {
		white-space: nowrap;
		flex-shrink: 0;
		font-size: 18px;
	}
}

/* =========================
SUMMARY CARD
========================= */

.summary-card h2 {
	margin-bottom: 30px;
}

.summary-divider {
	height: 1px;
	background: rgba(255,255,255,.08);
	margin: 25px 0;
}

.summary-line {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}

.summary-line.total {
	font-size: 22px;
	font-weight: 800;
	color: #ff7a1a;
}

/* =========================
🔥 CART ITEM FIX (IMPORTANT)
========================= */

.checkout-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px;
	backdrop-filter: blur(10px);
}

/* FIX OVERFLOW ISSUE */
.checkout-item-left {
	display: flex;
	gap: 16px;
	flex: 1;
	align-items: center;
	min-width: 0; /* IMPORTANT FIX */
}

.checkout-item-left > div {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0; /* IMPORTANT FIX */
}

.checkout-item-left h4 {
	font-size: 18px;
	margin-bottom: 6px;

	/* prevent ugly overflow */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.checkout-item-left p {
	font-size: 14px;
	opacity: 0.7;
	margin-bottom: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* IMAGE FIX */
.checkout-item-image {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 12px;
	flex-shrink: 0;
}

/* RIGHT SIDE */
.checkout-item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}

.checkout-item-right strong {
	color: #ee7d01;
	white-space: nowrap;
}

/* =========================
MOBILE ITEM FIX
========================= */

@media (max-width: 768px) {

	.checkout-item {
		flex-wrap: wrap;
	}

	.checkout-item-left {
		width: 100%;
	}

	.checkout-item-right {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* =========================
PLACE ORDER CARD (UPSERT REPLACEMENT)
========================= */

.place-order-card {
	margin-top: 25px;
}

.place-order-tag {
	display: inline-block;
	margin-bottom: 12px;
}

/* =========================
🔥 FINAL MOBILE SAFE AREA
========================= */

@media (max-width: 980px) {
	body.checkout-page {
		padding-bottom: calc(90px + env(safe-area-inset-bottom));
	}
}

.checkout-item {
	transition: transform .25s ease, opacity .25s ease;
}

.checkout-item:active {
	transform: scale(0.98);
	opacity: 0.9;
}

@keyframes pulseGlow {
	0% {
		box-shadow: 0 15px 40px rgba(255,90,31,.35);
	}

	50% {
		box-shadow: 0 15px 60px rgba(255,90,31,.6);
		transform: scale(1.01);
	}

	100% {
		box-shadow: 0 15px 40px rgba(255,90,31,.35);
	}
}

.place-order-btn {
	animation: pulseGlow 2.2s infinite;
}

.mobile-sticky-summary {
	display: none;
}

@media (max-width: 980px) {

	.mobile-sticky-summary {
		display: flex;
		position: fixed;
		bottom: 78px;
		left: 0;
		right: 0;

		background: rgba(0,0,0,0.6);
		backdrop-filter: blur(15px);

		padding: 12px 20px;
		justify-content: center;

		font-weight: 700;
		color: white;

		z-index: 99998;
		border-top: 1px solid rgba(255,255,255,0.1);
	}
}

.confirm-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(10px);
	z-index: 100000;
	justify-content: center;
	align-items: center;
}

.confirm-modal.active {
	display: flex;
}

.confirm-box {
	background: #111;
	padding: 30px;
	border-radius: 20px;
	width: 90%;
	max-width: 400px;
	text-align: center;
}

.confirm-actions {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	gap: 10px;
}

.confirm-actions button {
	flex: 1;
	padding: 12px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
}

#confirm-order {
	background: #ee7d01;
	color: white;
}

@media (max-width: 980px) {
	.place-order-tag {
		display: none !important;
	}
}

/* =========================
CHECKOUT CLEANUP MODE
========================= */

body.checkout-page .floating-cart,
body.checkout-page .cart-overlay,
body.checkout-page .cart-sheet {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* prevent any slide-up leftover transform */
body.checkout-page .cart-sheet {
	transform: none !important;
}

/* =========================
PRODUCT MODAL
========================= */

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-modal.hidden {
  display: none;
}

.product-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
}

.product-modal-content {
  position: relative;
  width: min(900px, 95vw);
  height: min(90vh, 900px);
  background: rgba(15,15,15,0.98);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn .25s ease;
}

/* animation */
@keyframes modalIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* CLOSE */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}

/* HEADER */
.modal-header {
  display: flex;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.modal-header img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
}

.modal-header-info h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.modal-price {
  color: #ee7d01;
  font-size: 22px;
  font-weight: 800;
}

/* BODY */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

/* EXTRAS */
.extras-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.extra-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: 0.2s;
}

.extra-item:hover {
  background: rgba(255,255,255,0.08);
}

.extra-item.active {
  border-color: #ee7d01;
  background: rgba(255,90,31,0.12);
}

/* QTY */
.qty-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-selector button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg,#ee7d01,#ff1e1e);
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.qty-selector span {
  font-size: 18px;
  font-weight: 700;
}

/* FOOTER */
.modal-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10,10,10,0.95);
}

.total-box {
  font-size: 18px;
  font-weight: 700;
}

.add-cart-btn {
  background: linear-gradient(135deg,#ee7d01,#ff1e1e);
  border: none;
  padding: 14px 22px;
  border-radius: 14px;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

/* MOBILE */
@media(max-width:768px) {
  .modal-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .modal-header img {
    width: 100%;
    height: 200px;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
  }
}

.cart-extras{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  width:100%;

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

.cart-extras span{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,90,31,.12);
  color:#ff7a1a;
}

.remove-item{
  position:absolute;
  top:0;
  right:0;

  width:28px;
  height:28px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,.08);
  color:#aaa;

  cursor:pointer;

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

.qty-value {
  min-width: 20px;

  text-align: center;

  color: white;

  font-weight: 600;
}

.qty-btn {
  width: 32px;
  height: 32px;

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

  border: none;
  border-radius: 8px;

  background: transparent;

  color: #ee7d01;

  font-size: 20px;
  font-weight: 700;

  cursor: pointer;
}

.quantity-control{
 display:flex;
 align-items:center;
 justify-content:space-between;

 width:120px;
 height:42px;

 background:#1d1d1d;
 border:1px solid #333;

 border-radius:14px;
}

.cart-item-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  margin-top:12px;

  flex-wrap:wrap;
}

.unit-price {
  margin-top: 6px;

  color: #999;

  font-size: 14px;
}

.cart-item-header {
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.cart-item-header h4 {
  margin: 0 0 6px 0;
  color: white;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.cart-item-content{
  flex:1;
  display:flex;
  flex-direction:column;

  min-width:0;

  height:auto;
  min-height:auto;
}

.cart-item{
  align-items:flex-start;
  display:flex;
  gap:12px;

  position:relative;

  padding:14px;
  margin-bottom:14px;

  border-radius:18px;

  background:#181818;
  border:1px solid #2b2b2b;

  height:auto;
  min-height:110px;
}

.cart-item img{
  width:90px;
  min-width:90px;
  height:90px;
  align-self:flex-start;
}

.qty-btn{
 width:36px;
 height:36px;

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

 color:#ee7d01;
 font-size:22px;
 font-weight:700;

 background:none;
 border:none;
}

.qty-value{
 font-size:18px;
 font-weight:700;
 color:white;
}
.item-total{
  font-size:22px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

.cart-item{
  display:flex;
  align-items:flex-start;

  height:auto !important;
  min-height:unset !important;
}

.cart-item-image{
  order:2;
}

@media (max-width:768px){

  .cart-item{
    align-items:flex-start;
  }

  .cart-item-content{
    width:100%;
  }

  .cart-item-footer{
    margin-top:12px;
  }

  .item-total{
    font-size:18px;
  }

}

.hero-slider {
    position: relative;
    overflow: hidden;
}

.slide {
    display: none;
}

.slide.active {
    display: block;
}

.slider-nav {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
}

.slider-dot {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: .3s;
}

.slider-dot.active {
    background: #ee7d01;
    color: #fff;
}

.benefits-text {
    max-width: 900px;
    margin: 40px auto 0;
    text-align: center;
    line-height: 1.8;
    color: #666;
    font-size: 1rem;
    padding: 0 20px;
}

.categories {
    padding: 70px 20px;
}

.categories h2 {
    text-align: center;
    margin-bottom: 30px;
}

.category-grid {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 20px;
}

.category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff;
    border-radius: 20px;

    padding: 20px;

    text-decoration: none;
    color: #222;

    box-shadow: 0 8px 25px rgba(0,0,0,.08);

    transition: .3s;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
}

.category-info h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.category-info span {
    color: #ff7a00;
    font-weight: 600;
}

.category-card img {
    width: 90px;
    height: 90px;
    object-fit: cover;

    border-radius: 16px;

    transition: .3s;
}

.category-card:hover img {
    transform: scale(1.08);
}

.category-card img{
    width:120px;
    height:120px;
    object-fit:contain;
}

.faq {
    padding: 80px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.faq h2 {
    text-align: center;
    margin-bottom: 35px;
}

.faq-item {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.faq-question {
    width: 100%;
    border: none;
    background: #fff;

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

    padding: 20px;
    cursor: pointer;

    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.faq-icon {
    font-size: 22px;
    transition: .3s;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;

    transition: all .35s ease;

    padding: 0 20px;
    color: #222;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    max-height: 250px;
    padding: 0 20px 20px;
}

.best-sellers .product-card{
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,0.08);
    backdrop-filter:none;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:.3s ease;
}

/* Title */
.best-sellers .product-card h3{
    color:#111;
}

/* Description fix (your main issue) */
.best-sellers .product-card p{
    color:#555;
}

/* Price / bottom row */
.best-sellers .product-card .price-row{
    color:#111;
}

/* Hover effect */
.best-sellers .product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* Button inside card (important for contrast) */
.best-sellers .product-card .price-row button{
    background:#ee7d01;
    color:#fff;
    border:none;
}

.benefits .benefit{
    position:relative;
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border-radius:22px;
    padding:34px;
    transition:.3s ease;
    overflow:hidden;
}

.benefit-icon{
    font-size:42px;
    margin-bottom:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:18px;

    background:linear-gradient(135deg,#ee7d01,#ff1e1e);
    color:#fff;

    box-shadow:0 10px 25px rgba(255,90,31,.25);
}

.benefits .benefit h3{
    margin-bottom:12px;
    color:#111;
    font-size:18px;
}

.benefits .benefit p{
    color:#555;
    line-height:1.6;
}

.benefits .benefit::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(238,125,1,.08),rgba(255,30,30,.08));
    opacity:0;
    transition:.3s ease;
}

.benefits .benefit:hover::before{
    opacity:1;
}

.benefits .benefit:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 50px rgba(0,0,0,0.12);
}