/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 19:16 Expected identifier but found whitespace
Line 19:18 Unexpected "{"
Line 19:27 Expected ":"
Line 19:53 Expected ":"
Line 20:19 Expected identifier but found whitespace
Line 20:21 Unexpected "{"
Line 20:30 Expected ":"
Line 20:59 Expected ":"
Line 34:15 Expected identifier but found whitespace
... and 47 more hidden warnings

**/
<style>
  .custom-accordion-section {
    background-color: #f6f0e9;
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  .custom-accordion__container {
    margin: 0 auto;
  }

  .custom-accordion__heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: #231f20;
    margin-bottom: 40px;
    text-align: {{ section.settings.text_alignment }};
  }

  .accordion {
    margin-top: 2.5rem;
    margin-bottom: 0;
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
    border-color: #231f20;
    transition: border-color 0.2s ease-in-out;
  }

  .accordion + .accordion {
    margin-top: 0;
    border-top: none;
  }

  .accordion summary {
    display: flex;
    position: relative;
    line-height: 1;
    padding: 1.5rem 0;
    align-items: center;
    padding-block: 24px;
    cursor: pointer;
    list-style: none;
  }
  
  .accordion summary::-webkit-details-marker {
    display: none;
  }

  .accordion .summary__title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
  }

  .accordion .summary__title + .icon-caret {
    height: calc(var(--font-heading-scale) * 0.6rem);
  }

  .accordion__title {
    display: inline-block;
    max-width: calc(100% - 6rem);
    min-height: 1.6rem;
    margin: 0;
    word-break: break-word;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .accordion .svg-wrapper {
    align-self: center;
    fill: rgb(var(--color-foreground));
    height: calc(var(--font-heading-scale) * 2rem);
    margin-right: calc(var(--font-heading-scale) * 1rem);
    width: calc(var(--font-heading-scale) * 2rem);
  }

  .accordion details svg {
    width: 36px;
    height: 36px;
    transition: rotate 0.2s ease-in-out;
    flex-shrink: 0;
  }

  .accordion details[open] > summary .icon-caret {
    transform: rotate(180deg);
  }

  .accordion details[open] svg.custom-arrow {
    rotate: -90deg;
  }

  .accordion:has(> details[open]) {
    border-bottom-color: transparent;
  }

  .accordion details[open] + .accordion__content {
    grid-template-rows: 1fr;
    margin-bottom: 16px;
    padding-block: 16px !important;
  }

  .accordion__content {
    margin-bottom: 1.5rem;
    word-break: break-word;
    overflow-x: auto;
    padding: 0 0.6rem;
    display: grid;
    grid-template-rows: 0fr;
    background-color: #e1d9ce;
    margin-bottom: 0;
    padding-inline: 20px !important;
    font-size: 20px;
    line-height: 1.2;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
  }

  .accordion__content img {
    max-width: 100%;
  }

  .accordion__body {
    overflow: hidden;
  }

  .accordion__body ul {
    padding-left: 0;
  }

  .accordion__body :where(ul, p):first-child {
    margin-top: 0;
  }

  .accordion__body :where(ul, p):last-child {
    margin-bottom: 0;
  }

  .accordion__body li + li {
    margin-top: 16px;
  }

  @media (max-width: 1600px) {
    .accordion .accordion__title {
      font-size: 18px !important;
    }

    .accordion summary {
      padding-block: 16px;
    }
  }

   @media (max-width: 600px) {
    .accordion .accordion__title {
      font-size: 15px !important;
    }
    .summary__title .accordion__title{
      font-size: 15px !important;
    }
  }
</style>

<div class="page-width custom-accordion">
  {% if section.settings.heading != blank %}
    <h2 class="custom-accordion__heading">{{ section.settings.heading }}</h2>
  {% endif %}
  
  <div class="custom-accordion__container">
    {% for block in section.blocks %}
      {% if block.type == 'accordion_item' %}
        <div class="accordion product__accordion" {{ block.shopify_attributes }}>
          <details id="Details-{{ block.id }}-{{ section.id }}">
            <summary>
              <div class="summary__title">
                {% if block.settings.icon != 'none' %}
                  <span class="svg-wrapper" style="color: rgb(62, 214, 96)">
                    {% case block.settings.icon %}
                      {% when 'check_mark' %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                      {% when 'question_mark' %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                      {% when 'info' %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                    {% endcase %}
                  </span>
                {% endif %}
                <h2 class="h4 accordion__title inline-richtext">
                  {{ block.settings.heading }}
                </h2>
              </div>
              <svg class="custom-arrow" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.5 9L22.5 18L13.5 27" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </summary>
            <div class="rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}"></div>
          </details>
          <div class="accordion__content">
            <div class="accordion__body">
              {{ block.settings.content }}
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const accordionItems = document.querySelectorAll('.accordion details');
    
    accordionItems.forEach(item => {
      item.addEventListener('toggle', function() {
        if (this.open) {
          // Close all other accordions when opening the current one
          accordionItems.forEach(otherItem => {
            if (otherItem !== item && otherItem.open) {
              otherItem.open = false;
            }
          });
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "Accordion",
  "tag": "section",
  "class": "section custom-accordion-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Frequently Asked Questions"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center",
      "label": "Heading Alignment"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top Padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 40
    }
  ],
  "blocks": [
    {
      "type": "accordion_item",
      "name": "Accordion Item",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Question",
          "label": "Heading"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "None"
            },
            {
              "value": "check_mark",
              "label": "Check Mark"
            },
            {
              "value": "question_mark",
              "label": "Question Mark"
            },
            {
              "value": "info",
              "label": "Information"
            }
          ],
          "default": "none",
          "label": "Icon"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content",
          "default": "<p>Answer text or information that will display when the accordion is opened.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Accordion",
      "blocks": [
        {
          "type": "accordion_item"
        },
        {
          "type": "accordion_item"
        },
        {
          "type": "accordion_item"
        }
      ]
    }
  ]
}
{% endschema %}