feat: implement cart component with mock data and styling for improved cart functionality

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

@@ -0,0 +1,45 @@
+<article class="cart-item">
+  <div class="cart-item__media">
+    @if (discountPercentage() && discountPercentage()! > 0) {
+      <span class="cart-item__discount-badge">-{{ discountPercentage() }}%</span>
+    }
+
+    @if (imageUrl()) {
+      <img class="cart-item__image" [src]="imageUrl()" [alt]="product()" />
+    } @else {
+      <div class="cart-item__image cart-item__image--placeholder" aria-hidden="true"></div>
+    }
+  </div>
+
+  <div class="cart-item__content">
+    <div class="cart-item__top-row">
+      <h3 class="cart-item__product">{{ product() }}</h3>
+
+      <div class="cart-item__prices">
+        @if (formattedOriginalPrice(); as originalPrice) {
+          <span class="cart-item__price cart-item__price--original">{{ originalPrice }}</span>
+        }
+
+        <span class="cart-item__price cart-item__price--discounted">{{ formattedDiscountedPrice() }}</span>
+      </div>
+    </div>
+
+    <div class="cart-item__attributes">
+      @for (attribute of attributes(); track attribute.label + attribute.value) {
+        <div class="cart-item__attribute">
+          <span class="cart-item__attribute-label">{{ attribute.label }}:</span>
+          <span class="cart-item__attribute-value">{{ attribute.value }}</span>
+        </div>
+      }
+    </div>
+
+    <div class="cart-item__actions" aria-hidden="true">
+      <button class="cart-item__quantity-control" type="button">-</button>
+      <span class="cart-item__quantity">{{ quantity() }}</span>
+      <button class="cart-item__quantity-control" type="button">+</button>
+      <button class="cart-item__remove" type="button">
+        <i class="fa-solid fa-trash-can"></i>
+      </button>
+    </div>
+  </div>
+</article>