diff --git a/src/components/shop/ProductCard.tsx b/src/components/shop/ProductCard.tsx
index d4f5231d..b9899bd0 100644
--- a/src/components/shop/ProductCard.tsx
+++ b/src/components/shop/ProductCard.tsx
@@ -1,139 +1,266 @@
+import * as React from 'react'
 import { Link } from '@tanstack/react-router'
 import { ProductImage } from './ProductImage'
-import { ShopBadge, ShopMono } from './ui'
-import { formatMoney } from '~/utils/shopify-format'
+import { ShopMono } from './ui'
+import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
 import type { ProductListItem } from '~/utils/shopify-queries'
 
+const TWO_WEEKS_MS = 365 * 24 * 60 * 60 * 1000
+
+// Kept in sync with ProductDrawer COLOR_HEX — last token wins ("Vintage Black" → black)
+const COLOR_MAP: Record<string, string> = {
+  black: '#0a0a0a',
+  white: '#f5f5f0',
+  cream: '#e4dcc4',
+  bone: '#e4dcc4',
+  natural: '#ddd3b8',
+  vintage: '#e8e0d0',
+  fog: '#c9c6ba',
+  sand: '#c8b97a',
+  ink: '#16130d',
+  navy: '#1a2e50',
+  slate: '#2e3339',
+  olive: '#5a5a3a',
+  rust: '#b84a27',
+  red: '#c41d1d',
+  blue: '#1d4ed8',
+  sea: '#3a5d66',
+  green: '#15803d',
+  gray: '#6b7280',
+  grey: '#6b7280',
+  charcoal: '#3a3a3c',
+  heather: '#8a8a9a',
+  denim: '#1a4569',
+  brown: '#6b3a2a',
+  pink: '#e8749a',
+  purple: '#7c3aed',
+  yellow: '#ca8a04',
+  orange: '#c2410c',
+  royal: '#4169e1',
+  kelly: '#4daa59',
+  aqua: '#00c4d4',
+  rose: '#c8818a',
+  dusty: '#c8818a',
+  coral: '#e8756a',
+  forest: '#228b22',
+  teal: '#0d9488',
+  lavender: '#967bb6',
+  lilac: '#967bb6',
+  tan: '#d2b48c',
+  ivory: '#fffff0',
+  gold: '#c9a227',
+  silver: '#a8a9ad',
+  ash: '#b2bec3',
+  stone: '#78716c',
+  moss: '#6b7c55',
+  sage: '#87a878',
+  sky: '#0ea5e9',
+  midnight: '#1e1b4b',
+  espresso: '#3c1f0f',
+  // card-specific
+  mixed: '#ef4c7a',
+  holo: '#d6e7ff',
+  polished: '#c5b07a',
+  blend: '#e8e0d0',
+}
+
+// Last token wins: "Vintage Black" → ["vintage","black"] reversed → "black" wins
+function colorHex(name: string): string | undefined {
+  const tokens = name
+    .toLowerCase()
+    .split(/[\s_-]+/)
+    .reverse()
+  for (const token of tokens) {
+    if (COLOR_MAP[token]) return COLOR_MAP[token]
+  }
+  return undefined
+}
+
+const NEW_BADGE_GRADIENT =
+  'linear-gradient(180deg, rgba(116,220,255,0.99) 8.23%, rgba(255,242,124,0.99) 29.88%, rgba(255,160,92,0.99) 61.46%, rgba(255,95,95,0.99) 89.43%)'
+
+function NewBadge() {
+  return (
+    <div
+      className="absolute bottom-3 left-3 z-[2] h-5 px-2.5 rounded-full flex items-center"
+      style={{ background: NEW_BADGE_GRADIENT }}
+    >
+      <span className="font-shop-mono font-medium text-shop-xs text-black leading-none tracking-wide">
+        NEW
+      </span>
+    </div>
+  )
+}
+
 type ProductCardProps = {
   product: ProductListItem
   sizes?: string
   loading?: 'eager' | 'lazy'
+  onQuickView?: (handle: string) => void
 }
 
-/**
- * Grid tile for a product. Editorial styling via Tailwind utilities:
- * stripe-lined image well, hover quick-view chip, mono caption tag,
- * JetBrains Mono price. New/Sale/Low-stock badges derived from tags.
- */
 export function ProductCard({
   product,
   sizes,
   loading = 'lazy',
+  onQuickView,
 }: ProductCardProps) {
   const { minVariantPrice, maxVariantPrice } = product.priceRange
   const compareAt = product.compareAtPriceRange?.minVariantPrice
   const isRange = minVariantPrice.amount !== maxVariantPrice.amount
-  const isDiscounted =
-    compareAt && Number(compareAt.amount) > Number(minVariantPrice.amount)
 
-  const isNew = product.tags?.some((t) => t.toLowerCase() === 'new')
-  const isLowStock = product.tags?.some(
-    (t) => t.toLowerCase() === 'low-stock' || t.toLowerCase() === 'low stock',
-  )
+  const isNew = product.publishedAt
+    ? Date.now() - new Date(product.publishedAt).getTime() < TWO_WEEKS_MS
+    : false
 
-  const tag = product.productType || product.tags?.[0] || ''
+  const colorOption = product.options?.find((o) => /colou?r/i.test(o.name))
+  const swatches = colorOption
+    ? colorOption.values.slice(0, 6).map((v) => ({
+        name: v,
+        hex: colorHex(v),
+      }))
+    : []
 
-  return (
-    <Link
-      to="/shop/products/$handle"
-      params={{ handle: product.handle }}
+  const [hoveredColor, setHoveredColor] = React.useState<string | null>(null)
+
+  // Preload all color-variant images on mount so hover swaps are instant
+  React.useEffect(() => {
+    if (!colorOption) return
+    const seen = new Set<string>()
+    for (const v of product.variants.nodes) {
+      if (!v.image?.url || seen.has(v.image.url)) continue
+      seen.add(v.image.url)
+      const img = new Image()
+      img.src = shopifyImageUrl(v.image.url, { width: 600, format: 'webp' })
+    }
+  }, [colorOption, product.variants.nodes])
+
+  const activeImage = React.useMemo(() => {
+    if (!hoveredColor || !colorOption) return product.featuredImage
+    const variant = product.variants.nodes.find((v) =>
+      v.selectedOptions.some(
+        (o) => /colou?r/i.test(o.name) && o.value === hoveredColor,
+      ),
+    )
+    return variant?.image ?? product.featuredImage
+  }, [hoveredColor, colorOption, product])
+
+  const cardBody = (
+    <div
       className="
-        group flex flex-col gap-2.5 rounded-xl border border-shop-line bg-shop-panel p-2.5
-        transition-[border-color,transform] duration-200
-        hover:border-shop-line-2 hover:-translate-y-0.5
+        group flex flex-col min-w-[340px] max-w-[400px] w-full rounded-xl
+        border border-transparent bg-transparent
+        hover:bg-shop-bg-2 hover:border-shop-line-2
+        transition-[border-color,background-color] duration-200
+        px-[22px] pt-7 pb-5
       "
     >
-      <div className="relative aspect-square rounded-lg overflow-hidden bg-shop-panel-2">
-        {/* Diagonal stripe texture */}
-        <div
-          aria-hidden="true"
-          className="absolute inset-0 [background:repeating-linear-gradient(45deg,transparent_0_12px,color-mix(in_srgb,var(--shop-text)_2%,transparent)_12px_13px)]"
-        />
-        {/* Soft accent glow */}
-        <div
-          aria-hidden="true"
-          className="absolute inset-0 bg-[radial-gradient(60%_50%_at_50%_50%,color-mix(in_srgb,var(--shop-accent)_8%,transparent),transparent_70%)]"
-        />
-        {/* Image */}
+      {/* Image */}
+      <div className="relative aspect-square rounded-lg overflow-hidden">
         <ProductImage
-          image={product.featuredImage}
+          image={activeImage}
           alt={product.title}
           width={600}
           sizes={sizes}
           loading={loading}
-          className="relative z-[1]"
+          className="w-full h-full object-cover"
         />
+        {isNew ? <NewBadge /> : null}
+      </div>
 
-        {/* Badges */}
-        {isNew || isLowStock || isDiscounted ? (
-          <div className="absolute top-2.5 left-2.5 flex gap-1 z-[2]">
-            {isNew ? <ShopBadge variant="new">New</ShopBadge> : null}
-            {isDiscounted ? <ShopBadge variant="sale">Sale</ShopBadge> : null}
-            {isLowStock ? (
-              <ShopBadge variant="sale">Low stock</ShopBadge>
+      {/* Meta */}
+      <div className="flex flex-col gap-2.5 pt-4">
+        {/* Title + price */}
+        <div className="flex justify-between items-baseline gap-3">
+          <span className="text-shop-title font-semibold font-shop-display leading-tight text-shop-text truncate">
+            {product.title}
+          </span>
+          <ShopMono className="text-shop-price text-shop-text whitespace-nowrap shrink-0 font-light">
+            {isRange ? 'From ' : ''}
+            {formatMoney(minVariantPrice.amount, minVariantPrice.currencyCode)}
+            {compareAt &&
+            Number(compareAt.amount) > Number(minVariantPrice.amount) ? (
+              <span className="ml-1.5 text-shop-ui text-shop-muted line-through">
+                {formatMoney(compareAt.amount, compareAt.currencyCode)}
+              </span>
             ) : null}
-          </div>
-        ) : null}
-
-        {/* Category tag (hidden on hover, replaced by quick-view chip) */}
-        {tag ? (
-          <span
-            className="
-              absolute bottom-2.5 right-2.5 z-[1]
-              font-shop-mono text-[9.5px] tracking-[0.1em] uppercase
-              text-shop-muted bg-shop-bg-2/80 backdrop-blur
-              border border-shop-line-2 rounded px-1.5 py-[3px]
-              max-w-[calc(100%-1.25rem)] overflow-hidden text-ellipsis whitespace-nowrap
-              transition-opacity group-hover:opacity-0
-            "
+          </ShopMono>
+        </div>
+
+        {/* Swatches + Quick View row */}
+        <div className="flex items-center justify-between">
+          {/* Round color swatches — hover to preview color */}
+          <div
+            className="flex gap-[10px]"
+            onMouseLeave={() => setHoveredColor(null)}
           >
-            {tag}
+            {swatches.map((s) => (
+              <button
+                key={s.name}
+                type="button"
+                title={s.name}
+                onMouseEnter={() => setHoveredColor(s.name)}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                }}
+                className={`w-4 h-4 rounded-full shrink-0 cursor-pointer border transition-[box-shadow,border-color,transform] duration-150 ${
+                  hoveredColor === s.name
+                    ? 'border-white/70 ring-2 ring-white/30 scale-125'
+                    : 'border-white/15 hover:scale-110'
+                }`}
+                style={
+                  s.hex
+                    ? { background: s.hex }
+                    : {
+                        background:
+                          'conic-gradient(from 30deg,#ef4c7a,#f4c74a,#22c993,#36d3f3,#4b9bff,#ef4c7a)',
+                      }
+                }
+              />
+            ))}
+          </div>
+
+          {/* Quick View — hover only */}
+          <span className="opacity-0 group-hover:opacity-100 transition-opacity text-shop-xs text-shop-text-2 inline-flex items-center gap-1">
+            Quick View
+            <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+              <path
+                d="M2 5h6M6 2l3 3-3 3"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                fill="none"
+              />
+            </svg>
           </span>
-        ) : null}
-
-        {/* Quick view chip */}
-        <span
-          className="
-            absolute bottom-2.5 right-2.5 z-[2]
-            inline-flex items-center gap-1 px-2 py-[5px] rounded-md
-            bg-shop-accent text-shop-accent-ink text-[11px] font-semibold
-            opacity-0 translate-y-1 pointer-events-none
-            transition-all group-hover:opacity-100 group-hover:translate-y-0
-          "
-        >
-          Quick view
-          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-            <path
-              d="M2 5h6M6 2l3 3-3 3"
-              stroke="currentColor"
-              strokeWidth="1.6"
-              fill="none"
-            />
-          </svg>
-        </span>
+        </div>
       </div>
+    </div>
+  )
 
-      <div className="flex justify-between items-baseline gap-2.5 px-1 pb-1.5">
-        <div className="min-w-0 flex-1">
-          <div className="text-[13.5px] font-semibold tracking-[-0.005em] leading-tight text-shop-text truncate">
-            {product.title}
-          </div>
-          {tag ? (
-            <ShopMono className="block text-[11.5px] text-shop-muted tracking-[0.02em] mt-0.5 truncate">
-              {tag}
-            </ShopMono>
-          ) : null}
-        </div>
-        <ShopMono className="text-[12.5px] text-shop-text whitespace-nowrap">
-          {isRange ? 'From ' : ''}
-          {formatMoney(minVariantPrice.amount, minVariantPrice.currencyCode)}
-          {isDiscounted ? (
-            <span className="ml-1.5 text-[11px] text-shop-muted line-through">
-              {formatMoney(compareAt.amount, compareAt.currencyCode)}
-            </span>
-          ) : null}
-        </ShopMono>
+  if (onQuickView) {
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => onQuickView(product.handle)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') onQuickView(product.handle)
+        }}
+        className="text-left block cursor-pointer"
+      >
+        {cardBody}
       </div>
+    )
+  }
+
+  return (
+    <Link
+      to="/shop/products/$handle"
+      params={{ handle: product.handle }}
+      className="block"
+    >
+      {cardBody}
     </Link>
   )
 }
