Redesign product detail page and fix icon/cart reactivity bugs

- SingleProduct.vue: rebuild gallery/header/action bar as a self-scrolling
  layout with a sticky photo, solid-on-scroll header matching PageBar, and
  a full-screen image preview (blurred overlay, centered thumbnail strip)
- Add GallerySlider.vue: pointer-based swipe carousel isolated in an
  LTR subtree, fixing RTL/transform sign mismatch that caused slide jumps
- Fix Icon.vue: icon was read into a plain ref once at setup and never
  updated on prop change; switch to computed so icon swaps (e.g. cart
  qty stepper trash/minus toggle) actually re-render
- Fix quantity stepper DOM order in SingleProduct.vue/CartItem.vue so
  plus/minus render correctly under RTL flex
- prisma/assign-downloaded-images.js: seed real product photos (FEATURED/
  FEATURED_MOBILE/GALLERY/GALLERY_MOBILE) onto the 5 placeholder products

apps/api/prisma/schema.prisma

@@ -320,11 +320,22 @@ model Product {
 }
 
 model ProductImage {
-  id        String  @id @default(cuid())
+  id        String           @id @default(cuid())
   productId String
-  product   Product @relation(fields: [productId], references: [id])
+  product   Product          @relation(fields: [productId], references: [id])
   url       String
-  sortOrder Int     @default(0)
+  sortOrder Int              @default(0)
+  /// Legacy had 4 distinct upload slots (تصویر شاخص / تصویر شاخص موبایل /
+  /// گالری تصاویر سایت / گالری تصاویر موبایل) — GALLERY is the default so
+  /// existing rows and any generic "just attach an image" caller keep working.
+  role      ProductImageRole @default(GALLERY)
+}
+
+enum ProductImageRole {
+  FEATURED
+  FEATURED_MOBILE
+  GALLERY
+  GALLERY_MOBILE
 }
 
 model ProductVariant {