feat(cart): enhance cart item layout and styles for improved design consistency

src/app/shared/components/cart/cart.component.html

@@ -1,5 +1,5 @@
 <section class="d-flex flex-column h-100 overflow-hidden text-secondary" [style.background-color]="backgroundColor()">
-  <header class="d-flex align-items-center justify-content-between bg-transparent cart-header">
+  <header class="d-flex align-items-center p-3 justify-content-between bg-transparent cart-header">
     <h2 class="m-0 text-uppercase fw-bold cart-title">{{ title() }}</h2>
 
     @if (showClose()) {
@@ -9,7 +9,7 @@
     }
   </header>
 
-  <div class="d-grid gap-2 flex-grow-1 overflow-y-auto cart-items-container">
+  <div class="d-grid w-100 flex-grow-1 overflow-y-auto cart-items-container">
     @for (item of items(); track item.productVariantId || item.product + item.discountedPrice; let idx = $index) {
       <app-cart-item
         [imageUrl]="item.imageUrl"
@@ -48,3 +48,4 @@
 </section>
 
 
+

src/app/shared/components/cart/cart.component.scss

@@ -23,10 +23,16 @@
 
 .cart-items-container {
   min-height: 0;
-  padding: 0 0 0 24px;
+  gap: 0;
   scrollbar-color: #d5d5d5 transparent;
   scrollbar-width: thin;
 
+  app-cart-item {
+    display: block;
+  }
+
+  
+
   &::-webkit-scrollbar {
     width: 6px;
   }