feat: update product carousel layout and styling for improved responsiveness

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>
+</div>

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;
     }
   }
-}
+}

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>