From 98548b0df6a29a3b3b03f904412037a3db847995 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 28 Apr 2025 09:21:03 +0200
Subject: [PATCH] feat: refs #8863 add style to price tag

---
 src/components/ui/CatalogItem.vue | 51 +++++++++++++++++++------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/components/ui/CatalogItem.vue b/src/components/ui/CatalogItem.vue
index 0ae890e37..4a212748f 100644
--- a/src/components/ui/CatalogItem.vue
+++ b/src/components/ui/CatalogItem.vue
@@ -60,8 +60,9 @@ const card = toRef(props, 'item');
                 <div class="footer">
                     <div class="price">
                         <p v-if="isCatalog">
-                            {{ card.available }} {{ t('to') }}
-                            {{ toCurrency(card.price) }}
+                            <span class="available">{{ card.available }}</span>
+                            {{ t('to') }}
+                            <span class="price-value">{{ toCurrency(card.price) }}</span>
                         </p>
                         <slot name="price" />
                         <QIcon v-if="isCatalog" name="add_circle" class="icon">
@@ -132,7 +133,6 @@ const card = toRef(props, 'item');
     display: flex;
     flex-direction: column;
     gap: 4px;
-    white-space: nowrap;
     width: 192px;
     p {
         margin-bottom: 0;
@@ -145,28 +145,39 @@ const card = toRef(props, 'item');
 }
 
 .footer {
-    .price {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+  margin-top: auto;
+  width: 100%;
 
-        p {
-            font-size: 12px;
-        }
+  .price {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-        .icon {
-            color: $primary;
-            font-size: 24px;
-            cursor: pointer;
-        }
+    p {
+      font-size: 12px;
     }
 
-    .price-kg {
-        font-size: 12px;
+    .available {
+    color: $primary;
     }
+
+    .price-value {
+      font-weight: bold;
+    }
+
+    .icon {
+      color: $primary;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .price-kg {
+    font-size: 12px;
+  }
 }
 
 .item-color-container {