<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

{%- 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 stars_align = section.settings.stars_align
  assign stars_align_card = section.settings.stars_align_card
  assign stars_icon = section.settings.stars_icon
  assign stars_color = section.settings.stars_color
  assign stars_size = section.settings.stars_size
  assign stars_count = section.settings.stars_count

  assign text = section.settings.text
  assign text_size = section.settings.text_size
  assign text_size_mobile = section.settings.text_size_mobile
  assign text_color = section.settings.text_color
  assign text_custom = section.settings.text_custom
  assign text_font = section.settings.text_font
  assign text_height = section.settings.text_height
  assign text_align = section.settings.text_align
  assign text_mt = section.settings.text_mt

  assign heading = section.settings.heading
  assign heading_size = section.settings.heading_size
  assign heading_size_mobile = section.settings.heading_size_mobile
  assign heading_color = section.settings.heading_color
  assign heading_custom = section.settings.heading_custom
  assign heading_font = section.settings.heading_font
  assign heading_height = section.settings.heading_height
  assign heading_align = section.settings.heading_align
  assign heading_mt = section.settings.heading_mt

  assign slider_width = section.settings.slider_width
  assign slider_view = section.settings.slider_view
  assign slider_view_mobile = section.settings.slider_view_mobile
  assign slider_gap = section.settings.slider_gap
  assign slider_gap_mobile = section.settings.slider_gap_mobile
  assign slider_mt = section.settings.slider_mt

  assign card_padding_vertical = section.settings.card_padding_vertical
  assign card_padding_vertical_mobile = section.settings.card_padding_vertical_mobile
  assign card_padding_horizontal = section.settings.card_padding_horizontal
  assign card_padding_horizontal_mobile = section.settings.card_padding_horizontal_mobile
  assign card_radius = section.settings.card_radius
  assign card_border_thickness = section.settings.card_border_thickness
  assign card_border_color = section.settings.card_border_color
  assign card_bg_color = section.settings.card_bg_color

  assign card_text_size = section.settings.card_text_size
  assign card_text_size_mobile = section.settings.card_text_size_mobile
  assign card_text_color = section.settings.card_text_color
  assign card_text_custom = section.settings.card_text_custom
  assign card_text_font = section.settings.card_text_font
  assign card_text_height = section.settings.card_text_height
  assign card_text_align = section.settings.card_text_align
  assign card_text_mt = section.settings.card_text_mt

  assign card_author_size = section.settings.card_author_size
  assign card_author_size_mobile = section.settings.card_author_size_mobile
  assign card_author_color = section.settings.card_author_color
  assign card_author_custom = section.settings.card_author_custom
  assign card_author_font = section.settings.card_author_font
  assign card_author_height = section.settings.card_author_height
  assign card_author_align = section.settings.card_author_align
  assign card_author_mt = section.settings.card_author_mt

  assign card_city_size = section.settings.card_city_size
  assign card_city_size_mobile = section.settings.card_city_size_mobile
  assign card_city_color = section.settings.card_city_color
  assign card_city_custom = section.settings.card_city_custom
  assign card_city_font = section.settings.card_city_font
  assign card_city_height = section.settings.card_city_height
  assign card_city_align = section.settings.card_city_align
  assign card_city_mt = section.settings.card_city_mt

  assign arrow_size = section.settings.arrow_size
  assign arrow_size_mobile = section.settings.arrow_size_mobile
  assign arrow_icon_size = section.settings.arrow_icon_size
  assign arrow_icon_size_mobile = section.settings.arrow_icon_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_thickness = section.settings.arrow_border_thickness
  assign arrow_border_color = section.settings.arrow_border_color
  assign arrow_border_hover_color = section.settings.arrow_border_hover_color
  assign arrow_show_desktop = section.settings.arrow_show_desktop
  assign arrow_show_mobile = section.settings.arrow_show_mobile

  assign dots_size = section.settings.dots_size
  assign dots_size_mobile = section.settings.dots_size_mobile
  assign dots_show_desktop = section.settings.dots_show_desktop
  assign dots_show_mobile = section.settings.dots_show_mobile
  assign dots_color = section.settings.dots_color
-%}

