Product Listing Page

Create an e-commerce product listing page:

1. PAGE HEADER
- Breadcrumb: Home > Category > Subcategory
- Category title and description
- Product count: "Showing 48 of 156 products"

2. FILTER SIDEBAR (left side, collapsible on mobile)
Filter sections:
- Categories (checkbox list with counts)
- Price Range (slider or min/max inputs)
- Brand (checkbox list)
- Size (button group: XS, S, M, L, XL)
- Color (color swatches)
- Rating (star filter, 4+ stars, 3+ stars, etc.)
- Availability (In Stock only toggle)

Actions:
- "Clear All" link
- Applied filters as removable tags
- "Apply Filters" button (mobile)

3. TOOLBAR
- View toggle: Grid / List
- Sort dropdown: Featured, Price Low-High, Price High-Low, Newest, Best Selling, Rating
- Items per page: 24 / 48 / 96

4. PRODUCT GRID (3-4 columns desktop, 2 mobile)
Each product card:
- Product image (hover shows second image)
- Wishlist heart icon (top right)
- Sale badge (if applicable): "-20%" or "SALE"
- New badge (if new arrival)
- Product name (truncate if long)
- Brand name (smaller text)
- Star rating with review count
- Price (show original crossed out if on sale)
- Color options (small swatches)
- "Add to Cart" button (appears on hover)
- Quick view button

5. PAGINATION
- Page numbers with prev/next
- Or "Load More" button
- Or infinite scroll

6. EMPTY STATE
When no products match filters:
- "No products found"
- Suggestions to adjust filters
- "Clear filters" button

7. MOBILE CONSIDERATIONS
- Filter button opens slide-out panel
- Sticky filter/sort bar
- Two-column grid
- Bottom sheet for sort options

Design: Clean, spacious grid. Quick interactions. Fast filtering (no page reload).