feat(product-vertical-with-cart-card): add reusable vertical product card component with cart functionality

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -655,6 +655,29 @@
     </div>
   </section>
 
+  <section class="component-demo card shadow-sm mt-4">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-4">Tarjetas de Producto (Vertical With Cart Layout)</h2>
+
+      <p class="text-muted mb-4">
+        Diseño vertical con selector de cantidad y acciones de compra y carrito.
+      </p>
+
+      <div class="row justify-content-center justify-content-md-start">
+        <div class="col-12 col-sm-9 col-md-6 col-lg-5 col-xl-4 mb-4 d-flex align-items-stretch">
+          <app-product-vertical-with-cart-card
+            [title]="testVerticalWithCartProduct.title"
+            [description]="testVerticalWithCartProduct.description"
+            [price]="testVerticalWithCartProduct.price"
+            (buy)="onProductBuy(testVerticalWithCartProduct.title)"
+            (addToCart)="triggerToast('success')"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+
   <app-store-section
     title="PRODUCTOS"
     class="component-demo store-section-demo mt-5"
@@ -677,4 +700,3 @@
     </div>
   </app-store-section>
 </main>
-

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -10,6 +10,9 @@ import { InputComponent } from '../../../../shared/components/input/input.compon
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { ProductRowCardComponent } from '../../../../shared/components/product-row-card/product-row-card.component';
+import {
+  ProductVerticalWithCartCardComponent
+} from '../../../../shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { ModalService } from '../../../../core/services/modal.service';
 import { TenantService } from '../../../../core/services/tenant.service';
@@ -26,6 +29,7 @@ import { StepComponent } from '../../../../shared/components/stepper/step.compon
     PaginatorComponent,
     ProductCardComponent,
     ProductRowCardComponent,
+    ProductVerticalWithCartCardComponent,
     StoreSectionComponent,
     IconButtonComponent,
     CartIconComponent,
@@ -98,6 +102,12 @@ export class ReutilizablesTestPageComponent {
     ]
   };
 
+  protected readonly testVerticalWithCartProduct = {
+    title: 'PANCHO',
+    description: 'Pancho con aderezo a elección.',
+    price: 11500
+  };
+
   protected readonly cartMockItems: CartItemMock[] = [
     {
       imageUrl: null,