/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'shop-by-category.css'"
Line 18:0 Unexpected "<"
Line 21:9 Unterminated string token
Line 22:15 Unexpected "{"
Line 22:24 Expected ":"
Line 22:45 Unexpected ";"
Line 23:24 Unexpected "{"
Line 23:33 Expected ":"
... and 38 more hidden warnings

**/
{{ 'shop-by-category.css' | asset_url | stylesheet_tag }}

<section 
  id="shop-by-category"
  class="sbc-section"
  style="
    --sbc-bg: {{ section.settings.bg_color }};
    --sbc-padding-top: {{ section.settings.padding_top }}px;
    --sbc-padding-bottom: {{ section.settings.padding_bottom }}px;
  "
>

  {% if section.settings.title != blank %}
  <h2 class="sbc-title">{{ section.settings.title }}</h2>
  {% endif %}

  <!-- OUTER FULL-WIDTH SAFE WRAPPER -->
  <div class="sbc-outer">

    <!-- INNER FIXED-WIDTH WRAPPER -->
    <div class="sbc-inner">

      <!-- SWIPER -->
      <div class="swiper sbc-swiper">
        <div class="swiper-wrapper">

          {% for block in section.blocks %}
          {% assign col = block.settings.collection %}

          <div class="swiper-slide sbc-card">

            {% if col.featured_image %}
            <div class="sbc-card-bg" style="background-image:url('{{ col.featured_image | img_url: "1000x" }}');"></div>
            {% elsif block.settings.fallback_image %}
            <div class="sbc-card-bg" style="background-image:url('{{ block.settings.fallback_image | img_url: "1000x" }}');"></div>
            {% else %}
            <div class="sbc-card-bg" style="background:#111;"></div>
            {% endif %}

            <div class="sbc-card-overlay"></div>

            <a href="{{ col.url | default: '#' }}" class="sbc-card-label">
              {{ block.settings.label | default: col.title }}
            </a>

          </div>
          {% endfor %}

        </div>
      </div>

      {% if section.settings.enable_slider %}
      <div class="swiper-button-prev sbc-prev"></div>
      <div class="swiper-button-next sbc-next"></div>
      <div class="swiper-pagination sbc-pagination"></div>
      {% endif %}

    </div> <!-- end inner -->
  </div> <!-- end outer -->

</section>

<script>
document.addEventListener("DOMContentLoaded", function () {

  {% if section.settings.enable_slider %}
  new Swiper(".sbc-swiper", {
    loop: true,
    speed: 600,
    spaceBetween: {{ section.settings.card_spacing }},
    slidesPerView: {{ section.settings.desktop_count }},
    navigation: {
      nextEl: ".sbc-next",
      prevEl: ".sbc-prev",
    },
    pagination: {
      el: ".sbc-pagination",
      clickable: true,
    },
    breakpoints: {
      0:      { slidesPerView: {{ section.settings.mobile_count }} },
      640:    { slidesPerView: {{ section.settings.mobile_count }} },
      768:    { slidesPerView: {{ section.settings.tablet_count }} },
      1024:   { slidesPerView: {{ section.settings.desktop_count }} }
    }
  });
  {% endif %}

});
</script>

{% schema %}
{
  "name": "Shop By Category",
  "settings": [
    { "type": "text", "id": "title", "label": "Section Title", "default": "Shop By Category" },

    { "type": "color", "id": "bg_color", "label": "Background Color", "default": "#08070B" },

    { "type": "checkbox", "id": "enable_slider", "label": "Enable Slider", "default": true },

    { "type": "range", "id": "padding_top", "label": "Padding Top", "min": 0, "max": 150, "step": 5, "default": 70 },
    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom", "min": 0, "max": 150, "step": 5, "default": 70 },

    { "type": "range", "id": "card_spacing", "label": "Card Spacing", "min": 5, "max": 50, "step": 1, "default": 30 },

    { "type": "range", "id": "mobile_count", "label": "Slides per Row (Mobile)", "min": 1, "max": 3, "step": 1, "default": 1 },
    { "type": "range", "id": "tablet_count", "label": "Slides per Row (Tablet)", "min": 1, "max": 4, "step": 1, "default": 2 },
    { "type": "range", "id": "desktop_count", "label": "Slides per Row (Desktop)", "min": 1, "max": 6, "step": 1, "default": 4 }
  ],

  "blocks": [
    {
      "type": "category",
      "name": "Category Card",
      "settings": [
        { "type": "collection", "id": "collection", "label": "Select Collection" },
        { "type": "image_picker", "id": "fallback_image", "label": "Fallback Image (Optional)" },
        { "type": "text", "id": "label", "label": "Custom Label", "default": "Category" }
      ]
    }
  ],

  "max_blocks": 30,
  "presets": [
    { "name": "Shop By Category" }
  ]
}
{% endschema %}