@php($showRoute = $product->division->value === 'wellness' ? 'wellness.show' : 'appliances.show')
<article class="group flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
    <a href="{{ route($showRoute, $product) }}" class="block aspect-square overflow-hidden bg-gray-100">
        <img src="{{ media_url($product->image) }}" alt="{{ $product->name }}" loading="lazy" decoding="async" width="480" height="480" class="size-full object-cover transition duration-500 group-hover:scale-105">
    </a>
    <div class="flex flex-1 flex-col p-5">
        <h3 class="font-semibold text-navy-900"><a href="{{ route($showRoute, $product) }}" class="hover:text-gold-700">{{ $product->name }}</a></h3>
        @if ($product->short_description)<p class="mt-1 line-clamp-2 text-sm text-gray-600">{{ $product->short_description }}</p>@endif
        <div class="mt-auto flex items-center justify-between pt-4">
            <p class="text-lg font-bold text-navy-900">
                {{ $product->displayPrice() }}
                @if ($product->compare_at_price && $product->compare_at_price > $product->price)
                    <span class="ml-1 text-sm font-normal text-gray-400 line-through">${{ number_format((float) $product->compare_at_price, 2) }}</span>
                @endif
            </p>
            <a href="{{ route($showRoute, $product) }}" class="text-sm font-semibold text-gold-700 hover:text-gold-800">View →</a>
        </div>
    </div>
</article>