## Styling

The storefront uses **Tailwind CSS v4** for styling. Global styles are in `app/globals.css`. To customize the design:

### Colors

Override CSS custom properties in `globals.css`:

```css
:root {
  --color-primary: #635bff;
  --color-secondary: #1a1a2e;
}
```

### Typography

The storefront uses **Geist Sans** for body text and **Geist Mono** for code. These are loaded via `next/font/google` in the root layout.

### Components

UI components are in the `components/` directory and built with Radix UI primitives and shadcn/ui patterns. Modify them directly – they're part of your codebase, not a dependency.

## Layout

### Homepage

The homepage (`app/page.tsx`) renders these sections:

- `Hero` – main banner with CTA
- `ProductGrid` – featured products grid
- `About` – store description
- `Newsletter` – email signup

Add, remove, or reorder sections by editing `page.tsx`.

### Navigation

The navbar is in `app/navbar.tsx`. Add links, change the logo, or modify the layout here.

### Footer

The footer is in `app/footer.tsx`. Update links, social media icons, and copyright info.

## Product Pages

Product detail pages are at `app/product/[slug]/page.tsx`. Key components:

- `ImageGallery` – product image carousel
- `ProductFeatures` – feature list from product metadata
- `AddToCartButton` – variant selector and add-to-cart

## Adding Pages

To add a new static page:

```tsx
// app/about/page.tsx
export default function AboutPage() {
  return (
    <main className="max-w-3xl mx-auto px-4 py-16">
      <h1>About Us</h1>
      <p>Your store description...</p>
    </main>
  );
}
```

## AI Customization

The storefront is designed to be AI-friendly. Use Claude Code or Cursor to make changes by describing what you want:

- "Change the homepage hero to show a video background"
- "Add a testimonials section below the product grid"
- "Change the color scheme to dark mode"