Cart Line Items

<!--
  The reusable core: one accessible cart row. Each Remove is a real <button>
  with an aria-label naming the product, so the icon-only control is never a
  nameless "button" in the accessibility tree. The row stacks at 320px and only
  becomes horizontal from sm: up.
-->
<ul class="mx-auto w-full max-w-2xl 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-emerald-400 to-teal-500" aria-hidden="true"></div>
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">Field Notebook</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">Qty 1</p>
    </div>
    <div class="flex items-center justify-between gap-4 sm:justify-end">
      <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">$18.00</span>
      <button type="button" class="flex h-9 w-9 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-800 dark:hover:text-gray-200" aria-label="Remove Field Notebook from cart">
        <svg viewBox="0 0 20 20" fill="none" class="h-5 w-5" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
      </button>
    </div>
  </li>
</ul>