{% comment %} Google Font preloading for italic heading style {% endcomment %}
{% if section.settings.italic_font_family == 'georgia-pro' or section.settings.italic_font_family == 'bodoni-moda' or section.settings.italic_font_family == 'instrument-serif' or section.settings.italic_font_family == 'custom_google_font' %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400;1,6..96,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
    <link href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
{% endif %}

{%- style -%}
  /* ── Padding & Margin ─────────────────────────────────── */
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  /* ── Custom Color Scheme ──────────────────────────────── */
  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
    background-attachment: scroll !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}
  @media screen and (max-width: 750px) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
    }
  }
  @supports (-webkit-appearance: none) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }
  }

  /* ── Heading italic/em style ──────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  /* ── Heading gradient (bold/strong) ───────────────────── */
  {% if section.settings.enable_gradient %}
    #FaqAccordion-{{ section.id }} .faq-accordion__heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Section Layout ───────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__inner {
    display: flex;
    gap: {{ section.settings.layout_gap }}px;
    align-items: flex-start;
  }

  #FaqAccordion-{{ section.id }} .faq-accordion__image-col {
    flex: 0 0 {{ section.settings.image_width }}%;
  }

  #FaqAccordion-{{ section.id }} .faq-accordion__content-col {
    flex: 1;
    min-width: 0;
  }

  #FaqAccordion-{{ section.id }}.layout--image-right .faq-accordion__inner {
    flex-direction: row-reverse;
  }

  @media screen and (max-width: 749px) {
    #FaqAccordion-{{ section.id }} .faq-accordion__inner {
      flex-direction: column !important;
      gap: 30px;
    }
    #FaqAccordion-{{ section.id }} .faq-accordion__image-col {
      flex: 0 0 100%;
      width: 100%;
    }
    {% if section.settings.hide_image_on_mobile %}
      #FaqAccordion-{{ section.id }} .faq-accordion__image-col {
        display: none;
      }
    {% endif %}
  }

  /* ── Image ────────────────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: {{ section.settings.image_border_radius }}px;
    {% case section.settings.image_aspect_ratio %}
      {% when 'square' %}aspect-ratio: 1 / 1;
      {% when 'portrait' %}aspect-ratio: 3 / 4;
      {% when 'landscape' %}aspect-ratio: 16 / 9;
      {% when 'wide' %}aspect-ratio: 21 / 9;
    {% endcase %}
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__image-placeholder {
    min-height: 300px;
    background: rgba(var(--color-foreground), 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Heading wrapper ──────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__heading-wrapper {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: {{ section.settings.heading_margin_bottom }}px;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__heading {
    margin: 0;
    color: rgb(var(--color-foreground));
  }

  /* ── Intro Text ───────────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__intro {
    color: rgb(var(--color-foreground));
    opacity: 0.75;
    line-height: 1.6;
    margin-bottom: {{ section.settings.intro_margin_bottom }}px;
    text-align: {{ section.settings.heading_alignment }};
  }

  /* ── FAQ Items ────────────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__items {
    width: 100%;
  }

  #FaqAccordion-{{ section.id }} .faq-accordion__item {
    {% if section.settings.border_bottom_only %}
      border-bottom: {{ section.settings.accordion_border_width }}px solid {{ section.settings.accordion_border_color }};
      border-radius: 0;
    {% else %}
      border: {{ section.settings.accordion_border_width }}px solid {{ section.settings.accordion_border_color }};
      border-radius: {{ section.settings.accordion_border_radius }}px;
    {% endif %}
    margin-bottom: {{ section.settings.accordion_gap }}px;
    overflow: hidden;
  }
  {% if section.settings.border_bottom_only %}
    #FaqAccordion-{{ section.id }} .faq-accordion__item:last-child {
      border-bottom: none;
    }
  {% endif %}

  /* ── Question button ──────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__question {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    background: {{ section.settings.question_bg_color }};
    color: {{ section.settings.question_text_color }};
    border: none;
    text-align: left;
    padding: {{ section.settings.question_padding_vertical }}px {{ section.settings.question_padding_horizontal }}px;
    font-size: {{ section.settings.question_font_size }}px;
    font-weight: {{ section.settings.question_font_weight }};
    transition: background 0.25s ease;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__question:hover {
    background: {{ section.settings.question_bg_hover }};
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__question[aria-expanded="true"] {
    background: {{ section.settings.question_bg_active }};
    color: {{ section.settings.question_color_active }};
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__question-row {
    display: flex;
    align-items: center;
    width: 100%;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__question-text {
    flex: 1;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__chevron {
    flex-shrink: 0;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
    color: {{ section.settings.question_text_color }};
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__question[aria-expanded="true"] .faq-accordion__chevron {
    transform: rotate(180deg);
    color: {{ section.settings.question_color_active }};
  }

  /* ── Badge ────────────────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__badge {
    display: inline-block;
    background-color: {{ section.settings.badge_bg_color }};
    color: {{ section.settings.badge_text_color }};
    font-size: {{ section.settings.badge_font_size }}px;
    font-weight: {{ section.settings.badge_font_weight }};
    padding: {{ section.settings.badge_padding_v }}px {{ section.settings.badge_padding_h }}px;
    border: {{ section.settings.badge_border_width }}px solid {{ section.settings.badge_border_color }};
    border-radius: {{ section.settings.badge_border_radius }}px;
    margin-bottom: {{ section.settings.badge_margin_bottom }}px;
    line-height: 1.4;
  }

  /* ── Answer ───────────────────────────────────────────── */
  #FaqAccordion-{{ section.id }} .faq-accordion__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }
  #FaqAccordion-{{ section.id }} .faq-accordion__answer-inner {
    padding: {{ section.settings.answer_padding_v }}px {{ section.settings.answer_padding_h }}px;
    font-size: {{ section.settings.answer_font_size }}px;
    font-weight: {{ section.settings.answer_font_weight }};
    color: {{ section.settings.answer_text_color }};
    background-color: {{ section.settings.answer_bg_color }};
    line-height: 1.6;
  }

  /* ── Block-level badge overrides ─────────────────────── */
  {% for block in section.blocks %}
    {% if block.type == 'faq_item' and block.settings.badge_text != blank and block.settings.badge_override_section %}
      #FaqAccordion-{{ section.id }} .faq-accordion__item[data-block-id="{{ block.id }}"] .faq-accordion__badge {
        background-color: {{ block.settings.badge_bg_color }};
        color: {{ block.settings.badge_text_color }};
        font-size: {{ block.settings.badge_font_size }}px;
        font-weight: {{ block.settings.badge_font_weight }};
        padding: {{ block.settings.badge_padding_v }}px {{ block.settings.badge_padding_h }}px;
        border: {{ block.settings.badge_border_width }}px solid {{ block.settings.badge_border_color }};
        border-radius: {{ block.settings.badge_border_radius }}px;
        margin-bottom: {{ block.settings.badge_margin_bottom }}px;
      }
    {% endif %}
  {% endfor %}

  /* ── Button blocks ────────────────────────────────────── */
  {% for block in section.blocks %}
    {% if block.type == 'button' and block.settings.button_text != blank %}
      #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] {
        margin-top: {{ block.settings.margin_top | default: 0 }}px;
        margin-bottom: {{ block.settings.margin_bottom | default: 24 }}px;
        text-align: {{ block.settings.alignment_desktop | default: 'center' }};
      }
      @media (min-width: 750px) {
        {% if block.settings.hide_on_desktop %}
          #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] {
            display: none !important;
          }
        {% endif %}
      }
      @media (max-width: 749px) {
        #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] {
          text-align: {{ block.settings.alignment_mobile | default: 'center' }};
        }
        {% if block.settings.full_width_mobile %}
          #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] {
            display: flex;
            width: 100%;
          }
          #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] .faq-accordion__btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100%;
            text-align: center;
          }
        {% endif %}
      }
      {% if block.settings.use_custom_styles %}
        #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] .faq-accordion__btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: {{ block.settings.btn_icon_gap | default: 8 }}px;
          text-decoration: none;
          cursor: pointer;
          color: {{ block.settings.btn_text_color | default: '#ffffff' }};
          {% if block.settings.use_gradient %}
            background: {{ block.settings.btn_gradient }};
          {% else %}
            background-color: {{ block.settings.btn_bg_color | default: '#000000' }};
          {% endif %}
          border: {{ block.settings.btn_border_width | default: 0 }}px solid {{ block.settings.btn_border_color | default: '#000000' }};
          border-radius: {{ block.settings.btn_border_radius | default: 4 }}px;
          font-size: {{ block.settings.btn_font_size | default: 16 }}px;
          font-weight: {{ block.settings.btn_font_weight | default: '600' }};
          text-transform: {{ block.settings.btn_text_transform | default: 'uppercase' }};
          letter-spacing: {{ block.settings.btn_letter_spacing | default: 1 }}px;
          padding: {{ block.settings.btn_padding_v | default: 14 }}px {{ block.settings.btn_padding_h | default: 28 }}px;
          transition: all 0.25s ease;
        }
        #FaqAccordion-{{ section.id }} .faq-accordion__btn-wrapper[data-block-id="{{ block.id }}"] .faq-accordion__btn:hover {
          color: {{ block.settings.btn_text_color_hover | default: '#ffffff' }};
          {% unless block.settings.use_gradient %}
            background-color: {{ block.settings.btn_bg_color_hover | default: '#333333' }};
          {% endunless %}
        }
      {% endif %}
    {% endif %}
  {% endfor %}
