updated carousel view

src/app/components/items-carousel/items-carousel.component.scss

@@ -156,7 +156,7 @@
 .item-image {
   position: relative;
   width: 100%;
-  height: 125px;
+  height: 140px;
   overflow: hidden;
   background: #f5f5f5;
   
@@ -188,15 +188,15 @@
 
 
 .item-details {
-  padding: 0.75rem;
+  padding: 0.625rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex: 1;
 }
 
 .item-name {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   margin: 0;
   line-height: 1.3;
@@ -230,15 +230,23 @@
   }
 }
 
+.item-price-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
 .item-price {
   display: flex;
   align-items: baseline;
   gap: 0.375rem;
   flex-wrap: wrap;
+  flex: 1;
 
   .current-price,
   .discounted-price {
-    font-size: 1rem;
+    font-size: 0.9375rem;
     font-weight: 700;
     color: #1a1a1a;
   }
@@ -248,33 +256,36 @@
   }
 
   .original-price {
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     color: #9ca3af;
     text-decoration: line-through;
   }
 }
 
-
-
-.add-to-cart-btn {
-  width: 100%;
-  padding: 0.625rem 1rem;
+.cart-icon-btn {
+  padding: 0.5rem;
   background: var(--primary-color, #5568d3);
   color: white;
   border: none;
-  border-radius: 0 0 12px 12px;
-  font-size: 0.875rem;
-  font-weight: 600;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  
+  svg {
+    display: block;
+  }
 
   &:hover {
     background: var(--primary-hover, #4456b3);
+    transform: scale(1.05);
   }
 
   &:active {
-  &:active {
-    transform: scale(0.98);
+    transform: scale(0.95);
   }
 }
 
@@ -302,7 +313,7 @@
     border: 1px solid #e5e5e5;
   }
 
-  .add-to-cart-btn {
+  .cart-icon-btn {
     background: var(--primary-color, #5568d3);
 
     &:hover {
@@ -342,105 +353,3 @@
     }
   }
 }
-
-  .carousel-title {
-    font-size: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .carousel-track {
-    gap: 1rem;
-  }
-
-  .carousel-item {
-    flex: 0 0 calc(50% - 0.5rem);
-  }
-
-  .item-image {
-    height: 200px;
-  }
-
-  .item-name {
-    font-size: 1rem;
-  }
-
-  .item-price {
-    .price-current,
-    .price-discount {
-      font-size: 1.25rem;
-    }
-  }
-
-  .btn-add-cart {
-    width: 44px;
-    height: 44px;
-
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .carousel-btn {
-    width: 40px;
-    height: 40px;
-  }
-
-  .carousel-wrapper {
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .items-carousel {
-    padding: 1rem 0;
-  }
-
-  .carousel-container {
-    padding: 0 0.5rem;
-  }
-
-  .carousel-title {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .carousel-track {
-    gap: 0.75rem;
-  }
-
-  .carousel-item {
-    flex: 0 0 100%;
-  }
-
-  .item-image {
-    height: 220px;
-  }
-
-  .carousel-wrapper {
-    gap: 0.5rem;
-  }
-
-  .carousel-btn {
-    width: 36px;
-    height: 36px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .item-info {
-    padding: 1rem;
-  }
-
-  .btn-add-cart {
-    width: 40px;
-    height: 40px;
-  }
-
-  .carousel-indicators {
-    margin-top: 1.5rem;
-  }
-}