Screen ID: CON-060
Flow: Shopping → Cart
Previous: CON-050 Product Detail (or any product browse screen)
Next: CON-064 Backup Review → Checkout

Free Delivery Progress: Progress bar shows how close the user is to the R 350.00 free delivery threshold. Current cart subtotal is R 294.99 (about 84%). The bar uses amber colour when close but not yet reached. Text dynamically shows remaining amount needed.

Cart Items: Each item displays a 64px product image placeholder, product name, unit price, quantity stepper with [- qty +] controls, computed line total, and backup status indicator. Items can be swiped left to reveal a delete action (see CON-062).

Backup Status Indicators:
• Green badge = backup product selected (e.g., "Parmalat 2L")
• Orange/warning badge = no backup set (prompts user to choose)
• Blue/info badge = "Remove if unavailable" preference
• No badge = no backup action configured yet

Clear All: Red text action in the header. Tapping displays a confirmation dialog before removing all items from the cart.

You Might Also Like: Horizontal scrolling upsell section with 4 product cards. Products are algorithmically suggested based on cart contents (complementary items). Each card has a quick "+ Add" button.

Order Summary: Shows subtotal, delivery fee, service fee, and total. Delivery fee changes to "FREE" when the threshold is met. Total is displayed prominently in large bold text.

Sticky CTA: "Proceed to Checkout" button is fixed at the bottom of the screen with the total amount displayed. Navigates to CON-064 Backup Review before checkout.

States: Two states available via the toggle bar:
• Populated — Full cart with items, upsells, and summary
• Loading — Skeleton placeholders for cart items and progress bar