/* ── 2-column FAQ layout (no image, desktop only) ─────── */
  {% unless section.settings.show_image %}
    {% if section.settings.two_col_desktop %}
      @media screen and (min-width: 750px) {
        #FaqAccordion-{{ section.id }} .faq-accordion__items {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: {{ section.settings.accordion_gap }}px;
          align-items: start;
        }
        #FaqAccordion-{{ section.id }} .faq-accordion__items .faq-accordion__item {
          margin-bottom: 0;
        }
        #FaqAccordion-{{ section.id }} .faq-accordion__items .faq-accordion__html-block,
        #FaqAccordion-{{ section.id }} .faq-accordion__items .faq-accordion__btn-wrapper {
          grid-column: 1 / -1;
        }
      }
    {% endif %}
  {% endunless %}
{%- endstyle -%}

<div
  id="FaqAccordion-{{ section.id }}"
  class="faq-accordion color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient animate-section animate--hidden content-for-grouping {{ section.settings.visibility }} section-{{ section.id }}-margin layout--{{ section.settings.layout }}"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding">
    <div class="faq-accordion__inner">

      {% comment %} Image column {% endcomment %}
      {% if section.settings.show_image %}
        <div class="faq-accordion__image-col animate-item animate-item--child" style="--index: 0;">
          <div class="faq-accordion__image-wrapper">
            {% if section.settings.image != blank %}
              {{ section.settings.image | image_url: width: 1200 | image_tag:
                loading: 'lazy',
                class: 'faq-accordion__image'
              }}
            {% else %}
              <div class="faq-accordion__image-placeholder">
                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              </div>
            {% endif %}
          </div>
        </div>
      {% endif %}

      {% comment %} Content column {% endcomment %}
      <div class="faq-accordion__content-col">

        {% comment %} Heading {% endcomment %}
        {% if section.settings.title != blank %}
          <div class="faq-accordion__heading-wrapper animate-item animate-item--child" style="--index: 0;">
            <h2 class="faq-accordion__heading {{ section.settings.heading_size }} title-with-highlight" style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};">
              {{ section.settings.title }}
            </h2>
          </div>
        {% endif %}

        {% comment %} Intro text {% endcomment %}
        {% if section.settings.intro_text != blank %}
          <div class="faq-accordion__intro rte animate-item animate-item--child" style="--index: 1;">
            {{ section.settings.intro_text }}
          </div>
        {% endif %}

        {% comment %} FAQ blocks {% endcomment %}
        <div class="faq-accordion__items">
          {% assign block_index = 2 %}
          {% for block in section.blocks %}
            {% case block.type %}

              {% when 'faq_item' %}
                <div
                  class="faq-accordion__item animate-item animate-item--child"
                  style="--index: {{ block_index }};"
                  data-block-id="{{ block.id }}"
                  {{ block.shopify_attributes }}
                >
                  <button
                    class="faq-accordion__question"
                    type="button"
                    aria-expanded="{% if block.settings.open_by_default %}true{% else %}false{% endif %}"
                    data-faq-trigger
                  >
                    {% if block.settings.badge_text != blank %}
                      <span class="faq-accordion__badge">{{ block.settings.badge_text }}</span>
                    {% endif %}
                    <span class="faq-accordion__question-row">
                      {% if block.settings.icon_material != blank or block.settings.icon_svg != blank %}
                        <span class="faq-accordion__icon-before" style="display:flex;align-items:center;margin-right:10px;flex-shrink:0;">
                          {% if block.settings.icon_svg != blank %}
                            {{ block.settings.icon_svg }}
                          {% elsif block.settings.icon_material != blank %}
                            {% render 'material-icon', icon: block.settings.icon_material, filled: block.settings.icon_material_filled %}
                          {% endif %}
                        </span>
                      {% endif %}
                      <span class="faq-accordion__question-text">{{ block.settings.question }}</span>
                      <span class="faq-accordion__chevron" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </span>
                    </span>
                  </button>
                  <div class="faq-accordion__answer" data-faq-content>
                    <div class="faq-accordion__answer-inner rte">
                      {% if block.settings.answer_page != blank %}
                        {{ pages[block.settings.answer_page].content }}
                      {% else %}
                        {{ block.settings.answer }}
                      {% endif %}
                      {% if block.settings.custom_html != blank %}
                        <div class="faq-accordion__custom-content">{{ block.settings.custom_html }}</div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                {% assign block_index = block_index | plus: 1 %}

              {% when 'custom_html' %}
                <div
                  class="faq-accordion__html-block animate-item animate-item--child"
                  style="--index: {{ block_index }};"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.html_content }}
                </div>
                {% assign block_index = block_index | plus: 1 %}

              {% when 'button' %}
                {% if block.settings.button_text != blank %}
                  <div
                    class="faq-accordion__btn-wrapper animate-item animate-item--child"
                    style="--index: {{ block_index }};"
                    data-block-id="{{ block.id }}"
                    {{ block.shopify_attributes }}
                  >
                    {% if block.settings.scroll_to_section != blank %}
                      <a
                        href="#"
                        class="faq-accordion__btn{% unless block.settings.use_custom_styles %} button{% endunless %} scroll-to-section"
                        data-scroll-target="{{ block.settings.scroll_to_section }}"
                      >{{ block.settings.button_text }}</a>
                    {% else %}
                      <a
                        href="{{ block.settings.button_link | default: '#' }}"
                        class="faq-accordion__btn{% unless block.settings.use_custom_styles %} button{% endunless %}"
                      >{{ block.settings.button_text }}</a>
                    {% endif %}
                  </div>
                  {% assign block_index = block_index | plus: 1 %}
                {% endif %}

            {% endcase %}
          {% endfor %}
        </div>

      </div>{% comment %} /.faq-accordion__content-col {% endcomment %}
    </div>{% comment %} /.faq-accordion__inner {% endcomment %}
  </div>{% comment %} /.page-width {% endcomment %}
