<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<div class="product-thumb fr-product-card">

    <form method="post"
          data-oc-toggle="ajax"
          data-oc-load="{{ cart }}"
          data-oc-target="#cart">

        <!-- Product Image -->
        <div class="fr-product-image">

            {% if special %}
                <span class="fr-sale-badge">Sale</span>
            {% endif %}

            <!-- Wishlist -->
            <button type="submit"
                    formaction="{{ product.wishlist }}"
                    class="fr-wishlist-btn"
                    title="{{ button_wishlist }}">
                <i class="bi bi-heart"></i>
            </button>

            <a href="{{ href }}">
                <img src="{{ thumb }}"
                     alt="{{ name }}"
                     title="{{ name }}"
                     class="img-fluid">
            </a>

        </div>

        <!-- Product Information -->
        <div class="fr-product-body">

            {% if manufacturer %}
                <div class="fr-product-category">
                    {{ manufacturer }}
                </div>
            {% endif %}

            <h3 class="fr-product-title">
                <a href="{{ href }}">{{ name }}</a>
            </h3>

            {% if description %}
                <div class="fr-product-description">
                    {{ description }}
                </div>
            {% endif %}

            {% if review_status %}
                <div class="fr-rating">
                    {% for i in 1..5 %}
                        {% if rating < i %}
                            <i class="bi bi-star"></i>
                        {% else %}
                            <i class="bi bi-star-fill"></i>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}

            {% if price %}
                <div class="fr-price">

                    {% if special %}
                        <span class="fr-price-new">{{ special }}</span>
                        <span class="fr-price-old">{{ price }}</span>
                    {% else %}
                        <span class="fr-price-new">{{ price }}</span>
                    {% endif %}

                    {% if tax %}
                        <small class="price-tax">{{ text_tax }} {{ tax }}</small>
                    {% endif %}

                </div>
            {% endif %}

        </div>

        <!-- Action Buttons -->
        <div class="fr-product-footer">

 <button
    type="button"
    class="btn btn-success w-100 btn-add-cart"
    data-product-id="{{ product_id }}"
    data-quantity="{{ minimum }}">

    <i class="bi bi-cart-plus me-2"></i>

    {{ button_cart }}

</button>

    <a href="{{ href }}"
       class="btn fr-view-details">

        <i class="bi bi-eye"></i>

    </a>

</div>

        <input type="hidden"
               name="product_id"
               value="{{ product_id }}">

        <input type="hidden"
               name="quantity"
               value="{{ minimum }}">

    </form>

</div>