Support variant-aware cart lines

src/app/pages/cart/cart.component.html

@@ -37,7 +37,7 @@
               <div class="item-info">
                 <div class="item-header">
                   <a [routerLink]="['/item', item.itemID] | langRoute" class="item-name">{{ itemName(item) }}</a>
-                  <button class="remove-btn" (click)="removeItem(item.itemID)" title="Remove">
+                  <button class="remove-btn" (click)="removeItem(item)" title="Remove">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                       <path d="M18 6L6 18M6 6l12 12"/>
                     </svg>
@@ -81,13 +81,13 @@
                   </div>
 
                   <div class="quantity-controls">
-                    <button class="qty-btn" (click)="decreaseQuantity(item.itemID, item.quantity)" [disabled]="item.quantity <= 1">
+                    <button class="qty-btn" (click)="decreaseQuantity(item)" [disabled]="item.quantity <= 1">
                       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                         <path d="M5 12h14"/>
                       </svg>
                     </button>
                     <span class="qty-value">{{ item.quantity }}</span>
-                    <button class="qty-btn" (click)="increaseQuantity(item.itemID, item.quantity)">
+                    <button class="qty-btn" (click)="increaseQuantity(item)">
                       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                         <path d="M12 5v14M5 12h14"/>
                       </svg>
@@ -104,7 +104,7 @@
               </div>
             </div>
             
-            <button class="delete-btn-mobile" (click)="removeItem(item.itemID)">
+            <button class="delete-btn-mobile" (click)="removeItem(item)">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                 <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="white" stroke-width="2" stroke-linecap="round"/>
               </svg>

src/app/pages/cart/cart.component.ts

@@ -102,27 +102,36 @@ export class CartComponent implements OnDestroy {
     }
   }
 
-  removeItem(itemID: number): void {
+  removeItem(item: CartItem): void {
-    this.cartService.removeItem(itemID);
+    this.cartService.removeItem(item.itemID, this.cartVariant(item));
     this.swipedItemId.set(null);
   }
 
-  updateQuantity(itemID: number, quantity: number): void {
+  updateQuantity(item: CartItem, quantity: number): void {
-    this.cartService.updateQuantity(itemID, quantity);
+    this.cartService.updateQuantity(item.itemID, quantity, this.cartVariant(item));
   }
 
-  increaseQuantity(itemID: number, currentQuantity: number): void {
+  increaseQuantity(item: CartItem): void {
-    this.updateQuantity(itemID, currentQuantity + 1);
+    this.updateQuantity(item, item.quantity + 1);
   }
 
-  decreaseQuantity(itemID: number, currentQuantity: number): void {
+  decreaseQuantity(item: CartItem): void {
-    if (currentQuantity <= 1) {
+    if (item.quantity <= 1) {
-      this.removeItem(itemID);
+      this.removeItem(item);
     } else {
-      this.updateQuantity(itemID, currentQuantity - 1);
+      this.updateQuantity(item, item.quantity - 1);
     }
   }
 
+  private cartVariant(item: CartItem): { colour?: string; size?: string; price?: number; currency?: string } {
+    return {
+      colour: item.colour,
+      size: item.size,
+      price: item.price,
+      currency: item.currency,
+    };
+  }
+
   onSwipeStart(itemID: number, event: TouchEvent): void {
     const startX = event.touches[0].clientX;
     

src/app/services/cart.service.ts

@@ -5,6 +5,8 @@ import { normalizeDeliveryOption, normalizeOptionalNumber } from '../utils/norma
 import { environment } from '../../environments/environment';
 import type { } from '../types/telegram.types';
 
+type CartVariant = { colour?: string; size?: string; price?: number; currency?: string };
+
 @Injectable({
   providedIn: 'root'
 })
@@ -187,16 +189,30 @@ export class CartService {
     return false;
   }
 
-  addItem(itemID: number, quantity: number = 1, variant?: { colour?: string; size?: string; price?: number; currency?: string }): void {
+  private normalizeVariantSize(size?: string): string {
+    return size && size.toLowerCase() !== 'default' ? size : '';
+  }
+
+  private isSameCartLine(item: CartItem, itemID: number, variant?: CartVariant): boolean {
+    return item.itemID === itemID
+      && (item.colour ?? '') === (variant?.colour ?? '')
+      && this.normalizeVariantSize(item.size) === this.normalizeVariantSize(variant?.size);
+  }
+
+  private findCartLineIndex(itemID: number, variant?: CartVariant): number {
+    return this.cartItems().findIndex(item => this.isSameCartLine(item, itemID, variant));
+  }
+
+  addItem(itemID: number, quantity: number = 1, variant?: CartVariant): void {
     // Prevent duplicate API calls for same item
     if (this.addingItems.has(itemID)) return;
     
     const currentItems = this.cartItems();
-    const existingItem = currentItems.find(i => i.itemID === itemID);
+    const existingItem = currentItems.find(i => this.isSameCartLine(i, itemID, variant));
     
     if (existingItem) {
       // Item exists, increase quantity
-      this.updateQuantity(itemID, existingItem.quantity + quantity);
+      this.updateQuantity(itemID, existingItem.quantity + quantity, variant);
     } else {
       // Get item details from API and add to cart
       this.addingItems.add(itemID);
@@ -226,15 +242,15 @@ export class CartService {
     }
   }
 
-  updateQuantity(itemID: number, quantity: number): void {
+  updateQuantity(itemID: number, quantity: number, variant?: CartVariant): void {
     if (quantity <= 0) {
-      this.removeItem(itemID);
+      this.removeItem(itemID, variant);
       return;
     }
     
     const currentItems = this.cartItems();
     const updatedItems = currentItems.map(item =>
-      item.itemID === itemID ? { ...item, quantity } : item
+      this.isSameCartLine(item, itemID, variant) ? { ...item, quantity } : item
     );
     this.cartItems.set(updatedItems);
   }
@@ -261,8 +277,19 @@ export class CartService {
     this.cartItems.set(updatedItems);
   }
 
-  removeItem(itemID: number): void {
+  removeItem(itemID: number, variant?: CartVariant): void {
-    this.removeItems([itemID]);
+    if (!variant) {
+      this.removeItems([itemID]);
+      return;
+    }
+
+    const lineIndex = this.findCartLineIndex(itemID, variant);
+    if (lineIndex === -1) {
+      return;
+    }
+
+    const updatedItems = this.cartItems().filter((_item, index) => index !== lineIndex);
+    this.cartItems.set(updatedItems);
   }
 
   clearCart(): void {