Missing page: Product Detail (/products/:id)

Problem

Individual product detail pages (e.g., /products/1, /products/2) are not implemented. When users try to navigate to a specific product page, they see an empty page with a console warning: "No routes matched location '/products/1'"

Expected Behavior

Users should be able to view detailed information about a specific product, including:

• Full product name and description
• Large product image(s) with gallery
• Full specifications and features
• Price and availability
• Quantity selector
• Add to Cart button
• Related products or recommendations

Current Behavior

• Navigation to /products/:id shows an empty page
• Console warning: "No routes matched location '/products/1'"
• Clicking on product images or cards doesn't navigate to details
• Products page exists but no individual product routes

Acceptance Criteria

• Create /products/:id dynamic route in React Router
• Implement ProductDetail component
• Fetch and display product data by ID from API
• Show full product description and specifications
• Include image gallery or larger product image
• Add quantity selector and Add to Cart functionality
• Display price, availability, and stock status
• Add breadcrumb navigation (Home > Products > Product Name)
• Handle invalid product IDs with 404 page
• Make product cards/images on Products page clickable

Priority

High - Essential for e-commerce user experience

Start with the existing Products page and React Router setup, then inspect how product data is fetched from the API. Implement the /products/:id flow around a ProductDetail component, including navigation from product cards and invalid-ID handling. Done means the listed product details, gallery, quantity, cart action, breadcrumbs, price, and stock state are usable.