{% comment %} Google Font preloading for italic heading style {% endcomment %}
{% if section.settings.italic_font_family == 'georgia-pro' or section.settings.italic_font_family == 'bodoni-moda' or section.settings.italic_font_family == 'instrument-serif' or section.settings.italic_font_family == 'custom_google_font' %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
    <link href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  {% endif %}
{% endif %}

{%- style -%}
  /* ── Section padding & margin ── */
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  /* ── Section gap variables (override theme defaults for this section) ── */
  #CollectionListAdvanced-{{ section.id }} {
    --grid-desktop-horizontal-spacing: {{ section.settings.grid_gap_desktop }}px;
    --grid-desktop-vertical-spacing: {{ section.settings.grid_gap_desktop }}px;
    --grid-mobile-horizontal-spacing: {{ section.settings.grid_gap_mobile }}px;
    --grid-mobile-vertical-spacing: {{ section.settings.grid_gap_mobile }}px;
  }

  /* ── Custom color scheme ── */
  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
    background-attachment: scroll !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}
  @media screen and (max-width: 750px) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
    }
  }
  @supports (-webkit-appearance: none) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }
  }
  .section-{{ section.id }}-padding .animate-section,
  .section-{{ section.id }}-padding .animate-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

  /* ── Italic / em heading styling ── */
  #CollectionListAdvanced-{{ section.id }} .cla-heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  /* ── Heading gradient (bold text) ── */
  {% if section.settings.enable_gradient %}
    #CollectionListAdvanced-{{ section.id }} .title strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Heading alignment ── */
  #CollectionListAdvanced-{{ section.id }} .cla-header {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: 2.4rem;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-header {
      margin-bottom: 3.2rem;
    }
  }

  /* ── Subheading ── */
  #CollectionListAdvanced-{{ section.id }} .cla-subheading {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-top: 1.2rem;
    opacity: 0.8;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-subheading {
      font-size: 1.8rem;
    }
  }

  /* ── List reset for splide__list in destroy mode ── */
  #CollectionListAdvanced-{{ section.id }} .splide__slide {
    list-style: none;
  }

  /* ── Equal height cards ── */
  {% if section.settings.equal_height_cards %}
    #CollectionListAdvanced-{{ section.id }} .splide__list {
      align-items: stretch;
    }
    #CollectionListAdvanced-{{ section.id }} .splide__slide {
      display: flex;
      flex-direction: column;
    }
    #CollectionListAdvanced-{{ section.id }} .cla-card {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #CollectionListAdvanced-{{ section.id }} .cla-image-wrapper {
      flex-shrink: 0;
    }
    #CollectionListAdvanced-{{ section.id }} .cla-info-below {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
  {% endif %}

  /* ── Collection card ── */
  #CollectionListAdvanced-{{ section.id }} .cla-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    border-radius: {{ section.settings.card_border_radius }}px;
    overflow: hidden;
    {% if section.settings.card_border_width > 0 %}
      border: {{ section.settings.card_border_width }}px solid {{ section.settings.card_border_color }};
    {% endif %}
  }

  /* ── Image wrapper ── */
  #CollectionListAdvanced-{{ section.id }} .cla-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: rgba(var(--color-foreground), 0.04);
    border-radius: {{ section.settings.card_border_radius }}px;
    transform: translateZ(0);
    {% if section.settings.image_aspect_ratio == 'square' %}
      aspect-ratio: 1 / 1;
    {% elsif section.settings.image_aspect_ratio == 'portrait' %}
      aspect-ratio: 3 / 4;
    {% elsif section.settings.image_aspect_ratio == 'landscape' %}
      aspect-ratio: 4 / 3;
    {% elsif section.settings.image_aspect_ratio == 'wide' %}
      aspect-ratio: 16 / 9;
    {% elsif section.settings.image_aspect_ratio == 'custom' %}
      aspect-ratio: auto;
      padding-bottom: {{ section.settings.custom_aspect_ratio_mobile }}%;
    {% endif %}
  }
  {% if section.settings.image_aspect_ratio == 'custom' %}
    @media screen and (min-width: 750px) {
      #CollectionListAdvanced-{{ section.id }} .cla-image-wrapper {
        padding-bottom: {{ section.settings.custom_aspect_ratio_desktop }}%;
      }
    }
  {% endif %}

  #CollectionListAdvanced-{{ section.id }} .cla-image,
  #CollectionListAdvanced-{{ section.id }} .cla-image-placeholder {
    {% if section.settings.image_aspect_ratio == 'custom' %}
      position: absolute;
      top: 0;
      left: 0;
    {% else %}
      position: relative;
    {% endif %}
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
  }
  #CollectionListAdvanced-{{ section.id }} .cla-card:hover .cla-image {
    transform: scale(1.05);
  }
  #CollectionListAdvanced-{{ section.id }} .cla-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #CollectionListAdvanced-{{ section.id }} .cla-image-placeholder svg {
    width: 60%;
    height: 60%;
    opacity: 0.25;
  }

  /* ── Fade mask ── */
  #CollectionListAdvanced-{{ section.id }} .cla-fade-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: {{ 100 | minus: section.settings.fade_height_mobile }}%;
    background: linear-gradient(to top, {{ section.settings.fade_color }} 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-fade-mask {
      top: {{ 100 | minus: section.settings.fade_height_desktop }}%;
    }
  }

  /* ── Info overlay ── */
  #CollectionListAdvanced-{{ section.id }} .cla-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: {{ section.settings.info_padding_mobile }}px;
    z-index: 2;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-info-overlay {
      padding: {{ section.settings.info_padding_desktop }}px;
    }
  }
  #CollectionListAdvanced-{{ section.id }} .cla-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #CollectionListAdvanced-{{ section.id }} .cla-info-overlay .cla-name-arrow {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ── Info below ── */
  #CollectionListAdvanced-{{ section.id }} .cla-info-below {
    padding: {{ section.settings.info_padding_mobile }}px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-info-below {
      padding: {{ section.settings.info_padding_desktop }}px;
    }
  }
  #CollectionListAdvanced-{{ section.id }} .cla-info-below .cla-name-arrow {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  /* ── Collection name ── */
  #CollectionListAdvanced-{{ section.id }} .cla-collection-name {
    font-size: {{ section.settings.collection_name_size_mobile }}px;
    font-weight: {{ section.settings.collection_name_weight }};
    line-height: 1.2;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-collection-name {
      font-size: {{ section.settings.collection_name_size_desktop }}px;
    }
  }
  #CollectionListAdvanced-{{ section.id }} .cla-info-overlay .cla-collection-name {
    color: {{ section.settings.collection_name_color }};
  }
  #CollectionListAdvanced-{{ section.id }} .cla-info-below .cla-collection-name {
    color: {{ section.settings.collection_name_color }};
  }

  /* ── Arrow ── */
  #CollectionListAdvanced-{{ section.id }} .cla-info-overlay .cla-arrow,
  #CollectionListAdvanced-{{ section.id }} .cla-info-below .cla-arrow {
    color: {{ section.settings.arrow_color }};
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  #CollectionListAdvanced-{{ section.id }} .cla-arrow {
    width: {{ section.settings.arrow_size_mobile }}px;
    height: {{ section.settings.arrow_size_mobile }}px;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-arrow {
      width: {{ section.settings.arrow_size_desktop }}px;
      height: {{ section.settings.arrow_size_desktop }}px;
    }
  }
  #CollectionListAdvanced-{{ section.id }} .cla-card:hover .cla-arrow {
    transform: translateX(5px);
  }

  /* ── Collection description ── */
  #CollectionListAdvanced-{{ section.id }} .cla-collection-description {
    font-size: {{ section.settings.description_size_mobile }}px;
    line-height: {{ section.settings.description_line_height_mobile }};
    font-weight: {{ section.settings.description_font_weight }};
    color: {{ section.settings.description_color }};
    margin: 0 0 {{ section.settings.description_margin_bottom }}px 0;
  }
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .cla-collection-description {
      font-size: {{ section.settings.description_size_desktop }}px;
      line-height: {{ section.settings.description_line_height_desktop }};
    }
  }

  /* ── Splide overrides ── */
  #CollectionListAdvanced-{{ section.id }} .splide__slide {
    box-sizing: border-box;
  }

  /* ── Force dots visible when explicitly positioned under (active slider) ── */
  @media screen and (min-width: 750px) {
    #CollectionListAdvanced-{{ section.id }} .splide--desktop-dots-under:not(.splide--destroy-desktop) .splide__pagination {
      display: flex !important;
    }
  }
  #CollectionListAdvanced-{{ section.id }} .splide--mobile-dots-under:not(.splide--destroy-mobile) .splide__pagination {
    display: flex !important;
  }

  /* ── Hide controls when slider is destroyed (grid mode) ── */
  {% unless section.settings.slider_desktop %}
    @media screen and (min-width: 750px) {
      #CollectionListAdvanced-{{ section.id }} .splide__dots-and-arrows,
      #CollectionListAdvanced-{{ section.id }} .splide__arrows {
        display: none !important;
      }
    }
  {% endunless %}
  {% unless section.settings.slider_mobile %}
    @media screen and (max-width: 749px) {
      #CollectionListAdvanced-{{ section.id }} .splide__dots-and-arrows,
      #CollectionListAdvanced-{{ section.id }} .splide__arrows {
        display: none !important;
      }
    }
  {% endunless %}
{%- endstyle -%}

