{%- comment -%}
  MW · Made to be worn — centered product image flanked by feature callouts.
  Self-contained OS 2.0 section. Portable: paste into any theme's /sections.
{%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{%- assign half = section.blocks.size | plus: 1 | divided_by: 2 -%}

{% style %}
  #shopify-section-{{ section.id }}{
    --mb-bg: {{ section.settings.bg_color }};
    --mb-ink: {{ section.settings.heading_color }};
    --mb-icon: {{ section.settings.icon_color }};
    --mb-title: {{ section.settings.feature_title_color }};
    --mb-text: {{ section.settings.text_color }};
  }
  .mb-{{ uid }}{ background:var(--mb-bg); }
  .mb-{{ uid }} .mb__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .mb-{{ uid }} .mb__title{ font-family:{{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }}; font-weight:{{ section.settings.heading_font.weight | default: 700 }}; font-size:clamp(26px, {{ section.settings.heading_size | times: 0.028 }}vw + 16px, {{ section.settings.heading_size }}px); letter-spacing:-.01em; line-height:1.1; color:var(--mb-ink); text-align:center; margin:0 0 clamp(28px,4vw,52px); }
  .mb-{{ uid }} .mb__grid{ display:grid; grid-template-columns:1fr minmax(260px,{{ section.settings.image_width }}px) 1fr; align-items:center; gap:clamp(24px,4vw,56px); }
  .mb-{{ uid }} .mb__col{ display:flex; flex-direction:column; gap:clamp(28px,5vw,60px); }
  .mb-{{ uid }} .mb__media{ border-radius:{{ section.settings.image_radius }}px; overflow:hidden; }
  .mb-{{ uid }} .mb__media img,.mb-{{ uid }} .mb__media .mw-img-ph{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:{{ section.settings.image_ratio }}; }
  .mb-{{ uid }} .mb__feat{ text-align:center; max-width:270px; margin-inline:auto; }
  .mb-{{ uid }} .mb__ico{ width:{{ section.settings.icon_size }}px; height:{{ section.settings.icon_size }}px; color:var(--mb-icon); margin:0 auto 14px; display:block; }
  .mb-{{ uid }} .mb__ft{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:17px; color:var(--mb-title); margin:0 0 8px; }
  .mb-{{ uid }} .mb__fd{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; line-height:1.6; color:var(--mb-text); margin:0; }
  @media (max-width:820px){
    .mb-{{ uid }} .mb__grid{ grid-template-columns:1fr 1fr; gap:34px 20px; }
    .mb-{{ uid }} .mb__media{ grid-column:1 / -1; grid-row:1; max-width:300px; margin:0 auto 6px; }
    .mb-{{ uid }} .mb__col{ gap:34px; }
  }
  @media (max-width:480px){
    .mb-{{ uid }} .mb__grid{ grid-template-columns:1fr; }
    .mb-{{ uid }} .mb__media{ max-width:260px; }
  }
{% endstyle %}

