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/header.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useCartStore } from '@/hooks/use-shopify-cart';
 import CartDrawer from '@/components/shopify/cart-drawer';
 import { RiShoppingBagLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
+import { Button } from '@/components/ui/button';
 
 const CartIcon: React.FC = () => {
   const toggleCart = useCartStore((s) => s.toggleCart);
@@ -13,10 +14,12 @@ const CartIcon: React.FC = () => {
     cart?.lines?.edges?.reduce((sum, { node }) => sum + node.quantity, 0) ?? 0;
 
   return (
-    <button
+    <Button
       onClick={toggleCart}
+      variant="ghost"
+      size="icon"
       aria-label={`Open bag (${itemCount})`}
-      className="relative p-2 text-foreground hover:text-muted-foreground transition-colors"
+      className="relative"
     >
       <RiShoppingBagLine size={20} />
       {itemCount > 0 && (
@@ -24,7 +27,7 @@ const CartIcon: React.FC = () => {
           {itemCount > 99 ? '99+' : itemCount}
         </span>
       )}
-    </button>
+    </Button>
   );
 };
 
@@ -40,7 +43,7 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({
-  storeName = 'STRIDE',
+  storeName = 'Shop',
   logoUrl,
   links = [
     { label: 'Shop', url: '/' },
@@ -62,7 +65,7 @@ const Header: React.FC<HeaderProps> = ({
                 className="h-6 w-auto object-contain"
               />
             ) : (
-              <span className="text-base font-medium tracking-tight text-foreground">
+              <span className="text-xl font-medium tracking-tight text-foreground">
                 {storeName}
               </span>
             )}
@@ -86,13 +89,15 @@ const Header: React.FC<HeaderProps> = ({
             <CartIcon />
 
             {/* Mobile hamburger */}
-            <button
+            <Button
               onClick={() => setMenuOpen(!menuOpen)}
-              className="md:hidden p-2 text-foreground hover:text-muted-foreground transition-colors"
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
               aria-label="Toggle menu"
             >
               {menuOpen ? <RiCloseLine size={22} /> : <RiMenu3Line size={22} />}
-            </button>
+            </Button>
           </div>
         </div>
       </div>