Cart Saver Popup

Build a cart saver popup for my e-commerce site. Match my existing design system, colors, and fonts.

STRUCTURE
- A full-viewport overlay with a centered card, max width 440px, rounded corners.
- Card contents: close X (top-right), a headline about the cart, a compact list of up to 3 cart items (thumbnail placeholder, name, price) with a "+N more" line if the cart is bigger, the cart total, one primary CTA back to checkout, and a "No thanks" dismiss link.

DATA
- The card reads the real cart from my store's cart API or state; leave a clearly marked TODO where that read goes, with a typed shape for the expected data (items, quantities, total).
- Empty cart = the popup never renders. Never show placeholder products to a real visitor.

TRIGGER
- Exit intent on desktop: cursor leaves the viewport toward the top of the window. On touch devices, fall back to showing it when the visitor has been idle on a cart or checkout page for 30 seconds.
- Show at most once per session (sessionStorage flag on show or dismiss).

TONE AND INCENTIVE
- Tone: friendly and low-pressure. Headline like "Your cart is waiting", CTA "Back to checkout". No urgency language at all.
- Include an incentive: a discount code shown in a dashed-border box between the total and the CTA, with one line stating what it does. The code and its value come from a config constant; if the config is empty, the popup renders without the code block. Never invent a discount.

BEHAVIOR
- Close on: X, "No thanks", overlay click, Escape.
- The primary CTA links straight to checkout (or the cart page), never to the homepage.

ACCESSIBILITY AND QUALITY
- Focus trap while open, focus restored on close; role="dialog", aria-modal="true".
- 150-200ms fade + scale-in, no bounce; no layout shift behind the overlay.
- Full-width card with margins on small screens; item list scrolls internally if long.

QUESTIONS
- Before you build, find or ask for: which store platform holds my cart (for the cart read), and the real discount code if one is included. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.