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

src/app/core/layout/store-layout/store-layout.component.html

@@ -1,5 +1,6 @@
 <div class="store-layout d-flex flex-column flex-grow-1">
   <app-store-header
+    ngSkipHydration
     [cartQuantity]="cartQuantity()"
     [logoUrl]="tenant()?.header_logo ?? null"
     [user]="user()"

src/app/shared/components/cart-item/cart-item.component.scss

@@ -120,8 +120,8 @@
 }
 
 .cart-item-variant-selector {
-  display: flex;
+  display: block;
-  justify-content: flex-end;
+  width: 100%;
 }
 
 .cart-item-remove-btn {

src/app/shared/components/product-list/product-list.component.scss

@@ -12,6 +12,8 @@
 
   &--row {
     --product-list-item-min-width: 32rem;
+
+    gap: 0;
   }
 
   &--adaptive {

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

@@ -1,6 +1,4 @@
-<div
+<div class="product-row-card">
-  class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"
->
   <!-- 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 -->
+  <!-- Right Side: Selectors and quantity first, then price -->
-  <div class="product-row-card__actions d-flex flex-column gap-2 justify-content-center">
+  <div class="product-row-card__actions">
-    <!-- Top Row: Price and Comprar button -->
+    <div class="product-row-card__summary">
-    <div class="d-flex align-items-center justify-content-end gap-3">
+      <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 */
+  padding: 2rem 0;
-  border-color: #e9ecef !important;
+  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;
+    }
+  }
+}

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss

@@ -73,16 +73,6 @@
     width: 100%;
   }
 
-  &__variant-selectors ::ng-deep .variant-selector {
-    flex-wrap: nowrap;
-    width: 100%;
-  }
-
-  &__variant-selectors ::ng-deep .variant-selector__select {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-
   &__price {
     color: var(--tenant-primary, #009933);
     font-size: 22px;

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -1,19 +1,22 @@
 :host {
   display: block;
+  width: 100%;
   min-width: 0;
 }
 
 .variant-selector {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: center;
   gap: 8px;
+  width: 100%;
   min-width: 0;
-  flex-wrap: wrap;
 }
 
 .variant-selector__select {
-  width: auto;
+  width: 100%;
-  min-width: 120px;
+  min-width: 0;
+  max-width: none;
   height: 38px;
   color: #666666;
   border-color: #cccccc;
@@ -24,35 +27,20 @@
     border-color: var(--tenant-primary);
     box-shadow: 0 0 0 0.25rem rgba(0, 153, 51, 0.25);
   }
+
+  &:first-child:nth-last-child(odd) {
+    grid-column: 1 / -1;
+  }
 }
 
 .variant-selector--compact {
-  justify-content: flex-end;
   gap: 4px;
 
   .variant-selector__select {
     min-width: 0;
-    max-width: 150px;
+    max-width: none;
     height: 28px;
     padding: 0.2rem 1.75rem 0.2rem 0.45rem;
     font-size: 11px;
   }
 }
-
-@media (max-width: 767.98px) {
-  .variant-selector {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    width: 100%;
-  }
-
-  .variant-selector__select {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-
-    &:first-child:nth-last-child(odd) {
-      grid-column: 1 / -1;
-    }
-  }
-}