Untitled

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
{{ 'custom-collection-carousel.css' | asset_url | stylesheet_tag }}
{%- liquid
  assign padding_horizontal = section.settings.padding_horizontal
  assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign border_color = section.settings.border_color
  assign border_thickness = section.settings.border_thickness
  assign margin_top = section.settings.margin_top
  assign margin_bottom = section.settings.margin_bottom
  assign background_color = section.settings.background_color
  assign background_gradient = section.settings.background_gradient
  assign full_width = section.settings.full_width
  assign content_width = section.settings.content_width

  assign heading = section.settings.heading
  assign heading_size = section.settings.heading_size
  assign heading_color = section.settings.heading_color
  assign heading_font = section.settings.heading_font
  assign heading_height = section.settings.heading_height
  assign heading_letter = section.settings.heading_letter
  assign heading_align = section.settings.heading_align

  assign sub_heading = section.settings.sub_heading
  assign sub_heading_size = section.settings.sub_heading_size
  assign sub_heading_color = section.settings.sub_heading_color
  assign sub_heading_font = section.settings.sub_heading_font
  assign sub_heading_height = section.settings.sub_heading_height
  assign sub_heading_letter = section.settings.sub_heading_letter
  assign sub_heading_align = section.settings.sub_heading_align

  assign invert_content = section.settings.invert_content

  assign link = section.settings.link
  assign link_url = section.settings.link_url
  assign link_size = section.settings.link_size
  assign link_color = section.settings.link_color
  assign link_hover_color = section.settings.link_hover_color
  assign link_background_color = section.settings.link_background_color
  assign link_background_hover_color = section.settings.link_background_hover_color
  assign link_font = section.settings.link_font
  assign link_height = section.settings.link_height
  assign link_letter = section.settings.link_letter
  assign link_position = section.settings.link_position
  assign link_mobile = section.settings.link_mobile

  assign collection = section.settings.collection
  assign product_list = section.settings.product_list

  assign arrow_size = section.settings.arrow_size
  assign arrow_size_mobile = section.settings.arrow_size_mobile
  assign arrow_color = section.settings.arrow_color
  assign arrow_hover_color = section.settings.arrow_hover_color
  assign arrow_bg_color = section.settings.arrow_bg_color
  assign arrow_bg_hover_color = section.settings.arrow_bg_hover_color
  assign arrow_border_color = section.settings.arrow_border_color
  assign arrow_border_hover_color = section.settings.arrow_border_hover_color
  assign progress_color = section.settings.progress_color
  assign arrow_hide_mobile = section.settings.arrow_hide_mobile

  assign items_mt = section.settings.items_mt
  assign product_per_mobile = section.settings.product_per_mobile
  assign product_per_desktop = section.settings.product_per_desktop
  assign product_show = section.settings.product_show
  assign stack_products = section.settings.stack_products
  assign show_bar = section.settings.show_bar
  assign top_bar = section.settings.top_ba

  assign image_radius = section.settings.image_radius
  assign use_custom_height = section.settings.use_custom_height
  assign image_height_desktop = section.settings.image_height_desktop
  assign image_height_mobile = section.settings.image_height_mobile
  assign image_ration = section.settings.image_ration
  assign show_second = section.settings.show_second
  assign use_shadow = section.settings.use_shadow
  assign card_padding_horizontal = section.settings.card_padding_horizontal
  assign card_padding_vertical = section.settings.card_padding_vertical
  assign card_content_bg_color = section.settings.card_content_bg_color
  assign use_radius = section.settings.use_radius

  assign card_title_color = section.settings.card_title_color
  assign card_title_size = section.settings.card_title_size
  assign card_title_font = section.settings.card_title_font
  assign card_title_height = section.settings.card_title_height
  assign card_title_letter = section.settings.card_title_letter

  assign card_price_color = section.settings.card_price_color
  assign card_price_size = section.settings.card_price_size
  assign card_price_font = section.settings.card_price_font
  assign card_price_height = section.settings.card_price_height
  assign card_price_letter = section.settings.card_price_letter
  assign card_price_mt = section.settings.card_price_mt

  if product_list != blank
    assign items = product_list
  else
    assign items = collection.products
  endif

  unless stack_products
    assign product_per_mobile_big = product_per_mobile | times: 2 | round: 0
  endunless
-%}

