replace PDP image gallery with scroll-snap carousel

Mobile: swipeable carousel with dot indicators, no lightbox trigger.
Desktop: carousel with thumbnail grid, prev/next arrows, click to
open existing lightbox. Keeps all lightbox appearance and behaviour.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/js/app.js

@@ -286,15 +286,41 @@ const Lightbox = {
 
 const ProductImageScroll = {
   mounted() {
-    const dots = this.el.parentElement.querySelector('.product-image-dots')
-    if (!dots) return
-    const spans = dots.querySelectorAll('.product-image-dot')
+    const container = this.el.parentElement
+    const dots = container.querySelector('.product-image-dots')
+    const spans = dots ? dots.querySelectorAll('.product-image-dot') : []
+    const lightbox = container.parentElement.querySelector('dialog')
+    const thumbs = container.parentElement.querySelector('.pdp-gallery-thumbs')
+    const thumbButtons = thumbs ? thumbs.querySelectorAll('.pdp-thumbnail') : []
+    const imageCount = this.el.children.length
+
     this.el.addEventListener('scroll', () => {
       const index = Math.round(this.el.scrollLeft / this.el.offsetWidth)
       spans.forEach((dot, i) => {
         dot.classList.toggle('product-image-dot-active', i === index)
       })
+      thumbButtons.forEach((btn, i) => {
+        btn.classList.toggle('pdp-thumbnail-active', i === index)
+      })
+      if (lightbox) lightbox.dataset.currentIndex = index.toString()
     }, {passive: true})
+
+    this.el.addEventListener('pdp:scroll-to', (e) => {
+      const index = e.detail.index
+      this.el.scrollTo({left: index * this.el.offsetWidth, behavior: 'smooth'})
+    })
+
+    this.el.addEventListener('pdp:scroll-prev', () => {
+      const current = Math.round(this.el.scrollLeft / this.el.offsetWidth)
+      const target = (current - 1 + imageCount) % imageCount
+      this.el.scrollTo({left: target * this.el.offsetWidth, behavior: 'smooth'})
+    })
+
+    this.el.addEventListener('pdp:scroll-next', () => {
+      const current = Math.round(this.el.scrollLeft / this.el.offsetWidth)
+      const target = (current + 1) % imageCount
+      this.el.scrollTo({left: target * this.el.offsetWidth, behavior: 'smooth'})
+    })
   }
 }