{%- comment -%} MW · FAQ — trust sidebar + accordion (native details, no-JS fallback). {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --fq-bg:{{ section.settings.section_bg }}; --fq-head:{{ section.settings.heading_color }}; --fq-accent:{{ section.settings.accent_color }}; --fq-q:{{ section.settings.question_color }}; --fq-a:{{ section.settings.answer_color }}; --fq-line:{{ section.settings.divider_color }}; --fq-trust:{{ section.settings.trust_color }}; --fq-ic:{{ section.settings.icon_color }}; }
  .fq-{{ uid }}{ background:var(--fq-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .fq-{{ uid }} .fq__grid{ max-width:{{ section.settings.max_width }}px; margin:0 auto; display:grid; grid-template-columns:0.8fr 1.4fr; gap:clamp(28px,5vw,72px); align-items:start; }
  .fq-{{ uid }} .fq__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,32px); line-height:1.15; color:var(--fq-head); margin:0; }
  .fq-{{ uid }} .fq__h .ac{ color:var(--fq-accent); background:linear-gradient(99deg,var(--fq-accent) 0%,color-mix(in srgb,var(--fq-accent),#fff 32%) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .fq-{{ uid }} .fq__avs{ display:flex; margin:22px 0 8px; }
  .fq-{{ uid }} .fq__avs img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--fq-bg); margin-left:-10px; }
  .fq-{{ uid }} .fq__avs img:first-child{ margin-left:0; }
  .fq-{{ uid }} .fq__trust{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13px; color:var(--fq-trust); margin:0; }
  .fq-{{ uid }} .fq__item{ border-bottom:1px solid var(--fq-line); }
  .fq-{{ uid }} .fq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:16px; color:var(--fq-q); }
  .fq-{{ uid }} .fq__item summary::-webkit-details-marker{ display:none; }
  .fq-{{ uid }} .fq__pm{ position:relative; width:18px; height:18px; flex:none; color:var(--fq-ic); }
  .fq-{{ uid }} .fq__pm:before,.fq-{{ uid }} .fq__pm:after{ content:""; position:absolute; background:currentColor; border-radius:2px; transition:transform .25s ease,opacity .25s ease; }
  .fq-{{ uid }} .fq__pm:before{ top:8px; left:0; width:18px; height:2px; }
  .fq-{{ uid }} .fq__pm:after{ left:8px; top:0; width:2px; height:18px; }
  .fq-{{ uid }} .fq__item[open] .fq__pm:after{ transform:scaleY(0); opacity:0; }
  .fq-{{ uid }} .fq__body{ overflow:hidden; }
  .fq-{{ uid }} .fq__body p{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14.5px; line-height:1.65; color:var(--fq-a); margin:0 0 18px; padding-right:34px; }
  .fq-{{ uid }} .fq__item[open] .fq__body{ animation:fq-open-{{ uid }} .3s ease; }
  @keyframes fq-open-{{ uid }}{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  @media (max-width:820px){ .fq-{{ uid }} .fq__grid{ grid-template-columns:1fr; gap:22px; } }
{% endstyle %}
<div class="fq-{{ uid }}">
  <div class="fq__grid">
    <div class="fq__aside">
      {%- if section.settings.heading != blank -%}<h2 class="fq__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- assign avs = section.blocks | where: 'type', 'avatar' -%}
      {%- if avs.size > 0 -%}<div class="fq__avs">{%- for block in avs -%}{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, width: 96 %}{%- endfor -%}</div>{%- endif -%}
      {%- if section.settings.trust != blank -%}<p class="fq__trust">{{ section.settings.trust | escape }}</p>{%- endif -%}
    </div>
    <div class="fq__list">
      {%- for block in section.blocks -%}{%- if block.type == 'qa' -%}
        <details class="fq__item" {% if block.settings.open %}open{% endif %} {{ block.shopify_attributes }}>
          <summary>{{ block.settings.question | escape }}<span class="fq__pm"></span></summary>
          <div class="fq__body"><p>{{ block.settings.answer | escape }}</p></div>
        </details>
      {%- endif -%}{%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · FAQ",
  "tag": "section",
  "class": "mw-section mw-faq",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent word.", "default": "Answers to your <span class=\"ac\">important</span> questions" },
    { "type": "text", "id": "trust", "label": "Trust line", "default": "Trusted by 4,000+ customers" },
    { "type": "range", "id": "max_width", "min": 900, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1180 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 72 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 72 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n7" },
    { "type": "font_picker", "id": "body_font", "label": "Body font", "default": "inter_n4" },
    { "type": "color", "id": "section_bg", "label": "Section background", "default": "#EDE4DC" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#1A1A1A" },
    { "type": "color", "id": "accent_color", "label": "Accent", "default": "#B79B6E" },
    { "type": "color", "id": "question_color", "label": "Question", "default": "#241C15" },
    { "type": "color", "id": "answer_color", "label": "Answer", "default": "#5C5449" },
    { "type": "color", "id": "divider_color", "label": "Divider", "default": "#DCD1BE" },
    { "type": "color", "id": "trust_color", "label": "Trust text", "default": "#7C7266" },
    { "type": "color", "id": "icon_color", "label": "Toggle icon", "default": "#B79B6E" }
  ],
  "blocks": [
    { "type": "qa", "name": "Question", "settings": [
      { "type": "text", "id": "question", "label": "Question", "default": "Will the sequins scratch or shed?" },
      { "type": "textarea", "id": "answer", "label": "Answer", "default": "No. The sequins are knitted into the yarn rather than glued on top, so there is nothing to catch, scratch or fall off." },
      { "type": "checkbox", "id": "open", "label": "Open by default", "default": false }
    ] },
    { "type": "avatar", "name": "Trust avatar", "settings": [
      { "type": "image_picker", "id": "image", "label": "Avatar" },
      { "type": "text", "id": "image_url", "label": "…or avatar URL" }
    ] }
  ],
  "max_blocks": 20,
  "presets": [ { "name": "MW · FAQ", "blocks": [
    { "type": "avatar" }, { "type": "avatar" }, { "type": "avatar" },
    { "type": "qa", "settings": { "question": "Will the sequins scratch or shed?", "answer": "No. The sequins are knitted into the yarn rather than glued on top, so there is nothing to catch, scratch or fall off.", "open": true } },
    { "type": "qa", "settings": { "question": "How should I pick my size?", "answer": "Order your usual size. The knit has give and the fit is graded across eight sizes, so most people keep their normal pick." } },
    { "type": "qa", "settings": { "question": "Do I need a slip underneath?", "answer": "No. The dress is fully lined through the body, so it is opaque and smooth on its own." } },
    { "type": "qa", "settings": { "question": "Can I really machine wash it?", "answer": "Yes — cold, gentle, inside out and dry flat. No dry cleaning and no special bag." } },
    { "type": "qa", "settings": { "question": "Is it too dressy for daytime?", "answer": "Not at all. The sequins are matte and worked into the knit, so with a cardigan it reads as a knit dress, not a party dress." } }
  ] } ]
}
{% endschema %}