---
category:
    shop_by_price: true
    products:
        limit: {{theme_settings.categorypage_products_per_page}}
---
{{inject "categoryProductsPerPage" theme_settings.categorypage_products_per_page}}
{{inject "categoryId" category.id}}
{{#partial "head"}}
    {{#if pagination.category.previous}}
        <link rel="prev" href="{{pagination.category.previous}}">
    {{/if}}
    {{#if pagination.category.next}}
        <link rel="next" href="{{pagination.category.next}}">
    {{/if}}
{{/partial}}

{{#partial "page"}}
<div class="breadCrumbMobileImg">
    {{#if category.image}}
    {{> components/common/responsive-img
    image=category.image
    fallback_size=theme_settings.zoom_size
    lazyload=theme_settings.lazyload_mode
    class="category-header-image"
    }}
    {{/if}}
    <h1>
        {{category.name}}
    </h1>
</div>

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

<div >
    {{#if category.description}}
    <div class="categoryDescription">
        {{{category.description}}}
    </div>
    <div class="categoryDescriptionExpand">Read More</div>
    <div class="categoryDescriptionClose">Hide</div>
    {{/if}}
</div>

<div class="page">



    <div class="kuContainer" id="kuMainContainer">
        <div id="ku-search-form" class="ku-search-block-full" style="display: none;">
            <form method="get" role="search" action="/search.php">
                <input type="search" name="search_query" id="ku-search-field" class="ku-searchfield" placeholder="Search text"><input type="button" title="Search" id="ku-search-btn" value="" class="ku-search-btn">
            </form>
        </div>
      <div id="loader" style="text-align:center">
        <img src="https://js.klevu.com/klevu-js-v1/img-1-1/ku-loader.gif" alt="Loading..."/>
      </div>
      <div class="kuNoRecordFound" id="kuNoRecordFound" style="display:none;">
        <p>No matching products found.</p>
      </div>
      <div class="kuProListing" id="kuProListing" style="display: none;">
        <div class="kuFilterHead kufilter-label" id="klevuNarrowByLabel" style="display: block;">Narrow By</div>
        <div class="kuFilters" id="kuFilters">  
          
        </div><!-- End of kuFilters -->
        
        <div class="kuResultList" id="kuResultListBlock">
          <div class="kuResultInfo">
            <div class="kuTotalResultsTab" id="kuTotResults">
              <div class="kuTabs" id="kuTabs">
              </div>
            </div>
            
            <div class="kuPagination" id="kuPagination1">                    
            </div>
            <div class="kuPagination" id="kuPagination3" style="display:none;">
            </div>
            
            <div class="kuClearBoth"></div>                        
          </div>                      
          
          <div class="kuProductContent" id="kuProductContent">      
            <div class="kuSortHeader">
              <div class="kuSortingOpt">
                <div class="kuSortby">
                  <label id="klevuSortLbl">Sort by:</label>
                  <select name="kuSortby" id="kuSortby" onchange="klevu_changeSortingOptionsForLandigPage(this.value);">
                    <option id="klevuRelSort" value="rel">Relevance</option>
                    <option id="klevuLthSort" value="lth">Price: Low to high</option>
                    <option id="klevuHtlSort" value="htl">Price: High to low</option>
                  </select>
                </div>
                
                <div class="kuPerPage">
                  <label id="klevuItemsPerPage">Items per page:</label>
                  <select onchange="klevu_changeItemsPerPage(this.value);" id="noOfRecords1">
                    <option>12</option>
                    <option>24</option>
                    <option>36</option>
                  </select>
                </div>
                
                <div class="kuView">
                  <a class="kuGridviewBtn kuCurrent" id="gridViewBtn" onclick="klevu_setKuView('grid');">
                    <span class="icon-gridview"></span>
                  </a>
                  <a class="kuListviewBtn" id="listViewBtn" onclick="klevu_setKuView('list');">
                    <span class="icon-listview"></span>
                  </a>
                </div>
                
                <div class="kuClearLeft"></div>
              </div>
              
            </div>
            
            <div class="kuGridView" id="kuResultsView">
              
            </div><!-- End of klevuResults-->
            
            <div class="kuBottomPagi">
              <div class="kuPerPage">
                <label id="klevuItemsPerPageFooter">Items per page:</label>
                <select onchange="klevu_changeItemsPerPage(this.value);" id="noOfRecords2">
                  <option>12</option>
                  <option>24</option>
                  <option>36</option>
                </select>
              </div>
              
              <div class="kuPagination" id="kuPagination2">
              
              </div>
              <div class="kuClearBoth"></div>
            </div>
          </div> <!-- End of product content -->
        
          <!-- Other content -->
          
          <div class="kuOtherContent" id="kuOtherContent">
            <div class="kuSortHeader">
              <div class="kuSortingOpt">
                <div class="kuPerPage">
                  <label id="klevuItemsPerPageCms">Items per page:</label>
                  <select onchange="klevu_changeCmsItemsPerPage(this.value);" id="noOfRecords3">
                    <option>12</option>
                    <option>24</option>
                    <option>36</option>
                  </select>
                </div>                            
                <div class="kuClearLeft"></div>
              </div>
            </div>
          
            <div class="kuListView kuOtherContentView" id="kuOtherContentView">                    
            </div>
          
            <div class="kuSortHeader">
              <div class="kuSortingOpt">
                <div class="kuPerPage">
                  <label id="klevuItemsPerPageCmsFooter">Items per page:</label>
                  <select onchange="klevu_changeCmsItemsPerPage(this.value);" id="noOfRecords4">
                    <option>12</option>
                    <option>24</option>
                    <option>36</option>
                  </select>
                </div>
                <div class="kuPagination" id="kuPagination4">
                </div>
                <div class="kuClearLeft"></div>
              </div>
            </div>
          </div>
          <!-- End of other content -->
        
        </div>
        <div class="kuClearBoth"></div>
      </div><!-- End of kuProListing -->
    </div><!-- End of klevu-container -->
                                            
    <input id="noOfRecords" type="hidden" name="noOfRecords" value="12" />
    <input type="hidden" name="startPos" id="startPos" value="0"/>
    <input type="hidden" name="totalResultsFound" id="totalResultsFound" value="0"/>
    <input type="hidden" name="searchedKeyword" id="searchedKeyword" value=""/>
    <input type="hidden" name="totalPages" id="totalPages" value="0"/>

    <script src="https://js.klevu.com/klevu-js-v1/js-1-1/klevu-landing.js" charset="UTF-8"></script>
    <script type="text/javascript">
        document.getElementById("searchedKeyword").value = '*';
        klevu_pageCategory = '{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}';
        var klevu_setTermInSearchBox = false;
    </script>





</div>

{{/partial}}
{{> layout/base}}


<!--<script-->
<!--        src="https://code.jquery.com/jquery-3.6.0.js"-->
<!--        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="-->
<!--        crossorigin="anonymous">-->

<!--</script>-->

<script>
  $(".categoryDescriptionExpand").click(function(){
    $(".categoryDescriptionExpand").hide();
    $(".categoryDescriptionClose").show();
    $(".categoryDescription").addClass("fullHeight");
  });

  $(".categoryDescriptionClose").click(function(){
    $(".categoryDescriptionExpand").show();
    $(".categoryDescriptionClose").hide();
    $(".categoryDescription").removeClass("fullHeight");
  });
</script>