/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 18:2 Expected identifier but found "\"name\""
Line 92:0 Unexpected "{"
Line 92:1 Expected identifier but found "%"
Line 94:0 Unexpected "<"
Line 96:21 Expected identifier but found whitespace
Line 96:23 Unexpected "{"
Line 96:32 Expected ":"
... and 36 more hidden warnings

**/
{% schema %}
{
  "name": "Collection List",
  "settings": [
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "image_width",
      "label": "Image Width",
      "min": 100,
      "max": 800,
      "step": 50,
      "default": 400,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#F7F5EE"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#6c7133"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow Color",
      "default": "#6c7133"
    },
    {
      "type": "text",
      "id": "font_family",
      "label": "Font Family",
      "default": "Aileron, sans-serif"
    },
    {
      "type": "range",
      "id": "title_font_size",
      "label": "Title Font Size",
      "min": 12,
      "max": 40,
      "step": 1,
      "default": 24,
      "unit": "px"
    }
  ],
  "presets": [
    {
      "name": "Collection List",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<style>
  .collection-list-section {
    background-color: {{ section.settings.background_color }};
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }

  .collection-list-title {
    font-size: {{ section.settings.title_font_size }}px;
    font-family: {{ section.settings.font_family }};
    color: {{ section.settings.text_color }};
    font-weight: normal; /* Unbold the title */
    text-align: center;
    margin-bottom: 20px;
  }

  .collection-list {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .collection-list__item {
    text-align: center;
  }

  .collection-list__item img {
    width: {{ section.settings.image_width }}px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
  }

  .collection-list__item a {
    display: block;
    text-decoration: none;
    color: {{ section.settings.text_color }};
  }

  .collection-title {
    font-size: 16px;
    margin-top: 10px;
    text-decoration: none;
  }

  /* Hover Effect */
  .collection-list__item:hover img {
    transform: scale(1.05);
  }

  /* Arrows */
  .splide__arrow {
    background-color: transparent !important;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }

  .splide__arrow:hover {
    transform: scale(1.1);
  }

  .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: {{ section.settings.arrow_color }};
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .collection-list {
      flex-direction: column;
      align-items: center;
    }
  }
</style>

<div class="collection-list-section">
  <div class="page-width">
    <h2 class="collection-list-title">Browse by Category</h2>
    <div class="collection-list splide">
      <div class="splide__track">
        <ul class="splide__list">
          {% for collection in collections limit: 3 %}
            <li class="splide__slide collection-list__item">
              <a href="{{ collection.url }}">
                <img src="{{ collection.image | image_url: width: section.settings.image_width }}" alt="{{ collection.title }}">
                <p class="collection-title">{{ collection.title }} →</p>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</div>