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/product-detail/index.tsx

@@ -78,6 +78,24 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   }, [product]);
 
+  // A value is available if some in-stock variant carries it alongside the
+  // other currently-selected options. Options the shopper hasn't chosen yet
+  // act as wildcards, so nothing is struck through before a full selection.
+  const isOptionValueAvailable = (optionName: string, value: string) => {
+    const variants = product?.variants.edges ?? [];
+    if (variants.length === 0) return true;
+
+    return variants.some(({ node }) => {
+      if (!node.availableForSale) return false;
+
+      return node.selectedOptions.every((option) => {
+        if (option.name === optionName) return option.value === value;
+        const selected = selectedOptions[option.name];
+        return selected === undefined || selected === option.value;
+      });
+    });
+  };
+
   const handleOptionChange = (optionName: string, value: string) => {
     const newOptions = { ...selectedOptions, [optionName]: value };
     setSelectedOptions(newOptions);
@@ -197,6 +215,7 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
               handleAddToCart={handleAddToCart}
               handleBuyNow={handleBuyNow}
               onOptionChange={handleOptionChange}
+              isOptionValueAvailable={isOptionValueAvailable}
               loading={addingToCart}
               buyingNow={buyingNow}
               addToCartLabel={addToCartLabel}