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

@@ -4,11 +4,20 @@ import React from 'react';
 import { useParams } from 'next/navigation';
 import { useCollectionProducts } from '@/hooks/use-shopify-collections';
 import ProductCard from './product-card';
+import { Button } from '@/components/ui/button';
+
+const GRID_CLASSES =
+  'grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16';
+
+const CollectionTitle: React.FC<{ title: string }> = ({ title }) => (
+  <h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground mb-16">
+    {title}
+  </h2>
+);
 
 const CollectionDetail: React.FC = () => {
   const params = useParams();
   const handle = params?.handle as string;
-  console.log('[CollectionDetail] params:', params, 'handle:', handle);
 
   const { collection, loading, error, refetch } = useCollectionProducts(handle);
 
@@ -19,25 +28,18 @@ const CollectionDetail: React.FC = () => {
 
   if (loading) {
     return (
-      <div className="py-16">
-        <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
-            {formattedTitle}
-          </h2>
+      <div className="py-16 bg-background">
+        <div className="max-w-screen-2xl mx-auto px-8">
+          <CollectionTitle title={formattedTitle} />
 
           {/* Loading Skeleton */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          <div className={GRID_CLASSES}>
             {Array.from({ length: 8 }).map((_, index) => (
-              <div
-                key={index}
-                className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"
-              >
-                <div className="aspect-square bg-gray-200"></div>
-                <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+              <div key={index} className="animate-pulse">
+                <div className="aspect-square bg-zinc-100"></div>
+                <div className="pt-4 space-y-2">
+                  <div className="h-4 bg-zinc-200 w-4/5"></div>
+                  <div className="h-4 bg-zinc-200 w-1/4"></div>
                 </div>
               </div>
             ))}
@@ -49,25 +51,13 @@ const CollectionDetail: React.FC = () => {
 
   if (error) {
     return (
-      <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-5xl font-bold mb-8 font-heading">
-            {formattedTitle}
-          </h2>
-
-          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-semibold text-red-800 mb-2">
-              Failed to Load Collection
-            </h3>
-            <p className="text-red-600 mb-4">{error}</p>
-            <button
-              onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
+      <div className="py-16 bg-background">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <CollectionTitle title={formattedTitle} />
+          <p className="text-sm text-muted-foreground mb-6">{error}</p>
+          <Button onClick={() => refetch()} variant="outline">
+            Try Again
+          </Button>
         </div>
       </div>
     );
@@ -77,26 +67,16 @@ const CollectionDetail: React.FC = () => {
   const title = collection?.title || formattedTitle;
 
   return (
-    <div className="py-16">
-      <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
-          {title}
-        </h2>
+    <div className="py-16 bg-background">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <CollectionTitle title={title} />
 
         {products.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">
-                No Products in Collection
-              </h3>
-              <p className="text-gray-500">
-                This collection doesn&apos;t have any products yet.
-              </p>
-            </div>
-          </div>
+          <p className="text-center text-sm text-muted-foreground">
+            This collection doesn&apos;t have any products yet.
+          </p>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          <div className={GRID_CLASSES}>
             {products.map((product) => (
               <ProductCard key={product.id} product={product} />
             ))}