The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Ceramics Shop Product Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A calm, minimal single-product ecommerce page for [BRAND], a small invented pottery studio in [STUDIO_PLACE] that sells one item: [PRODUCT_NAME], a [PRODUCT_KIND] made up of [SET_PIECES], priced at $[PRICE]. The page centers on a two-column product hero: a large gallery of five code-drawn SVG views with zoom on the left, and a sticky buy panel with round glaze swatches on the right. Choosing a swatch smoothly recolors every SVG render of the product on the page. The buying flow runs entirely in the browser: a quantity stepper, a slide-in cart drawer with line items, an add-on, a free-shipping progress bar, and a mock checkout that only shows a toast. Below the hero, in order: a story strip, what's in the set, a care accordion, shipping and returns, reviews with rating bars, an FAQ and a footer. There are no photos. All product art is inline SVG with an SVG-filter stoneware speckle and a paper-grain overlay. All copy below is written for the default variable values. If the variables differ, rewrite every headline, paragraph, item name, review, FAQ and care entry so it fits the new brand and product, while keeping the same length, tone and structure. Keep all copy and product data in one file: src/content.ts.

- Audience: Ceramicists, makers, small DTC and craft brands that sell one hero product in several finishes, and developers who want a polished static single-product store to adapt.
- Goal: Let the visitor pick a glaze, see the product change color instantly, check the details (pieces, care, shipping, reviews) and add the set to a cart. Everything must feel like a real shop while running as static files.
- Tone: Quiet, warm and plain-spoken, like a potter describing their work at a market stall. Short sentences, concrete numbers (ml, cm, °C, days), no hype words, no exclamation marks.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/inter (OFL-1.1), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), typescript (Apache-2.0), vite (MIT)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with: npm create vite@latest kiln -- --template react-ts
  - Install: npm i motion lucide-react @fontsource-variable/fraunces @fontsource-variable/inter
  - Install dev deps: npm i -D [email protected] postcss autoprefixer, then npx tailwindcss init -p
  - In vite.config.ts set base: './' and build: { sourcemap: false, outDir: 'dist' }
  - In main.tsx import '@fontsource-variable/fraunces' and '@fontsource-variable/inter' before index.css
  - In tailwind.config.js set content to ./index.html and ./src/**/*.{ts,tsx}. Extend colors with bone #F4EFE6, paper #FBF8F3, sand #E3D8C6, ink #2B2420, muted #6E625A, clay #B4532F, clayDark #9A4426, foot #C8A27C. Extend fontFamily with display ['Fraunces Variable', 'Georgia', 'serif'] and sans ['Inter Variable', 'system-ui', 'sans-serif']. Extend boxShadow with soft: '0 1px 2px rgba(43,36,32,0.04), 0 12px 32px -12px rgba(43,36,32,0.18)' and lift: '0 2px 4px rgba(43,36,32,0.05), 0 20px 40px -14px rgba(43,36,32,0.24)'
  - src/content.ts holds every string, the GLAZES array, the views array, pieces, care, shipping, reviews, FAQ, the add-on item, FREE_SHIPPING_THRESHOLD = 150 and FLAT_SHIPPING = 9
  - src/index.css holds the Tailwind directives, @property registrations for --glaze-hi, --glaze-base and --glaze-lo (syntax '<color>', inherits: true), the steam keyframes, and a prefers-reduced-motion block that disables steam and all transitions
  - Glaze state lives in a GlazeContext (src/state/GlazeContext.tsx). The selected glaze's hi/base/lo hex values are set as CSS custom properties on <body>, and body has transition: --glaze-hi 600ms, --glaze-base 600ms, --glaze-lo 600ms ease
  - Cart state lives in a CartContext (src/state/CartContext.tsx) using useReducer. Persist to localStorage key 'kiln-cart-v1' and rehydrate on load. Line items are keyed by productId + glazeId
  - SVG product pieces are React components in src/render/ (Dripper.tsx, Server.tsx, Cup.tsx, SetScene.tsx, GlazeMacro.tsx, ScaleDrawing.tsx, Crate.tsx, Defs.tsx). They read color from var(--glaze-*), or from an explicit glaze prop when drawn in the cart
  - Render <Defs /> once at the top of <body> as a hidden 0×0 SVG that holds the shared gradients and filters (glazeGrad, footGrad, speckle, grain, softShadow), referenced by id
  - index.html <title> is '[BRAND] — [PRODUCT_NAME]'. The favicon is public/favicon.svg: a 32×32 terracotta #B4532F circle with an inner bone #F4EFE6 ring stroke of 2px at radius 9
  - Add ASSETS.md at the project root listing the Fontsource fonts and Lucide icons with source URL, author and license, and stating that all product art is original inline SVG

