Screen ID: CON-046
Flow: Search & Discover → Category → Product Grid
Previous: CON-040 Discover Categories
Next: Product Detail (on product tap) or CON-045 Filter Sheet

Header: White header with back button (chevron left), category title "Dairy & Eggs", and a grid/list toggle icon (4-square grid icon). The toggle switches between 2-column grid view and single-column list view. Back button returns to CON-040.

Sort Chips: Horizontal scrolling sort options below the header: "Relevance" (active/selected by default), "Price (up arrow)" for low-to-high, "Price (down arrow)" for high-to-low, "On Special" to show specials first. Only one can be active at a time. Tapping updates the product grid order.

Product Grid: 2-column grid using shared .product-card components. 8 dairy/egg products shown with variety: Clover Full Cream Milk 2L (R 32.99), Free Range Eggs 6pk (R 34.99, SAVE R8 badge), Lancewood Greek Yoghurt 500g (R 39.99), Lancewood Cheddar 400g (R 64.99), Clover Butter 500g (R 54.99, SAVE R5 badge), Parmalat Low Fat 1L (R 22.49), Philadelphia Cream Cheese 230g (R 47.99), Clover Buttermilk 500ml (R 16.99).

Load More: "Load More Products" button at the bottom of the grid. Bordered green button that loads the next page of products (typically 8-12 more items). Alternative implementation: infinite scroll with a loading spinner that auto-fetches as user scrolls near the bottom.

Reusability: This screen serves as a generic product grid template used for various category views (Dairy & Eggs, Beverages, Snacks, etc.). The header title, product data, and sort options are dynamically populated based on the selected category.

List View Toggle: When toggled to list view, each product shows as a horizontal row with image thumbnail (64x64), product details, price, and add button. Grid view (default) is the 2-column card layout shown here.