From 850a5e12168c4bdc66d7d02690acb4bd9bc46d4d Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Mon, 20 Apr 2026 22:10:19 -0600
Subject: [PATCH] feat(shop): redesign /shop pages with editorial theme and
 Tailwind primitives

Scoped-only rewrite of the /shop landing, PDP, cart, drawer, and collection/search/policy pages to match a new editorial merch-store direction (cyan accent, DM Sans display, JetBrains Mono for prices/meta). Theme tokens live on a `.shop-scope` wrapper with light and dark variants, exposed to Tailwind via `@theme inline` so authoring stays in utility classes. New primitives under `src/components/shop/ui/` (Button, Badge, Chip, Size, Qty, Select, Input, Tab, Panel, Pulse, Mono, Crumb) and composed pieces (Hero, DropCard, Strip, Specs, Note) back the pages. Global site, navbar, and non-shop routes are unchanged; `shop.css` and the DM Sans / JetBrains Mono fonts only load on /shop. `ProductListItem` gains `productType` and `tags` to power the hover tag + New/Low-stock badges.
---
 src/components/shop/Breadcrumbs.tsx     |  52 ----
 src/components/shop/CartDrawer.tsx      | 114 +++++----
 src/components/shop/ProductCard.tsx     | 113 +++++++--
 src/components/shop/ShopDropCard.tsx    |  65 +++++
 src/components/shop/ShopHero.tsx        |  34 +++
 src/components/shop/ShopLayout.tsx      |  70 ++----
 src/components/shop/ShopNote.tsx        |  23 ++
 src/components/shop/ShopSpecs.tsx       |  23 ++
 src/components/shop/ShopStrip.tsx       |  18 ++
 src/components/shop/ui/Badge.tsx        |  33 +++
 src/components/shop/ui/Button.tsx       |  44 ++++
 src/components/shop/ui/Chip.tsx         |  42 ++++
 src/components/shop/ui/Crumb.tsx        |  45 ++++
 src/components/shop/ui/Input.tsx        |  24 ++
 src/components/shop/ui/Mono.tsx         |  40 ++++
 src/components/shop/ui/Panel.tsx        |  24 ++
 src/components/shop/ui/Pulse.tsx        |  15 ++
 src/components/shop/ui/Qty.tsx          |  69 ++++++
 src/components/shop/ui/Select.tsx       |  27 +++
 src/components/shop/ui/Size.tsx         |  39 +++
 src/components/shop/ui/Tab.tsx          |  40 ++++
 src/components/shop/ui/index.ts         |  12 +
 src/routes/shop.cart.tsx                | 200 ++++++++--------
 src/routes/shop.collections.$handle.tsx |  45 ++--
 src/routes/shop.index.tsx               | 229 +++++++++++-------
 src/routes/shop.pages.$handle.tsx       |  23 +-
 src/routes/shop.policies.$handle.tsx    |  23 +-
 src/routes/shop.products.$handle.tsx    | 305 ++++++++++++++----------
 src/routes/shop.search.tsx              |  49 ++--
 src/routes/shop.tsx                     |  14 ++
 src/styles/shop.css                     |  80 +++++++
 src/utils/shopify-queries.ts            |   7 +-
 32 files changed, 1377 insertions(+), 564 deletions(-)
 delete mode 100644 src/components/shop/Breadcrumbs.tsx
 create mode 100644 src/components/shop/ShopDropCard.tsx
 create mode 100644 src/components/shop/ShopHero.tsx
 create mode 100644 src/components/shop/ShopNote.tsx
 create mode 100644 src/components/shop/ShopSpecs.tsx
 create mode 100644 src/components/shop/ShopStrip.tsx
 create mode 100644 src/components/shop/ui/Badge.tsx
 create mode 100644 src/components/shop/ui/Button.tsx
 create mode 100644 src/components/shop/ui/Chip.tsx
 create mode 100644 src/components/shop/ui/Crumb.tsx
 create mode 100644 src/components/shop/ui/Input.tsx
 create mode 100644 src/components/shop/ui/Mono.tsx
 create mode 100644 src/components/shop/ui/Panel.tsx
 create mode 100644 src/components/shop/ui/Pulse.tsx
 create mode 100644 src/components/shop/ui/Qty.tsx
 create mode 100644 src/components/shop/ui/Select.tsx
 create mode 100644 src/components/shop/ui/Size.tsx
 create mode 100644 src/components/shop/ui/Tab.tsx
 create mode 100644 src/components/shop/ui/index.ts
 create mode 100644 src/styles/shop.css

diff --git a/src/components/shop/Breadcrumbs.tsx b/src/components/shop/Breadcrumbs.tsx
deleted file mode 100644
index d27218fd7..000000000
--- a/src/components/shop/Breadcrumbs.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react'
-import { Link } from '@tanstack/react-router'
-import { ChevronRight } from 'lucide-react'
-
-export type Crumb = {
-  label: string
-  href?: string
-}
-
-/**
- * Accessible breadcrumb trail. The last crumb renders as plain text
- * (current location); intermediate crumbs link back.
- */
-export function Breadcrumbs({ crumbs }: { crumbs: Array<Crumb> }) {
-  return (
-    <nav aria-label="Breadcrumb" className="text-sm">
-      <ol className="flex items-center gap-1.5 flex-wrap text-gray-600 dark:text-gray-400">
-        {crumbs.map((crumb, i) => {
-          const isLast = i === crumbs.length - 1
-          return (
-            <React.Fragment key={`${crumb.label}-${i}`}>
-              <li>
-                {crumb.href && !isLast ? (
-                  <Link
-                    to={crumb.href}
-                    className="hover:text-black dark:hover:text-white transition-colors"
-                  >
-                    {crumb.label}
-                  </Link>
-                ) : (
-                  <span
-                    aria-current={isLast ? 'page' : undefined}
-                    className={
-                      isLast ? 'text-black dark:text-white font-medium' : ''
-                    }
-                  >
-                    {crumb.label}
-                  </span>
-                )}
-              </li>
-              {isLast ? null : (
-                <li aria-hidden="true" className="text-gray-400">
-                  <ChevronRight className="w-3.5 h-3.5" />
-                </li>
-              )}
-            </React.Fragment>
-          )
-        })}
-      </ol>
-    </nav>
-  )
-}
diff --git a/src/components/shop/CartDrawer.tsx b/src/components/shop/CartDrawer.tsx
index e25e3b103..1cb62c02a 100644
--- a/src/components/shop/CartDrawer.tsx
+++ b/src/components/shop/CartDrawer.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import * as Dialog from '@radix-ui/react-dialog'
 import { Link } from '@tanstack/react-router'
 import { Minus, Plus, ShoppingCart, Trash2, X } from 'lucide-react'
@@ -6,6 +5,7 @@ import { twMerge } from 'tailwind-merge'
 import { useCart, useRemoveCartLine, useUpdateCartLine } from '~/hooks/useCart'
 import { formatMoney, shopifyImageUrl } from '~/utils/shopify-format'
 import type { CartLineDetail } from '~/utils/shopify-queries'
