add mobile swipe for product card images and fix dev asset caching

Product cards now use CSS scroll-snap on touch devices (mobile) for
swiping between images, with dot indicators and a JS hook for active
state. Desktop keeps the existing hover crossfade via @media (hover:
hover). Dots use size differentiation (WCAG 2.2 AA compliant) with
outline rings for contrast on any background.

Also fixes: no-image placeholder (SVG icon instead of broken img),
unnecessary wrapper div for single-image cards, and dev static asset
caching (was immutable for all envs, now only prod).

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

assets/js/app.js

@@ -284,10 +284,24 @@ const Lightbox = {
   }
 }
 
+const ProductImageScroll = {
+  mounted() {
+    const dots = this.el.parentElement.querySelector('.product-image-dots')
+    if (!dots) return
+    const spans = dots.querySelectorAll('.product-image-dot')
+    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)
+      })
+    }, {passive: true})
+  }
+}
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks, ColorSync, Lightbox, CartPersist, CartDrawer},
+  hooks: {...colocatedHooks, ColorSync, Lightbox, CartPersist, CartDrawer, ProductImageScroll},
 })
 
 // Show progress bar on live navigation and form submits