Refactor product selection UI and improve visual design

[SARx613]

Summary

This PR modernizes the product selection interface with improved visual hierarchy, better accessibility, and refined component styling. The changes include redesigning the product cards, updating the radio button selection mechanism, and enhancing the bottom navigation with better touch targets and visual feedback.

Key Changes

Product Cards & Selection

• Replaced checkbox-based selection with circular radio buttons for clearer intent
• Increased product image/icon size from 40-42px to 64px with proper aspect ratio handling
• Separated image and icon rendering into dedicated wrapper elements (product__img-wrap and product__icon-wrap)
• Added proper overflow handling and border-radius to product containers
• Improved product name styling with ellipsis overflow handling and increased font weight (600→800)

Typography & Spacing

• Updated info card title font size (16px→14px) and line-height (1.2→1.25)
• Changed info card subtitle margin and font weight for better visual balance
• Reduced chip button padding (18px 30px→12px 22px) and font size (15px→14px)
• Adjusted product list and item gaps for tighter, more refined spacing
• Added consistent letter-spacing (-.02rem) across multiple components

Navigation & Interaction

• Restructured bottom navigation with nav-inner wrapper for better safe-area handling
• Redesigned nav items with icon wrappers and active state styling
• Added visual feedback with background color on active state
• Improved minimum height and padding for better touch targets
• Updated SVG icons with new designs for better visual consistency

Accessibility & Semantics

• Converted checkbox input to proper <input type="checkbox"> with hidden state
• Maintained ARIA attributes (role="checkbox", aria-checked) on product list items
• Added keyboard support (Enter/Space) for product selection
• Improved semantic HTML structure with proper <div> wrappers

Visual Polish

• Added transition effects to chip buttons and radio buttons
• Updated color variables usage (e.g., var(--ink2) for consistency)
• Refined active/selected states with box-shadow effects
• Added favicon link to index.html
• Improved image loading with loading="lazy" attribute

Implementation Details

• Product selection now uses a cleaner radio button pattern with visual feedback
• Media rendering (images vs SVG icons) is now properly abstracted into separate wrapper elements
• Navigation structure supports safe-area insets for notched devices
• All interactive elements have proper focus states and keyboard support

https://claude.ai/code/session_01GtoEmRJjk4R1NttkVV3sGX