{%- style -%}
  {{ heading_font | font_face: font_display: 'swap' }}
  {{ sub_heading_font | font_face: font_display: 'swap' }}
  {{ link_font | font_face: font_display: 'swap' }}
  {{ card_title | font_face: font_display: 'swap' }}
  {{ card_price | font_face: font_display: 'swap' }}

  .section-{{ section.id }} {
    border-top: solid {{ border_color }} {{ border_thickness }}px;
    border-bottom: solid {{ border_color }} {{ border_thickness }}px;
    margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
    margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
    overflow: hidden;
  }

  .section-{{ section.id }}-settings {
    margin: 0 auto;
    padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
    padding-left: {{ padding_horizontal_mobile }}rem;
    padding-right: {{ padding_horizontal_mobile }}rem;
  }

  .featured-collection-top-{{ section.id }} h2 {
    margin: 0;
    font-size: {{ heading_size | times: 0.85 }}px;
    color: {{ heading_color }};
    line-height: {{ heading_height }}%;
    letter-spacing: {{ heading_letter }}px;
    text-transform: unset;
    text-align: {{ heading_align }};
  }

  .featured-collection-wrapper-{{ section.id }} > p {
    margin: 0;
    font-size: {{ sub_heading_size | times: 0.85 }}px;
    color: {{ sub_heading_color }};
    line-height: {{ sub_heading_height }}%;
    letter-spacing: {{ sub_heading_letter }}px;
    text-transform: unset;
    text-align: {{ sub_heading_align }};
  }

  .featured-collection-link-{{ section.id }} {
    margin: 0;
    font-size: {{ link_size | times: 0.85 }}px;
    color: {{ link_color }};
    line-height: {{ link_height }}%;
    letter-spacing: {{ link_letter }}px;
    text-transform: unset;
    text-decoration: none;
    transition: all 0.3s ease 0s;
  }

  .featured-collection-link-{{ section.id }} {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
  }

  .featured-collection-link-{{ section.id }}:hover{
    transition: all 0.3s ease 0s;
    color: {{ link_hover_color }};
  }

  .featured-collection-arrow-{{ section.id }} {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: {{ link_background_color }};
    transition: all 0.3s ease 0s;
    cursor: pointer;
  }

  .featured-collection-arrow-{{ section.id }} svg {
    width: 5px;
    height: 8px;
    transform: rotate(-90deg);
  }

  .featured-collection-arrow-{{ section.id }} svg path {
    transition: all 0.3s ease 0s;
    color: {{ link_color }};
    fill: {{ link_color }};
  }

  .featured-collection-link-{{ section.id }}:hover .featured-collection-arrow-{{ section.id }} {
    transition: all 0.3s ease 0s;
    background-color: {{ link_background_hover_color }};
  }

  .featured-collection-link-{{ section.id }}:hover .featured-collection-arrow-{{ section.id }} svg path {
    fill: white;
  }

  .featured-collection-slider-{{ section.id }} {
    margin-top: {{ items_mt | times: 0.75 | round: 0 }}px;
    overflow: hidden;
    position: relative;
    padding-inline:6px;
  }

  .featured-collection-slider-{{ section.id }} .swiper-slide {
    display: block;
    height: auto;
    text-decoration: none;
    background-color: {{ card_content_bg_color }};
    border-top-left-radius: {{ image_radius }}px;
    border-top-right-radius: {{ image_radius }}px;
    overflow: hidden;
    box-sizing: border-box !important;
  }

  .featured-collection-items-{{ section.id }} {
    margin-top: {{ items_mt | times: 0.75 | round: 0 }}px;
    display: grid;
    gap: 20px;
  }

  .featured-collection-item-{{ section.id }} {
    display: block;
    text-decoration: none;
    background-color: {{ card_content_bg_color }};
    border-top-left-radius: {{ image_radius }}px;
    border-top-right-radius: {{ image_radius }}px;
    overflow: hidden;
    box-sizing: border-box !important;
  }

  .featured-collection-image-{{ section.id }} {
    width: 100%;
    border-radius: {{ image_radius }}px;
  }

  .featured-collection-image-{{ section.id }}.has-secondary-{{ section.id }} {
    position: relative;
  }

  .featured-collection-image-{{ section.id }}.has-secondary-{{ section.id }} .featured-collection-second-image-{{ section.id }} {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    display: none;
  }

  .featured-collection-image-{{ section.id }} img,
  .featured-collection-image-{{ section.id }} svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: {{ image_radius }}px;
    transition: all 0.3s ease 0s;
  }

  .featured-collection-image-{{ section.id }} svg {
    background-color: gray;
  }

  .featured-collection-content-{{ section.id }} {
    padding: {{ card_padding_vertical | times: 0.75 | round: 0 }}px {{ card_padding_horizontal | times: 0.75 | round: 0 }}px;
  }

  .featured-collection-title-{{ section.id }} {
    margin: 0px;
    font-size: {{ card_title_size | times: 0.85 }}px;
    color: {{ card_title_color }};
    line-height: {{ card_title_height }}%;
    letter-spacing: {{ card_title_letter }}px;
    text-transform: unset;
    text-decoration: none;
    font-weight: 600;
  }

  .featured-collection-price-{{ section.id }} {
    margin: 0px;
    margin-top: {{ card_price_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ card_price_size | times: 0.85 }}px;
    color: {{ card_price_color }};
    line-height: {{ card_price_height }}%;
    letter-spacing: {{ card_price_letter }}px;
    text-decoration: none;
    text-transform: unset;
  }

  .featured-collection-price-{{ section.id }} span {
    font-size: {{ card_price_size | times: 0.85 | minus: 1 }}px;
    font-weight: 400;
    -webkit-text-decoration: line-through;
    text-decoration: line-through;
  }

  .featured-collection-btn-prev-{{ section.id }},
  .featured-collection-btn-next-{{ section.id }} {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: {{ arrow_size_mobile }}px;
    height: {{ arrow_size_mobile }}px;
    border: 1px solid {{ arrow_border_color }};
    border-radius: 50%;
    background: {{ arrow_bg_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
  }

  .featured-collection-btn-prev-{{ section.id }} span,
  .featured-collection-btn-next-{{ section.id }} span {
    color: {{ arrow_color }};
    transition: all 0.3s ease 0s;
  }

  .featured-collection-btn-prev-{{ section.id }}:hover ,
  .featured-collection-btn-next-{{ section.id }}:hover {
    transition: all 0.3s ease 0s;
    border: 1px solid {{ arrow_border_hover_color }};
    background: {{ arrow_bg_hover_color }};
  }

  .featured-collection-btn-prev-{{ section.id }}:hover span,
  .featured-collection-btn-next-{{ section.id }}:hover span {
    fill: {{ arrow_hover_color }};
    transition: all 0.3s ease 0s;
  }

  .featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
  .featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
    opacity: 0.3;
  }

  .featured-collection-btn-prev-{{ section.id }} {
    left: 3%;
  }

  .featured-collection-btn-next-{{ section.id }} {
    right: 3%;
  }

  .featured-collection-pagination-{{ section.id }} {
    position: static !important;
    height: 3px;
    {% if section.settings.top_bar %}
      margin-bottom:15px;
    {% else %}
      margin-top: 15px;
    {% endif %}
  }

  .featured-collection-pagination-{{ section.id }}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: {{ progress_color }};
  }

  .featured-collection-pagination-{{ section.id }}.hide {
    display: none;
  }

  .featured-collection-btn-prev-{{ section.id }} .animate-icon,
  .featured-collection-btn-next-{{ section.id }} .animate-icon {
    pointer-events: none;
    place-items: center;
    display: grid;
  }

  .featured-collection-btn-prev-{{ section.id }} .animate-icon:before,
  .featured-collection-btn-next-{{ section.id }} .animate-icon:before {
    content: "";
    grid-area: 1 / -1;
    transition: all .2s ease-in-out;
    width: 8.3px;
    height: 8.3px;
    transform: rotate(calc(1 * 45deg));
    box-sizing: border-box;
    border-style: solid;
    border: 0px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    position: relative;
    left: -1px;
  }

  .featured-collection-btn-prev-{{ section.id }} .animate-icon:before {
    left: unset;
    right: -1px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
  }

  .featured-collection-btn-next-{{ section.id }}:hover .animate-icon:before {
    transform: translate(calc(1 * 0.125rem)) rotate(calc(1 * 45deg));
  }

  .featured-collection-btn-prev-{{ section.id }}:hover .animate-icon:before {
    transform: translate(calc(-1 * 0.125rem)) rotate(calc(1 * 45deg));
  }

  .featured-collection-btn-prev-{{ section.id }} .animate-icon:after,
  .featured-collection-btn-next-{{ section.id }} .animate-icon:after {
    content: "";
    grid-area: 1 / -1;
    transition: all .2s ease-in-out;
    width: 8px;
    height: 1.6px;
    transform-origin: center;
    opacity: 0;
    background: currentColor;
    transform: scaleX(.5);
  }

  .featured-collection-btn-prev-{{ section.id }}:hover .animate-icon:after,
  .featured-collection-btn-next-{{ section.id }}:hover .animate-icon:after {
    opacity: 1;
    transform: scaleX(1);
  }

  @media(min-width: 1024px) {

    .section-{{ section.id }} {
      margin-top: {{ margin_top }}px;
      margin-bottom: {{ margin_bottom }}px;
    }

    .section-{{ section.id }}-settings {
      padding: 0 5rem;
      padding-top: {{ padding_top }}px;
      padding-bottom: {{ padding_bottom }}px;
      padding-left: {{ padding_horizontal }}rem;
      padding-right: {{ padding_horizontal }}rem;
    }

    .featured-collection-wrapper-{{ section.id }} h2 {
      font-size: {{ heading_size }}px;
    }

    .featured-collection-wrapper-{{ section.id }} > p {
      font-size: {{ sub_heading_size }}px;
    }

    .featured-collection-link-{{ section.id }} {
      font-size: {{ link_size }}px;
    }

    .featured-collection-title-{{ section.id }} {
      font-size: {{ card_title_size }}px;
    }

    .featured-collection-price-{{ section.id }} {
      margin-top: {{ card_price_mt }}px;
      font-size: {{ card_price_size }}px;
    }

    .featured-collection-price-{{ section.id }} span {
      font-size: {{ card_price_size | minus: 2 }}px;
    }

    .featured-collection-slider-{{ section.id }} {
      margin-top: {{ items_mt }}px;
    }

    .featured-collection-content-{{ section.id }} {
      padding: {{ card_padding_vertical }}px {{ card_padding_horizontal }}px;
    }

    .featured-collection-btn-prev-{{ section.id }},
    .featured-collection-btn-next-{{ section.id }} {
      width: {{ arrow_size }}px;
      height: {{ arrow_size }}px;
    }

    .featured-collection-btn-prev-{{ section.id }},
    .featured-collection-btn-next-{{ section.id }},
    .featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
    .featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
      opacity: 0;
      pointer-events: none;
    }

    .featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-prev-{{ section.id }},
    .featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-next-{{ section.id }} {
      opacity: 1;
      pointer-events: all;
      transition: all 0.3s ease 0s;
    }

    .featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
    .featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
      opacity: 0.3;
    }

     .featured-collection-pagination-{{ section.id }} {
      {% if section.settings.top_bar %}
        margin-bottom:15px;
      {% else %}
        margin-top: 15px;
      {% endif %}
    }

  }

