progressive enhancement for collection filter pills

Flex-wrap base (no JS needed, active pill always visible). JS hook
switches to horizontal scroll with scroll-into-view when pills exceed
2.5 rows on mobile. Desktop always wraps.

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

assets/js/app.js

@@ -458,10 +458,39 @@ const SearchModal = {
   }
 }
 
+// Flex-wrap base → horizontal scroll enhancement for collection category pills.
+// If the pills wrap past 2 rows on mobile, switches to single-row scroll
+// and scrolls the active pill into view.
+const CollectionFilters = {
+  mounted() { this._enhance() },
+  updated() { this._enhance() },
+  _enhance() {
+    const nav = this.el
+    const ul = nav.querySelector("ul")
+    if (!ul) return
+
+    // Reset to measure natural wrap height
+    nav.classList.remove("is-scrollable")
+    const firstItem = ul.querySelector("li")
+    if (!firstItem) return
+
+    const rowHeight = firstItem.offsetHeight
+    const wrapsToMany = ul.scrollHeight > rowHeight * 2.5
+
+    if (wrapsToMany && window.innerWidth < 640) {
+      nav.classList.add("is-scrollable")
+      const active = nav.querySelector("[aria-current]")
+      if (active) {
+        active.scrollIntoView({ inline: "center", block: "nearest", behavior: "instant" })
+      }
+    }
+  }
+}
+
 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, ProductImageScroll, SearchModal},
+  hooks: {...colocatedHooks, ColorSync, Lightbox, CartPersist, CartDrawer, ProductImageScroll, SearchModal, CollectionFilters},
 })
 
 // Show progress bar on live navigation and form submits