Ecommerce Product Page

# Ecommerce Product Page

## Layout: Two-Column Desktop

Left column (55%): Product image gallery
Right column (45%): Product info + CTA

## Image Gallery
- Main image: aspect-square, object-cover, rounded-2xl
- Thumbnails: horizontal row, 4 thumbs, 72x72px each, rounded-lg
- Active thumbnail: 2px border in brand color
- Click thumbnail: smooth cross-fade transition (300ms)
- Zoom on hover: transform scale(1.05) with overflow hidden

## Product Info Column

### Breadcrumb
text-sm, text-muted, separator: /

### Product Title
text-3xl, font-bold, tracking-tight

### Rating Row
Star icons (fill yellow), numeric score, review count as link

### Price Block
Regular price: text-2xl font-bold
Sale price: text-2xl font-bold text-red-500, strike through original

### Variant Selectors
**Color**: 32x32 circles with color swatch, ring-2 on selected
**Size**: rectangular buttons (40px height), outlined, filled on selected
Sold-out: diagonal strike, cursor not-allowed, opacity-50

### Add to Cart Button
Height: 56px, full-width, rounded-full
Background: #000 (Shopify-inspired)
Text: #FFF, font-medium, text-base
On hover: opacity 0.85
Loading state: spinner icon replaces text

### Sticky Behavior
At 1024px+ the right column becomes sticky (top: 80px)

## Below the Fold

### Description Tabs
Tabs: Description, Specifications, Reviews
Active tab: border-bottom 2px solid black
Content: prose max-w-none

### Reviews Section
Star distribution bar chart
Individual review cards with avatar, name, rating, text, date
"Load more" button