{% load rp_format static %}
<a href="{% url 'katalog:produk_detail' p.slug %}" class="pcard reveal" style="--d:{% widthratio forloop.counter0 1 60 %}ms">
  <div class="pimg">
    {% with f=p.foto_utama f2=p.foto_kedua %}
    <img src="{% if f %}{{ f.gambar.url }}{% else %}{% static 'img/placeholder.svg' %}{% endif %}" alt="{{ p.nama_lengkap }}" loading="lazy">
    {% if f2 %}<img src="{{ f2.gambar.url }}" alt="{{ p.nama_lengkap }} {{ f2.label|lower }}" class="alt" loading="lazy">{% endif %}
    {% endwith %}
    {% if p.tersedia <= 0 %}<span class="badge-habis">HABIS</span>{% elif p.diskon_persen %}<span class="badge-disc">-{{ p.diskon_persen }}%</span>{% endif %}
    <span class="cta">{% if p.tersedia > 0 %}Lihat & Pilih Ukuran{% else %}Lihat Detail{% endif %}</span>
  </div>
  <div class="p-3.5">
    <p class="text-[11px] font-bold uppercase tracking-wider text-red-600">{{ p.merek.nama }}{% if p.kategori %} <span class="text-neutral-400 font-semibold">· {{ p.kategori.nama }}</span>{% endif %}</p>
    <p class="font-bold text-sm leading-snug mt-0.5 line-clamp-2" style="min-height:2.6em">{{ p.nama }}</p>
    <div class="mt-2 flex items-end justify-between gap-2">
      <div><p class="font-black">{{ p.harga|rp }}</p>{% if p.harga_coret and p.harga_coret > p.harga %}<p class="text-xs text-neutral-400 line-through">{{ p.harga_coret|rp }}</p>{% endif %}</div>
    </div>
    {% if p.ukuran_tersedia %}<p class="text-[11px] text-neutral-500 mt-2 truncate">Uk. {{ p.ukuran_tersedia|join:", " }}</p>{% endif %}
  </div>
</a>