feat: implement product detail page with catalog service integration and image carousel support

src/app/features/store/components/product-carousel/product-carousel.component.html

@@ -6,7 +6,7 @@
       <img
         [src]="images()[activeIndex()]"
         alt="Product active image"
-        class="product-carousel__main-image w-100 h-100 object-fit-contain"
+        class="product-carousel__main-image w-100 h-100 object-fit-cover"
       />
     } @else {
       <!-- Placeholder -->
@@ -55,7 +55,7 @@
           (click)="selectImage(idx)"
           [attr.aria-label]="'Select image ' + (idx + 1)"
         >
-          <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-contain" />
+          <img [src]="image" alt="Product thumbnail" class="w-100 h-100 object-fit-cover" />
         </button>
       }
     </div>

src/app/features/store/components/product-carousel/product-carousel.component.scss

@@ -12,7 +12,7 @@
   }
 
   &__main-image {
-    padding: 1rem;
+    padding: 0;
     transition: transform 0.3s ease;
   }
 
@@ -65,7 +65,7 @@
     aspect-ratio: 1 / 1;
     background-color: #e0e0e0 !important; /* Matches mock layout */
     border-radius: 4px;
-    padding: 0.25rem;
+    padding: 0;
     transition: opacity 0.2s ease, border-color 0.2s ease;
     border: 3px solid transparent !important;
     cursor: pointer;
@@ -73,7 +73,7 @@
     img {
       width: 100%;
       height: 100%;
-      object-fit: contain;
+      object-fit: cover;
     }
 
     &:hover {