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

@@ -7,40 +7,45 @@ import { Button } from '@/components/ui/button';
 
 interface CollectionsProps {
   title?: string;
+  subtitle?: string;
 }
 
+const SectionHeader: React.FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => (
+  <>
+    <h2 className="text-center text-2xl md:text-3xl font-normal max-w-3xl mx-auto text-foreground">
+      {title}
+    </h2>
+    {subtitle && (
+      <p className="text-center text-sm font-normal max-w-xl mx-auto text-muted-foreground mt-2.5 mb-16">
+        {subtitle}
+      </p>
+    )}
+  </>
+);
+
+const GRID_CLASSES = 'grid grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12';
+
 const Collections: React.FC<CollectionsProps> = ({
   title = 'Our Collections',
+  subtitle = 'Discover our carefully crafted worlds',
 }) => {
   const { collections, loading, error, refetch } = useCollections(12);
 
   if (loading) {
     return (
-      <div className="py-20">
+      <div className="py-20 bg-background">
         <div className="max-w-screen-2xl mx-auto px-8">
-          <div className="flex justify-center mb-6">
-            <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
-              EXPLORE
-            </div>
-          </div>
-          <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
-            {title}
-          </h2>
-          <p className="text-center text-muted-foreground max-w-md mx-auto mb-16">
-            Handpicked stories and themes
-          </p>
+          <SectionHeader title={title} subtitle={subtitle} />
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <div
-                key={index}
-                className="bg-white rounded-3xl overflow-hidden animate-pulse border border-border h-[520px]"
-              >
-                <div className="h-80 bg-zinc-100"></div>
-                <div className="p-10 space-y-4">
-                  <div className="h-8 bg-zinc-200 rounded-xl w-3/4"></div>
-                  <div className="h-4 bg-zinc-200 rounded w-full"></div>
-                  <div className="h-4 bg-zinc-200 rounded w-5/6"></div>
+          <div className={GRID_CLASSES}>
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div key={index} className="animate-pulse">
+                <div className="aspect-square bg-zinc-100"></div>
+                <div className="pt-4">
+                  <div className="h-4 bg-zinc-200 w-3/5"></div>
                 </div>
               </div>
             ))}
@@ -52,21 +57,13 @@ const Collections: React.FC<CollectionsProps> = ({
 
   if (error) {
     return (
-      <div className="py-20">
+      <div className="py-20 bg-background">
         <div className="max-w-screen-2xl mx-auto px-8 text-center">
-          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
-            {title}
-          </h2>
-          <div className="mx-auto max-w-sm bg-white border border-border rounded-3xl p-10">
-            <i className="ri-alert-line text-5xl text-rose-500 mb-4"></i>
-            <h3 className="text-xl font-semibold mb-2">
-              Unable to load collections
-            </h3>
-            <p className="text-muted-foreground mb-6">{error}</p>
-            <Button onClick={refetch} variant="outline" className="btn-modern">
-              Retry
-            </Button>
-          </div>
+          <SectionHeader title={title} subtitle={subtitle} />
+          <p className="text-sm text-muted-foreground mb-6">{error}</p>
+          <Button onClick={refetch} variant="outline">
+            Retry
+          </Button>
         </div>
       </div>
     );
@@ -74,41 +71,23 @@ const Collections: React.FC<CollectionsProps> = ({
 
   if (collections.length === 0) {
     return (
-      <div className="py-20 bg-zinc-50">
+      <div className="py-20 bg-background">
         <div className="max-w-screen-2xl mx-auto px-8 text-center">
-          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
-            {title}
-          </h2>
-          <div className="mx-auto max-w-md p-12">
-            <i className="ri-folder-open-line text-6xl text-muted-foreground mb-6"></i>
-            <h3 className="text-2xl font-semibold mb-3">
-              No collections found
-            </h3>
-            <p className="text-muted-foreground">
-              Collections will appear here once added to your Shopify store.
-            </p>
-          </div>
+          <SectionHeader title={title} subtitle={subtitle} />
+          <p className="text-sm text-muted-foreground">
+            Collections will appear here once added to your Shopify store.
+          </p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="py-20">
+    <div className="py-20 bg-background">
       <div className="max-w-screen-2xl mx-auto px-8">
-        <div className="flex justify-center mb-6">
-          <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
-            THEMES &amp; STORIES
-          </div>
-        </div>
-        <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
-          {title}
-        </h2>
-        <p className="text-center text-muted-foreground max-w-md mx-auto mb-16 text-lg">
-          Discover our carefully crafted worlds
-        </p>
+        <SectionHeader title={title} subtitle={subtitle} />
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className={GRID_CLASSES}>
           {collections.map((collection) => (
             <CollectionCard key={collection.id} collection={collection} />
           ))}