{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    PRODUCT CARD — HORIZONTAL SCROLL (flash sale strip)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="product-card flex-shrink-0 w-36 md:w-44"
     x-data="addToCart(product.id)">

    <a :href="`/products/${product.uuid}`" class="block overflow-hidden bg-gray-50 rounded-t-lg">
        <div class="relative aspect-square overflow-hidden">
            <div class="flash-badge text-[10px] px-1 py-0.5">⚡ FLASH</div>
            <img :src="product.primary_image || '/images/placeholder.png'"
                 :alt="product.name"
                 class="product-img w-full h-full object-cover"
                 loading="lazy">
        </div>
    </a>

    <div class="p-2">
        <p class="text-xs text-gray-800 line-clamp-2 leading-tight" x-text="product.name"></p>
        <div class="mt-1.5">
            <span class="text-sm font-bold text-orange-500"
                  x-text="price(product.current_price || product.base_price)"></span>
            <div x-show="product.sale_price" class="flex items-center gap-1 mt-0.5">
                <span class="price-strike text-xs" x-text="price(product.base_price)"></span>
                <span class="badge-red text-[10px]"
                      x-text="discount(product.base_price, product.sale_price) + '%'"></span>
            </div>
        </div>
        <button @click="add()" :disabled="loading"
                class="mt-2 w-full text-[11px] py-1 rounded bg-orange-500 text-white
                       hover:bg-orange-600 transition-colors disabled:opacity-50 flex items-center justify-center">
            <span x-show="!loading">Add to Cart</span>
            <span x-show="loading" class="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
        </button>
    </div>
</div>