Redesign cart and collections, fix product pagination

- Cart drawer: single-column layout matching the site — no bag icon,
  no dividers, square images, tighter type, discount code form,
  estimated total, and a Go to Checkout button
- Cart: per-line loading state so one row's update no longer disables
  every other row or the checkout button
- Discounts: cartDiscountCodesUpdate mutation plus discountCodes on the
  cart fragment, wired to an applyDiscountCode store action
- Products: fix "load more" returning the same first page — the query
  now takes an `after` cursor and getProductsPage exposes pageInfo
- Collections: cards match the product cards (no border, radius, blurb,
  or CTA row) at 4-up on desktop and 2-up on mobile; section headers
  match the products section
- Shop Pay: cart permalink with payment=shop_pay instead of the hosted
  shop-js element
- Buttons converted to the shadcn Button component throughout
- PDP: swipeable image carousel with dots on mobile, sticky info column,
  colour swatches never fall back to variant photos
- Rename the store from Stride to Shop; larger header wordmark

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

components/shopify/product-detail/product-detail-gallery.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { RiCloseLine } from '@remixicon/react';
+import { Button } from '@/components/ui/button';
 
 interface ProductImage {
   url: string;
@@ -95,7 +96,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             key={index}
             onClick={() => setZoomedIndex(index)}
             aria-label={`Zoom ${image.altText || 'product image'}`}
-            className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden bg-white cursor-zoom-in sm:shrink ${
+            className={`relative aspect-square w-full shrink-0 snap-center overflow-hidden bg-white pointer-events-none sm:pointer-events-auto sm:shrink sm:cursor-zoom-in ${
               isSingle ? 'sm:col-span-2' : ''
             }`}
           >
@@ -142,13 +143,15 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             className="max-h-full max-w-full object-contain bg-white"
           />
 
-          <button
+          <Button
             onClick={close}
+            variant="ghost"
+            size="icon-lg"
             aria-label="Close"
-            className="absolute top-4 right-4 h-10 w-10 rounded-full bg-background text-foreground flex items-center justify-center shadow-sm hover:bg-secondary transition-colors"
+            className="absolute top-4 right-4 rounded-full bg-background shadow-sm hover:bg-secondary"
           >
             <RiCloseLine size={20} />
-          </button>
+          </Button>
         </div>
       )}
     </>