## Variables
- [BRAND] — Studio / brand name (default: "Ollan Ceramics"). Invented maker or shop name; used in header wordmark, title, footer and copy.
- [PRODUCT_NAME] — Product name (default: "The Ridgeline Pour-Over Set"). The single product the page sells.
- [PRODUCT_KIND] — Product kind (default: "handmade stoneware pour-over coffee set"). Short description used in the eyebrow, intro and story copy.
- [SET_PIECES] — Pieces in the set (default: "dripper, 600 ml server, two 180 ml cups"). Comma-separated list; drives the 'What's in the set' cards and which SVG pieces are drawn.
- [PRICE] — Price (USD, number only) (default: "148"). Keep below the $150 free-shipping threshold so the progress bar has something to show.
- [STUDIO_PLACE] — Studio location (default: "Fernlow Valley"). Invented place name used in the announcement bar, story strip and footer.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/ceramics-shop-product-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Bone `#F4EFE6` — Page background
- Paper `#FBF8F3` — Cards, gallery stage, drawer, accordion panels
- Sand `#E3D8C6` — Hairline borders (1px), dividers, announcement bar, rating bar tracks, thumbnail borders
- Ink `#2B2420` — Primary text, footer background, selected-swatch ring, toast background
- Muted `#6E625A` — Secondary text, captions, metadata
- Terracotta `#B4532F` — Single accent: primary buttons, stars, progress fills, links on hover, cart badge
- Terracotta Dark `#9A4426` — Primary button hover/active
- Clay Foot `#C8A27C` — Unglazed foot band on every SVG piece (shadow side #A88560)
- Coffee `#3B2418` — Liquid surface inside cups and server in SVG renders
- Glaze Oat `#E6D9C2` — Glaze swatch: hi #F6EFE2, base #E6D9C2, lo #BFAE90
- Glaze Ember `#B4573A` — Glaze swatch (default selected): hi #D98A68, base #B4573A, lo #7E3622
- Glaze Moss `#7A8260` — Glaze swatch: hi #A3AA86, base #7A8260, lo #535A40
- Glaze Tide `#5B7380` — Glaze swatch: hi #8DA3AE, base #5B7380, lo #3C4F59
- Glaze Coal `#3A3330` — Glaze swatch: hi #6A5F59, base #3A3330, lo #1F1A18

### Typography
- Display: product name, section headings, prices, big rating number, story statement: Fraunces Variable (OFL), weights 400/500
- Text: body, UI labels, buttons, nav, captions: Inter Variable (OFL), weights 400/500/600

### Layout & motion
- Spacing: 8px base grid. Container max-width 1240px, centered, horizontal padding 24px on mobile and 40px from 1024px up. Section vertical padding 112px on desktop and 72px on mobile. Card padding 28px (20px on mobile). Grid gap 24px, hero column gap 64px. Type scale: H1 product name Fraunces 500 48px/1.05 desktop, 36px mobile, letter-spacing -0.02em, font-variation-settings 'opsz' 96, 'SOFT' 50. Section H2 Fraunces 400 40px/1.1 desktop, 30px mobile. Card titles Fraunces 500 22px. Body Inter 400 16px/1.65. Small labels Inter 500 12px uppercase with 0.12em tracking, in Muted.
- Radius: Gallery stage 28px; cards, accordion panels and drawer line thumbnails 20px; thumbnails 14px; buttons, steppers, swatches, badges and toast fully rounded (9999px). The drawer has no radius on its outer edge.
- Motion: Library: Motion (motion/react). Global easing [0.22, 1, 0.36, 1].
- Motion: Scroll reveal: every section's heading block and cards fade up from y 24px, opacity 0 to 1, over 700ms, whileInView with once: true and amount 0.2. Cards in a grid stagger by 80ms.
- Motion: Glaze change: the --glaze-hi/base/lo custom properties transition over 600ms ease, so every render shifts color smoothly at the same time. The glaze name label beside 'Glaze —' crossfades over 200ms.
- Motion: Gallery view change: AnimatePresence crossfade, opacity plus scale 0.98→1, 300ms.
- Motion: Steam: three wavy SVG paths above the dripper and server (in the set and dripper views). Each rises translateY 0→-28px while opacity goes 0→0.55→0 over 6s, looping, with delays of 0s, 2s and 4s. Stroke #FFFFFF, width 6, linecap round, blurred by feGaussianBlur stdDeviation 2.
- Motion: Hover lifts: cards translateY -4px and swap shadow-soft for shadow-lift over 200ms. Swatches scale to 1.08. Thumbnails raise their border to Ink at 40% opacity.
- Motion: Add to cart: the button label swaps to a Check icon plus 'Added' for 1.4s (crossfade 150ms), then the drawer opens.
- Motion: Cart drawer: the panel slides x 100%→0 over 380ms. The overlay fades to rgba(43,36,32,0.4) with backdrop-blur 2px over 250ms. New line items animate height and opacity in, and removed items collapse out (layout animation 250ms).
- Motion: Free-shipping bar width animates 500ms whenever the subtotal changes.
- Motion: Rating bars animate width from 0 to their value over 900ms when scrolled into view, staggered by 60ms.
- Motion: Accordion: content height auto-animates 280ms, and the Plus icon rotates 45° to read as a close mark.
- Motion: Toast: slides up 16px and fades in over 250ms at bottom center, stays 3s, then fades out.
- Motion: prefers-reduced-motion: reduce (check with useReducedMotion and the CSS media query): no translate or scale animations, steam paths hidden, glaze and gallery changes are instant, the drawer appears with an opacity-only fade of 150ms, and rating bars render at full width.
- Imagery: No bitmaps at all. Every product image is an original inline SVG (viewBox 0 0 800 800) built the same way. Each piece is a simple silhouette path filled with url(#glazeGrad), a horizontal linearGradient going var(--glaze-hi) at 0%, var(--glaze-base) at 45% and var(--glaze-lo) at 100%. The glaze stops about 82% down each piece at a hand-drawn wavy 'dip line', and below it a band of unglazed foot shows in #C8A27C with a #A88560 shadow side. A 'speckle' filter overlays tiny dark iron flecks: feTurbulence fractalNoise baseFrequency 0.85, numOctaves 2, then feColorMatrix to a sparse alpha threshold, colored #3A2A20, at 35% opacity, clipped to the glazed area. A white rim highlight runs along each lip (1.5px stroke, 50% opacity), with a narrow vertical highlight streak (white, 18% opacity, blurred). Each piece sits on a soft ground shadow ellipse (Ink at 18%, blurred 14px). The forms are generic and original. The dripper is a smooth, slightly convex cone with a rolled rim, a flat round base flange and a small half-round loop handle on the right, with no ribs or signature details. The server is a round-bellied carafe with a short pulled spout and a narrowing neck. The cups are low, unhandled tumblers with a slight taper. The gallery stage background is a radial gradient from #FBF8F3 at the center to #EFE7DA at the edges. A fixed full-screen paper-grain overlay (feTurbulence baseFrequency 0.9, numOctaves 2, mix-blend-mode multiply, opacity 0.05, pointer-events none) covers the whole page. Review avatars are initials in circles tinted with their glaze color. There are no faces, people, product photos or logos of any kind.

## Pages & Sections
### [BRAND] — [PRODUCT_NAME] (`index.html`)
1. **Announcement bar** — One line, centered: 'Free shipping on orders over $150 · Every set thrown by hand in Fernlow Valley'. Inter 500 13px, Ink.
   Layout: Full-width bar 36px tall, Sand background, text centered. On mobile, show only 'Free shipping over $150'.
2. **Header** — Left: the logo mark (a 22px SVG of an Ink ring with a 2px stroke around a small Terracotta filled circle of radius 5), then the wordmark 'Ollan Ceramics' in Fraunces 500 22px. Center: anchor links 'The set' (#the-set), 'Care' (#care), 'Reviews' (#reviews), 'FAQ' (#faq) in Inter 500 14px, Muted, turning Ink on hover with a 1px underline that grows from the left. Right: a 44px round cart button with the Lucide ShoppingBag icon (20px). A Terracotta badge (18px circle, white Inter 600 11px) shows the total item count and pops with scale 1→1.25→1 over 300ms when it changes.
   Layout: Sticky at top 0, height 72px, Bone background at 85% opacity with backdrop-blur 8px, and a 1px Sand bottom border that appears only after scrolling 8px. Below 768px the center links are hidden, leaving only the logo and cart. The cart button opens the drawer.
3. **Product hero** — Gallery: five views from content.views, labelled 'The set', 'Dripper', 'Cup', 'Glaze close-up', 'Scale'. (1) The set: the dripper sits on top of the server left of center, and two cups stand to the right, overlapping slightly, with steam. (2) Dripper: the dripper large at a 3/4 angle with the interior visible as an ellipse rim and a darker inner gradient, plus steam. (3) Cup: one cup large with a coffee surface ellipse in #3B2418 and a small white specular arc. (4) Glaze close-up: a full-frame macro of the glaze gradient with dense speckle, a wavy dip line crossing the lower third, and raw clay below. (5) Scale: line drawings of all pieces with 1.5px Ink strokes, the glaze fill at 30% opacity, and dimension lines with labels in Inter 500 14px: 'Dripper 11 cm', 'Server 14 cm · 600 ml', 'Cup 7.5 cm · 180 ml'. Buy panel, top to bottom: eyebrow 'HAND-THROWN STONEWARE · SMALL BATCH'. H1 'The Ridgeline Pour-Over Set'. A rating row of five 16px Lucide Star icons filled Terracotta, then '4.9 · 128 reviews' as a link to #reviews. Price '$148' in Fraunces 500 30px, with 'Free shipping over $150' beside it in Muted 14px. The paragraph: 'A dripper, a server and two cups, thrown from the same clay and dipped in the same glaze bath. Made for one slow pour in the morning and a second one you share.' A 1px Sand divider. The label 'Glaze — Ember' (the name updates). Five 36px round swatches (Oat, Ember, Moss, Tide, Coal), each filled with a radial gradient from its hi color at 30% 30% to its base color, with a 1px inset Ink ring at 10%. The selected swatch has a 2px Ink ring offset 3px. Swatches have role radiogroup and arrow-key support, and the native title attribute shows the glaze name. Below them in Muted 14px: 'Each glaze breaks differently in the kiln. No two sets match exactly.' Then a row with a quantity stepper (pill, 1px Sand border, 52px tall, Lucide Minus and Plus buttons, a number between 1 and 10, aria-live) and the 'Add to cart · $148' button (fills the remaining width, 52px tall, Terracotta background, Bone Inter 600 15px text, hover Terracotta Dark; the price in the label multiplies by quantity). Under that, three perk rows with 18px Lucide icons in Muted: Truck 'Ships in 3–5 business days', RotateCcw '30-day returns, label on us', PackageCheck 'Breakage in transit fully covered'.
   Layout: 12-column grid at 1024px and up. The gallery spans columns 1–7 and the buy panel columns 8–12 with a 64px gap. The buy panel is position: sticky at top 96px. Gallery stage: aspect-ratio 1/1, Paper background with the radial gradient, radius 28px, shadow-soft, overflow hidden. Round 40px prev/next buttons (Lucide ChevronLeft and ChevronRight, Paper background at 90%) sit 16px from the left and right edges at vertical center. A view caption pill sits in the bottom-left: Paper at 90%, Inter 500 12px, showing e.g. 'The set · 1/5'. Below the stage is a row of five 1:1 thumbnails, each 20% wide minus gaps (12px gap), showing mini versions of the views. The active thumbnail has a 2px Ink border, the others a 1px Sand border. Left and right arrow keys change the view when the gallery is focused. Zoom on devices with (hover: hover) and (pointer: fine): hovering the stage shows a 180px circular lens (2px Paper border, shadow-lift) that follows the cursor and shows the same SVG at 2.5× scale, offset so the area under the cursor is centered, and the cursor becomes none. Zoom on touch: tapping the stage scales the SVG to 2× with transform-origin at the tap point, dragging pans it, and a second tap resets it. A small Lucide ZoomIn hint chip sits at the top right of the stage. Below 1024px the hero stacks: the gallery comes first at full width, then the buy panel without sticky. On mobile, once the main Add to cart button scrolls out of view (IntersectionObserver), a fixed bottom bar slides up. It is 72px tall, Paper background, with a 1px Sand top border and safe-area padding, and shows the product name in Fraunces 16px, the price, and a compact 'Add to cart' pill.
   Motion: The buy panel fades up on load (staggered children 60ms). The gallery crossfades between views. Glaze transitions take 600ms. Steam loops in views 1 and 2. The swatch hover scale is 1.08.
4. **Story strip** — An eyebrow 'FROM THE STUDIO'. The statement in Fraunces 400 40px/1.15: 'Thrown on a kick wheel in Fernlow Valley, one set at a time.' The paragraph: 'We use an iron-rich stoneware, mix five glazes by hand in the studio and fire every set twice. The dripper's single hole keeps the flow slow and even, so the cup tastes of the beans, not of the rush.' Three stats, each a large Fraunces 500 56px number with an Inter 14px Muted caption: '38 h', 'from wet clay to packed crate'; '2', 'firings, the last at 1240 °C'; '5', 'glazes mixed in-house'.
   Layout: Full-bleed Paper band with 1px Sand top and bottom borders. Inside the container, a 12-column grid: the statement and paragraph span columns 1–6 (paragraph max-width 52ch), and the three stats sit in columns 8–12 as a vertical list separated by 1px Sand dividers, 24px vertical padding each. On mobile everything stacks and the stats become a 3-column row with 28px numbers.
   Motion: Fade-up reveal. Stat numbers count up from 0 over 1.2s when they come into view (instant under reduced motion).
5. **What's in the set** — id 'the-set'. Eyebrow 'IN THE CRATE'. H2 'What's in the set'. Four cards, each with an SVG illustration of the piece in the currently selected glaze, a Fraunces title and an Inter 14px Muted spec line: 'Dripper', 'Single-hole cone · fits #2 filters · 11 cm tall'; 'Server', '600 ml · pulled spout · 14 cm tall'; 'Two cups', '180 ml each · unhandled · 7.5 cm tall'; 'The crate', 'Molded-pulp crate with 40 unbleached filters and a care card'. The crate card shows a code-drawn box in #C8A27C and #A88560 tones with grain, not glaze.
   Layout: Heading block left-aligned and max-width 640px, 48px above the grid. 4-column grid on desktop, 2 columns from 640px to 1023px, 2 columns on mobile with a 16px gap. Each card is Paper with radius 20px and a 1px Sand border. Its illustration area is aspect 4/5 with the radial stage gradient, and title and spec sit below with 20px padding.
   Motion: Cards stagger fade-up by 80ms, hover lift, and the illustration scales to 1.03 on hover over 400ms.
6. **Care** — id 'care'. Left column: eyebrow 'CARE', H2 'Care for it like you plan to keep it.', and the paragraph 'Stoneware is tough, but it remembers sudden heat. A few habits keep the glaze bright for years.' Right column: an accordion with four items. 'Washing': 'Dishwasher-safe on the top rack. Washing by hand keeps the glaze glossy longer.' 'Heat': 'Warm the pieces with hot tap water before pouring boiling water. Never move a piece straight from the fridge to the stove.' 'Microwave': 'Safe for reheating. The unglazed foot can get hot, so lift by the rim.' 'Patina and crazing': 'Fine lines can appear in lighter glazes over time. They are normal for stoneware and do not affect use.' The first item is open by default.
   Layout: Two columns on desktop: the left spans 5 columns and is sticky at top 120px, the right spans 7 columns. Accordion items are Paper with radius 20px, a 1px Sand border and 12px gaps. The header row is a full-width button in Inter 600 16px with a 20px Lucide Plus on the right, and has aria-expanded and aria-controls. Panels have 28px horizontal padding. Several items can be open at once. Stacks on mobile.
   Motion: Height auto-animation 280ms. Plus rotates 45° when open. Section fades up.
7. **Shipping and returns** — Eyebrow 'DELIVERY'. H2 'Shipping and returns'. Three cards, each with a 24px Lucide icon in Terracotta inside a 48px Sand circle, a Fraunces 22px title and body text. Truck 'Shipping': 'Free over $150, otherwise $9 flat. Packed in molded pulp with no plastic. Ships in 3–5 business days.' RotateCcw 'Returns': 'You have 30 days to return an unused set. We email you a prepaid label.' PackageCheck 'Breakage': 'If anything arrives chipped or cracked, send us a photo and we will ship a replacement piece the same week.'
   Layout: 3-column grid on desktop and stacked on mobile. Paper cards with radius 20px, a 1px Sand border and 28px padding. The heading block sits above the grid with a 48px gap.
   Motion: Cards stagger fade-up by 80ms, with hover lift.
8. **Reviews** — id 'reviews'. Eyebrow 'REVIEWS'. H2 'What people pour with it'. Summary column: '4.9' in Fraunces 500 80px, five Terracotta stars, then 'Based on 128 reviews' in Muted. Five rating bars for 5 to 1 stars with counts 112, 12, 3, 1, 0: a label like '5★' in Inter 500 13px, an 8px fully rounded Sand track with a Terracotta fill sized to count/128, and the count on the right. Review cards each show a 44px initials circle (glaze base color at 25% opacity, Ink Inter 600 14px initials), the name, 'Verified buyer · Glaze: <glaze>' in Muted 13px, the stars, a Fraunces 500 18px title and a body paragraph. Six reviews: (1) Maren A., Moss, 5★, 'The pour is slower, in a good way', 'The single hole makes me wait, and I have stopped rushing my mornings. Moss has tiny iron flecks that catch the window light.' (2) Theo R., Oat, 5★, 'Heavier than it looks', 'It holds heat far better than my old glass carafe. The raw clay foot feels great in the hand.' (3) Priya K., Tide, 5★, 'Used the same day it arrived', 'I bought it for my sister. She sent me a photo of her first cup an hour after opening the crate. Packed very well.' (4) Jonah L., Coal, 4★, 'Lovely, one small note', 'Beautiful set. The cups are smaller than I expected at 180 ml, so check the scale view before you order.' (5) Ines V., Ember, 5★, 'Even better in person', 'Ember shifts from rust to almost pink where the glaze thins at the rim.' (6) Sam O., Oat, 5★, 'A second set for the office', 'The first one lives at home. Now I have the same quiet ritual at my desk.' Only the first four show at first. A 'Show more reviews' button (pill, 1px Ink border, Ink text, 48px tall) reveals the other two and then hides itself.
   Layout: 12-column grid on desktop: the summary is sticky in columns 1–4 at top 120px, and the reviews fill columns 6–12 in a 2-column masonry-free grid of equal-height Paper cards (radius 20px, 1px Sand border, 24px padding, 16px gap). On mobile the summary sits on top and the reviews form a single column. The button is centered under the grid with a 32px gap.
   Motion: Rating bars grow into view with a 60ms stagger. Cards fade up. Revealed cards fade up with an 80ms stagger.
9. **FAQ** — id 'faq'. Eyebrow 'QUESTIONS'. H2 'Before you order'. Five items: 'Will my set look exactly like the pictures?', 'No two sets match. Glazes pool and break differently in every firing, so expect small shifts in tone and speckle.' 'What filters does the dripper take?', 'Standard #2 cone filters. We include 40 unbleached ones to start.' 'Is the glaze food-safe?', 'Yes. All five glazes are lead-free and fired to about 1240 °C.' 'Can I buy pieces separately?', 'Not yet. We sell complete sets so every piece comes out of the same firing.' 'How long until it ships?', 'Sets in stock ship in 3–5 business days. Around the holidays, allow up to 10.'
   Layout: A single centered column, max-width 760px, with the heading centered above it. The accordion uses the same component as Care, but only one item can be open at a time and all start closed. Items are separated by 1px Sand dividers, with no card backgrounds and 24px vertical padding.
   Motion: Same accordion motion as Care, plus a section fade-up.
10. **Footer** — The wordmark 'Ollan Ceramics' with the logo mark in Bone, and the line 'Small-batch stoneware for slow mornings.' in Bone at 70%. Three link columns, all pointing to anchors on this page: Shop ('The set' #the-set, 'Glazes' #top, 'Reviews' #reviews); Studio ('Our process' #story, 'Care' #care); Help ('Shipping' #shipping, 'FAQ' #faq). A bottom row separated by a 1px rule in Bone at 15%: '© 2026 Ollan Ceramics. Thrown in Fernlow Valley.' on the left and 'This is a demo store. Nothing here is for sale.' on the right, both Inter 13px in Bone at 60%.
   Layout: Full-bleed Ink #2B2420 background with Bone text, 80px top and 40px bottom padding. On desktop a 12-column grid: the brand block spans 5 columns and the three link columns span 2 each starting at column 7. On mobile the brand block stacks above a 2-column link grid. Give the story strip id 'story' and the shipping section id 'shipping' so the links resolve.
   Motion: Link hover underline only.
11. **Cart drawer and toast (global overlays)** — Drawer header: 'Your cart (n)' in Fraunces 500 22px, with a close button (Lucide X) on the right. A free-shipping block with the line 'You're $2 away from free shipping' (computed as 150 − subtotal), which changes to 'Free shipping unlocked' with a Lucide Check icon once the subtotal is $150 or more, above an 8px Sand track with a Terracotta fill of min(subtotal/150, 1). Line items show a 72px Paper thumbnail with a mini SetScene in that line's glaze (passed as an explicit glaze prop), the product name in Inter 600 15px, 'Glaze: Ember' in Muted 13px, a compact quantity stepper (36px tall, minimum 1, maximum 10), the line price on the right, and a 'Remove' text button in Muted 13px underlined on hover. Adding the same glaze again increases that line's quantity, while a different glaze creates a new line. Below the items is an add-on row in a dashed 1px Sand box: a small code-drawn folded linen cloth SVG in #E6DCCB, 'Linen pour cloth', '$12' and an 'Add' pill button. The row is hidden once the cloth is in the cart. Footer: 'Subtotal' with the amount in Fraunces 500 22px, the note 'Shipping and taxes calculated at checkout.' in Muted 13px, then a full-width 'Checkout' button (Terracotta, 52px, fully rounded, Lucide Lock icon 16px). Clicking it only shows the toast 'This is a demo store. Checkout is turned off.' Empty state: an 80px outline SVG cup drawn with Ink strokes at 40%, 'Your cart is empty' in Fraunces 22px, and a 'Keep browsing' outline pill that closes the drawer. Toast: an Ink pill with Bone Inter 500 14px text and a Lucide Info icon, max-width 90vw.
   Layout: The drawer is fixed to the right, full height, 440px wide on desktop and 100vw on mobile, with a Paper background, a 1px Sand left border and shadow-lift. Inside it is a flex column: a 72px header with a bottom border; the shipping block with 24px padding; a scrollable items list with 24px padding and a 1px Sand divider between items; the add-on row; and a footer pinned to the bottom with a top border, 24px padding and safe-area padding. The overlay covers the page, and clicking it closes the drawer. The drawer has role dialog, aria-modal true and a focus trap. Focus moves to the close button on open and returns to the trigger on close. Esc closes it, and body scroll is locked while it is open. The toast is fixed at bottom center, 24px from the bottom (96px on mobile when the sticky bar shows), with z-index above the drawer.
   Motion: The drawer slides in with the overlay fade, and line items use layout animations, as listed under Motion. The toast slides up and fades in. Under reduced motion everything uses opacity only.

## Assets
- font: Fraunces Variable and Inter Variable, self-hosted through @fontsource-variable/fraunces and @fontsource-variable/inter (OFL-1.1), imported in main.tsx and bundled by Vite. List both in ASSETS.md with source https://fontsource.org, the authors (Undercase Type for Fraunces, Rasmus Andersson for Inter) and the license.
- icon: lucide-react (ISC) icons only: ShoppingBag, Star, Minus, Plus, Truck, RotateCcw, PackageCheck, ChevronLeft, ChevronRight, ZoomIn, X, Check, Lock, Info. Tree-shaken from the npm package and listed in ASSETS.md with source https://lucide.dev and the ISC license.
- image: No bitmap images. Every product view, piece card, cart thumbnail, crate, linen cloth, empty-cart cup, logo mark and favicon is original inline SVG drawn in code under src/render/ and public/favicon.svg. The stoneware speckle and the paper grain are SVG filters (feTurbulence). Note in ASSETS.md that all illustrations are original and code-drawn.

## Don'ts
- No backend: no server code, API routes, databases, auth, analytics or third-party API calls. The cart lives only in React state and localStorage.
- No working checkout, payment form, card input or payment widget. The Checkout button only shows the demo toast.
- No forms that submit anywhere. There is no newsletter signup.
- No real payment-provider logos or badges, and no real ceramic or coffee brand names, logos, slogans or product names.
- Don't copy a real brand's signature dripper silhouette or trademark shapes. Draw the generic original forms described above: a smooth cone, a rolled rim, a flat flange and a loop handle, with no spiral ribs or distinctive cut-outs.
- No product photos, stock images or placeholder-image services. All art is inline SVG drawn in code.
- No real people's faces or likeness. Reviewers appear only as initials in glaze-tinted circles, with invented names.
- Don't copy copy from existing shops. Use only the invented copy in src/content.ts.
- Don't load fonts from fonts.googleapis.com, fonts.gstatic.com or any CDN. Self-host Fraunces and Inter through Fontsource. No commercial or custom brand typefaces.
- No CDN <script> or <link> tags. Everything ships locally in dist/.
- Don't use Aceternity UI, Tailwind Plus / Tailwind UI or purchased template source. Build every component from scratch.
- Don't change the stack (Vite 5 + React 18 + TypeScript, Tailwind CSS 3.4, Motion, lucide-react) unless the user asks.
- No source maps in the production build, and don't copy src/ into dist/.
- Use relative asset paths (Vite base './'). In-page navigation uses #anchors only, and any other internal link must point to a file name such as ./index.html, never a bare directory.
- Keep dist/ under 20 MB.
- No console errors or warnings at 1440×900 or 390×844, and no horizontal scroll on mobile.
- Respect prefers-reduced-motion: no steam, no transforms, and instant glaze and gallery changes.
- No SEO extras: no meta descriptions, Open Graph tags, JSON-LD or sitemap. Just the <title> and the favicon.
- Don't mention VibeFather anywhere in the site except an optional credit link in the footer.

---
— Prompt by VibeFather · https://vibefather.ai/t/ceramics-shop-product-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.