How It Works Steps

<section class="sl-how-it-works" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 2.5rem;max-width:640px;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.4rem 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'How it works' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <style>
      .sl-steps { display:grid; gap:clamp(1.25rem,3vw,2rem); grid-template-columns: 1fr; position: relative; }
      @media (min-width: 900px) {
        .sl-steps { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
        .sl-steps::before { content:""; position:absolute; top:1.35rem; left:12%; right:12%; height:0; border-top:2px dashed currentColor; opacity:.25; z-index:0; }
      }
    </style>
    <ol class="sl-steps" style="--n: {{ section.blocks.size | default: 4 }};list-style:none;padding:0;margin:0;">
      {%- for block in section.blocks -%}
        <li style="display:flex;flex-direction:column;gap:.75rem;text-align:center;position:relative;z-index:1;" {{ block.shopify_attributes }}>
          <span aria-hidden="true" style="align-self:center;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--sl-accent,#0a5cff);color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 0 0 6px {{ section.settings.bg_color | default: '#fff' }};">{{ forloop.index }}</span>
          {%- if block.settings.icon != blank -%}
            <span aria-hidden="true" style="font-size:1.75rem;line-height:1;">{{ block.settings.icon }}</span>
          {%- endif -%}
          <h3 style="margin:0;font-size:1.1rem;font-weight:700;line-height:1.3;">{{ block.settings.title }}</h3>
          {%- if block.settings.description != blank -%}
            <p style="margin:0;opacity:.8;line-height:1.55;font-size:.92rem;max-width:28ch;margin-inline:auto;">{{ block.settings.description }}</p>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ol>
  </div>
</section>
{% schema %}
{
  "name": "How It Works Steps",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Simple process" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "How it works" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Three easy steps from order to your door." },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji)", "default": "📦" },
        { "type": "text", "id": "title", "label": "Title", "default": "Step title" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "Short description of what happens in this step." }
      ]
    }
  ],
  "presets": [
    {
      "name": "How It Works Steps",
      "blocks": [
        { "type": "step", "settings": { "icon": "🛒", "title": "Choose your kit", "description": "Tell us about your routine and we'll recommend the right bundle." } },
        { "type": "step", "settings": { "icon": "📬", "title": "Get it delivered", "description": "Free shipping in 2-5 business days, tracked to your door." } },
        { "type": "step", "settings": { "icon": "✨", "title": "See results", "description": "Feel the difference within 14 days — or your money back." } },
        { "type": "step", "settings": { "icon": "🔁", "title": "Refill automatically", "description": "Subscribe & save 15% — skip or cancel anytime." } }
      ]
    }
  ]
}
{% endschema %}