Product Listing and Catalog Page

Build a product listing and catalog page for an online art supply store called "Crafter Supply Co." The page should include:

1. **Sticky navigation** — Logo left, nav links (Shop, Collections, About, Blog), search icon, wishlist icon, and cart icon (with badge "4") on the right.

2. **Breadcrumb + page header** — "Home > Shop > Watercolor Supplies". H1: "Watercolor Supplies", sub-text "148 products". Inline sort control on the right: "Sort by: Best Selling ▾" (dropdown), and a "Grid | List" view toggle (icon buttons, grid is active).

3. **Two-column layout:**
   - **Left column — Filter sidebar (256px, sticky):**
     - "Filters" heading with a "Clear all" text link
     - **Price Range** — Dual-handle slider from $0 to $200. Current range: $10 – $80. Show numeric inputs below.
     - **Brand** — Checkboxes: Winsor & Newton (42), Schmincke (28), Daniel Smith (31), Holbein (19), Student Grade (18). "Show more →" link.
     - **Type** — Checkboxes: Pan Set, Tube Set, Single Tube, Watercolor Pencils, Brushes, Pads
     - **Rating** — Radio buttons: Any rating, 4★ & up, 3★ & up
     - **Availability** — Toggle: In stock only
     - "Apply filters" button (blue-600, full-width)
   
   - **Right column — Product grid:**
     - Active filter chips below the header: "Price: $10–$80", "Brand: Winsor & Newton", "In Stock" — each with an × to remove
     - **4-column grid of product cards:**
       Each card (aspect ratio 1:1 image, rounded-xl, zinc-50 bg):
       - Product thumbnail
       - Brand tag (text-xs, zinc-500)
       - Product name (font-semibold, 2 lines)
       - Star rating + review count (text-sm)
       - Price (with sale price if on sale)
       - "Add to cart" button appears on hover (blue-600, rounded-full appearing from bottom with animation)
       - Wishlist heart icon overlay top-right
     
     - Show 12 products in the grid, examples:
       1. "Professional Watercolor Set 24 Pan" — Winsor & Newton — ★★★★★ (312) — $44.99
       2. "Schmincke Akademie Tubes 12×12ml" — Schmincke — ★★★★☆ (187) — ~~$32.00~~ $24.95
       3. "Daniel Smith Extra Fine 6pc Starter" — Daniel Smith — ★★★★★ (224) — $29.50
       4. "Holbein Artists' Watercolor 36 Pan" — Holbein — ★★★★☆ (99) — $89.00
       (And 8 more similar cards)

4. **Pagination** — Centered below the grid: "Showing 1–12 of 148 products". [← Prev] [1] [2] [3] … [13] [Next →], current page highlighted in blue-600.

5. **Mobile behavior** — Filter sidebar becomes a "Filters" sheet triggered by a bottom drawer button. Grid collapses from 4 → 2 columns on tablet → 1 column on mobile.

**Design:** White background, zinc-50 card backgrounds, blue-600 accent, Inter font. Product images use next/image with lazy loading. Hover transitions on cards are smooth (150ms ease).

[NAVBAR]
  [Logo: Crafter Supply Co.]  Shop  Collections  About  Blog  [🔍] [♡] [🛒 4]

[BREADCRUMB + HEADER]
  Home > Shop > Watercolor Supplies
  Watercolor Supplies (148 products)                    Sort by: [Best Selling ▾]  [⊞] [☰]

[ACTIVE FILTER CHIPS]
  Price: $10–$80 [×]   Brand: Winsor & Newton [×]   In Stock [×]   [Clear all]

[TWO COLUMNS]
┌──────────────────────┐  ┌──────────────────────────────────────────────────────────────────┐
│ Filters  [Clear all] │  │ PRODUCT GRID — 4 cols                                            │
│                      │  │                                                                  │
│ Price Range          │  │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│ $──────●────$ ← $80  │  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │    │
│ $10        $80       │  │ │ Winsor & N.│ │ Schmincke  │ │ Daniel Sm. │ │ Holbein    │    │
│                      │  │ │ Prof. W/C  │ │ Akademie   │ │ Extra Fine │ │ Artists' W │    │
│ Brand                │  │ │ Set 24 Pan │ │ Tubes 12pk │ │ 6pc Starter│ │ 36 Pan Set │    │
│ ▣ Winsor & N. (42)   │  │ │ ★★★★★ 312  │ │ ★★★★☆ 187  │ │ ★★★★★ 224  │ │ ★★★★☆ 99   │    │
│ □ Schmincke  (28)    │  │ │ $44.99     │ │ ~~$32~~ $24│ │ $29.50     │ │ $89.00     │    │
│ □ Daniel Sm. (31)    │  │ │ [Add cart] │ │ [Add cart] │ │ [Add cart] │ │ [Add cart] │    │
│ □ Holbein    (19)    │  │ └────────────┘ └────────────┘ └────────────┘ └────────────┘    │
│ □ Student Gr.(18)    │  │                                                                  │
│ Show more →          │  │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│                      │  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │    │
│ Type                 │  │ │  …         │ │  …         │ │  …         │ │  …         │    │
│ □ Pan Set            │  │ └────────────┘ └────────────┘ └────────────┘ └────────────┘    │
│ □ Tube Set           │  │                                                                  │
│ □ Single Tube        │  │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│ □ W/C Pencils        │  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │ │ [  img  ]  │    │
│ □ Brushes            │  │ │  …         │ │  …         │ │  …         │ │  …         │    │
│ □ Pads               │  │ └────────────┘ └────────────┘ └────────────┘ └────────────┘    │
│                      │  │                                                                  │
│ Rating               │  │ Showing 1–12 of 148 products                                   │
│ ○ Any rating         │  │                                                                  │
│ ● 4★ & up            │  │         [← Prev]  [1]  [2]  [3]  …  [13]  [Next →]             │
│ ○ 3★ & up            │  │                                                                  │
│                      │  └──────────────────────────────────────────────────────────────────┘
│ Availability         │
│ [●] In stock only    │
│                      │
│ [Apply filters     ] │
└──────────────────────┘