Mobile checkout viewport optimized; no horizontal scroll

Checkout forms with fixed pixel widths — a table at width: 600px, an input at width: 400px — cause horizontal scrolling at 375px viewport width, the baseline mobile target. WCAG 2.2 SC 1.4.10 (Reflow) requires content to reflow at 320px without horizontal scroll; SC 2.5.5 (Target Size) sets 44x44px as the minimum touch target. A payment button shorter than 44px on a touch screen has a measurably higher mis-tap rate, which causes failed submissions and abandonment at the highest-value step of the funnel. Mobile accounts for a majority of e-commerce sessions in most markets, making a broken mobile checkout a revenue-critical defect.

Verify <meta name="viewport" content="width=device-width, initial-scale=1"> is present in src/app/layout.tsx, then replace fixed-width checkout containers with fluid equivalents:

// src/app/checkout/page.tsx
<div className="w-full max-w-full px-4 box-border md:max-w-[600px] md:mx-auto">
  {/* checkout content */}
</div>

Enforce 44px touch targets in src/app/globals.css:

/* src/app/globals.css */
.checkout-container button,
.checkout-container input,
.checkout-container select {
  min-height: 44px;
  min-width: 44px;
}

Audit for any hardcoded pixel widths in checkout component files and replace with w-full or max-w-* Tailwind utilities. Validate at 375px in browser devtools before shipping.