{{ header }}
<!-- BREADCRUMB AREA START -->
<script type="text/javascript">
    window.filter_url = "{{filter_url}}&filter={{filter}}";
    function updatefilterurl(obj)
    {
        if(jQuery(obj).val()){
            window.filter_url = "{{filter_url}}&filter=" + jQuery(obj).val();
        }else{
            window.filter_url = "{{filter_url}}";
        }
    }

    function submitsearch()
    {
        window.location = window.filter_url;
    }
</script>
<style type="text/css">
    ul.pagination {
    text-align: end;
}
ul.pagination a {
    border: none !important;

}
.ltn__pagination ul li a {
    height: 28px;
    width: 28px;
    line-height:26px;
}
.slick-list.draggable{
  width: 1010px;
  margin: 0 auto;
}
.ltn__pagination ul li{
    margin-top: 0;
}
  
    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -7px;
        left: -1px;
        position: relative;
        background-color: #ffb713;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
    button.btn-outline-secondary.ser{
    background-color: #5b8345;
    font-size: 20px;
    margin-right: 0px;
    line-height: 0px;
    color: #fff;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1111;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 39px;
    padding: 0 15px;
}
   .ltn__shop-options .short-by .nice-select{
    border: 1px solid #c15b2754;
    height: 40px;
    line-height: 37px;
    max-width: 174px;
    min-width: 174px;
    }
    .showing-product-number span {
    font-size: 16px;
}

@media (max-width: 425px) {
    .ltn__shop-options .short-by .nice-select, .category_search_in{
       padding: 0 10px !important;
       min-width: 146px;
    font-size: 12px;
    }
    .ltn__shop-options .short-by .nice-select{
       min-width: 146px;
    }
}
@media (max-width: 420px) {
.category_search_in{
    padding: 0 20px;
    font-size: 13px !important;
}
}
@media (max-width: 767px){
.container {
    max-width: 94%;
}
}
@media (max-width: 375px){
.ltn__shop-options.mb-3.col-12.p-0.justify-content-end.justify-content-between.justify-content-lg-end.justify-content-md-end.d-flex {
    flex-direction: column;
}
.mr-2.position-sticky{
    margin-bottom: 8px;
}
.cate_title_div{
    width: 299px !important;
}
}
</style>
<!-- <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2 ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image plr--9---" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__breadcrumb-inner ltn__breadcrumb-inner-2 justify-content-between">
                    <div class="section-title-area ltn__section-title-2">
                        <h6 class="section-subtitle ltn__secondary-color">// Welcome to v Believers sarvjeet</h6>
                        <h1 class="section-title white-color">Shop</h1>
                        <div class="ltn__breadcrumb-list">
                            <ul>
                                <li><a href="{{base}}">Home</a></li>
                                <li><a href="#">Shop</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->
<!-- BREADCRUMB AREA END -->
<div class="ltn__product-area ltn__product-gutter">

  <div class="container">
    <div class="row">
            <div class="col-lg-12">
                <div class="section-title-area ltn__section-title-2 text-center">
                    <h1 class="section-title  sec2 af mt-40">
                        <span>Shop By Category</span>
                    </h1>
                </div>
            </div>
        </div>
        <!-- Portfolio Wrapper Start -->
        <div class="row pb-40">
                <div class="col-lg-3 col-md-3 col-sm-3 col-3 pb-15" tabindex="-1" role="option" aria-describedby="slick-slide10">
                    <div class="text-center ">
                        <div class="ltn__category-item-img">
                            <a href="{{base}}?route=product/all&category_id=59"> <img width="150px" src="catalog/view/theme/vb/img/icons/icon-img/health.png" alt="Image"></a><h4>Health Care</h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-3 pb-15 " tabindex="-1" role="option" aria-describedby="slick-slide11">
                    <div class="text-center">
                        <div class="ltn__category-item-img">
                            <a href="{{base}}?route=product/all&category_id=61"> <img width="150px" src="catalog/view/theme/vb/img/icons/icon-img/makeup.png" alt="Image"></a><h4>Beauty & Skincare</h4>
                        </div>
                    </div>
                </div><div class="col-lg-3 col-md-3 col-sm-3 col-3 pb-15 " tabindex="-1" role="option" aria-describedby="slick-slide12">
                    <div class="text-center">
                        <div class="ltn__category-item-img">
                            <a href="{{base}}?route=product/all&category_id=64"> <img width="150px" src="catalog/view/theme/vb/img/icons/icon-img/mens.png" alt="Image"></a><h4>Men’s Fashion</h4>
                        </div>
                    </div>
                </div><div class="col-lg-3 col-md-3 col-sm-3 col-3 pb-15 " tabindex="-1" role="option" aria-describedby="slick-slide13">
                    <div class="text-center">
                        <div class="ltn__category-item-img">
                            <a href="{{base}}?route=product/all&category_id=65"> <img width="150px" src="catalog/view/theme/vb/img/icons/icon-img/womens.png" alt="Image"></a><h4>Women’s Fashion</h4>
                        </div>
                    </div>
                </div>
        </div>
             
  </div>
  </div>

