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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Loader } from '@/app/components/ui/loader';
-import RemixIcon from '@/components/ui/remix-icon';
+import { RiSubtractLine, RiAddLine } from '@remixicon/react';
+import ShopPayLogo from '@/components/shopify/shop-pay-logo';
+import type { ProductOption, ProductOptionValue } from '@/hooks/use-shopify-products';
+import { isSwatchOptionName, swatchColorForName } from '@/config/swatches';
 
 interface ProductPrice {
   amount: string;
@@ -20,12 +21,6 @@ interface ProductVariant {
   }>;
 }
 
-interface ProductOption {
-  id: string;
-  name: string;
-  values: string[];
-}
-
 interface Product {
   id: string;
   title: string;
@@ -53,12 +48,29 @@ interface ProductDetailInfoProps {
   quantity: number;
   setQuantity: (quantity: number) => void;
   handleAddToCart: () => void;
+  handleBuyNow?: () => void;
   onOptionChange: (optionName: string, value: string) => void;
   loading?: boolean;
+  buyingNow?: boolean;
   addToCartLabel?: string;
-  features?: ProductFeature[];
 }
 
+// A swatch comes from the option value's own swatch (colour or image) or the
+// colour its name implies (see config/swatches) — never a variant photo.
+const swatchStyle = (
+  value: ProductOptionValue
+): { background?: string; image?: string } => {
+  if (value.swatch?.color) return { background: value.swatch.color };
+
+  const swatchImage = value.swatch?.image?.previewImage?.url;
+  if (swatchImage) return { image: swatchImage };
+
+  const namedColor = swatchColorForName(value.name);
+  if (namedColor) return { background: namedColor };
+
+  return {};
+};
+
 const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
   product,
   selectedVariant,
@@ -66,14 +78,11 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
   quantity,
   setQuantity,
   handleAddToCart,
+  handleBuyNow,
   onOptionChange,
   loading = false,
+  buyingNow = false,
   addToCartLabel = 'Add to Cart',
-  features = [
-    { icon: 'RiTruckLine', label: 'Free shipping on orders over $100' },
-    { icon: 'RiArrowGoBackLine', label: '30-day return policy' },
-    { icon: 'RiSecurePaymentLine', label: 'Secure payment' },
-  ],
 }) => {
   const formatPrice = (amount: string) => {
     return `$${parseFloat(amount).toFixed(2)}`;
@@ -84,48 +93,152 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
   const hasDiscount =
     compareAtPrice &&
     parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+  const isAvailable = selectedVariant?.availableForSale ?? false;
+
+  const isSwatchOption = (option: ProductOption) =>
+    isSwatchOptionName(option.name);
+
+  // Some products return Size before Color; show the swatches first either way.
+  const orderedOptions = [...(product.options ?? [])].sort(
+    (a, b) => Number(isSwatchOption(b)) - Number(isSwatchOption(a))
+  );
+
+  // `optionValues` carries the swatch data; fall back to plain `values`.
+  const optionValuesFor = (option: ProductOption): ProductOptionValue[] =>
+    option.optionValues?.length
+      ? option.optionValues
+      : option.values.map((value) => ({ id: value, name: value }));
 
   return (
-    <div className="pt-2">
-      <div className="mb-2">
-        <div className="uppercase tracking-[3px] text-xs font-mono text-muted-foreground mb-1">
-          LUMINA COLLECTION
-        </div>
-        <h1 className="text-5xl md:text-6xl font-bold tracking-tighter font-heading text-foreground leading-none mb-6">
-          {product.title}
-        </h1>
-      </div>
-
-      {/* Price */}
-      <div className="flex items-center gap-x-4 mb-10">
-        <span className="text-4xl font-semibold tracking-tighter text-foreground price-display">
+    <div>
+      <h1 className="text-2xl md:text-3xl font-normal text-foreground">
+        {product.title}
+      </h1>
+      <div className="flex items-baseline gap-x-3 mt-1">
+        <span className="font-mono tabular-nums tracking-tight text-base text-foreground">
           {formatPrice(price.amount)}
         </span>
         {hasDiscount && compareAtPrice && (
-          <>
-            <span className="text-2xl text-muted-foreground line-through tracking-tight">
-              {formatPrice(compareAtPrice.amount)}
-            </span>
-            <Badge
-              variant="destructive"
-              className="text-xs font-mono px-4 py-1"
-            >
-              SAVE{' '}
-              {Math.round(
-                ((parseFloat(compareAtPrice.amount) -
-                  parseFloat(price.amount)) /
-                  parseFloat(compareAtPrice.amount)) *
-                  100
-              )}
-              %
-            </Badge>
-          </>
+          <span className="font-mono tabular-nums tracking-tight text-sm line-through text-muted-foreground">
+            {formatPrice(compareAtPrice.amount)}
+          </span>
         )}
       </div>
 
+      {/* Product Options — colour swatches lead, whatever order the API returns */}
+      {orderedOptions.map((option) => {
+        const isSwatch = isSwatchOption(option);
+        const selected = selectedOptions[option.name];
+
+        return (
+          <div key={option.id} className="mt-8">
+            <div className="text-sm text-muted-foreground mb-2">
+              {option.name}
+              {isSwatch && selected && (
+                <span className="text-foreground font-medium">: {selected}</span>
+              )}
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {optionValuesFor(option).map((value) => {
+                const isSelected = selected === value.name;
+
+                if (isSwatch) {
+                  const { background, image } = swatchStyle(value);
+
+                  return (
+                    <button
+                      key={value.id}
+                      onClick={() => onOptionChange(option.name, value.name)}
+                      title={value.name}
+                      aria-label={value.name}
+                      aria-pressed={isSelected}
+                      className={`h-8 w-8 rounded-full bg-cover bg-center transition-shadow ${
+                        isSelected
+                          ? 'ring-2 ring-foreground ring-offset-2'
+                          : 'ring-1 ring-border hover:ring-foreground/40'
+                      }`}
+                      style={{
+                        backgroundColor: background,
+                        backgroundImage: image ? `url(${image})` : undefined,
+                      }}
+                    >
+                      {!background && !image && (
+                        <span className="text-[10px]">{value.name.at(0)}</span>
+                      )}
+                    </button>
+                  );
+                }
+
+                return (
+                  <button
+                    key={value.id}
+                    onClick={() => onOptionChange(option.name, value.name)}
+                    aria-pressed={isSelected}
+                    className={`min-w-14 px-5 py-2 rounded-md border text-sm text-center transition-colors ${
+                      isSelected
+                        ? 'border-foreground text-foreground'
+                        : 'border-border text-muted-foreground hover:border-foreground hover:text-foreground'
+                    }`}
+                  >
+                    {value.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Quantity + Add to Cart */}
+      <div className="mt-8 flex items-stretch gap-3">
+        <div className="flex items-center rounded-md border border-border h-11">
+          <button
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            disabled={quantity <= 1}
+            aria-label="Decrease quantity"
+            className="h-full px-3 text-foreground disabled:text-muted-foreground/50 transition-colors"
+          >
+            <RiSubtractLine size={16} />
+          </button>
+          <span className="w-8 text-center text-sm tabular-nums">
+            {quantity}
+          </span>
+          <button
+            onClick={() => setQuantity(quantity + 1)}
+            aria-label="Increase quantity"
+            className="h-full px-3 text-foreground transition-colors"
+          >
+            <RiAddLine size={16} />
+          </button>
+        </div>
+
+        <button
+          onClick={handleAddToCart}
+          disabled={!isAvailable || loading}
+          className="flex-1 h-11 rounded-md bg-foreground text-background text-sm font-medium hover:bg-foreground/90 disabled:opacity-50 transition-colors flex items-center justify-center gap-x-2"
+        >
+          {loading && <Loader size={16} />}
+          {isAvailable ? addToCartLabel : 'Out of Stock'}
+        </button>
+      </div>
+
+      {/* Sends the shopper to the Shopify checkout, where Shop Pay is offered. */}
+      {handleBuyNow && (
+        <button
+          type="button"
+          onClick={handleBuyNow}
+          disabled={!isAvailable || buyingNow}
+          className="mt-3 flex h-11 w-full cursor-pointer items-center justify-center rounded-md bg-shop px-4 text-white transition-colors hover:bg-shop/85 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <span className="sr-only">Buy with</span>
+          {buyingNow ? <Loader size={16} /> : <ShopPayLogo />}
+        </button>
+      )}
+
       {/* Description */}
-      {product.description && (
-        <div className="prose text-muted-foreground mb-10 text-[15px] leading-relaxed max-w-prose">
+      {(product.descriptionHtml || product.description) && (
+        <div className="mt-10 text-sm leading-6 text-foreground product-description">
           {product.descriptionHtml ? (
             <div
               dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
@@ -135,104 +248,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
           )}
         </div>
       )}
-
-      {/* Product Options */}
-      {product.options &&
-        product.options.map((option) => (
-          <div key={option.id} className="mb-8">
-            <div className="text-xs uppercase font-mono tracking-widest text-muted-foreground mb-3">
-              {option.name}
-            </div>
-            <div className="flex flex-wrap gap-2">
-              {option.values.map((value) => (
-                <Button
-                  key={value}
-                  onClick={() => onOptionChange(option.name, value)}
-                  variant={
-                    selectedOptions[option.name] === value
-                      ? 'default'
-                      : 'outline'
-                  }
-                  className={`rounded-2xl px-6 py-2.5 text-sm font-medium transition-all ${
-                    selectedOptions[option.name] === value ? 'shadow-md' : ''
-                  }`}
-                >
-                  {value}
-                </Button>
-              ))}
-            </div>
-          </div>
-        ))}
-
-      {/* Quantity Selector */}
-      <div className="mb-8">
-        <div className="text-xs uppercase font-mono tracking-widest text-muted-foreground mb-3">
-          QUANTITY
-        </div>
-        <div className="inline-flex items-center border border-border rounded-2xl">
-          <Button
-            onClick={() => setQuantity(Math.max(1, quantity - 1))}
-            variant="ghost"
-            size="icon-sm"
-            className="rounded-l-2xl h-12 w-12"
-            disabled={quantity <= 1}
-          >
-            −
-          </Button>
-          <div className="px-8 font-mono text-lg font-semibold tabular-nums">
-            {quantity}
-          </div>
-          <Button
-            onClick={() => setQuantity(quantity + 1)}
-            variant="ghost"
-            size="icon-sm"
-            className="rounded-r-2xl h-12 w-12"
-          >
-            +
-          </Button>
-        </div>
-      </div>
-
-      {/* Add to Cart Button */}
-      <Button
-        onClick={handleAddToCart}
-        disabled={!selectedVariant?.availableForSale || loading}
-        size="lg"
-        className="w-full h-16 text-base font-medium tracking-wider rounded-3xl btn-modern"
-      >
-        {loading ? (
-          <>
-            <Loader size={18} className="mr-3" />
-            ADDING TO BAG...
-          </>
-        ) : selectedVariant?.availableForSale ? (
-          String(addToCartLabel ?? 'Add to Cart').toUpperCase()
-        ) : (
-          'OUT OF STOCK'
-        )}
-      </Button>
-
-      {/* Features */}
-      {features.length > 0 && (
-        <div className="mt-12 pt-10 border-t border-border">
-          <div className="space-y-6">
-            {features.map((feature, index) => (
-              <div key={index} className="flex gap-x-4 text-sm">
-                <div className="mt-0.5 text-primary">
-                  <RemixIcon name={feature.icon} size={18} />
-                </div>
-                <div className="text-muted-foreground leading-snug">
-                  {feature.label}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div className="mt-12 text-[10px] font-mono text-center text-muted-foreground tracking-widest">
-        FREE SHIPPING • EASY RETURNS • SECURE CHECKOUT
-      </div>
     </div>
   );
 };