Cart Sticky Summary

<!--
  The summary uses position: sticky (top-4) so it trails the items as a long list
  scrolls on desktop - but sticky only bites inside a scroll context taller than
  the sidebar, and only once the columns are side-by-side (lg:). On mobile the
  grid is one column and the summary is simply the last block, no stickiness.
-->
<div class="mx-auto grid w-full max-w-5xl gap-8 px-4 py-6 sm:px-6 lg:grid-cols-[1fr_18rem]">
  <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-16 w-16 flex-none rounded-lg bg-gradient-to-br from-blue-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">Merino Sweater</p><p class="text-xs text-gray-500 dark:text-gray-400">Qty 1</p></div>
      <div class="text-sm font-semibold tabular-nums text-gray-900 sm:w-20 sm:text-right dark:text-gray-100">$98.00</div>
    </li>
  </ul>

  <aside class="lg:sticky lg:top-4 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">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">$98.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">$0.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">$98.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">Checkout</a>
  </aside>
</div>