Shipping costs are displayed to customer before payment confirmation

A checkout flow that reveals the shipping cost only on the post-payment confirmation page — after the card is charged — violates the FTC Mail, Internet, or Telephone Order Merchandise rule and EU Consumer Rights Directive 2011/83/EU Article 6, both of which require pre-payment disclosure of total charges including shipping. Customers who reach the payment button without seeing a shipping line item are authorizing a charge they cannot verify. When the shipping amount is high enough to feel like a surprise, they dispute the charge rather than initiate a return — a chargeback is more automatic than a refund request. Even showing "Shipping: TBD" at the payment step fails the test: a placeholder is not disclosure.

Display the calculated shipping cost as a concrete line item in components/CheckoutSummary.tsx at least one step before the payment/submit button:

// components/CheckoutSummary.tsx
export function CheckoutSummary({ cart, shipping, tax, address }) {
  return (
    <div className="checkout-summary">
      <div className="flex justify-between">
        <span>Subtotal</span>
        <span>${(cart.subtotal / 100).toFixed(2)}</span>
      </div>
      {address && shipping !== null && (
        <div className="flex justify-between">
          <span>Shipping to {address.state}</span>
          <span>${(shipping / 100).toFixed(2)}</span>
        </div>
      )}
      {tax > 0 && (
        <div className="flex justify-between">
          <span>Tax</span>
          <span>${(tax / 100).toFixed(2)}</span>
        </div>
      )}
      <div className="border-t font-bold flex justify-between">
        <span>Total</span>
        <span>${((cart.subtotal + (shipping ?? 0) + tax) / 100).toFixed(2)}</span>
      </div>
    </div>
  )
}

Never render "Calculated at checkout" or null for shipping at the payment step — trigger the rate calculation as soon as a valid address is entered.