Cart syncs across devices when authenticated

When authenticated users' carts live only in localStorage, every device switch silently starts a fresh cart. A shopper who builds a cart on desktop, then completes checkout on mobile, finds an empty cart and abandons. ISO 25010:2011 functional correctness and CWE-20 both apply: cart state is user data that must persist correctly across sessions. Cross-device cart loss is a documented e-commerce abandonment driver — Baymard Institute consistently ranks it among top reasons for checkout failure. Without backend sync, any tab closure, browser clear, or device change wipes the cart irrecoverably.

Extend the cart hook at src/hooks/useCart.ts to read from and write to a backend cart API whenever a session is active. On useEffect([user?.id]), fetch the server cart; on every mutation, await fetch('/api/user/:id/cart', { method: 'POST', body: JSON.stringify({ productId }) }) and update state from the response:

// src/hooks/useCart.ts
const addToCart = async (productId: string) => {
  if (user) {
    const res = await fetch(`/api/user/${user.id}/cart`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId }),
    })
    const data = await res.json()
    setCart(data.items)
  } else {
    // fall back to localStorage for guests
    setCart(prev => [...prev, { productId, quantity: 1 }])
  }
}

Keep localStorage as the guest fallback and merge on login.