Order Summary Card

<!--
  A read-only summary card. Items use a real <ul>; the totals use a <dl> so each
  amount is the <dd> paired to its <dt> label. Every money value is text-right +
  tabular-nums so the price column stays flush-right and aligned on the decimal.
-->
<section class="w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-950" aria-labelledby="os-title">
  <h2 id="os-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Order summary</h2>
  <ul class="mt-4 space-y-3">
    <li class="flex items-baseline justify-between gap-3">
      <span class="min-w-0 text-sm text-gray-700 dark:text-gray-300">Wireless keyboard <span class="text-gray-400">&times;1</span></span>
      <span class="shrink-0 text-right text-sm tabular-nums text-gray-900 dark:text-gray-100">$79.00</span>
    </li>
    <li class="flex items-baseline justify-between gap-3">
      <span class="min-w-0 text-sm text-gray-700 dark:text-gray-300">USB-C cable <span class="text-gray-400">&times;2</span></span>
      <span class="shrink-0 text-right text-sm tabular-nums text-gray-900 dark:text-gray-100">$24.00</span>
    </li>
  </ul>
  <dl class="mt-4 space-y-1.5 border-t border-gray-200 pt-4 text-sm dark:border-gray-800">
    <div class="flex justify-between gap-3">
      <dt class="text-gray-600 dark:text-gray-400">Subtotal</dt>
      <dd class="text-right tabular-nums text-gray-900 dark:text-gray-100">$103.00</dd>
    </div>
    <div class="flex justify-between gap-3">
      <dt class="text-gray-600 dark:text-gray-400">Shipping</dt>
      <dd class="text-right tabular-nums text-gray-900 dark:text-gray-100">$5.00</dd>
    </div>
    <div class="flex justify-between gap-3">
      <dt class="text-gray-600 dark:text-gray-400">Tax</dt>
      <dd class="text-right tabular-nums text-gray-900 dark:text-gray-100">$8.24</dd>
    </div>
    <div class="mt-1 flex justify-between gap-3 border-t border-gray-200 pt-3 text-base font-semibold dark:border-gray-800">
      <dt class="text-gray-900 dark:text-gray-100">Total</dt>
      <dd class="text-right tabular-nums text-gray-900 dark:text-gray-100">$116.24</dd>
    </div>
  </dl>
</section>