{%- endstyle -%}

{% unless full_width %}
  <style>
    .section-{{ section.id }}-settings {
      max-width: {{ content_width }}rem;
    }
  </style>
{% endunless %}

{% if section.settings.heading_custom %}

  <style>
    .featured-collection-top-{{ section.id }} h2 {
      font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
      font-weight: {{ heading_font.weight }};
      font-style: {{ heading_font.style }};
    }
  </style>

{% endif %}

{% if section.settings.sub_heading_custom %}

  <style>
    .featured-collection-wrapper-{{ section.id }} h2 {
      font-family: {{ sub_heading_font.family }}, {{ sub_heading_font.fallback_families }};
      font-weight: {{ sub_heading_font.weight }};
      font-style: {{ sub_heading_font.style }};
    }
  </style>

{% endif %}

{% if section.settings.link_custom %}

  <style>
    .featured-collection-link-{{ section.id }} {
      font-family: {{ link_font.family }}, {{ link_font.fallback_families }};
      font-weight: {{ link_font.weight }};
      font-style: {{ link_font.style }};
    }
  </style>

{% endif %}

{% if section.settings.card_title_custom %}

  <style>
    .featured-collection-title-{{ section.id }} {
      font-family: {{ card_title_font.family }}, {{ card_title_font.fallback_families }};
      font-weight: {{ card_title_font.weight }};
      font-style: {{ card_title_font.style }};
    }
  </style>

