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

app/policies/[handle]/page.tsx

@@ -0,0 +1,65 @@
+import { notFound } from 'next/navigation';
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import { getShopPolicy, POLICY_HANDLES } from '@/hooks/use-shopify-policies';
+
+export function generateStaticParams() {
+  return POLICY_HANDLES.map((handle) => ({ handle }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  const policy = await getShopPolicy(handle);
+
+  return {
+    title: policy ? `${policy.title} — Stride` : 'Policy — Stride',
+  };
+}
+
+export default async function PolicyPage({
+  params,
+}: {
+  params: Promise<{ handle: string }>;
+}) {
+  const { handle } = await params;
+  const policy = await getShopPolicy(handle);
+
+  if (!policy) {
+    notFound();
+  }
+
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+
+      <main className="max-w-screen-2xl mx-auto w-full px-5 lg:px-10 py-16">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-3xl md:text-4xl font-normal text-foreground">
+            {policy.title}
+          </h1>
+
+          <div
+            className="policy-body mt-8 text-[15px] leading-7 text-foreground"
+            dangerouslySetInnerHTML={{ __html: policy.body }}
+          />
+        </div>
+      </main>
+
+      <Footer
+        storeName="Stride"
+        copyright="© 2026 Stride. All rights reserved."
+      />
+    </>
+  );
+}