{%- style -%}

  {{  heading_font | font_face: font_display: 'swap' }}
  {{  text_font | font_face: font_display: 'swap' }}
  {{  card_text_font | font_face: font_display: 'swap' }}
  {{  card_author_font | font_face: font_display: 'swap' }}
  {{  card_city_font | 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 }}::selection {
     background-color: transparent !important;
   }
  
  .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;
  }

  .section-{{ section.id }}-settings::selection {
     background-color: transparent !important;
   }
  
  .testimonials-stars-{{ section.id }} {
    display: flex;
    align-items: center;
    justify-content: {{ stars_align }};
  }

  .testimonials-slide-top-{{ section.id }} .testimonials-stars-{{ section.id }} {
    justify-content: {{ stars_align_card }};
  }

  .testimonials-stars-{{ section.id }} svg path {
    fill: {{ stars_color }};
  }

  .testimonials-stars-{{ section.id }} svg,
  .testimonials-stars-{{ section.id }} img {
    display: block;
    width: {{ stars_size }}px;
    height: {{ stars_size }}px;
    object-fit: cover;
  }

  .testimonials-text-{{ section.id }} {
    margin-top: {{ text_mt | times: 0.75 | round: 0 }}px;
  }

  .testimonials-text-{{ section.id }} * {
    margin: 0;
    font-size: {{ text_size_mobile }}px;
    color: {{ text_color }};
    line-height: {{ text_height }}%;
    text-align: {{ text_align }};
    text-transform: unset;
  }

  .testimonials-heading-{{ section.id }} {
    margin: 0;
    margin-top: {{ heading_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ heading_size_mobile }}px;
    color: {{ heading_color }};
    line-height: {{ heading_height }}%;
    text-align: {{ heading_align }};
    text-transform: unset;
  }

  .testimonials-slider-wrapper-{{ section.id }} {
    margin-top: {{ slider_mt | times: 0.75 | round: 0 }}px;
  }

  .testimonials-slider-{{ section.id }} {
    overflow: visible !important;
  }

  .testimonials-slider-{{ section.id }} .swiper-wrapper{
    align-items: stretch !important;
  }

  .testimonials-slide-{{ section.id }} {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: {{ card_author_mt | times: 0.75 | round: 0 }}px;
    padding: {{ card_padding_vertical_mobile }}px {{ card_padding_horizontal_mobile }}px;
    border-radius: {{ card_radius }}px;
    border: {{ card_border_thickness }}px solid {{ card_border_color }};
    background-color: {{ card_bg_color }};
    box-sizing: border-box !important; 
    height: auto !important;
  }

  .testimonials-slide-{{ section.id }}.swiper-slide-active {
    opacity: 1 !important;
  }

  .testimonials-slide-text-{{ section.id }} {
    margin: 0px;
    margin-top: {{ card_text_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ card_text_size_mobile }}px;
    color: {{ card_text_color }};
    line-height: {{ card_text_height }}%;
    text-align: {{ card_text_align }};
    text-transform: unset;
  }

  .testimonials-slide-author-{{ section.id }} {
    margin: 0px;
    font-size: {{ card_author_size_mobile }}px;
    font-weight: 700;
    color: {{ card_author_color }};
    line-height: {{ card_author_height }}%;
    text-align: {{ card_author_align }};
    text-transform: unset;
  }

  .testimonials-slide-city-{{ section.id }} {
    margin: 0px;
    margin-top: {{ card_city_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ card_city_size_mobile }}px;
    color: {{ card_city_color }};
    line-height: {{ card_city_height }}%;
    text-align: {{ card_city_align }};
    text-transform: unset;
  }

  .testimonials-btn-prev-{{ section.id }},
  .testimonials-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: {{ arrow_border_thickness }}px solid {{ arrow_border_color }};
    border-radius: 50%;
    background: {{ arrow_bg_color }};
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    -webkit-appearance: none;
  }

  .testimonials-btn-prev-{{ section.id }} {
    left: 0px !important;
  }

  .testimonials-btn-next-{{ section.id }} {
    right: 0px !important;
  }

  .testimonials-btn-prev-{{ section.id }} svg,
  .testimonials-btn-next-{{ section.id }} svg {
    height: {{ arrow_icon_size_mobile }}px;
    width: {{ arrow_icon_size_mobile }}px;
  }

  .testimonials-btn-next-{{ section.id }} svg {
    transform: rotate(180deg);
    margin-left: 2px;
  }

  .testimonials-btn-prev-{{ section.id }} svg {
    margin-left: -2px;
  }

  .testimonials-btn-prev-{{ section.id }} svg path,
  .testimonials-btn-next-{{ section.id }} svg path {
    fill: {{ arrow_color }} !important;
    transition: all 0.3s ease 0s;
  }

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

  .testimonials-btn-prev-{{ section.id }}:hover svg path,
  .testimonials-btn-next-{{ section.id }}:hover svg path {
    fill: {{ arrow_hover_color }} !important;
    transition: all 0.3s ease 0s;
  }

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

  .testimonials-pagination-{{ section.id }} {
    margin-top: 20px;
    position: static !important;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet {
    width: {{ dots_size_mobile }}px;
    height: {{ dots_size_mobile }}px;
    background-color: {{ dots_color }};
    opacity: 0.6;
  }

  .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 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;
    }

    .testimonials-text-{{ section.id }} {
      margin-top: {{ text_mt }}px;
    }

    .testimonials-text-{{ section.id }} * {
      font-size: {{ text_size }}px;
    }

    .testimonials-heading-{{ section.id }} {
      margin-top: {{ heading_mt }}px;
      font-size: {{ heading_size }}px;
    }

    .testimonials-slider-wrapper-{{ section.id }} {
      margin-top: {{ slider_mt }}px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      max-width: {{ slider_width }}%;
    }
    
    .testimonials-slide-{{ section.id }} {
      gap: {{ card_author_mt }}px;
       padding: {{ card_padding_vertical }}px {{ card_padding_horizontal }}px;
    }

    .testimonials-slide-text-{{ section.id }} {
      margin-top: {{ card_text_mt }}px;
      font-size: {{ card_text_size }}px;
    }

    .testimonials-slide-author-{{ section.id }} {
      font-size: {{ card_author_size }}px;
    }

    .testimonials-slide-city-{{ section.id }} {
      margin-top: {{ card_city_mt }}px;
      font-size: {{ card_city_size }}px;
    }

    .testimonials-slide-{{ section.id }}.swiper-slide {
      opacity: 0.5;
      transition: all 0.3s cubic-bezier(.4,0,.2,1) 0s;
    }
  
    .testimonials-slide-{{ section.id }}.swiper-slide-visible {
      opacity: 1;
      transition: all 0.3s cubic-bezier(.4,0,.2,1) 0s;
    }

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

    .testimonials-btn-prev-{{ section.id }} {
      left: -{{ arrow_size | times: 0.5 }}px !important;
    }
  
    .testimonials-btn-next-{{ section.id }} {
      right: -{{ arrow_size | times: 0.5 }}px !important;
    }

    .testimonials-btn-prev-{{ section.id }} svg,
    .testimonials-btn-next-{{ section.id }} svg {
      height: {{ arrow_icon_size }}px;
      width: {{ arrow_icon_size }}px;
    }

    .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet {
      width: {{ dots_size }}px;
      height: {{ dots_size }}px;
    }

    .testimonials-slide-{{ section.id }}.swiper-slide-next,
    .testimonials-slide-{{ section.id }}.swiper-slide-prev {
      opacity: 1 !important;
    }
  }
  
