/* Add custom JS code below */ 
{# Reusable product card — used on home sections, category pages, and related products #}
<article class="p-card">
    <a class="ph" href="{{ product.url }}">
        {% if product.promotion_title %}
            <span class="badge hot">{{ product.promotion_title }}</span>
        {% elseif product.is_new %}
            <span class="badge">جديد</span>
        {% endif %}
        <img src="{{ product.image.url|default(product.thumbnail) }}" alt="{{ product.image.alt|default(product.name) }}" loading="lazy">
    </a>
    <div class="body">
        {% if product.category %}
            <span class="cat">{{ product.category.name }}</span>
        {% endif %}
        <h3><a href="{{ product.url }}">{{ product.name }}</a></h3>
        {% if product.rating %}
            <div class="stars">
                {% for i in 1..5 %}{{ i <= product.rating.stars ? '★' : '☆' }}{% endfor %}
                <span>({{ product.rating.count }})</span>
            </div>
        {% endif %}
        <div class="foot">
            <div class="price num">
                {% if product.is_on_sale %}
                    {{ product.sale_price|money }}
                    <s>{{ product.regular_price|money }}</s>
                {% else %}
                    {{ product.price|money }}
                {% endif %}
            </div>
            <salla-add-product-button class="add-btn" product-id="{{ product.id }}">
                أضف +
            </salla-add-product-button>
        </div>
    </div>
</article>