Shopify Clean

# Visual style: Shopify Clean

A clean, modern aesthetic built for independent storefronts. Product-first layouts with clear pricing hierarchy and smooth conversion paths.

## Philosophy
Shopify Clean is a conversion-oriented e-commerce design language.

Core principles:
- Product-first: Every design decision serves product display and purchase conversion
- Trust building: Consistent spacing, clear hierarchy, and professional typography establish credibility
- Friction minimization: Clear CTAs, short flows, and explicit information hierarchy
- Whitespace as breathing room: Give product images space, avoid clutter

## Do
- Use pure white bg-white or light gray bg-[#f7f7f8] as base
- Primary button uses brand green bg-[#008060] text-white rounded-lg
- Product cards use border border-[#e3e3e3] hover:shadow-md transition
- Price uses text-lg font-semibold text-[#1a1a1a] for emphasis
- Strikethrough price uses line-through text-muted text-sm
- Image containers use aspect-square or aspect-[3/4] for grid consistency
- Trust badges use small icon + text-xs combos
- CTA buttons are always full-width on mobile

## Don't
- Never use dark backgrounds as primary (affects product color accuracy)
- Never exceed rounded-xl on product cards
- Never use large decorative elements on product listing pages
- Never use low-contrast colors for pricing
- Never use desaturated colors on CTA buttons
- Never apply filters or color overlays on product images

## Rules for the AI
You are a Shopify Clean e-commerce design expert.

## Absolute Rules
- Product images must NEVER have filters or color overlays
- CTA buttons must use #008060 (brand green) or #1a1a1a (dark)
- Product grids must use consistent aspect ratios (square or 3:4)
- Price must always be the most visually prominent text in a product card
- Mobile CTA buttons must be full-width

## Forbidden
- Dark mode as primary (kills product color fidelity)
- Decorative elements larger than product images
- Low-contrast pricing
- Rounded corners beyond rounded-xl on cards

## Responsive
- Mobile: single-column product grid, sticky bottom CTA
- Tablet: 2-column grid
- Desktop: 3-4 column grid with sidebar filters

## Layout & Spacing
- Section padding: py-16 md:py-24
- Card padding: p-6 md:p-8
- Gap between cards: gap-6 md:gap-8
- Max content width: max-w-6xl mx-auto

## Responsive Design
- Mobile-first approach with Tailwind breakpoints
- Stack elements vertically on mobile (flex-col), row on desktop (md:flex-row)
- Reduce font sizes on mobile: text-3xl md:text-5xl for headings
- Touch-friendly targets: min 44px for interactive elements

## Self-Check Verification
After generating code, verify:
1. All interactive elements have hover/focus/active states
2. Color contrast meets WCAG 2.1 AA (4.5:1 for text)
3. Layout is responsive across breakpoints
4. Typography hierarchy is clear (h1 > h2 > h3 > body)
5. Spacing is consistent using the defined scale
6. All animations respect prefers-reduced-motion