{% assign _item_effect = settings.product_item_hover_effect %}

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

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

  <div class="product-inner-wrapper">
    
    {% if _item_effect == 'swatch' and product.variants.size > 1 %}
      <div class="product-swatch-images">
        <div class="bxslider">
          {% include 'swatch-color' %}
        </div>   
      </div>
    {% endif %}

    <div class="product-head">
      {% include 'product-button' %}
      
      <div class="product-image">

        {% capture _image_html %}
        {{ product.featured_image | product_img_url: '420x' }}
        {% 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: '300x' }}" alt="{{ product.title | escape }}" />    
              </span>
            {% endif %}
            
            
          </a>
        </div>

      </div>
    </div>
    {% include 'product-label' %}

    <div class="product-content text-{{ text_align }}">
      <div class="pc-inner">

        <div class="product-group-vendor-name">
          {% 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>

        {% if settings.show_product_review %}  
          <div class="product-review">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </div>
        {% endif %}
    

        {% if section.settings.meta_description_excerpt %}
          {% assign meta_shortdes = product.metafields.c_f %}
          {% assign key = 'description_excerpt' %}

          {% unless meta_shortdes.description_excerpt == blank %}
            <div class="product-description">{{ meta_shortdes.description_excerpt }}</div>
          {% endunless %}
        {% endif %}
        
        <div class="price-cart-wrapper">
          {% include 'product-price' %}

          {% assign meta_shortdes = product.metafields.c_f %}
          {% assign key = 'description_excerpt' %}

          {% unless meta_shortdes.description_excerpt == blank %}
          <div class="product-des-list">{{ meta_shortdes.description_excerpt }}</div>
          {% endunless %}

          <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></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></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></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-chrom-online-shopping-cart"></span></a>
              {% endunless %}

            {% endunless %}
          </div>

        </div> 
      </div>
    </div>  
  </div>

</div>

