fix cart drawer

Author: Mishra-coder

frontend/src/App.jsx

@@ -207,6 +207,7 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
                   <button className="btn-primary" onClick={onClose}>CONTINUE SHOPPING</button>
                 </div>
               ) : (
+                <>
                 <div className="cart-items">
                   {cartItems.map((item, i) => (
                     <div key={i} className="cart-item">
@@ -222,12 +223,15 @@ const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, on
                       </button>
                     </div>
                   ))}
+                </div>
+                <div className="cart-footer">
                   <div className="cart-total">
                     <span>Total</span>
                     <span>₹ {cartTotal.toLocaleString('en-IN')}</span>
                   </div>
                   <button className="btn-primary checkout-btn">PROCEED TO CHECKOUT</button>
                 </div>
+                </>
               )
             ) : (
               wishlistItems.length === 0 ? (

frontend/src/index.css

@@ -214,12 +214,22 @@ ul {
         .close-btn:hover { color: var(--brand-red); }
 
         .overlay-content {
-          padding: 2rem;
+          padding: 0;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: stretch;
+          overflow-y: auto;
+        }
+
+        .overlay-content .empty-state {
           flex: 1;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
+          padding: 2rem;
         }
 
         .empty-state {
@@ -987,17 +997,21 @@ ul {
 }
 
 /* Cart & Wishlist Drawer Items */
-.cart-items { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
-.cart-item { display: flex; gap: 12px; align-items: center; padding: 12px; background: #f9f9f9; border-radius: 10px; }
-.cart-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
+.cart-items { display: flex; flex-direction: column; gap: 0; padding: 0 20px; flex: 1; overflow-y: auto; }
+.cart-item { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #f2f2f2; }
+.cart-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; background: #f7f7f7; }
 .cart-item-info { flex: 1; }
-.cart-item-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
-.cart-item-size, .cart-item-qty { font-size: 12px; color: #666; }
-.cart-item-price { font-weight: 700; font-size: 14px; margin-top: 4px; color: #e85d04; }
-.remove-btn { background: none; border: none; cursor: pointer; color: #999; padding: 4px; }
-.remove-btn:hover { color: #e85d04; }
-.cart-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; padding: 12px 0; border-top: 1px solid #eee; margin-top: 8px; }
-.checkout-btn { width: 100%; margin-top: 8px; }
+.cart-item-name { font-weight: 700; font-size: 13px; margin-bottom: 5px; color: #1a1a1a; line-height: 1.3; }
+.cart-item-size { font-size: 12px; color: #888; margin-bottom: 2px; }
+.cart-item-qty { font-size: 12px; color: #888; margin-bottom: 6px; }
+.cart-item-price { font-weight: 800; font-size: 15px; color: #e85d04; }
+.remove-btn { background: #f5f5f5; border: none; cursor: pointer; color: #aaa; padding: 8px; border-radius: 8px; transition: all 0.2s; }
+.remove-btn:hover { background: #ffe8e0; color: #e85d04; }
+.cart-footer { padding: 16px 20px 24px; border-top: 2px solid #f2f2f2; }
+.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.cart-total span:first-child { font-size: 14px; color: #888; font-weight: 500; }
+.cart-total span:last-child { font-weight: 800; font-size: 20px; color: #1a1a1a; }
+.checkout-btn { width: 100%; padding: 16px; font-size: 14px; letter-spacing: 1px; border-radius: 14px; }
 .wishlist-overlay.wishlisted { color: #e85d04; }
 .wishlist-btn-large.wishlisted { background: #fff0e6; color: #e85d04; border-color: #e85d04; }