{%- comment -%} MW · How It Works — numbered process steps with connecting line. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --hw-bg:{{ section.settings.section_bg }}; --hw-head:{{ section.settings.heading_color }}; --hw-accent:{{ section.settings.accent_color }}; --hw-accent2:{{ section.settings.accent_color_2 }}; --hw-sub:{{ section.settings.sub_color }}; --hw-num:{{ section.settings.number_color }}; --hw-numbg:{{ section.settings.number_bg }}; --hw-stitle:{{ section.settings.step_title_color }}; --hw-stext:{{ section.settings.step_text_color }}; --hw-line:{{ section.settings.line_color }}; }
  .hw-{{ uid }}{ background:var(--hw-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .hw-{{ uid }} .hw__wrap{ max-width:{{ section.settings.max_width }}px; margin:0 auto; }
  .hw-{{ uid }} .hw__head{ text-align:center; max-width:600px; margin:0 auto clamp(28px,4vw,52px); }
  .hw-{{ uid }} .hw__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(24px,2.8vw,34px); color:var(--hw-head); margin:0; line-height:1.12; }
  .hw-{{ uid }} .hw__h .ac{ color:var(--hw-accent); background:linear-gradient(99deg,var(--hw-accent) 0%,var(--hw-accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .hw-{{ uid }} .hw__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; color:var(--hw-sub); margin:10px 0 0; }
  .hw-{{ uid }} .hw__grid{ display:grid; grid-template-columns:repeat({{ section.blocks.size }},1fr); gap:clamp(16px,3vw,32px); position:relative; }
  .hw-{{ uid }} .hw__grid:before{ content:""; position:absolute; left:10%; right:10%; top:26px; border-top:2px dashed var(--hw-line); z-index:0; }
  .hw-{{ uid }} .hw__step{ position:relative; z-index:1; text-align:center; }
  .hw-{{ uid }} .hw__num{ width:52px; height:52px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:20px; color:var(--hw-num); background:linear-gradient(180deg,var(--hw-accent2),var(--hw-numbg)); box-shadow:0 8px 20px rgba(58,48,39,.16); }
  .hw-{{ uid }} .hw__img{ width:100%; aspect-ratio:{{ section.settings.image_ratio }}; border-radius:{{ section.settings.image_radius }}px; overflow:hidden; margin-bottom:14px; background:var(--mw-gold-tint,#e9dec9); }
  .hw-{{ uid }} .hw__img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hw-{{ uid }} .hw__st{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:17px; color:var(--hw-stitle); margin:0 0 8px; }
  .hw-{{ uid }} .hw__sx{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:13.5px; line-height:1.6; color:var(--hw-stext); margin:0; max-width:30ch; margin-inline:auto; }
  @media (max-width:760px){ .hw-{{ uid }} .hw__grid{ grid-template-columns:1fr; gap:28px; } .hw-{{ uid }} .hw__grid:before{ display:none; } }
{% endstyle %}
<div class="hw-{{ uid }}">
  <div class="hw__wrap">
    <div class="hw__head">
      {%- if section.settings.heading != blank -%}<h2 class="hw__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="hw__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
    </div>
    <div class="hw__grid">
      {%- for block in section.blocks -%}
        <div class="hw__step" {{ block.shopify_attributes }}>
          <div class="hw__num">{{ forloop.index }}</div>
          {%- if block.settings.image != blank or block.settings.image_url != blank -%}<div class="hw__img">{% render 'mw-image', image: block.settings.image, url: block.settings.image_url, alt: block.settings.title, width: 500 %}</div>{%- endif -%}
          <h3 class="hw__st">{{ block.settings.title | escape }}</h3>
          <p class="hw__sx">{{ block.settings.text | escape }}</p>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · How It Works",
  "tag": "section",
  "class": "mw-section mw-how-it-works",
  "settings": [
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <span class=\"ac\">…</span> for the accent.", "default": "How it <span class=\"ac\">works</span>" },
    { "type": "text", "id": "sub", "label": "Sub", "default": "Three easy steps from unboxing to everyday wear." },
    { "type": "select", "id": "image_ratio", "label": "Step image ratio", "default": "1/1", "options": [ {"value":"1/1","label":"Square"}, {"value":"4/3","label":"4:3"}, {"value":"3/4","label":"3:4"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Image radius", "default": 10 },
    { "type": "range", "id": "max_width", "min": 900, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1120 },
    { "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": "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": "number_bg", "label": "Number circle base", "default": "#3A3027" },
    { "type": "color", "id": "number_color", "label": "Number text", "default": "#F3ECE1" },
    { "type": "color", "id": "step_title_color", "label": "Step title", "default": "#241C15" },
    { "type": "color", "id": "step_text_color", "label": "Step text", "default": "#7C7266" },
    { "type": "color", "id": "line_color", "label": "Connecting line", "default": "#DCD1BE" }
  ],
  "blocks": [
    { "type": "step", "name": "Step", "settings": [
      { "type": "image_picker", "id": "image", "label": "Image (optional)" },
      { "type": "text", "id": "image_url", "label": "…or image URL" },
      { "type": "text", "id": "title", "label": "Title", "default": "Step title" },
      { "type": "textarea", "id": "text", "label": "Text", "default": "A short line describing what happens in this step of the journey." }
    ] }
  ],
  "max_blocks": 5,
  "presets": [ { "name": "MW · How It Works", "blocks": [
    { "type": "step", "settings": { "title": "Pick your size", "text": "Order your usual size — the knit has give and the fit is graded across eight sizes." } },
    { "type": "step", "settings": { "title": "It arrives ready", "text": "Dispatched in 1–2 days, delivered in 5–7, in recyclable packaging with a free size-swap card." } },
    { "type": "step", "settings": { "title": "Wear it on repeat", "text": "Machine wash cold, dry flat, and reach for it from a coffee run to candlelight." } }
  ] } ]
}
{% endschema %}