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/globals.css

@@ -33,6 +33,9 @@
   --color-destructive: hsl(0 84.2% 60.2%);
   --color-destructive-foreground: hsl(0 0% 98%);
 
+  /* Shop (accelerated checkout) purple */
+  --color-shop: #5a31f4;
+
   /* Border */
   --color-border: hsl(240 5.9% 90%);
   --color-input: hsl(240 5.9% 90%);
@@ -44,10 +47,12 @@
   --radius-lg: 1rem;
   --radius-xl: 1.25rem;
 
-  /* Enhanced typography scale */
-  --font-heading: 'Space Grotesk', system-ui, sans-serif;
-  --font-body: 'Inter', system-ui, sans-serif;
-  --font-poppins: 'Poppins', system-ui, sans-serif;
+  /* Typography — Geist Sans / Geist Mono */
+  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+  --font-heading: var(--font-geist-sans), system-ui, sans-serif;
+  --font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --font-poppins: var(--font-geist-sans), system-ui, sans-serif;
 }
 
 /* Base styles for light, modern Shopify storefront */
@@ -71,12 +76,70 @@ body {
   border-color: hsl(240 5.9% 85%);
 }
 
-/* Bold heading styles */
+/* Heading styles — regular weight, slightly tightened like the Geist reference */
 h1,
 h2,
 .font-heading {
-  font-weight: 700;
-  letter-spacing: -0.025em;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+
+/* Swipeable rows (mobile galleries) without a visible scrollbar */
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Product description (HTML returned by the Storefront API) */
+.product-description p {
+  margin-bottom: 1rem;
+}
+
+.product-description > :last-child {
+  margin-bottom: 0;
+}
+
+/* Shop policy body (HTML returned by the Storefront API) */
+.policy-body p,
+.policy-body ul,
+.policy-body ol {
+  margin-bottom: 1.5rem;
+}
+
+.policy-body ul,
+.policy-body ol {
+  padding-left: 1.25rem;
+  list-style: revert;
+}
+
+.policy-body li {
+  margin-bottom: 0.5rem;
+}
+
+.policy-body h2,
+.policy-body h3,
+.policy-body h4 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.policy-body a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.policy-body strong {
+  font-weight: 500;
+}
+
+.policy-body > :last-child {
+  margin-bottom: 0;
 }
 
 /* Enhanced button styles */