From ede2173a5a30d497c35dd1869c6287ddcfd06ff5 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Tue, 11 Aug 2026 10:38:42 -0300
Subject: [PATCH] feat: update styles for small quantity selector to improve
 appearance and usability

---
 .../product-row-card.component.scss           | 48 +++++++++++++++++++
 .../quantity-selector.component.scss          | 14 +++---
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/product-row-card/product-row-card.component.scss b/src/app/shared/components/product-row-card/product-row-card.component.scss
index b4ddae3..9451a69 100644
--- a/src/app/shared/components/product-row-card/product-row-card.component.scss
+++ b/src/app/shared/components/product-row-card/product-row-card.component.scss
@@ -77,6 +77,54 @@
   }
 }
 
+@media (min-width: 992px) {
+  .product-row-card {
+    &__info {
+      min-width: 0;
+    }
+
+    &__actions,
+    &__summary,
+    &__buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &__actions {
+      flex: 0 0 auto;
+      gap: 0.75rem;
+    }
+
+    &__summary,
+    &__buttons {
+      gap: 0.5rem;
+    }
+
+    &__price {
+      align-self: center;
+    }
+
+    &__selectors {
+      width: auto;
+
+      ::ng-deep .variant-selector {
+        display: flex;
+        width: auto;
+      }
+
+      ::ng-deep .variant-selector__select {
+        width: auto;
+        min-width: 108px;
+      }
+    }
+
+    &__btn-wrapper {
+      min-width: 140px;
+    }
+  }
+}
+
 @media (max-width: 991.98px) {
   .product-row-card {
     align-items: stretch;
diff --git a/src/app/shared/components/quantity-selector/quantity-selector.component.scss b/src/app/shared/components/quantity-selector/quantity-selector.component.scss
index bb6199e..241af5d 100644
--- a/src/app/shared/components/quantity-selector/quantity-selector.component.scss
+++ b/src/app/shared/components/quantity-selector/quantity-selector.component.scss
@@ -39,15 +39,15 @@
   }
 
   &--small {
-    width: 46px;
-    height: 21px;
-    min-height: 21px;
-    border: 1px solid #cfcfcf;
+    width: 62px;
+    height: 28px;
+    min-height: 28px;
+    border-color: #cccccc;
     background-color: #ffffff;
 
     .quantity-selector__button {
-      width: 15px;
-      font-size: 10px;
+      width: 18px;
+      font-size: 11px;
       background-color: #ffffff;
       color: #666666;
 
@@ -57,7 +57,7 @@
     }
 
     .quantity-selector__value {
-      font-size: 10px;
+      font-size: 11px;
       color: #666666;
     }
   }