/* =====================================================================
   CART DRAWER  (Add To Cart click par right side se khulta hai)
   Responsive: desktop 400px panel  |  <=480px full screen
   ===================================================================== */
:root{
	--cart-navy:#0a2e72;
	--cart-green:#0a8a1f;
	--cart-line:#e3e6ec;
	--cart-muted:#5b6270;
}

/* ---------- overlay ---------- */
.cart-overlay{
	position:fixed; inset:0; z-index:10040;
	background:rgba(0,0,0,.45);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
	opacity:0; visibility:hidden;
	transition:opacity .3s ease, visibility .3s;
}
.cart-overlay.open{ opacity:1; visibility:visible; }
body.cart-locked{ overflow:hidden; }

/* ---------- drawer ---------- */
.cart-drawer{
	position:fixed; top:0; right:0; bottom:0; z-index:10050;
	width:400px; max-width:100%;
	height:100%; height:100dvh;
	display:flex; flex-direction:column;
	background:#fff; color:#000;
	font-family:'DM Sans',sans-serif;
	box-shadow:-10px 0 40px rgba(0,0,0,.2);
	transform:translateX(100%); visibility:hidden;
	transition:transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s;
}
.cart-drawer.open{ transform:none; visibility:visible; }

.cart-head{
	display:flex; justify-content:space-between; align-items:center;
	padding:18px 16px 10px;
}
.cart-head h3{ margin:0; font-size:22px; font-weight:700; }
.cart-close{
	display:flex; border:0; background:none; cursor:pointer; color:#000; padding:4px;
}
.cart-close .material-symbols-outlined{ font-size:28px; }

/* scrollable middle */
.cart-body{
	flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
	padding:0 16px 16px;
}

