From 5566e011b75c23ebce77caf885ae4021c1b92ef2 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Tue, 24 Mar 2026 03:24:34 +0400
Subject: [PATCH] fixed cart

---
 src/app/pages/cart/cart.component.html |  9 ++++++---
 src/app/pages/cart/cart.component.scss | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/cart/cart.component.html b/src/app/pages/cart/cart.component.html
index 90c143d..ad5406e 100644
--- a/src/app/pages/cart/cart.component.html
+++ b/src/app/pages/cart/cart.component.html
@@ -46,12 +46,15 @@
                 
                 <p class="item-description">{{ itemDesc(item) || '' }}...</p>
 
-                @if (item.colour || item.size) {
+                @if (item.colour || (item.size && item.size.toLowerCase() !== 'default')) {
                   <div class="cart-item-variants">
                     @if (item.colour) {
-                      <span class="cart-variant">{{ 'itemDetail.colour' | translate }}: {{ item.colour }}</span>
+                      <span class="cart-variant cart-variant-colour">
+                        {{ 'itemDetail.colour' | translate }}:
+                        <span class="cart-colour-swatch" [style.background-color]="item.colour" [title]="item.colour"></span>
+                      </span>
                     }
-                    @if (item.size) {
+                    @if (item.size && item.size.toLowerCase() !== 'default') {
                       <span class="cart-variant">{{ 'itemDetail.size' | translate }}: {{ item.size }}</span>
                     }
                   </div>
diff --git a/src/app/pages/cart/cart.component.scss b/src/app/pages/cart/cart.component.scss
index 9c75ba6..9e57aa9 100644
--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
@@ -368,6 +368,7 @@
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
+    align-items: center;
     margin-top: 4px;
 
     .cart-variant {
@@ -377,6 +378,18 @@
       padding: 3px 10px;
       border-radius: 6px;
       font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .cart-colour-swatch {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      vertical-align: middle;
     }
   }
 
@@ -484,6 +497,7 @@
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
+    align-items: center;
     margin-top: 4px;
 
     .cart-variant {
@@ -493,6 +507,18 @@
       padding: 3px 10px;
       border-radius: 6px;
       font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .cart-colour-swatch {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      vertical-align: middle;
     }
   }