<div
  class="{{ block.settings.visibility }} product__accordion accordion accordion--{{ block.settings.heading_size }}{% if block.settings.display_top_border %} accordion--top-border{% endif %} quick-add-hidden"
  style=""
  {{ block.shopify_attributes }}
>
 <details class='accordion__details'{% if block.settings.open %} open{% endif %}  {% if block.settings.enable_collapsible_tabradius %} style="border: {{ block.settings.collapsible_tabwidth }}px {{ block.settings.collapsible_tabstyle }} {{ block.settings.collapsible_tabradiuscolor }}; border-radius: {{ block.settings.collapsible_tabradius }}px; margin-bottom: 12px; padding: 2px 2px; padding-left: 10px !important;margin-top: 10px;"{% endif %}>
 {% if block.settings.enable_collapsible_tabradius %}
               {%- style -%}
               .accordion {
               border-bottom: none;
               }
               {%- endstyle -%}
               {% endif %}
               {% if block.settings.plus_gray_circle and block.settings.collapse_icon != 'carret' %}
               {%- style -%}
               .accordion__summary .plus-icon-wrapper {
                 background-color: {{ block.settings.plus_circle_color | default: '#808080' }};
                 border-radius: 50%;
                 padding: 8px;
                 width: 25px;
                 height: 25px;
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
               }
               .accordion__summary .plus-icon-wrapper svg {
                 fill: white !important;
                 stroke: white !important;
                 color: white !important;
               }
               .accordion__summary .plus-icon-wrapper .icon {
                 color: white !important;
               }
               {%- endstyle -%}
               {% endif %}
               
                  <summary class="accordion__summary">
                    <div class="summary__title">
                      {% if block.settings.custom_icon != blank %}
                        <img
                          src="{{ block.settings.custom_icon | image_url }}"
                          {% if block.settings.custom_icon.alt != blank %}
                            alt="{{ block.settings.custom_icon.alt | escape }}"
                          {% else %}
                            role="presentation"
                          {% endif %}
                          height="auto"
                          width="auto"
                          loading="lazy"
                        >
                      {% else %}
                        {% render 'material-icon', icon: block.settings.icon, filled: block.settings.filled_icon %}
                      {% endif %}
                      <h2 class="h4 accordion__title">
                        {{ block.settings.heading | default: block.settings.page.title }}
                      </h2>
                    </div>
                    {% if block.settings.collapse_icon == 'carret' %}
                      {% render 'icon-caret' %}
                    {% else %}
                      {% if block.settings.plus_gray_circle %}
                        <div class="plus-icon-wrapper">
                          {% render 'icon-plus' %}
                        </div>
                      {% else %}
                        {% render 'icon-plus' %}
                      {% endif %}
                    {% endif %}
                  </summary>
                </details>
  <div class="accordion__content-wrapper">
    <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
      {{ block.settings.content | replace: '[description]', product.description }}
      {{ block.settings.page.content }}


   {% if block.settings.enableiconsintab %}
  {% render 'text-with-icon-inside-row', block: block, block_attributes: true %}
 {% endif %}

      
    </div>
  </div>
</div>
<style>
  @media (min-width: 1024px) {
      .thumbnail-slider {
          margin-bottom: 20px;
      }
  }
</style>