<!-- PRODUCT DETAILS AREA START -->
<div class="ltn__product-area ltn__product-gutter">
    <div class="container">
        <div class="row  px-2 px-md-0">
            <div class="col-lg-12">
                <div class="ltn__shop-options mb-3 col-12 p-0 justify-content-end justify-content-between justify-content-lg-end justify-content-md-end d-flex">                        
                    <div class="mr-2 position-sticky ">
                        <input  style="border: 1px solid #c15b2754;height: 40px;min-width: max-content;" onchange="updatefilterurl(this)" value="{{filter}}" type="text" class="form-control category_search_in mb-0" placeholder="Search here...">
                        <div class="input-group-append">
                            <button  class=" btn-outline-secondary ser" type="button" onclick="submitsearch()"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                    </div>
                   <div class="short-by text-center ">
                        <select class="nice-select" onchange="location = this.value;">
                            {% for sorts in sorts %}
                            {% if sorts.value == '%s-%s'|format(sort, order) %}
                                <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                            {% else %}
                                <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div> 
            </div>
        </div>
        </div>
                <div class="row  px-2 px-md-0">
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="liton_product_grid">
                        <div class="ltn__product-area ltn__product-gutter ">
                            <div class="container p-0">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="section-title-area ltn__section-title-2 text-center">
                                        </div>
                                    </div>
                                </div>
                                <div class="row ltn__tab-product-slider-one-active--- slick-arrow-1">
                                    {% for  product in products %}
                                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 mb-3">
                                        <div class="ltn__product-item ltn__product-item-3 text-center">
                                            <a href="{{ product.href }}">
                                                <div class="product-img">
                                                    <img src="{{ product.thumb }}" alt="{{ product.name }}">
                                                </div>
                                            </a>
                                            <div class="product-info">
                                                <h2 class="product-title" style="white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;padding-right: 20px;"><a class="rating-num" href="{{ product.href }}" rel="nofollow" target="_blank">{{ product.name }}</a></h2>
                                                <div class="product-price">
                                                    <div class="d-flex justify-content-between">
                                                        <div>
                                                            {% if product.special %} 
                                                                <span>{{ product.special }}</span><del>{{ product.price }}</del>
                                                            {% else %}
                                                                <span>{{ product.price }}</span>
                                                            {% endif %}
                                                       <br>
                                                        <!-- <span class="price-new">BP {{ product.business_points }} </span>  -->
                                                        </div>
                                                        <div><i class="fa fa-heart"></i></div>
                                                    </div>
                                                </div>
                                                <div class="product-ratting">
                                                    <div class="d-flex justify-content-between">
                                                        <div><span>BP {{ product.business_points }}</span></div>
                                                        <div>
                                                            <ul>
                                                               {% for i in 1..5 %}
                                                                    {% if product.rating > i %} 
                                                                        <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                                    {% elseif product.rating > (i-1) and product.rating < (i) %}
                                                                        <li><a href="#"><i class="fas fa-star-half-alt"></i></a></li>
                                                                    {% else %}   
                                                                        <li><a href="#"><i class="far fa-star"></i></a></li>
                                                                    {% endif %} 
                                                                {% endfor %}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="display: flex;">
                                                    <a href="{{ product.href }}" style="width: 50%;" class="theme-btn-1 btn btn-effect-1 btn-addTocart"  title="Add to Cart" data-loading-text="Loading..." id="button-cart">
                                                        <span>ADD TO CART</span>
                                                    </a>
                                                    <a href="{{ product.href }}" style="background-color: #5b8345;width: 50%;" class="theme-btn-1 btn btn-effect-1 btn-Bynow" title="Add to Cart" data-loading-text="Loading..." id="button-checkout">
                                                        <span>Buy Now</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <div class="row col-12 p-0 {% if categorydatach.data == ''%} mb-4{% endif%}">
                <div class="col-12 col-sm-6 pl-2 p-0
                 text-center text-sm-left">Showing {{product_cur_count}} of {{product_tot_count}} results</div>
                <div class="col-12 col-sm-6 p-0
                 "><div class="ltn__pagination-area">
                  <div class="ltn__pagination  text-center text-sm-right">
                      {{ pagination }}
                  </div>
                </div></div>
              </div>
            </div>
        </div>
    </div>
</div>
<!-- PRODUCT DETAILS AREA END -->
{{ footer }}