diff --git a/src/components/shop/ProductDrawer.tsx b/src/components/shop/ProductDrawer.tsx
new file mode 100644
index 00000000..4a8e2470
--- /dev/null
+++ b/src/components/shop/ProductDrawer.tsx
@@ -0,0 +1,729 @@
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { twMerge } from 'tailwind-merge'
+import { getProduct } from '~/utils/shop.functions'
+import type {
+  ProductDetail,
+  ProductDetailVariant,
+} from '~/utils/shopify-queries'
+import { formatMoney } from '~/utils/shopify-format'
+import { ProductImage } from './ProductImage'
+import { ShopMono } from './ui'
+import { useAddToCart } from '~/hooks/useCart'
+import { useCartDrawerStore } from './cartDrawerStore'
+
+// Color name → hex for chip fill. Tokenizes multi-word names ("Vintage White" → "white").
+const COLOR_HEX: Record<string, string> = {
+  black: '#0a0a0a',
+  white: '#f5f5f0',
+  cream: '#e4dcc4',
+  bone: '#e4dcc4',
+  natural: '#ddd3b8',
+  vintage: '#e8e0d0',
+  fog: '#c9c6ba',
+  sand: '#c8b97a',
+  ink: '#16130d',
+  navy: '#1a2e50',
+  slate: '#2e3339',
+  olive: '#5a5a3a',
+  rust: '#b84a27',
+  red: '#c41d1d',
+  blue: '#1d4ed8',
+  sea: '#3a5d66',
+  green: '#15803d',
+  gray: '#6b7280',
+  grey: '#6b7280',
+  charcoal: '#3a3a3c',
+  heather: '#8a8a9a',
+  denim: '#1a4569',
+  brown: '#6b3a2a',
+  pink: '#e8749a',
+  purple: '#7c3aed',
+  yellow: '#ca8a04',
+  orange: '#c2410c',
+  royal: '#4169e1',
+  kelly: '#4daa59',
+  aqua: '#00c4d4',
+  rose: '#c8818a',
+  dusty: '#c8818a',
+  coral: '#e8756a',
+  maroon: '#800020',
+  forest: '#228b22',
+  teal: '#0d9488',
+  lavender: '#967bb6',
+  lilac: '#967bb6',
+  tan: '#d2b48c',
+  ivory: '#fffff0',
+  gold: '#c9a227',
+  silver: '#a8a9ad',
+  ash: '#b2bec3',
+  stone: '#78716c',
+  moss: '#6b7c55',
+  sage: '#87a878',
+  sky: '#0ea5e9',
+  midnight: '#1e1b4b',
+  espresso: '#3c1f0f',
+}
+
+function contrastColor(hex: string): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance > 0.55 ? '#000000' : '#ffffff'
+}
+
+function isDarkColor(hex: string): boolean {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.15
+}
+
+function resolveColorHex(name: string): string | undefined {
+  const lower = name.toLowerCase()
+  if (COLOR_HEX[lower]) return COLOR_HEX[lower]
+  // Reverse so last token wins ("Vintage Black" → black, not vintage)
+  const tokens = lower.split(/[\s_-]+/).reverse()
+  for (const token of tokens) {
+    if (COLOR_HEX[token]) return COLOR_HEX[token]
+  }
+  return undefined
+}
+
+function findMatchingVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  // Empty string means "not yet chosen" — treated as wildcard for availability checks
+  return variants.find((v) =>
+    v.selectedOptions.every((o) => {
+      const s = selected[o.name]
+      return !s || s === o.value
+    }),
+  )
+}
+
+function findExactVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  return variants.find((v) =>
+    v.selectedOptions.every((o) => selected[o.name] === o.value),
+  )
+}
+
+type ProductDrawerProps = {
+  productHandle: string | null
+  allHandles: string[]
+  onClose: () => void
+  onChange: (handle: string) => void
+}
+
+export function ProductDrawer({
+  productHandle,
+  allHandles,
+  onClose,
+  onChange,
+}: ProductDrawerProps) {
+  const [width, setWidth] = React.useState(520)
+  const [isDragging, setIsDragging] = React.useState(false)
+  const dragStateRef = React.useRef<{ startX: number; startW: number }>({
+    startX: 0,
+    startW: 0,
+  })
+  const drawerRef = React.useRef<HTMLElement>(null)
+
+  // Restore persisted width on mount
+  React.useEffect(() => {
+    const saved = parseInt(localStorage.getItem('drawerWidth') ?? '0', 10)
+    if (saved >= 320) setWidth(saved)
+  }, [])
+
+  const isOpen = !!productHandle
+
+  // Keep the last-known handle alive through the exit animation so the drawer
+  // slides out with content visible (not empty). Cleared after 400ms — just
+  // past the 380ms transition — so the body unmounts cleanly after exit.
+  const [displayHandle, setDisplayHandle] = React.useState<string | null>(null)
+  React.useEffect(() => {
+    if (productHandle) {
+      setDisplayHandle(productHandle)
+    } else {
+      const t = setTimeout(() => setDisplayHandle(null), 400)
+      return () => clearTimeout(t)
+    }
+  }, [productHandle])
+
+  const effectiveWidth = width
+
+  const navigateStep = React.useCallback(
+    (dir: number) => {
+      if (!productHandle || allHandles.length === 0) return
+      const idx = allHandles.indexOf(productHandle)
+      const next = (idx + dir + allHandles.length) % allHandles.length
+      const nextHandle = allHandles[next]
+      if (nextHandle) onChange(nextHandle)
+    },
+    [productHandle, allHandles, onChange],
+  )
+
+  // Keyboard nav
+  React.useEffect(() => {
+    if (!isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowRight') navigateStep(1)
+      if (e.key === 'ArrowLeft') navigateStep(-1)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [isOpen, onClose, navigateStep])
+
+  // Splitter drag
+  const onSplitterMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    const currentW = drawerRef.current?.getBoundingClientRect().width ?? width
+    dragStateRef.current = { startX: e.clientX, startW: currentW }
+    setIsDragging(true)
+  }
+
+  React.useEffect(() => {
+    if (!isDragging) return
+    const onMove = (e: MouseEvent) => {
+      const dx = dragStateRef.current.startX - e.clientX
+      const maxW = Math.min(window.innerWidth * 0.95, 960)
+      const next = Math.max(
+        320,
+        Math.min(maxW, dragStateRef.current.startW + dx),
+      )
+      setWidth(Math.round(next))
+    }
+    const onUp = () => {
+      setIsDragging(false)
+      localStorage.setItem(
+        'drawerWidth',
+        String(drawerRef.current?.getBoundingClientRect().width ?? width),
+      )
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [isDragging, width])
+
+  return (
+    <>
+      {/* Scrim */}
+      <button
+        type="button"
+        aria-label="Close product drawer"
+        tabIndex={isOpen ? 0 : -1}
+        onClick={onClose}
+        className={twMerge(
+          'fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm transition-opacity duration-300',
+          isOpen
+            ? 'opacity-100 pointer-events-auto'
+            : 'opacity-0 pointer-events-none',
+        )}
+      />
+
+      {/* Drawer */}
+      <aside
+        ref={drawerRef}
+        aria-label="Product detail"
+        aria-hidden={!isOpen}
+        style={{ width: isOpen ? effectiveWidth : undefined }}
+        className={twMerge(
+          'fixed top-[48px] right-0 bottom-0 z-[70]',
+          'border-l border-shop-line flex flex-col',
+          'shadow-[-30px_0_60px_-20px_rgba(0,0,0,0.5)]',
+          'min-w-[320px] max-w-[95vw]',
+          isDragging
+            ? 'transition-none select-none'
+            : 'transition-transform duration-[380ms] ease-[cubic-bezier(0.2,0.8,0.2,1)]',
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+        )}
+      >
+        {/* Splitter handle */}
+        <div
+          role="separator"
+          aria-label="Drag to resize drawer"
+          onMouseDown={onSplitterMouseDown}
+          onDoubleClick={() => {
+            setWidth(520)
+            localStorage.setItem('drawerWidth', '520')
+          }}
+          className="absolute top-0 bottom-0 left-[-4px] w-2 z-[2] cursor-col-resize group"
+        >
+          {/* Thin line */}
+          <div
+            className={twMerge(
+              'absolute left-[3px] top-0 bottom-0 w-[2px] transition-colors',
+              isDragging
+                ? 'bg-shop-accent'
+                : 'bg-transparent group-hover:bg-shop-accent',
+            )}
+          />
+          {/* Grab pill */}
+          <div
+            className={twMerge(
+              'absolute left-0 top-1/2 -translate-y-1/2 w-2 h-10 rounded bg-shop-panel border border-shop-line-2 transition-[opacity,border-color]',
+              isDragging
+                ? 'opacity-100 border-shop-accent'
+                : 'opacity-60 group-hover:opacity-100 group-hover:border-shop-accent',
+            )}
+          />
+        </div>
+
+        {/* Width readout during drag */}
+        {isDragging ? (
+          <div className="absolute top-3 left-4 z-[3] font-shop-mono text-shop-xs text-shop-accent-ink bg-shop-accent px-1.5 py-[3px] rounded pointer-events-none">
+            {width} px
+          </div>
+        ) : null}
+
+        {/* Close button — pinned to top-left of drawer, above scroll content */}
+        <button
+          type="button"
+          title="Close (Esc)"
+          onClick={onClose}
+          className="absolute top-3 left-3 z-[3] p-1 text-shop-muted hover:text-shop-text transition-colors"
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
+            <path
+              d="M2 2l10 10M12 2L2 12"
+              stroke="currentColor"
+              strokeWidth="1.6"
+            />
+          </svg>
+        </button>
+
+        {/* Body — keyed to productHandle so it resets on product change;
+            displayHandle keeps it mounted through the exit animation */}
+        {displayHandle ? (
+          <DrawerBody
+            key={productHandle ?? displayHandle}
+            productHandle={displayHandle}
+            allHandles={allHandles}
+            onNavigate={onChange}
+            onClose={onClose}
+          />
+        ) : null}
+      </aside>
+    </>
+  )
+}
+
+/* ─── Lazy-loaded drawer body ─────────────────────────────────────────── */
+
+function DrawerBody({
+  productHandle,
+  allHandles,
+  onNavigate,
+  onClose,
+}: {
+  productHandle: string
+  allHandles: string[]
+  onNavigate: (handle: string) => void
+  onClose: () => void
+}) {
+  const { data: product, isLoading } = useQuery({
+    queryKey: ['shopify', 'product', productHandle],
+    queryFn: () => getProduct({ data: { handle: productHandle } }),
+    staleTime: 5 * 60 * 1000,
+  })
+
+  if (isLoading || !product) {
+    return (
+      <div className="flex-1 overflow-y-auto">
+        <div className="aspect-square bg-shop-panel animate-pulse" />
+        <div className="p-5 flex flex-col gap-3">
+          <div className="h-3 w-24 bg-shop-panel-2 rounded animate-pulse" />
+          <div className="h-7 w-3/4 bg-shop-panel-2 rounded animate-pulse" />
+          <div className="h-12 bg-shop-panel-2 rounded animate-pulse" />
+          <div className="h-4 w-full bg-shop-panel-2 rounded animate-pulse" />
+          <div className="h-4 w-4/5 bg-shop-panel-2 rounded animate-pulse" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <DrawerContent
+      product={product}
+      allHandles={allHandles}
+      onNavigate={onNavigate}
+      onClose={onClose}
+    />
+  )
+}
+
+/* ─── Full product content ────────────────────────────────────────────── */
+
+function DrawerContent({
+  product,
+  allHandles,
+  onNavigate,
+  onClose,
+}: {
+  product: ProductDetail
+  allHandles: string[]
+  onNavigate: (handle: string) => void
+  onClose: () => void
+}) {
+  const variants = product.variants.nodes
+
+  const [selected, setSelected] = React.useState<Record<string, string>>(() =>
+    Object.fromEntries(product.options.map((o) => [o.name, ''])),
+  )
+  const [quantity, setQuantity] = React.useState(1)
+  const [activeImageIndex, setActiveImageIndex] = React.useState(0)
+  const [showAdded, setShowAdded] = React.useState(false)
+  // heroOverride: set to variant image when user picks a color; cleared on thumbnail click
+  const [heroOverride, setHeroOverride] = React.useState<
+    (typeof product.images.nodes)[0] | null
+  >(null)
+
+  // Exact variant for add-to-cart; wildcard findMatchingVariant used only for chip availability
+  const selectedVariant = findExactVariant(variants, selected)
+  // True once the user has explicitly picked every option (color, size, etc.)
+  const isComplete = product.options
+    .filter((o) => o.values.length > 1)
+    .every((o) => !!selected[o.name])
+
+  // Sync hero image when color selection changes — uses wildcard match so image
+  // updates immediately on color pick even before size is chosen.
+  const variantForImage = findMatchingVariant(variants, selected)
+  React.useEffect(() => {
+    if (variantForImage?.image) setHeroOverride(variantForImage.image)
+    else setHeroOverride(null)
+  }, [variantForImage?.id, variantForImage?.image?.url])
+
+  // Resolve which thumbnail index is "active" — match override url into the list
+  const heroOverrideIndex = heroOverride
+    ? product.images.nodes.findIndex((img) => img.url === heroOverride.url)
+    : -1
+  const activeThumbnailIndex = heroOverride
+    ? heroOverrideIndex
+    : activeImageIndex
+  const heroImage =
+    heroOverride ?? product.images.nodes[activeImageIndex] ?? null
+
+  const displayPrice = selectedVariant?.price ?? variants[0]?.price ?? null
+
+  const addToCart = useAddToCart()
+  const openCartDrawer = useCartDrawerStore((s) => s.openDrawer)
+
+  React.useEffect(() => {
+    if (!showAdded) return
+    const id = window.setTimeout(() => setShowAdded(false), 1500)
+    return () => window.clearTimeout(id)
+  }, [showAdded])
+
+  return (
+    <div className="flex-1 overflow-y-auto [scrollbar-width:thin] [scrollbar-color:var(--shop-line)_transparent]">
+      {/* Hero image + vertical thumbnail strip */}
+      <div className="relative">
+        {/* Main image — leaves room for thumbnail strip when present */}
+        <div
+          className={`aspect-square bg-shop-bg/40 backdrop-blur-[20px] relative overflow-hidden p-6${product.images.nodes.length > 1 ? ' mr-[108px]' : ''}`}
+        >
+          {heroImage ? (
+            <ProductImage
+              image={heroImage}
+              alt={product.title}
+              width={800}
+              sizes="(min-width: 768px) 520px, 100vw"
+              loading="eager"
+              className="w-full h-full object-cover"
+            />
+          ) : null}
+        </div>
+
+        {/* Vertical thumbnail strip — absolutely pinned so it scrolls within hero height */}
+        {product.images.nodes.length > 1 ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[108px] flex flex-col gap-1.5 px-[14px] py-[10px] overflow-y-auto [scrollbar-width:none] bg-shop-bg/40 backdrop-blur-[20px] border-l border-shop-line">
+            {product.images.nodes.map((img, i) => (
+              <button
+                key={`${img.url}-${i}`}
+                type="button"
+                onClick={() => {
+                  setActiveImageIndex(i)
+                  setHeroOverride(null)
+                }}
+                aria-label={`View image ${i + 1}`}
+                className={twMerge(
+                  'w-[80px] aspect-square rounded-md overflow-hidden transition-opacity shrink-0',
+                  i === activeThumbnailIndex
+                    ? 'opacity-100 ring-1 ring-shop-line-2'
+                    : 'opacity-45 hover:opacity-75',
+                )}
+              >
+                <ProductImage
+                  image={img}
+                  alt={`${product.title} — image ${i + 1}`}
+                  width={160}
+                  sizes="15vw"
+                  className="w-full h-full object-cover"
+                />
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="bg-shop-bg">
+        <div className="mx-3 border-t border-shop-line" />
+
+        {/* Title + price */}
+        <div className="flex justify-between items-baseline gap-3 px-6 py-[15px]">
+          <h2 className="font-shop-display font-semibold text-shop-heading leading-tight tracking-[-0.015em] text-shop-text">
+            {product.title}
+          </h2>
+          {displayPrice ? (
+            <ShopMono className="text-shop-price text-shop-text font-light whitespace-nowrap shrink-0">
+              {formatMoney(displayPrice.amount, displayPrice.currencyCode)}
+            </ShopMono>
+          ) : null}
+        </div>
+
+        {/* COLOR + SIZE + QUANTITY — all on one flex-wrap row */}
+        <div className="flex flex-wrap gap-x-6 gap-y-5 items-start justify-start px-6 py-5">
+          {product.options
+            .filter((o) => o.values.length > 1)
+            .map((option) => {
+              const isSizeOption = /size/i.test(option.name)
+
+              if (isSizeOption) {
+                return (
+                  <div key={option.id} className="flex flex-col gap-3 w-full">
+                    <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                      {option.name}
+                    </span>
+                    <div className="flex flex-wrap gap-1.5">
+                      {option.values.map((value) => {
+                        const isSelected = selected[option.name] === value
+                        const match = findMatchingVariant(variants, {
+                          ...selected,
+                          [option.name]: value,
+                        })
+                        const isUnavailable = !match?.availableForSale
+                        return (
+                          <button
+                            key={value}
+                            type="button"
+                            aria-pressed={isSelected}
+                            disabled={isUnavailable}
+                            onClick={() =>
+                              setSelected({ ...selected, [option.name]: value })
+                            }
+                            className={twMerge(
+                              'px-4 py-2 font-shop-mono text-shop-sm leading-none whitespace-nowrap',
+                              'rounded-full border transition-[background-color,color,border-color] duration-150',
+                              isSelected
+                                ? 'bg-shop-text text-shop-bg border-shop-text'
+                                : 'bg-shop-surface text-shop-text border-shop-line hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+                              isUnavailable &&
+                                !isSelected &&
+                                'opacity-40 cursor-not-allowed line-through',
+                            )}
+                          >
+                            {value}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )
+              }
+
+              // Color / other options
+              return (
+                <div key={option.id} className="flex flex-col gap-3 w-full">
+                  <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+                    {option.name}
+                  </span>
+                  <div className="flex flex-wrap gap-1.5">
+                    {option.values.map((value) => {
+                      const isSelected = selected[option.name] === value
+                      const match = findMatchingVariant(variants, {
+                        ...selected,
+                        [option.name]: value,
+                      })
+                      const isUnavailable = !match?.availableForSale
+                      const hex = resolveColorHex(value)
+                      return (
+                        <button
+                          key={value}
+                          type="button"
+                          aria-pressed={isSelected}
+                          disabled={isUnavailable}
+                          onClick={() =>
+                            setSelected({ ...selected, [option.name]: value })
+                          }
+                          style={
+                            isSelected && hex
+                              ? {
+                                  backgroundColor: hex,
+                                  ...(isDarkColor(hex)
+                                    ? {
+                                        boxShadow:
+                                          'inset 0 0 0 1.5px rgba(255,255,255,0.25)',
+                                      }
+                                    : {}),
+                                }
+                              : undefined
+                          }
+                          className={twMerge(
+                            'px-4 py-2 font-shop-mono text-shop-sm leading-none whitespace-nowrap',
+                            'rounded-full border transition-[background-color,color,border-color] duration-150',
+                            isSelected && !hex
+                              ? 'bg-shop-accent text-shop-accent-ink border-shop-accent'
+                              : isSelected && hex && isDarkColor(hex)
+                                ? 'text-white border-transparent'
+                                : isSelected && hex
+                                  ? 'text-shop-text border-transparent'
+                                  : 'bg-shop-surface text-shop-text border-shop-line hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
+                            isUnavailable &&
+                              !isSelected &&
+                              'opacity-40 cursor-not-allowed line-through',
+                          )}
+                        >
+                          {value}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+
+          {/* Quantity pill */}
+          <div className="flex flex-col gap-3 shrink-0">
+            <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+              Quantity
+            </span>
+            <div className="bg-shop-surface flex h-[38px] items-center justify-center gap-4 px-4 rounded-full w-[100px] font-shop-mono select-none">
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => q + 1)}
+                aria-label="Increase quantity"
+                className="text-shop-sm text-shop-text-2 leading-none hover:text-shop-text transition-colors"
+              >
+                +
+              </button>
+              <span className="text-shop-sm text-shop-text min-w-[1ch] text-center">
+                {quantity}
+              </span>
+              <button
+                type="button"
+                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                aria-label="Decrease quantity"
+                className="text-shop-sm text-shop-text-2 leading-none hover:text-shop-text transition-colors"
+              >
+                −
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-3 border-t border-shop-line" />
+
+        {/* Add to Cart */}
+        <div className="flex flex-col items-center px-6 py-5">
+          <button
+            type="button"
+            disabled={
+              !isComplete ||
+              !selectedVariant?.availableForSale ||
+              (addToCart.isPending && !showAdded)
+            }
+            onClick={() => {
+              if (!selectedVariant) return
+              setShowAdded(true)
+              openCartDrawer()
+              addToCart.mutate({
+                variantId: selectedVariant.id,
+                quantity,
+                line: {
+                  productTitle: product.title,
+                  productHandle: product.handle,
+                  variantTitle: selectedVariant.title,
+                  price: selectedVariant.price,
+                  image: selectedVariant.image,
+                  selectedOptions: selectedVariant.selectedOptions,
+                },
+              })
+            }}
+            style={
+              isComplete && !showAdded && selectedVariant?.availableForSale
+                ? {
+                    backgroundImage:
+                      'linear-gradient(235.54deg, rgba(116,220,255,0.99) 3.4%, rgba(255,242,124,0.99) 13.1%, rgba(255,160,92,0.99) 27.1%, rgba(255,95,95,0.99) 39.5%)',
+                    backgroundSize: '200% 200%',
+                    animation:
+                      'shop-cta-gradient 12s ease infinite, shop-cta-rotate 30s linear infinite',
+                  }
+                : undefined
+            }
+            className={twMerge(
+              'w-full max-w-[760px] rounded-full px-4 py-3 flex items-center justify-center gap-2.5',
+              'font-shop-display font-semibold text-shop-title',
+              'transition-[background-color,color,border-color,opacity] duration-500',
+              isComplete && !showAdded && selectedVariant?.availableForSale
+                ? 'hover:enabled:brightness-105 text-black'
+                : isComplete && !selectedVariant?.availableForSale
+                  ? 'bg-shop-surface text-shop-muted border border-shop-line'
+                  : 'bg-shop-surface/30 border border-shop-line text-shop-muted cursor-not-allowed',
+            )}
+          >
+            {isComplete && !showAdded && selectedVariant?.availableForSale ? (
+              <svg
+                width="22"
+                height="22"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden
+              >
+                <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
+                <path d="M3 6h18" />
+                <path d="M16 10a4 4 0 01-8 0" />
+              </svg>
+            ) : null}
+            {showAdded
+              ? '✓ Added'
+              : !isComplete
+                ? 'Add to Cart'
+                : !selectedVariant?.availableForSale
+                  ? 'Sold out'
+                  : 'Add to Cart'}
+          </button>
+        </div>
+
+        <div className="mx-3 border-t border-shop-line" />
+
+        {/* Description */}
+        {product.descriptionHtml ? (
+          <div className="flex flex-col gap-2.5 px-6 py-4">
+            <span className="font-shop-mono italic text-shop-sm text-shop-muted uppercase tracking-[0.1em]">
+              Description
+            </span>
+            <div
+              className="text-shop-body text-shop-text-2 leading-[1.6] [&_p]:mb-2 [&_p:last-child]:mb-0"
+              dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopHero.tsx b/src/components/shop/ShopHero.tsx
index fbaa8564..6f8c6c1f 100644
--- a/src/components/shop/ShopHero.tsx
+++ b/src/components/shop/ShopHero.tsx
@@ -15,7 +15,7 @@ export function ShopHero({
       <h1
         className="
           font-shop-display font-bold text-shop-text
-          text-[clamp(36px,5vw,52px)] leading-[1.02] tracking-[-0.03em] m-0
+          text-shop-display leading-[1.02] tracking-[-0.03em] m-0
           [&_em]:not-italic [&_em]:text-shop-accent [&_em]:relative
           [&_em]:after:content-[''] [&_em]:after:absolute [&_em]:after:inset-x-0
           [&_em]:after:-bottom-0.5 [&_em]:after:h-[3px]
@@ -25,7 +25,7 @@ export function ShopHero({
         {title}
       </h1>
       {lede ? (
-        <p className="text-shop-text-2 text-[15px] mt-3.5 max-w-[58ch] leading-[1.55]">
+        <p className="text-shop-text-2 text-shop-sm font-normal mt-3.5 max-w-[58ch] leading-[1.55] opacity-75">
           {lede}
         </p>
       ) : null}
diff --git a/src/components/shop/ShopLayout.tsx b/src/components/shop/ShopLayout.tsx
index dcb3e47a..d035dbe9 100644
--- a/src/components/shop/ShopLayout.tsx
+++ b/src/components/shop/ShopLayout.tsx
@@ -1,147 +1,15 @@
 import * as React from 'react'
-import { Link, useLocation } from '@tanstack/react-router'
-import {
-  ChevronLeft,
-  ChevronRight,
-  Code,
-  FileText,
-  Menu,
-  Search,
-  Shirt,
-  ShoppingBag,
-  ShoppingCart,
-  Sparkles,
-  Tag,
-  X,
-} from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
-import { useLocalStorage } from '~/utils/useLocalStorage'
-import type { CollectionListItem, PolicySummary } from '~/utils/shopify-queries'
 import { CartDrawer } from './CartDrawer'
 import { useCartDrawerStore } from './cartDrawerStore'
-import { ShopLabel } from './ui'
-
-type IconComponent = React.ComponentType<{ className?: string }>
 
 type ShopLayoutProps = {
-  collections: Array<CollectionListItem>
-  policies: Array<PolicySummary>
   children: React.ReactNode
 }
 
-const COLLECTION_ICON_MAP: Record<string, IconComponent> = {
-  apparel: Shirt,
-  accessories: Tag,
-  'library-merch': Code,
-}
-
-/**
- * /shop layout: persistent left sidebar on md+, slide-in drawer on mobile.
- * Wraps children in a `.shop-scope` element so shop design tokens apply only
- * to /shop pages. Collapse state persists to localStorage; when collapsed,
- * hovering the rail expands it as an overlay.
- */
-export function ShopLayout({
-  collections,
-  policies,
-  children,
-}: ShopLayoutProps) {
-  const [isCollapsed, setIsCollapsed] = useLocalStorage(
-    'shopSidebarCollapsed',
-    false,
-  )
-  const [isHoverExpanded, setIsHoverExpanded] = React.useState(false)
-  const [isMobileOpen, setIsMobileOpen] = React.useState(false)
-
-  const showExpanded = !isCollapsed || isHoverExpanded
-
+export function ShopLayout({ children }: ShopLayoutProps) {
   return (
     <div className="shop-scope relative min-h-[calc(100vh-var(--navbar-height,0px))]">
-      {/* Mobile menu toggle */}
-      <button
-        type="button"
-        onClick={() => setIsMobileOpen(true)}
-        aria-label="Open shop menu"
-        className="md:hidden fixed left-4 top-[calc(var(--navbar-height,56px)+0.75rem)] z-30 p-2 rounded-md bg-shop-panel border border-shop-line text-shop-text"
-      >
-        <Menu className="w-4 h-4" />
-      </button>
-
-      {/* Mobile backdrop */}
-      {isMobileOpen ? (
-        <button
-          type="button"
-          aria-label="Close shop menu"
-          onClick={() => setIsMobileOpen(false)}
-          className="md:hidden fixed inset-0 z-40 bg-black/40"
-        />
-      ) : null}
-
-      <aside
-        onMouseEnter={() => isCollapsed && setIsHoverExpanded(true)}
-        onMouseLeave={() => isCollapsed && setIsHoverExpanded(false)}
-        className={twMerge(
-          'fixed left-0 top-0 md:top-[var(--navbar-height,0px)] bottom-0 z-40 md:z-20',
-          'bg-shop-bg border-r border-shop-line',
-          'transition-[width,transform] duration-200 ease-out flex flex-col',
-          showExpanded ? 'w-60' : 'w-14',
-          isMobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
-          isCollapsed && isHoverExpanded
-            ? 'md:shadow-xl md:border-r-transparent'
-            : '',
-        )}
-      >
-        <div className="md:hidden flex justify-end p-2">
-          <button
-            type="button"
-            onClick={() => setIsMobileOpen(false)}
-            aria-label="Close shop menu"
-            className="p-2 rounded-md hover:bg-shop-panel text-shop-text-2"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <ShopSidebarNav
-          collections={collections}
-          policies={policies}
-          showLabels={showExpanded}
-          onNavigate={() => setIsMobileOpen(false)}
-        />
-
-        <div className="hidden md:flex mt-auto border-t border-shop-line p-2">
-          <button
-            type="button"
-            onClick={() => {
-              setIsCollapsed(!isCollapsed)
-              setIsHoverExpanded(false)
-            }}
-            aria-label={
-              isCollapsed ? 'Expand shop sidebar' : 'Collapse shop sidebar'
-            }
-            className="w-full flex items-center gap-2 px-2 py-2 rounded-md text-xs text-shop-text-2 hover:text-shop-text hover:bg-shop-panel transition-colors"
-          >
-            {isCollapsed ? (
-              <ChevronRight className="w-4 h-4" />
-            ) : (
-              <>
-                <ChevronLeft className="w-4 h-4" />
-                <span>Collapse</span>
-              </>
-            )}
-          </button>
-        </div>
-      </aside>
-
-      <main
-        className={twMerge(
-          'min-w-0 transition-[padding-left] duration-200',
-          isCollapsed ? 'md:pl-14' : 'md:pl-60',
-        )}
-      >
-        {children}
-      </main>
-
+      <main className="min-w-0">{children}</main>
       <ShopCartDrawer />
     </div>
   )
@@ -152,158 +20,3 @@ function ShopCartDrawer() {
   const setOpen = useCartDrawerStore((s) => s.setOpen)
   return <CartDrawer open={open} onOpenChange={setOpen} />
 }
-
-function ShopSidebarNav({
-  collections,
-  policies,
-  showLabels,
-  onNavigate,
-}: {
-  collections: Array<CollectionListItem>
-  policies: Array<PolicySummary>
-  showLabels: boolean
-  onNavigate: () => void
-}) {
-  return (
-    <nav className="flex-1 overflow-y-auto px-2 py-4 flex flex-col gap-4">
-      <SidebarSection label="Shop" showLabels={showLabels}>
-        <SidebarLink
-          to="/shop"
-          label="All Products"
-          icon={ShoppingBag}
-          showLabels={showLabels}
-          onNavigate={onNavigate}
-          exact
-        />
-        <SidebarLink
-          to="/shop/search"
-          label="Search"
-          icon={Search}
-          showLabels={showLabels}
-          onNavigate={onNavigate}
-        />
-        <SidebarLink
-          to="/shop/cart"
-          label="Cart"
-          icon={ShoppingCart}
-          showLabels={showLabels}
-          onNavigate={onNavigate}
-        />
-      </SidebarSection>
-
-      {collections.length > 0 ? (
-        <SidebarSection label="Collections" showLabels={showLabels}>
-          {collections.map((c) => (
-            <SidebarLink
-              key={c.id}
-              to="/shop/collections/$handle"
-              params={{ handle: c.handle }}
-              label={c.title}
-              icon={COLLECTION_ICON_MAP[c.handle] ?? Sparkles}
-              showLabels={showLabels}
-              onNavigate={onNavigate}
-            />
-          ))}
-        </SidebarSection>
-      ) : null}
-
-      {policies.length > 0 ? (
-        <SidebarSection label="Info" showLabels={showLabels}>
-          {policies.map((policy) => (
-            <SidebarLink
-              key={policy.handle}
-              to="/shop/policies/$handle"
-              params={{ handle: policy.handle }}
-              label={policy.title}
-              icon={FileText}
-              showLabels={showLabels}
-              onNavigate={onNavigate}
-            />
-          ))}
-        </SidebarSection>
-      ) : null}
-    </nav>
-  )
-}
-
-function SidebarSection({
-  label,
-  showLabels,
-  children,
-}: {
-  label: string
-  showLabels: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-1">
-      <ShopLabel
-        className={twMerge(
-          'px-2.5 h-5 flex items-center transition-opacity',
-          showLabels ? 'opacity-100' : 'opacity-0',
-        )}
-      >
-        {label}
-      </ShopLabel>
-      {children}
-    </div>
-  )
-}
-
-function SidebarLink({
-  to,
-  params,
-  label,
-  icon: Icon,
-  showLabels,
-  onNavigate,
-  exact,
-}: {
-  to: string
-  params?: Record<string, string>
-  label: string
-  icon: IconComponent
-  showLabels: boolean
-  onNavigate: () => void
-  exact?: boolean
-}) {
-  const { pathname } = useLocation()
-  const resolvedHref = params
-    ? to.replace(/\$(\w+)/g, (_, k: string) => params[k] ?? '')
-    : to
-  const isActive = exact
-    ? pathname === resolvedHref
-    : pathname === resolvedHref || pathname.startsWith(`${resolvedHref}/`)
-
-  return (
-    <Link
-      // Cast to `any` is intentional: sidebar links are built from typed
-      // route literals, but collections come from a dynamic server list,
-      // so the union of safe paths is wider than inference can handle here.
-      to={to as any}
-      params={params as any}
-      onClick={onNavigate}
-      title={showLabels ? undefined : label}
-      className={twMerge(
-        'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-colors whitespace-nowrap overflow-hidden text-ellipsis',
-        'text-shop-text-2 hover:bg-shop-panel hover:text-shop-text',
-        isActive && 'bg-shop-panel text-shop-text',
-      )}
-    >
-      <Icon
-        className={twMerge(
-          'w-3.5 h-3.5 shrink-0',
-          isActive ? 'text-shop-text' : 'text-shop-muted',
-        )}
-      />
-      <span
-        className={twMerge(
-          'transition-opacity duration-150',
-          showLabels ? 'opacity-100' : 'opacity-0 pointer-events-none',
-        )}
-      >
-        {label}
-      </span>
-    </Link>
-  )
-}
diff --git a/src/components/shop/ui/Badge.tsx b/src/components/shop/ui/Badge.tsx
index c9c1ea5d..73fa231d 100644
--- a/src/components/shop/ui/Badge.tsx
+++ b/src/components/shop/ui/Badge.tsx
@@ -21,7 +21,7 @@ export function ShopBadge({
   return (
     <span
       className={twMerge(
-        'inline-flex items-center font-shop-mono text-[9.5px] tracking-[0.1em] uppercase',
+        'inline-flex items-center font-shop-mono text-shop-2xs tracking-[0.1em] uppercase',
         'px-1.5 py-[3px] rounded border',
         variants[variant],
         className,
diff --git a/src/components/shop/ui/Button.tsx b/src/components/shop/ui/Button.tsx
index 76ef594e..7bff7c63 100644
--- a/src/components/shop/ui/Button.tsx
+++ b/src/components/shop/ui/Button.tsx
@@ -9,15 +9,15 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 }
 
 const base =
-  'inline-flex items-center justify-center gap-2 rounded-md font-semibold font-sans transition-[filter,border-color,background-color,color] disabled:opacity-50 disabled:cursor-not-allowed'
+  'inline-flex items-center justify-center gap-2 rounded-md font-semibold font-shop-display transition-[filter,border-color,background-color,color] disabled:opacity-50 disabled:cursor-not-allowed'
 
 const variants: Record<Variant, string> = {
   primary:
-    'bg-shop-accent text-shop-accent-ink px-4 py-2.5 text-[13px] hover:enabled:brightness-110',
+    'bg-shop-accent text-shop-accent-ink px-4 py-2.5 text-shop-ui hover:enabled:brightness-110',
   outline:
-    'border border-shop-line bg-shop-panel text-shop-text px-3.5 py-2 text-[12.5px] hover:enabled:border-shop-line-2',
+    'border border-shop-line bg-shop-panel text-shop-text px-3.5 py-2 text-shop-sm hover:enabled:border-shop-line-2',
   ghost:
-    'text-shop-text-2 hover:enabled:text-shop-text hover:enabled:bg-shop-panel px-2 py-1.5 text-[12.5px]',
+    'text-shop-text-2 hover:enabled:text-shop-text hover:enabled:bg-shop-panel px-2 py-1.5 text-shop-sm',
 }
 
 /** Shop button. Three visual weights — primary, outline, ghost. */
diff --git a/src/components/shop/ui/Chip.tsx b/src/components/shop/ui/Chip.tsx
index 30a04a13..222b28f2 100644
--- a/src/components/shop/ui/Chip.tsx
+++ b/src/components/shop/ui/Chip.tsx
@@ -4,17 +4,44 @@ import { twMerge } from 'tailwind-merge'
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   isSelected?: boolean
   isUnavailable?: boolean
+  /** Full hex color for color-swatch chips — drives both selected (100%) and unselected (80%) states. */
+  colorBg?: string
+  /** Legacy: hex background only for the selected state. */
+  selectedBg?: string
+  /** Forced text color when using selectedBg — auto-derived from selectedBg if omitted. */
+  selectedTextColor?: string
 }
 
-/**
- * Variant selector chip — used for non-size options like color or material.
- * Size-specific grid cells use <ShopSize> for the tighter square treatment.
- */
 export const ShopChip = React.forwardRef<HTMLButtonElement, Props>(
   function ShopChip(
-    { isSelected, isUnavailable, children, className, disabled, ...rest },
+    {
+      isSelected,
+      isUnavailable,
+      children,
+      className,
+      disabled,
+      colorBg,
+      selectedBg,
+      selectedTextColor,
+      style,
+      ...rest
+    },
     ref,
   ) {
+    const chipStyle: React.CSSProperties = colorBg
+      ? {
+          backgroundColor: isSelected ? colorBg : hexToRgba(colorBg, 0.8),
+          borderColor: isSelected ? colorBg : hexToRgba(colorBg, 0.5),
+          color: contrastColor(colorBg),
+        }
+      : isSelected && selectedBg
+        ? {
+            backgroundColor: selectedBg,
+            borderColor: selectedBg,
+            color: selectedTextColor ?? contrastColor(selectedBg),
+          }
+        : {}
+
     return (
       <button
         ref={ref}
@@ -22,16 +49,20 @@ export const ShopChip = React.forwardRef<HTMLButtonElement, Props>(
         aria-pressed={isSelected}
         disabled={disabled ?? isUnavailable}
         {...rest}
+        style={{ ...style, ...chipStyle }}
         className={twMerge(
-          'inline-flex items-center gap-[7px] px-3 py-1.5 rounded-md border text-[12px]',
-          'font-sans transition-[border-color,background-color]',
-          'bg-shop-panel text-shop-text border-shop-line',
-          'hover:enabled:border-shop-line-2',
+          'inline-flex items-center gap-[7px] px-3 py-1.5 rounded-md border text-shop-sm',
+          'font-shop-display transition-[border-color,background-color,color]',
+          !colorBg && 'bg-shop-surface text-shop-text border-shop-line',
+          !colorBg &&
+            'hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
           isSelected &&
-            'border-shop-accent bg-shop-accent/10 hover:enabled:border-shop-accent',
+            !colorBg &&
+            !selectedBg &&
+            'bg-shop-panel-2 border-shop-accent text-shop-text hover:enabled:border-shop-accent',
           isUnavailable &&
             !isSelected &&
-            'line-through text-shop-muted opacity-60 cursor-not-allowed',
+            'line-through text-shop-muted opacity-40 cursor-not-allowed',
           className,
         )}
       >
@@ -40,3 +71,21 @@ export const ShopChip = React.forwardRef<HTMLButtonElement, Props>(
     )
   },
 )
+
+function hexToRgba(hex: string, alpha: number): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+/** Returns '#000' or '#fff' based on the perceived luminance of a hex color. */
+function contrastColor(hex: string): string {
+  const h = hex.replace('#', '')
+  const r = parseInt(h.slice(0, 2), 16)
+  const g = parseInt(h.slice(2, 4), 16)
+  const b = parseInt(h.slice(4, 6), 16)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance > 0.55 ? '#000000' : '#ffffff'
+}
diff --git a/src/components/shop/ui/Mono.tsx b/src/components/shop/ui/Mono.tsx
index a089cd09..d18ad1ae 100644
--- a/src/components/shop/ui/Mono.tsx
+++ b/src/components/shop/ui/Mono.tsx
@@ -17,7 +17,7 @@ export function ShopLabel({
   return (
     <Tag
       className={twMerge(
-        'font-shop-mono text-[10.5px] tracking-[0.14em] uppercase text-shop-muted font-medium',
+        'font-shop-mono text-shop-xs tracking-[0.14em] uppercase text-shop-muted font-medium',
         className,
       )}
     >
@@ -26,7 +26,7 @@ export function ShopLabel({
   )
 }
 
-/** Mono text span for inline prices, counts, etc. — JetBrains Mono, inherited size. */
+/** Mono text span for inline prices, counts, etc. — DM Mono, inherited size. */
 export function ShopMono({
   children,
   className,
@@ -35,6 +35,8 @@ export function ShopMono({
   className?: string
 }) {
   return (
-    <span className={twMerge('font-shop-mono', className)}>{children}</span>
+    <span className={`font-shop-mono${className ? ` ${className}` : ''}`}>
+      {children}
+    </span>
   )
 }
diff --git a/src/components/shop/ui/Select.tsx b/src/components/shop/ui/Select.tsx
index 45e9b786..aa394960 100644
--- a/src/components/shop/ui/Select.tsx
+++ b/src/components/shop/ui/Select.tsx
@@ -11,12 +11,12 @@ export const ShopSelect = React.forwardRef<HTMLSelectElement, Props>(
         ref={ref}
         {...rest}
         className={twMerge(
-          'appearance-none border border-shop-line rounded-md',
-          'py-1.5 pl-2.5 pr-7 bg-shop-panel text-shop-text text-[12.5px]',
-          'bg-no-repeat bg-[right_10px_center]',
+          'appearance-none border border-shop-line-2 rounded-xl',
+          'py-2.5 pl-4 pr-8 bg-transparent text-shop-text-2 font-shop-mono text-shop-ui',
+          'bg-no-repeat bg-[right_12px_center]',
           // inline SVG chevron, colored with the muted text token
           "bg-[url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23a8a8b0' fill='none' stroke-width='1.4'/></svg>\")]",
-          'cursor-pointer',
+          'cursor-pointer transition-colors hover:border-shop-muted hover:text-shop-text',
           className,
         )}
       >
diff --git a/src/components/shop/ui/Size.tsx b/src/components/shop/ui/Size.tsx
index 443d827c..b342b75f 100644
--- a/src/components/shop/ui/Size.tsx
+++ b/src/components/shop/ui/Size.tsx
@@ -20,15 +20,16 @@ export const ShopSize = React.forwardRef<HTMLButtonElement, Props>(
         disabled={disabled ?? isUnavailable}
         {...rest}
         className={twMerge(
-          'px-0 py-2.5 border rounded-md text-center',
-          'font-shop-mono font-medium text-[12px]',
-          'bg-shop-panel text-shop-text border-shop-line',
-          'hover:enabled:border-shop-line-2',
+          'px-0 py-2.5 rounded-md text-center border border-shop-line',
+          'font-shop-mono font-medium text-shop-sm',
+          'bg-shop-surface text-shop-text',
+          'transition-[border-color,background-color]',
+          'hover:enabled:bg-shop-surface-hover hover:enabled:border-shop-line-2',
           isSelected &&
             'bg-shop-accent text-shop-accent-ink border-shop-accent',
           isUnavailable &&
             !isSelected &&
-            'line-through text-shop-muted bg-transparent opacity-55 cursor-not-allowed',
+            'line-through text-shop-muted opacity-40 cursor-not-allowed',
           className,
         )}
       >
diff --git a/src/components/shop/ui/Tab.tsx b/src/components/shop/ui/Tab.tsx
index 8a0305d2..fc54165c 100644
--- a/src/components/shop/ui/Tab.tsx
+++ b/src/components/shop/ui/Tab.tsx
@@ -1,39 +1,30 @@
 import * as React from 'react'
-import { twMerge } from 'tailwind-merge'
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   isActive?: boolean
   count?: number
 }
 
-/** Filter tab used in the shop landing header. Pill with optional count. */
+/** Filter tab used in the shop landing header. Pill-shaped, DM Mono, border-only active state. */
 export const ShopTab = React.forwardRef<HTMLButtonElement, Props>(
-  function ShopTab({ isActive, count, children, className, ...rest }, ref) {
+  function ShopTab(
+    { isActive, count: _count, children, className, ...rest },
+    ref,
+  ) {
+    const base =
+      'inline-flex items-center px-4 py-2.5 rounded-xl font-shop-mono text-shop-ui transition-colors cursor-pointer'
+    const state = isActive
+      ? 'border-2 border-shop-muted font-medium text-shop-text'
+      : 'border border-shop-line-2 font-normal text-shop-text-2 hover:text-shop-text hover:border-shop-muted'
+
     return (
       <button
         ref={ref}
         type="button"
         {...rest}
-        className={twMerge(
-          'inline-flex items-center gap-[7px] px-3 py-1.5 rounded-md border text-[12.5px]',
-          'transition-colors',
-          isActive
-            ? 'bg-shop-panel text-shop-text border-shop-line-2'
-            : 'bg-transparent text-shop-text-2 border-shop-line hover:text-shop-text hover:border-shop-line-2',
-          className,
-        )}
+        className={`${base} ${state}${className ? ` ${className}` : ''}`}
       >
         {children}
-        {count != null ? (
-          <span
-            className={twMerge(
-              'font-shop-mono text-[10.5px]',
-              isActive ? 'text-shop-text-2' : 'text-shop-muted',
-            )}
-          >
-            {count}
-          </span>
-        ) : null}
       </button>
     )
   },
diff --git a/src/routes/shop.index.tsx b/src/routes/shop.index.tsx
index 1ddc6d89..30ed18dd 100644
--- a/src/routes/shop.index.tsx
+++ b/src/routes/shop.index.tsx
@@ -3,9 +3,9 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useMutation } from '@tanstack/react-query'
 import * as v from 'valibot'
 import { ProductCard } from '~/components/shop/ProductCard'
+import { ProductDrawer } from '~/components/shop/ProductDrawer'
 import { ShopHero } from '~/components/shop/ShopHero'
-import { ShopDropCard } from '~/components/shop/ShopDropCard'
-import { ShopStrip } from '~/components/shop/ShopStrip'
+
 import { ShopButton, ShopSelect, ShopTab } from '~/components/shop/ui'
 import { getProducts } from '~/utils/shop.functions'
 import {
@@ -58,6 +58,8 @@ function ShopIndex() {
   const search = Route.useSearch()
   const activeType = search.type?.toLowerCase() ?? 'all'
 
+  const [drawerHandle, setDrawerHandle] = React.useState<string | null>(null)
+
   const [accumulated, setAccumulated] = React.useState<Array<ProductListItem>>(
     [],
   )
@@ -123,7 +125,7 @@ function ShopIndex() {
 
   return (
     <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto">
-      <div className="flex flex-wrap justify-between items-start gap-10 pb-5.5 border-b border-shop-line mb-7">
+      <div className="pb-5.5 border-b border-shop-line-2 mb-7">
         <ShopHero
           title={
             <>
@@ -133,16 +135,6 @@ function ShopIndex() {
           }
           lede="Official TanStack apparel, accessories, and stickers. Limited runs, ethically produced, shipped worldwide. Rep the libraries that ship your code every day."
         />
-        <ShopDropCard
-          status="Shop now — free US shipping over $75"
-          headline="Ship code, wear the merch."
-          rows={[
-            { label: 'Worldwide', value: '7–10 days' },
-            { label: 'Returns', value: '30 days' },
-            { label: 'Free ship over', value: '$75' },
-          ]}
-          cta={{ label: 'Shop all products', href: '/shop' }}
-        />
       </div>
 
       <div className="flex flex-wrap items-center gap-1.5 pb-4.5">
@@ -173,28 +165,26 @@ function ShopIndex() {
             {opt.display}
           </ShopTab>
         ))}
-        <label className="ml-auto flex items-center gap-2 text-[12px] text-shop-muted">
-          <span>Sort</span>
-          <ShopSelect
-            value={sortId}
-            onChange={(e) => {
-              const nextId = e.target.value as ValidSortId
-              navigate({
-                to: '/shop',
-                search: (prev) => ({
-                  ...prev,
-                  sort: nextId === 'BEST_SELLING' ? undefined : nextId,
-                }),
-              })
-            }}
-          >
-            {SORT_OPTIONS.map((opt) => (
-              <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
-                {opt.label}
-              </option>
-            ))}
-          </ShopSelect>
-        </label>
+        <ShopSelect
+          className="ml-auto"
+          value={sortId}
+          onChange={(e) => {
+            const nextId = e.target.value as ValidSortId
+            navigate({
+              to: '/shop',
+              search: (prev) => ({
+                ...prev,
+                sort: nextId === 'BEST_SELLING' ? undefined : nextId,
+              }),
+            })
+          }}
+        >
+          {SORT_OPTIONS.map((opt) => (
+            <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
+              {opt.label}
+            </option>
+          ))}
+        </ShopSelect>
       </div>
 
       {products.length === 0 ? (
@@ -203,12 +193,13 @@ function ShopIndex() {
         </div>
       ) : (
         <>
-          <section className="grid gap-x-4 gap-y-5.5 grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <section className="grid gap-x-4 gap-y-5.5 grid-cols-[repeat(auto-fill,minmax(340px,1fr))]">
             {products.map((product, i) => (
               <ProductCard
                 key={product.id}
                 product={product}
                 loading={i < 8 ? 'eager' : 'lazy'}
+                onQuickView={setDrawerHandle}
               />
             ))}
           </section>
@@ -225,14 +216,11 @@ function ShopIndex() {
         </>
       )}
 
-      <ShopStrip
-        items={[
-          'Worldwide shipping',
-          '30-day returns',
-          'Carbon-neutral packing',
-          'Official TanStack',
-          'Proceeds fund open-source',
-        ]}
+      <ProductDrawer
+        productHandle={drawerHandle}
+        allHandles={products.map((p) => p.handle)}
+        onClose={() => setDrawerHandle(null)}
+        onChange={setDrawerHandle}
       />
     </div>
   )
diff --git a/src/routes/shop.tsx b/src/routes/shop.tsx
index f1d39180..67737aa3 100644
--- a/src/routes/shop.tsx
+++ b/src/routes/shop.tsx
@@ -2,11 +2,7 @@ import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
 import shopCss from '~/styles/shop.css?url'
 import { ShopLayout } from '~/components/shop/ShopLayout'
 import { CART_QUERY_KEY } from '~/hooks/useCart'
-import {
-  getCart,
-  getCollections,
-  getShopPolicies,
-} from '~/utils/shop.functions'
+import { getCart } from '~/utils/shop.functions'
 import { seo } from '~/utils/seo'
 
 const SHOP_FONTS_HREF =
@@ -14,18 +10,10 @@ const SHOP_FONTS_HREF =
 
 export const Route = createFileRoute('/shop')({
   loader: async ({ context }) => {
-    // Fetch collections + policies for the sidebar, and pre-seed the cart
-    // into the React Query cache so any /shop child page (including the
-    // cart page) renders with real data on the very first frame.
-    const [collections, policies] = await Promise.all([
-      getCollections(),
-      getShopPolicies(),
-      context.queryClient.prefetchQuery({
-        queryKey: CART_QUERY_KEY,
-        queryFn: () => getCart(),
-      }),
-    ])
-    return { collections, policies }
+    await context.queryClient.prefetchQuery({
+      queryKey: CART_QUERY_KEY,
+      queryFn: () => getCart(),
+    })
   },
   head: () => ({
     meta: seo({
@@ -45,8 +33,6 @@ export const Route = createFileRoute('/shop')({
     ],
   }),
   staticData: {
-    // Providing a Title flips the main Navbar into flyout mode so the shop
-    // sidebar takes over the primary left rail (same behavior as doc pages).
     Title: () => (
       <Link to="/shop" className="relative whitespace-nowrap">
         <span className="inline-block text-transparent bg-clip-text bg-linear-to-r from-blue-500 to-cyan-400">
@@ -55,14 +41,9 @@ export const Route = createFileRoute('/shop')({
       </Link>
     ),
   },
-  component: ShopRoute,
-})
-
-function ShopRoute() {
-  const { collections, policies } = Route.useLoaderData()
-  return (
-    <ShopLayout collections={collections} policies={policies}>
+  component: () => (
+    <ShopLayout>
       <Outlet />
     </ShopLayout>
-  )
-}
+  ),
+})
diff --git a/src/styles/app.css b/src/styles/app.css
index a5671e30..da9c42bd 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -24,6 +24,19 @@ html.theme-switching *::after {
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+  --font-shop-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-shop-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Shop type scale */
+  --text-shop-display: clamp(36px, 5vw, 52px);
+  --text-shop-heading: 22px;
+  --text-shop-title: 18px;
+  --text-shop-price: 20px;
+  --text-shop-body: 13.5px;
+  --text-shop-ui: 13px;
+  --text-shop-sm: 12px;
+  --text-shop-xs: 10.5px;
+  --text-shop-2xs: 9.5px;
 
   /* Shadows */
   --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
@@ -67,6 +80,25 @@ html.theme-switching *::after {
   --color-gray-950: #0a0a0a;
 }
 
+/* Shop color tokens — inline so they resolve via var() at runtime (scoped to .shop-scope / html.dark .shop-scope) */
+@theme inline {
+  --color-shop-bg: var(--shop-bg);
+  --color-shop-bg-2: var(--shop-bg-2);
+  --color-shop-panel: var(--shop-panel);
+  --color-shop-panel-2: var(--shop-panel-2);
+  --color-shop-surface: var(--shop-surface);
+  --color-shop-surface-hover: var(--shop-surface-hover);
+  --color-shop-line: var(--shop-line);
+  --color-shop-line-2: var(--shop-line-2);
+  --color-shop-text: var(--shop-text);
+  --color-shop-text-2: var(--shop-text-2);
+  --color-shop-muted: var(--shop-muted);
+  --color-shop-accent: var(--shop-accent);
+  --color-shop-accent-ink: var(--shop-accent-ink);
+  --color-shop-green: #22c993;
+  --color-shop-orange: #ff7a3a;
+}
+
 /* Safelist for dynamic colors */
 @source inline('{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/{20,30,40,80}');
 @source inline('{hover:{bg-blue-{4,5,6}00,bg-emerald-500,bg-purple-500,bg-pink-500,bg-cyan-500,bg-slate-{4,5}00,bg-twine-700,bg-orange-{5,6,7}00,bg-yellow-500,bg-lime-700,bg-red-500,bg-green-500}/40}');
diff --git a/src/styles/shop.css b/src/styles/shop.css
index 9c2f9758..09bad880 100644
--- a/src/styles/shop.css
+++ b/src/styles/shop.css
@@ -5,17 +5,21 @@
  *   1. CSS variable declarations for the light/dark token swap
  *   2. A `@theme inline` block that exposes those vars to Tailwind so you can
  *      write `bg-shop-panel`, `text-shop-muted`, `font-shop-display`, etc.
- *   3. The single `shop-pulse` keyframe used by the live-stock indicator.
+ *   3. Keyframes used by the live-stock indicator and CTA button.
  *
  * Everything else is Tailwind utilities on components — no bespoke class
  * selectors, no global leakage.
  */
 
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');
+
 @theme inline {
   --color-shop-bg: var(--shop-bg);
   --color-shop-bg-2: var(--shop-bg-2);
   --color-shop-panel: var(--shop-panel);
   --color-shop-panel-2: var(--shop-panel-2);
+  --color-shop-surface: var(--shop-surface);
+  --color-shop-surface-hover: var(--shop-surface-hover);
   --color-shop-line: var(--shop-line);
   --color-shop-line-2: var(--shop-line-2);
   --color-shop-text: var(--shop-text);
@@ -27,36 +31,39 @@
   --color-shop-orange: #ff7a3a;
 
   --font-shop-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
-  --font-shop-mono:
-    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-shop-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
 /* Light mode (default) */
 .shop-scope {
-  --shop-bg: #fafaf7;
+  --shop-bg: #f6f6ec;
   --shop-bg-2: #ffffff;
   --shop-panel: #ffffff;
-  --shop-panel-2: #f4f3ee;
+  --shop-panel-2: #edecea;
+  --shop-surface: #dcdccb;
+  --shop-surface-hover: #d0cfbe;
   --shop-line: #e6e3db;
-  --shop-line-2: #d4d0c4;
-  --shop-text: #16130d;
-  --shop-text-2: #5a564b;
+  --shop-line-2: #d4d1c4;
+  --shop-text: #111111;
+  --shop-text-2: #4d4d49;
   --shop-muted: #8a8471;
   --shop-accent: #0891b2;
   --shop-accent-ink: #ffffff;
 
   background: var(--shop-bg);
   color: var(--shop-text);
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
 }
 
 html.dark .shop-scope {
   --shop-bg: #0a0a0a;
-  --shop-bg-2: #111114;
+  --shop-bg-2: #121212;
   --shop-panel: #17171b;
   --shop-panel-2: #1d1d22;
+  --shop-surface: #1c1c1c;
+  --shop-surface-hover: #252525;
   --shop-line: #26262c;
-  --shop-line-2: #32323a;
+  --shop-line-2: #26262c;
   --shop-text: #e7e7ea;
   --shop-text-2: #a8a8b0;
   --shop-muted: #6f6f79;
@@ -64,6 +71,27 @@ html.dark .shop-scope {
   --shop-accent-ink: #001217;
 }
 
+@keyframes shop-cta-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes shop-cta-rotate {
+  from {
+    filter: hue-rotate(0deg) brightness(1);
+  }
+  to {
+    filter: hue-rotate(360deg) brightness(1);
+  }
+}
+
 @keyframes shop-pulse {
   0% {
     box-shadow: 0 0 0 0
diff --git a/src/utils/shopify-format.ts b/src/utils/shopify-format.ts
index e961d2f3..05a2e815 100644
--- a/src/utils/shopify-format.ts
+++ b/src/utils/shopify-format.ts
@@ -7,6 +7,8 @@ export function formatMoney(amount: string | number, currencyCode: string) {
   return new Intl.NumberFormat(undefined, {
     style: 'currency',
     currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
   }).format(typeof amount === 'string' ? Number(amount) : amount)
 }
 
diff --git a/src/utils/shopify-queries.ts b/src/utils/shopify-queries.ts
index c5dc30df..579562b7 100644
--- a/src/utils/shopify-queries.ts
+++ b/src/utils/shopify-queries.ts
@@ -55,12 +55,31 @@ const PRODUCT_CARD_FRAGMENT = /* GraphQL */ `
     title
     productType
     tags
+    publishedAt
+    options {
+      name
+      values
+    }
     featuredImage {
       url
       altText
       width
       height
     }
+    variants(first: 10) {
+      nodes {
+        selectedOptions {
+          name
+          value
+        }
+        image {
+          url
+          altText
+          width
+          height
+        }
+      }
+    }
     priceRange {
       minVariantPrice {
         amount
@@ -105,13 +124,23 @@ export const PRODUCTS_QUERY = /* GraphQL */ `
   }
 `
 
+type CardVariantImage = Pick<
+  StorefrontImage,
+  'url' | 'altText' | 'width' | 'height'
+> | null
+
 export type ProductListItem = Pick<
   Product,
-  'id' | 'handle' | 'title' | 'productType' | 'tags'
+  'id' | 'handle' | 'title' | 'productType' | 'tags' | 'publishedAt'
 > & {
-  featuredImage:
-    | (Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null)
-    | null
+  options: Array<Pick<ProductOption, 'name' | 'values'>>
+  featuredImage: CardVariantImage | null
+  variants: {
+    nodes: Array<{
+      selectedOptions: Array<{ name: string; value: string }>
+      image: CardVariantImage
+    }>
+  }
   priceRange: {
     minVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>
     maxVariantPrice: Pick<MoneyV2, 'amount' | 'currencyCode'>