feat: implement cart overlay and dropdown with styling for improved user experience

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

@@ -22,8 +22,16 @@
 .cart-item-media {
   width: var(--item-media-width);
   height: var(--item-media-height);
-  border-radius: 6px 0 0 6px;
-  background-color: #d9d9d9;
+  border-radius: 6px;
+  background-color: #ffffff;
+  border: 1px solid #eaeaea;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 }
 
 .cart-item-discount-badge {

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

@@ -38,6 +38,10 @@
       <span class="cart-total-text">TOTAL:</span>
       <span class="cart-total-text">{{ formattedTotal() }}</span>
     </div>
+
+    <div class="cart-actions mt-3">
+      <ng-content />
+    </div>
   </footer>
 </section>
 

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

@@ -1,7 +1,6 @@
 :host {
   display: block;
   width: 100%;
-  max-width: 370px;
   height: 100%;
 }
 
@@ -59,3 +58,8 @@
   font-size: 15px;
   font-weight: 700;
 }
+
+.cart-actions {
+  display: flex;
+  gap: 12px;
+}