{% if _tab_style == '1' %}
  {%- assign _class = 'col-lg-3 col-md-3 col-sm-12' -%}
  {%- assign _center_class = 'col-lg-6 col-md-6 col-sm-12' -%}
{% else %}
  {%- assign _class = 'col-lg-3 col-md-3 col-sm-12' -%}
  {%- assign _center_class = 'col-lg-6 col-md-6 col-sm-12' -%}
{% endif %}

<div class="row">
  <div class="wrap-grid-item {{ _class }}">
    <div class="row">
      {% unless block.settings.collection == blank or collection.products_count == 0 %}
        {% for product in collection.products limit: 2 %}
          <div class="col-lg-12 col-md-12 col-sm-6 col-6">
            {% include 'product-item' %}
          </div>
        {% endfor %}
      
      {% else %}
        {{ emptyProduct02 }}
      {% endunless %}
    </div>
  </div>

  <div class="big-grid-item {{ _center_class }}">
    {% assign _item_effect = settings.product_item_hover_effect %}

    {% if text_align == blank %}
      {% assign text_align = settings.text_align_product_item %}
    {% endif %}

    {%- assign product = all_products[_product] -%}
    {%- assign _expire = block.settings.product_expire -%}
    {%- assign _dueDate = _expire | split: '/' -%}

    <div class="product-wrapper effect-none {% if settings.use_quick_view == blank and  settings.enable_product_wishlist == blank %}none-product-button{% endif %}">

      <div class="product-head">

        <div class="special-product-label">
          <span class="spl-1"><strong>{{ 'products.big_product.text_special' | t }}</strong>{{ 'products.big_product.text_offer' | t }}</span>

          {% if product.variants.first.price < product.variants.first.compare_at_price %}
            <span class="spl-2">
              <span class="spl-text-2">
                <span class="text">{{ 'products.big_product.text_save' | t }}</span>
                {%- assign percent_off = product.variants.first.price | times:100.00 | divided_by: product.variants.first.compare_at_price | round -%}
                <span class="percent">{{ 100 | minus : percent_off }}%</span>
              </span>
            </span>
          {% endif %}

        </div>
        
        {% if settings.show_product_vendor %}<div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>{% endif %}
		<h5 class="product-name"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h5>
        
        <div class="product-image">
          {% capture _image_html %}{{ product.featured_image | product_img_url: '600x' }}{% endcapture %}

          {% capture number_of_images %}{{ product.images | size }}{% endcapture %}
          {% assign number_images = number_of_images | plus:0 %}

          <div class="featured-img{% if number_images > 1 and _item_effect == 'switch' %} switch-image{% endif %}{% if _lazyload %} lazyload waiting{% endif %}">
            <a href="{{ product.url | within: collection }}"> 
              <img class="featured-image front{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{% if product.images.size >= 1%}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />

              {% if number_images > 1 %}
                <span class="img-back d-none d-lg-block">
                  <img class="back{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ product.images[1]| product_img_url: '600x' }}" alt="{{ product.title | escape }}" />    
                </span>		
              {% endif %}
            </a>  
          </div>

        </div>
      </div>

      <div class="product-content text-center">
        <div class="pc-inner">
          <div class="price-cart-wrapper">
            {% include 'product-price' %}

            <div class="product-add-cart">
              {% unless product.template_suffix == 'redirect' %}

                {% if settings.disable_ajax_cart %}
                  <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span>{{ 'products.product.select_options' | t }}</a>

                {% else %} 
                  {% if product.variants.size > 1 %}
                    <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span>{{ 'products.product.select_options' | t }}</a>

                  {% else %}
                    {% if product.available %}
                      <form action="/cart/add" method="post" enctype="multipart/form-data">
                        <a href="javascript:void(0)" class="btn-add-cart add-to-cart" title="{{ 'products.product.add_to_cart' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span>{{ 'products.product.add_to_cart' | t }}</a>
                        <select class="d-none" name="id">
                          {% for variant in product.variants %}
                            <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
                          {% endfor %}
                        </select>
                      </form>
                    {% endif %}

                  {% endif %}

                {% endif %}

              {% else %}
                {% assign meta_redirect = product.metafields.c_f %}
                {% assign key = 'redirect_url' %}

                {% unless meta_redirect.redirect_url == blank %}
                  <a target="_blank" rel="noopener" href="{{ meta_redirect.redirect_url }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-add-to-cart"></span>{{ 'products.product.select_options' | t }}</a>
                {% endunless %}

              {% endunless %}
            </div>
          </div>

          {% include 'product-button' %}

        </div>
      </div>

    </div>
  </div>

  <div class="wrap-grid-item {{ _class }}">
    <div class="row">
      {% unless block.settings.collection == blank or collection.products_count == 0 %}
        {% for product in collection.products offset: 2 limit: 2 %}
          <div class="col-lg-12 col-md-12 col-sm-6 col-6">
            {% include 'product-item' %}
          </div>
        {% endfor %}
      
      {% else %}
        {{ emptyProduct02 }}
      {% endunless %}
    </div>
  </div>
</div>
