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

hooks/use-shopify-policies.ts

@@ -0,0 +1,60 @@
+import { SHOPIFY_STOREFRONT_API_URL } from '@/services/shopify/client';
+import { GET_SHOP_POLICIES_QUERY } from '@/graphql/policies';
+
+export interface ShopPolicy {
+  id: string;
+  title: string;
+  handle: string;
+  body: string;
+  url: string;
+}
+
+interface ShopPoliciesResponse {
+  data?: {
+    shop?: Record<string, ShopPolicy | null>;
+  };
+}
+
+// Handles Shopify uses for each policy — also the routes under /policies/[handle].
+export const POLICY_HANDLES = [
+  'terms-of-service',
+  'privacy-policy',
+  'refund-policy',
+  'shipping-policy',
+  'subscription-policy',
+] as const;
+
+// Policies change rarely, so this uses its own fetch (revalidated hourly)
+// rather than the no-store `shopifyFetch` used for carts and products.
+export async function getShopPolicies(): Promise<ShopPolicy[]> {
+  const token = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+
+  const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { 'X-Shopify-Storefront-Access-Token': token } : {}),
+    },
+    body: JSON.stringify({ query: GET_SHOP_POLICIES_QUERY }),
+    next: { revalidate: 3600 },
+  });
+
+  if (!response.ok) {
+    console.error('Failed to load shop policies:', response.status);
+    return [];
+  }
+
+  const json: ShopPoliciesResponse = await response.json();
+  const shop = json.data?.shop ?? {};
+
+  return Object.values(shop).filter((policy): policy is ShopPolicy =>
+    Boolean(policy?.handle)
+  );
+}
+
+export async function getShopPolicy(
+  handle: string
+): Promise<ShopPolicy | null> {
+  const policies = await getShopPolicies();
+  return policies.find((policy) => policy.handle === handle) ?? null;
+}