/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:10 Unexpected "/"
Line 19:1 Expected identifier but found "%"
Line 21:0 Unexpected "<"
Line 94:0 Unexpected "<"
Line 98:5 Expected identifier but found "%"
Line 99:6 Unexpected "<"
Line 99:47 Unexpected "{"
Line 99:56 Expected ":"
... and 27 more hidden warnings

**/
{%- comment -%}
  sections/visual-categories.liquid
  Visual Category Section for Shopify Dawn Theme
{%- endcomment -%}

<style>
  .visual-categories {
    padding: 40px 0;
  }
  
  .visual-categories__wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .visual-categories__title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
  }
  
  .visual-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    align-items: start;
  }
  
  .visual-category-item {
    text-align: center;
    position: relative;
  }
  
  .visual-category-item__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
  }
  
  .visual-category-item__link:hover {
    transform: translateY(-5px);
  }
  
  .visual-category-item__image-wrapper {
    position: relative;
    padding-bottom: 133%;
    overflow: hidden;
    background: #fffdfa;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  
  .visual-category-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
  }
  
  .visual-category-item__title {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.05em;
  }
  
  @media screen and (max-width: 749px) {
    .visual-categories__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }
</style>

<div class="visual-categories page-width">
  <div class="visual-categories__wrapper">
    {%- if section.settings.title != blank -%}
      <h2 class="visual-categories__title h1">{{ section.settings.title | escape }}</h2>
    {%- endif -%}
    
    <div class="visual-categories__grid">
      {%- for block in section.blocks -%}
        <div class="visual-category-item" {{ block.shopify_attributes }}>
          <a href="{{ block.settings.link | default: '#' }}" class="visual-category-item__link">
            <div class="visual-category-item__image-wrapper">
              {%- if block.settings.image != blank -%}
                <img
                  src="{{ block.settings.image | image_url: width: 300 }}"
                  alt="{{ block.settings.title | escape }}"
                  loading="lazy"
                  width="300"
                  height="400"
                  class="visual-category-item__image"
                >
              {%- else -%}
                {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
              {%- endif -%}
            </div>
            <h3 class="visual-category-item__title">{{ block.settings.title | escape }}</h3>
          </a>
        </div>
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Visual Categories",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "SPACE 2069"
    }
  ],
  "blocks": [
    {
      "type": "category",
      "name": "Category",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Category Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Category Title",
          "default": "Category"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Category Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Visual Categories",
      "blocks": [
        {
          "type": "category",
          "settings": {
            "title": "Outer"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "Top"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "Bottom"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "ACC"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "Shirt"
          }
        },
        {
          "type": "category",
          "settings": {
            "title": "Muscle Fit"
          }
        }
      ]
    }
  ]
}
{% endschema %}