Screen ID: CON-045
Flow: Search & Discover → Filter/Sort Overlay
Previous: CON-043 Search Results
Next: CON-043 Search Results (with filters applied)

Bottom Sheet: Modal overlay with 50% black backdrop. Sheet slides up from bottom with drag handle (36x4px rounded bar), rounded top corners (16px radius). Max height 85vh with internal scroll. The sheet is presented as a dialog with role="dialog".

Header: "Filter & Sort" title (Alexandria 18px bold) with "Reset" link (underlined, green text) that clears all selections back to defaults.

Sort Section: Radio button group with 4 options. "Relevance" is selected by default (filled green circle). Options: Relevance, Price: Low to High, Price: High to Low, On Special First. Only one can be selected at a time.

Brand Filter: Checkbox list with 5 options. "Clover" is checked (green box with white checkmark). Multiple brands can be selected. "All Brands" acts as a select-all toggle. Brand list is dynamically populated based on available products in the current search/category context.

Price Range: Two numeric input fields ("Min" and "Max") side by side with "to" separator. Inputs accept numeric values in Rands. Empty fields mean no limit on that end. Currency prefix "R" could be added inside the fields as future enhancement.

On Special Toggle: Toggle switch using shared .toggle component. When active (green), only products with active promotions/discounts are shown. Default state is off.

CTA Button: Sticky bottom lime button "Show 24 Results" (Alexandria 16px bold). The count updates dynamically as filters are changed. Tapping closes the sheet and applies filters to the product grid. Button uses the accent color (#C9F06B).

Dismissal: Sheet can be closed by tapping the overlay backdrop, dragging the handle downward, or tapping the "Show Results" button. On dismissal without tapping CTA, filters are discarded (not applied).