Now let me check more components to get a full picture:

Based on my analysis of the design across all components, here are the UX issues I've identified that need cleanup:

Issues Found:

1. Desktop layout grid issue: The product page uses lg:grid-cols-[1fr_480px] which doesn't constrain the left column width on ultra-wide screens, potentially causing the sticky hero to stretch too wide.
2. Inconsistent text colors: Some components use hardcoded colors like text-[#666], text-[#555], text-[#444], text-[#333], text-[#AAA], text-[#bbb] instead of semantic tokens. This breaks consistency.
3. Missing safe area padding on sticky cart: The mobile sticky cart needs pb-safe for devices with home indicators (iPhone X+).
4. Ingredients section mobile spacing: The circle images on mobile create tight spacing with the card content on smaller screens.
5. Cross-sell heading hierarchy: The h2 uses text-sm on mobile which is too small for a section heading.

Let me fix these issues:

Now let me standardize the text colors across components:

Now let me check and fix the remaining components:

Now let me fix the remaining hardcoded colors:

I've completed a comprehensive UX cleanup of the product page design. Here's what was fixed:

Layout fixes:

• Added max-width constraint (1400px) on the main product grid to prevent stretching on ultra-wide screens
• Added safe-area padding for the sticky cart on mobile (iPhone home indicator)
• Fixed ingredients card circle images for better mobile spacing (smaller size, tighter gap)
• Fixed cross-sell heading size on mobile (text-sm was too small for an h2, now text-xl)

Color consistency fixes:

• Replaced all hardcoded hex colors (#666, #555, #444, #333, #777, #AAA, #bbb, #CCC) with semantic tokens (text-muted-foreground, text-foreground, text-border)
• This ensures consistent theming across all components and easier maintenance

You're right. The desktop cards currently have lg:p-5 which is 20px padding. For a card with a 64px circle image and text content, that feels a bit tight. I'd recommend increasing to lg:p-6 (24px) for better breathing room, and also slightly increasing the gap between the image and content.

I increased the desktop padding from lg:p-5 (20px) to lg:p-6 (24px), bumped the gap between image and content from lg:gap-4 to lg:gap-5, and slightly enlarged the circle image from lg:w-16 lg:h-16 (64px) to lg:w-18 lg:h-18 (72px) to give the cards more visual presence and breathing room on desktop.