feat: update layout and styles for product components and variant selectors

src/app/shared/components/product-row-card/product-row-card.component.html

@@ -1,6 +1,4 @@
-<div
-  class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"
->
+<div class="product-row-card">
   <!-- Left Side: Title and Description -->
   <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
     <h3 class="product-row-card__title text-uppercase mb-1 m-0">
@@ -13,28 +11,28 @@
     }
   </div>
 
-  <!-- Right Side: Actions and Pricing -->
-  <div class="product-row-card__actions d-flex flex-column gap-2 justify-content-center">
-    <!-- Top Row: Price and Comprar button -->
-    <div class="d-flex align-items-center justify-content-end gap-3">
+  <!-- Right Side: Selectors and quantity first, then price -->
+  <div class="product-row-card__actions">
+    <div class="product-row-card__summary">
+      <div class="product-row-card__controls">
+        <app-variant-selector
+          class="product-row-card__selectors"
+          [variants]="variants()"
+          [(selectedVariant)]="selectedVariant"
+        />
+
+        <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
+      </div>
+
       <span class="product-row-card__price text-primary">
         {{ formattedPrice() }}
       </span>
+    </div>
+
+    <div class="product-row-card__buttons">
       <div class="product-row-card__btn-wrapper">
         <app-button variant="primary" (click)="onBuy()"> Comprar </app-button>
       </div>
-    </div>
-
-    <!-- Bottom Row: Attribute selects, Quantity, and Agregar al carrito button -->
-    <div class="d-flex align-items-center justify-content-end gap-2">
-      <app-variant-selector
-        class="product-row-card__selectors"
-        [variants]="variants()"
-        [(selectedVariant)]="selectedVariant"
-      />
-
-      <app-quantity-selector [(quantity)]="quantity"></app-quantity-selector>
-
       <div class="product-row-card__btn-wrapper">
         <app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
       </div>

src/app/shared/components/product-row-card/product-row-card.component.scss

@@ -4,9 +4,14 @@
 }
 
 .product-row-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
   width: 100%;
-  background-color: #f8f9fa; /* slightly light bg matching the screenshot if needed, but let's use white or #f8f9fa based on the border */
-  border-color: #e9ecef !important;
+  padding: 2rem 0;
+  border-bottom: 1px solid #e3e3e3;
+  background: transparent;
 
   &__title {
     font-size: 16px;
@@ -26,13 +31,38 @@
   }
 
   &__price {
+    display: block;
+    align-self: flex-end;
     font-size: 20px;
     font-weight: 800;
-    color: var(--tenant-primary, #009933) !important; /* Green matching screenshot */
+    color: var(--tenant-primary, #009933) !important;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: grid;
+    grid-template-columns: minmax(0, auto) 160px;
+    align-items: stretch;
+    gap: 0.75rem 2.5rem;
+  }
+
+  &__summary,
+  &__buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
   }
 
   &__btn-wrapper {
-    min-width: 160px; /* To make both buttons equal width as in screenshot */
+    min-width: 160px;
 
     app-button {
       display: block;
@@ -46,3 +76,14 @@
     }
   }
 }
+
+@media (max-width: 991.98px) {
+  .product-row-card {
+    align-items: stretch;
+    flex-direction: column;
+
+    &__actions {
+      grid-template-columns: minmax(0, 1fr) 160px;
+    }
+  }
+}