<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />

    <div class="row" id="product" data-id="{{product.id}}" data-handle="{{product.handle}}">
    <div class="large-6 medium-6 small-12 columns">

    <!-- No Javascript Fallback for Image -->
        <noscript><img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ link.object.title | escape  }}" class="product-image"></noscript>

    <!-- Product Image Slider -->
    <div id="product-slider" class="flexslider clearfix">
        <ul class="slides">
          {% for image in product.images %}
            <li>
                <div class="image-wrapper ratio_16-9">
                  <img class="b-lazy product-image"
                    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="{{ image | product_img_url: 'grande' }}"
                    alt="{{ product.title | escape  }}"
                  />
                </div>
            </li>
          {% endfor %}
        </ul>
    </div>

    <!-- Product Thumbnails -->
    <div id="product-thumbs" class="flexslider clearfix">
        <ul class="clearfix">
            {% for image in product.images %}
                {% if product.images.size > 1 %}
                    <li class="clearfix">
                        <img class="b-lazy product-image"
                        src="{{ 'placeholder.png' | asset_url }}"
                        data-src="{{ image | product_img_url: 'medium' }}"
                        alt="{{ product.title | escape  }}"
                        />
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>

    </div><!-- large-7 -->

      <div class="large-6 medium-6 small-12 columns product-info">
          <form action="/cart/add" method="post" enctype="multipart/form-data">

            <div id="product-details">

              <p class="sku">{{ product.variants.first.sku }}</p>

              <h1 itemprop="name">{{ product.title }}</h1>


              <div class="row clearfix">
                <div class="large-6 medium-6 small-12 columns left">
                    {% if product.tags contains 'Fall14' %}
                    <span class="new-icon">{{ 'new.gif' | asset_url | img_tag: 'New' }}</span>
                    {% endif %}

                    <!-- Product Color -->
                    <p class="product-color">{% include 'product-color' %}</p>
                </div>
                <div class="large-6 medium-6 small-12 columns right">
                <!-- Price -->
                    <div id="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                        <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
                  {% if product.available %}
                              <link itemprop="availability" href="http://schema.org/InStock" />
                              {% else %}
                              <link itemprop="availability" href="http://schema.org/OutOfStock" />
                          {% endif %}
                              {% if product.compare_at_price > product.price %}
                          <span class="product-price on-sale" itemprop="price">{{ product.price | money }}</span>&nbsp;<del class="product-compare-price">{{ product.compare_at_price_max | money }}</del>
                          {% else %}
                          <span class="product-price" itemprop="price">{{ product.price | money }}</span>
                      {% endif %}
                    </div>

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

                  <div id="product-variants" class="{% if hide_default_title %} hidden{% endif %}">
                       <select id="product-select" name="id" class="hidden">
                       {% for variant in product.variants %}
                         <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                       {% endfor %}
                       </select>
                  </div>
                </div>
              </div>

            <div class="row clearfix">
                <div class="large-6 medium-5 small-12 columns left">
                    <!-- Add to Cart -->
                    <div id="product-add">
                        <input class="submit-add-to-cart large button" type="submit" value="Add To Cart" />
                    </div>
                </div>

                <div class="large-6 medium-7 small-12 columns right">
                    <!-- Social Media Icons -->
                    {% include 'social-media' %}
                </div>

              </div>

            <section class="product-description detail clearfix">
                <a class="title">Detail</a>
                <div class="content" data-section-content>
                      {{ product.description }}
                </div>
            </section>

            <section class="product-description detail clearfix hide-for-small">
                <a class="title" href="#product-features-anchor">View Features</a>
            </section>

            <dl class="product-description accordion" data-accordion>

                  <dd class="accordion-navigation">
                    <a class="title" href="#similar-styles">Similar Styles</a>
                    <div id="similar-styles" class="content {% unless shop.name contains 'staging' %}active{% endunless %}">
                        <ul class="color">
                          {% if collection %}
                            {% capture currentCol %}{{ collection.handle }}{% endcapture %}
                                {% for collection in product.collections %}
                                  {% if product.title == collection.title %}
                                    {% for p in collection.products %}
                                     <li style="display:inline;"><a href="/collections/{{ currentCol }}{{ p.url }}" title="{{ p.featured_image.alt | escape }}"><img src="{{ p.images[0] | product_img_url: 'small' }}" /></a></li>
                                    {% endfor %}
                                  {% endif %}
                                {% endfor %}
                          {% else %}
                            {% for collection in product.collections %}
                              {% if product.title == collection.title %}
                              {% for p in collection.products %}
                                <li style="display:inline;"><a href="{{ p.url | within: collection }}" title="{{ p.featured_image.alt | escape }}"><img src="{{ p.images[0] | product_img_url: 'thumb' }}" /></a></li>
                                {% endfor %}
                              {% endif %}
                              {% endfor %}
                          {% endif %}
                        </ul>
                    </div>
                  </dd>
                  <dd class="accordion-navigation">
                    <a class="title" href="#warranty-info">Warranty</a>
                    <div id="warranty-info" class="content">
                      <p>The Herschel Supply Co offers a limited one-year warranty that guarantees all products to be free of manufacturer defects in material and workmanship starting on the date of purchase from an authorized retailer. Herschel Supply will replace any products found to be defective within the range of common and everyday use. Our warranty does not apply to damage caused by accidents and/or wear and tear.</p>

                       <!-- <a class="read-more" target="_blank" href="http://www.herschelsupply.com/contact/#warranty">Read More</a> -->
                    </div>
                  </dd>
                  <dd class="accordion-navigation">
                    <a class="title" href="#shipping-info">Shipping</a>
                    <div id="shipping-info" class="content">
                      <p>Estimated shipping times throughout North America:</p>
                    <table style="width:100%;">
                        <thead>
                            <tr>
                            <th width="200">Order Value</th>
                            <th>Standard<br />
                            (4-10 Business Days)</th>
                            <th width="150">Express<br />
                            (2-3 Business Days)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            <td>Up to $100</td>
                            <td>$9.95</td>
                            <td>$25.00</td>
                            </tr>
                            <tr>
                            <td>$100 and Over</td>
                            <td>Free</td>
                            <td>$25.00</td>
                            </tr>
                        </tbody>
                    </table>

                      <!-- <a class="read-more" target="_blank" href="http://www.herschelsupply.com/contact/#shipping">Read More</a> -->
                    </div>
                  </dd>
            </dl>

            <!-- Insert Breadcrumbs Snippet -->
            {% include 'breadcrumbs' %}

            </div><!-- #product-details -->

          </form>
      </div><!-- .product-info -->
  </div><!-- #product -->