{%- endstyle -%}

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

{% if heading_custom %}
  <style>
    .testimonials-heading-{{ section.id }} {
      font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
      font-weight: {{ heading_font.weight }};
      font-style: {{ heading_font.style }};
    }
  </style>
{% endif %}

{% if text_custom %}
  <style>
    .testimonials-text-{{ section.id }} * {
      font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
      font-weight: {{ text_font.weight }};
      font-style: {{ text_font.style }};
    }
  </style>
{% endif %}

{% if card_text_custom %}
  <style>
    .testimonials-slide-text-{{ section.id }} {
      font-family: {{ card_text_font.family }}, {{ card_text_font.fallback_families }};
      font-weight: {{ card_text_font.weight }};
      font-style: {{ card_text_font.style }};
    }
  </style>
{% endif %}

{% if card_author_custom %}
  <style>
    .testimonials-slide-author-{{ section.id }} {
      font-family: {{ card_author_font.family }}, {{ card_author_font.fallback_families }};
      font-weight: {{ card_author_font.weight }};
      font-style: {{ card_author_font.style }};
    }
  </style>
{% endif %}

{% if card_city_custom %}
  <style>
    .testimonials-slide-city-{{ section.id }} {
      font-family: {{ card_city_font.family }}, {{ card_city_font.fallback_families }};
      font-weight: {{ card_city_font.weight }};
      font-style: {{ card_city_font.style }};
    }
  </style>
{% endif %}

