{# ==========================================================
   Franklin Theme v2.0
   Featured Categories
========================================================== #}

{% if categories %}

<section class="categories-section py-5">

    <div class="container">

        <div class="section-heading text-center mb-5">

            <span class="section-subtitle">
                Shop by Category
            </span>

            <h2 class="section-title">
                Explore Our Herbal Collections
            </h2>

            <p class="section-description">
                Discover authentic Ayurvedic products carefully formulated
                for your health and wellness.
            </p>

        </div>

      <div class="category-slider">

    <div class="swiper category-swiper">

        <div class="swiper-wrapper">

            {% for category in categories %}

            <div class="swiper-slide">

                <div class="category-card h-100">

                    <a href="{{ category.href }}" class="text-decoration-none">

                        <div class="category-image">
                            <img src="{{ category.image }}"
                                 alt="{{ category.name }}">
                        </div>

                        <div class="category-content">

                            <h5>{{ category.name }}</h5>

                            <span class="product-count">
                                {{ category.total }}
                                {{ category.total == 1 ? 'Product' : 'Products' }}
                            </span>

                            <div class="mt-3">
                                <span class="btn btn-outline-success btn-sm">
                                    Shop Now
                                    <i class="bi bi-arrow-right ms-1"></i>
                                </span>
                            </div>

                        </div>

                    </a>

                </div>

            </div>

            {% endfor %}

        </div>

        <!-- Navigation -->
        <div class="category-prev">
            <i class="bi bi-chevron-left"></i>
        </div>

        <div class="category-next">
            <i class="bi bi-chevron-right"></i>
        </div>

    </div>

    <!-- Pagination OUTSIDE the swiper -->
    <div class="category-pagination-wrapper">
    <div class="category-pagination swiper-pagination"></div>
</div>

</div>

</section>

{% endif %}