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

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

@@ -1,28 +1,43 @@
 :host {
   display: block;
-  --item-media-width: 64px;
-  --item-media-height: 72px;
+  --item-media-size: 90px;
+  --item-divider-inset: 1rem;
 }
 
-@media (max-width: 420px) {
-  :host {
-    --item-media-width: 56px;
-    --item-media-height: 64px;
-  }
+:host(:first-child) .cart-item,
+:host .cart-item {
+  position: relative;
+}
+
+: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);
-  height: var(--item-media-height);
-  border-radius: 6px;
+  width: var(--item-media-size);
+  aspect-ratio: 1 / 1;
+  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;
 }