{% endif %}

{% if section.settings.card_price_custom %}

  <style>
    .featured-collection-price-{{ section.id }} {
      font-family: {{ card_price_font.family }}, {{ card_price_font.fallback_families }};
      font-weight: {{ card_price_font.weight }};
      font-style: {{ card_price_font.style }};
    }
  </style>

{% endif %}

{% unless link_position %}
  <style>
    .featured-collection-top-{{ section.id }} {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
  </style>
{% endunless %}

{% if use_custom_height %}

  <style>
    .featured-collection-image-{{ section.id }} {
      height: {{ image_height_mobile }}px;
    }
    @media(min-width: 1024px) {
      .featured-collection-image-{{ section.id }} {
        height: {{ image_height_desktop }}px;
      }
    }
  </style>

{% endif %}

{% if product_per_mobile == "1" %}
  <style>
    .featured-collection-items-{{ section.id }} {
      grid-template-columns: 1fr;
    }
  </style>
{% elsif product_per_mobile == "2" %}
  <style>
    .featured-collection-items-{{ section.id }} {
      grid-template-columns: 1fr 1fr;
    }
  </style>
{% endif %}

{% if product_per_desktop == 1 %}
  <style>
    @media(min-width: 992px) {
      .featured-collection-items-{{ section.id }} {
        grid-template-columns: 1fr;
      }
    }
  </style>
{% elsif product_per_desktop == 2 %}
  <style>
    @media(min-width: 992px) {
      .featured-collection-items-{{ section.id }} {
        grid-template-columns: 1fr 1fr;
      }
    }
  </style>
{% elsif product_per_desktop == 3 %}
  <style>
    @media(min-width: 992px) {
      .featured-collection-items-{{ section.id }} {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  </style>
{% elsif product_per_desktop == 4 %}
  <style>
    @media(min-width: 992px) {
      .featured-collection-items-{{ section.id }} {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }
  </style>
{% elsif product_per_desktop == 5 %}
  <style>
    @media(min-width: 992px) {
      .featured-collection-items-{{ section.id }} {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }
    }
  </style>
{% endif %}

{% if use_shadow %}
  <style>
    .featured-collection-item-{{ section.id }},
    .featured-collection-slider-{{ section.id }} .swiper-slide{
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
    }

    .featured-collection-slider-{{ section.id }} {
      padding: 10px;
    }
  </style>
{% endif %}

{% if use_radius %}
  <style>
    .featured-collection-item-{{ section.id }},
    .featured-collection-slider-{{ section.id }} .swiper-slide{
      border-radius: {{ image_radius }}px;
      overflow: hidden !important;
    }

    .featured-collection-image-{{ section.id }},
    .featured-collection-image-{{ section.id }} img,
    .featured-collection-image-{{ section.id }} svg {
     border-radius: 0px;
    }
  </style>
{% endif %}

{% if show_second %}
  <style>
    @keyframes fade-in-{{ section.id }} {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .featured-collection-slider-{{ section.id }} .swiper-slide:hover .featured-collection-second-image-{{ section.id }} {
      display: block !important;
      position: static !important;
      -webkit-animation: fade-in-{{ section.id }} 0.5s;
      animation: fade-in-{{ section.id }} 0.5s;
    }

    .featured-collection-slider-{{ section.id }} .swiper-slide:hover .has-secondary-{{ section.id }} .featured-collection-first-image-{{ section.id }} {
      display: none;
    }

    .featured-collection-item-{{ section.id }}:hover .featured-collection-second-image-{{ section.id }} {
      display: block !important;
      position: static !important;
      -webkit-animation: fade-in-{{ section.id }} 0.5s;
      animation: fade-in-{{ section.id }} 0.5s;
    }

    .featured-collection-item-{{ section.id }}:hover .has-secondary-{{ section.id }} .featured-collection-first-image-{{ section.id }} {
      display: none;
    }
  </style>
{% endif %}

{% if use_custom_height == false and image_ration == "square" %}
  <style>
    .featured-collection-image-{{ section.id }} {
      aspect-ratio: 1 / 1;
    }
  </style>
{% elsif use_custom_height == false and image_ration == "portrait" %}
  <style>
    .featured-collection-image-{{ section.id }} {
      aspect-ratio: 1 / 1.3;
    }
  </style>
{% endif %}

{% unless link_mobile %}
  <style>
    .featured-collection-link-{{ section.id }} {
      display: none;
    }

    @media(min-width: 1024px) {
      .featured-collection-link-{{ section.id }} {
        display: flex;
      }
    }
  </style>
{% endunless %}

{% if arrow_hide_mobile %}
  <style>
    .featured-collection-btn-prev-{{ section.id }},
    .featured-collection-btn-next-{{ section.id }} {
      display: none;
    }

    @media(min-width: 1024px) {
      .featured-collection-btn-prev-{{ section.id }},
      .featured-collection-btn-next-{{ section.id }} {
        display: flex;
      }
    }
  </style>
{% endif %}

{% if product_per_mobile == "1.3" %}
  <style>
    .featured-collection-slider-{{ section.id }} {
      margin-left: -{{ padding_horizontal_mobile }}rem !important;
      margin-right: -{{ padding_horizontal_mobile }}rem !important;
      padding-left: {{ padding_horizontal_mobile }}rem !important;
      padding-right: {{ padding_horizontal_mobile }}rem !important;
    }

    @media(min-width: 1024px) {
      .featured-collection-slider-{{ section.id }} {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
        padding-left: 0rem !important;
        padding-right: 0rem !important;
      }
    }
  </style>
{% endif %}

{% if full_width %}
  <style>
    .featured-collection-slider-{{ section.id }} {
      margin-left: -{{ padding_horizontal_mobile }}rem !important;
      margin-right: -{{ padding_horizontal_mobile }}rem !important;
      padding-left: {{ padding_horizontal_mobile }}rem !important;
      padding-right: {{ padding_horizontal_mobile }}rem !important;
    }

    @media(min-width: 1024px) {
      .featured-collection-slider-{{ section.id }} {
        margin-left: -{{ padding_horizontal }}rem !important;
        margin-right: -{{ padding_horizontal }}rem !important;
        padding-left: {{ padding_horizontal }}rem !important;
        padding-right: {{ padding_horizontal }}rem !important;
      }
    }
  </style>
{% endif %}

<div class="section-{{ section.id }} featured-collection-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings featured-collection-wrapper-{{ section.id }}">

        {% if invert_content %}

          {% if sub_heading != blank %}
            <p>{{ sub_heading }}</p>
          {% endif %}

        {% endif %}

        {% if heading != blank %}
          <div class="featured-collection-top-{{ section.id }} collection-slider-heading">
            <h2>{{ heading }}</h2>
            {% comment %}}
            <a class="featured-collection-link-{{ section.id }}" href="{{ link_url }}">
              {{ link }}
              <div class="featured-collection-arrow-{{ section.id }}">
                <svg class="featured-collection-arrow-{{ section.id }}" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z">
                </svg>
              </div>
            </a>
          {% endcomment %}
          </div>
        {% endif %}

        {% unless invert_content %}

          {% if sub_heading != blank %}
            <p>{{ sub_heading }}</p>
          {% endif %}

        {% endunless %}
        {% unless stack_products %}
          <div class="featured-collection-slider-{{ section.id }} carousel-slider-overflow" data-preview-mobile="{% if product_per_mobile == blank %} 1 {% else %}{{ product_per_mobile }}{% endif %}" data-preview-mobile-big="{% if product_per_mobile == blank %} 2 {% else %}{{ product_per_mobile | times: 2 | round: 0 }}{% endif %}" data-preview-desktop="{% if product_per_desktop == blank %} 4 {% else %}{{ product_per_desktop }}{% endif %}">
            {% if top_bar %}
              <div class="featured-collection-pagination-{{ section.id }} {% unless show_bar %} hide {% endunless %} swiper-pagination"></div>
            {% endif %}
            <div class="swiper-wrapper carousel-overflow">
              {% assign items_size = items | size %}
              {% if items != blank %}
                {% for item in items limit:product_show %}
                  <a href="{{ item.url }}" class="swiper-slide">
                    <div class="featured-collection-image-{{ section.id }} {% if item.images.size > 1 %} has-secondary-{{ section.id }} {% endif %}">
                      {% if item.images.size > 0  %}
                        <img class="{% if item.images.size > 1 %}featured-collection-first-image-{{ section.id }}{% endif %}" src="{{ item.featured_image | image_url }}">
                      {% else %}
                        {{ 'collection-1' | placeholder_svg_tag }}
                      {% endif %}
                      {% if item.images.size > 1 %}
                        {% for img in item.images %}
                          {% if forloop.index == 2 %}
                            <img class="featured-collection-second-image-{{ section.id }}" src="{{ img | image_url }}">
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    </div>
                    <div class="featured-collection-content-{{ section.id }}">
                      <p class="featured-collection-title-{{ section.id }}">{{ item.title }}</p>
                      <p class="featured-collection-price-{{ section.id }}">
                        {% if item.selected_or_first_available_variant.compare_at_price > item.selected_or_first_available_variant.price -%}
                          {{ item.selected_or_first_available_variant.price | money }}
                          <span>{{ item.selected_or_first_available_variant.compare_at_price | money }}</span>
                        {%- else -%}
                          {{- item.selected_or_first_available_variant.price | money -}}
                        {%- endif %}
                      </p>
                    </div>
                  </a>
                {% endfor %}
              {% else %}
                {% for item in (1..product_show) %}
                  <a href="{{ item.url }}" class="swiper-slide">
                    <div class="featured-collection-image-{{ section.id }}">
                      {{ 'image' | placeholder_svg_tag }}
                    </div>
                    <div class="featured-collection-content-{{ section.id }}">
                      <p class="featured-collection-title-{{ section.id }}">Title</p>
                      <p class="featured-collection-price-{{ section.id }}">Price</p>
                    </div>
                  </a>
                {% endfor %}
              {% endif %}
            </div>
            <div class="featured-collection-btn-prev-{{ section.id }} carousel-button">
              <span class="animate-icon"></span>
            </div>
            <div class="featured-collection-btn-next-{{ section.id }} carousel-button">
              <span class="animate-icon"></span>
            </div>
            {% unless top_bar %}
              <div class="featured-collection-pagination-{{ section.id }} {% unless show_bar %} hide {% endunless %} swiper-pagination"></div>
            {% endunless %}
          </div>
          <div class="collection-slider-view-all">
            <a class="featured-collection-link-{{ section.id }}" href="{{ link_url }}">
              {{ link }}
            </a>
          </div>
        {% endunless %}

        {% if stack_products %}
          <div class="featured-collection-items-{{ section.id }}">
            {% if items != blank %}
              {% for item in items limit:product_show %}
                  <a href="{{ item.url }}" class="featured-collection-item-{{ section.id }}">
                    <div class="featured-collection-image-{{ section.id }} {% if item.images.size > 1 %} has-secondary-{{ section.id }} {% endif %}">
                      <img class="{% if item.images.size > 1 %}featured-collection-first-image-{{ section.id }}{% endif %}" src="{{ item.featured_image | image_url }}">
                      {% if item.images.size > 1 %}
                        {% for img in item.images %}
                          {% if forloop.index == 2 %}
                            <img class="featured-collection-second-image-{{ section.id }}" src="{{ img | image_url }}">
                          {% endif %}
                        {% endfor %}
                      {% endif %}
                    </div>
                    <div class="featured-collection-content-{{ section.id }}">
                      <p class="featured-collection-title-{{ section.id }}">{{ item.title }}</p>
                      <p class="featured-collection-price-{{ section.id }}">
                        {% if item.selected_or_first_available_variant.compare_at_price > item.selected_or_first_available_variant.price -%}
                          {{ item.selected_or_first_available_variant.price | money }}
                          <span>{{ item.selected_or_first_available_variant.compare_at_price | money }}</span>
                        {%- else -%}
                          {{- item.selected_or_first_available_variant.price | money -}}
                        {%- endif %}
                      </p>
                    </div>
                  </a>
              {% endfor %}
            {% else %}
              {% for item in (1..product_show) %}
                <a href="{{ item.url }}" class="featured-collection-item-{{ section.id }}">
                  <div class="featured-collection-image-{{ section.id }}">
                    {{ 'image' | placeholder_svg_tag }}
                  </div>
                  <div class="featured-collection-content-{{ section.id }}">
                    <p class="featured-collection-title-{{ section.id }}">Title</p>
                    <p class="featured-collection-price-{{ section.id }}">Price</p>
                  </div>
                </a>
              {% endfor %}
            {% endif %}
          </div>
        {% endif %}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@6.8.4/swiper-bundle.min.js"></script>

<script>
  function initFeaturedCollection() {
    let item = document.querySelector('.featured-collection-slider-{{ section.id }}');
    let perMobile = item.getAttribute('data-preview-mobile');
    let perMobileBig = item.getAttribute('data-preview-mobile-big');
    let perDesktop = item.getAttribute('data-preview-desktop');
    const slider = new Swiper('.featured-collection-slider-{{ section.id }}', {
      speed: 300,
      spaceBetween: 20,
      slidesPerView: 2,
      slidesPerGroup: 4, // Add this line to set the number of slides to move at a time
      navigation: {
        nextEl: '.featured-collection-btn-next-{{ section.id }}',
        prevEl: '.featured-collection-btn-prev-{{ section.id }}'
      },
      pagination: {
        el: '.featured-collection-pagination-{{ section.id }}',
        type: 'progressbar'
      },
      breakpoints: {
        320: {
          slidesPerView: perMobile,
          slidesPerGroup: 2, // Ensure consistency across breakpoints
        },
        768: {
          slidesPerView: perMobileBig,
          slidesPerGroup: 2,
        },
        1024: {
          slidesPerView: perDesktop,
          slidesPerGroup: 4,
        }
      }
    });
  }
  initFeaturedCollection();
  document.addEventListener('DOMContentLoaded', initFeaturedCollection);
  if (Shopify.designMode) {
     document.addEventListener('DOMContentLoaded', initFeaturedCollection);
     document.addEventListener('shopify:section:select', initFeaturedCollection);
     document.addEventListener('shopify:section:deselect', initFeaturedCollection);
     document.addEventListener('shopify:inspector:activate', initFeaturedCollection);
     document.addEventListener('shopify:section:unload', initFeaturedCollection);
     document.addEventListener('shopify:section:load', initFeaturedCollection);
     document.addEventListener('shopify:section:settings:change', initFeaturedCollection);
  }
</script>


{% schema %}
  {
    "name": "Collection Carousel",
    "settings": [
       {
        "type": "paragraph",
        "content": "Support WebSensePro by [Subscribing our Channel](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
      }, 
       {
        "type": "header",
        "content": "Save settings to display section correctly"
      },
      {
        "type": "header",
        "content": "Layout Settings"
      },
      {
        "type": "range",
        "id": "items_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Cards Margin Top",
        "default": 40
      },
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "product_list",
        "id": "product_list",
        "label": "Products",
        "info": "Replaces collection when selected."
      },
      {
        "type": "checkbox",
        "id": "stack_products",
        "label": "Stack Products"
      },
      {
        "type": "checkbox",
        "id": "show_bar",
        "label": "Show Progress Bar"
      },
      {
        "type": "checkbox",
        "id": "top_bar",
        "label": "Top position bar"
      },
      {
        "type": "range",
        "id": "product_show",
        "min": 20,
        "max": 505,
        "step": 5,
        "label": "Product to Show",
        "default": 20
      },
      {
        "type": "range",
        "id": "product_per_desktop",
        "min": 1,
        "max": 5,
        "step": 1,
        "label": "Product Per Row Desktop",
        "default": 4
      },
      {
        "type": "select",
        "id": "product_per_mobile",
        "options": [
          {
            "label": "1",
            "value": "1"
          },
          {
            "label": "1.3",
            "value": "1.3"
          },
          {
            "label": "2",
            "value": "2"
          }
        ],
        "label": "Product per Row Mobile",
        "default": "1"
      },
      {
        "type": "header",
        "content": "Card Settings"
      },
      {
        "type": "range",
        "id": "image_radius",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Image Border Radius",
        "default": 12
      },
      {
        "type": "select",
        "id": "image_ration",
        "label": "Image Aspect Ratio",
        "default": "square",
        "info": "When not selected 'Use Custom Height'",
        "options": [
         {
            "label": "None",
            "value": "none"
          },
          {
            "label": "Square",
            "value": "square"
          },
          {
            "label": "Portrait",
            "value": "portrait"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "use_custom_height",
        "label": "Use custom Height"
      },
      {
        "type": "range",
        "id": "image_height_desktop",
        "min": 100,
        "max": 600,
        "step": 10,
        "unit": "px",
        "label": "Image Height Desktop",
        "default": 400
      },
      {
        "type": "range",
        "id": "image_height_mobile",
        "min": 50,
        "max": 600,
        "step": 10,
        "unit": "px",
        "label": "Image Height Mobile",
        "default": 200
      },
      {
        "type": "checkbox",
        "id": "show_second",
        "label": "Show Second Image on Hover",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "use_shadow",
        "label": "Use Box Shadow"
      },
      {
        "type": "checkbox",
        "id": "use_radius",
        "label": "Use Card Roundness"
      },
      {
        "type": "range",
        "id": "card_padding_horizontal",
        "min": 0,
        "max": 40,
        "step": 4,
        "unit": "px",
        "label": "Card Padding Horizontal",
        "default": 4
      },
      {
        "type": "range",
        "id": "card_padding_vertical",
        "min": 0,
        "max": 40,
        "step": 4,
        "unit": "px",
        "label": "Card Padding Vertical",
        "default": 16
      },
      {
        "type": "header",
        "content": "Card Title"
      },
      {
        "type": "checkbox",
        "id": "card_title_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "card_title_font",
        "label": "Card Title Font Family",
        "default": "assistant_n4"
      },
      {
        "type": "range",
        "id": "card_title_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Title Size",
        "default": 24
      },
      {
        "type": "range",
        "id": "card_title_letter",
        "min": 0,
        "max": 5,
        "step": 0.1,
        "unit": "px",
        "label": "Card Title Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "card_title_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Card Title Line Height",
        "default": 100
      },
      {
        "type": "header",
        "content": "Heading"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "type": "checkbox",
        "id": "heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "heading_font",
        "label": "Heading Font Family",
        "default": "assistant_n4"
      },
      {
        "type": "range",
        "id": "heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size",
        "default": 50
      },
      {
        "type": "range",
        "id": "heading_letter",
        "min": 0,
        "max": 5,
        "step": 0.1,
        "unit": "px",
        "label": "Heading Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Heading Line Height",
        "default": 100
      },
      {
        "type": "select",
        "id": "heading_align",
        "label": "Heading Text Align",
        "default": "center",
        "info": "If Link Under Heading",
        "options": [
         {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "header",
        "content": "Subheading"
      },
      {
        "type": "text",
        "id": "sub_heading",
        "label": "Subheading"
      },
      {
        "type": "checkbox",
        "id": "sub_heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "sub_heading_font",
        "label": "Subheading Font Family",
        "default": "assistant_n4"
      },
      {
        "type": "range",
        "id": "sub_heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Subheading Size",
        "default": 50
      },
      {
        "type": "range",
        "id": "sub_heading_letter",
        "min": 0,
        "max": 5,
        "step": 0.1,
        "unit": "px",
        "label": "Subheading Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "sub_heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Subheading Line Height",
        "default": 100
      },
      {
        "type": "select",
        "id": "sub_heading_align",
        "label": "Subheading Text Align",
        "default": "center",
        "options": [
         {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "invert_content",
        "label": "Invert Heading with Subheading"
      },
      {
        "type": "header",
        "content": "Link"
      },
      {
        "type": "text",
        "id": "link",
        "label": "Link",
        "default": "View all"
      },
      {
        "type": "url",
        "id": "link_url",
        "label": "Link URL"
      },
      {
        "type": "checkbox",
        "id": "link_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "link_font",
        "label": "Link Font Family",
        "default": "assistant_n4"
      },
      {
        "type": "range",
        "id": "link_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Link Size",
        "default": 18
      },
      {
        "type": "range",
        "id": "link_letter",
        "min": 0,
        "max": 5,
        "step": 0.1,
        "unit": "px",
        "label": "Link Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "link_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Link Line Height",
        "default": 100
      },
      {
        "type": "checkbox",
        "id": "link_position",
        "label": "Link Under Heading"
      },
      {
        "type": "checkbox",
        "id": "link_mobile",
        "label": "Show Link on Mobile",
        "default": true
      },
      {
        "type": "header",
        "content": "Card Price"
      },
      {
        "type": "checkbox",
        "id": "card_price_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "card_price_font",
        "label": "Card Price Font Family",
        "default": "assistant_n4"
      },
      {
        "type": "range",
        "id": "card_price_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Price Size",
        "default": 16
      },
      {
        "type": "range",
        "id": "card_price_letter",
        "min": 0,
        "max": 5,
        "step": 0.1,
        "unit": "px",
        "label": "Card Price Letter Spacing",
        "default": 0
      },
      {
        "type": "range",
        "id": "card_price_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Card Price Line Height",
        "default": 100
      },
      {
        "type": "range",
        "id": "card_price_mt",
        "min": 0,
        "max": 80,
        "step": 4,
        "unit": "px",
        "label": "Card Price Margin top",
        "default": 12
      },
      {
        "type": "header",
        "content": "Arrow Settings"
      },
      {
        "type": "range",
        "id": "arrow_size",
        "min": 20,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Arrow Size ",
        "default": 50
      },
      {
        "type": "range",
        "id": "arrow_size_mobile",
        "min": 20,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Arrow Size - Mobile",
        "default": 40
      },
      {
        "type": "checkbox",
        "id": "arrow_hide_mobile",
        "label": "Hide Arrow on Mobile"
      },
      {
        "type": "header",
        "content": "Link Colors"
      },
      {
        "type": "color",
        "label": "Link Color",
        "id": "link_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Link hover Color",
        "id": "link_hover_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Link Arrow Color",
        "id": "link_arrow_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Link Background Arrow Color",
        "id": "link_background_color",
        "default": "#E6E6E6"
      },
      {
        "type": "color",
        "label": "Link Background Arrow Hover Color",
        "id": "link_background_hover_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Card Colors"
      },
      {
        "type": "color",
        "label": "Card Background Color",
        "id": "card_content_bg_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Card Title Color",
        "id": "card_title_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Card Price Color",
        "id": "card_price_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Navigation Colors"
      },
      {
        "type": "color",
        "label": "Arrow color",
        "id": "arrow_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Arrow Hover color",
        "id": "arrow_hover_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Arrow Background color",
        "id": "arrow_bg_color",
        "default": "#F2F2F2"
      },
      {
        "type": "color",
        "label": "Arrow Background Hover color",
        "id": "arrow_bg_hover_color",
        "default": "#F2F2F2"
      },
      {
        "type": "color",
        "label": "Arrow Border color",
        "id": "arrow_border_color",
        "default": "#C4C4C4"
      },
      {
        "type": "color",
        "label": "Arrow Border Hover color",
        "id": "arrow_border_hover_color",
        "default": "#C4C4C4"
      },
      {
        "type": "color",
        "label": "Progress Bar Color",
        "id": "progress_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section Colors"
      },
      {
        "type": "color",
        "label": "Heading Color",
        "id": "heading_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Subheading Color",
        "id": "sub_heading_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "Section background gradient"
      },
      {
        "type": "color",
        "label": "Border",
        "id": "border_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section margin (outside)"
      },
      {
        "type": "range",
        "id": "margin_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin bottom",
        "default": 0
      },
      {
        "type": "header",
        "content": "Section padding (inside)"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding top",
        "default": 36
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 36
      },
      {
        "type": "range",
        "id": "padding_horizontal",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "rem",
        "label": "Padding sides",
        "default": 5
      },
      {
        "type": "range",
        "id": "padding_horizontal_mobile",
        "min": 0,
        "max": 15,
        "step": 0.5,
        "unit": "rem",
        "label": "Padding sides mobile",
        "default": 1.5
      },
      {
        "type": "header",
        "content": "Section Settings"
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width",
        "default": false
      },
      {
        "type": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 130
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      }
    ],
    "presets": [
      {
        "name": "Collection Carousel",
        "settings": {
          "product_per_desktop": 4,
          "product_per_mobile": "1"
        }
      }
    ]
  }
{% endschema %}