Mini Cart Dropdown

<!--
  A header cart popover. The trigger carries aria-haspopup + aria-expanded and
  the count badge is aria-hidden with the real count folded into the button's
  aria-label, so a screen reader hears "Cart, 3 items", not "Cart 3". The panel
  is right-anchored but capped to the viewport (w-80 max-w-[calc(100vw-2rem)])
  so it never bleeds off a 320px screen.
-->
<div class="relative inline-block text-left">
  <button type="button" class="relative flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-800 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="true" aria-expanded="true" aria-label="Cart, 3 items">
    <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" aria-hidden="true"><path d="M3 4h2l2.4 12h9.2l1.8-8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.4" fill="currentColor"/><circle cx="17" cy="20" r="1.4" fill="currentColor"/></svg>
    <span class="absolute -right-1 -top-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-blue-600 px-1 text-xs font-semibold text-white" aria-hidden="true">3</span>
  </button>

  <div class="absolute right-0 z-20 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-800 dark:bg-gray-900" role="menu">
    <ul class="max-h-64 space-y-1 overflow-y-auto">
      <li class="flex items-center gap-3 rounded-lg p-2">
        <div class="h-10 w-10 flex-none rounded-md bg-gradient-to-br from-fuchsia-400 to-purple-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">Studio Mug</p><p class="text-xs text-gray-500 dark:text-gray-400">Qty 3</p></div>
        <span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">$36.00</span>
      </li>
    </ul>
    <div class="mt-2 flex items-center justify-between border-t border-gray-100 px-2 pt-3 text-sm dark:border-gray-800">
      <span class="text-gray-600 dark:text-gray-400">Subtotal</span>
      <span class="font-semibold tabular-nums text-gray-900 dark:text-gray-100">$36.00</span>
    </div>
    <a href="#" class="mt-3 flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2 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">View cart</a>
  </div>
</div>