</div>

<!-- Product Features -->
<div class="product-features hide-for-small">
    <ul class="product-icons clearfix">
      {% include 'product-icons' %}
    </ul>
</div>

{% comment %}
<!-- Related Products don't work with Backbone.js because of a document.ready call -->
<div class="row related">
    <div class="large-12 columns">
      <h5 class="text-center">You May Also Like</h5>
      <div recomatic="product" shop="{{shop.permanent_domain}}" product_id="{{product.id}}"></div>
    </div>
</div>
{% endcomment %}

{% if product.available %}{% if product.variants.size > 1 %}
<script type="text/javascript">

    // <![CDATA[
    var selectCallback = function(variant, selector) {
        if (variant && variant.available == true) {
            $("input#add").removeClass("disabled").removeAttr("disabled");
            $("h2#price span").html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
            if ($("h2#price del").length > 0) {
                $("h2#price del").html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"));
            };
        } else {
            $("input#add").addClass("disabled").attr("disabled", "disabled");
            var message = variant ? "Sold Out" : "Unavailable";
            $("h2#price span").text(message);
            if ($("h2#price del").length > 0) { $("h2#price del").text(""); };
        }
    };
    $(function() {
        new Shopify.OptionSelectors("id", { product: {{ product | json }}, onVariantSelected: selectCallback });
    });
    // ]]>
</script>
{% endif %}{% endif %}