{%- comment -%} MW · Collapsible — full-width accordion content (no sidebar). {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --cb-bg:{{ section.settings.section_bg }}; --cb-head:{{ section.settings.heading_color }}; --cb-accent:{{ section.settings.accent_color }}; --cb-accent2:{{ section.settings.accent_color_2 }}; --cb-sub:{{ section.settings.sub_color }}; --cb-q:{{ section.settings.title_color }}; --cb-a:{{ section.settings.text_color }}; --cb-line:{{ section.settings.line_color }}; --cb-ic:{{ section.settings.icon_color }}; --cb-card:{{ section.settings.card_bg }}; }
  .cb-{{ uid }}{ background:var(--cb-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .cb-{{ uid }} .cb__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; }
  .cb-{{ uid }} .cb__head{ text-align:center; max-width:620px; margin:0 auto clamp(22px,3vw,38px); }
  .cb-{{ uid }} .cb__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.6vw,32px); color:var(--cb-head); margin:0; line-height:1.14; }
  .cb-{{ uid }} .cb__h .ac{ color:var(--cb-accent); background:linear-gradient(99deg,var(--cb-accent) 0%,var(--cb-accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .cb-{{ uid }} .cb__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; color:var(--cb-sub); margin:10px 0 0; }
  .cb-{{ uid }} .cb__item{ {% if section.settings.boxed %}background:var(--cb-card); border:1px solid var(--cb-line); border-radius:12px; margin-bottom:10px; padding:2px 18px;{% else %}border-bottom:1px solid var(--cb-line);{% endif %} }
  .cb-{{ uid }} .cb__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:18px 2px; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:16px; color:var(--cb-q); }
  .cb-{{ uid }} .cb__item summary::-webkit-details-marker{ display:none; }
  .cb-{{ uid }} .cb__item summary .lead{ width:20px; height:20px; color:var(--cb-accent); flex:none; }
  .cb-{{ uid }} .cb__ch{ margin-left:auto; width:18px; height:18px; color:var(--cb-ic); transition:transform .25s; flex:none; }
  .cb-{{ uid }} .cb__item[open] .cb__ch{ transform:rotate(180deg); }
  .cb-{{ uid }} .cb__body{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14.5px; line-height:1.65; color:var(--cb-a); padding:0 2px 18px; }
  .cb-{{ uid }} .cb__body p{ margin:0 0 10px; } .cb-{{ uid }} .cb__body p:last-child{ margin:0; }
  .cb-{{ uid }} .cb__item[open] .cb__body{ animation:cb-open-{{ uid }} .3s ease; }
  @keyframes cb-open-{{ uid }}{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
{% endstyle %}
<div class="cb-{{ uid }}">
  <div class="cb__wrap">
    {%- if section.settings.heading != blank or section.settings.sub != blank -%}
    <div class="cb__head">
      {%- if section.settings.heading != blank -%}<h2 class="cb__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="cb__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
    </div>
    {%- endif -%}
    {%- for block in section.blocks -%}
      <details class="cb__item" {% if block.settings.open %}open{% endif %} {{ block.shopify_attributes }}>
        <summary>{% if block.settings.icon != blank %}{% render 'mw-icon', name: block.settings.icon, class: 'lead' %}{% endif %}{{ block.settings.title | escape }}{% render 'mw-icon', name: 'chevron', class: 'cb__ch' %}</summary>
        <div class="cb__body">{{ block.settings.content }}</div>
      </details>
    {%- endfor -%}
  </div>
</div>
{% schema %}
{
  "name": "MW · Collapsible",
  "tag": "section",
  "class": "mw-section mw-collapsible",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent. Leave blank to hide.", "default": "Good to <span class=\"ac\">know</span>" },
    { "type": "text", "id": "sub", "label": "Sub" },
    { "type": "checkbox", "id": "boxed", "label": "Boxed rows", "default": false },
    { "type": "range", "id": "max_width", "min": 600, "max": 1100, "step": 10, "unit": "px", "label": "Content width", "default": 820 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 64 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 64 },
    { "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": "Background", "default": "#F4EEE9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#1A1A1A" },
    { "type": "color", "id": "accent_color", "label": "Accent (gradient start)", "default": "#B79B6E" },
    { "type": "color", "id": "accent_color_2", "label": "Accent (gradient end)", "default": "#D6C19E" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#7C7266" },
    { "type": "color", "id": "card_bg", "label": "Boxed row background", "default": "#FFFFFF" },
    { "type": "color", "id": "title_color", "label": "Title", "default": "#241C15" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#5C5449" },
    { "type": "color", "id": "line_color", "label": "Lines", "default": "#DCD1BE" },
    { "type": "color", "id": "icon_color", "label": "Chevron", "default": "#7C7266" }
  ],
  "blocks": [
    { "type": "row", "name": "Row", "settings": [
      { "type": "select", "id": "icon", "label": "Lead icon (optional)", "options": [ {"value":"","label":"None"}, {"value":"truck","label":"Truck"}, {"value":"leaf","label":"Leaf"}, {"value":"ruler","label":"Ruler"}, {"value":"wash","label":"Wash"}, {"value":"shield","label":"Shield"}, {"value":"sparkle","label":"Sparkle"} ] },
      { "type": "text", "id": "title", "label": "Title", "default": "Shipping & delivery" },
      { "type": "richtext", "id": "content", "label": "Content", "default": "<p>Free shipping over $50. Orders dispatched in 1–2 business days and delivered in 5–7.</p>" },
      { "type": "checkbox", "id": "open", "label": "Open by default", "default": false }
    ] }
  ],
  "max_blocks": 16,
  "presets": [ { "name": "MW · Collapsible", "blocks": [
    { "type": "row", "settings": { "icon": "truck", "title": "Shipping & delivery", "content": "<p>Free shipping over $50. Dispatched in 1–2 business days, delivered in 5–7.</p>", "open": true } },
    { "type": "row", "settings": { "icon": "ruler", "title": "Sizing & fit", "content": "<p>Order your usual size. The knit has give and the fit is graded across eight sizes.</p>" } },
    { "type": "row", "settings": { "icon": "wash", "title": "Care", "content": "<p>Machine wash cold, gentle, inside out and dry flat. No dry cleaning.</p>" } },
    { "type": "row", "settings": { "icon": "refresh", "title": "Returns", "content": "<p>60-day returns and free size swaps both ways. One email and you are covered.</p>" } }
  ] } ]
}
{% endschema %}