FAQ Accordion

<section class="sl-faq" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:760px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 1.75rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="font-size:clamp(1.5rem,3vw,2.25rem);margin:.35rem 0 .5rem;line-height:1.2;">{{ section.settings.heading }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div role="list">
      {%- for block in section.blocks -%}
        <details role="listitem" style="border-bottom:1px solid currentColor;padding:1rem 0;" {% if forloop.first %}open{% endif %} {{ block.shopify_attributes }}>
          <summary style="cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:clamp(.95rem,1.75vw,1.05rem);">
            <span>{{ block.settings.question }}</span>
            <span aria-hidden="true" style="flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--sl-accent,#0a5cff);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;">+</span>
          </summary>
          <div style="margin-top:.85rem;opacity:.85;line-height:1.65;">{{ block.settings.answer }}</div>
        </details>
      {%- endfor -%}
    </div>
    {%- if section.settings.support_link != blank -%}
      <p style="margin:1.5rem 0 0;text-align:center;font-size:.9rem;opacity:.85;">{{ section.settings.support_prefix | default: 'Still have questions?' }} <a href="{{ section.settings.support_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ section.settings.support_text | default: 'Contact support' }}</a></p>
    {%- endif -%}
  </div>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {%- for block in section.blocks -%}
      { "@type": "Question", "name": {{ block.settings.question | json }}, "acceptedAnswer": { "@type": "Answer", "text": {{ block.settings.answer | strip_html | json }} } }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor -%}
    ]
  }
  </script>
</section>
{% schema %}
{
  "name": "FAQ Accordion",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Need help?" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Frequently asked questions" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Everything you need to know before you check out." },
    { "type": "text", "id": "support_prefix", "label": "Support prefix", "default": "Still have questions?" },
    { "type": "text", "id": "support_text", "label": "Support link text", "default": "Contact support" },
    { "type": "url", "id": "support_link", "label": "Support link" }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Question",
      "settings": [
        { "type": "text", "id": "question", "label": "Question", "default": "How long does shipping take?" },
        { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>Orders ship within 2 business days via tracked courier. US: 3-5 days, international: 7-14 days.</p>" }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ Accordion",
      "blocks": [
        { "type": "item", "settings": { "question": "How long does shipping take?", "answer": "<p>Orders ship within 2 business days. US delivery is 3-5 business days, international 7-14 business days with tracking.</p>" } },
        { "type": "item", "settings": { "question": "What is your return policy?", "answer": "<p>Free returns within 30 days of delivery. Items must be unworn with tags attached. We refund to the original payment method within 5 business days of receipt.</p>" } },
        { "type": "item", "settings": { "question": "Do you ship internationally?", "answer": "<p>Yes — we ship to over 80 countries. Duties and taxes are calculated at checkout so there are no surprises.</p>" } },
        { "type": "item", "settings": { "question": "How do I track my order?", "answer": "<p>You will receive a tracking link by email as soon as your order ships. You can also view status anytime from your account.</p>" } }
      ]
    }
  ]
}
{% endschema %}