<div class="col-lg-4 col-md-6 col-sm-12 col-12{% if _product_sb_placement == 'left' %} left-side{% else %} right-side{% endif %}">
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 

    <div id="product-info" class="product-info">

      <div class="product-info-inner">
        
        {% if settings.show_discount_popup %}
          {% assign _meta_discount_percent = product.metafields.c_f %}
          {% assign _meta_discount_code = product.metafields.c_f %}
          {% assign key = 'discount_code' %}

          {% unless _meta_discount_code.discount_code == blank %}
            <div class="hide">
              <a href="/discount/{{ _meta_discount_code.discount_code }}?redirect={{ product.url }}" class="btn-discount-code btn btn-1">
                {% if _meta_discount_percent.discount_percent == blank %}
                  Get my 10% offer now
                {% else %}
                  Get my {{ _meta_discount_percent.discount_percent }} offer now
                {% endif %}
              </a>
            </div>
          {% endunless %}
        {% endif %}
        
        <div class="unnamed-class" style="background-color: {{ section.settings.prod_content_bg_color }};"> 

          {% 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="short-description">{{ meta_shortdes.description_excerpt }}</div>
            {% endunless %}
          {% endif %}

          {% assign hide_default_title = false %}

          {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
            {% assign hide_default_title = true %}
          {% endif %}

          <div class="group-cw clearfix">
            
            {% form 'product', product, class:'product-form product-action variants' %}

              <div id="product-action-{{ product.id }}"  class="options">

                {% assign _swatches_size = 0 %} 
                {% assign _swatches_color = 0 %}
                {% assign _swatches_colour = 0 %}

                {% for option in product.options %}
                  {% assign _option = option | downcase %}

                  {% if section.settings.show_swatches_color and _option == "color" %}
                    {% assign _swatches_color = 1 %}
                  {% endif %}

                  {% if section.settings.show_swatches_color and _option == "colour" %}
                    {% assign _swatches_colour = 1 %}
                  {% endif %}

                  {% if section.settings.show_swatches_size and _option == "size" %}
                    {% assign _swatches_size = 1 %} 
                  {% endif %}
                {% endfor %}

                <div class="variants-wrapper{% if _swatches_color == 1 or _swatches_colour == 1 %} show-swatches-color{% endif %}{% if _swatches_size == 1 %} show-swatches-size{% endif %} clearfix"> 
                  <select id="product-select-{{ product.id }}" name="id" style="display:none;">
                    {% for variant in product.variants %}

                      {% if variant.available %}
                        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>

                      {% else %}
                        <option disabled="disabled">
                          {{ variant.title }} - {{'products.product.sold_out' | t }}
                        </option>

                      {% endif %}

                    {% endfor %}
                  </select>
                </div>

                {% if section.settings.show_swatches_color %}
                  {% if product.variants.size > 1 %}

                    {% if _swatches_color == 1 %}
                      {% include 'swatch' with 'Color' %}
                    {% endif %}

                    {% if _swatches_colour == 1 %}
                      {% include 'swatch' with 'Colour' %}
                    {% endif %}

                  {% endif %} 
                {% endif %}

                {% if section.settings.show_swatches_size %}
                  {% if product.variants.size > 1 %}

                    {% if _swatches_size == 1 %}
                      {% include 'swatch' with 'Size' %}
                    {% endif %}

                  {% endif %}
                {% endif %}

              </div>

              <div class="pre-order">
                <a href="#pre-order-popup" class="btn-pre-order btn btn-1">{{ 'products.product.pre_order' | t }}</a>
                <div class="pre-order-success hide" style="margin-top: 10px;">{{ 'products.product.pre_order_alert' | t }}</div>
              </div>

              {% if section.settings.meta_countdown_timer and product.available %}
                {% include 'product-detail-deals' %}
              {% endif %} 
            
            {% endform %}
 
          </div>

          <div id="pre-order-popup" style="display: none;">
            {% form 'contact' %}

            <span class="alert-pre-order{% if form.posted_successfully? %} success{% endif %}"></span>

            <div id="pre-order-form">

              <div class="form-group">
                <label for="name">{{'contact.form.name' | t }}</label>
                <input type="text" id="name" class="form-control" value="" name="contact[name]">
              </div>

              <div class="form-group">
                <label for="name">{{'contact.form.email' | t }}</label>
                <input required="" type="email" id="email" class="form-control" value="" name="contact[email]">
              </div>

              <div class="form-group">
                <label for="name">{{'contact.form.phone' | t }}</label>
                <input type="text" id="phone" class="form-control" value="" name="contact[phone]">
              </div>

              <div class="form-group">
                <label for="name">Product Name</label>
                <input id="product_name" class="form-control" value="{{ product.title }}" name="contact[product_name]" />
              </div>

              <div class="form-group">
                <label for="name">{{'contact.form.message' | t }}</label>
                <textarea required="" id="message" class="form-control" name="contact[body]"></textarea>
              </div>

              <div class="form-actions">
                <button type="submit" class="btn btn-1">{{ 'products.product.pre_order' | t }}</button>
              </div>
            </div>

            {% endform %}
          </div>

          <script>
            jQuery(document).ready(function($) { 
              $(".pre-order a").fancybox({
                'autoDimensions': false
                ,'width'    : 650                  
                ,'autoSize'   : false
              });

              if($('.alert-pre-order').hasClass('success')){
                $('.pre-order-success').removeClass('hide');
              }
            });
          </script>

          {% if settings.enable_product_wishlist %}	
            <a href="javascript:void(0)" class="add-to-wishlist add-product-wishlist" data-handle-product="{{product.handle}}" title="{{ 'products.product.add_to_wishlist' | t }}"><i class="demo-icon {{ settings.wishlist_font_icon }}"></i>{{ 'products.product.add_to_wishlist' | t }}</a>
          {% endif %}

          {% if settings.enable_product_compare %}
            <a href="javascript:void(0)" class="add-to-compare add-product-compare" data-handle-product="{{product.handle}}"{% if customer %} data-user="{{ customer.id }}"{% endif %} title="{{ 'products.product.add_compare' | t }}"><i class="demo-icon {{ settings.compare_font_icon }}"></i>{{ 'products.product.add_compare' | t }}</a>
          {% endif %}

          {% if section.settings.show_product_collections and product.collections.size > 0 %}
            <div class="category">
              <span>{{ 'products.product.category' | t }}</span>
              {% for p_col in product.collections %}
                <a href="{{ p_col.url }}">{{ p_col.title }}{% unless forloop.last %},{% endunless %}</a>
              {% endfor %}
            </div>
          {% endif %}
  
        </div>
          
        {% if section.settings.show_policies %}
          <div class="product-policy-wrapper" style="background-color: {{ section.settings.prod_content_bg_color }};">
            <ul class="product-policy-inner">
              {% for block in section.blocks %}
                {% if block.type == 'policy' %}
                    {% assign _icon_type = block.settings.icon_type %}
                    {% assign _icon_image = block.settings.icon_image %}
                    {% assign _icon_classname = block.settings.icon_classname %}
                    {% assign _icon_title = block.settings.icon_title %}

                    <li class="policy-item">
                      {% if _icon_type == 'image' %}
                        {% unless _icon_image == blank %}
                          <img src="{{ _icon_image | img_url: '40x' }}">
                        {% endunless %}  
                      {% else %}
                        {% unless _icon_classname == blank %}
                          <i class="{{ _icon_classname }}"></i>
                        {% endunless %}  
                      {% endif %}

                      {% unless _icon_title == blank %}<p>{{ _icon_title }}</p>{% endunless %}
                    </li>
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        {% endif %}

        {% if settings.show_social_sharing_product %}
          {% include 'social-sharing' %}
        {% endif %} 
      </div>
    </div>

  </div>
</div>