CON-050 | Product Detail

Screen Overview

• Type: Detail page (no bottom navigation, sticky CTA at bottom)
• Purpose: Display full product information, allow add to cart, manage backup preferences
• Previous: Category listing or search results
• Next: Image gallery (CON-052), product specs (CON-051), backup selector (CON-053)

Layout Specifications

• Background: #FFFFFF (white)
• Header: White, back button left, share + wishlist icons right. Sticky on scroll.
• Image area: Square 1:1 aspect ratio, #E9EFE7 background placeholder, swipe dots for 3 images
• Content padding: 16px horizontal
• Bottom CTA: Sticky bar with quantity selector + full-width add-to-cart button
• No bottom navigation: This is a detail page with dedicated sticky CTA

Component Specs

• Save Badge: Background #C9F06B, text #043F2D, 12px bold, 4px radius
• Brand: 12px uppercase, letter-spacing 1.2px, muted color
• Product Name: Alexandria 22px bold, #111827
• Price (current): Alexandria 26px bold
• Price (original): 16px strikethrough muted
• Unit price: 13px muted
• Delivery badge: #E9EFE7 background, 8px 14px padding, 8px radius
• Quantity selector: 40px buttons, 1.5px border, 10px radius
• Add to Cart: #C9F06B background, #043F2D text, 48px height, 12px radius, Alexandria 16px bold

Backup Options

• Purpose: Let customers choose what happens if item is out of stock during picking
• Options: "Remove from order" (default selected), "Replace with similar" (opens CON-053), "Contact me"
• Style: Radio-card pattern, 1.5px border, selected card gets primary border + subtle tint

Expandable Sections

• "Product Details": Expanded by default showing Size, Category, SKU
• "Nutritional Info": Collapsed by default, expands to show Energy, Protein, Fat, Carbs
• Interaction: Tap header toggles expand/collapse with chevron rotation

Related Products

• Layout: Horizontal scroll, 140px wide cards, 12px gap
• Cards: Image placeholder, brand, name (2-line clamp), price
• Tapping a card: Navigates to that product's detail page
• Full list: "See all" navigates to CON-054-related-products.html

State Variations

• Populated: Full product detail with all sections (default view above)
• Loading: Skeleton shimmer for image, badge, brand, title, price, delivery info
• Error: "Product Not Available" centered message with X icon and Go Back button

Behavior Notes

• Image area tapping opens full-screen gallery (CON-052)
• Quantity selector min=1, max=10; updates CTA price dynamically
• "Replace with similar" opens backup selector bottom sheet (CON-053)
• Share icon triggers native share sheet
• Heart icon toggles wishlist state (filled when active)
• Back button returns to previous screen

Accessibility

• All interactive elements have aria-label attributes
• Expandable sections use aria-expanded
• Quantity buttons have descriptive labels
• Image area communicates "Tap to view gallery" for screen readers