/* Cart page (v2). Loaded after /v2/app.css; keeps the legacy ids/classes the cart script uses. */
body{ background:#fff; }
.cartpage{ padding-top:24px; padding-bottom:64px; }
.cartpage h1{ font-size:clamp(26px, 1.6vw + 16px, 34px); letter-spacing:-.025em; margin-bottom:20px; }
.cart-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:32px; align-items:start; }
@media (max-width:960px){ .cart-grid{ grid-template-columns:1fr; gap:20px; } }

.cart-items{ display:flex; flex-direction:column; gap:12px; }
.cart-item{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
.item-img{ aspect-ratio:1/1; background:var(--surface); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.item-img img{ width:82%; height:82%; object-fit:contain; mix-blend-mode:multiply; }
.item-info{ display:flex; flex-direction:column; min-width:0; }
.item-brand{ font-size:13px; color:var(--muted); font-weight:500; }
.item-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.3; margin-top:2px; }
.item-colour{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); margin-top:6px; }
.colour-dot{ width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.item-eta{ font-size:13.5px; color:var(--green); font-weight:500; margin-top:6px; }
.item-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:14px; }
.item-price{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.item-mrp{ font-size:14px; color:var(--muted); text-decoration:line-through; margin-left:8px; }
.item-disc{ font-size:13.5px; color:var(--green); font-weight:600; margin-left:8px; }
.item-actions{ display:flex; align-items:center; gap:10px; }
.qty-row{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--pill); height:40px; }
.qty-btn{ width:40px; height:38px; border:0; background:none; font-size:18px; border-radius:var(--pill); color:var(--text); }
.qty-btn:hover{ background:var(--surface); }
.qty-val{ min-width:26px; text-align:center; font-weight:600; font-size:15px; }
.del-btn{ height:40px; padding:0 14px; border:0; border-radius:var(--pill); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; }
.del-btn:hover{ background:var(--brand-50); color:var(--brand-600); }
@media (max-width:640px){ .cart-item{ grid-template-columns:88px minmax(0,1fr); gap:12px; padding:12px; } .item-name{ font-size:15.5px; } .item-price{ font-size:18px; } }

.cart-summary{ position:sticky; top:calc(var(--header) + 20px); background:var(--surface); border-radius:var(--radius-lg); padding:24px; }
.summary-title{ font-size:18px; font-weight:700; margin-bottom:14px; }
.summary-row{ display:flex; justify-content:space-between; font-size:15px; padding:6px 0; color:var(--text); }
.summary-row .free{ color:var(--green); font-weight:600; }
.summary-savings{ display:flex; justify-content:space-between; font-size:15px; padding:8px 12px; margin:8px 0; background:var(--green-50); color:var(--green); border-radius:var(--radius-sm); font-weight:600; }
.summary-divider{ border:0; border-top:1px solid var(--line); margin:12px 0; }
.summary-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:17px; font-weight:700; padding:8px 0 4px; }
.summary-total span:last-child{ font-size:24px; letter-spacing:-.02em; }
.summary-note{ font-size:13.5px; color:var(--muted); margin:2px 0 16px; }
.summary-eta{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--green); font-weight:600; margin-bottom:14px; }
.summary-eta svg{ width:18px; height:18px; }
.btn-checkout{ width:100%; height:52px; border:0; border-radius:var(--pill); background:var(--brand); color:#fff; font-size:16px; font-weight:600; transition:background-color .18s; }
.btn-checkout:hover{ background:var(--brand-600); }
.btn-whatsapp{ width:100%; height:48px; margin-top:10px; border-radius:var(--pill); background:#fff; color:var(--text); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); }
.btn-whatsapp:hover{ background:var(--surface-2); }
.summary-trust{ display:flex; flex-direction:column; gap:8px; margin-top:18px; font-size:13.5px; color:var(--muted); }
.summary-trust span{ display:flex; gap:8px; align-items:center; }
.summary-trust svg{ width:17px; height:17px; color:var(--brand); flex:none; }
.coupon-discount-row{ display:flex; justify-content:space-between; color:var(--green); font-weight:600; font-size:15px; padding:4px 0; }
.coupon-freebie-tag{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:var(--pill); padding:3px 10px; font-size:12.5px; margin:2px; }
#cartCouponBox input{ height:42px !important; border:1px solid var(--line) !important; border-radius:var(--pill) !important; padding:0 16px !important; font:inherit !important; font-size:14.5px !important; background:#fff !important; }
#cartCouponBox button{ height:42px !important; border-radius:var(--pill) !important; background:var(--ink) !important; color:#fff !important; border:0 !important; font-weight:600 !important; padding:0 18px !important; box-shadow:none !important; }

.empty-cart{ text-align:center; padding:72px 20px; background:var(--surface); border-radius:var(--radius-lg); }
.empty-cart svg{ width:52px; height:52px; color:var(--muted); }
.empty-cart h2{ font-size:22px; margin-top:14px; }
.empty-cart p{ color:var(--muted); margin:6px 0 20px; }
.empty-cart .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* checkout overlay + success (legacy markup) */
.checkout-overlay{ background:rgba(10,10,14,.45) !important; backdrop-filter:blur(4px); }
.checkout-box{ border-radius:var(--radius-lg) !important; box-shadow:var(--shadow-pop) !important; border:0 !important; font-family:var(--font) !important; }
.checkout-header{ background:#fff !important; color:var(--text) !important; border-bottom:1px solid var(--line) !important; }
.checkout-title{ font-size:18px !important; font-weight:700 !important; color:var(--text) !important; }
.checkout-close{ background:var(--surface) !important; color:var(--text) !important; border-radius:50% !important; border:0 !important; }
.checkout-box input, .checkout-box textarea, .checkout-box select{ border:1px solid var(--line) !important; border-radius:var(--radius-sm) !important; font:inherit !important; font-size:15px !important; box-shadow:none !important; }
.checkout-box input:focus, .checkout-box textarea:focus{ border-color:#bdbdc3 !important; outline:none; box-shadow:0 0 0 4px rgba(208,28,40,.08) !important; }
.success-screen{ font-family:var(--font) !important; }
.loading-state{ text-align:center; color:var(--muted); padding:60px 0; }
@media (max-width:760px){ .cart-summary{ position:static; } }

/* legacy cart styles that leaked through */
.item-brand{ text-transform:none !important; letter-spacing:0 !important; color:var(--muted) !important; font-size:13px !important; }
.item-name{ color:var(--text) !important; font-size:17px !important; }
.item-price{ color:var(--text) !important; }
.item-colour{ text-transform:none !important; }
.del-btn{ width:auto !important; }
.item-footer > div:first-child{ display:flex; align-items:baseline; }
@media (max-width:640px){ .item-name{ font-size:15.5px !important; } }
