Category Nav Row

<nav class="sl-cat-nav" aria-label="{{ section.settings.heading | default: 'Shop by category' }}" style="padding:clamp(24px,4vw,48px) 0;color:inherit;font-family:inherit;">
  {%- if section.settings.heading != blank -%}
    <h2 style="text-align:center;margin:0 0 1.25rem;font-size:clamp(1.25rem,2.5vw,1.75rem);">{{ section.settings.heading }}</h2>
  {%- endif -%}
  <ul style="display:flex;gap:clamp(.75rem,2vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem 1rem;margin:0;list-style:none;justify-content:flex-start;">
    {%- for block in section.blocks -%}
      <li style="flex:0 0 auto;scroll-snap-align:start;" {{ block.shopify_attributes }}>
        <a href="{{ block.settings.link }}" style="display:flex;flex-direction:column;align-items:center;gap:.5rem;color:inherit;text-decoration:none;min-width:84px;">
          <span style="display:block;width:clamp(64px,14vw,96px);height:clamp(64px,14vw,96px);border-radius:50%;overflow:hidden;border:2px solid transparent;transition:border-color .15s;" onmouseover="this.style.borderColor='var(--sl-accent,#0a5cff)'" onmouseout="this.style.borderColor='transparent'">
            <img src="{{ block.settings.image | default: 'https://picsum.photos/seed/' | append: block.id | append: '/200/200' }}" alt="{{ block.settings.alt | default: block.settings.label }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
          </span>
          <span style="font-size:.9rem;font-weight:500;text-align:center;">{{ block.settings.label }}</span>
        </a>
      </li>
    {%- endfor -%}
  </ul>
</nav>
{% schema %}
{
  "name": "Category Nav Row",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop by category" }
  ],
  "blocks": [
    {
      "type": "category",
      "name": "Category",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Category image" },
        { "type": "text", "id": "label", "label": "Label", "default": "Category" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Category Nav Row",
      "blocks": [
        { "type": "category" },
        { "type": "category" },
        { "type": "category" },
        { "type": "category" },
        { "type": "category" }
      ]
    }
  ]
}
{% endschema %}