/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:38 Expected identifier but found whitespace
Line 20:20 Expected ":"
Line 21:4 Unexpected "-"
Line 21:32 Expected ":"
Line 22:4 Unexpected "-"
Line 22:28 Expected ":"
Line 23:4 Unexpected "-"
Line 23:39 Expected ":"
... and 129 more hidden warnings

**/
{% comment %}
    Renders product details tab block.

    Accepts:
    - block: {Object} The block object
    - details_tab_blocks: {Array} An array of details tab blocks
    - last_tab_name: {String} The heading name of the last tab
    - product_description_text: {String} The product description
    - section: {Object} The section object the snippet is being rendered in

    Usage:
    {%- render 'product-block-details-tabs', block: block, details_tab_blocks: details_tab_blocks, last_tab_name: last_tab_name, product_description_text: product.description, section: section, -%}
{% endcomment %}

{{ 'styles-component-details-tab.css' | asset_url | stylesheet_tag }}

{% comment %} Accordian detail tabs {% endcomment %}
{%- if section.settings.details_style == 'accordion' -%}
  {%- for block in details_tab_blocks -%}
    {%- liquid
      if block.settings.show_description and product_description_text != blank
        assign product_description = product_description_text
      else
        assign product_description = false
      endif

      unless block.settings.content == blank and block.settings.page.content == blank and block.settings.image == blank and product_description == false
        assign show_tab = true
      else
        assign show_tab = false
      endunless
    -%}
      
    {%- if show_tab -%}
      <div class="details-tab details-tab--accordion-container {% if last_tab_name == block.settings.heading %}featured-product__details-tab-block-spacing--bottom{% endif %}" {{ block.shopify_attributes }}>
        {% if block.settings.image %}
          <style>
            .main-product--{{ section.id }} .rte .details-tab__tab-image {
              max-width: {{ block.settings.image_max_width }}px;
            }
          </style>
        {% endif %}

        <details class="accordion no-js-hidden" id="Details-{{ block.id }}-{{ section.id }}">
          <summary class="accordion__summary">
            <div class="flex flex--align-center">
              {%- unless block.settings.icon == 'none' -%}
                {% render 'icons', icon: block.settings.icon, class: 'space--mr--small' %}
              {%- endunless -%}
              <h2>
                {{ block.settings.heading | default: block.settings.page.title }}
              </h2>
            </div>
            <span class="icon--to-open motion-reduce">
              {%- render 'icons', icon: 'plus', size: '1.2rem' -%}
            </span>
          </summary>
          <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
            {%- render 'product-detail-tab-content', content: block.settings.content, image: block.settings.image, image_max_width: block.settings.image_max_width, show_image_first: block.settings.show_image_first, page_content: block.settings.page.content, product_description: product_description -%}
          </div>
        </details>

        <noscript>
          <details class="accordion" id="Details-{{ block.id }}-{{ section.id }}">
            <summary class="accordion__summary">
              <div class="flex flex--align-center">
                {%- unless block.settings.icon == 'none' -%}
                  {% render 'icons', icon: block.settings.icon, class: 'space--mr--small' %}
                {%- endunless -%}
                <h2>
                  {{ block.settings.heading | default: block.settings.page.title }}
                </h2>
              </div>
              <span class="icon--to-open motion-reduce">
                {%- render 'icons', icon: 'plus', size: '1.2rem' -%}
              </span>
            </summary>
            <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
              {%- render 'product-detail-tab-content', content: block.settings.content, image: block.settings.image, image_max_width: block.settings.image_max_width, show_image_first: block.settings.show_image_first, page_content: block.settings.page.content, product_description: product_description -%}
            </div>
          </details>
        </noscript>
      </div>
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{% comment %} Button detail tabs {% endcomment %}
{%- if section.settings.details_style == 'button' -%}
  <button-tabs class="button-tabs no-js-hidden" data-section-id="{{ section.id }}">
    {%- for block in details_tab_blocks -%}
      {%- liquid
        if block.settings.show_description and product_description_text != blank
          assign product_description = product_description_text
        else
          assign product_description = false
        endif

        unless block.settings.content == blank and block.settings.page.content == blank and block.settings.image == blank and product_description == false
          assign show_tab = true

          unless firstDetailsTabIndex
            assign firstDetailsTabIndex = forloop.index 
          endunless
        else
          assign show_tab = false
        endunless
      -%}
      
      {%- if show_tab -%}
        <div class="details-tab featured-product__details-tab-block-spacing--top" {{ block.shopify_attributes }}>
          <button class="button-tabs__trigger type--accent copy--bold {% if firstDetailsTabIndex == forloop.index %}active" tabindex="-1"{% else %}"{% endif %} data-tab-button="{{ section.id | append: '-product-details-' | append: forloop.index }}">
            {%- unless block.settings.icon == 'none' -%}
              {% render 'icons', icon: block.settings.icon, size: '1.5em', class: 'space--mr--small' %}
            {%- endunless -%}
            <h2>
              {{ block.settings.heading | default: block.settings.page.title }}
            </h2>
          </button>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </button-tabs>

  <div class="button-tabs__content-container">
    {%- for block in details_tab_blocks -%}
      {%- liquid
        if block.settings.show_description and product_description_text != blank
          assign product_description = product_description_text
        else
          assign product_description = false
        endif

        unless block.settings.content == blank and block.settings.page.content == blank and block.settings.image == blank and product_description == false
        assign show_tab = true
          assign show_tab = true
        else
          assign show_tab = false
        endunless
      -%}
        
      {%- if show_tab -%}
        <div class="details-tab {% if last_tab_name == block.settings.heading %}featured-product__details-tab-block-spacing--bottom{% endif %}" {{ block.shopify_attributes }}>
          <div id="{{ section.id | append: '-product-details-' | append: forloop.index }}" class="button-tabs__content rte no-js-hidden {% if firstDetailsTabIndex == forloop.index %}active{% endif %}" data-tab-section="{{ section.id }}">
            {%- render 'product-detail-tab-content', content: block.settings.content, image: block.settings.image, image_max_width: block.settings.image_max_width, show_image_first: block.settings.show_image_first, page_content: block.settings.page.content, product_description: product_description -%}
          </div>

          <noscript>
            <details class="accordion" id="Details-{{ block.id }}-{{ section.id }}">
              <summary class="accordion__summary">
                <div class="flex flex--align-center">
                  {%- unless block.settings.icon == 'none' -%}
                    {% render 'icons', icon: block.settings.icon, class: 'space--mr--small' %}
                  {%- endunless -%}
                  <h2>
                    {{ block.settings.heading | default: block.settings.page.title }}
                  </h2>
                </div>
                <span class="icon--to-open motion-reduce">
                  {%- render 'icons', icon: 'plus', size: '1.2rem' -%}
                </span>
              </summary>
              <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                {%- render 'product-detail-tab-content', content: block.settings.content, image: block.settings.image, image_max_width: block.settings.image_max_width, show_image_first: block.settings.show_image_first, page_content: block.settings.page.content, product_description: product_description -%}
              </div>
            </details>
          </noscript>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>
{%- endif -%}