{% comment %}
** Product - default view **
- Product template
{% endcomment %}

{% comment %}
Find intersection between product tags and allowed tags generate contextual links for soup types.
{% endcomment %}
{% assign allowed_tags = 'Vegan,Vegetarian,Paleo,Nut Free,Gluten Free,Dairy Free' | split: ',' %}
{% assign found_tags = '' %}
{% if product.type == 'Bundle' %}
	{% assign isBundleType = true %}
	{% assign bundleSettings = product.metafields.variant.bundle_settings.value %}
{% endif %}
{% for altag in allowed_tags %}
  {% for tag in product.tags %}
    {% if tag == altag %}
      {% assign found_tags = found_tags | append: tag | append: '|' %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% assign found_tags = found_tags | split: '|' %}

<a name="pagecontent" id="pagecontent" style='padding: 0;'></a>
<div class="container main content product-name--{{ product.handle }}">{% render 'preorder-now-collection-item', product: product %}
  <div class="sixteen columns" style="display: none">
    {% if collection.previous_product or collection.next_product or section.settings.product_breadcrumb %}
      <div class="clearfix breadcrumb-collection">
        {% if collection.previous_product or collection.next_product %}
          <div class="nav_arrows breadcrumb_text">
            {% if collection.previous_product %}
              <a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
            {% endif %}
            {% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}

            {% if collection.next_product %}
              <a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
            {% endif %}
          </div>
        {% endif %}

        {% if section.settings.product_breadcrumb %}
          <div class="breadcrumb_text" itemscope itemtype="http://schema.org/BreadcrumbList">
            <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item" class="breadcrumb_link">
                <span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span>
              </a>
              <meta itemprop="position" content="1" />
            </span>
            <span class="breadcrumb-divider">/</span>
            <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              {% if collection %}
                <a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item" class="breadcrumb_link">
                  <span itemprop="name">{{ collection.title }}</span>
                  <meta itemprop="position" content="2" />
                  </a>
              {% else %}
                <a href="/collections/all" title="{{ collections.all.title }}" itemprop="item" class="breadcrumb_link">
                  <span itemprop="name">{{ collections.all.title }}</span>
                  <meta itemprop="position" content="2" />
                </a>
              {% endif %}
            </span>
            <span class="breadcrumb-divider">/</span>
            <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a href="{{ product.url }}" itemprop="item" class="breadcrumb_link">
                <span itemprop="name">{{ product.title }}</span>
                <meta itemprop="position" content="3" />
              </a>
            </span>
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>

  {% comment %}Check to see if sidebar should be enabled{% endcomment %}
  {% if section.blocks.size > 0 %}
    {% assign sidebar = true %}
  {% else %}
    {% assign sidebar = false %}
  {% endif %}

  <div class="product clearfix">
    {% if sidebar %}
      {% include 'sidebar' %}
      <div class="twelve columns medium-down--one-whole sidebar--{{ sidebar }}">
    {% else %}
      <div class="sixteen columns">
    {% endif %}

    <div  class="product-{{ product.id }}"
          data-free-text="{{ settings.free_price_text }}"
    >
      <div id="product-details" class="section product_section clearfix js-product_section {% if section.settings.product_images_position == 'right' %}align_right--images{% endif %}" itemscope itemtype="http://schema.org/Product" data-rv-handle="{{ product.handle }}">

        <div class="nine columns medium-down--one-whole {% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}">
          {% include 'product-images' %}
        </div>

        <div class="seven columns medium-down--one-whole  {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">

          {% assign collection_handles = product.collections | map: 'handle' %}
          {% assign variant = product.selected_or_first_available_variant %}

          {% if product.available %}
            {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
              <div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
            {% endif %}
          {% endif %}
          {% if collection_handles contains 'new' %}
            <div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
          {% endif %}
          {% if collection_handles contains 'pre-order' %}
            <div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
          {% endif %}

           {% if section.settings.display_vendor %}
            <p class="vendor">
              <span itemprop="brand" class="vendor">{{ product.vendor | link_to_vendor }}</span>
            </p>
          {% endif %}

          {% if variant.sku != blank and section.settings.display_sku %}
            <p class="sku">
              <span itemprop="sku">{{ variant.sku }}</span>
            </p>
          {% endif %}
          <div class="product-head">
          	<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
            {% if isBundleType %}
              {% if bundleSettings.count == 6 and bundleSettings.isLimited %}
                  <div class="product-head__limited">Limited edition</div>
              {% elsif bundleSettings.count == 12 %}
                  <div class="product-head__limited">Big bundle discount</div>
              {% endif %}
            {% endif %}
          </div>

          {% if bundleSettings.count %}
            <div class='product-head__soups'>
              <svg width="18" height="19" viewBox="0 0 18 19" fill='#003DA5' xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_178_254)">
                  <path d="M9.32153 3.15119C9.18111 2.92015 9.0169 2.73944 8.86657 2.58553C8.63887 2.35582 8.44607 2.17782 8.32794 2.00257C8.26786 1.91461 8.22332 1.8289 8.19094 1.72804C8.15856 1.62724 8.13761 1.50936 8.13736 1.35362V0.837494H7.01237V1.35387C7.00966 1.81916 7.13903 2.22057 7.32803 2.52724C7.46845 2.75829 7.63266 2.93878 7.78274 3.0929C8.0107 3.32261 8.20349 3.5004 8.32162 3.67586C8.3817 3.76382 8.42624 3.84953 8.45862 3.95036C8.491 4.0514 8.51195 4.16928 8.5122 4.32499C8.50949 4.60198 8.45145 4.75811 8.3592 4.91537C8.28878 5.03236 8.18911 5.14778 8.06266 5.27674C7.87503 5.4709 7.62303 5.68827 7.4 6.0109C7.28929 6.17178 7.18896 6.36053 7.11987 6.57656C7.05012 6.79278 7.01208 7.03398 7.01208 7.2959V7.81252H8.13708V7.29568C8.13979 7.01851 8.19783 6.86231 8.29008 6.70506C8.3605 6.58806 8.46017 6.47264 8.58662 6.34351C8.77404 6.14935 9.02604 5.93222 9.24928 5.60956C9.35978 5.44868 9.46011 5.25993 9.52941 5.0439C9.59916 4.8279 9.6372 4.58669 9.6372 4.32481C9.6399 3.85931 9.51053 3.45811 9.32153 3.15119Z"/>
                  <path d="M12.1716 3.15119C12.0309 2.92015 11.8669 2.73944 11.7169 2.58553C11.4887 2.35582 11.2959 2.17782 11.178 2.00257C11.1179 1.91461 11.0734 1.8289 11.041 1.72804C11.0086 1.62724 10.9876 1.50936 10.9874 1.35362V0.837494H9.86244V1.35387C9.85973 1.81916 9.9891 2.22057 10.1781 2.52724C10.3185 2.75829 10.4827 2.93878 10.6328 3.0929C10.8608 3.32261 11.0536 3.5004 11.1717 3.67586C11.2318 3.76382 11.2761 3.84953 11.3087 3.95036C11.3411 4.0514 11.362 4.16928 11.3622 4.32499C11.3595 4.60198 11.3013 4.75811 11.2092 4.91537C11.1388 5.03236 11.0391 5.14778 10.9124 5.27674C10.7252 5.4709 10.473 5.68827 10.2498 6.0109C10.1393 6.17178 10.0392 6.36053 9.96991 6.57656C9.90016 6.79278 9.86212 7.03398 9.86212 7.2959V7.81252H10.9871V7.29568C10.9898 7.01851 11.0479 6.86231 11.1401 6.70506C11.2105 6.58806 11.3102 6.47264 11.4367 6.34351C11.6241 6.14935 11.8761 5.93222 12.0993 5.60956C12.21 5.44868 12.3102 5.25993 12.3794 5.0439C12.4492 4.8279 12.4872 4.58669 12.4872 4.32481C12.4899 3.85931 12.3606 3.45811 12.1716 3.15119Z"/>
                  <path d="M0 8.9375C0 14.0322 4.02862 18.1625 9.00002 18.1625C13.9714 18.1625 18 14.0322 18 8.9375H0ZM2.05425 11.6375C1.92083 11.2745 1.81216 10.8992 1.73316 10.5125H16.2668C16.1878 10.8992 16.0792 11.2745 15.9457 11.6375H2.05425Z"/>
                </g>
                <defs>
                  <clipPath id="clip0_178_254">
                      <rect width="18" height="18" transform="translate(0 0.5)"/>
                  </clipPath>
                </defs>
              </svg>

              <span>{{ bundleSettings.count }}</span> soups
            </div>
          {% endif %}

            {% if bundleSettings.soups and bundleSettings.soups.size  %}
              <div class='product__soups-include'>
                <strong>Soups Included:</strong>
                {% for productHandle in bundleSettings.soups %}
                  {% assign innerProduct = all_products[productHandle] %}
                   {{ innerProduct.title }}{% if forloop.last != true %},{% endif %}
                {% endfor %}
              </div>
            {% endif %}

          {% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          {% endif %}

          {% assign product_tags = product.tags | join: ' ' %}
          {% if product_tags contains 'meta-size-chart-' %}
            {% for tag in product.tags %}
              {% if tag contains 'meta-size-chart-' %}
                <a href="#size-chart{{product.id}}" class="size_chart" data-remodal-target="size-chart{{product.id}}" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
                {% include 'popup-size-chart', product_id: product.id %}
              {% endif %}
            {% endfor %}
          {% elsif settings.size_chart != blank %}
            <a href="#size-chart" class="size_chart" data-remodal-target="size-chart" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
          {% endif %}


          {% if collection_handles contains 'coming-soon' %}
            <p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
          {% else %}
            <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
              <meta itemprop="seller" content="{{ shop.name | escape }}" />
              <link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
              <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>

              <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
              <span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
                <span class="current_price {% if product.available == false %}hidden{% endif %}">
                  {% if variant.price > 0 %}
                    <span class="money">{{ variant.price | money }}</span>
                  {% else %}
                    {{ settings.free_price_text }}
                  {% endif %}
                </span>
              </span>
              <span class="was_price">
                {% if variant.price < variant.compare_at_price and variant.available %}
                  <span class="money">{{ variant.compare_at_price | money }}</span>
                {% endif %}
              </span>

              {% if section.settings.display_savings %}
                <span class="sale savings">
                  {% if variant.price < variant.compare_at_price and variant.available %}
                    {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
                  {% endif %}
                </span>
              {% endif %}
            </p>

            {% include 'product-notify-me' %}
          {% endif %}

          {% if found_tags != empty %}
            <ul class="product-tags">
              {% for tag in found_tags %}
                {% capture url %}/collections/all/{{ tag | handle }}{% endcapture %}
                <li>
                  <a href="{{ url }}" alt="{{ tag }}" title="Browse all soups that are {{ tag }}">
                    {{ tag }}{% if forloop.last != true %},{% endif %}
                  </a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}

          {% if section.settings.product_description_position == "top" %}
            {% if product.description != blank %}
             <div class="description" itemprop="description">
               {{ product.description | split: '<!-- split -->' | first }}
             </div>
            {% endif %}
          {% endif %}

          <div class="intro-text">
            <h2>{{ product.metafields.product_info.intro_text }}</h2>
          </div>

          <div class="product-info-metas">
            {% if product.metafields.product_info.tastes_like != blank %}
              <div class="meta-child">
                <h3>Tastes Like</h3>
                {{ product.metafields.product_info.tastes_like }}
              </div>
            {% endif %}
            {% if product.metafields.product_info.make_me_your_own != blank %}
              <div class="meta-child">
                <h3>Make Me Your Own</h3>
                {{ product.metafields.product_info.make_me_your_own }}
              </div>
            {% endif %}
            {% if product.metafields.product_info.eat_me_with != blank %}
              <div class="meta-child">
                <h3>Eat Me With</h3>
                {{ product.metafields.product_info.eat_me_with }}
              </div>
            {% endif %}
          </div>


          {% comment %}
          {% if product.tags contains 'Soup' %}
          <a style="color: #fff;" href="/collections/build-a-box" class="action_button first_button highlight-true">SHOP NOW</a>
          {% endif %}
          {% endcomment %}


          {% unless collection_handles contains 'coming-soon' %}
            {% include 'product-form' with 'product' %}
          {% endunless %}

          {% if section.settings.product_description_position == "bottom" and isBundleType != true %}
            {% if product.description != blank %}
             <div class="description bottom descriptionProduct" itemprop="description">
              {{ product.description | split: '<!-- split -->' | first }}
             </div>
            {% endif %}
          {% endif %}

          {% if section.settings.review_position == "next_to_gallery" %}
            <div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
              <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            </div>
          {% endif %}

          {% if isBundleType and bundleSettings.bigBundle and bundleSettings.count == 6 %}
            {% assign bigBundleProduct = all_products[bundleSettings.bigBundle] %}
            {% assign bigBundleProductSettings = bigBundleProduct.metafields.variant.bundle_settings.value %}

            <div class='soups-variants'>
              <a href='{{ bigBundleProduct.url }}' class='soups-variants__item'>
                  <div class='soups-variants__title'>
                    <img src='{{ 'icon-soup.svg' | asset_url }}'>
                    <div class='soups-variants__title-caption'><span class='soups-variants__title-value'>{{bigBundleProductSettings.count}}</span>&nbsp;soups</div>
                  </div>
                  <div class='soups-variants__prices'>
                    <div class='soups-variants__price-old'>{{ product.price | times: 2 | money_without_trailing_zeros }}</div>
                    <div class='soups-variants__price-new'>{{ bigBundleProduct.price | money_without_trailing_zeros }}</div>
                  </div>
                  <div class='soups-variants__save'>save {{product.price | times: 2 | minus: bigBundleProduct.price | money_without_trailing_zeros}}</div>
              </a>
            </div>
          {% endif %}

          {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
            <div class="product_links">
              {% if section.settings.display_collections %}
                <p>
                  <span class="label">{{ 'products.product.collections' | t }}:</span>
                  <span>
                   {% for col in product.collections %}
                     <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
                   {% endfor %}
                  </span>
                </p>
              {% endif %}

              {% if section.settings.display_type %}
                <p>
                  <span class="label">{{ 'products.product.product_types' | t }}:</span>
                  <span>{{ product.type | link_to_type }}</span>
                </p>
              {% endif %}

              {% if section.settings.display_tags %}
                <p>
                 {% for tag in product.tags %}
                   {% if forloop.first %}
                     <span class="label">{{ 'products.product.tags' | t }}:</span>
                   {% endif %}

                   {% unless tag contains 'meta-' %}
                     <span>
                       <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                       </span>
                   {% endunless %}
                 {% endfor %}
                </p>
              {% endif %}
            </div>
          {% endif %}

          <div class="meta">
            {% if section.settings.display_social_buttons %}
              {% include "social-buttons" with "product" %}
            {% endif %}
          </div>
        </div>
      </div>

      {% if product.description contains "<!-- split -->"  %}
        <br class="clear" />
        <div class="section clearfix">
          <div class="description">
            {{ product.description | split: '<!-- split -->' | last }}
          </div>
        </div>
      {% endif %}

      {% if section.settings.review_position == "below_gallery" %}
        <div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        </div>
      {% endif %}

      {% if isBundleType %}
      	{% comment %} {% include 'include-cta-bundle' %} {% endcomment %}

      	<div class="product-tabs">
          <div class="tabs-head">
              {% if product.description != blank %}
                <div class="item active" data-target='tab1'>Bundle details</div>
              {% endif %}
              {% if bundleSettings.soups and bundleSettings.soups.size  %}
                <div class="item" data-target='tab2'>Soups included</div>
              {% endif %}
          </div>
          <div class="tabs-body">
            {% if product.description != blank %}
              <div class="tab active" style='display: block;' data-tab='tab1' >
                  <div class="title">About {{ product.title }}</div>
                  <div class="tab-descr">
                    {{ product.description | split: '<!-- split -->' | first }}
                  </div>
              </div>
            {% endif %}

            {% if bundleSettings.soups and bundleSettings.soups.size  %}
              <div class="tab" data-tab='tab2'>
                  <div class="title">Soups included</div>
                  <div class="product-list">
                    {% for productHandle in bundleSettings.soups %}
                      {% assign innerProduct = all_products[productHandle] %}
                      <div class="product">
                          <a href='{{ innerProduct.url }}' class="image">
                            <img src="{{ innerProduct.featured_image | image_url: width: 250 }}"/>
                          </a>
                          <div class="info">
                            <div class="product-head">
                              <a href='{{ innerProduct.url }}' class="product-title">{{ innerProduct.title }}</a>
                              <div class="product-price">{{ innerProduct.price | money_without_trailing_zeros }}</div>
                            </div>
                            {% if innerProduct.metafields.product_info.tastes_like != blank %}
                            <div class="product-meta">
                              <h3>Tastes Like</h3>
                              <div class='product-meta__descr'>
                                {{ innerProduct.metafields.product_info.tastes_like }}
                              </div>
                            </div>
                            {% elsif innerProduct.metafields.product_info.make_me_your_own != blank %}
                              <div class="product-meta">
                                <h3>Make Me Your Own</h3>
                                <div class='product-meta__descr'>
                                  {{ innerProduct.metafields.product_info.make_me_your_own }}
                                </div>
                              </div>
                            {% elsif innerProduct.metafields.product_info.eat_me_with != blank %}
                              <div class="product-meta">
                                <h3>Eat Me With</h3>
                                <div class='product-meta__descr'>
                                    {{ innerProduct.metafields.product_info.eat_me_with }}
                                </div>
                              </div>
                            {% endif %}

                            {% if innerProduct.description != blank %}
                              <div class="product-descr" itemprop="description">
                              {{ innerProduct.description | split: '<!-- split -->' | first }}
                              </div>
                            {% endif %}
                          </div>
                          {% if innerProduct.description != blank %}
                          <div class="product-descr product-descr_mob" itemprop="description">
                            {{ innerProduct.description | split: '<!-- split -->' | first }}
                          </div>
                          {% endif %}
                        </div>
                    {% endfor %}
                  </div>
              </div>
            {% endif %}
          </div>
      </div>
      {% endif %}
    </div>

    {% if sidebar %}

            {% if section.settings.display_related_products %}
              {% include 'include-related-products' %}
            {% endif %}
            {% if section.settings.display_recently_viewed %}
              {% include 'include-recently-viewed' %}
            {% endif %}

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

    {% else %}
          </div>
        </div>
      </div>


      <div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&amp;','%26'}}" data-description="{{ product.description | escape }}" data-price="{{ variant.price | money_without_currency }}" data-currency="{{ shop.currency }}"></div>

      {% if section.settings.display_related_products %}
        {% include 'include-related-products' %}
      {% endif %}
      {% if section.settings.display_recently_viewed %}
        {% include 'include-recently-viewed' %}
      {% endif %}

    {% endif %}

<script>
  (function() {
    if ($(window).width() < 480) {
      document.getElementsByClassName("product_gallery")[0].removeAttribute("data-zoom");
    }

    $(".descriptionProduct p span a").addClass("descriptionProductLink");

    initTabs();
    function initTabs() {
      $('.tabs-head .item').on('click', function(e){
        e.preventDefault();
        $(this).addClass('active').siblings('.active').removeClass('active');
        $('.tab[data-tab="'+$(this).data('target')   +'"]').slideDown().addClass('active').siblings('.active').slideUp().removeClass('active')
	    })
    }
  })()
</script>

{% comment %}
  Construct an instance of accordions, specifying the tag
  that contains the title of each accordion, and the container for
  all said accordions.
  Default settings are all <h5> headers in the body element.

  This code will find the content between the titles and make that content the
  content of the accordion.

  Paste this snippet at the bottom of whatever template you want accordions in.
{% endcomment %}
<script>
  /** Accordions Module, leave defaults alone! **/
  function generateAccordions(container='body', title='h5') {
    var accordions = Array.prototype.slice.call(
      document.querySelectorAll(container + ' ' + title)
    );

    var container = document.querySelector(container);

    function wrapAccordions() {
      accordions.forEach(function(accord) {
        var wrapper = document.createElement('div');
        var wrapperInner = document.createElement('div');
        var wrapperContent = document.createElement('div');

        wrapper.classList.add('accordion-wrapper');
        wrapperInner.classList.add('accordion-inner');
        wrapperContent.classList.add('accordion-content');
        accord.classList.add('accordion-title');

        accord.parentNode.insertBefore(wrapper, accord);
        wrapper.appendChild(accord);

        while (wrapper.nextSibling &&
               wrapper.nextSibling.nodeName !== title.toUpperCase()) {
          wrapperContent.appendChild(wrapper.nextSibling);
        }

        wrapperInner.appendChild(wrapperContent);
        wrapper.appendChild(wrapperInner);
      });

      accordions = Array.prototype.slice.call(
        container.querySelectorAll('.accordion-wrapper')
      );
    }

    function disableAccordions() {
      accordions.forEach(function(accord) {
        accord.classList.remove('open');
      })
    }

    function setListeners() {
      accordions.forEach(function(accord) {
        accord.addEventListener('click', function(e) {
          if (accord.classList.contains('open')) {
            accord.classList.remove('open');
          } else {
            disableAccordions();
            accord.classList.add('open');
          }
        });
      });
    }

    function main() {
      wrapAccordions();
      setListeners();
    }

    main();
  }

  /** Customize selectors here
   * I.E: for all the h6 tags in a wrapper with a class of
   * "container", you could go:
   * generateAccordions('.container', 'h6');
  */
  if (document.querySelector('.descriptionProduct h5')) {
     generateAccordions('.descriptionProduct', 'h5');
  }
  generateAccordions('.product-tabs .product-list', 'h5');

</script>

<style>
.accordion-wrapper {
  cursor: pointer;
  border-bottom: 1px solid #000;
}

.accordion-wrapper:first-child {
  border-top: 1px solid #000;
}

.accordion-wrapper .accordion-inner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .1s;
  -o-transition: max-height .1s;
  transition: max-height .1s;
}

.accordion-wrapper .accordion-inner .accordion-content {
  padding-bottom: 10px;
}

.accordion-wrapper.open .accordion-inner {
  max-height: 500px;
}

.accordion-wrapper > .accordion-title {
  font-size: 1.2em;
  letter-spacing: 1px;
}

.accordion-title {
  display: block;
  margin: 0;
  padding: 5px 0;
  position: relative;
  text-transform: uppercase;
}

.accordion-title::after {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  content: "\002b";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: monospace;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.accordion-wrapper.open > .accordion-title::after {
  content: "\2212";
}
</style>

{% schema %}

{
  "name": "Product",
  "class": "product-template",
  "settings": [
    {
      "type": "header",
      "content": "Product gallery"
    },
    {
      "type": "checkbox",
      "id": "gallery_arrows",
      "label": "Show arrows on product gallery",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "activate_zoom",
      "label": "Magnify product images on hover"
    },
    {
      "type": "checkbox",
      "id": "enable_product_lightbox",
      "label": "Enable product gallery popup",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "activate_autoplay",
      "label": "Enable product gallery slideshow"
    },
    {
      "type": "select",
      "id": "slideshow_animation",
      "label": "Gallery transition",
      "options": [
        {
          "value": "slide",
          "label": "Slide"
        },
        {
          "value": "fade",
          "label": "Fade"
        }
      ],
      "default": "slide"
    },
    {
      "type": "radio",
      "id": "product_images_position",
      "label": "Gallery position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "product_thumbs",
      "label": "Show product gallery thumbnails",
      "default": true
    },
    {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnail position",
      "default": "bottom-slider",
      "options": [
        {
          "value": "bottom-thumbnails",
          "label": "Bottom (grid)"
        },
        {
          "value": "bottom-slider",
          "label": "Bottom (slider)"
        },
        {
          "value": "left-thumbnails",
          "label": "Left"
        },
        {
          "value": "right-thumbnails",
          "label": "Right"
        }
      ]
    },
    {
      "type": "header",
      "content": "Product info"
    },
    {
      "type": "checkbox",
      "id": "product_breadcrumb",
      "label": "Show breadcrumb links"
    },
    {
      "type": "checkbox",
      "id": "display_vendor",
      "label": "Show vendor"
    },
    {
      "type": "checkbox",
      "id": "display_sku",
      "label": "Show SKU"
    },
    {
      "type": "checkbox",
      "id": "display_savings",
      "label": "Show price savings",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "default": false,
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
    },
    {
      "type": "checkbox",
      "id": "display_collections",
      "label": "Show collections"
    },
    {
      "type": "checkbox",
      "id": "display_type",
      "label": "Show type"
    },
    {
      "type": "checkbox",
      "id": "display_tags",
      "label": "Show tags"
    },
    {
      "type": "checkbox",
      "id": "display_social_buttons",
      "label": "Show social media share icons",
      "default": true
    },
    {
      "type": "radio",
      "id": "product_description_position",
      "label": "Description position",
      "options": [
        {
          "value": "top",
          "label": "Above product form"
        },
        {
          "value": "bottom",
          "label": "Below product form"
        }
      ]
    },
    {
      "type": "header",
      "content": "Product reviews"
    },
    {
      "type": "paragraph",
      "content": "Reviews app must be enabled [(?)](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)"
    },
    {
      "type": "checkbox",
      "id": "enable_shopify_product_badges",
      "label": "Display star rating on product",
      "default": false
    },
    {
      "type": "radio",
      "id": "review_position",
      "label": "Reviews position",
      "default": "next_to_gallery",
      "options": [
        {
          "value": "next_to_gallery",
          "label": "In product description area"
        },
        {
          "value": "below_gallery",
          "label": "Below image\/description"
        }
      ]
    },
    {
      "type": "header",
      "content": "Related products"
    },
    {
      "type": "checkbox",
      "id": "display_related_products",
      "label": "Show related products ([?](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115006909487-Related-Products))",
      "default": true
    },
    {
      "type": "radio",
      "id": "related_products_style",
      "label": "Layout",
      "default": "grid",
      "options": [
        {
          "value": "slider",
          "label": "Slider"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ]
    },
    {
      "type": "range",
      "id": "related_products_limit",
      "label": "Limit products",
      "min": 3,
      "max": 50,
      "step": 1,
      "default": 12
    },
    {
      "type": "range",
      "id": "products_per",
      "label": "Products per row",
      "min": 3,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "header",
      "content": "Recently viewed products"
    },
    {
      "type": "paragraph",
      "content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages ([?](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228))"
    },
    {
      "type": "checkbox",
      "id": "display_recently_viewed",
      "label": "Show recently viewed products",
      "default": false
    },
    {
      "type": "text",
      "id": "rv_title",
      "label": "Title",
      "default": "Recently Viewed Items"
    },
    {
      "type": "radio",
      "id": "rv_products_style",
      "label": "Layout",
      "default": "grid",
      "options": [
        {
          "value": "slider",
          "label": "Slider"
        },
        {
          "value": "grid",
          "label": "Grid"
        }
      ]
    },
    {
      "type": "range",
      "id": "rv_max_display",
      "label": "Products limit",
      "min": 3,
      "max": 12,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "rv_per",
      "label": "Products per row",
      "min": 3,
      "max": 5,
      "step": 1,
      "default": 4
    },
    {
      "type": "header",
      "content": "Sidebar"
    },
    {
      "type": "paragraph",
      "content": "Create a sidebar by adding content blocks."
    },
    {
      "type": "checkbox",
      "id": "toggle",
      "label": "Toggle sidebar content",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "filter_by_collection",
      "name": "Collection list",
      "limit": 1
    },
    {
      "type": "menu",
      "name": "Menu",
      "settings": [
        {
          "type": "link_list",
          "id": "custom_menu_linklist",
          "label": "Menu"
        }
      ]
    },
    {
      "type": "page",
      "name": "Page",
      "settings": [
        {
          "type": "page",
          "id": "content_page",
          "label": "Page"
        }
      ]
    },
    {
      "type": "recently_viewed",
      "name": "Recently viewed products",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages ([?](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228))"
        },
        {
          "type": "text",
          "id": "sidebar_rv_title",
          "label": "Title",
          "default": "Recently Viewed"
        },
        {
          "type": "range",
          "id": "sidebar_rv_per",
          "label": "Products limit",
          "min": 1,
          "max": 4,
          "step": 1,
          "default": 3
        }
      ]
    },
    {
      "type": "filter_by_tag",
      "name": "Tag list",
      "limit": 1
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Heading"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Text area can be used for special announcements or general information.</p>"
        }
      ]
    },
    {
      "type": "filter_by_type",
      "name": "Type list",
      "limit": 1
    },
    {
      "type": "filter_by_vendor",
      "name": "Vendor list",
      "limit": 1
    }
  ],
  "default": {
    "settings": {

    }
  }
}

{% endschema %}

<div class="zrx-product-bottom"></div>