Full-page Cart

<!--
  Two columns on desktop, one on mobile - and the summary is SECOND in the DOM,
  so on a phone it lands below the items where a shopper expects it, with no
  order- override needed. The item table is a real list, not a <table>: a cart
  row wraps at 320px, and a table cell cannot stack.
-->
<section class="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">Shopping cart</h1>

  <div class="mt-6 grid gap-8 lg:grid-cols-[1fr_20rem]">
    <ul class="divide-y divide-gray-100 dark:divide-gray-800">
      <li class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center">
        <div class="h-20 w-20 flex-none rounded-lg bg-gradient-to-br from-sky-400 to-indigo-500" aria-hidden="true"></div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Aero Runner</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Size 42 - Qty 1</p>
        </div>
        <div class="text-sm font-semibold tabular-nums text-gray-900 sm:text-right sm:w-24 dark:text-gray-100">$120.00</div>
      </li>
      <li class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center">
        <div class="h-20 w-20 flex-none rounded-lg bg-gradient-to-br from-rose-400 to-orange-500" aria-hidden="true"></div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Trail Cap</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">One size - Qty 2</p>
        </div>
        <div class="text-sm font-semibold tabular-nums text-gray-900 sm:text-right sm:w-24 dark:text-gray-100">$50.00</div>
      </li>
    </ul>

    <aside class="h-fit rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-800 dark:bg-gray-900">
      <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Order summary</h2>
      <dl class="mt-4 space-y-2 text-sm">
        <div class="flex justify-between"><dt class="text-gray-600 dark:text-gray-400">Subtotal</dt><dd class="font-medium tabular-nums text-gray-900 dark:text-gray-100">$170.00</dd></div>
        <div class="flex justify-between"><dt class="text-gray-600 dark:text-gray-400">Shipping</dt><dd class="font-medium tabular-nums text-gray-900 dark:text-gray-100">$8.00</dd></div>
        <div class="flex justify-between border-t border-gray-200 pt-2 text-base dark:border-gray-800"><dt class="font-semibold text-gray-900 dark:text-gray-100">Total</dt><dd class="font-bold tabular-nums text-gray-900 dark:text-gray-100">$178.00</dd></div>
      </dl>
      <a href="#" class="mt-5 flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900">Proceed to checkout</a>
    </aside>
  </div>
</section>