Redesign storefront to match minimal reference design

Product cards, header, footer, PDP, and typography reworked toward a
leaner layout; adds shop policy pages backed by the Storefront API.

- Type: switch to Geist Sans/Mono, regular-weight headings
- Product cards: drop borders, rounded corners, and action buttons
- Header: shorter bar, no bottom border, center-out hover underline,
  bag icon replacing the cart icon (drawer wording updated to match)
- Footer: single line with policy links and social icons on bg-background
- Policies: /policies/[handle] renders shop.privacyPolicy,
  termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy
  (SSG, hourly revalidation)
- PDP: image grid with mobile carousel + dots and click-to-zoom,
  sticky info column, colour swatches from option optionValues with a
  configurable name-to-colour fallback in config/swatches.ts,
  Shop-purple checkout button
- Recommendations: left-aligned heading on bg-background
- Ignore .env*.local and tsconfig.tsbuildinfo

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

components/shopify/footer.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import {
+  RiInstagramLine,
+  RiTiktokLine,
+  RiFacebookFill,
+} from '@remixicon/react';
 
 export interface FooterLink {
   label: string;
@@ -7,110 +12,63 @@ export interface FooterLink {
 
 interface FooterProps {
   storeName?: string;
-  logoUrl?: string;
-  tagline?: string;
   copyright?: string;
   links?: FooterLink[];
+  instagramUrl?: string;
+  tiktokUrl?: string;
+  facebookUrl?: string;
 }
 
 const Footer: React.FC<FooterProps> = ({
-  storeName = 'Stride',
-  logoUrl,
-  tagline = 'Performance in every stride.',
-  copyright = '© 2026 Stride. All rights reserved.',
+  storeName = 'Shop',
+  copyright,
   links = [
-    { label: 'About', url: '#' },
-    { label: 'Athletes', url: '#' },
-    { label: 'Technology', url: '#' },
-    { label: 'Contact', url: '#' },
+    { label: 'Terms of Service', url: '/policies/terms-of-service' },
+    { label: 'Privacy Policy', url: '/policies/privacy-policy' },
+    { label: 'Refund Policy', url: '/policies/refund-policy' },
+    { label: 'Shipping Policy', url: '/policies/shipping-policy' },
+    { label: 'Subscription Policy', url: '/policies/subscription-policy' },
   ],
+  instagramUrl = '#',
+  tiktokUrl = '#',
+  facebookUrl = '#',
 }) => {
+  const socials = [
+    { label: 'Instagram', url: instagramUrl, Icon: RiInstagramLine },
+    { label: 'TikTok', url: tiktokUrl, Icon: RiTiktokLine },
+    { label: 'Facebook', url: facebookUrl, Icon: RiFacebookFill },
+  ];
+
   return (
-    <footer className="bg-zinc-50 border-t border-border py-16 text-sm">
-      <div className="max-w-screen-2xl mx-auto px-8">
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-y-12">
-          {/* Brand Column */}
-          <div className="md:col-span-5">
-            <div className="flex items-baseline mb-4">
-              {logoUrl ? (
-                <img
-                  src={logoUrl}
-                  alt={storeName}
-                  className="h-8 w-auto object-contain"
-                />
-              ) : (
-                <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground">
-                  {storeName}
-                </span>
-              )}
-            </div>
-
-            <p className="max-w-xs text-muted-foreground text-[15px] leading-relaxed">
-              {tagline}
+    <footer className="bg-background">
+      <div className="max-w-screen-2xl mx-auto px-8 py-10">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-5">
+          <div className="flex flex-wrap items-center justify-center sm:justify-start gap-x-5 gap-y-2">
+            <p className="text-sm text-muted-foreground leading-5">
+              {copyright || `© ${storeName}. All rights reserved.`}
             </p>
-
-            <div className="mt-8 text-xs font-mono text-muted-foreground tracking-[1px]">
-              ENGINEERED FOR MOTION
-            </div>
+            {links.map((link) => (
+              <a
+                key={link.label}
+                href={link.url}
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
           </div>
 
-          {/* Links */}
-          <div className="md:col-span-3">
-            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
-              SHOP
-            </div>
-            <div className="flex flex-col gap-y-3 text-muted-foreground">
-              {links.map((link, index) => (
-                <a
-                  key={index}
-                  href={link.url}
-                  className="hover:text-foreground transition-colors w-fit"
-                >
-                  {link.label}
-                </a>
-              ))}
-            </div>
-          </div>
-
-          <div className="md:col-span-4">
-            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
-              CONNECT
-            </div>
-            <div className="flex flex-col gap-y-3 text-muted-foreground">
+          <div className="flex items-center gap-x-4">
+            {socials.map(({ label, url, Icon }) => (
               <a
-                href="#"
-                className="hover:text-foreground transition-colors w-fit"
+                key={label}
+                href={url}
+                aria-label={label}
+                className="text-muted-foreground hover:text-foreground transition-colors"
               >
-                Instagram
+                <Icon size={18} />
               </a>
-              <a
-                href="#"
-                className="hover:text-foreground transition-colors w-fit"
-              >
-                Pinterest
-              </a>
-              <a
-                href="#"
-                className="hover:text-foreground transition-colors w-fit"
-              >
-                Newsletter
-              </a>
-            </div>
-
-            <div className="mt-auto pt-12 text-[10px] text-muted-foreground font-mono leading-loose">
-              CRAFTED WITH PRECISION
-              <br />
-              IN A NEUTRAL PALETTE
-            </div>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="mt-16 pt-8 border-t border-border text-xs text-muted-foreground flex flex-col md:flex-row justify-between items-center gap-4 font-mono tracking-widest">
-          <div>{copyright}</div>
-          <div className="flex gap-x-6">
-            <span>Privacy</span>
-            <span>Terms</span>
+            ))}
           </div>
         </div>
       </div>