+import { ShopLabel, ShopMono } from './ui'
 
 type CartDrawerProps = {
   open: boolean
@@ -14,10 +14,8 @@ type CartDrawerProps = {
 
 /**
  * Slide-in cart drawer. Shares state with /shop/cart through the same
- * useCart React Query key, so adds in the drawer mirror the full page
- * and vice-versa. Pinned to the right on desktop; full-width slide-up on
- * mobile would be nice later, but a right-anchored sheet is the standard
- * Shopify-theme pattern and works on phones too.
+ * useCart React Query key. The root element wears `shop-scope` because the
+ * drawer is portaled outside the ShopLayout tree.
  */
 export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
   const { cart, totalQuantity } = useCart()
@@ -26,26 +24,28 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/20" />
+        <Dialog.Overlay className="cart-overlay fixed inset-0 z-[100] bg-black/40" />
         <Dialog.Content
           className={twMerge(
-            'cart-panel',
+            'shop-scope cart-panel',
             'fixed right-4 top-[calc(var(--navbar-height,56px)+0.5rem)] z-[100]',
             'w-[calc(100vw-2rem)] sm:w-[24rem]',
             'max-h-[calc(100dvh-var(--navbar-height,56px)-1rem)]',
-            'flex flex-col',
-            'rounded-xl shadow-2xl',
-            'bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800',
+            'flex flex-col rounded-xl',
+            'bg-shop-bg-2 border border-shop-line text-shop-text',
+            'shadow-[0_25px_50px_-12px_rgba(0,0,0,0.4)]',
           )}
           aria-describedby={undefined}
         >
-          <header className="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800">
-            <Dialog.Title className="font-semibold text-sm">
-              Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
+          <header className="flex items-center justify-between px-5 py-3 border-b border-shop-line">
+            <Dialog.Title asChild>
+              <ShopLabel as="h2">
+                Cart{totalQuantity > 0 ? ` (${totalQuantity})` : ''}
+              </ShopLabel>
             </Dialog.Title>
             <Dialog.Close
-              className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
               aria-label="Close cart"
+              className="p-1 rounded-md text-shop-text-2 hover:text-shop-text"
             >
               <X className="w-3.5 h-3.5" />
             </Dialog.Close>
@@ -53,7 +53,7 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
 
           {hasLines ? (
             <>
-              <ul className="overflow-y-auto px-5 divide-y divide-gray-200 dark:divide-gray-800">
+              <ul className="overflow-y-auto px-5 flex-1 min-h-0">
                 {cart.lines.nodes.map((line) => (
                   <DrawerCartLine
                     key={line.id}
@@ -75,15 +75,22 @@ export function CartDrawer({ open, onOpenChange }: CartDrawerProps) {
 
 function DrawerEmpty({ onClose }: { onClose: () => void }) {
   return (
-    <div className="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
-      <ShoppingCart className="w-10 h-10 text-gray-400" />
-      <p className="text-gray-600 dark:text-gray-400">Your cart is empty.</p>
+    <div className="flex-1 flex flex-col items-center justify-center gap-4 p-8 text-center text-shop-text-2">
+      <ShoppingCart className="w-10 h-10 text-shop-muted" />
+      <p>Your cart is empty.</p>
       <Link
         to="/shop"
         onClick={onClose}
-        className="inline-flex items-center px-4 py-2 rounded-lg bg-black text-white dark:bg-white dark:text-black font-semibold"
+        className="
+          inline-flex items-center gap-2 px-4 py-2.5 rounded-md
+          bg-shop-accent text-shop-accent-ink font-semibold text-[13px]
+          transition-[filter] hover:brightness-110 group
+        "
       >
         Shop all products
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
       </Link>
     </div>
   )
@@ -98,26 +105,33 @@ function DrawerFooter({
 }) {
   const subtotal = cart.cost.subtotalAmount
   return (
-    <footer className="border-t border-gray-200 dark:border-gray-800 px-6 py-4 flex flex-col gap-3">
+    <footer className="px-5 py-4 flex flex-col gap-3 border-t border-shop-line">
       <div className="flex justify-between text-sm">
-        <span className="text-gray-600 dark:text-gray-400">Subtotal</span>
-        <span className="font-semibold">
+        <span className="text-shop-text-2">Subtotal</span>
+        <ShopMono className="font-medium text-shop-text">
           {formatMoney(subtotal.amount, subtotal.currencyCode)}
-        </span>
+        </ShopMono>
       </div>
-      <p className="text-xs text-gray-500 dark:text-gray-500">
+      <p className="font-shop-mono text-xs text-shop-muted tracking-[0.06em]">
         Shipping and taxes calculated at checkout.
       </p>
       <a
         href={cart.checkoutUrl}
-        className="w-full text-center px-6 py-3 rounded-lg bg-black text-white dark:bg-white dark:text-black font-semibold"
+        className="
+          w-full h-10 rounded-md bg-shop-accent text-shop-accent-ink
+          font-semibold text-[13px] flex items-center justify-center gap-2
+          transition-[filter] hover:brightness-110 group
+        "
       >
         Checkout
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
       </a>
       <Link
         to="/shop/cart"
         onClick={onClose}
-        className="w-full text-center text-sm text-gray-600 dark:text-gray-400 hover:underline"
+        className="text-center text-sm text-shop-text-2 hover:underline"
       >
         View cart
       </Link>
@@ -143,42 +157,40 @@ function DrawerCartLine({
   const isBusy = update.isPending || remove.isPending
 
   return (
-    <li className="flex gap-3 py-4">
+    <li className="flex gap-3 py-4 border-b border-shop-line">
       <Link
         to="/shop/products/$handle"
         params={{ handle: merchandise.product.handle }}
         onClick={onClose}
-        className="shrink-0"
+        className="shrink-0 w-16 h-16 rounded-md border border-shop-line bg-shop-panel overflow-hidden"
       >
-        <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900">
-          {merchandise.image ? (
-            <img
-              src={shopifyImageUrl(merchandise.image.url, {
-                width: 160,
-                format: 'webp',
-              })}
-              alt={merchandise.image.altText ?? merchandise.product.title}
-              className="h-full w-full object-cover"
-            />
-          ) : null}
-        </div>
+        {merchandise.image ? (
+          <img
+            src={shopifyImageUrl(merchandise.image.url, {
+              width: 160,
+              format: 'webp',
+            })}
+            alt={merchandise.image.altText ?? merchandise.product.title}
+            className="w-full h-full object-cover"
+          />
+        ) : null}
       </Link>
       <div className="flex-1 min-w-0 flex flex-col gap-1">
         <Link
           to="/shop/products/$handle"
           params={{ handle: merchandise.product.handle }}
           onClick={onClose}
-          className="text-sm font-semibold hover:underline truncate"
+          className="text-sm font-semibold text-shop-text hover:underline truncate"
         >
           {merchandise.product.title}
         </Link>
         {options ? (
-          <p className="text-xs text-gray-600 dark:text-gray-400 truncate">
+          <ShopMono className="block text-xs text-shop-muted truncate">
             {options}
-          </p>
+          </ShopMono>
         ) : null}
         <div className="flex items-center justify-between mt-1">
-          <div className="inline-flex items-center rounded-md border border-gray-200 dark:border-gray-800 text-xs">
+          <div className="inline-flex items-center border border-shop-line rounded-md text-xs">
             <button
               type="button"
               onClick={() => {
@@ -193,11 +205,13 @@ function DrawerCartLine({
               }}
               disabled={isBusy}
               aria-label="Decrease quantity"
-              className="p-1.5 disabled:opacity-50"
+              className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
             >
               <Minus className="w-3 h-3" />
             </button>
-            <span className="min-w-[1.5rem] text-center">{line.quantity}</span>
+            <span className="font-shop-mono text-shop-text min-w-[1.5rem] text-center">
+              {line.quantity}
+            </span>
             <button
               type="button"
               onClick={() =>
@@ -208,24 +222,24 @@ function DrawerCartLine({
               }
               disabled={isBusy}
               aria-label="Increase quantity"
-              className="p-1.5 disabled:opacity-50"
+              className="p-1.5 text-shop-text-2 hover:text-shop-text disabled:opacity-50"
             >
               <Plus className="w-3 h-3" />
             </button>
           </div>
           <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold">
+            <ShopMono className="text-sm font-medium text-shop-text">
               {formatMoney(
                 line.cost.totalAmount.amount,
                 line.cost.totalAmount.currencyCode,
               )}
-            </span>
+            </ShopMono>
             <button
               type="button"
               onClick={() => remove.mutate({ lineId: line.id })}
               disabled={isBusy}
               aria-label="Remove from cart"
-              className="p-1 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 disabled:opacity-50"
+              className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
             >
               <Trash2 className="w-3.5 h-3.5" />
             </button>
diff --git a/src/components/shop/ProductCard.tsx b/src/components/shop/ProductCard.tsx
index b12b60014..d4f5231d5 100644
--- a/src/components/shop/ProductCard.tsx
+++ b/src/components/shop/ProductCard.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@tanstack/react-router'
-import { twMerge } from 'tailwind-merge'
 import { ProductImage } from './ProductImage'
+import { ShopBadge, ShopMono } from './ui'
 import { formatMoney } from '~/utils/shopify-format'
 import type { ProductListItem } from '~/utils/shopify-queries'
 
@@ -11,8 +11,9 @@ type ProductCardProps = {
 }
 
 /**
- * Grid tile for a product. Handles compare-at-price strike-through and
- * the "from $X" treatment when a product has variants at different prices.
+ * 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,
@@ -25,39 +26,113 @@ export function ProductCard({
   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 tag = product.productType || product.tags?.[0] || ''
+
   return (
     <Link
       to="/shop/products/$handle"
       params={{ handle: product.handle }}
-      className="group flex flex-col gap-3"
+      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
+      "
     >
-      <div className="aspect-square overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-900">
+      <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 */}
         <ProductImage
           image={product.featuredImage}
           alt={product.title}
           width={600}
           sizes={sizes}
           loading={loading}
-          className="transition-transform duration-300 group-hover:scale-105"
+          className="relative z-[1]"
         />
-      </div>
-      <div className="flex flex-col gap-1">
-        <h3 className="font-semibold line-clamp-2">{product.title}</h3>
-        <p className="text-sm text-gray-600 dark:text-gray-400 flex items-baseline gap-2">
-          <span>
-            {isRange ? 'From ' : ''}
-            {formatMoney(minVariantPrice.amount, minVariantPrice.currencyCode)}
+
+        {/* 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>
+            ) : 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
+            "
+          >
+            {tag}
           </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 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={twMerge(
-                'text-xs line-through text-gray-400 dark:text-gray-500',
-              )}
-            >
+            <span className="ml-1.5 text-[11px] text-shop-muted line-through">
               {formatMoney(compareAt.amount, compareAt.currencyCode)}
             </span>
           ) : null}
-        </p>
+        </ShopMono>
       </div>
     </Link>
   )
diff --git a/src/components/shop/ShopDropCard.tsx b/src/components/shop/ShopDropCard.tsx
new file mode 100644
index 000000000..ffeec2d08
--- /dev/null
+++ b/src/components/shop/ShopDropCard.tsx
@@ -0,0 +1,65 @@
+import { Link } from '@tanstack/react-router'
+import { ShopLabel, ShopMono, ShopPanel, ShopPulse } from './ui'
+
+export type DropCardRow = { label: string; value: string }
+
+type Props = {
+  /** Top-row label, e.g. "Shop now — free US shipping over $75". */
+  status: string
+  /** Display headline inside the card. */
+  headline: string
+  /** Rows of key/value copy (dashed dividers between). */
+  rows?: Array<DropCardRow>
+  /** Primary CTA. */
+  cta: { label: string; href: string }
+  /** Optional sub-line below the CTA (e.g. countdown or fine print). */
+  ctaSub?: React.ReactNode
+}
+
+/**
+ * Live-drop / promo card in the shop hero. Pulses green, leads with a
+ * display-type headline, prices out a few stats, and drops a CTA at the foot.
+ */
+export function ShopDropCard({ status, headline, rows, cta, ctaSub }: Props) {
+  return (
+    <ShopPanel className="w-full md:min-w-[280px] md:max-w-[320px] p-4 pb-3.5 flex flex-col self-start">
+      <ShopLabel className="mb-2.5 flex items-center gap-2 text-shop-muted">
+        <ShopPulse />
+        {status}
+      </ShopLabel>
+      <div className="font-shop-display font-bold text-[19px] tracking-[-0.015em] text-shop-text">
+        {headline}
+      </div>
+      {rows?.map((row) => (
+        <div
+          key={row.label}
+          className="flex justify-between text-[12px] text-shop-text-2 border-t border-dashed border-shop-line-2 pt-1.5 mt-2"
+        >
+          <span>{row.label}</span>
+          <ShopMono className="text-shop-text text-[11px] font-medium">
+            {row.value}
+          </ShopMono>
+        </div>
+      ))}
+      <Link
+        to={cta.href}
+        className="
+          mt-3 flex items-center justify-center gap-2
+          px-3 py-2.5 rounded-md bg-shop-accent text-shop-accent-ink
+          text-[12.5px] font-semibold tracking-[0.01em]
+          transition-[filter] hover:brightness-110 group
+        "
+      >
+        {cta.label}
+        <span className="transition-transform group-hover:translate-x-[3px]">
+          →
+        </span>
+      </Link>
+      {ctaSub ? (
+        <ShopMono className="mt-2 text-center text-[11px] text-shop-muted tracking-[0.04em]">
+          {ctaSub}
+        </ShopMono>
+      ) : null}
+    </ShopPanel>
+  )
+}
diff --git a/src/components/shop/ShopHero.tsx b/src/components/shop/ShopHero.tsx
new file mode 100644
index 000000000..fbaa85641
--- /dev/null
+++ b/src/components/shop/ShopHero.tsx
@@ -0,0 +1,34 @@
+/**
+ * Editorial hero title + lede. The `<em>` spans in `title` render in the
+ * accent color with a soft underline; use them for emphasis (they match the
+ * Merch Store design prototype).
+ */
+export function ShopHero({
+  title,
+  lede,
+}: {
+  title: React.ReactNode
+  lede?: React.ReactNode
+}) {
+  return (
+    <div className="flex-1 min-w-0">
+      <h1
+        className="
+          font-shop-display font-bold text-shop-text
+          text-[clamp(36px,5vw,52px)] 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]
+          [&_em]:after:bg-shop-accent [&_em]:after:opacity-[0.35] [&_em]:after:rounded-sm
+        "
+      >
+        {title}
+      </h1>
+      {lede ? (
+        <p className="text-shop-text-2 text-[15px] mt-3.5 max-w-[58ch] leading-[1.55]">
+          {lede}
+        </p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopLayout.tsx b/src/components/shop/ShopLayout.tsx
index 12a0d369b..dcb3e47a3 100644
--- a/src/components/shop/ShopLayout.tsx
+++ b/src/components/shop/ShopLayout.tsx
@@ -19,6 +19,7 @@ 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 }>
 
@@ -28,7 +29,6 @@ type ShopLayoutProps = {
   children: React.ReactNode
 }
 
-/** Map known collection handles to meaningful icons. Defaults to Sparkles. */
 const COLLECTION_ICON_MAP: Record<string, IconComponent> = {
   apparel: Shirt,
   accessories: Tag,
@@ -37,8 +37,9 @@ const COLLECTION_ICON_MAP: Record<string, IconComponent> = {
 
 /**
  * /shop layout: persistent left sidebar on md+, slide-in drawer on mobile.
- * Collapse state persists to localStorage. When collapsed, hovering the
- * rail expands it as an overlay without shifting the main content.
+ * 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,
@@ -55,13 +56,13 @@ export function ShopLayout({
   const showExpanded = !isCollapsed || isHoverExpanded
 
   return (
-    <div className="relative min-h-[calc(100vh-var(--navbar-height,0px))]">
-      {/* Mobile menu toggle (absolute, shown only on mobile) */}
+    <div className="shop-scope relative min-h-[calc(100vh-var(--navbar-height,0px))]">
+      {/* Mobile menu toggle */}
       <button
         type="button"
         onClick={() => setIsMobileOpen(true)}
-        className="md:hidden fixed left-4 top-[calc(var(--navbar-height,56px)+0.75rem)] z-30 p-2 rounded-lg bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 shadow-sm"
         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>
@@ -76,38 +77,26 @@ export function ShopLayout({
         />
       ) : null}
 
-      {/*
-       * Shop sidebar — anchored to the viewport's left rail (fixed), full
-       * height below the navbar. The main site nav is also a fixed flyout
-       * at z-50, so it will overlay this sidebar when the user hovers the
-       * logo / expands it — that's the expected UX.
-       */}
       <aside
         onMouseEnter={() => isCollapsed && setIsHoverExpanded(true)}
         onMouseLeave={() => isCollapsed && setIsHoverExpanded(false)}
         className={twMerge(
-          // Fixed to the viewport's left rail
           'fixed left-0 top-0 md:top-[var(--navbar-height,0px)] bottom-0 z-40 md:z-20',
-          'bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-800',
-          'transition-[width,transform] duration-200 ease-out',
-          'flex flex-col',
-          // Width: reserved rail vs. hover-expanded overlay
+          'bg-shop-bg border-r border-shop-line',
+          'transition-[width,transform] duration-200 ease-out flex flex-col',
           showExpanded ? 'w-60' : 'w-14',
-          // Mobile translate
           isMobileOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
-          // Shadow when floating as hover-expand overlay
           isCollapsed && isHoverExpanded
             ? 'md:shadow-xl md:border-r-transparent'
             : '',
         )}
       >
-        {/* Mobile close */}
         <div className="md:hidden flex justify-end p-2">
           <button
             type="button"
             onClick={() => setIsMobileOpen(false)}
             aria-label="Close shop menu"
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
+            className="p-2 rounded-md hover:bg-shop-panel text-shop-text-2"
           >
             <X className="w-4 h-4" />
           </button>
@@ -120,8 +109,7 @@ export function ShopLayout({
           onNavigate={() => setIsMobileOpen(false)}
         />
 
-        {/* Desktop collapse toggle pinned to bottom */}
-        <div className="hidden md:flex mt-auto border-t border-gray-200 dark:border-gray-800 p-2">
+        <div className="hidden md:flex mt-auto border-t border-shop-line p-2">
           <button
             type="button"
             onClick={() => {
@@ -131,10 +119,7 @@ export function ShopLayout({
             aria-label={
               isCollapsed ? 'Expand shop sidebar' : 'Collapse shop sidebar'
             }
-            className={twMerge(
-              'w-full flex items-center gap-2 px-2 py-2 rounded-lg text-xs',
-              'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900',
-            )}
+            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" />
@@ -148,11 +133,6 @@ export function ShopLayout({
         </div>
       </aside>
 
-      {/*
-       * Main content — padded left by the sidebar's collapsed/expanded width
-       * so it never sits beneath the fixed rail. On mobile the sidebar is a
-       * slide-in drawer, so no padding is reserved there.
-       */}
       <main
         className={twMerge(
           'min-w-0 transition-[padding-left] duration-200',
@@ -185,7 +165,7 @@ function ShopSidebarNav({
   onNavigate: () => void
 }) {
   return (
-    <nav className="flex-1 overflow-y-auto px-2 py-4 flex flex-col gap-6">
+    <nav className="flex-1 overflow-y-auto px-2 py-4 flex flex-col gap-4">
       <SidebarSection label="Shop" showLabels={showLabels}>
         <SidebarLink
           to="/shop"
@@ -257,14 +237,14 @@ function SidebarSection({
 }) {
   return (
     <div className="flex flex-col gap-1">
-      <div
+      <ShopLabel
         className={twMerge(
-          'text-[0.65rem] font-bold uppercase tracking-wider text-gray-500 px-2 h-5 flex items-center',
+          'px-2.5 h-5 flex items-center transition-opacity',
           showLabels ? 'opacity-100' : 'opacity-0',
         )}
       >
         {label}
-      </div>
+      </ShopLabel>
       {children}
     </div>
   )
@@ -288,7 +268,6 @@ function SidebarLink({
   exact?: boolean
 }) {
   const { pathname } = useLocation()
-  // Resolve a simple active check without depending on to-typing details
   const resolvedHref = params
     ? to.replace(/\$(\w+)/g, (_, k: string) => params[k] ?? '')
     : to
@@ -306,17 +285,20 @@ function SidebarLink({
       onClick={onNavigate}
       title={showLabels ? undefined : label}
       className={twMerge(
-        'flex items-center gap-3 px-2 py-2 rounded-lg text-sm transition-colors',
-        'hover:bg-gray-100 dark:hover:bg-gray-900',
-        isActive
-          ? 'bg-gray-100 dark:bg-gray-900 font-semibold'
-          : 'text-gray-700 dark:text-gray-300',
+        '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="w-4 h-4 shrink-0" />
+      <Icon
+        className={twMerge(
+          'w-3.5 h-3.5 shrink-0',
+          isActive ? 'text-shop-text' : 'text-shop-muted',
+        )}
+      />
       <span
         className={twMerge(
-          'whitespace-nowrap transition-opacity duration-150',
+          'transition-opacity duration-150',
           showLabels ? 'opacity-100' : 'opacity-0 pointer-events-none',
         )}
       >
diff --git a/src/components/shop/ShopNote.tsx b/src/components/shop/ShopNote.tsx
new file mode 100644
index 000000000..c85c54c1b
--- /dev/null
+++ b/src/components/shop/ShopNote.tsx
@@ -0,0 +1,23 @@
+/**
+ * Accent-tinted callout used for drop notes / disclaimers.
+ * Pass a short `pill` label to highlight (mono, uppercase) and children for
+ * the body copy.
+ */
+export function ShopNote({
+  pill,
+  children,
+}: {
+  pill?: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="mt-4 p-3 rounded-lg flex gap-2.5 items-start text-[12px] text-shop-text-2 leading-[1.55] bg-shop-accent/10 border border-shop-accent/20">
+      {pill ? (
+        <span className="font-shop-mono text-[9.5px] tracking-[0.1em] uppercase bg-shop-accent text-shop-accent-ink px-1.5 py-0.5 rounded font-semibold shrink-0 mt-0.5">
+          {pill}
+        </span>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopSpecs.tsx b/src/components/shop/ShopSpecs.tsx
new file mode 100644
index 000000000..50006f8bf
--- /dev/null
+++ b/src/components/shop/ShopSpecs.tsx
@@ -0,0 +1,23 @@
+export type Spec = { label: string; value: React.ReactNode }
+
+/** Two-column specs grid — mono label, plain value. */
+export function ShopSpecs({ specs }: { specs: Array<Spec> }) {
+  return (
+    <div className="grid grid-cols-2 border-t border-shop-line mt-5.5">
+      {specs.map((spec, i) => (
+        <div
+          key={spec.label}
+          className={
+            'flex justify-between gap-2.5 py-2.5 border-b border-shop-line text-[12.5px] ' +
+            (i % 2 === 0 ? 'pr-3 border-r border-shop-line' : 'pl-3')
+          }
+        >
+          <b className="font-shop-mono font-normal text-shop-muted text-[10.5px] tracking-[0.08em] uppercase">
+            {spec.label}
+          </b>
+          <span className="text-shop-text text-right">{spec.value}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/shop/ShopStrip.tsx b/src/components/shop/ShopStrip.tsx
new file mode 100644
index 000000000..bb83ddb3a
--- /dev/null
+++ b/src/components/shop/ShopStrip.tsx
@@ -0,0 +1,18 @@
+import { ShopPanel } from './ui'
+
+/** Bottom-of-page info strip (shipping, returns, etc.). */
+export function ShopStrip({ items }: { items: Array<string> }) {
+  return (
+    <ShopPanel className="mt-12 px-4.5 py-4 flex flex-wrap gap-4 justify-between font-shop-mono text-[11px] tracking-[0.1em] uppercase text-shop-text-2">
+      {items.map((item) => (
+        <span key={item} className="inline-flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block w-1.5 h-1.5 rounded-full bg-shop-accent"
+          />
+          {item}
+        </span>
+      ))}
+    </ShopPanel>
+  )
+}
diff --git a/src/components/shop/ui/Badge.tsx b/src/components/shop/ui/Badge.tsx
new file mode 100644
index 000000000..c9c1ea5d5
--- /dev/null
+++ b/src/components/shop/ui/Badge.tsx
@@ -0,0 +1,33 @@
+import { twMerge } from 'tailwind-merge'
+
+type Variant = 'new' | 'sale' | 'neutral'
+
+const variants: Record<Variant, string> = {
+  new: 'bg-shop-accent text-shop-accent-ink border-transparent font-semibold',
+  sale: 'text-shop-orange border-shop-orange bg-transparent',
+  neutral: 'bg-shop-bg-2 text-shop-text border-shop-line-2',
+}
+
+/** Mono, uppercase pill used on product cards for New/Sale/Low-stock. */
+export function ShopBadge({
+  variant = 'neutral',
+  children,
+  className,
+}: {
+  variant?: Variant
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <span
+      className={twMerge(
+        'inline-flex items-center font-shop-mono text-[9.5px] tracking-[0.1em] uppercase',
+        'px-1.5 py-[3px] rounded border',
+        variants[variant],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}
diff --git a/src/components/shop/ui/Button.tsx b/src/components/shop/ui/Button.tsx
new file mode 100644
index 000000000..76ef594e1
--- /dev/null
+++ b/src/components/shop/ui/Button.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Variant = 'primary' | 'outline' | 'ghost'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: Variant
+  fullWidth?: boolean
+}
+
+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'
+
+const variants: Record<Variant, string> = {
+  primary:
+    'bg-shop-accent text-shop-accent-ink px-4 py-2.5 text-[13px] 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',
+  ghost:
+    'text-shop-text-2 hover:enabled:text-shop-text hover:enabled:bg-shop-panel px-2 py-1.5 text-[12.5px]',
+}
+
+/** Shop button. Three visual weights — primary, outline, ghost. */
+export const ShopButton = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopButton(
+    { variant = 'outline', fullWidth, className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          base,
+          variants[variant],
+          fullWidth && 'w-full',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Chip.tsx b/src/components/shop/ui/Chip.tsx
new file mode 100644
index 000000000..30a04a13e
--- /dev/null
+++ b/src/components/shop/ui/Chip.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  isSelected?: boolean
+  isUnavailable?: boolean
+}
+
+/**
+ * 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 },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={isSelected}
+        disabled={disabled ?? isUnavailable}
+        {...rest}
+        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',
+          isSelected &&
+            'border-shop-accent bg-shop-accent/10 hover:enabled:border-shop-accent',
+          isUnavailable &&
+            !isSelected &&
+            'line-through text-shop-muted opacity-60 cursor-not-allowed',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Crumb.tsx b/src/components/shop/ui/Crumb.tsx
new file mode 100644
index 000000000..9b74be9be
--- /dev/null
+++ b/src/components/shop/ui/Crumb.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+
+export type Crumb = { label: string; href?: string }
+
+/**
+ * Mono, uppercase breadcrumb trail. Intermediate crumbs link; the current
+ * page renders as emphasized plain text.
+ */
+export function ShopCrumbs({ crumbs }: { crumbs: Array<Crumb> }) {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="font-shop-mono text-[11px] tracking-[0.12em] uppercase text-shop-muted flex items-center gap-2 flex-wrap"
+    >
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1
+        return (
+          <React.Fragment key={`${crumb.label}-${i}`}>
+            {crumb.href && !isLast ? (
+              <Link
+                to={crumb.href}
+                className="text-shop-muted hover:text-shop-text transition-colors"
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <span
+                aria-current={isLast ? 'page' : undefined}
+                className={isLast ? 'text-shop-text font-medium' : undefined}
+              >
+                {crumb.label}
+              </span>
+            )}
+            {isLast ? null : (
+              <span aria-hidden="true" className="opacity-40">
+                /
+              </span>
+            )}
+          </React.Fragment>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/src/components/shop/ui/Input.tsx b/src/components/shop/ui/Input.tsx
new file mode 100644
index 000000000..32db691be
--- /dev/null
+++ b/src/components/shop/ui/Input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>
+
+/** Shop-styled input. */
+export const ShopInput = React.forwardRef<HTMLInputElement, Props>(
+  function ShopInput({ className, ...rest }, ref) {
+    return (
+      <input
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          'px-2.5 py-2 border border-shop-line rounded-md',
+          'bg-shop-panel text-shop-text text-[13px]',
+          'placeholder:text-shop-muted',
+          'focus:outline-none focus:border-shop-accent',
+          'w-full',
+          className,
+        )}
+      />
+    )
+  },
+)
diff --git a/src/components/shop/ui/Mono.tsx b/src/components/shop/ui/Mono.tsx
new file mode 100644
index 000000000..a089cd097
--- /dev/null
+++ b/src/components/shop/ui/Mono.tsx
@@ -0,0 +1,40 @@
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Mono uppercase label used for section headings and metadata rows.
+ * Consistent typography across the shop: JetBrains Mono, 10.5px,
+ * 0.14em tracking, uppercase.
+ */
+export function ShopLabel({
+  children,
+  className,
+  as: Tag = 'div',
+}: {
+  children: React.ReactNode
+  className?: string
+  as?: 'div' | 'h2' | 'h3' | 'h4' | 'legend' | 'span'
+}) {
+  return (
+    <Tag
+      className={twMerge(
+        'font-shop-mono text-[10.5px] tracking-[0.14em] uppercase text-shop-muted font-medium',
+        className,
+      )}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+/** Mono text span for inline prices, counts, etc. — JetBrains Mono, inherited size. */
+export function ShopMono({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <span className={twMerge('font-shop-mono', className)}>{children}</span>
+  )
+}
diff --git a/src/components/shop/ui/Panel.tsx b/src/components/shop/ui/Panel.tsx
new file mode 100644
index 000000000..534cd6908
--- /dev/null
+++ b/src/components/shop/ui/Panel.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * A bordered surface card — live drop card, cart summary, product info box,
+ * etc. Use padding + flex utilities on the consumer to arrange contents.
+ */
+export const ShopPanel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function ShopPanel({ className, children, ...rest }, ref) {
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={twMerge(
+        'border border-shop-line rounded-xl bg-shop-panel',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+})
diff --git a/src/components/shop/ui/Pulse.tsx b/src/components/shop/ui/Pulse.tsx
new file mode 100644
index 000000000..90051c847
--- /dev/null
+++ b/src/components/shop/ui/Pulse.tsx
@@ -0,0 +1,15 @@
+import { twMerge } from 'tailwind-merge'
+
+/** Animated green dot — signals "live" / "in stock". Keyframes in shop.css. */
+export function ShopPulse({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={twMerge(
+        'inline-block w-[7px] h-[7px] rounded-full bg-shop-green shrink-0',
+        '[animation:shop-pulse_1.8s_infinite]',
+        className,
+      )}
+    />
+  )
+}
diff --git a/src/components/shop/ui/Qty.tsx b/src/components/shop/ui/Qty.tsx
new file mode 100644
index 000000000..8a75ca918
--- /dev/null
+++ b/src/components/shop/ui/Qty.tsx
@@ -0,0 +1,69 @@
+import { Minus, Plus } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = {
+  quantity: number
+  onChange: (next: number) => void
+  min?: number
+  max?: number
+  disabled?: boolean
+  size?: 'sm' | 'md'
+  className?: string
+}
+
+/**
+ * Quantity stepper — shared between the PDP add-to-cart row, the cart page,
+ * and the cart drawer. Mono digit in the center, chrome-free buttons on each
+ * side.
+ */
+export function ShopQty({
+  quantity,
+  onChange,
+  min = 0,
+  max = 99,
+  disabled,
+  size = 'md',
+  className,
+}: Props) {
+  const cell =
+    size === 'sm'
+      ? 'h-7 w-7 [&_svg]:w-3 [&_svg]:h-3'
+      : 'h-10 w-8 [&_svg]:w-3.5 [&_svg]:h-3.5'
+  return (
+    <div
+      className={twMerge(
+        'inline-flex items-center border border-shop-line rounded-md bg-shop-panel',
+        'px-1.5',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => onChange(quantity - 1)}
+        disabled={disabled || quantity <= min}
+        aria-label="Decrease quantity"
+        className={twMerge(
+          'grid place-items-center text-shop-text-2 disabled:opacity-50 disabled:cursor-not-allowed',
+          cell,
+        )}
+      >
+        <Minus />
+      </button>
+      <span className="font-shop-mono text-[13px] text-shop-text min-w-[1.5rem] text-center select-none">
+        {quantity}
+      </span>
+      <button
+        type="button"
+        onClick={() => onChange(quantity + 1)}
+        disabled={disabled || quantity >= max}
+        aria-label="Increase quantity"
+        className={twMerge(
+          'grid place-items-center text-shop-text-2 disabled:opacity-50 disabled:cursor-not-allowed',
+          cell,
+        )}
+      >
+        <Plus />
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/shop/ui/Select.tsx b/src/components/shop/ui/Select.tsx
new file mode 100644
index 000000000..45e9b786f
--- /dev/null
+++ b/src/components/shop/ui/Select.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.SelectHTMLAttributes<HTMLSelectElement>
+
+/** Styled native <select> with a carved-in chevron. */
+export const ShopSelect = React.forwardRef<HTMLSelectElement, Props>(
+  function ShopSelect({ className, children, ...rest }, ref) {
+    return (
+      <select
+        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]',
+          // 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',
+          className,
+        )}
+      >
+        {children}
+      </select>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Size.tsx b/src/components/shop/ui/Size.tsx
new file mode 100644
index 000000000..443d827c9
--- /dev/null
+++ b/src/components/shop/ui/Size.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  isSelected?: boolean
+  isUnavailable?: boolean
+}
+
+/** Size cell used in the variant selector grid. Mono, short, tappable. */
+export const ShopSize = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopSize(
+    { isSelected, isUnavailable, children, className, disabled, ...rest },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={isSelected}
+        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',
+          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',
+          className,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/src/components/shop/ui/Tab.tsx b/src/components/shop/ui/Tab.tsx
new file mode 100644
index 000000000..8a0305d28
--- /dev/null
+++ b/src/components/shop/ui/Tab.tsx
@@ -0,0 +1,40 @@
+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. */
+export const ShopTab = React.forwardRef<HTMLButtonElement, Props>(
+  function ShopTab({ isActive, count, children, className, ...rest }, ref) {
+    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,
+        )}
+      >
+        {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/components/shop/ui/index.ts b/src/components/shop/ui/index.ts
new file mode 100644
index 000000000..9fb7ec9fd
--- /dev/null
+++ b/src/components/shop/ui/index.ts
@@ -0,0 +1,12 @@
+export { ShopButton } from './Button'
+export { ShopBadge } from './Badge'
+export { ShopLabel, ShopMono } from './Mono'
+export { ShopPulse } from './Pulse'
+export { ShopSelect } from './Select'
+export { ShopInput } from './Input'
+export { ShopTab } from './Tab'
+export { ShopChip } from './Chip'
+export { ShopSize } from './Size'
+export { ShopQty } from './Qty'
+export { ShopPanel } from './Panel'
+export { ShopCrumbs, type Crumb } from './Crumb'
diff --git a/src/routes/shop.cart.tsx b/src/routes/shop.cart.tsx
index 7f0cc5d66..807b691f9 100644
--- a/src/routes/shop.cart.tsx
+++ b/src/routes/shop.cart.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { Minus, Plus, ShoppingCart, Trash2, X } from 'lucide-react'
-import { twMerge } from 'tailwind-merge'
-import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
+import { ShoppingCart, Trash2, X } from 'lucide-react'
+import {
+  ShopButton,
+  ShopCrumbs,
+  ShopInput,
+  ShopLabel,
+  ShopMono,
+  ShopPanel,
+  ShopQty,
+} from '~/components/shop/ui'
 import {
   useApplyDiscountCode,
   useCart,
@@ -19,9 +26,6 @@ export const Route = createFileRoute('/shop/cart')({
 
 function CartPage() {
   const { cart } = useCart()
-
-  // The parent /shop loader prefetches the cart into the React Query cache,
-  // so this always renders with real data on the first frame.
   if (!cart || cart.lines.nodes.length === 0) return <EmptyCart />
 
   const { checkoutUrl, cost, lines, totalQuantity } = cart
@@ -29,55 +33,73 @@ function CartPage() {
   const total = cost.totalAmount
 
   return (
-    <div className="flex flex-col max-w-4xl mx-auto gap-8 p-4 md:p-8">
-      <Breadcrumbs
+    <div className="p-6 md:p-11 pb-24 max-w-[1100px] mx-auto flex flex-col gap-6">
+      <ShopCrumbs
         crumbs={[{ label: 'Shop', href: '/shop' }, { label: 'Cart' }]}
       />
       <header>
-        <h1 className="text-3xl font-black">Cart</h1>
-        <p className="text-sm mt-2 text-gray-600 dark:text-gray-400">
+        <h1 className="font-shop-display font-bold text-[36px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          Cart
+        </h1>
+        <ShopLabel className="mt-2">
           {totalQuantity} {totalQuantity === 1 ? 'item' : 'items'}
-        </p>
+        </ShopLabel>
       </header>
 
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_20rem] gap-8">
-        <ul className="flex flex-col divide-y divide-gray-200 dark:divide-gray-800">
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-8">
+        <ul className="flex flex-col">
           {lines.nodes.map((line) => (
             <CartLineRow key={line.id} line={line} />
           ))}
         </ul>
 
-        <aside className="flex flex-col gap-4 rounded-xl border border-gray-200 dark:border-gray-800 p-6 h-fit">
-          <h2 className="font-semibold">Summary</h2>
+        <ShopPanel className="p-5 h-fit flex flex-col gap-3.5">
+          <ShopLabel>Summary</ShopLabel>
 
           <DiscountCodeSection cart={cart} />
 
           <dl className="flex flex-col gap-2 text-sm">
-            <div className="flex justify-between">
-              <dt className="text-gray-600 dark:text-gray-400">Subtotal</dt>
-              <dd>{formatMoney(subtotal.amount, subtotal.currencyCode)}</dd>
+            <div className="flex justify-between text-shop-text-2">
+              <dt>Subtotal</dt>
+              <dd>
+                <ShopMono>
+                  {formatMoney(subtotal.amount, subtotal.currencyCode)}
+                </ShopMono>
+              </dd>
             </div>
-            <div className="flex justify-between border-t border-gray-200 dark:border-gray-800 pt-2 font-semibold">
+            <div className="flex justify-between font-semibold pt-2 border-t border-shop-line text-shop-text">
               <dt>Total</dt>
-              <dd>{formatMoney(total.amount, total.currencyCode)}</dd>
+              <dd>
+                <ShopMono>
+                  {formatMoney(total.amount, total.currencyCode)}
+                </ShopMono>
+              </dd>
             </div>
-            <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+            <p className="font-shop-mono text-[11px] text-shop-muted tracking-[0.06em] mt-1">
               Shipping and taxes calculated at checkout.
             </p>
           </dl>
+
           <a
             href={checkoutUrl}
-            className="w-full text-center px-6 py-3 rounded-lg bg-black text-white dark:bg-white dark:text-black font-semibold"
+            className="
+              w-full h-11 rounded-md bg-shop-accent text-shop-accent-ink
+              font-semibold text-[13px] flex items-center justify-center gap-2
+              transition-[filter] hover:brightness-110 group
+            "
           >
             Checkout
+            <span className="transition-transform group-hover:translate-x-[3px]">
+              →
+            </span>
           </a>
           <Link
             to="/shop"
-            className="w-full text-center text-sm text-gray-600 dark:text-gray-400 hover:underline"
+            className="text-center text-sm text-shop-text-2 hover:underline"
           >
             Continue shopping
           </Link>
-        </aside>
+        </ShopPanel>
       </div>
     </div>
   )
@@ -90,7 +112,6 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
 
   const applied = cart.discountCodes.filter((c) => c.applicable)
 
-  // Clear the input after a successful apply so the user can see it landed
   React.useEffect(() => {
     if (apply.isSuccess) {
       setInput('')
@@ -99,7 +120,7 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
   }, [apply.isSuccess, apply])
 
   return (
-    <div className="flex flex-col gap-2 border-t border-gray-200 dark:border-gray-800 pt-3">
+    <div className="flex flex-col gap-2 pt-3 border-t border-shop-line">
       {applied.length > 0 ? (
         <ul className="flex flex-col gap-1">
           {applied.map((d) => (
@@ -108,17 +129,17 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
               className="flex items-center justify-between text-sm"
             >
               <span className="inline-flex items-center gap-1.5">
-                <span className="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-900 font-mono text-xs">
+                <ShopMono className="px-2 py-0.5 rounded bg-shop-panel-2 text-shop-text text-xs">
                   {d.code}
-                </span>
-                <span className="text-xs text-gray-500">applied</span>
+                </ShopMono>
+                <span className="text-xs text-shop-muted">applied</span>
               </span>
               <button
                 type="button"
                 onClick={() => remove.mutate()}
                 disabled={remove.isPending}
                 aria-label={`Remove discount ${d.code}`}
-                className="p-1 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 disabled:opacity-50"
+                className="p-1 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
@@ -134,24 +155,23 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
           }}
           className="flex items-center gap-2"
         >
-          <input
+          <ShopInput
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             placeholder="Discount code"
-            className="flex-1 px-3 py-1.5 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
+            className="flex-1"
           />
-          <button
+          <ShopButton
             type="submit"
             disabled={apply.isPending || input.trim().length === 0}
-            className="px-3 py-1.5 rounded-md bg-black text-white dark:bg-white dark:text-black text-sm font-semibold disabled:opacity-50"
           >
             {apply.isPending ? 'Applying…' : 'Apply'}
-          </button>
+          </ShopButton>
         </form>
       )}
       {apply.isError ? (
-        <p className="text-xs text-red-600 dark:text-red-400">
+        <p className="text-xs text-shop-orange">
           {apply.error instanceof Error
             ? apply.error.message
             : 'Could not apply discount.'}
@@ -163,20 +183,28 @@ function DiscountCodeSection({ cart }: { cart: CartDetail }) {
 
 function EmptyCart() {
   return (
-    <div className="flex flex-col max-w-4xl mx-auto gap-8 p-4 md:p-8">
+    <div className="p-6 md:p-11 pb-24 max-w-[1100px] mx-auto flex flex-col gap-8">
       <header>
-        <h1 className="text-3xl font-black">Cart</h1>
+        <h1 className="font-shop-display font-bold text-[36px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          Cart
+        </h1>
       </header>
-      <div className="flex flex-col items-center gap-4 py-24 text-center">
-        <ShoppingCart className="w-10 h-10 text-gray-400" />
-        <p className="text-lg text-gray-600 dark:text-gray-400">
-          Your cart is empty.
-        </p>
+      <div className="flex flex-col items-center gap-4 py-16 text-center text-shop-text-2">
+        <ShoppingCart className="w-10 h-10 text-shop-muted" />
+        <p>Your cart is empty.</p>
         <Link
           to="/shop"
-          className="inline-flex items-center px-4 py-2 rounded-lg bg-black text-white dark:bg-white dark:text-black font-semibold"
+          className="
+            inline-flex items-center gap-2 px-4 py-2.5 rounded-md
+            bg-shop-accent text-shop-accent-ink
+            font-semibold text-[13px]
+            transition-[filter] hover:brightness-110 group
+          "
         >
           Shop all products
+          <span className="transition-transform group-hover:translate-x-[3px]">
+            →
+          </span>
         </Link>
       </div>
     </div>
@@ -195,24 +223,22 @@ function CartLineRow({ line }: { line: CartLineDetail }) {
   const isBusy = update.isPending || remove.isPending
 
   return (
-    <li className="flex gap-4 py-6">
+    <li className="flex gap-4 py-5 border-b border-shop-line items-start">
       <Link
         to="/shop/products/$handle"
         params={{ handle: merchandise.product.handle }}
-        className="shrink-0"
+        className="shrink-0 w-24 h-24 rounded-lg border border-shop-line bg-shop-panel overflow-hidden"
       >
-        <div className="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900">
-          {merchandise.image ? (
-            <img
-              src={shopifyImageUrl(merchandise.image.url, {
-                width: 200,
-                format: 'webp',
-              })}
-              alt={merchandise.image.altText ?? merchandise.product.title}
-              className="h-full w-full object-cover"
-            />
-          ) : null}
-        </div>
+        {merchandise.image ? (
+          <img
+            src={shopifyImageUrl(merchandise.image.url, {
+              width: 200,
+              format: 'webp',
+            })}
+            alt={merchandise.image.altText ?? merchandise.product.title}
+            className="w-full h-full object-cover"
+          />
+        ) : null}
       </Link>
 
       <div className="flex-1 min-w-0 flex flex-col gap-2">
@@ -221,33 +247,30 @@ function CartLineRow({ line }: { line: CartLineDetail }) {
             <Link
               to="/shop/products/$handle"
               params={{ handle: merchandise.product.handle }}
-              className="font-semibold hover:underline"
+              className="font-semibold text-shop-text hover:underline"
             >
               {merchandise.product.title}
             </Link>
             {options ? (
-              <p className="text-sm text-gray-600 dark:text-gray-400">
+              <ShopMono className="block text-xs text-shop-muted mt-1">
                 {options}
-              </p>
+              </ShopMono>
             ) : null}
           </div>
-          <div className="text-sm font-semibold shrink-0">
+          <ShopMono className="shrink-0 font-medium text-shop-text">
             {formatMoney(
               line.cost.totalAmount.amount,
               line.cost.totalAmount.currencyCode,
             )}
-          </div>
+          </ShopMono>
         </div>
 
         <div className="flex items-center justify-between mt-1">
-          <QuantityStepper
+          <ShopQty
             quantity={line.quantity}
             onChange={(next) => {
-              if (next <= 0) {
-                remove.mutate({ lineId: line.id })
-              } else {
-                update.mutate({ lineId: line.id, quantity: next })
-              }
+              if (next <= 0) remove.mutate({ lineId: line.id })
+              else update.mutate({ lineId: line.id, quantity: next })
             }}
             disabled={isBusy}
           />
@@ -256,10 +279,7 @@ function CartLineRow({ line }: { line: CartLineDetail }) {
             onClick={() => remove.mutate({ lineId: line.id })}
             disabled={isBusy}
             aria-label="Remove from cart"
-            className={twMerge(
-              'p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900',
-              'disabled:opacity-50 disabled:cursor-not-allowed',
-            )}
+            className="p-2 rounded-md text-shop-muted hover:text-shop-text disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Trash2 className="w-4 h-4" />
           </button>
@@ -268,37 +288,3 @@ function CartLineRow({ line }: { line: CartLineDetail }) {
     </li>
   )
 }
-
-function QuantityStepper({
-  quantity,
-  onChange,
-  disabled,
-}: {
-  quantity: number
-  onChange: (next: number) => void
-  disabled?: boolean
-}) {
-  return (
-    <div className="inline-flex items-center rounded-lg border border-gray-200 dark:border-gray-800">
-      <button
-        type="button"
-        onClick={() => onChange(quantity - 1)}
-        disabled={disabled}
-        aria-label="Decrease quantity"
-        className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        <Minus className="w-3.5 h-3.5" />
-      </button>
-      <span className="w-8 text-center text-sm font-medium">{quantity}</span>
-      <button
-        type="button"
-        onClick={() => onChange(quantity + 1)}
-        disabled={disabled}
-        aria-label="Increase quantity"
-        className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        <Plus className="w-3.5 h-3.5" />
-      </button>
-    </div>
-  )
-}
diff --git a/src/routes/shop.collections.$handle.tsx b/src/routes/shop.collections.$handle.tsx
index ad6719d51..0d58b25fe 100644
--- a/src/routes/shop.collections.$handle.tsx
+++ b/src/routes/shop.collections.$handle.tsx
@@ -2,8 +2,9 @@ import * as React from 'react'
 import { createFileRoute, notFound, useNavigate } from '@tanstack/react-router'
 import { useMutation } from '@tanstack/react-query'
 import * as v from 'valibot'
-import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
 import { ProductCard } from '~/components/shop/ProductCard'
+import { ShopHero } from '~/components/shop/ShopHero'
+import { ShopButton, ShopCrumbs, ShopSelect } from '~/components/shop/ui'
 import { getCollection } from '~/utils/shop.functions'
 import {
   COLLECTION_SORT_OPTIONS,
@@ -109,29 +110,18 @@ function CollectionPage() {
   const products = [...collection.products.nodes, ...accumulated]
 
   return (
-    <div className="flex flex-col max-w-6xl mx-auto gap-8 p-4 md:p-8">
-      <Breadcrumbs
+    <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto">
+      <ShopCrumbs
         crumbs={[{ label: 'Shop', href: '/shop' }, { label: collection.title }]}
       />
 
-      <header className="flex flex-wrap items-end justify-between gap-4">
-        <div>
-          <h1 className="text-3xl font-black">{collection.title}</h1>
-          {collection.description ? (
-            <p className="text-sm mt-2 text-gray-600 dark:text-gray-400 max-w-2xl">
-              {collection.description}
-            </p>
-          ) : null}
-        </div>
-        <label className="flex items-center gap-2 text-sm">
-          <span className="text-gray-600 dark:text-gray-400">Sort by</span>
-          <select
+      <div className="flex flex-wrap justify-between items-end gap-4 pb-5.5 border-b border-shop-line mt-6 mb-7">
+        <ShopHero title={collection.title} lede={collection.description} />
+        <label className="flex items-center gap-2 text-[12px] text-shop-muted">
+          <span>Sort</span>
+          <ShopSelect
             value={sortId}
             onChange={(e) => {
-              // Cast is safe: the select only emits ids built from
-              // COLLECTION_SORT_OPTIONS, all of which are valid per the
-              // valibot search schema. The generated CollectionSortOptionId
-              // type is a wider permutation set than the schema accepts.
               const nextId = e.target.value as ValidCollectionSortId
               navigate({
                 to: '/shop/collections/$handle',
@@ -139,7 +129,6 @@ function CollectionPage() {
                 search: nextId === 'COLLECTION_DEFAULT' ? {} : { sort: nextId },
               })
             }}
-            className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
           >
             {COLLECTION_SORT_OPTIONS.map((opt) => (
               <option
@@ -149,17 +138,17 @@ function CollectionPage() {
                 {opt.label}
               </option>
             ))}
-          </select>
+          </ShopSelect>
         </label>
-      </header>
+      </div>
 
       {products.length === 0 ? (
-        <div className="text-center py-24 text-gray-500">
+        <div className="text-center py-24 text-shop-muted">
           No products in this collection yet.
         </div>
       ) : (
         <>
-          <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          <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">
             {products.map((product, i) => (
               <ProductCard
                 key={product.id}
@@ -169,15 +158,13 @@ function CollectionPage() {
             ))}
           </section>
           {hasNextPage ? (
-            <div className="flex justify-center py-6">
-              <button
-                type="button"
+            <div className="flex justify-center py-8">
+              <ShopButton
                 onClick={() => loadMore.mutate()}
                 disabled={loadMore.isPending}
-                className="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {loadMore.isPending ? 'Loading…' : 'Load more'}
-              </button>
+              </ShopButton>
             </div>
           ) : null}
         </>
diff --git a/src/routes/shop.index.tsx b/src/routes/shop.index.tsx
index f51e71f6a..165888f69 100644
--- a/src/routes/shop.index.tsx
+++ b/src/routes/shop.index.tsx
@@ -3,13 +3,10 @@ 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 { useTheme } from '~/components/ThemeProvider'
-
-// const LazyShopHero = React.lazy(() =>
-//   import('~/components/shop/ShopHero3D').then((m) => ({
-//     default: m.ShopHero3D,
-//   })),
-// )
+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 {
   SORT_OPTIONS,
@@ -28,6 +25,7 @@ const searchSchema = v.object({
       'TITLE',
     ]),
   ),
+  type: v.optional(v.string()),
 })
 
 type ValidSortId = NonNullable<v.InferOutput<typeof searchSchema>['sort']>
@@ -54,9 +52,9 @@ export const Route = createFileRoute('/shop/')({
 function ShopIndex() {
   const { page, sortId } = Route.useLoaderData()
   const navigate = useNavigate({ from: '/shop' })
+  const search = Route.useSearch()
+  const activeType = search.type?.toLowerCase() ?? 'all'
 
-  // Client-side accumulated pages for the "Load More" path. The first page
-  // always comes from the loader (SSR), subsequent pages append on click.
   const [accumulated, setAccumulated] = React.useState<Array<ProductListItem>>(
     [],
   )
@@ -67,8 +65,6 @@ function ShopIndex() {
     page.pageInfo.hasNextPage,
   )
 
-  // Reset accumulated pages whenever the loader-provided first page changes
-  // (e.g. on sort change). The loader's page becomes the new canonical start.
   React.useEffect(() => {
     setAccumulated([])
     setEndCursor(page.pageInfo.endCursor)
@@ -96,86 +92,145 @@ function ShopIndex() {
     },
   })
 
-  const products = [...page.nodes, ...accumulated]
+  const allProducts = React.useMemo(
+    () => [...page.nodes, ...accumulated],
+    [page.nodes, accumulated],
+  )
 
-  return (
-    <div className="flex flex-col">
-      {/* <div className="w-full aspect-[3/1] max-h-[250px]">
-        <React.Suspense fallback={null}>
-          <ShopHeroWithTheme />
-        </React.Suspense>
-      </div> */}
+  // Client-side filter by productType. Counts update as additional pages load.
+  const typeOptions = React.useMemo(() => {
+    const counts = new Map<string, { display: string; count: number }>()
+    for (const p of allProducts) {
+      const t = p.productType?.trim()
+      if (!t) continue
+      const key = t.toLowerCase()
+      const existing = counts.get(key)
+      if (existing) existing.count += 1
+      else counts.set(key, { display: t, count: 1 })
+    }
+    return Array.from(counts.entries())
+      .map(([key, { display, count }]) => ({ key, display, count }))
+      .sort((a, b) => b.count - a.count)
+  }, [allProducts])
 
-      <div className="flex flex-col max-w-6xl mx-auto w-full gap-8 p-4 md:p-8">
-        <header className="flex flex-wrap items-end justify-between gap-4">
-          <div>
-            <h1 className="text-3xl font-black">All Products</h1>
-            <p className="text-sm mt-2 text-gray-600 dark:text-gray-400">
-              {products.length}
-              {hasNextPage ? '+' : ''}{' '}
-              {products.length === 1 ? 'product' : 'products'}
-            </p>
-          </div>
-          <label className="flex items-center gap-2 text-sm">
-            <span className="text-gray-600 dark:text-gray-400">Sort by</span>
-            <select
-              value={sortId}
-              onChange={(e) => {
-                // Cast is safe: the select only emits ids from SORT_OPTIONS
-                // which align with the valibot search schema.
-                const nextId = e.target.value as ValidSortId
-                // Default sort omits the search param entirely for a clean URL
-                navigate({
-                  to: '/shop',
-                  search: nextId === 'BEST_SELLING' ? {} : { sort: nextId },
-                })
-              }}
-              className="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
-            >
-              {SORT_OPTIONS.map((opt) => (
-                <option key={sortOptionId(opt)} value={sortOptionId(opt)}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </label>
-        </header>
+  const products =
+    activeType === 'all'
+      ? allProducts
+      : allProducts.filter((p) => p.productType?.toLowerCase() === activeType)
 
-        {products.length === 0 ? (
-          <div className="text-center py-24 text-gray-500">
-            No products yet. Check back soon!
-          </div>
-        ) : (
-          <>
-            <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-              {products.map((product, i) => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  loading={i < 8 ? 'eager' : 'lazy'}
-                />
-              ))}
-            </section>
-            {hasNextPage ? (
-              <div className="flex justify-center py-6">
-                <button
-                  type="button"
-                  onClick={() => loadMore.mutate()}
-                  disabled={loadMore.isPending}
-                  className="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  {loadMore.isPending ? 'Loading…' : 'Load more'}
-                </button>
-              </div>
-            ) : null}
-          </>
-        )}
+  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">
+        <ShopHero
+          title={
+            <>
+              Built in <em>public</em>,<br />
+              worn in <em>production</em>.
+            </>
+          }
+          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">
+        <ShopTab
+          isActive={activeType === 'all'}
+          count={allProducts.length}
+          onClick={() =>
+            navigate({
+              to: '/shop',
+              search: (prev) => ({ ...prev, type: undefined }),
+            })
+          }
+        >
+          All
+        </ShopTab>
+        {typeOptions.map((opt) => (
+          <ShopTab
+            key={opt.key}
+            isActive={activeType === opt.key}
+            count={opt.count}
+            onClick={() =>
+              navigate({
+                to: '/shop',
+                search: (prev) => ({ ...prev, type: opt.key }),
+              })
+            }
+          >
+            {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>
+      </div>
+
+      {products.length === 0 ? (
+        <div className="text-center py-24 text-shop-muted">
+          No products yet. Check back soon!
+        </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">
+            {products.map((product, i) => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                loading={i < 8 ? 'eager' : 'lazy'}
+              />
+            ))}
+          </section>
+          {hasNextPage ? (
+            <div className="flex justify-center py-8">
+              <ShopButton
+                onClick={() => loadMore.mutate()}
+                disabled={loadMore.isPending}
+              >
+                {loadMore.isPending ? 'Loading…' : 'Load more'}
+              </ShopButton>
+            </div>
+          ) : null}
+        </>
+      )}
+
+      <ShopStrip
+        items={[
+          'Worldwide shipping',
+          '30-day returns',
+          'Carbon-neutral packing',
+          'Official TanStack',
+          'Proceeds fund open-source',
+        ]}
+      />
     </div>
   )
 }
-
-// function ShopHeroWithTheme() {
-//   const { resolvedTheme } = useTheme()
-//   return <LazyShopHero isDark={resolvedTheme === 'dark'} />
-// }
diff --git a/src/routes/shop.pages.$handle.tsx b/src/routes/shop.pages.$handle.tsx
index f2636e617..0ebc7dae9 100644
--- a/src/routes/shop.pages.$handle.tsx
+++ b/src/routes/shop.pages.$handle.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, notFound } from '@tanstack/react-router'
-import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
+import { ShopCrumbs } from '~/components/shop/ui'
 import { getPage } from '~/utils/shop.functions'
 import { seo } from '~/utils/seo'
 
@@ -25,23 +25,30 @@ export const Route = createFileRoute('/shop/pages/$handle')({
 function ShopPage() {
   const { page } = Route.useLoaderData()
   return (
-    <article className="flex flex-col max-w-3xl mx-auto gap-8 p-4 md:p-8">
-      <Breadcrumbs
+    <article className="p-6 md:p-11 pb-24 max-w-3xl mx-auto flex flex-col gap-6">
+      <ShopCrumbs
         crumbs={[{ label: 'Shop', href: '/shop' }, { label: page.title }]}
       />
       <header>
-        <h1 className="text-3xl font-black">{page.title}</h1>
+        <h1 className="font-shop-display font-bold text-[42px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          {page.title}
+        </h1>
       </header>
       {page.body ? (
         <div
-          className="prose dark:prose-invert max-w-none"
+          className="
+            text-shop-text-2 text-[14px] leading-[1.6]
+            [&_a]:text-shop-accent [&_a]:underline
+            [&_strong]:text-shop-text [&_strong]:font-semibold
+            [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:mt-6 [&_h1]:mb-2
+            [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:mt-6 [&_h2]:mb-2
+            [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:mt-5 [&_h3]:mb-2
+          "
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: page.body }}
         />
       ) : (
-        <p className="text-gray-600 dark:text-gray-400">
-          This page has no content yet.
-        </p>
+        <p className="text-shop-text-2">This page has no content yet.</p>
       )}
     </article>
   )
diff --git a/src/routes/shop.policies.$handle.tsx b/src/routes/shop.policies.$handle.tsx
index c17368216..fd426d75f 100644
--- a/src/routes/shop.policies.$handle.tsx
+++ b/src/routes/shop.policies.$handle.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, notFound } from '@tanstack/react-router'
-import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
+import { ShopCrumbs } from '~/components/shop/ui'
 import { getShopPolicy } from '~/utils/shop.functions'
 import { seo } from '~/utils/seo'
 
@@ -24,23 +24,30 @@ export const Route = createFileRoute('/shop/policies/$handle')({
 function PolicyPage() {
   const { policy } = Route.useLoaderData()
   return (
-    <article className="flex flex-col max-w-3xl mx-auto gap-8 p-4 md:p-8">
-      <Breadcrumbs
+    <article className="p-6 md:p-11 pb-24 max-w-3xl mx-auto flex flex-col gap-6">
+      <ShopCrumbs
         crumbs={[{ label: 'Shop', href: '/shop' }, { label: policy.title }]}
       />
       <header>
-        <h1 className="text-3xl font-black">{policy.title}</h1>
+        <h1 className="font-shop-display font-bold text-[42px] leading-[1.05] tracking-[-0.02em] text-shop-text">
+          {policy.title}
+        </h1>
       </header>
       {policy.body ? (
         <div
-          className="prose dark:prose-invert max-w-none"
+          className="
+            text-shop-text-2 text-[14px] leading-[1.6]
+            [&_a]:text-shop-accent [&_a]:underline
+            [&_strong]:text-shop-text [&_strong]:font-semibold
+            [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:mt-6 [&_h1]:mb-2
+            [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:mt-6 [&_h2]:mb-2
+            [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:mt-5 [&_h3]:mb-2
+          "
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: policy.body }}
         />
       ) : (
-        <p className="text-gray-600 dark:text-gray-400">
-          This policy has no content yet.
-        </p>
+        <p className="text-shop-text-2">This policy has no content yet.</p>
       )}
     </article>
   )
diff --git a/src/routes/shop.products.$handle.tsx b/src/routes/shop.products.$handle.tsx
index f0099baf3..f86fcc1bf 100644
--- a/src/routes/shop.products.$handle.tsx
+++ b/src/routes/shop.products.$handle.tsx
@@ -1,10 +1,20 @@
 import * as React from 'react'
-import { createFileRoute, notFound } from '@tanstack/react-router'
-import { Minus, Plus } from 'lucide-react'
+import { Link, createFileRoute, notFound } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
-import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
 import { ProductImage } from '~/components/shop/ProductImage'
 import { useCartDrawerStore } from '~/components/shop/cartDrawerStore'
+import { ShopNote } from '~/components/shop/ShopNote'
+import { ShopSpecs } from '~/components/shop/ShopSpecs'
+import {
+  ShopChip,
+  ShopCrumbs,
+  ShopLabel,
+  ShopMono,
+  ShopPanel,
+  ShopPulse,
+  ShopQty,
+  ShopSize,
+} from '~/components/shop/ui'
 import { useAddToCart } from '~/hooks/useCart'
 import { getProduct } from '~/utils/shop.functions'
 import {
@@ -52,8 +62,6 @@ function ProductPage() {
   const [quantity, setQuantity] = React.useState(1)
 
   const selectedVariant = findMatchingVariant(variants, selected)
-
-  // Use the variant's image if it has one, else the first product image
   const variantImage = selectedVariant?.image ?? null
   const initialImageIndex = React.useMemo(() => {
     if (!variantImage) return 0
@@ -65,7 +73,6 @@ function ProductPage() {
   const [activeImageIndex, setActiveImageIndex] =
     React.useState(initialImageIndex)
 
-  // Keep gallery in sync when the selected variant swaps its image
   React.useEffect(() => {
     setActiveImageIndex(initialImageIndex)
   }, [initialImageIndex])
@@ -74,14 +81,15 @@ function ProductPage() {
     product.images.nodes[activeImageIndex] ?? variantImage ?? null
 
   const displayPrice = selectedVariant?.price ?? null
+  const inStock = !!selectedVariant?.availableForSale
 
   return (
-    <div className="max-w-6xl mx-auto p-4 md:p-8 flex flex-col gap-6">
-      <Breadcrumbs
+    <div className="p-6 md:p-11 pb-24 max-w-[1200px] mx-auto">
+      <ShopCrumbs
         crumbs={[{ label: 'Shop', href: '/shop' }, { label: product.title }]}
       />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_minmax(320px,440px)] gap-8 md:gap-10 mt-6">
         <ProductGallery
           images={product.images.nodes}
           activeIndex={activeImageIndex}
@@ -90,15 +98,34 @@ function ProductPage() {
           hero={heroImage}
         />
 
-        <div className="flex flex-col gap-6">
-          <header className="flex flex-col gap-2">
-            <h1 className="text-3xl font-black">{product.title}</h1>
+        <div className="flex flex-col">
+          <ShopLabel>TanStack shop</ShopLabel>
+          <h1 className="font-shop-display font-bold text-[32px] leading-[1.05] tracking-[-0.02em] text-shop-text mt-1.5">
+            {product.title}
+          </h1>
+
+          <ShopPanel className="mt-3 p-3 flex flex-wrap items-center gap-2.5">
             {displayPrice ? (
-              <p className="text-2xl font-semibold text-gray-700 dark:text-gray-300">
+              <ShopMono className="text-[20px] font-medium text-shop-text">
                 {formatMoney(displayPrice.amount, displayPrice.currencyCode)}
-              </p>
+              </ShopMono>
             ) : null}
-          </header>
+            <ShopMono
+              className={twMerge(
+                'ml-auto flex items-center gap-1.5 text-[12px]',
+                inStock ? 'text-shop-green' : 'text-shop-orange',
+              )}
+            >
+              {inStock ? (
+                <>
+                  <ShopPulse />
+                  In stock
+                </>
+              ) : (
+                'Sold out'
+              )}
+            </ShopMono>
+          </ShopPanel>
 
           <VariantSelector
             options={product.options}
@@ -107,24 +134,43 @@ function ProductPage() {
             onChange={setSelected}
           />
 
-          <QuantityStepper
+          <QuantityAdd
             quantity={quantity}
             onChange={(n) => setQuantity(Math.max(1, n))}
-          />
-
-          <AddToCartButton
             variant={selectedVariant}
-            quantity={quantity}
             product={product}
           />
 
           {product.descriptionHtml ? (
-            <div
-              className="prose dark:prose-invert max-w-none mt-4"
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
-            />
+            <ProductDescription html={product.descriptionHtml} />
           ) : null}
+
+          <ShopSpecs
+            specs={[
+              { label: 'Ships', value: 'Worldwide, 7–10 days' },
+              { label: 'From', value: 'TanStack' },
+              { label: 'Condition', value: 'New' },
+              {
+                label: 'Variants',
+                value: `${product.variants.nodes.length} in stock set`,
+              },
+            ]}
+          />
+
+          <ShopNote pill="TanStack">
+            Official TanStack merch. Proceeds help fund maintainer time and keep
+            all libraries free and open source.
+          </ShopNote>
+
+          <div className="mt-4.5 flex items-center justify-between">
+            <ShopLabel>Keep browsing</ShopLabel>
+            <Link
+              to="/shop"
+              className="text-shop-accent text-[11.5px] hover:underline"
+            >
+              All products →
+            </Link>
+          </div>
         </div>
       </div>
 
@@ -150,24 +196,24 @@ function ProductGallery({
 }) {
   if (!hero) {
     return (
-      <div className="aspect-square rounded-2xl bg-gray-100 dark:bg-gray-900" />
+      <div className="aspect-square rounded-xl border border-shop-line bg-shop-panel" />
     )
   }
   const hasMultiple = images.length > 1
   return (
-    <div className="flex flex-col gap-3">
-      <div className="aspect-square overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-900">
+    <div>
+      <div className="aspect-square rounded-xl border border-shop-line bg-shop-panel overflow-hidden">
         <ProductImage
           image={hero}
           alt={title}
           width={1200}
-          sizes="(min-width: 768px) 50vw, 100vw"
+          sizes="(min-width: 768px) 60vw, 100vw"
           loading="eager"
         />
       </div>
       {hasMultiple ? (
-        <div className="grid grid-cols-5 gap-2">
-          {images.map((img, i) => (
+        <div className="grid grid-cols-5 gap-1.5 mt-2.5">
+          {images.slice(0, 5).map((img, i) => (
             <button
               key={`${img.url}-${i}`}
               type="button"
@@ -175,10 +221,10 @@ function ProductGallery({
               aria-label={`View image ${i + 1} of ${images.length}`}
               aria-current={i === activeIndex}
               className={twMerge(
-                'aspect-square overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-900 transition-all',
+                'aspect-square rounded-md border bg-shop-panel overflow-hidden cursor-pointer transition-all',
                 i === activeIndex
-                  ? 'ring-2 ring-black dark:ring-white'
-                  : 'opacity-70 hover:opacity-100',
+                  ? 'border-shop-accent shadow-[0_0_0_1px_var(--shop-accent)]'
+                  : 'border-shop-line hover:border-shop-line-2',
               )}
             >
               <ProductImage
@@ -209,47 +255,53 @@ function VariantSelector({
   return (
     <>
       {options.map((option) => {
-        // Skip auto-generated single-value options like "Title: Default Title"
         if (option.values.length <= 1) return null
+        const isSizeOption = /size/i.test(option.name)
         return (
-          <fieldset key={option.id} className="flex flex-col gap-2">
-            <legend className="text-sm font-medium">
-              <span>{option.name}</span>
-              <span className="ml-2 text-gray-500 dark:text-gray-400">
-                {selected[option.name]}
-              </span>
+          <fieldset key={option.id} className="mt-4.5">
+            <legend className="flex items-center justify-between w-full mb-2.5">
+              <ShopLabel as="span">
+                {option.name}
+                <span className="ml-2 font-sans normal-case tracking-normal text-[11.5px] text-shop-text">
+                  {selected[option.name]}
+                </span>
+              </ShopLabel>
             </legend>
-            <div className="flex flex-wrap gap-2">
+            <div
+              className={
+                isSizeOption
+                  ? 'grid grid-cols-[repeat(auto-fill,minmax(54px,1fr))] gap-1.5'
+                  : 'flex flex-wrap gap-2'
+              }
+            >
               {option.values.map((value) => {
                 const isSelected = selected[option.name] === value
-                // Would this value + current selections resolve to an
-                // available variant? Drives disabled styling without
-                // preventing clicks (Shopify themes tend to allow clicks
-                // so users can see the sold-out state).
                 const candidate = { ...selected, [option.name]: value }
                 const match = findMatchingVariant(variants, candidate)
-                const isAvailable = !!match?.availableForSale
-
+                const isUnavailable = !match?.availableForSale
+                const handleClick = () =>
+                  onChange({ ...selected, [option.name]: value })
+                if (isSizeOption) {
+                  return (
+                    <ShopSize
+                      key={value}
+                      onClick={handleClick}
+                      isSelected={isSelected}
+                      isUnavailable={isUnavailable}
+                    >
+                      {value}
+                    </ShopSize>
+                  )
+                }
                 return (
-                  <button
+                  <ShopChip
                     key={value}
-                    type="button"
-                    onClick={() =>
-                      onChange({ ...selected, [option.name]: value })
-                    }
-                    aria-pressed={isSelected}
-                    className={twMerge(
-                      'px-4 py-2 rounded-lg border text-sm transition-colors relative',
-                      isSelected
-                        ? 'border-black bg-black text-white dark:border-white dark:bg-white dark:text-black'
-                        : 'border-gray-300 dark:border-gray-700 hover:border-gray-500',
-                      !isAvailable && !isSelected
-                        ? 'opacity-50 line-through decoration-gray-400'
-                        : '',
-                    )}
+                    onClick={handleClick}
+                    isSelected={isSelected}
+                    isUnavailable={isUnavailable}
                   >
                     {value}
-                  </button>
+                  </ShopChip>
                 )
               })}
             </div>
@@ -260,56 +312,15 @@ function VariantSelector({
   )
 }
 
-function QuantityStepper({
+function QuantityAdd({
   quantity,
   onChange,
-}: {
-  quantity: number
-  onChange: (next: number) => void
-}) {
-  return (
-    <div className="flex flex-col gap-2">
-      <span className="text-sm font-medium">Quantity</span>
-      <div className="inline-flex items-center rounded-lg border border-gray-300 dark:border-gray-700 w-fit">
-        <button
-          type="button"
-          onClick={() => onChange(quantity - 1)}
-          disabled={quantity <= 1}
-          aria-label="Decrease quantity"
-          className="p-2 disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <Minus className="w-4 h-4" />
-        </button>
-        <span className="w-10 text-center text-sm font-medium">{quantity}</span>
-        <button
-          type="button"
-          onClick={() => onChange(quantity + 1)}
-          aria-label="Increase quantity"
-          className="p-2"
-        >
-          <Plus className="w-4 h-4" />
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function findMatchingVariant(
-  variants: Array<ProductDetailVariant>,
-  selected: Record<string, string>,
-): ProductDetailVariant | undefined {
-  return variants.find((v) =>
-    v.selectedOptions.every((opt) => selected[opt.name] === opt.value),
-  )
-}
-
-function AddToCartButton({
   variant,
-  quantity,
   product,
 }: {
-  variant: ProductDetailVariant | undefined
   quantity: number
+  onChange: (next: number) => void
+  variant: ProductDetailVariant | undefined
   product: ProductDetail
 }) {
   const addToCart = useAddToCart()
@@ -318,16 +329,21 @@ function AddToCartButton({
 
   const disabled =
     !variant || !variant.availableForSale || (addToCart.isPending && !showAdded)
+  const price = variant?.price
 
   const label = showAdded
-    ? 'Added ✓'
+    ? '✓ Added'
     : !variant
       ? 'Unavailable'
       : !variant.availableForSale
         ? 'Sold out'
-        : 'Add to cart'
+        : price
+          ? `Add to cart — ${formatMoney(
+              (Number(price.amount) * quantity).toFixed(2),
+              price.currencyCode,
+            )}`
+          : 'Add to cart'
 
-  // Reset the "Added ✓" confirmation after a moment
   React.useEffect(() => {
     if (!showAdded) return
     const id = window.setTimeout(() => setShowAdded(false), 1500)
@@ -335,7 +351,12 @@ function AddToCartButton({
   }, [showAdded])
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="grid grid-cols-[100px_1fr] gap-2 mt-4.5">
+      <ShopQty
+        quantity={quantity}
+        onChange={(n) => onChange(Math.max(1, n))}
+        min={1}
+      />
       <button
         type="button"
         disabled={disabled}
@@ -356,29 +377,53 @@ function AddToCartButton({
             },
           })
         }}
-        className={twMerge(
-          'mt-2 px-6 py-3 rounded-lg font-semibold transition-colors',
-          'bg-black text-white dark:bg-white dark:text-black',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-        )}
+        className="
+          h-10 flex items-center justify-center gap-2 rounded-md
+          bg-shop-accent text-shop-accent-ink
+          font-semibold text-[13px] tracking-[0.01em]
+          transition-[filter] hover:enabled:brightness-110
+          disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-shop-panel-2 disabled:text-shop-muted
+          group
+        "
       >
         {label}
+        {!showAdded && variant?.availableForSale ? (
+          <span className="transition-transform group-hover:translate-x-[3px]">
+            →
+          </span>
+        ) : null}
       </button>
-      {addToCart.isError ? (
-        <p className="text-sm text-red-600 dark:text-red-400">
-          {addToCart.error instanceof Error
-            ? addToCart.error.message
-            : 'Could not add to cart. Please try again.'}
-        </p>
-      ) : null}
     </div>
   )
 }
 
-/**
- * schema.org Product JSON-LD for rich search results. Shopify's Storefront
- * API already returns availability and pricing; we just reshape it.
- */
+function ProductDescription({ html }: { html: string }) {
+  return (
+    <div
+      className="
+        mt-4 text-shop-text-2 text-[13.5px] leading-[1.6]
+        [&_p]:my-0 [&_p]:mb-[0.9em] [&_a]:text-shop-accent [&_a]:underline
+        [&_strong]:text-shop-text [&_strong]:font-semibold
+        [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-1
+        [&_h1]:text-shop-text [&_h1]:font-shop-display [&_h1]:tracking-[-0.01em] [&_h1]:mt-5 [&_h1]:mb-1.5
+        [&_h2]:text-shop-text [&_h2]:font-shop-display [&_h2]:tracking-[-0.01em] [&_h2]:mt-5 [&_h2]:mb-1.5
+        [&_h3]:text-shop-text [&_h3]:font-shop-display [&_h3]:tracking-[-0.01em] [&_h3]:mt-5 [&_h3]:mb-1.5
+      "
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
+function findMatchingVariant(
+  variants: Array<ProductDetailVariant>,
+  selected: Record<string, string>,
+): ProductDetailVariant | undefined {
+  return variants.find((v) =>
+    v.selectedOptions.every((opt) => selected[opt.name] === opt.value),
+  )
+}
+
 function ProductJsonLd({
   product,
   selectedVariant,
@@ -386,7 +431,6 @@ function ProductJsonLd({
   product: ProductDetail
   selectedVariant: ProductDetailVariant | undefined
 }) {
-  const firstImage = product.images.nodes[0]
   const offers = product.variants.nodes.map((v) => ({
     '@type': 'Offer',
     sku: v.id,
@@ -424,9 +468,6 @@ function ProductJsonLd({
           },
   }
 
-  // void-used just to keep TS happy about firstImage
-  void firstImage
-
   return (
     <script
       type="application/ld+json"
diff --git a/src/routes/shop.search.tsx b/src/routes/shop.search.tsx
index abfed7b62..831b23f6b 100644
--- a/src/routes/shop.search.tsx
+++ b/src/routes/shop.search.tsx
@@ -4,6 +4,8 @@ import { useMutation } from '@tanstack/react-query'
 import * as v from 'valibot'
 import { Search as SearchIcon } from 'lucide-react'
 import { ProductCard } from '~/components/shop/ProductCard'
+import { ShopHero } from '~/components/shop/ShopHero'
+import { ShopButton, ShopInput, ShopLabel } from '~/components/shop/ui'
 import { searchProducts } from '~/utils/shop.functions'
 import type { ProductListItem } from '~/utils/shopify-queries'
 
@@ -35,7 +37,6 @@ function SearchPage() {
   const navigate = useNavigate({ from: '/shop/search' })
   const [inputValue, setInputValue] = React.useState(query)
 
-  // Sync input when navigating with a new ?q
   React.useEffect(() => {
     setInputValue(query)
   }, [query])
@@ -74,10 +75,8 @@ function SearchPage() {
   const products = [...(page?.products ?? []), ...accumulated]
 
   return (
-    <div className="flex flex-col max-w-6xl mx-auto gap-8 p-4 md:p-8">
-      <header>
-        <h1 className="text-3xl font-black">Search</h1>
-      </header>
+    <div className="p-6 md:p-11 pb-24 max-w-[1280px] mx-auto flex flex-col gap-8">
+      <ShopHero title="Search" />
 
       <form
         onSubmit={(e) => {
@@ -91,41 +90,39 @@ function SearchPage() {
         className="flex items-center gap-2 max-w-xl"
       >
         <div className="relative flex-1">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-          <input
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-shop-muted" />
+          <ShopInput
             type="search"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             placeholder="Search products…"
-            className="w-full pl-9 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 text-sm"
+            className="pl-9"
           />
         </div>
-        <button
-          type="submit"
-          className="px-4 py-2 rounded-lg bg-black text-white dark:bg-white dark:text-black font-semibold text-sm"
-        >
+        <ShopButton type="submit" variant="primary">
           Search
-        </button>
+        </ShopButton>
       </form>
 
       {!query ? (
-        <p className="text-gray-600 dark:text-gray-400">
-          Type a query above to find products.
-        </p>
+        <p className="text-shop-text-2">Type a query above to find products.</p>
       ) : products.length === 0 ? (
-        <p className="text-gray-600 dark:text-gray-400">
+        <p className="text-shop-text-2">
           No products match{' '}
-          <span className="font-semibold">&ldquo;{query}&rdquo;</span>.
+          <span className="text-shop-text font-semibold">
+            &ldquo;{query}&rdquo;
+          </span>
+          .
         </p>
       ) : (
         <>
-          <p className="text-sm text-gray-600 dark:text-gray-400">
+          <ShopLabel>
             {products.length}
             {hasNextPage ? '+' : ''}{' '}
-            {products.length === 1 ? 'result' : 'results'} for{' '}
-            <span className="font-semibold">&ldquo;{query}&rdquo;</span>
-          </p>
-          <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {products.length === 1 ? 'result' : 'results'} for &ldquo;{query}
+            &rdquo;
+          </ShopLabel>
+          <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">
             {products.map((product, i) => (
               <ProductCard
                 key={product.id}
@@ -136,14 +133,12 @@ function SearchPage() {
           </section>
           {hasNextPage ? (
             <div className="flex justify-center py-6">
-              <button
-                type="button"
+              <ShopButton
                 onClick={() => loadMore.mutate()}
                 disabled={loadMore.isPending}
-                className="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {loadMore.isPending ? 'Loading…' : 'Load more'}
-              </button>
+              </ShopButton>
             </div>
           ) : null}
         </>
diff --git a/src/routes/shop.tsx b/src/routes/shop.tsx
index 07ff5b9df..f1d39180c 100644
--- a/src/routes/shop.tsx
+++ b/src/routes/shop.tsx
@@ -1,4 +1,5 @@
 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 {
@@ -8,6 +9,9 @@ import {
 } from '~/utils/shop.functions'
 import { seo } from '~/utils/seo'
 
+const SHOP_FONTS_HREF =
+  'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500&display=swap'
+
 export const Route = createFileRoute('/shop')({
   loader: async ({ context }) => {
     // Fetch collections + policies for the sidebar, and pre-seed the cart
@@ -29,6 +33,16 @@ export const Route = createFileRoute('/shop')({
       description:
         'Official TanStack apparel, accessories, and stickers. Show your support and rep your favorite open-source toolkit.',
     }),
+    links: [
+      { rel: 'stylesheet', href: shopCss },
+      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossOrigin: 'anonymous',
+      },
+      { rel: 'stylesheet', href: SHOP_FONTS_HREF },
+    ],
   }),
   staticData: {
     // Providing a Title flips the main Navbar into flyout mode so the shop
diff --git a/src/styles/shop.css b/src/styles/shop.css
new file mode 100644
index 000000000..9c2f97582
--- /dev/null
+++ b/src/styles/shop.css
@@ -0,0 +1,80 @@
+/*
+ * Shop theme — scoped to /shop pages via `.shop-scope`.
+ *
+ * Only three things live here:
+ *   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.
+ *
+ * Everything else is Tailwind utilities on components — no bespoke class
+ * selectors, no global leakage.
+ */
+
+@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-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;
+
+  --font-shop-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-shop-mono:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Light mode (default) */
+.shop-scope {
+  --shop-bg: #fafaf7;
+  --shop-bg-2: #ffffff;
+  --shop-panel: #ffffff;
+  --shop-panel-2: #f4f3ee;
+  --shop-line: #e6e3db;
+  --shop-line-2: #d4d0c4;
+  --shop-text: #16130d;
+  --shop-text-2: #5a564b;
+  --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;
+}
+
+html.dark .shop-scope {
+  --shop-bg: #0a0a0a;
+  --shop-bg-2: #111114;
+  --shop-panel: #17171b;
+  --shop-panel-2: #1d1d22;
+  --shop-line: #26262c;
+  --shop-line-2: #32323a;
+  --shop-text: #e7e7ea;
+  --shop-text-2: #a8a8b0;
+  --shop-muted: #6f6f79;
+  --shop-accent: #36d3f3;
+  --shop-accent-ink: #001217;
+}
+
+@keyframes shop-pulse {
+  0% {
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--color-shop-green) 60%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 10px
+      color-mix(in srgb, var(--color-shop-green) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--color-shop-green) 0%, transparent);
+  }
+}
diff --git a/src/utils/shopify-queries.ts b/src/utils/shopify-queries.ts
index 78e30d10a..c5dc30dfb 100644
--- a/src/utils/shopify-queries.ts
+++ b/src/utils/shopify-queries.ts
@@ -53,6 +53,8 @@ const PRODUCT_CARD_FRAGMENT = /* GraphQL */ `
     id
     handle
     title
+    productType
+    tags
     featuredImage {
       url
       altText
@@ -103,7 +105,10 @@ export const PRODUCTS_QUERY = /* GraphQL */ `
   }
 `
 
-export type ProductListItem = Pick<Product, 'id' | 'handle' | 'title'> & {
+export type ProductListItem = Pick<
+  Product,
+  'id' | 'handle' | 'title' | 'productType' | 'tags'
+> & {
   featuredImage:
     | (Pick<StorefrontImage, 'url' | 'altText' | 'width' | 'height'> | null)
     | null