Bodega

Build an online store for a small-batch goods brand using the "Bodega" theme — Warm, tactile storefront that makes small-batch goods look worth it.

## Art direction
Warm and tactile. The background is unbleached paper, not white; surfaces are the only true white on the page, which makes product photography pop without a border. Corners are generously rounded (16–20px), shadows are large and very soft, and terracotta marks price, sale state and the buy button. It should feel handmade but not twee.

## Colour palette (use these exact values)
- Background: #FDF6EC
- Surface / cards: #FFFFFF
- Primary text: #2B1B12
- Secondary text: #7A6552
- Accent (buttons, links, active state): #C1552E
- Text on accent: #FFFFFF
- Borders / dividers: #E7D8C4
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Fraunces", "Iowan Old Style", Georgia, serif
- Body: "Inter", system-ui, sans-serif
- A soft optical serif for product and section titles at 500 weight; body sans at 15/1.65. Prices are set in the heading face at 18px so they read as part of the brand, not as data.

## Page structure
1. Announcement bar in accent with one line of shipping copy, dismissible.
2. Header: wordmark centred, four category links left, search / account / cart-with-count right.
3. Hero: a 60/40 split — a serif promise, a sentence, a 'Shop all' button on the left; a single hero product shot on a cream backdrop on the right.
4. Category tiles: three wide cards with a photo, a serif label and a chevron.
5. Best sellers: a four-column product grid — image, name, one-line descriptor, price, and a quick-add button that appears on hover.
6. A brand story band with a two-column photo/text split and a 'Read our story' text link.
7. Reviews: three quote cards with five-star rows and verified-buyer labels.
8. Instagram-style four-up grid of lifestyle shots.
9. Newsletter capture: one input plus a button on the accent-tinted strip.
10. Footer: four link columns, payment marks, and a short returns line.

## Components and detailing
Product cards are white, 18px radius, no border, with a `0 8px 30px rgba(43,27,18,0.06)` shadow that deepens on hover as the card lifts 3px. The buy button is a full-width accent pill, 46px tall. Badges ('New', 'Low stock') are small terracotta-tinted pills. Inputs are 44px with a 12px radius and a cream fill. Star ratings are drawn as SVG, filled in accent.

## Motion
Everything eases gently at 200ms. Quick-add slides up from the card's bottom edge on hover. The cart count bumps with a small scale pop when it changes. Product images cross-fade to a second angle on hover where one exists.

## Copy and imagery
Write like a shopkeeper who knows the maker: what it is, where it came from, why it costs what it costs. Product names are plain, descriptors are concrete ('washed Ethiopian, stone fruit and jasmine'). Every product needs a price, and out-of-stock states must be honest rather than hidden.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.