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

src/app/core/layout/store-layout/store-layout.component.scss

@@ -24,7 +24,6 @@
   top: 76px;
   right: calc((100% - 1320px) / 2 + 1.5rem);
  
-  height: 520px;
   max-height: calc(100vh - 120px);
   z-index: 1050;
   background-color: #ffffff;

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

@@ -1,4 +1,4 @@
-<article class="w-100 rounded-0 cart-item">
+<article class="w-100 p-3 rounded-0 cart-item">
   <div class="position-relative overflow-hidden cart-item-media">
     @if (discountPercentage() && discountPercentage()! > 0) {
       <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
@@ -17,10 +17,10 @@
 
       <div class="text-nowrap cart-item-prices">
         @if (formattedOriginalPrice(); as originalPrice) {
-          <span class="text-decoration-line-through fw-light cart-item-original-price">{{ originalPrice }}</span>
+          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{ originalPrice }}</span>
         }
 
-        <span class="fw-normal cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
+        <span class="fw-bold cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
       </div>
     </div>
 

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

@@ -1,28 +1,43 @@
 :host {
   display: block;
-  --item-media-width: 64px;
+  --item-media-size: 90px;
-  --item-media-height: 72px;
+  --item-divider-inset: 1rem;
 }
 
-@media (max-width: 420px) {
+:host(:first-child) .cart-item,
-  :host {
+:host .cart-item {
-    --item-media-width: 56px;
+  position: relative;
-    --item-media-height: 64px;
+}
-  }
+
+:host(:first-child) .cart-item::before,
+:host .cart-item::after {
+  content: "";
+  position: absolute;
+  right: var(--item-divider-inset);
+  left: var(--item-divider-inset);
+  height: 1px;
+  background-color: #ffffff;
+}
+
+:host(:first-child) .cart-item::before {
+  top: 0;
+}
+
+:host .cart-item::after {
+  bottom: 0;
 }
 
 .cart-item {
   display: grid;
-  grid-template-columns: var(--item-media-width) minmax(0, 1fr);
+  grid-template-columns: var(--item-media-size) minmax(0, 1fr);
   gap: 0.75rem;
-  padding: 10px 12px;
   background-color: #f5f5f5;
 }
 
 .cart-item-media {
-  width: var(--item-media-width);
+  width: var(--item-media-size);
-  height: var(--item-media-height);
+  aspect-ratio: 1 / 1;
-  border-radius: 6px;
+  border-radius: 5px 0 0 5px;
   background-color: #ffffff;
   border: 1px solid #eaeaea;
   overflow: hidden;
@@ -30,14 +45,14 @@
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 
 .cart-item-discount-badge {
   padding: 2px 5px;
   border-bottom-right-radius: 4px;
-  background-color: #6173ff;
+  background-color: var(--bs-primary);
   color: #ffffff;
   font-size: 8px;
   font-weight: 500;
@@ -45,6 +60,8 @@
 }
 
 .cart-item-placeholder {
+  width: 100%;
+  height: 100%;
   background: linear-gradient(135deg, #d2d2d2, #ececec);
 }
 
@@ -100,9 +117,6 @@
   gap: 0.125rem;
 }
 
-
-
-
 .cart-item-remove-btn {
   margin-left: 0.35rem;
 }

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;
   }