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/product-card.tsx

@@ -1,12 +1,6 @@
-'use client';
-
-import React, { useState } from 'react';
+import React from 'react';
 import Link from 'next/link';
-import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import { truncate } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Loader } from '@/app/components/ui/loader';
 
 interface ProductImage {
   url: string;
@@ -50,13 +44,9 @@ interface Product {
 
 interface ProductCardProps {
   product: Product;
-  onAddToCart?: (product: Product) => void;
 }
 
-const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
-  const { addItem, openCart } = useShopifyCart();
-  const [isAdding, setIsAdding] = useState(false);
-
+const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
   const firstImage = product.images.edges[0]?.node;
   const price = product.priceRange.minVariantPrice;
   const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
@@ -70,109 +60,56 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
     return `$${parseFloat(amount).toFixed(2)}`;
   };
 
-  const handleAddToCart = async (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!firstVariant || !isAvailable || isAdding) return;
-
-    try {
-      setIsAdding(true);
-      await addItem(firstVariant.id, 1);
-      openCart();
-      if (onAddToCart) onAddToCart(product);
-    } catch (err) {
-      console.error('Failed to add item to cart:', err);
-    } finally {
-      setIsAdding(false);
-    }
-  };
-
   return (
-    <div className="card-modern group bg-card rounded-2xl overflow-hidden h-full flex flex-col">
+    <Link
+      href={`/products/${product.handle}`}
+      className="group block h-full"
+    >
       {/* Product Image */}
-      <div className="relative aspect-[4/3.1] bg-zinc-100 overflow-hidden">
-        <Link href={`/products/${product.handle}`} className="block h-full">
-          {firstImage ? (
-            <img
-              src={firstImage.url}
-              alt={firstImage.altText || product.title}
-              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.08]"
-            />
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
-              <i className="ri-image-line text-8xl"></i>
-            </div>
-          )}
-        </Link>
+      <div className="relative aspect-square overflow-hidden bg-white">
+        {firstImage ? (
+          <img
+            src={firstImage.url}
+            alt={firstImage.altText || product.title}
+            className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-[1.04]"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
+            <i className="ri-image-line text-8xl"></i>
+          </div>
+        )}
 
-        {/* Badges */}
         {hasDiscount && compareAtPrice && (
-          <Badge className="absolute top-4 left-4 bg-rose-600 hover:bg-rose-600 text-white text-xs font-medium px-3 py-1 shadow-sm">
+          <span className="absolute top-0 left-0 text-[11px] font-mono tracking-widest text-rose-600">
             SALE
-          </Badge>
+          </span>
         )}
 
         {!isAvailable && (
-          <div className="absolute top-4 right-4 bg-white/90 text-xs font-medium px-3 py-1 rounded-full border text-foreground/70">
+          <span className="absolute top-0 right-0 text-[11px] font-mono tracking-widest text-muted-foreground">
             SOLD OUT
-          </div>
+          </span>
         )}
       </div>
 
       {/* Product Info */}
-      <div className="flex-1 p-6 flex flex-col">
-        <Link
-          href={`/products/${product.handle}`}
-          className="group-hover:text-primary transition-colors"
-        >
-          <h3 className="font-heading text-xl font-semibold tracking-tight text-foreground mb-2 line-clamp-2 min-h-[3.2em]">
-            {truncate(product.title, 65)}
-          </h3>
-        </Link>
+      <div className="flex flex-col flex-1 py-2.5">
+        <h3 className="text-sm font-medium text-foreground line-clamp-1">
+          {truncate(product.title, 65)}
+        </h3>
 
-        <div className="mt-auto">
-          <div className="price-display flex items-baseline gap-x-3 mb-6">
-            <span className="text-2xl font-semibold text-foreground tracking-tighter">
-              {formatPrice(price.amount)}
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="font-mono tabular-nums tracking-tight text-sm text-foreground">
+            {formatPrice(price.amount)}
+          </span>
+          {hasDiscount && compareAtPrice && (
+            <span className="font-mono tabular-nums tracking-tight text-sm line-through text-muted-foreground">
+              {formatPrice(compareAtPrice.amount)}
             </span>
-            {hasDiscount && compareAtPrice && (
-              <span className="text-base line-through text-muted-foreground">
-                {formatPrice(compareAtPrice.amount)}
-              </span>
-            )}
-          </div>
-
-          <div className="flex gap-3">
-            <Link href={`/products/${product.handle}`} className="flex-1">
-              <Button
-                variant="outline"
-                className="w-full btn-modern text-sm font-medium"
-              >
-                DETAILS
-              </Button>
-            </Link>
-
-            {isAvailable && (
-              <Button
-                onClick={handleAddToCart}
-                className="flex-1 btn-modern bg-primary hover:bg-primary/90 text-sm font-medium"
-                disabled={isAdding || !isAvailable}
-              >
-                {isAdding ? (
-                  <>
-                    <Loader size={16} className="mr-2" />
-                    ADDING...
-                  </>
-                ) : (
-                  'ADD TO BAG'
-                )}
-              </Button>
-            )}
-          </div>
+          )}
         </div>
       </div>
-    </div>
+    </Link>
   );
 };