From 57a1e66d1afbde704c3fa0d31abcc7f8edc0b56b Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Tue, 30 Jun 2026 10:25:33 -0300
Subject: [PATCH] feat: update product carousel layout and styling for improved
 responsiveness

---
 .../product-carousel.component.html                 |  6 +++---
 .../product-carousel.component.scss                 | 13 ++++++++-----
 .../product-detail-page.component.html              |  2 +-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/features/store/components/product-carousel/product-carousel.component.html b/src/app/features/store/components/product-carousel/product-carousel.component.html
index b5bd7b2..defccde 100644
--- a/src/app/features/store/components/product-carousel/product-carousel.component.html
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.html
@@ -1,4 +1,4 @@
-<div class="product-carousel d-flex flex-column gap-3">
+<div class="product-carousel d-flex flex-column gap-4">
   <!-- Active/Main Image Area -->
   <div class="product-carousel__main position-relative bg-light  overflow-hidden">
     <!-- Main Image -->
@@ -38,7 +38,7 @@
 
   <!-- Thumbnails Row -->
   @if (images().length > 1) {
-  <div class="product-carousel__thumbnails d-flex gap-3">
+  <div class="product-carousel__thumbnails">
     @for (image of images(); track image; let idx = $index) {
     <button type="button" class="product-carousel__thumbnail border-0 p-0  overflow-hidden bg-light"
       [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
@@ -48,4 +48,4 @@
     }
   </div>
   }
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/features/store/components/product-carousel/product-carousel.component.scss b/src/app/features/store/components/product-carousel/product-carousel.component.scss
index e778109..041ade9 100644
--- a/src/app/features/store/components/product-carousel/product-carousel.component.scss
+++ b/src/app/features/store/components/product-carousel/product-carousel.component.scss
@@ -2,7 +2,7 @@
   width: 100%;
 
   &__main {
-    aspect-ratio: 463 / 489;
+    aspect-ratio: 1 / 1;
     width: 100%;
     background-color: #e0e0e0 !important;
     /* Matches grey placeholder in mock */
@@ -13,6 +13,7 @@
   }
 
   &__main-image {
+    display: block;
     padding: 0;
     transition: transform 0.3s ease;
   }
@@ -57,12 +58,14 @@
   }
 
   &__thumbnails {
-    margin-top: 1rem;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5rem;
+    width: 100%;
   }
 
   &__thumbnail {
-    width: 80px;
-    height: 80px;
+    width: 100%;
     aspect-ratio: 1 / 1;
     background-color: #e0e0e0 !important;
     /* Matches mock layout */
@@ -86,4 +89,4 @@
       opacity: 1;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.html b/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
index fb96610..a29ca38 100644
--- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
+++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.html
@@ -13,7 +13,7 @@
     } @else if (product(); as prod) {
       <div class="row">
         <!-- Carousel takes ~33.3% width on md/lg screens -->
-        <div class="col-12 col-md-4">
+        <div class="col-12 col-md-5">
           <app-product-carousel [images]="carouselImages()" [discount]="20" />
         </div>
       </div>