/* ---------- promo progress ---------- */
.cart-promo{ margin-bottom:18px; }
.cart-promo p{ margin:0 0 10px; font-size:13px; color:#111; }
.cart-bar{ height:8px; border-radius:20px; background:#e8eaf0; overflow:hidden; }
.cart-bar span{
	display:block; height:100%; width:0; border-radius:20px;
	background:var(--cart-navy); transition:width .4s ease;
}

/* ---------- cart item ---------- */
.cart-item{
	display:flex; gap:14px; padding:0 0 18px; margin-bottom:18px;
	border-bottom:1px solid var(--cart-line);
}
.cart-item:last-child{ border-bottom:0; margin-bottom:0; }
.cart-item-img{
	flex:0 0 130px; width:130px; height:115px; border-radius:6px;
	object-fit:cover; background:#f1f3f8;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ margin:0 0 6px; font-size:18px; font-weight:700; line-height:1.25; }
.cart-item-sub{ margin:0 0 10px; font-size:13px; line-height:1.4; color:#222; }
.cart-item-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-weight:700; font-size:16px; }
.cart-item-price s{ font-weight:400; font-size:13px; color:var(--cart-muted); }
.cart-item-price small{ font-weight:400; font-size:13px; color:var(--cart-muted); }
.cart-item-tax{ margin:2px 0 10px; font-size:12px; color:#333; }

.cart-item-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cart-qty{
	display:inline-flex; align-items:center; height:34px;
	border:1px solid #111; border-radius:8px; overflow:hidden;
}
.cart-qty button{
	width:32px; height:100%; border:0; background:none; cursor:pointer;
	font-size:20px; line-height:1; color:#111;
}
.cart-qty output{ min-width:26px; text-align:center; font-size:14px; font-weight:500; }
.cart-remove{
	border:0; background:none; cursor:pointer; padding:0;
	font-size:13px; color:#111; text-decoration:underline; font-family:inherit;
}

/* ---------- suggestions ---------- */
.cart-suggest{ margin-top:22px; }
.cart-suggest-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cart-suggest-head h4{ margin:0; font-size:18px; font-weight:700; }
.cart-suggest-nav{ display:flex; gap:10px; }
.cart-suggest-nav button{
	display:flex; border:0; background:none; cursor:pointer; color:#111; padding:0;
}
.cart-suggest-nav button:disabled{ opacity:.3; cursor:default; }
.cart-suggest-track{
	display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
	scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cart-suggest-track::-webkit-scrollbar{ display:none; }
.cart-sg{
	flex:0 0 100%; scroll-snap-align:start;
	display:flex; gap:12px; align-items:center;
	padding:16px 14px; border:1px solid var(--cart-line); border-radius:6px; background:#f6f8fb;
}
.cart-sg img{ width:78px; height:78px; flex-shrink:0; object-fit:contain; }
.cart-sg-info{ min-width:0; }
.cart-sg-info h5{ margin:0 0 4px; font-size:15px; font-weight:700; line-height:1.25; }
.cart-sg-info p{ margin:0 0 6px; font-size:12px; color:var(--cart-muted); }
.cart-sg-price{ margin-bottom:8px; font-size:13px; font-weight:700; color:var(--cart-navy); }
.cart-sg-price s{ font-weight:400; color:var(--cart-muted); margin-left:4px; }
.cart-sg-add{
	height:30px; padding:0 20px; border:1px solid #111; border-radius:6px;
	background:#fff; color:#111; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;
}
.cart-sg-add:hover{ background:#111; color:#fff; }

/* ---------- empty ---------- */
.cart-empty{ text-align:center; padding:60px 10px; color:var(--cart-muted); }
.cart-empty .material-symbols-outlined{ font-size:56px; color:#c4c9d4; }
.cart-empty p{ margin:12px 0 20px; font-size:15px; }
.cart-empty button{
	height:44px; padding:0 26px; border:0; border-radius:50px; cursor:pointer;
	background:var(--cart-navy); color:#fff; font-size:14px; font-weight:600; font-family:inherit;
}

/* ---------- footer: summary + checkout ---------- */
.cart-foot{
	flex-shrink:0; padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top:1px solid var(--cart-line); background:#fff;
}
.cart-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:#222; }
.cart-row.discount{ color:var(--cart-green); }
.cart-row.total{ margin-top:4px; font-size:15px; font-weight:700; color:var(--cart-navy); }
.cart-checkout{
	display:block; width:100%; height:48px; margin-top:12px;
	border:0; border-radius:4px; background:var(--cart-navy); color:#fff;
	font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
}
.cart-checkout:hover{ background:#071f4d; }
.cart-checkout:disabled{ background:#aab3c5; cursor:not-allowed; }
.cart-drawer.is-empty .cart-foot{ display:none; }
.cart-drawer.is-empty .cart-promo,
.cart-drawer.is-empty .cart-suggest-head h4 + .cart-suggest-nav{ display:none; }

/* ---------- header cart icon badge ---------- */
.cart-link{ position:relative; }
.cart-badge{
	position:absolute; top:-6px; right:-8px;
	min-width:18px; height:18px; padding:0 5px; border-radius:20px;
	background:#d10a05; color:#fff; font-size:11px; font-weight:700;
	display:none; align-items:center; justify-content:center; line-height:1;
}
.cart-badge.show{ display:flex; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:480px){
	.cart-drawer{ width:100%; box-shadow:none; }
	.cart-head{ padding:16px 14px 8px; }
	.cart-head h3{ font-size:20px; }
	.cart-body{ padding:0 14px 14px; }
	.cart-item{ gap:12px; }
	.cart-item-img{ flex-basis:96px; width:96px; height:110px; }
	.cart-item-info h4{ font-size:16px; }
	.cart-foot{ padding-left:14px; padding-right:14px; }
}
@media (max-width:360px){
	.cart-item-img{ flex-basis:80px; width:80px; height:96px; }
	.cart-sg img{ width:60px; height:60px; }
}
@media (max-height:560px){            /* landscape phone: summary compact */
	.cart-row{ padding:2px 0; }
	.cart-checkout{ height:42px; margin-top:8px; }
}
@media (prefers-reduced-motion:reduce){
	.cart-drawer,.cart-overlay,.cart-bar span{ transition:none; }
}