feat: redesign contact page for POD sellers & add theme enhancements

Contact page redesign:
- Replace retail-style contact info (phone, address, hours) with POD-appropriate layout
- Add order tracking card with email input
- Add "Handy to know" section with printing/delivery/returns info
- Add email contact with response time promise
- Add social links (Instagram, Pinterest)
- Update intro text to be warmer and more personal

Collection page improvements:
- Replace sidebar filters with horizontal category pills
- Add filter pill CSS with theme token integration

PDP enhancements:
- Add image lightbox with keyboard navigation
- Add thumbnail gallery with active state
- Add reviews section (toggleable)
- Add related products section (toggleable)
- Add trust badges section (toggleable)

Theme system additions:
- Add button_style setting (filled/outline/soft)
- Add product_text_align setting (left/center)
- Add image_aspect_ratio setting (square/portrait/landscape)
- Add responsive form layouts with flex-wrap

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

assets/js/app.js

@@ -43,11 +43,104 @@ const ColorSync = {
   }
 }
 
+// Hook for PDP image lightbox
+const Lightbox = {
+  mounted() {
+    const dialog = this.el
+    const lightboxImage = dialog.querySelector('#lightbox-image')
+    const lightboxCounter = dialog.querySelector('#lightbox-counter')
+
+    // Get images from data attribute
+    const getImages = () => {
+      try {
+        return JSON.parse(dialog.dataset.images || '[]')
+      } catch {
+        return []
+      }
+    }
+
+    const getCurrentIndex = () => parseInt(dialog.dataset.currentIndex || '0', 10)
+    const setCurrentIndex = (idx) => { dialog.dataset.currentIndex = idx.toString() }
+
+    const updateImage = () => {
+      const images = getImages()
+      const idx = getCurrentIndex()
+      if (images.length > 0 && lightboxImage) {
+        lightboxImage.src = images[idx]
+        if (lightboxCounter) {
+          lightboxCounter.textContent = `${idx + 1} / ${images.length}`
+        }
+      }
+    }
+
+    const nextImage = () => {
+      const images = getImages()
+      const newIdx = (getCurrentIndex() + 1) % images.length
+      setCurrentIndex(newIdx)
+      updateImage()
+    }
+
+    const prevImage = () => {
+      const images = getImages()
+      const newIdx = (getCurrentIndex() - 1 + images.length) % images.length
+      setCurrentIndex(newIdx)
+      updateImage()
+    }
+
+    const openLightbox = () => {
+      updateImage()
+      dialog.showModal()
+    }
+
+    const closeLightbox = () => {
+      dialog.close()
+    }
+
+    // Event listeners for custom events dispatched from LiveView.JS
+    dialog.addEventListener('pdp:open-lightbox', openLightbox)
+    dialog.addEventListener('pdp:close-lightbox', closeLightbox)
+    dialog.addEventListener('pdp:next-image', nextImage)
+    dialog.addEventListener('pdp:prev-image', prevImage)
+
+    // Close on clicking backdrop
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) {
+        closeLightbox()
+      }
+    })
+
+    // Keyboard navigation
+    dialog.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowRight') {
+        nextImage()
+      } else if (e.key === 'ArrowLeft') {
+        prevImage()
+      } else if (e.key === 'Escape') {
+        closeLightbox()
+      }
+    })
+
+    // Store cleanup function
+    this.cleanup = () => {
+      dialog.removeEventListener('pdp:open-lightbox', openLightbox)
+      dialog.removeEventListener('pdp:close-lightbox', closeLightbox)
+      dialog.removeEventListener('pdp:next-image', nextImage)
+      dialog.removeEventListener('pdp:prev-image', prevImage)
+    }
+  },
+
+  destroyed() {
+    if (this.cleanup) {
+      this.cleanup()
+    }
+  }
+}
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks, ColorSync},
+  hooks: {...colocatedHooks, ColorSync, Lightbox},
 })
 
 // Show progress bar on live navigation and form submits
@@ -55,6 +148,14 @@ topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 
+// Scroll preview frame to top when changing pages
+window.addEventListener("phx:scroll-preview-top", (e) => {
+  const previewFrame = document.querySelector('.preview-frame')
+  if (previewFrame) {
+    previewFrame.scrollTop = 0
+  }
+})
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()