<!-- SELL BUTTON STYLE -->

 
{% if settings.sale_button_option == "sale_button_option_one" %}

	{% assign sale_box_opt = "sale_wheel" %}

{% elsif settings.sale_button_option == "sale_button_option_two" %}

	{% assign sale_box_opt = "sale_wheel-two" %}

{% elsif settings.sale_button_option == "sale_button_option_three" %}

	{% assign sale_box_opt = "sale_wheel-three" %}

{% endif %} 

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
	{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
	{% assign sold_out = false %}
{% endif %}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %} sale-sold">

  {% if on_sale %}
  {% unless  sold_out %} 
  {% if settings.sale_button_option == "sale_button_option_two" %}
  <div class="sale_btn_2">
    <p class="{{ sale_box_opt  }}"></p>
   {% else %}
  <p class="{{ sale_box_opt  }}">
  {% endif %}
    {% assign sale = product.compare_at_price | minus:  product.price | times: 100.0  %}
    {% assign  sale = sale | divided_by:  product.compare_at_price | round %}
    <strong>{{sale}}{{ 'products.product.on_save' | t }} </strong> 
  {% if settings.sale_button_option == "sale_button_option_two" %}  
  </div>
  {% elsif settings.sale_button_option == "sale_button_option_four" %}
  </div>
  {% else %}
   </p>
  {% endif %}
  {% endunless %}
  {% endif %}

  {% if sold_out %}
{% if settings.sale_button_option == "sale_button_option_two" %}
<div class="sale_btn_2">
  <p class="{{ sale_box_opt  }}"></p>
  {% elsif settings.sale_button_option == "sale_button_option_four" %}
  <div class="sale_btn_4">
    <p class="{{ sale_box_opt  }}"></p>
    {% else %}
    <p class="{{ sale_box_opt }} sld-out">
      {% endif %}
      <strong>{{ 'collections.tag.sold_out_text' | t }}</strong>
    
    {% if settings.sale_button_option == "sale_button_option_two" %}  
  </div>
  {% elsif settings.sale_button_option == "sale_button_option_four" %}
</div>
{% else %}
</p>
{% endif %}
  {% endif %}   
  
  <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url }}">
    {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
    {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
    {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

    {% unless product.featured_image == blank %}
      {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
    {% endunless %}

    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
             class="grid-view-item__image lazyload"
             src="{{ product.featured_image | img_url: '300x300' }}"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>

    <noscript>
      {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
      <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
    </noscript>

    <div class="subheading grid-view-item__title">{{ product.title }}</div>
    {% if section.settings.show_vendor %}
      <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
    
    <div class="grid-view-item__meta">
      {% include 'product-price' %}
    </div>
  </a>
  {% include 'banana-stand-product-list-container' %}
</div>