{% if arrow_show_mobile %}
  <style>
    .testimonials-btn-prev-{{ section.id }},
    .testimonials-btn-next-{{ section.id }} {
      display: flex;
    }
  </style>
{% else %}
  <style>
    .testimonials-btn-prev-{{ section.id }},
    .testimonials-btn-next-{{ section.id }} {
      display: none;
    }
  </style>
{% endif %}

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

{% if dots_show_mobile %}
  <style>
    .testimonials-pagination-{{ section.id }} {
      display: flex !important;
    }
  </style>
{% else %}
  <style>
    .testimonials-pagination-{{ section.id }} {
      display: none !important;
    }
  </style>
{% endif %}

{% if dots_show_desktop %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-pagination-{{ section.id }} {
        display: flex !important;
      }
    }
  </style>
{% else %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-pagination-{{ section.id }} {
        display: none !important;
      }
    }
  </style>
{% endif %}

{% comment %} PREVIEW {% endcomment %}
<style>
  .testimonials-slider-{{ section.id }}.preview .swiper-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    gap: {{ slider_gap }}px;
    max-width: 100%;
  }

  .testimonials-slider-{{ section.id }}.preview .testimonials-slide-{{ section.id }} {
    width: 100%;
  }

  .testimonials-slider-{{ section.id }}.preview .testimonials-slide-{{ section.id }}:not(:first-child) {
    margin-left: {{ slider_gap }}px;
  }
</style>

<div class="section-{{ section.id }} testimonials-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings ">
 {% if stars_count != 0 and section.settings.show_stars %}


        <div class="testimonials-stars-{{ section.id }}">
            {% if stars_icon != blank %}
              {% for item in (1..stars_count) %}
                <img src="{{ stars_icon | image_urll }}" alt="{{ stars_icon.alt }}">
              {% endfor %}
            {% else %}
              {% for item in (1..stars_count) %}
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                  <path d="M10 0L12.9389 5.95492L19.5106 6.90983L14.7553 11.5451L15.8779 18.0902L10 15L4.12215 18.0902L5.24472 11.5451L0.489435 6.90983L7.06107 5.95492L10 0Z" fill="#000000"></path>
                </svg>
              {% endfor %}
            {% endif %}
        </div>
      {% endif %}
      {% if text != blank %}
        <div class="testimonials-text-{{ section.id }}">{{ text }}</div>
      {% endif %}
      {% if heading != blank %}
        <h2 class="testimonials-heading-{{ section.id }}">{{ heading }}</h2>
      {% endif %}
      <div class="testimonials-slider-wrapper-{{ section.id }}">
        <div class="testimonials-slider-{{ section.id }} swiper preview">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
              <div class="testimonials-slide-{{ section.id }} swiper-slide">
                <div class="testimonials-slide-top-{{ section.id }}">
              {% if block.settings.stars_count != 0 and section.settings.show_stars %}

                    <div class="testimonials-stars-{{ section.id }}">
                        {% if stars_icon != blank %}
                          {% for item in (1..block.settings.stars_count) %}
                            <img src="{{ stars_icon | image_urll }}" alt="{{ stars_icon.alt }}">
                          {% endfor %}
                        {% else %}
                          {% for item in (1..block.settings.stars_count) %}
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                              <path d="M10 0L12.9389 5.95492L19.5106 6.90983L14.7553 11.5451L15.8779 18.0902L10 15L4.12215 18.0902L5.24472 11.5451L0.489435 6.90983L7.06107 5.95492L10 0Z" fill="#1F448C"></path>
                            </svg>
                          {% endfor %}
                        {% endif %}
                    </div>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <p class="testimonials-slide-text-{{ section.id }}">{{ block.settings.text }}</p>
                  {% endif %}
                </div>
                <div class="testimonials-slide-bottom-{{ section.id }}">
                  {% if block.settings.author != blank %}
                    <p class="testimonials-slide-author-{{ section.id }}">{{ block.settings.author }}</p>
                  {% endif %}
                  {% if block.settings.city != blank %}
                    <p class="testimonials-slide-city-{{ section.id }}">{{ block.settings.city }}</p>
                  {% endif %}
                </div>
              </div>
            {% endfor %}
          </div>
          <div class="testimonials-btn-prev-{{ section.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Artboard-66</title><g id="Left"><path d="M14,17a1,1,0,0,1-.707-.293l-4-4a1,1,0,0,1,0-1.414l4-4a1,1,0,1,1,1.414,1.414L11.414,12l3.293,3.293A1,1,0,0,1,14,17Z" style="fill:#1c1b1e"/></g></svg>
          </div>
          <div class="testimonials-btn-next-{{ section.id }}">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Artboard-66</title><g id="Left"><path d="M14,17a1,1,0,0,1-.707-.293l-4-4a1,1,0,0,1,0-1.414l4-4a1,1,0,1,1,1.414,1.414L11.414,12l3.293,3.293A1,1,0,0,1,14,17Z" style="fill:#1c1b1e"/></g></svg>
          </div>
          <div class="testimonials-pagination-{{ section.id }} swiper-pagination"></div>
        </div>
      </div>
    </div>