<div
  id="CollectionListAdvanced-{{ section.id }}"
  class="collection-list-advanced animate-section animate--hidden color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping {{ section.settings.visibility }}"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding isolate" style="--columns-desktop: {{ section.settings.columns_desktop }}; --columns-mobile: {{ section.settings.columns_mobile }};">

    {% comment %} ── Header ── {% endcomment %}
    {%- unless section.settings.title == blank -%}
      <div class="cla-header animate-item animate-item--child" style="--index: 0;">
        <h2 class="title {{ section.settings.heading_size }} title-with-highlight cla-heading"
          style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};">
          {{ section.settings.title }}
        </h2>
        {% if section.settings.subheading != blank %}
          <p class="cla-subheading">{{ section.settings.subheading }}</p>
        {% endif %}
      </div>
    {%- endunless -%}

    {% comment %} ── Collection blocks ── {% endcomment %}
    {% if section.blocks.size > 0 %}
      <splide-component
        data-type="{{ section.settings.slider_type }}"
        data-autoplay="{{ section.settings.autoplay }}"
        data-autoplay-speed="{{ section.settings.autoplay_speed }}"
        data-arrows-color="{{ section.settings.arrows_color_scheme }}"
        data-dots-color="{{ section.settings.dots_color_scheme }}"
        data-slides-desktop="{{ section.settings.columns_desktop }}"
        data-per-move-desktop="{{ section.settings.per_move_desktop }}"
        data-gap-desktop="{{ section.settings.grid_gap_desktop }}"
        data-side-padding-desktop="{{ section.settings.desktop_side_padding }}"
        data-padding-calc-desktop="{{ section.settings.desktop_padding_calc }}"
        data-slides-mobile="{{ section.settings.columns_mobile }}"
        data-gap-mobile="{{ section.settings.grid_gap_mobile }}"
        {% if section.settings.enable_mobile_preview %}
          data-side-padding-mobile="24"
        {% else %}
          data-side-padding-mobile="15"
        {% endif %}
        {% unless section.settings.slider_desktop %}
          data-destroy-desktop="true"
        {% endunless %}
        {% unless section.settings.slider_mobile %}
          data-destroy-mobile="true"
        {% endunless %}
      >
        <div class="splide splide--desktop-dots-{{ section.settings.desktop_dots_position }} splide--mobile-dots-{{ section.settings.mobile_dots_position }} splide--desktop-arrows-{{ section.settings.desktop_arrows_position }} splide--desktop-arrows-outside splide--mobile-arrows-{{ section.settings.mobile_arrows_position }}{% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}{% unless section.settings.slider_desktop %} splide--destroy-desktop{% endunless %}{% unless section.settings.slider_mobile %} splide--destroy-mobile{% endunless %}">
          <div class="splide__track">
            <ul class="splide__list">

            {%- for block in section.blocks -%}
              {%- if block.type == 'collection' -%}
                {%- assign collection = collections[block.settings.collection] -%}
                {%- assign collection_image = block.settings.collection_image -%}
                {%- if collection_image == blank and collection and collection.featured_image -%}
                  {%- assign collection_image = collection.featured_image -%}
                {%- endif -%}
                {%- assign collection_title = block.settings.collection_title_override -%}
                {%- if collection_title == blank and collection -%}
                  {%- assign collection_title = collection.title -%}
                {%- endif -%}

                <li class="splide__slide animate-item animate-item--child"
                  style="--index: {{ forloop.index }};"
                  {{ block.shopify_attributes }}
                >
                  <a href="{{ collection.url | default: '#' }}" class="cla-card">
                    <div class="cla-image-wrapper">
                      {%- if collection_image != blank -%}
                        <img
                          srcset="
                            {%- if collection_image.width >= 165 -%}{{ collection_image | image_url: width: 165 }} 165w,{%- endif -%}
                            {%- if collection_image.width >= 360 -%}{{ collection_image | image_url: width: 360 }} 360w,{%- endif -%}
                            {%- if collection_image.width >= 533 -%}{{ collection_image | image_url: width: 533 }} 533w,{%- endif -%}
                            {%- if collection_image.width >= 720 -%}{{ collection_image | image_url: width: 720 }} 720w,{%- endif -%}
                            {%- if collection_image.width >= 940 -%}{{ collection_image | image_url: width: 940 }} 940w,{%- endif -%}
                            {%- if collection_image.width >= 1066 -%}{{ collection_image | image_url: width: 1066 }} 1066w,{%- endif -%}
                            {{ collection_image | image_url }} {{ collection_image.width }}w
                          "
                          src="{{ collection_image | image_url: width: 533 }}"
                          sizes="(min-width: 750px) calc((100vw - 10rem) / {{ section.settings.columns_desktop }}), calc(100vw - 3rem)"
                          alt="{{ collection_image.alt | escape }}"
                          loading="lazy"
                          width="{{ collection_image.width }}"
                          height="{{ collection_image.height }}"
                          class="cla-image"
                        >
                      {%- else -%}
                        <div class="cla-image-placeholder">
                          {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                      {%- endif -%}

                      {%- if section.settings.text_position == 'overlay' -%}
                        {%- if section.settings.enable_fade_mask -%}
                          <div class="cla-fade-mask"></div>
                        {%- endif -%}
                        <div class="cla-info cla-info-overlay">
                          <div class="cla-overlay-content">
                            <div class="cla-name-arrow">
                              <span class="cla-collection-name">{{ collection_title }}</span>
                              {%- if section.settings.show_arrow -%}
                              <svg class="cla-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                              </svg>
                              {%- endif -%}
                            </div>
                            {%- if block.settings.collection_description != blank -%}
                              <p class="cla-collection-description">{{ block.settings.collection_description }}</p>
                            {%- endif -%}
                          </div>
                        </div>
                      {%- endif -%}
                    </div>

                    {%- if section.settings.text_position == 'below' -%}
                      <div class="cla-info cla-info-below">
                        <div class="cla-name-arrow">
                          <span class="cla-collection-name">{{ collection_title }}</span>
                          {%- if section.settings.show_arrow -%}
                          <svg class="cla-arrow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          </svg>
                          {%- endif -%}
                        </div>
                        {%- if block.settings.collection_description != blank -%}
                          <p class="cla-collection-description">{{ block.settings.collection_description }}</p>
                        {%- endif -%}
                      </div>
                    {%- endif -%}
                  </a>
                </li>
              {%- endif -%}
            {%- endfor -%}

            </ul>
          </div>
          <div class="splide__dots-and-arrows">
            <ul class="splide__pagination"></ul>
            <div class="splide__arrows"></div>
          </div>
        </div>
      </splide-component>
    {% endif %}

  </div>
</div>

{% schema %}
{
  "name": "Collection list advanced",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Shop by Collection",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Heading alignment"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides solid highlight color with a gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        { "value": "italic", "label": "Normal Italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom Font Family" }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "serif", "label": "Serif" },
        { "value": "instrument-serif", "label": "Instrument Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Playfair Display'). Browse at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "info": "Optional text below the heading"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "Columns (desktop)"
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 1,
      "label": "Columns (mobile)"
    },
    {
      "type": "range",
      "id": "grid_gap_desktop",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Gap (desktop)",
      "default": 24
    },
    {
      "type": "range",
      "id": "grid_gap_mobile",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Gap (mobile)",
      "default": 12
    },
    {
      "type": "checkbox",
      "id": "equal_height_cards",
      "label": "Make all cards equal height",
      "default": true
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "select",
      "id": "image_aspect_ratio",
      "label": "Image aspect ratio",
      "options": [
        { "value": "square", "label": "Square (1:1)" },
        { "value": "portrait", "label": "Portrait (3:4)" },
        { "value": "landscape", "label": "Landscape (4:3)" },
        { "value": "wide", "label": "Wide (16:9)" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "square"
    },
    {
      "type": "range",
      "id": "custom_aspect_ratio_mobile",
      "min": 50,
      "max": 200,
      "step": 5,
      "unit": "%",
      "label": "Custom aspect ratio (mobile)",
      "default": 100,
      "info": "Only applies when 'Custom' is selected. 100% = square, 75% = landscape, 133% = portrait"
    },
    {
      "type": "range",
      "id": "custom_aspect_ratio_desktop",
      "min": 50,
      "max": 200,
      "step": 5,
      "unit": "%",
      "label": "Custom aspect ratio (desktop)",
      "default": 100,
      "info": "Only applies when 'Custom' is selected."
    },
    {
      "type": "header",
      "content": "Card"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card border radius",
      "default": 0
    },
    {
      "type": "range",
      "id": "card_border_width",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "label": "Card border width",
      "default": 1
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Text position"
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Collection name position",
      "options": [
        { "value": "overlay", "label": "On card (overlay)" },
        { "value": "below", "label": "Below card" }
      ],
      "default": "below",
      "info": "Choose whether text appears on top of the image or below it"
    },
    {
      "type": "header",
      "content": "Fade mask",
      "info": "Only applies when text position is set to overlay"
    },
    {
      "type": "checkbox",
      "id": "enable_fade_mask",
      "label": "Enable fade mask",
      "default": true
    },
    {
      "type": "color",
      "id": "fade_color",
      "label": "Fade color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "fade_height_mobile",
      "min": 10,
      "max": 80,
      "step": 5,
      "unit": "%",
      "label": "Fade height (mobile)",
      "default": 45
    },
    {
      "type": "range",
      "id": "fade_height_desktop",
      "min": 10,
      "max": 80,
      "step": 5,
      "unit": "%",
      "label": "Fade height (desktop)",
      "default": 35
    },
    {
      "type": "header",
      "content": "Collection name"
    },
    {
      "type": "color",
      "id": "collection_name_color",
      "label": "Name color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "collection_name_size_mobile",
      "min": 14,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Name size (mobile)",
      "default": 18
    },
    {
      "type": "range",
      "id": "collection_name_size_desktop",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Name size (desktop)",
      "default": 24
    },
    {
      "type": "select",
      "id": "collection_name_weight",
      "label": "Name font weight",
      "options": [
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "500"
    },
    {
      "type": "range",
      "id": "info_padding_mobile",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Info padding (mobile)",
      "default": 14
    },
    {
      "type": "range",
      "id": "info_padding_desktop",
      "min": 12,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Info padding (desktop)",
      "default": 24
    },
    {
      "type": "header",
      "content": "Arrow"
    },
    {
      "type": "checkbox",
      "id": "show_arrow",
      "label": "Show arrow",
      "default": true
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "arrow_size_mobile",
      "min": 16,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Arrow size (mobile)",
      "default": 20
    },
    {
      "type": "range",
      "id": "arrow_size_desktop",
      "min": 20,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Arrow size (desktop)",
      "default": 28
    },
    {
      "type": "header",
      "content": "Description"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Description color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "description_size_mobile",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Description size (mobile)",
      "default": 12
    },
    {
      "type": "range",
      "id": "description_size_desktop",
      "min": 12,
      "max": 32,
      "step": 1,
      "unit": "px",
      "label": "Description size (desktop)",
      "default": 15
    },
    {
      "type": "range",
      "id": "description_line_height_mobile",
      "min": 1.0,
      "max": 2.5,
      "step": 0.1,
      "label": "Line height (mobile)",
      "default": 1.3
    },
    {
      "type": "range",
      "id": "description_line_height_desktop",
      "min": 1.0,
      "max": 2.5,
      "step": 0.1,
      "label": "Line height (desktop)",
      "default": 1.4
    },
    {
      "type": "select",
      "id": "description_font_weight",
      "label": "Description font weight",
      "options": [
        { "value": "300", "label": "Light" },
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "400"
    },
    {
      "type": "range",
      "id": "description_margin_bottom",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Description bottom margin",
      "default": 2
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "paragraph",
      "content": "ATTENTION: ONLY in the theme editor, pagination dots might duplicate after changing section settings. To overcome this, simply click Save. This has NO EFFECT on the published website."
    },
    {
      "type": "select",
      "id": "slider_type",
      "options": [
        { "value": "slide", "label": "Classic" },
        { "value": "loop", "label": "Infinite" }
      ],
      "default": "loop",
      "label": "Type"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "default": 5,
      "unit": "sec",
      "label": "Autoplay speed"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" }
      ],
      "default": "inverse",
      "label": "Arrows color scheme"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Text" }
      ],
      "default": "inverse",
      "label": "Dots color scheme"
    },
    {
      "type": "header",
      "content": "Desktop slider"
    },
    {
      "type": "checkbox",
      "id": "slider_desktop",
      "label": "Enable desktop slider",
      "default": false,
      "info": "The settings below are applied if this option is checked"
    },
    {
      "type": "range",
      "id": "per_move_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 1,
      "label": "Slides to scroll on one move"
    },
    {
      "type": "range",
      "id": "desktop_side_padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Preview of prev & next slide",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "desktop_padding_calc",
      "label": "Disable empty preview on first & last slide",
      "default": true
    },
    {
      "type": "select",
      "id": "desktop_dots_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" }
      ],
      "default": "hidden",
      "label": "Dots position",
      "info": "Only applies when desktop slider is enabled"
    },
    {
      "type": "select",
      "id": "desktop_arrows_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" },
        { "value": "sides", "label": "On sides of the slider" }
      ],
      "default": "sides",
      "label": "Arrows position",
      "info": "Only applies when desktop slider is enabled"
    },
    {
      "type": "header",
      "content": "Mobile slider"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": true,
      "info": "The settings below are applied if this option is checked"
    },
    {
      "type": "checkbox",
      "id": "enable_mobile_preview",
      "label": "Preview of prev & next slides",
      "default": true
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" },
        { "value": "sides", "label": "On sides of the slider" }
      ],
      "default": "hidden",
      "label": "Arrows position",
      "info": "Only applies when mobile slider is enabled"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "image_picker",
          "id": "collection_image",
          "label": "Collection image",
          "info": "Optional. Uses collection featured image if not set."
        },
        {
          "type": "text",
          "id": "collection_title_override",
          "label": "Collection name override",
          "info": "Optional. Uses collection title if not set."
        },
        {
          "type": "textarea",
          "id": "collection_description",
          "label": "Collection description",
          "info": "Optional. Appears below collection name."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection list advanced",
      "category": "Collection",
      "settings": {
        "title": "Shop by Collection",
        "heading_size": "h1",
        "heading_alignment": "center",
        "color_scheme": "background-1",
        "columns_desktop": 3,
        "columns_mobile": 1,
        "grid_gap_desktop": 24,
        "grid_gap_mobile": 12,
        "equal_height_cards": true,
        "image_aspect_ratio": "square",
        "card_border_radius": 0,
        "card_border_width": 1,
        "text_position": "below",
        "enable_fade_mask": true,
        "fade_color": "#000000",
        "fade_height_mobile": 45,
        "fade_height_desktop": 35,
        "collection_name_color": "#000000",
        "collection_name_size_mobile": 18,
        "collection_name_size_desktop": 24,
        "collection_name_weight": "500",
        "show_arrow": true,
        "arrow_color": "#000000",
        "arrow_size_mobile": 20,
        "arrow_size_desktop": 28,
        "info_padding_mobile": 14,
        "info_padding_desktop": 24,
        "slider_mobile": true,
        "enable_mobile_preview": true,
        "slider_desktop": false,
        "mobile_dots_position": "under",
        "mobile_arrows_position": "hidden",
        "desktop_arrows_position": "sides",
        "desktop_dots_position": "hidden",
        "padding_top": 36,
        "padding_bottom": 36
      },
      "blocks": [
        { "type": "collection" },
        { "type": "collection" },
        { "type": "collection" }
      ]
    }
  ]
}
{% endschema %}