{% load i18n %}
<article class="card bg-base-100 border border-base-300 rounded-2xl overflow-hidden h-full flex flex-col transition-shadow duration-200 hover:shadow-lg">
  <a class="block aspect-square bg-base-200/50" href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
    <img class="h-full w-full object-contain p-4" src="{{ product.images.all.0.m.url }}" alt="{{ product.name }}" loading="lazy"/>
  </a>

  <div class="p-4 flex flex-col flex-1">
    <div class="flex items-start justify-between gap-2">
      <a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}" class="min-w-0">
        <h2 class="font-display font-semibold leading-snug line-clamp-2 hover:text-primary transition-colors">
          {{ product.name }}
        </h2>
      </a>

      <p class="font-display font-bold text-lg whitespace-nowrap shrink-0">
        {% with product.current_prices.0 as price %}
          {{ price.price_with_tax }} €
        {% endwith %}
      </p>
    </div>

    <div class="mt-auto pt-4">
      {% include 'components/cart/add_to_cart.html' with size='sm' %}
    </div>
  </div>
</article>