Size Guide Block

<details class="sl-size-guide" style="color:inherit;font-family:inherit;border:1px solid currentColor;border-radius:.5rem;padding:1rem 1.15rem;margin:1rem 0;">
  <summary style="cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:700;font-size:.95rem;">
    <span style="display:inline-flex;align-items:center;gap:.5rem;"><span aria-hidden="true" style="color:var(--sl-accent,#0a5cff);">📏</span>{{ section.settings.heading | default: 'Size guide' }}</span>
    <span aria-hidden="true" style="color:var(--sl-accent,#0a5cff);">+</span>
  </summary>
  <div style="margin-top:1rem;display:flex;flex-direction:column;gap:.85rem;">
    {%- if section.settings.intro != blank -%}
      <p style="margin:0;opacity:.85;line-height:1.55;font-size:.92rem;">{{ section.settings.intro }}</p>
    {%- endif -%}
    <div role="region" aria-label="{{ section.settings.heading | default: 'Size guide' }}" style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
      <table style="width:100%;border-collapse:collapse;font-size:.88rem;min-width:min(520px,100%);">
        <caption style="caption-side:top;text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;font-weight:700;padding:0 0 .45rem;">{{ section.settings.caption | default: 'All measurements in inches' }}</caption>
        <thead>
          <tr>
            {%- assign headers = section.settings.columns | default: 'Size,Chest,Waist,Hips' | split: ',' -%}
            {%- for h in headers -%}
              <th scope="col" style="padding:.55rem .65rem;text-align:left;border-bottom:2px solid var(--sl-accent,#0a5cff);font-weight:700;">{{ h | strip }}</th>
            {%- endfor -%}
          </tr>
        </thead>
        <tbody>
          {%- for block in section.blocks -%}
            <tr style="border-bottom:1px solid rgba(127,127,127,.2);" {{ block.shopify_attributes }}>
              {%- assign cells = block.settings.row | default: 'S,34-36,28-30,35-37' | split: ',' -%}
              {%- for c in cells -%}
                <td style="padding:.55rem .65rem;">{{ c | strip }}</td>
              {%- endfor -%}
            </tr>
          {%- endfor -%}
        </tbody>
      </table>
    </div>
    {%- if section.settings.note != blank -%}
      <p style="margin:0;opacity:.7;font-size:.8rem;line-height:1.55;"><strong>Fit note:</strong> {{ section.settings.note }}</p>
    {%- endif -%}
  </div>
</details>
{% schema %}
{
  "name": "Size Guide Block",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Size guide" },
    { "type": "textarea", "id": "intro", "label": "Intro text", "default": "Not sure which size is right? Measure at your chest, waist, and hips and compare to the chart below." },
    { "type": "text", "id": "caption", "label": "Caption", "default": "All measurements in inches" },
    { "type": "text", "id": "columns", "label": "Columns (comma-separated)", "default": "Size,Chest,Waist,Hips" },
    { "type": "textarea", "id": "note", "label": "Fit note", "default": "Between sizes? Size up for a relaxed fit or size down for a more fitted look." }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "text", "id": "row", "label": "Row values (comma-separated)", "default": "S,34-36,28-30,35-37" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Size Guide Block",
      "blocks": [
        { "type": "row", "settings": { "row": "XS,32-34,26-28,33-35" } },
        { "type": "row", "settings": { "row": "S,34-36,28-30,35-37" } },
        { "type": "row", "settings": { "row": "M,36-38,30-32,37-39" } },
        { "type": "row", "settings": { "row": "L,38-40,32-34,39-41" } },
        { "type": "row", "settings": { "row": "XL,40-42,34-36,41-43" } }
      ]
    }
  ]
}
{% endschema %}