</div>

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

{% assign size = slider_view | modulo: 2 %}
{% assign size_tablet = slider_view | times: 0.5 | round: 0 | modulo: 2 %}
              
<script>
  function initTestimonials3() {
    document.querySelector('.testimonials-slider-{{ section.id }}').classList.remove('preview');
    const slider = new Swiper('.testimonials-slider-{{ section.id }}', {
      speed: 300,
      loop: true,
      watchSlidesProgress: true,
      navigation: {
        nextEl: '.testimonials-btn-next-{{ section.id }}',
        prevEl: '.testimonials-btn-prev-{{ section.id }}'
      },
      pagination: {
        el: '.testimonials-pagination-{{ section.id }}',
        type: 'bullets',
        clickable: true
      },
      breakpoints: {
        320: {
          centeredSlides: true,
          spaceBetween: {{ slider_gap_mobile }},
          slidesPerView: {{ slider_view_mobile }}
        },
        768: {
          centeredSlides: {% if size_tablet == 0 %}false{% else %}true{% endif %},
          spaceBetween: {{ slider_gap_mobile }},
          slidesPerView: {{ slider_view | times: 0.5 | round: 0 }}
        },
        1024: {
          centeredSlides: {% if size == 0 %}false{% else %}true{% endif %},
          spaceBetween: {{ slider_gap }},
          slidesPerView: {{ slider_view }}
        }
      }
    });
    slider.slidePrev();
    
  }

  document.addEventListener('DOMContentLoaded', initTestimonials3);
  
  if (Shopify.designMode) {
     document.addEventListener('shopify:section:unload', initTestimonials3);
     document.addEventListener('shopify:section:load', initTestimonials3);
  }
  
</script>

