Tighten storefront cards and rebuild the product page.

Match carousel cards on XL, add gallery zoom/lightbox, quantity and comments, and update the sale banner slot to 2:3.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ProductCarousel.tsx

@@ -47,21 +47,23 @@ export function ProductCarousel({
         {leadBanner ? (
           <div
             data-card
-            className="flex w-[280px] min-h-[320px] shrink-0 snap-start self-stretch overflow-hidden rounded-3xl sm:w-[300px]"
+            className="carousel-card relative min-h-0 self-stretch overflow-hidden rounded-3xl"
             aria-label="بنر فروش ویژه"
           >
-            <SlotImage
-              image={saleBanner}
-              fallbackSrc="/images/sale-banner.png"
-              fallbackAlt="فروش ویژه"
-              aspectRatio={bannerSlot?.aspectRatio}
-              width={300}
-              height={500}
-              rounded="rounded-3xl"
-              fill
-              className="h-full w-full"
-              fallbackHref="/special-sale"
-            />
+            <div className="absolute inset-0">
+              <SlotImage
+                image={saleBanner}
+                fallbackSrc="/images/sale-banner.png"
+                fallbackAlt="فروش ویژه"
+                aspectRatio={bannerSlot?.aspectRatio ?? "2:3"}
+                width={260}
+                height={390}
+                rounded="rounded-3xl"
+                fill
+                className="h-full w-full object-cover"
+                fallbackHref="/special-sale"
+              />
+            </div>
           </div>
         ) : null}
         {products.map((product) => (