</div>{% comment %} /#FaqAccordion-{{ section.id }} {% endcomment %}

<script>
(function () {
  'use strict';

  function initAccordion(el) {
    // Strip any stale click listeners by replacing each trigger with a fresh clone
    el.querySelectorAll('[data-faq-trigger]').forEach((trigger) => {
      const fresh = trigger.cloneNode(true);
      trigger.parentNode.replaceChild(fresh, trigger);
    });

    // Now wire up the fresh triggers
    el.querySelectorAll('[data-faq-trigger]').forEach((trigger) => {
      const content = trigger.closest('.faq-accordion__item').querySelector('[data-faq-content]');
      if (!content) return;

      // Set initial max-height based on aria-expanded state
      content.style.maxHeight = trigger.getAttribute('aria-expanded') === 'true'
        ? content.scrollHeight + 'px'
        : '0';

      trigger.addEventListener('click', () => {
        const isOpen = trigger.getAttribute('aria-expanded') === 'true';
        if (isOpen) {
          trigger.setAttribute('aria-expanded', 'false');
          content.style.maxHeight = content.scrollHeight + 'px';
          requestAnimationFrame(() => { content.style.maxHeight = '0'; });
        } else {
          trigger.setAttribute('aria-expanded', 'true');
          content.style.maxHeight = content.scrollHeight + 'px';
        }
      });
    });
  }

  function initAllAccordions() {
    document.querySelectorAll('.faq-accordion[id^="FaqAccordion-"]').forEach(initAccordion);
  }

  function initScrollBtns() {
    document.querySelectorAll('.faq-accordion .scroll-to-section').forEach((btn) => {
      const fresh = btn.cloneNode(true);
      btn.parentNode.replaceChild(fresh, btn);
      fresh.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.dataset.scrollTarget);
        if (target) {
          const y = target.getBoundingClientRect().top + window.pageYOffset - 20;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      });
    });
  }

  // Initial page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => { initAllAccordions(); initScrollBtns(); });
  } else {
    initAllAccordions();
    initScrollBtns();
  }

  // Theme editor — fires when section HTML is re-rendered after a setting change
  document.addEventListener('shopify:section:load', (e) => {
    const el = e.target.querySelector('.faq-accordion[id^="FaqAccordion-"]');
    if (el) { initAccordion(el); initScrollBtns(); }
  });

  // Theme editor — block selected: open that FAQ item
  document.addEventListener('shopify:block:select', (e) => {
    const trigger = e.target.querySelector('[data-faq-trigger]');
    const content = e.target.querySelector('[data-faq-content]');
    if (trigger && content && trigger.getAttribute('aria-expanded') !== 'true') {
      trigger.setAttribute('aria-expanded', 'true');
      content.style.maxHeight = content.scrollHeight + 'px';
    }
  });

  // Theme editor — block deselected: close that FAQ item
  document.addEventListener('shopify:block:deselect', (e) => {
    const trigger = e.target.querySelector('[data-faq-trigger]');
    const content = e.target.querySelector('[data-faq-content]');
    if (trigger && content && trigger.getAttribute('aria-expanded') === 'true') {
      trigger.setAttribute('aria-expanded', 'false');
      content.style.maxHeight = content.scrollHeight + 'px';
      requestAnimationFrame(() => { content.style.maxHeight = '0'; });
    }
  });
})();
</script>

