Add collection filters and sort, out-of-stock options, gallery drag

- Collections: filters and sort via the Storefront API — the products
  connection now takes `filters`/`after` and returns its facets, with
  cursor-based load more on the collection page
- Extract ProductFilters (renamed from SearchFilters) and a shared
  ProductToolbar so search and collections use the same chrome
- PDP: mark option values with no in-stock variant using a diagonal
  strike, computed against the other selected options
- PDP: pointer drag-scrolling for the mobile image carousel, since a
  scroll container doesn't drag with a mouse
- Header/cart: circular icon buttons, tighter spacing, and icon sizes
  set by class (Button's base CSS clamps un-classed svgs to size-4)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX

components/shopify/cart-drawer.tsx

@@ -126,10 +126,11 @@ const CartDrawer: React.FC = () => {
                 <Button
                   onClick={closeCart}
                   variant="ghost"
-                  size="icon-sm"
+                  size="icon"
                   aria-label="Close cart"
+                  className="rounded-full"
                 >
-                  <RiCloseLine size={20} />
+                  <RiCloseLine className="size-5" />
                 </Button>
               </div>
             </SheetHeader>
@@ -138,7 +139,7 @@ const CartDrawer: React.FC = () => {
             <SheetBody className="px-5">
               {loading && items.length === 0 ? (
                 <div className="flex items-center justify-center py-12">
-                  <Loader size={32} />
+                  <Loader size={20} />
                 </div>
               ) : items.length === 0 ? (
                 <Empty>