<section class="mb-{{ uid }}">
  <div class="mb__wrap">
    {%- if section.settings.heading != blank -%}<h2 class="mb__title">{{ section.settings.heading | escape }}</h2>{%- endif -%}
    <div class="mb__grid">
      <div class="mb__col">
        {%- for block in section.blocks -%}{%- if forloop.index <= half -%}
          <div class="mb__feat" {{ block.shopify_attributes }}>
            {% render 'mw-icon', name: block.settings.icon, class: 'mb__ico' %}
            {%- if block.settings.title != blank -%}<h3 class="mb__ft">{{ block.settings.title | escape }}</h3>{%- endif -%}
            {%- if block.settings.text != blank -%}<p class="mb__fd">{{ block.settings.text | escape }}</p>{%- endif -%}
          </div>
        {%- endif -%}{%- endfor -%}
      </div>
      <div class="mb__media">
        {% render 'mw-image', image: section.settings.image, url: section.settings.image_url, alt: section.settings.heading, width: 800, loading: 'eager' %}
      </div>
      <div class="mb__col">
        {%- for block in section.blocks -%}{%- if forloop.index > half -%}
          <div class="mb__feat" {{ block.shopify_attributes }}>
            {% render 'mw-icon', name: block.settings.icon, class: 'mb__ico' %}
            {%- if block.settings.title != blank -%}<h3 class="mb__ft">{{ block.settings.title | escape }}</h3>{%- endif -%}
            {%- if block.settings.text != blank -%}<p class="mb__fd">{{ block.settings.text | escape }}</p>{%- endif -%}
          </div>
        {%- endif -%}{%- endfor -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "MW · Made to be worn",
  "tag": "section",
  "class": "mw-section mw-image-benefits",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Made to be worn" },
    { "type": "image_picker", "id": "image", "label": "Center image" },
    { "type": "text", "id": "image_url", "label": "…or image URL", "info": "Used if no image is uploaded." },
    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "max_width", "min": 900, "max": 1400, "step": 10, "unit": "px", "label": "Content width", "default": 1120 },
    { "type": "range", "id": "image_width", "min": 240, "max": 460, "step": 10, "unit": "px", "label": "Image column width", "default": 360 },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "3/4.4", "options": [ {"value":"3/4","label":"Portrait 3:4"}, {"value":"3/4.4","label":"Tall 3:4.4"}, {"value":"9/16","label":"9:16"}, {"value":"1/1","label":"Square"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Image corner radius", "default": 2 },
    { "type": "range", "id": "icon_size", "min": 20, "max": 44, "step": 1, "unit": "px", "label": "Icon size", "default": 30 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 80 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 80 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "type": "header", "content": "Type & colour" },
    { "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": "range", "id": "heading_size", "min": 24, "max": 56, "step": 1, "unit": "px", "label": "Heading size", "default": 40 },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#F4EEE9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#1A1A1A" },
    { "type": "color", "id": "feature_title_color", "label": "Feature title", "default": "#1A1A1A" },
    { "type": "color", "id": "text_color", "label": "Feature text", "default": "#7C7266" },
    { "type": "color", "id": "icon_color", "label": "Icon", "default": "#1A1A1A" }
  ],
  "blocks": [
    { "type": "feature", "name": "Feature", "settings": [
      { "type": "select", "id": "icon", "label": "Icon", "default": "wind", "options": [
        {"value":"wind","label":"Air / breathable"}, {"value":"leaf","label":"Leaf"}, {"value":"wash","label":"Wash"},
        {"value":"ruler","label":"Ruler / sizing"}, {"value":"shield","label":"Shield"}, {"value":"heart","label":"Heart"},
        {"value":"sparkle","label":"Sparkle"}, {"value":"check-circle","label":"Check"}, {"value":"box","label":"Box"} ] },
      { "type": "text", "id": "title", "label": "Title", "default": "Feature title" },
      { "type": "textarea", "id": "text", "label": "Text", "default": "A short line about why this detail matters to the person wearing it." }
    ] }
  ],
  "max_blocks": 6,
  "presets": [ { "name": "MW · Made to be worn", "blocks": [
    { "type": "feature", "settings": { "icon": "wind", "title": "Knitted, Not Glued", "text": "Micro sequins are worked into the yarn itself, so nothing scratches, sheds or catches on a coat sleeve." } },
    { "type": "feature", "settings": { "icon": "wash", "title": "Machine Washable", "text": "Cold, gentle, inside out, dry flat. No dry-clean bill and no special bag for a dress you wear often." } },
    { "type": "feature", "settings": { "icon": "shield", "title": "Fully Lined", "text": "A smooth lining runs the length of the body, which is why the knit skims the hip and needs no slip." } },
    { "type": "feature", "settings": { "icon": "ruler", "title": "Eight Sizes", "text": "One silhouette cut across eight sizes, graded so the hem hangs true on every one of them." } }
  ] } ]
}
{% endschema %}