Game Product Card with Wishlist & Cart Actions

<article class="group relative overflow-hidden bg-neutral-900 border-white/10 border rounded-2xl max-w-sm">
  <div class="relative aspect-[16/9] bg-neutral-800">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/435d613f-d4c2-403a-8de6-2807eaadddcb_800w.jpg" alt="Game cover" class="w-full h-full object-cover">
    <div
      class="absolute top-3 left-3 inline-flex items-center gap-2 text-[11px] text-white/90 bg-white/10 border-white/15 border rounded-full py-1 px-2 backdrop-blur">
      PS5</div>
    <button class="absolute top-3 right-3 inline-flex items-center justify-center h-8 w-8 rounded-full bg-black/40 hover:bg-black/60 ring-1 ring-white/10" aria-pressed="false">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart w-4 h-4 text-white" style="stroke-width:1.5"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
          </button>
  </div>
  <div class="pt-4 pr-4 pb-4 pl-4">
    <h3 class="text-base font-medium tracking-tight">Starfall Dominion</h3>
    <div class="mt-1 flex items-center gap-2 text-xs text-neutral-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star"
        class="lucide lucide-star w-3.5 h-3.5 text-yellow-400" style="stroke-width:1.5">
        <path
          d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"
          class=""></path>
      </svg>
      4.7 • Action RPG
    </div>
    <div class="mt-3 flex items-center justify-between">
      <div class="flex items-baseline gap-2">
        <span class="text-lg tracking-tight text-white">$59.99</span>
        <span class="text-xs text-neutral-400 line-through">$69.99</span>
      </div>
      <button class="inline-flex items-center gap-2 px-3 h-9 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-xs ring-1 ring-emerald-400/30">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-cart" class="lucide lucide-shopping-cart w-4 h-4" style="stroke-width:1.5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
              Add
            </button>
    </div>
  </div>
</article>