stock check, variants in cart, variant buttons in product page

resources/views/components/ui/product-card.blade.php

@@ -1,8 +1,9 @@
 @props([
-    'name'  => '',
-    'price' => null,
-    'image' => null,
-    'href'  => '#',
+    'name'      => '',
+    'price'     => null,
+    'image'     => null,
+    'href'      => '#',
+    'variantId' => null,
 ])
 
 {{-- data-turbo-frame="_top" on the links: this card renders inside the
@@ -27,9 +28,20 @@ class="w-full h-auto block"
             @endif
         </a>
 
-        <x-ui.button size="md" position="absolute" class="opacity-0 group-hover:opacity-100 transition-opacity duration-100">
-            {{ __('storefront.product.add_to_cart') }}
-        </x-ui.button>
+        @if ($variantId)
+            {{-- has-[...] forces the button visible while an add-to-cart error
+                 is showing, so it isn't only readable on hover — a shopper who
+                 already moved off the card (mouse or the click itself) must
+                 still see why nothing happened. --}}
+            <x-checkout::add-to-cart
+                :purchasable="$variantId"
+                class="absolute opacity-0 group-hover:opacity-100 has-[.bbk-add-to-cart-error:not([hidden])]:opacity-100 transition-opacity duration-100"
+            >
+                <x-ui.button type="submit" size="md">
+                    {{ __('storefront.product.add_to_cart') }}
+                </x-ui.button>
+            </x-checkout::add-to-cart>
+        @endif
     </div>
 
     <div class="flex items-baseline justify-between gap-4">