{% schema %}
{
  "name": "FAQ Accordion",
  "class": "section",
  "tag": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [

    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "default": "always-display"
    },

    { "type": "header", "content": "Heading" },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "You got questions, <em>we got answers</em>",
      "info": "Bold words are highlighted. Italic words use the italic style setting below."
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Bold text gradient",
      "default": "linear-gradient(90deg, #5d5aaf 0%, #ff6b9d 100%)"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "heading_margin_bottom",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Heading margin bottom",
      "default": 16
    },

    { "type": "header", "content": "Italic Text Style" },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic style",
      "options": [
        { "value": "underline", "label": "Underline" },
        { "value": "italic", "label": "Italic" },
        { "value": "font_family", "label": "Custom font family" }
      ],
      "default": "italic"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#6D388B"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic font family",
      "options": [
        { "value": "inherit", "label": "Inherit (default)" },
        { "value": "serif", "label": "Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "instrument-serif", "label": "Instrument Serif" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "inherit"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "Exact font name from fonts.google.com (e.g. Playfair Display). Font is loaded automatically.",
      "placeholder": "Playfair Display"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic font weight",
      "options": [
        { "value": "inherit", "label": "Default (inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit"
    },

    { "type": "header", "content": "Intro Text" },
    {
      "type": "richtext",
      "id": "intro_text",
      "label": "Intro text",
      "default": "<p>Find answers to common questions about our products and services.</p>"
    },
    {
      "type": "range",
      "id": "intro_margin_bottom",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Intro margin bottom",
      "default": 24
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Image position",
      "options": [
        { "value": "image-left", "label": "Image left" },
        { "value": "image-right", "label": "Image right" }
      ],
      "default": "image-left"
    },
    {
      "type": "range",
      "id": "layout_gap",
      "min": 16,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Gap between columns",
      "default": 48
    },

    { "type": "header", "content": "Image" },
    {
      "type": "checkbox",
      "id": "show_image",
      "label": "Show image",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 30,
      "max": 55,
      "step": 5,
      "unit": "%",
      "label": "Image column width (desktop)",
      "default": 45
    },
    {
      "type": "select",
      "id": "image_aspect_ratio",
      "label": "Aspect ratio",
      "options": [
        { "value": "original", "label": "Original" },
        { "value": "square", "label": "Square (1:1)" },
        { "value": "portrait", "label": "Portrait (3:4)" },
        { "value": "landscape", "label": "Landscape (16:9)" },
        { "value": "wide", "label": "Wide (21:9)" }
      ],
      "default": "square"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Image border radius",
      "default": 8
    },
    {
      "type": "checkbox",
      "id": "hide_image_on_mobile",
      "label": "Hide image on mobile",
      "default": false
    },

    { "type": "header", "content": "Accordion Items" },
    {
      "type": "range",
      "id": "accordion_gap",
      "min": 0,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Gap between items",
      "default": 8
    },
    {
      "type": "range",
      "id": "accordion_border_width",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1
    },
    {
      "type": "color",
      "id": "accordion_border_color",
      "label": "Border color",
      "default": "#e0e0e0"
    },
    {
      "type": "range",
      "id": "accordion_border_radius",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 8
    },
    {
      "type": "checkbox",
      "id": "border_bottom_only",
      "label": "Border bottom only",
      "default": false,
      "info": "Show only a bottom divider between items."
    },
    {
      "type": "checkbox",
      "id": "two_col_desktop",
      "label": "2 columns on desktop (when image hidden)",
      "default": false,
      "info": "Only applies when Show image is disabled."
    },
    { "type": "header", "content": "Question Style" },
    {
      "type": "color",
      "id": "question_bg_color",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "question_bg_hover",
      "label": "Background hover",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "question_bg_active",
      "label": "Background active",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "question_text_color",
      "label": "Text color",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "question_color_active",
      "label": "Text color active",
      "default": "#121212"
    },
    {
      "type": "range",
      "id": "question_font_size",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 17
    },
    {
      "type": "select",
      "id": "question_font_weight",
      "label": "Font weight",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "600"
    },
    {
      "type": "range",
      "id": "question_padding_vertical",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding vertical",
      "default": 16
    },
    {
      "type": "range",
      "id": "question_padding_horizontal",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 20
    },

    { "type": "header", "content": "Answer Style" },
    {
      "type": "color",
      "id": "answer_bg_color",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "answer_text_color",
      "label": "Text color",
      "default": "#4a4a4a"
    },
    {
      "type": "range",
      "id": "answer_font_size",
      "min": 12,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 15
    },
    {
      "type": "select",
      "id": "answer_font_weight",
      "label": "Font weight",
      "options": [
        { "value": "300", "label": "Light" },
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" }
      ],
      "default": "400"
    },
    {
      "type": "range",
      "id": "answer_padding_v",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding vertical",
      "default": 20
    },
    {
      "type": "range",
      "id": "answer_padding_h",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 20
    },

    { "type": "header", "content": "Badge Defaults" },
    {
      "type": "color",
      "id": "badge_bg_color",
      "label": "Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "badge_font_size",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 12
    },
    {
      "type": "select",
      "id": "badge_font_weight",
      "label": "Font weight",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "600"
    },
    {
      "type": "color",
      "id": "badge_border_color",
      "label": "Border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "badge_border_width",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 0
    },
    {
      "type": "range",
      "id": "badge_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 4
    },
    {
      "type": "range",
      "id": "badge_padding_v",
      "min": 2,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Padding vertical",
      "default": 4
    },
    {
      "type": "range",
      "id": "badge_padding_h",
      "min": 4,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 10
    },
    {
      "type": "range",
      "id": "badge_margin_bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Margin bottom",
      "default": 8
    },

    { "type": "header", "content": "Color Scheme" },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "info": "Custom color scheme settings are at the bottom of this panel."
    },

    { "type": "header", "content": "Padding" },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 60
    },

    { "type": "header", "content": "Margin" },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile margin bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop margin bottom",
      "default": 0
    },

    { "type": "header", "content": "Custom Color Scheme", "info": "Applied when Color scheme is set to Custom." },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "Overrides background color when set."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "Falls back to desktop image if empty."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "label": "Solid button background",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "label": "Solid button label",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "label": "Outline button",
      "default": "#121212"
    }
  ],

  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ Item",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "What is your return policy?"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>We offer a 30-day return policy on all items in original condition with tags attached.</p>",
          "info": "Ignored if an Answer page is selected below."
        },
        {
          "type": "page",
          "id": "answer_page",
          "label": "Answer page",
          "info": "If selected, replaces the Answer text above. Custom HTML below is always shown."
        },
        {
          "type": "html",
          "id": "custom_html",
          "label": "Additional custom HTML (optional)"
        },
        {
          "type": "checkbox",
          "id": "open_by_default",
          "label": "Open by default",
          "default": false
        },
        { "type": "header", "content": "Badge" },
        {
          "type": "text",
          "id": "badge_text",
          "label": "Badge text",
          "info": "Leave empty to hide the badge."
        },
        {
          "type": "checkbox",
          "id": "badge_override_section",
          "label": "Override section badge styles",
          "default": false
        },
        {
          "type": "color",
          "id": "badge_bg_color",
          "label": "Background",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "badge_text_color",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "badge_font_size",
          "min": 10,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 12
        },
        {
          "type": "select",
          "id": "badge_font_weight",
          "label": "Font weight",
          "options": [
            { "value": "400", "label": "Regular" },
            { "value": "500", "label": "Medium" },
            { "value": "600", "label": "Semi-Bold" },
            { "value": "700", "label": "Bold" }
          ],
          "default": "600"
        },
        {
          "type": "color",
          "id": "badge_border_color",
          "label": "Border color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "badge_border_width",
          "min": 0,
          "max": 5,
          "step": 1,
          "unit": "px",
          "label": "Border width",
          "default": 0
        },
        {
          "type": "range",
          "id": "badge_border_radius",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Border radius",
          "default": 4
        },
        {
          "type": "range",
          "id": "badge_padding_v",
          "min": 2,
          "max": 16,
          "step": 1,
          "unit": "px",
          "label": "Padding vertical",
          "default": 4
        },
        {
          "type": "range",
          "id": "badge_padding_h",
          "min": 4,
          "max": 24,
          "step": 1,
          "unit": "px",
          "label": "Padding horizontal",
          "default": 10
        },
        {
          "type": "range",
          "id": "badge_margin_bottom",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Margin bottom",
          "default": 8
        },
        { "type": "header", "content": "Icon" },
        {
          "type": "text",
          "id": "icon_material",
          "label": "Google Material icon name",
          "info": "e.g. check_circle, help, star. [Browse icons](https://fonts.google.com/icons)"
        },
        {
          "type": "checkbox",
          "id": "icon_material_filled",
          "label": "Filled icon style",
          "default": false
        },
        {
          "type": "html",
          "id": "icon_svg",
          "label": "Custom SVG icon",
          "info": "Overrides Material icon if both are provided."
        }
      ]
    },
    {
      "type": "custom_html",
      "name": "Custom HTML",
      "settings": [
        {
          "type": "html",
          "id": "html_content",
          "label": "HTML",
          "default": "<div style='padding:20px;background:#f9f9f9;border-radius:8px;text-align:center;'><p>Add your custom HTML here</p></div>"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button",
      "settings": [
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "text",
          "id": "scroll_to_section",
          "label": "Scroll-to section ID",
          "info": "Full Shopify section ID starting with # (e.g. #shopify-section-template--19056238231739__my_section). Takes priority over Button link. Enable 'Display section ID' on the target section to copy its ID."
        },
        {
          "type": "checkbox",
          "id": "hide_on_desktop",
          "label": "Hide on desktop",
          "default": false
        },
        {
          "type": "select",
          "id": "alignment_desktop",
          "label": "Alignment (desktop)",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "left"
        },
        {
          "type": "select",
          "id": "alignment_mobile",
          "label": "Alignment (mobile)",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "checkbox",
          "id": "full_width_mobile",
          "label": "Full width on mobile",
          "default": false
        },
        { "type": "header", "content": "Custom Styles" },
        {
          "type": "checkbox",
          "id": "use_custom_styles",
          "label": "Use custom styles",
          "default": false,
          "info": "Override theme button styles with settings below."
        },
        {
          "type": "color",
          "id": "btn_text_color",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "btn_bg_color",
          "label": "Background color",
          "default": "#121212"
        },
        {
          "type": "checkbox",
          "id": "use_gradient",
          "label": "Use gradient background",
          "default": false
        },
        {
          "type": "color_background",
          "id": "btn_gradient",
          "label": "Gradient"
        },
        {
          "type": "color",
          "id": "btn_text_color_hover",
          "label": "Text color (hover)",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "btn_bg_color_hover",
          "label": "Background (hover)",
          "default": "#333333"
        },
        {
          "type": "range",
          "id": "btn_border_width",
          "min": 0,
          "max": 8,
          "step": 1,
          "unit": "px",
          "label": "Border width",
          "default": 0
        },
        {
          "type": "color",
          "id": "btn_border_color",
          "label": "Border color",
          "default": "#121212"
        },
        {
          "type": "range",
          "id": "btn_border_radius",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "label": "Border radius",
          "default": 4
        },
        {
          "type": "range",
          "id": "btn_font_size",
          "min": 12,
          "max": 28,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 15
        },
        {
          "type": "select",
          "id": "btn_font_weight",
          "label": "Font weight",
          "options": [
            { "value": "400", "label": "Regular" },
            { "value": "500", "label": "Medium" },
            { "value": "600", "label": "Semi-Bold" },
            { "value": "700", "label": "Bold" }
          ],
          "default": "600"
        },
        {
          "type": "select",
          "id": "btn_text_transform",
          "label": "Text transform",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "uppercase", "label": "Uppercase" },
            { "value": "capitalize", "label": "Capitalize" }
          ],
          "default": "none"
        },
        {
          "type": "range",
          "id": "btn_letter_spacing",
          "min": 0,
          "max": 8,
          "step": 0.5,
          "unit": "px",
          "label": "Letter spacing",
          "default": 0
        },
        {
          "type": "range",
          "id": "btn_padding_v",
          "min": 8,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Padding vertical",
          "default": 14
        },
        {
          "type": "range",
          "id": "btn_padding_h",
          "min": 12,
          "max": 60,
          "step": 2,
          "unit": "px",
          "label": "Padding horizontal",
          "default": 28
        },
        {
          "type": "range",
          "id": "btn_icon_gap",
          "min": 0,
          "max": 20,
          "step": 2,
          "unit": "px",
          "label": "Icon gap",
          "default": 8
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 8
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 16
        }
      ]
    }
  ],

  "presets": [
    {
      "name": "FAQ Accordion",
      "category": "FAQ",
      "settings": {
        "title": "You got questions, <em>we got answers</em>",
        "heading_size": "h1",
        "heading_alignment": "left",
        "enable_gradient": false,
        "italic_style": "italic",
        "intro_text": "<p>Find answers to common questions about our products and services.</p>",
        "layout": "image-left",
        "layout_gap": 48,
        "show_image": true,
        "image_width": 45,
        "image_aspect_ratio": "square",
        "image_border_radius": 8,
        "hide_image_on_mobile": false,
        "accordion_gap": 8,
        "accordion_border_width": 1,
        "accordion_border_color": "#e0e0e0",
        "accordion_border_radius": 8,
        "border_bottom_only": false,
        "question_bg_color": "#ffffff",
        "question_bg_hover": "#f5f5f5",
        "question_bg_active": "#ffffff",
        "question_text_color": "#121212",
        "question_color_active": "#121212",
        "question_font_size": 17,
        "question_font_weight": "600",
        "question_padding_vertical": 16,
        "question_padding_horizontal": 20,
        "answer_bg_color": "#ffffff",
        "answer_text_color": "#4a4a4a",
        "answer_font_size": 15,
        "answer_font_weight": "400",
        "answer_padding_v": 20,
        "answer_padding_h": 20,
        "color_scheme": "background-1",
        "padding_top": 60,
        "padding_bottom": 60,
        "visibility": "always-display"
      },
      "blocks": [
        {
          "type": "faq_item",
          "settings": {
            "question": "What is your return policy?",
            "answer": "<p>We offer a 30-day return policy on all items in original condition with tags attached. Simply reach out to our support team to start the process.</p>"
          }
        },
        {
          "type": "faq_item",
          "settings": {
            "question": "How long does shipping take?",
            "answer": "<p>Standard shipping takes 5–7 business days. Express shipping is available at checkout and typically arrives in 2–3 business days.</p>"
          }
        },
        {
          "type": "faq_item",
          "settings": {
            "question": "Do you ship internationally?",
            "answer": "<p>Yes! We ship to most countries worldwide. Shipping costs and delivery windows vary by destination — enter your address at checkout for an accurate estimate.</p>"
          }
        },
        {
          "type": "faq_item",
          "settings": {
            "question": "How do I track my order?",
            "answer": "<p>Once your order ships you'll receive a confirmation email with a tracking link. You can also log into your account to view real-time status updates.</p>"
          }
        },
        {
          "type": "button",
          "settings": {
            "button_text": "View All FAQs",
            "alignment_desktop": "left",
            "alignment_mobile": "center",
            "use_custom_styles": false,
            "margin_top": 16,
            "margin_bottom": 0
          }
        }
      ]
    }
  ]
}
{% endschema %}