Product card with quick add

<article class="group relative w-64 overflow-hidden rounded-xl border border-slate-200 bg-white">
  <a href="/products/linen-shirt" class="block">
    <div class="relative aspect-[4/5] overflow-hidden bg-slate-100">
      <img src="/img/linen-shirt.jpg" alt="Linen shirt in sand colour" loading="lazy"
        class="size-full object-cover transition-transform duration-300 group-hover:scale-105">
    </div>
    <div class="p-4">
      <h3 class="truncate text-sm font-medium text-slate-900">Linen shirt</h3>
      <p class="mt-1 flex items-center justify-between text-sm">
        <span class="font-semibold text-slate-900">$54.00</span>
        <span class="text-amber-500" aria-label="Rated 4.5 out of 5">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
      </p>
    </div>
  </a>

  <!-- hidden until hover or focus; always visible on touch -->
  <button type="button" data-sku="SHIRT-001"
    class="absolute inset-x-3 top-[calc(100%-5rem)] translate-y-24 rounded-lg bg-slate-900 py-2 text-sm font-semibold text-white opacity-0 transition
           group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100
           pointer-coarse:static pointer-coarse:m-3 pointer-coarse:w-[calc(100%-1.5rem)] pointer-coarse:translate-y-0 pointer-coarse:opacity-100">
    Add to cart
  </button>
  <span class="sr-only" role="status" data-added-note></span>
</article>

// Fires a cart:add event; wire your own cart code to it.
document.querySelectorAll('button[data-sku]').forEach((btn) => {
  const note = btn.parentElement.querySelector('[data-added-note]');
  const label = btn.textContent;

  btn.addEventListener('click', () => {
    document.dispatchEvent(new CustomEvent('cart:add', { detail: { sku: btn.dataset.sku, qty: 1 } }));
    btn.textContent = 'Added';
    note.textContent = 'Item added to cart';
    setTimeout(() => {
      btn.textContent = label;
      note.textContent = '';
    }, 1500);
  });
});