<!-- sections/main-search.liquid -->
{{ 'section.css' | asset_url | stylesheet_tag }}
{{ 'collection-pages.css' | asset_url | stylesheet_tag }}
{{ 'collection-products.css' | asset_url | stylesheet_tag }}
{{ 'collection-products-list.css' | asset_url | stylesheet_tag }}
{{ 'button-style.css' | asset_url | stylesheet_tag }}
<link href="{{ 'custom-effect.css' | asset_url }}" rel="stylesheet" media="print" onload="this.media='all'">
{%- liquid
  assign sid = section.id
  assign se_stts = section.settings
  assign se_blocks = section.blocks
  assign stt_layout = se_stts.layout
  assign stt_image_bg = se_stts.image_bg
  if stt_layout == 't4s-se-container' 
    assign html_layout = '<div class="t4s-container">__</div></div>' | split: '__'
  elsif stt_layout == 't4s-container-wrap'
    assign html_layout = '<div class="t4s-container">__</div>' | split: '__'
  else
    assign html_layout = '__' | split: '__'
  endif
  assign layout_des = se_stts.layout_des
  assign image_ratio = se_stts.image_ratio
  if image_ratio == "ratioadapt"
    assign imgatt = ''
   else 
    assign imgatt = 'data-'
  endif
  assign use_pagination = se_stts.use_pagination 
  assign sett_equal = se_stts.use_eq_height
  assign show_vendor = se_stts.show_vendor
  assign use_link_vendor = settings.use_link_vendor
  assign enable_rating = settings.enable_rating
  assign inc_pr = se_stts.pr_des
  assign limit = se_stts.limit
  assign product_des = se_stts.product_des
  assign nt_filter = 'nt_filter'

  assign collection = collections[settings.search_prs_suggest]
  assign show_search_suggest = settings.show_search_suggest
  
  assign isHasCollection = false
  assign show_img = settings.show_img
  assign isGrowaveWishlist = false
  if settings.wishlist_mode == "3" and shop.customer_accounts_enabled
    assign isGrowaveWishlist = true
  endif
  assign enable_pr_size = settings.enable_pr_size
  assign pr_size_pos = settings.pr_size_pos
  assign show_size_type = settings.show_size_type
  assign size_ck = settings.size_ck | append: ',size,sizes,Größe' 
  assign get_size = size_ck | downcase | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq

  assign enable_pr_color = settings.enable_pr_color
  assign show_cl_type = settings.show_color_type
  assign color_ck = settings.color_ck | append: ',color,colors,couleur,colour'
  assign get_color = color_ck | downcase | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq

  assign price_varies_style = settings.price_varies_style
  assign app_review = settings.app_review
  assign use_countdown = se_stts.use_cdt
  
  assign txt_cd = 'products.grid_items.offer_end_in' | t
  assign show_list = se_stts.show_list
  assign show_list_btns = false
  unless request.page_type != 'collection' and se_stts.show_list
  assign show_list = false
  endunless
  if show_list and settings.enable_atc or settings.enable_quickview 
  assign show_list_btns = true
  endif

  assign isLoadmore = false
  if layout_des != "2"
    if use_pagination == "load-more"  or use_pagination == "infinite" 
      assign isLoadmore = true
      assign typeAjax = 'LmDefault'
    else
      assign typeAjax = 'AjaxDefault'
    endif
  else
     if use_pagination == "load-more" or use_pagination == "infinite" 
      assign isLoadmore = true
      assign typeAjax = 'LmIsotope'
    else
      assign typeAjax = 'AjaxIsotope'
    endif
  endif
  assign enable_bar_lm = se_stts.enable_bar_lm
  assign results_count = search.results_count 
  assign IsNoTypeProduct = false
  unless sea_types contains 'product'
    assign IsNoTypeProduct = true 
  endunless
  if search.terms contains 'product_type:'
   assign arr_terms = search.terms | remove: 'product_type:' | replace_first: ' ', 'ntt4s' | split: 'ntt4s'
   assign search_terms = arr_terms[1] | strip | remove: '*'
   assign product_type = arr_terms[0] | strip
  endif
  unless search_terms != blank 
    assign search_terms = search.terms
  endunless 
  assign on_sale_txt = 'products.product.on_sale' | t
  assign save_js = 'products.product.save_js' | t: saved_amount: 'saved_amount'

  assign sea_results = search.results
  assign sea_types_size = search.types.size
  if sea_types_size > 1
    assign sea_results = sea_results | where: "object_type","product"
  endif 

  assign enable_listing = se_stts.enable_listing
  assign enable_listing_default = se_stts.enable_listing_default
  assign show_list_btns = false
  if enable_listing and settings.enable_atc or settings.enable_quickview 
  assign show_list_btns = true
  endif
  if enable_listing and enable_listing_default
   assign class_listview = 'is--listview'
  endif
  assign col_mobile = se_stts.col_mb
  assign col_tablet = se_stts.col_tb
  assign col_desktop = se_stts.col_dk 
  assign cart_collection_items_per_row = cart.attributes.collection_items_per_row
  assign collection_items_per_row = cart_collection_items_per_row | split: '.'
  assign search_types = search.types
  if search_types.size == 1 and search_types.first == 'article' or search_types.first == 'page'
    assign isProduct = false
  elsif search_types.size == 2 and search_types contains 'article' and search_types contains 'page'
    assign isProduct = false
  else 
    assign isProduct = true
  endif
  assign se_blocks_type = section.blocks | map: "type"
 -%}
{%- if se_blocks_type contains "filter" -%}
  <link rel="stylesheet" href="{{ 'drawer.min.css' | asset_url }}" media="all">
  <link rel="stylesheet" href="{{ 'facets.css' | asset_url }}" media="all">
{%- endif -%}
{%- paginate search.results by limit -%}
<div class="t4s-section-inner t4s_nt_se_{{ sid }} t4s_se_{{ sid }} {{ stt_layout }} {% if stt_image_bg != blank and stt_layout != 't4s-se-container' %} t4s-has-imgbg lazyloadt4s {% endif %}"  {% if stt_image_bg != blank and stt_layout != 't4s-se-container' %}  data-bgset="{{ stt_image_bg | image_url: width: 1 }}" data-sizes="auto"  data-optimumx="2" {% endif %} {% render 'section_style', se_stts: se_stts %} >
  {{- html_layout[0] -}}
  {%- if stt_layout == 't4s-se-container' -%}<div class="t4s-container-inner {%- if stt_image_bg != blank -%} t4s-has-imgbg lazyloadt4s {%- endif -%}"  {% if stt_image_bg != blank %}  data-bgset="{{ stt_image_bg | image_url: width: 1 }}" data-sizes="auto"  data-optimumx="2" {% endif %} > {%- endif -%}
  {%- if se_blocks.size > 0 and isProduct and results_count > 0 -%}
    <div class="t4s-collection-header t4s-d-flex t4s-align-items-center">
      {%- for block in se_blocks -%}
        {%- case block.type -%}
          {%- when 'sortby' -%}
            <link rel="stylesheet" href="{{ 'base_drop.min.css' | asset_url }}" media="all">
            {%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
              {%- assign option_selected = search.sort_options | where: "value",sort_by | first -%}
              <div class="t4s-dropdown t4s-dropdown__sortby">
                  <button data-dropdown-open data-position="bottom-end" data-id="t4s__sortby"><span class="t4s-d-none t4s-d-md-block">{{ option_selected.name | escape }}</span><span class="t4s-d-md-none" data-not-change-txt>{{ 'search.general.sort_button' | t }}</span><svg class="t4s-icon-select-arrow" role="presentation" viewBox="0 0 19 12"><use xlink:href="#t4s-select-arrow"></use></svg></button>
                  <div data-dropdown-wrapper class="t4s-dropdown__wrapper" id="t4s__sortby">
                     <div class="t4s-drop-arrow"></div>
                     <div class="t4s-dropdown__header">
                        <span class="t4s-dropdown__title">{{ 'search.general.sort_by_label' | t }}</span>
                        <button data-dropdown-close aria-label="{{ 'general.aria.close' | t }}"><svg role="presentation" class="t4s-iconsvg-close" viewBox="0 0 16 14"><path d="M15 0L1 14m14 0L1 0" stroke="currentColor" fill="none" fill-rule="evenodd"></path></svg></button>
                     </div>
                     <div class="t4s-dropdown__content">
                        {%- for option in search.sort_options -%}
                        <button data-dropdown-item data-sortby-item data-value="{{ option.value | escape }}"{% if option.value == sort_by %} class="is--selected"{% endif %}>{{ option.name | escape }}</button>
                        {%- endfor -%}
                     </div>
                  </div>
              </div>
          {%- when 'layout' -%}
            
          {%- liquid 
            unless cart_collection_items_per_row contains 'list_t4s' and enable_listing == false
              assign col_mobile = collection_items_per_row[0] | default: col_mobile
              assign col_tablet = collection_items_per_row[1] | default: col_tablet
              assign col_desktop = collection_items_per_row[2] | default: col_desktop
            endunless
            assign arr_cols_layout = 'list_t4s,1,2,3,4,5,6' | split: ','
            assign arr_cols_limit = '3,5,7' | split: ','
            assign arr_breakpoint = 'mobile,tablet,desktop' | split: ','
            assign icon_col_0 = '<span class="t4s_icon_viewlist"></span>'
            assign icon_col_1 = '<span class="t4s_icon_view1"></span>'
            assign icon_col_2 = '<span class="t4s_icon_view2"></span>'
            assign icon_col_3 = '<span class="t4s_icon_view3"></span>'
            assign icon_col_4 = '<span class="t4s_icon_view4"></span>'
            assign icon_col_5 = '<span class="t4s_icon_view5"></span>'
            assign icon_col_6 = '<span class="t4s_icon_view6"></span>'
            if enable_listing
              assign listing_continue1 = ''
              assign listing_continue2 = '1'
            else 
              assign listing_continue1 = '0'
              assign listing_continue2 = '0,1'
            endif 
            if cart_collection_items_per_row contains 'list_t4s'
              assign class_listview = ''
            elsif enable_listing and enable_listing_default
              assign class_listview = 'is--listview'
            endif -%}
            
            <div data-layout-switch data-items="{{ cart_collection_items_per_row }}" class="t4s-layout-switch-wrapper">
              {%- for i in (0..2) -%}
                 {%- assign cols_limit = arr_cols_limit[i] | plus: 0 -%}
                 {%- capture list_continue -%}
                  {%- cycle listing_continue1, listing_continue2, listing_continue2 -%}
                 {%- endcapture -%}

                 <div class="t4s-layout__switch is--{% cycle 'mobile t4s-d-md-flex t4s-d-md-none', 'tablet t4s-d-none t4s-d-md-flex t4s-d-lg-none', 'desktop t4s-d-none t4s-d-lg-flex' %}">
                   
                   {%- assign col_active = 'col_' | append: arr_breakpoint[i] -%}

                   {%- for j in (0..6) limit: cols_limit -%}
                      {%- if list_continue contains j %}{% continue %}{% endif -%}

                       <button data-btn-as-a data-breakpoint="{{ arr_breakpoint[i] }}" data-col="{{ arr_cols_layout[j] }}"{% if [col_active] == arr_cols_layout[j] %} class="is--active"{% endif %}>{%- assign icon_col_j = 'icon_col_' | append:j -%}{{ [icon_col_j] }}</button>
                   {%- endfor -%}
                 </div>
               {%- endfor -%}
            </div>
          {%- when 'filter' -%}
              <div class="t4s-btn-filter-wrapper">
                  {%- liquid 
                  assign style_filters = block.settings.style_filters
                  if search.filters.size > 0
                     assign show_filter = true
                  else
                     assign show_filter = false
                  endif -%}
                  {%- if show_filter -%}
                  <button data-btn-as-a class="t4s-btn-filter" data-drawer-delay data-drawer-options='{ "id":"#t4s-filter-hidden" }' aria-label="Show filters"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"><path d="M324.4 64C339.6 64 352 76.37 352 91.63C352 98.32 349.6 104.8 345.2 109.8L240 230V423.6C240 437.1 229.1 448 215.6 448C210.3 448 205.2 446.3 200.9 443.1L124.7 385.6C116.7 379.5 112 370.1 112 360V230L6.836 109.8C2.429 104.8 0 98.32 0 91.63C0 76.37 12.37 64 27.63 64H324.4zM144 224V360L208 408.3V223.1C208 220.1 209.4 216.4 211.1 213.5L314.7 95.1H37.26L140 213.5C142.6 216.4 143.1 220.1 143.1 223.1L144 224zM496 400C504.8 400 512 407.2 512 416C512 424.8 504.8 432 496 432H336C327.2 432 320 424.8 320 416C320 407.2 327.2 400 336 400H496zM320 256C320 247.2 327.2 240 336 240H496C504.8 240 512 247.2 512 256C512 264.8 504.8 272 496 272H336C327.2 272 320 264.8 320 256zM496 80C504.8 80 512 87.16 512 96C512 104.8 504.8 112 496 112H400C391.2 112 384 104.8 384 96C384 87.16 391.2 80 400 80H496z"></path></svg>{{ 'search.general.filter_button' | t }}</button>
                  {%- endif -%}
                  <link rel="stylesheet" href="{{ 'drawer.min.css' | asset_url }}" media="all">
                  <link rel="stylesheet" href="{{ 'facets.css' | asset_url }}" media="all">
               </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
    {%- if show_filter and style_filters == 'area' %}<div class="t4s-filter-area" data-filter-area></div>{% endif -%}
  {%- endif -%}

  <div class="t4s-row">
    <div data-ntajax-container{% if show_filter %} data-has-filters{% endif %} data-ntajax-options='{"id":"{{ sid }}","type":"{{ typeAjax }}","typeFilters":"facets","isProduct":true,"updateURL":true,"updateURLPrev":true,"sort_by":"{{ search.sort_by | default: search.default_sort_by }}"}' class="t4s-col-item t4s-col-12 t4s-main-area t4s-main-collection-search t4s-justify-content-center">
    	{%- if results_count <= 0 -%}
        {% if search_terms == blank %}
          {%- render 'search_form', search_terms: search_terms -%}
          {% if show_search_suggest and collection != blank %}
            <div class="t4s-search-suggest">
              <div class="t4s-search-suggest-title">{{ 'search.general.suggest' | t }}</div>
              <div data-collection-url="{{ collection.url }}" data-contentlm-replace class="t4s_box_pr_grid t4-suggest-products t4s-products t4s-justify-content-center t4s_{{ image_ratio }} t4s_position_{{ se_stts.image_position }} t4s_{{ se_stts.image_size }} t4s-row t4s-row-cols-lg-2 t4s-row-cols-md-2 t4s-row-cols-1 t4s-gx-md-0 t4s-gy-md-0 t4s-gx-0 t4s-gy-0">
                {%- for product in collection.products limit: 6 -%}
                  {%- render 'product-group-item', product: product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: false -%}
                {%- endfor -%}
              </div>
              <div class="t4s-search-suggest-bottom t4s-text-center">
                <a class="t4s-viewall-btn" href="{{ collection.url }}">{{ 'search.pagination.view_all' | t }} <svg class="t4s-btn-icon" viewBox="0 0 14 10"><use xlink:href="#t4s-icon-btn"></use></svg></a>
              </div>
            </div>
          {% endif %}
        {% else %}
          <div class="t4s-coll-empty t4s-text-center">
            <svg class="t4s-icon t4s-icon--search" aria-hidden="true" focusable="false" role="presentation"><use href="#icon-h-search"></use></svg>
            <div class="t4s-no-result-product t4s-d-flex t4s-align-items-center">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="18" height="18"><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"></path></svg>{{ 'search.general.no_product_results' | t }}
            </div>
          </div>
        {% endif %}
      {%- else -%}
       
         {%- assign total_active_values = 0 -%}
         {%- capture filters__active -%}
              <div class="t4s-active-filters__count t4s-d-inline-block">{{ 'products.facets.results_with_count_html' | t:count:results_count }}</div>
              {%- for filter in search.filters -%}
                {%- if filter.type == "price_range" -%}
                  {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
                  {%- assign total_active_values = total_active_values | plus: 1 -%}
                    <a class="t4s-active-filters__remove-filter" href="{{ filter.url_to_remove }}">
                      {%- assign min_value = filter.min_value.value | default: 0 -%}
                      {%- assign max_value = filter.max_value.value | default: filter.range_max -%}
                      {{ min_value | money }} - {{ max_value | money }}
                    </a>
                  {%- endif -%}
                {%- else -%}
                  {%- for filter_value in filter.active_values -%}
                    {%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
                    <a class="t4s-active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">{{ filter_value.label }}</a>
                  {%- endfor -%}
                {%- endif- %}
              {%- endfor -%}
              {%- if total_active_values > 1 %}<a href="{{ routes.search_url }}?q={{ search.terms }}{% if search.sort_by != blank %}&sort_by={{ search.sort_by }}{% endif %}" class="t4s-active-filters__clear">{{ 'products.facets.clear_all' | t }}</a>{% endif -%}
          {%- endcapture -%}
          {%- if total_active_values > 0 %}<div class="t4s-active-filters">{{- filters__active -}}</div>{% endif -%}
          {%- if paginate.previous.is_link and isLoadmore -%}
            <div data-wrap-lm-prev class="t4s-pagination-wrapper t4s-prs-head t4s-has-btn-{{ use_pagination }} {{ se_stts.btn_pos }} t4s-w-100" timeline t4s-reveal="slide-in">
              <a data-load-more data-is-prev href="{{ paginate.previous.url }}" class="t4s-pr t4s-loadmore-btn t4s-btn t4s-btn-loading__svg t4s-btn-base t4s-btn-style-{{ se_stts.button_style }} t4s-btn-size-{{ se_stts.btns_size }} t4s-btn-icon-{{ se_stts.btn_icon }} t4s-btn-color-{{ se_stts.btns_cl }} {% if se_stts.button_style == 'default' or se_stts.button_style == 'outline' %}t4s-btn-effect-{{ se_stts.button_effect }}{% endif %}">
                <span class="t4s-btn-atc_text">{{ 'search.pagination.load_prev' | t }}</span> 
                {% if se_stts.btn_icon %}
                  <svg class="t4s-btn-icon" viewBox="0 0 32 32"><path d="M 15 4 L 15 24.0625 L 8.21875 17.28125 L 6.78125 18.71875 L 15.28125 27.21875 L 16 27.90625 L 16.71875 27.21875 L 25.21875 18.71875 L 23.78125 17.28125 L 17 24.0625 L 17 4 Z"/></svg>
                {% endif %}
                <div class="t4s-loading__spinner t4s-dn">
                  <svg  width="16" height="16" aria-hidden="true" focusable="false" role="presentation" class="t4s-svg__spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="t4s-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
                </div> 
              </a>
            </div>
          {%- endif -%}  
          
          {%- if layout_des == "1" -%} 
            <div data-contentlm-replace class="t4s_box_pr_grid t4s-products {{ class_listview }} t4s-text-{{ se_stts.content_align }} t4s_{{ image_ratio }}  t4s_position_{{ se_stts.image_position }} t4s_{{ se_stts.image_size }} t4s-row  t4s-justify-content-center t4s-row-cols-{{ col_mobile }} t4s-row-cols-md-{{ col_tablet }} t4s-row-cols-lg-{{ col_desktop }} t4s-gx-md-{{ se_stts.space_h_item }} t4s-gy-md-{{ se_stts.space_v_item }} t4s-gx-{{ se_stts.space_h_item_mb }} t4s-gy-{{ se_stts.space_v_item_mb }}">
          {%- else -%} 
            <div data-contentlm-replace class="isotopet4s t4s_box_pr_masonry t4s-products {{ class_listview }} t4s-text-{{ se_stts.content_align }} t4s_{{ image_ratio }} t4s_position_{{ se_stts.image_position }} t4s_{{ se_stts.image_size }} t4s-row t4s-row-cols-{{ col_mobile }} t4s-row-cols-md-{{ col_tablet }} t4s-row-cols-lg-{{ col_desktop }} t4s-gx-md-{{ se_stts.space_h_item }} t4s-gy-md-{{ se_stts.space_v_item }} t4s-gx-{{ se_stts.space_h_item_mb }} t4s-gy-{{ se_stts.space_v_item_mb }}" data-isotopet4s-js='{ "itemSelector": ".t4s-product", "layoutMode": "masonry" }'>
          {%- endif -%} 
          {%- liquid
              assign search_articles_list = search.results | where: "object_type", "article"
              assign search_collections_list = search.results | where: "object_type", "collection"
              assign search_products_list = search.results | where: "object_type", "product"
              assign search_pages_list = search.results | where: "object_type", "page"
          -%}

          {% if search_products_list != blank %}
          {%- liquid 
            case product_des
              when '1'
                render 'product-grid-item1' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '2'
                render 'product-grid-item2' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '3'
                render 'product-grid-item3' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '4'
                render 'product-grid-item4' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '5'
                render 'product-grid-item5' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '6'
                render 'product-grid-item6' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '7'
                render 'product-grid-item7' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '8'
                render 'product-grid-item8' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
              when '9'
                render 'product-grid-item9' for search_products_list as product, prefix_url: prefix_url, isGrowaveWishlist: isGrowaveWishlist, show_img: show_img, show_vendor: show_vendor, use_link_vendor: use_link_vendor, enable_pr_color: enable_pr_color, show_cl_type: show_cl_type, get_color: get_color, enable_pr_size: enable_pr_size, pr_size_pos: pr_size_pos, get_size: get_size, show_size_type: show_size_type, price_varies_style: price_varies_style, app_review: app_review, enable_rating: enable_rating, use_countdown: use_countdown, imgatt: imgatt, show_list_btns: show_list_btns
            endcase -%}
          {% endif %}
          {%- if search_collections_list != blank -%}
            {%- liquid
              for collection in search_collections_list
                capture current
                  cycle 1, 2, 3, 4
                endcapture
                  render 'collection_item', collection_des: "1",source:source,b_effect:b_effect,img_effect:img_effect, bk_stts: bk_stts,imgatt:imgatt,open_link:open_link,subtitle:subtitle,current:current
              endfor
            -%}
          {%- endif -%}
          {%- if search_articles_list != blank -%}
            {% for article in search_articles_list %}
              <div class="t4s-article-item t4s-search-article-item t4s-col-item" >
                <div class="t4s-article t4s-article-style-1" timeline t4s-reveal="slide-in">
                  <div class="t4s-article-inner">
                    <div class="t4s-article-thumb t4s-relative t4s-oh">
                      {% assign image =  article.image %}
                      <a href="{{ article.url }}" class="t4s-block t4s-eff-img-zoom">
                        <div calc-nav class="t4s-article-img t4s-oh t4s_ratio" style="--aspect-ratioapt:{{ image.aspect_ratio }}">
                          {{ image | image_url: width: image.width | image_tag: loading: 'lazy', width: image.width, height: image.height, class: 't4s-full-image t4s-object-cover t4s-obj-eff md:t4s-block ', sizes: sizes , widths: '375,550,750,1100,1500,1780,1920,2000,3000,3840' }}
                        </div>
                      </a>
                      <div class="t4s-article-label t4s-pa">
                        <div class="t4s-article-category t4s-row-flex">
                          {%- if  section.settings.show_blog_title == 'blog_current' -%}
                            <a class="t4s-text-xs t4s-btn t4s-oh t4s-relative t4s-btn-solid t4s-font-bold" href="{{ blog.url }}"><span>{{ blog.title }}</span></a>
                          {%- else -%}
                            {%- assign article_tags = article.tags | join: ';' | split: ';' -%}
                            {%- assign blog_tags = article_tags | where: 'blog_' -%}
                            {%- for tag in blog_tags -%}
                              <a class="t4s-text-xs t4s-btn t4s-oh t4s-relative t4s-btn-solid t4s-font-bold" href="{{ blog.url }}/tagged/{{ tag | handle }}"><span>{{ tag | remove : 'blog_' | strip }}</span></a>
                            {%- endfor -%}
                          {%- endif -%}
                        </div>
                      </div>
                    </div>
                    <div class="t4s-article-content_wapper">
                      <div class="t4s-article-info t4s-flex t4s-flex-col t4s-align-{{ section.settings.Content_align }}">
                        <h6 class="t4s-article-title t4s-line-clamp t4s-text-lg t4s-font-normal t4s-s-text"><a href="{{ article.url }}">{{ article.title }}</a></h6>
                        <div class="t4s-article-btn">
                            <a href="{{ article.url }}" class="t4s-btn t4s-oh t4s-inline-flex t4s-align-center t4s-justify-center t4s-relative t4s-btn-link t4s-text-base t4s-font-semibold t4s-article-btn__readmore"><span>{{ 'blogs.article.read_more' | t }}</span>
                            </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          {%- endif -%}
          {%- if search_pages_list != blank -%}
            {% for page in search_pages_list %}
              <div class="t4s-page-item t4s-col-item">
                <div class="t4s-page-item-inner t4s-pr">
                  <a href="{{ page.url }}" class="t4s-page-img t4s-d-flex t4s_ratio" {% if section.settings.image_ratio == 'adapt_image' %} style="--aspect-ratioapt: 1"{% endif %}></a>
                    <span class="t4s-page-label t4s-pa t4s-top-0 t4s-right-0">{{ 'search.general.pages_type' | t }}</span>
                    <span class="t4s-img-title t4s-pa t4s-top-0 t4s-left-0 t4s-right-0 t4s-bottom-0 t4s-font-bold t4s-inline-flex t4s-align-center t4s-justify-center">{{ page.title | first }}</span>
                  <a href="{{ page.url }}" class="t4s-page-title t4s-text-lg t4s-font-normal t4s-inline-flex t4s-s-text">{{ page.title }}</a>
                </div>
              </div>
            {% endfor %}
          {%- endif -%}
          </div>
        {%- if paginate.pages > 1 -%}
          <div class="t4s-row t4s-prs-footer t4s-has-btn-{{ use_pagination }} {{ se_stts.btn_pos }}">
            {%- if use_pagination == 'default' -%}
              {%- render 'pagination', paginate: paginate, anchor: '' -%}
            {%- elsif paginate.next.is_link -%}
               <div data-wrap-lm class="t4s-pagination-wrapper t4s-w-100" timeline t4s-reveal="slide-in">
                 {%- if enable_bar_lm -%}
                 <div data-wrap-lm-bar class="t4s-lm-bar t4s-btn-color-{{ se_stts.btns_cl }}">
                   {%- assign current_pr_size = search.results.size | plus: paginate.current_offset -%}
                    <span class="t4s-lm-bar--txt">{{ 'search.pagination.bar_with_count_html' | t: current_count: current_pr_size, total_count: results_count }}</span>
                    <div class="t4s-lm-bar--progress t4s-pr t4s-oh"><span class="t4s-lm-bar--current t4s-pa t4s-l-0 t4s-r-0 t4s-t-0 t4s-b-0" style="width: {{ current_pr_size | times: 100.0 | divided_by: results_count }}%"></span></div>
                 </div>
                 {%- endif -%}
                  <a data-load-more {% if use_pagination == 'infinite' %} data-load-onscroll {% endif %}  href="{{ paginate.next.url }}" class="t4s-pr t4s-loadmore-btn t4s-btn-loading__svg t4s-btn t4s-btn-base t4s-btn-style-{{ se_stts.button_style }} t4s-btn-size-{{ se_stts.btns_size }} t4s-btn-icon-{{ se_stts.btn_icon }} t4s-btn-color-{{ se_stts.btns_cl }} {% if se_stts.button_style == 'default' or se_stts.button_style == 'outline' %}t4s-btn-effect-{{ se_stts.button_effect }}{% endif %}">
                    <span class="t4s-btn-atc_text">{{ 'search.pagination.load_more' | t }}</span> 
                    {% if se_stts.btn_icon %}
                      <svg class="t4s-btn-icon" viewBox="0 0 32 32"><path d="M 15 4 L 15 24.0625 L 8.21875 17.28125 L 6.78125 18.71875 L 15.28125 27.21875 L 16 27.90625 L 16.71875 27.21875 L 25.21875 18.71875 L 23.78125 17.28125 L 17 24.0625 L 17 4 Z"/></svg>
                    {% endif %}
                    <div class="t4s-loading__spinner t4s-dn">
                      <svg  width="16" height="16" aria-hidden="true" focusable="false" role="presentation" class="t4s-svg__spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="t4s-path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle></svg>
                    </div> 
                  </a>
               </div>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endif -%}
    </div>
    <aside data-sidebar-content class="t4s-col-item t4s-col-12 t4s-col-lg-3 t4s-sidebar t4s-dn"><div class="t4s-loading--bg"></div></aside>  
  {{- html_layout[1] -}}
</div>
  
{%- if enable_listing and cart_collection_items_per_row contains 'list_t4s' and search.performed -%}
{%- comment -%}  list_t4s.2.5 is--listview t4s-row-cols-list_t4s t4s-row-cols-md-2 t4s-row-cols-lg-5 {%- endcomment -%}
<script>
  (function() {
    var windowWidth = window.innerWidth,
    onlistview      = {{ collection_items_per_row | json }},
    producSelector  = document.querySelectorAll('#shopify-section-{{ section.id }} .t4s-products')[0],
    classListview   = 'is--listview on--list-',
    classListview2  = classListview;
    
    if ( windowWidth < 768 && onlistview[0] == 'list_t4s' ) {
       classListview = classListview +'mobile';
    } else if ( windowWidth < 1025 && windowWidth > 767 && onlistview[1] == 'list_t4s' ) {
       classListview = classListview +'tablet';
    } else if (windowWidth > 1024 && onlistview[2] == 'list_t4s') { 
       classListview = classListview +'desktop';
    }
    if (classListview != classListview2)
    producSelector.className += ' '+classListview;

 }());
</script>
{%- endif -%}
  
{%- endpaginate -%}
{% schema %}
{
  "name": "Search page",
  "tag": "section",
  "class": "t4s-section t4s-section-main t4s-search-page t4s_tp_istope",
  "settings": [
    {
      "type": "header",
      "content": "1. General options"
    },
    {
      "type": "select",
      "id": "product_des",
      "options": [
        {
          "value": "1",
          "label": "Design 1"
        },
        {
          "value": "2",
          "label": "Design 2"
        },
        {
          "value": "3",
          "label": "Design 3"
        },
        {
          "value": "4",
          "label": "Design 4"
        },
        {
          "value": "5",
          "label": "Design 5"
        },
        {
          "value": "6",
          "label": "Design 6"
        },
        {
          "value": "7",
          "label": "Design 7"
        },
        {
          "value": "8",
          "label": "Design 8"
        },
        {
          "value": "9",
          "label": "Design 9"
        }
      ],
      "label": "Product item design",
      "default": "1"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show product vendors",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "use_cdt",
      "label": "Show product countdown",
      "default": false
    },
    {
      "type": "header",
      "content": "+ Options image products"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image ratio",
      "default": "rationt",
      "info": "Aspect ratio custom will settings in general panel",
      "options": [
        {
          "group": "Natural",
          "value": "ratioadapt",
          "label": "Adapt to image"
        },
        {
          "group": "Landscape",
          "value": "ratio2_1",
          "label": "2:1"
        },
        {
          "group": "Landscape",
          "value": "ratio16_9",
          "label": "16:9"
        },
        {
          "group": "Landscape",
          "value": "ratio8_5",
          "label": "8:5"
        },
        {
          "group": "Landscape",
          "value": "ratio3_2",
          "label": "3:2"
        },
        {
          "group": "Landscape",
          "value": "ratio4_3",
          "label": "4:3"
        },
        {
          "group": "Landscape",
          "value": "rationt",
          "label": "Ratio ASOS"
        },
        {
          "group": "Squared",
          "value": "ratio1_1",
          "label": "1:1"
        },
        {
          "group": "Portrait",
          "value": "ratio2_3",
          "label": "2:3"
        },
        {
          "group": "Portrait",
          "value": "ratio1_2",
          "label": "1:2"
        },
        {
          "group": "Custom",
          "value": "ratiocus1",
          "label": "Ratio custom 1"
        },
        {
          "group": "Custom",
          "value": "ratiocus2",
          "label": "Ratio custom 2"
        },
        {
          "group": "Custom",
          "value": "ratio_us3",
          "label": "Ratio custom 3"
        },
        {
          "group": "Custom",
          "value": "ratiocus4",
          "label": "Ratio custom 4"
        }
      ]
    },
    {
      "type": "select",
      "id": "image_size",
      "label": "Image size",
      "default": "cover",
      "info": "This settings apply only if the image ratio is not set to 'Adapt to image'",
      "options": [
        {
          "value": "cover",
          "label": "Full"
        },
        {
          "value": "contain",
          "label": "Auto"
        }
      ]
    },
    {
      "type": "select",
      "id": "image_position",
      "info": "The first value is the horizontal position and the second value is the vertical. This settings apply only if the image ratio is not set to 'Adapt to image'",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "1",
          "label": "Left top"
        },
        {
          "value": "2",
          "label": "Left center"
        },
        {
          "value": "3",
          "label": "Left bottom"
        },
        {
          "value": "4",
          "label": "Right top"
        },
        {
          "value": "5",
          "label": "Right center"
        },
        {
          "value": "6",
          "label": "Right bottom"
        },
        {
          "value": "7",
          "label": "Center top"
        },
        {
          "value": "8",
          "label": "Center center"
        },
        {
          "value": "9",
          "label": "Center bottom"
        }
      ],
      "label": "Image position",
      "default": "8"
    },
    {
      "type": "select",
      "id": "content_align",
      "label": "Product content align",
      "default": "default",
      "options": [
        {
          "label": "Default",
          "value": "default"
        },
        {
          "label": "Center",
          "value": "center"
        }
      ]
    },
    {
      "type": "range",
      "id": "limit",
      "min": 1,
      "max": 50,
      "step": 1,
      "label": "Maximum products to show",
      "default": 12
    },
    {
      "type": "checkbox",
      "id": "enable_listing",
      "label": "Enable list switch",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_listing_default",
      "label": "Set list view as default",
      "default": false
    },
    {
      "type": "select",
      "id": "col_dk",
      "label": "Items per row",
      "default": "4",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        }
      ]
    },
    {
      "type": "select",
      "id": "col_tb",
      "label": "Items per row (Tablet)",
      "default": "2",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        }
      ]
    },
    {
      "type": "select",
      "id": "col_mb",
      "label": "Items per row (Mobile)",
      "default": "2",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    },
    {
      "type": "select",
      "id": "space_h_item",
      "options": [
        {
          "value": "0",
          "label": "0"
        },
        {
          "value": "2",
          "label": "2px"
        },
        {
          "value": "4",
          "label": "4px"
        },
        {
          "value": "6",
          "label": "6px"
        },
        {
          "value": "8",
          "label": "8px"
        },
        {
          "value": "10",
          "label": "10px"
        },
        {
          "value": "15",
          "label": "15px"
        },
        {
          "value": "20",
          "label": "20px"
        },
        {
          "value": "30",
          "label": "30px"
        }
      ],
      "label": "Space horizontal items",
      "default": "30"
    },
    {
      "type": "select",
      "id": "space_v_item",
      "options": [
        {
          "value": "0",
          "label": "0"
        },
        {
          "value": "2",
          "label": "2px"
        },
        {
          "value": "4",
          "label": "4px"
        },
        {
          "value": "6",
          "label": "6px"
        },
        {
          "value": "8",
          "label": "8px"
        },
        {
          "value": "10",
          "label": "10px"
        },
        {
          "value": "15",
          "label": "15px"
        },
        {
          "value": "20",
          "label": "20px"
        },
        {
          "value": "30",
          "label": "30px"
        }
      ],
      "label": "Space vertical items",
      "default": "30"
    },
    {
      "type": "select",
      "id": "space_h_item_mb",
      "options": [
        {
          "value": "0",
          "label": "0"
        },
        {
          "value": "2",
          "label": "2px"
        },
        {
          "value": "4",
          "label": "4px"
        },
        {
          "value": "6",
          "label": "6px"
        },
        {
          "value": "8",
          "label": "8px"
        },
        {
          "value": "10",
          "label": "10px"
        },
        {
          "value": "15",
          "label": "15px"
        },
        {
          "value": "20",
          "label": "20px"
        },
        {
          "value": "30",
          "label": "30px"
        }
      ],
      "label": "Space horizontal items (Mobile)",
      "default": "10"
    },
    {
      "type": "select",
      "id": "space_v_item_mb",
      "options": [
        {
          "value": "0",
          "label": "0"
        },
        {
          "value": "2",
          "label": "2px"
        },
        {
          "value": "4",
          "label": "4px"
        },
        {
          "value": "6",
          "label": "6px"
        },
        {
          "value": "8",
          "label": "8px"
        },
        {
          "value": "10",
          "label": "10px"
        },
        {
          "value": "15",
          "label": "15px"
        },
        {
          "value": "20",
          "label": "20px"
        },
        {
          "value": "30",
          "label": "30px"
        }
      ],
      "label": "Space vertical items (Mobile)",
      "default": "10"
    },
    {
      "type": "select",
      "id": "layout_des",
      "options": [
        {
          "value": "1",
          "label": "Grid"
        },
        {
          "value": "2",
          "label": "Masonry"
        }
      ],
      "label": "Layout design",
      "default": "1"
    },
    {
      "type": "header",
      "content": "Pagination options"
    },
    {
      "type": "select",
      "id": "use_pagination",
      "label": "Pagination",
      "default": "default",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "load-more",
          "label": "'Load more' button"
        },
        {
          "value": "infinite",
          "label": "Infinit scrolling"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "enable_bar_lm",
      "label": "Enable progress bar?",
      "info": "Only active when you use 'Load more' or 'Infinit scrolling'",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "Page-loading speed is everything for good user experience. Multiple researches have shown that slow load times result in people leaving your site or delete your app which result in low conversion rates. And that’s bad news for those who use an infinite-scrolling. The more users scroll down a page, more content has to load on the same page. As a result, the page performance will increasingly slow down."
    },
    {
      "type": "paragraph",
      "content": "Another problem is limited resources of the user’s device. On many infinite scrolling sites, especially those with many images, devices with limited resources (such as mobile devices or tablets with dated hardware) can start slowing down because of the sheer number of assets it has loaded."
    },
    {
      "type": "paragraph",
      "content": "Therefore, we recommend that you only use 'Load more', 'Infinite scrolling' for when your collection is less than or equal to 400 products"
    },
    {
      "type": "checkbox",
      "id": "btn_icon",
      "label": "Enable button icon",
      "default": false
    },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        {
          "label": "Default",
          "value": "default"
        },
        {
          "label": "Outline",
          "value": "outline"
        },
        {
          "label": "Bordered bottom",
          "value": "bordered"
        },
        {
          "label": "Link",
          "value": "link"
        }
      ]
    },
    {
      "type": "select",
      "id": "btns_size",
      "label": "Button size",
      "default": "large",
      "options": [
        {
          "label": "Small",
          "value": "small"
        },
        {
          "label": "Extra-mall",
          "value": "extra-small"
        },
        {
          "label": "Medium",
          "value": "medium"
        },
        {
          "label": "Extra-medium",
          "value": "extra-medium"
        },
        {
          "label": "Large",
          "value": "large"
        },
        {
          "label": "Extra large",
          "value": "extra-large"
        }
      ]
    },
    {
      "type": "select",
      "id": "btns_cl",
      "label": "Button color",
      "default": "dark",
      "options": [
        {
          "value": "light",
          "label": "Light"
        },
        {
          "value": "dark",
          "label": "Dark"
        },
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "custom1",
          "label": "Custom color 1"
        },
        {
          "value": "custom2",
          "label": "Custom color 2"
        }
      ]
    },
    {
      "type": "select",
      "id": "button_effect",
      "label": "Button hover effect",
      "default": "default",
      "info": "Only working button style default, outline",
      "options": [
        {
          "label": "Default",
          "value": "default"
        },
        {
          "label": "Fade",
          "value": "fade"
        },
        {
          "label": "Rectangle out",
          "value": "rectangle-out"
        },
        {
          "label": "Sweep to right",
          "value": "sweep-to-right"
        },
        {
          "label": "Sweep to left",
          "value": "sweep-to-left"
        },
        {
          "label": "Sweep to bottom",
          "value": "sweep-to-bottom"
        },
        {
          "label": "Sweep to top",
          "value": "sweep-to-top"
        },
        {
          "label": "Shutter out horizontal",
          "value": "shutter-out-horizontal"
        },
        {
          "label": "Outline",
          "value": "outline"
        },
        {
          "label": "Shadow",
          "value": "shadow"
        }
      ]
    },
    {
      "type": "select",
      "id": "btn_pos",
      "label": "Button position",
      "default": "t4s-text-center",
      "options": [
        {
          "value": "t4s-text-start",
          "label": "Left"
        },
        {
          "value": "t4s-text-center",
          "label": "Center"
        },
        {
          "value": "t4s-text-end",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "2. Design options"
    },
    {
      "type": "select",
      "id": "layout",
      "default": "t4s-container-wrap",
      "label": "Layout",
      "options": [
        {
          "value": "t4s-se-container",
          "label": "Container"
        },
        {
          "value": "t4s-container-wrap",
          "label": "Wrapped container"
        },
        {
          "value": "t4s-container-fluid",
          "label": "Full width"
        }
      ]
    },
    {
      "type": "color",
      "id": "cl_bg",
      "label": "Background"
    },
    {
      "type": "color_background",
      "id": "cl_bg_gradient",
      "label": "Background gradient"
    },
    {
      "type": "image_picker",
      "id": "image_bg",
      "label": "Background image"
    },
    {
      "type": "text",
      "id": "mg",
      "label": "Margin",
      "info": "Margin top, margin right, margin bottom, margin left. If you not use to blank",
      "default": ",,50px,",
      "placeholder": ",,50px,"
    },
    {
      "type": "text",
      "id": "pd",
      "label": "Padding",
      "info": "Padding top, padding right, padding bottom, padding left. If you not use to blank",
      "placeholder": "50px,,50px,"
    },
    {
      "type": "header",
      "content": "+ Design Tablet Options"
    },
    {
      "type": "text",
      "id": "mg_tb",
      "label": "Margin",
      "placeholder": ",,50px,"
    },
    {
      "type": "text",
      "id": "pd_tb",
      "label": "Padding",
      "placeholder": ",,50px,"
    },
    {
      "type": "header",
      "content": "+ Design mobile options"
    },
    {
      "type": "text",
      "id": "mg_mb",
      "label": "Margin",
      "default": ",,30px,",
      "placeholder": ",,50px,"
    },
    {
      "type": "text",
      "id": "pd_mb",
      "label": "Padding",
      "placeholder": ",,50px,"
    }
  ],
  "blocks": [
    {
      "type": "sortby",
      "name": "Sortby",
      "limit": 1
    },
    {
      "type": "layout",
      "name": "Layout switch",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Not working with layout masonry"
        }
      ]
    },
    {
      "type": "filter",
      "name": "Filter",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "style_filters",
          "label": "Filter style will show after click button filter ( desktop )",
          "default": "sidebar",
          "options": [
            {
              "value": "sidebar",
              "label": "Hidden sidebar"
            },
            {
              "value": "area",
              "label": "Filters area"
            }
          ]
        },
        {
          "type": "paragraph",
          "content": "On mobile always use hidden sidebar"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "filter"
      },
      {
        "type": "layout"
      },
      {
        "type": "sortby"
      }
    ]
  }
}
{% endschema %}