{% schema %}
  {
    "name": "Testimonial Slider",
    "settings": [
      {
        "type": "header",
        "content": "Save editor before slider works"
      },
      {
        "type": "header",
        "content": "Stars Settings"
      },
      {
        "type": "checkbox",
        "id": "show_stars",
        "label": "Show Stars",
        "default": true
      },
      {
        "type": "image_picker",
        "label": "Stars Icon",
        "id": "stars_icon",
        "info": "Replaces the default stars icon"
      },
      {
        "type": "range",
        "id": "stars_count",
        "min": 0,
        "max": 5,
        "step": 1,
        "label": "Stars Count on Heading",
        "default": 5
      },
      {
        "type": "range",
        "id": "stars_size",
        "min": 10,
        "max": 100,
        "step": 2,
        "label": "Stars Size",
        "default": 20
      },
      {
        "type": "select",
        "id": "stars_align",
        "label": "Stars Align on Heading",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "start"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "end"
          }
        ]
      },
      {
        "type": "select",
        "id": "stars_align_card",
        "label": "Stars Align on Card",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "start"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "end"
          }
        ]
      },
      {
        "type": "header",
        "content": "Text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p><strong>Join 10,000+ Happy Customers</strong></p>"
      },
      {
        "type": "checkbox",
        "id": "text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "text_font",
        "label": "Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Text Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Text Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Text Line Height",
        "default": 130
      },
      {
        "type": "select",
        "id": "text_align",
        "label": "Text Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "range",
        "id": "text_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Text Margin Top",
        "default": 12
      },
      {
        "type": "header",
        "content": "Heading"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "What Our Customers Say"
      },
      {
        "type": "checkbox",
        "id": "heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "heading_font",
        "label": "Heading Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size",
        "default": 50
      },
      {
        "type": "range",
        "id": "heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size - Mobile",
        "default": 36
      },
      {
        "type": "range",
        "id": "heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Heading Line Height",
        "default": 130
      },
      {
        "type": "select",
        "id": "heading_align",
        "label": "Heading Text Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "range",
        "id": "heading_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Heading Margin Top",
        "default": 20
      },
      {
        "type": "header",
        "content": "Slider Settings"
      },
      {
        "type": "range",
        "id": "slider_width",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "%",
        "label": "Slider Width - Desktop",
        "default": 80
      },
      {
        "type": "range",
        "id": "slider_view",
        "min": 1,
        "max": 7,
        "step": 1,
        "label": "Slides Per View",
        "default": 3
      },
      {
        "type": "range",
        "id": "slider_view_mobile",
        "min": 1,
        "max": 3,
        "step": 0.5,
        "label": "Slides Per View - Mobile",
        "default": 1.5
      },
      {
        "type": "range",
        "id": "slider_gap",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Slider Gap",
        "default": 20
      },
      {
        "type": "range",
        "id": "slider_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Slider Gap - Mobile",
        "default": 20
      },
      {
        "type": "range",
        "id": "slider_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Slider Margin Top",
        "default": 36
      },
      {
        "type": "header",
        "content": "Card Settings"
      },
      {
        "type": "range",
        "id": "card_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Card Padding Vertical",
        "default": 60
      },
      {
        "type": "range",
        "id": "card_padding_vertical_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Card Padding Vertical - Mobile",
        "default": 30
      },
      {
         "type": "range",
         "id": "card_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Card Padding Horizontal",
         "default": 40
      },
      {
         "type": "range",
         "id": "card_padding_horizontal_mobile",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Card Padding Horizontal - Mobile",
         "default": 20
      },
      {
         "type": "range",
         "id": "card_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Card Border Radius",
         "default": 0
      },
      {
         "type": "range",
         "id": "card_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Card Border Thickness",
         "default": 0
      },
      {
        "type": "header",
        "content": "Card Text"
      },
      {
        "type": "checkbox",
        "id": "card_text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "card_text_font",
        "label": "Card Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "card_text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Text Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Text Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Card Text Line Height",
        "default": 130
      },
      {
        "type": "select",
        "id": "card_text_align",
        "label": "Card Text Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "range",
        "id": "card_text_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Card Text Margin Top",
        "default": 20
      },
      {
        "type": "header",
        "content": "Card Author"
      },
      {
        "type": "checkbox",
        "id": "card_author_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "card_author_font",
        "label": "Card Author Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "card_author_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Author Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_author_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card Author Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_author_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Card Author Line Height",
        "default": 130
      },
      {
        "type": "select",
        "id": "card_author_align",
        "label": "Card Author Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "range",
        "id": "card_author_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Card Author Margin Top",
        "default": 20
      },
      {
        "type": "header",
        "content": "Card City"
      },
      {
        "type": "checkbox",
        "id": "card_city_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "card_city_font",
        "label": "Card City Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "card_city_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card City Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_city_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Card City Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "card_city_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Card City Line Height",
        "default": 130
      },
      {
        "type": "select",
        "id": "card_city_align",
        "label": "Card City Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "range",
        "id": "card_city_mt",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Card City Margin Top",
        "default": 12
      },
      {
        "type": "header",
        "content": "Arrow Settings"
      },
      {
        "type": "range",
        "id": "arrow_size",
        "min": 10,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Arrow Size",
        "default": 50
      },
      {
        "type": "range",
        "id": "arrow_size_mobile",
        "min": 10,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Arrow Size - Mobile",
        "default": 50
      },
      {
        "type": "range",
        "id": "arrow_icon_size",
        "min": 10,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Arrow Icon Size",
        "default": 28
      },
      {
        "type": "range",
        "id": "arrow_icon_size_mobile",
        "min": 10,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Arrow Icon Size - Mobile",
        "default": 28
      },
      {
        "type": "range",
        "id": "arrow_border_thickness",
        "min": 0,
        "max": 10,
        "step": 1,
        "unit": "px",
        "label": "Arrow Border Thickness",
        "default": 0
      },
      {
        "type": "checkbox",
        "id": "arrow_show_desktop",
        "label": "Show on Desktop",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "arrow_show_mobile",
        "label": "Show on Mobile",
        "default": false
      },
      {
        "type": "header",
        "content": "Dots Settings"
      },
      {
        "type": "range",
        "id": "dots_size",
        "min": 5,
        "max": 40,
        "step": 1,
        "unit": "px",
        "label": "Dots Size",
        "default": 12
      },
      {
        "type": "range",
        "id": "dots_size_mobile",
        "min": 5,
        "max": 40,
        "step": 1,
        "unit": "px",
        "label": "Dots Size - Mobile",
        "default": 12
      },
      {
        "type": "checkbox",
        "id": "dots_show_desktop",
        "label": "Show on Desktop",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "dots_show_mobile",
        "label": "Show on Mobile",
        "default": false
      },
      {
        "type": "header",
        "content": "Section Colors"
      },
      {
        "type": "color",
        "label": "Default Stars Color",
        "id": "stars_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Text Color",
        "id": "text_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Heading Color",
        "id": "heading_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Card Background Color",
        "id": "card_bg_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Card Border Color",
        "id": "card_border_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Card Text Color",
        "id": "card_text_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Card Author Color",
        "id": "card_author_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Card City Color",
        "id": "card_city_color",
        "default": "#000000"
      },
      {
        "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": "#E0E0E0"
      },
      {
        "type": "color",
        "label": "Arrow Background Hover color",
        "id": "arrow_bg_hover_color",
        "default": "#E0E0E0"
      },
      {
        "type": "color",
        "label": "Arrow Border color",
        "id": "arrow_border_color",
        "default": "#E0E0E0"
      },
      {
        "type": "color",
        "label": "Arrow Border Hover color",
        "id": "arrow_border_hover_color",
        "default": "#E0E0E0"
      },
      {
        "type": "color",
        "label": "Dots Color",
        "id": "dots_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#F5F5F5"
      },
      {
        "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": true
      },
      {
        "type": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 120
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      }
    ],
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "range",
            "id": "stars_count",
            "min": 0,
            "max": 5,
            "step": 1,
            "label": "Stars Count",
            "default": 5
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "text",
            "id": "author",
            "label": "Author"
          },
          {
            "type": "text",
            "id": "city",
            "label": "City"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Testimonial Slider",
        "blocks": [
          {
            "type": "slide",
            "settings": {
              "text": "“Absolutely love my purchase! Quality is outstanding and customer service was exceptional. I highly recommend this to anyone looking for a reliable product.”",
              "author": "Taylor L.",
              "city": "Boston"
            }
          },
          {
            "type": "slide",
            "settings": {
              "text": "“This exceeded all my expectations! The design is beautiful and it works perfectly. I'm already planning to order more for friends and family.”",
              "author": "Emma T.",
              "city": "New York"
            }
          },
          {
            "type": "slide",
            "settings": {
              "text": "“Fast shipping and the product is exactly as described. Very satisfied with my purchase and will definitely buy from this store again in the future.”",
              "author": "Carol B.",
              "city": "Dallas"
            }
          },
          {
            "type": "slide",
            "settings": {
              "text": "“Incredible quality and great value for money! The product arrived quickly and in perfect condition. Would give it 10 stars if I could!”",
              "author": "Molly A.",
              "city": "Charlotte"
            }
          },
          {
            "type": "slide",
            "settings": {
              "text": "“Best purchase I've made all year! The quality is amazing and it's been holding up perfectly. Thank you for such an incredible product!”",
              "author": "Maeve C.",
              "city": "San Fransisco"
            }
          }
        ]
      }
    ]
  }
{% endschema %}