Product Family Grid

<section class="sl-family" style="padding:clamp(48px,8vw,96px) clamp(1rem,3vw,2rem);background:{{ section.settings.bg_color | default: '#0b0b0b' }};color:{{ section.settings.text_color | default: '#fff' }};font-family:inherit;">
  <div style="max-width:1280px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 clamp(2rem,5vw,3.5rem);max-width:760px;margin-inline:auto;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;opacity:.8;font-weight:700;margin-bottom:.75rem;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:0 0 .75rem;font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;font-family:inherit;letter-spacing:-.01em;">{{ section.settings.heading }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.75;line-height:1.55;font-size:clamp(1rem,1.8vw,1.1rem);">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));">
      {%- for block in section.blocks -%}
        <article style="display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,2.5vw,1.75rem);border-radius:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:inherit;font-family:inherit;" {{ block.shopify_attributes }}>
          {%- if block.settings.label_text != blank -%}
            <span style="align-self:flex-start;padding:.3rem .65rem;background:{{ block.settings.label_color | default: '#ff4fa3' }};color:#111;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;border-radius:.25rem;font-weight:700;">{{ block.settings.label_text }}</span>
          {%- endif -%}
          <h3 style="margin:0;font-size:clamp(1.4rem,2.5vw,1.85rem);line-height:1.15;font-family:inherit;">{{ block.settings.title }}</h3>
          <figure style="margin:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border-radius:.75rem;aspect-ratio:1/1;overflow:hidden;">
            <img src="{{ block.settings.image | image_url: width: 640 | default: 'https://picsum.photos/seed/family-' | append: forloop.index | append: '/640/640' }}" alt="{{ block.settings.image_alt | default: block.settings.title }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
          </figure>
          {%- if block.settings.description != blank -%}
            <p style="margin:0;opacity:.8;line-height:1.55;font-size:.95rem;">{{ block.settings.description }}</p>
          {%- endif -%}
          {%- if block.settings.button_labels != blank -%}
            <nav aria-label="Variants" style="display:flex;flex-wrap:wrap;gap:.4rem;">
              {%- assign btns = block.settings.button_labels | split: ',' -%}
              {%- for btn in btns -%}
                {%- assign label = btn | strip -%}
                {%- if label != blank -%}
                  <a href="{{ block.settings.url | default: '#' }}" style="padding:.5rem .85rem;border:1px solid rgba(255,255,255,.25);border-radius:.375rem;color:inherit;text-decoration:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;">{{ label }}</a>
                {%- endif -%}
              {%- endfor -%}
            </nav>
          {%- endif -%}
          {%- if block.settings.hint_text != blank -%}
            <a href="{{ block.settings.url | default: '#' }}" style="display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;color:inherit;text-decoration:none;opacity:.6;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;">{{ block.settings.hint_text }} <span aria-hidden="true">&rarr;</span></a>
          {%- endif -%}
        </article>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Product Family Grid",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Meet the family" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Built for every night of sleep" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Three products, one mission: help you breathe, sleep, and feel better." },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#0b0b0b" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product card",
      "settings": [
        { "type": "text", "id": "label_text", "label": "Tag label", "default": "New" },
        { "type": "color", "id": "label_color", "label": "Tag color", "default": "#ff4fa3" },
        { "type": "text", "id": "title", "label": "Title", "default": "Product name" },
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "image_alt", "label": "Image alt" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "A short description of this product's benefit." },
        { "type": "text", "id": "button_labels", "label": "Variant buttons (comma-separated)", "default": "STARTER,SMALL,MEDIUM,LARGE" },
        { "type": "text", "id": "hint_text", "label": "Hint text", "default": "Find your fit" },
        { "type": "url", "id": "url", "label": "Product URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Family Grid",
      "blocks": [
        { "type": "product", "settings": { "label_text": "Original", "label_color": "#ff4fa3", "title": "Mute Nasal Dilator", "description": "Our flagship dilator: opens the nasal passages for quieter, deeper sleep.", "button_labels": "STARTER,SMALL,MEDIUM,LARGE", "hint_text": "Find your fit" } },
        { "type": "product", "settings": { "label_text": "Sport", "label_color": "#a855f7", "title": "Turbine Performance", "description": "Built for athletes. Increases airflow by up to 38% during training.", "button_labels": "SMALL,MEDIUM,LARGE", "hint_text": "Shop performance" } },
        { "type": "product", "settings": { "label_text": "Travel", "label_color": "#facc15", "title": "Mute To Go Pack", "description": "Seven single-use dilators in a discreet travel case. Perfect for the road.", "button_labels": "7-PACK,30-PACK", "hint_text": "Pack your kit" } }
      ]
    }
  ]
}
{% endschema %}