Sustainability Band

<section class="sl-sustainability" style="padding:clamp(40px,6vw,64px) 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 2rem;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.5rem,3vw,2rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'Good for you. Good for the planet.' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <ul style="list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));">
      {%- for block in section.blocks -%}
        <li style="display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;padding:1rem;" {{ block.shopify_attributes }}>
          <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--sl-accent,#0a5cff);color:#fff;font-size:1.4rem;">{{ block.settings.icon | default: '🌱' }}</span>
          <strong style="font-size:1rem;line-height:1.3;">{{ block.settings.title }}</strong>
          {%- if block.settings.description != blank -%}
            <p style="margin:0;opacity:.75;line-height:1.55;font-size:.88rem;max-width:28ch;">{{ block.settings.description }}</p>
          {%- endif -%}
          {%- if block.settings.certifier != blank -%}
            <small style="opacity:.55;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;">{{ block.settings.certifier }}</small>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Sustainability Band",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Our commitments" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Good for you. Good for the planet." },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Every order is shipped carbon-neutral, and we donate 1% of revenue to environmental nonprofits." },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "blocks": [
    {
      "type": "cred",
      "name": "Credential",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji)", "default": "🌱" },
        { "type": "text", "id": "title", "label": "Title", "default": "Recycled materials" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "100% post-consumer recycled packaging." },
        { "type": "text", "id": "certifier", "label": "Certifier", "default": "FSC Certified" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sustainability Band",
      "blocks": [
        { "type": "cred", "settings": { "icon": "♻️", "title": "Recycled packaging", "description": "100% post-consumer recycled materials in every box.", "certifier": "FSC Certified" } },
        { "type": "cred", "settings": { "icon": "🌍", "title": "Carbon neutral", "description": "Every shipment offset through verified reforestation projects.", "certifier": "Climate Neutral" } },
        { "type": "cred", "settings": { "icon": "🤝", "title": "Fair trade", "description": "All cotton sourced from certified fair-trade farms in India and Peru.", "certifier": "Fair Trade USA" } },
        { "type": "cred", "settings": { "icon": "💚", "title": "1% for the planet", "description": "We donate 1% of every sale to environmental nonprofits.", "certifier": "1% For The Planet" } }
      ]
    }
  ]
}
{% endschema %}