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

{%- 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 lazy = section.settings.lazy

  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 rating_text = section.settings.rating_text
  assign rating_text_size = section.settings.rating_text_size
  assign rating_text_size_mobile = section.settings.rating_text_size_mobile
  assign rating_text_color = section.settings.rating_text_color
  assign rating_text_custom = section.settings.rating_text_custom
  assign rating_text_font = section.settings.rating_text_font
  assign rating_text_height = section.settings.rating_text_height
  assign rating_text_mt = section.settings.rating_text_mt
  assign rating_text_hide = section.settings.rating_text_hide

  assign rating_hide = section.settings.rating_hide
  assign rating = section.settings.rating
  assign rating_align = section.settings.rating_align

  assign stars_align = section.settings.stars_align
  assign stars_icon = section.settings.stars_icon
  assign stars_color = section.settings.stars_color
  assign stars_bg_color = section.settings.stars_bg_color
  assign stars_size = section.settings.stars_size
  assign stars_size_mobile = section.settings.stars_size_mobile
  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 text_right_image = section.settings.text_right_image

  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_shadow = section.settings.card_shadow
  assign card_shadow_color = section.settings.card_shadow_color

  assign card_heading_size = section.settings.card_heading_size
  assign card_heading_size_mobile = section.settings.card_heading_size_mobile
  assign card_heading_color = section.settings.card_heading_color
  assign card_heading_custom = section.settings.card_heading_custom
  assign card_heading_font = section.settings.card_heading_font
  assign card_heading_height = section.settings.card_heading_height
  assign card_heading_align = section.settings.card_heading_align
  assign card_heading_mt = section.settings.card_heading_mt

  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_text_more = section.settings.card_text_more
  assign card_text_less = section.settings.card_text_less
  assign card_count_words = section.settings.card_count_words

  assign card_author_date_text_size = section.settings.card_author_date_text_size
  assign card_author_date_text_size_mobile = section.settings.card_author_date_text_size_mobile
  assign card_author_date_text_color = section.settings.card_author_date_text_color
  assign card_author_date_text_custom = section.settings.card_author_date_text_custom
  assign card_author_date_text_font = section.settings.card_author_date_text_font
  assign card_author_date_text_height = section.settings.card_author_date_text_height
  assign card_author_date_text_align = section.settings.card_author_date_text_align
  assign card_author_date_text_mt = section.settings.card_author_date_text_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

  assign size = slider_view | modulo: 2
  assign size_tablet = slider_view | times: 0.5 | round: 0 | modulo: 2

  assign button = section.settings.button
  assign button_size = section.settings.button_size
  assign button_size_mobile = section.settings.button_size_mobile
  assign button_color = section.settings.button_color
  assign button_hover_color = section.settings.button_hover_color
  assign button_custom = section.settings.button_custom
  assign button_font = section.settings.button_font
  assign button_height = section.settings.button_height
  assign button_align = section.settings.button_align
  assign button_url = section.settings.button_url
  assign button_mt = section.settings.button_mt
  assign button_padding_vertical = section.settings.button_padding_vertical
  assign button_padding_horizontal = section.settings.button_padding_horizontal
  assign button_radius = section.settings.button_radius
  assign button_border_thickness = section.settings.button_border_thickness
  assign button_border_color = section.settings.button_border_color
  assign button_border_hover_color = section.settings.button_border_hover_color
  assign button_bg_color = section.settings.button_bg_color
  assign button_bg_hover_color = section.settings.button_bg_hover_color
-%}

{%- style -%}
  {{  heading_font | font_face: font_display: 'swap' }}
  {{  rating_text_font | font_face: font_display: 'swap' }}
  {{  text_font | font_face: font_display: 'swap' }}
  {{  card_heading_font | font_face: font_display: 'swap' }}
  {{  card_text_font | font_face: font_display: 'swap' }}
  {{  card_author_date_text_font | font_face: font_display: 'swap' }}
  {{  button_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 }}-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;
  }

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

  .testimonials-stars-{{ section.id }} {
    display: flex;
    align-items: end;
    gap: 5px;
  }

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

  .testimonials-stars-{{ section.id }} svg {
    background-color: {{ stars_bg_color }};
  }

  .testimonials-rating-{{ section.id }} {
    margin-top: {{ rating_text_mt | times: 0.75 | round: 0 }}px;
    display: flex;
    align-items: center;
    justify-content: {{ rating_align }};
    gap: 5px;
    flex-wrap: wrap;
  }

  .testimonials-rating-text-{{ section.id }},
  .testimonials-rating-{{ section.id }} span {
    margin: 0;
    font-size: {{ rating_text_size_mobile }}px;
    color: {{ rating_text_color }};
    line-height: {{ rating_text_height }}%;
  }

  .testimonials-rating-{{ section.id }} span {
    font-size: {{ rating_text_size_mobile | times: 1.25 | round: 0 }}px;
    font-weight: 700;
  }

  .testimonials-rating-{{ section.id }} .testimonials-stars-{{ section.id }} {
    padding-left: 5px;
  }

  .testimonials-text-{{ section.id }} {
    margin-top: {{ text_mt | times: 0.75 | round: 0 }}px;
    display: flex;
    align-items: center;
    justify-content: {{ text_align }};
    gap: 10px;
    flex-wrap: wrap;
  }

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

  .testimonials-text-{{ section.id }} strong {
    text-decoration: underline;
  }

  .testimonials-image-{{ section.id }} {
    width: 100px;
    height: 32px;
  }

  .testimonials-image-{{ section.id }} img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

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

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

  .testimonials-slide-{{ section.id }}.swiper-slide {
    opacity: 0.5;
    transition-duration: 250ms;
    transition-property: transform, opacity;
  }

  .testimonials-slide-{{ section.id }}.swiper-slide-active {
    opacity: 1;
    transition-duration: 250ms;
    transition-property: transform, opacity;
  }

  .testimonials-slide-{{ section.id }} {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: {{ card_author_date_text_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-top-{{ section.id }} .testimonials-stars-{{ section.id }} {
    justify-content: {{ stars_align }};
  }

  .testimonials-slide-heading-{{ section.id }} {
    margin: 0;
    margin-top: {{ card_heading_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ card_heading_size_mobile }}px;
    color: {{ card_heading_color }};
    line-height: {{ card_heading_height }}%;
    text-align: {{ card_heading_align }};
    font-weight: 700;
    text-transform: unset;
  }

  .testimonials-slide-text-{{ section.id }} {
    margin: 0;
    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-text-{{ section.id }} span:first-child {
    display: none;
  }

  .testimonials-slide-text-small-{{ section.id }}.active {
    display: none;
  }

  .testimonials-slide-text-big-{{ section.id }} {
    display: none;
  }

  .testimonials-slide-text-big-{{ section.id }}.active {
    display: inline;
  }

  .testimonials-slide-text-btn-{{ section.id }} {
    display: block;
    max-width: fit-content;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    border: 0px;
    font-size: {{ card_text_size_mobile }}px;
    line-height: {{ card_text_height }}%;
    font-weight: 700;
    margin-top: 10px;
  }

  .testimonials-slide-author-date-{{ section.id }} {
    margin: 0;
    font-size: {{ card_author_date_text_size_mobile }}px;
    color: {{ card_author_date_text_color }};
    line-height: {{ card_author_date_text_height }}%;
    text-align: {{ card_author_date_text_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;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
  }

  .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 }};
    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 }};
    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;
    border: 2px solid {{ dots_color }};
    background-color: transparent;
    opacity: 0.6;
  }

  .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: {{ dots_color }}
  }

  .testimonials-btn-{{ section.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
    margin: 0;
    margin-top: {{ button_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ button_size_mobile }}px;
    font-weight: 700;
    color: {{ button_color }};
    line-height: {{ button_height }}%;
    text-align: center;
    text-transform: unset;
    text-decoration: none;
    padding: {{ button_padding_vertical | times: 0.75 | round: 0 }}px {{ button_padding_horizontal | times: 0.75 | round: 0 }}px;
    border-radius: {{ button_radius }}px;
    border: {{ button_border_thickness }}px solid {{ button_border_color }};
    background-color: {{ button_bg_color }};
    transition: all 0.25s ease 0s;
  }

  .testimonials-btn-{{ section.id }}:hover {
    color: {{ button_hover_color }};
    border: {{ button_border_thickness }}px solid {{ button_border_hover_color }};
    background-color: {{ button_bg_hover_color }};
    transition: all 0.25s ease 0s;
  }

  @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-heading-{{ section.id }} {
      font-size: {{ heading_size }}px;
    }

    .testimonials-rating-text-{{ section.id }},
    .testimonials-rating-{{ section.id }} span {
      font-size: {{ rating_text_size }}px;
    }

    .testimonials-rating-{{ section.id }} span {
      font-size: {{ rating_text_size | times: 1.25 | round: 0 }}px;
    }

    .testimonials-stars-{{ section.id }} svg,
    .testimonials-stars-{{ section.id }} img {
      width: {{ stars_size }}px;
      height: {{ stars_size }}px;
    }

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

    .testimonials-text-{{ section.id }} * {
      font-size: {{ text_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_date_text_mt }}px;
      padding: {{ card_padding_vertical }}px {{ card_padding_horizontal }}px;
    }

    .testimonials-slide-heading-{{ section.id }} {
      margin-top: {{ card_heading_mt }}px;
      font-size: {{ card_heading_size }}px;
    }

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

    .testimonials-slide-text-btn-{{ section.id }} {
      font-size: {{ card_text_size }}px;
    }

    .testimonials-slide-text-{{ section.id }} span:first-child {
      display: inline;
    }

    .testimonials-slide-text-{{ section.id }} span:not(:first-child),
    .testimonials-slide-text-{{ section.id }} button {
      display: none;
    }

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

    .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-btn-{{ section.id }} {
      margin-top: {{ button_mt }}px;
      padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
      font-size: {{ button_size }}px;
    }
  }
{%- 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 rating_text_custom %}
  <style>
    .testimonials-rating-text-{{ section.id }},
    .testimonials-rating-{{ section.id }} span {
      font-family: {{ rating_text_font.family }}, {{ rating_text_font.fallback_families }};
      font-weight: {{ rating_text_font.weight }};
      font-style: {{ rating_text_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_heading_custom %}
  <style>
    .testimonials-slide-heading-{{ section.id }} {
      font-family: {{ card_heading_font.family }}, {{ card_heading_font.fallback_families }};
      font-weight: {{ card_heading_font.weight }};
      font-style: {{ card_heading_font.style }};
    }
  </style>
{% endif %}

{% if card_text_custom %}
  <style>
    .testimonials-slide-text-{{ section.id }},
    .testimonials-slide-text-btn-{{ 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 button_custom %}
  <style>
    .testimonials-btn-{{ section.id }} {
      font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
      font-weight: {{ button_font.weight }};
      font-style: {{ button_font.style }};
    }
  </style>
{% endif %}

{% if card_author_date_text_custom %}
  <style>
    .testimonials-slide-author-date-{{ section.id }} {
      font-family: {{ card_author_date_text_font.family }}, {{ card_author_date_text_font.fallback_families }};
      font-weight: {{ card_author_date_text_font.weight }};
      font-style: {{ card_author_date_text_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 %}

{% if card_shadow %}
  <style>
    .testimonials-slide-{{ section.id }} {
      box-shadow: 0px 0px 20px 0px {{ card_shadow_color | hex_to_rgba: 0.2 }};
    }
  </style>
{% endif %}

{% if card_text_align == 'center' %}
  <style>
    .testimonials-slide-text-btn-{{ section.id }} {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
{% elsif card_text_align == 'right' %}
  <style>
    .testimonials-slide-text-btn-{{ section.id }} {
      margin-left: auto;
    }
  </style>
{% endif %}

{% if size_tablet == 0 %}
  <style>
    @media(min-width: 768px) {
      .testimonials-slide-{{ section.id }}.swiper-slide-visible {
        opacity: 1;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }

      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-prev {
        opacity: 0.5;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }
    }
  </style>
{% else %}
  <style>
    @media(min-width: 768px) {
      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-prev,
      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-next {
        opacity: 1;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }
    }
  </style>
{% endif %}

{% if size == 0 %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-slide-{{ section.id }}.swiper-slide-visible {
        opacity: 1;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }

      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-prev {
        opacity: 0.5;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }
    }
  </style>
{% else %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-prev,
      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-next {
        opacity: 1;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }

      .testimonials-slide-{{ section.id }}.swiper-slide-visible.swiper-slide-prev {
        opacity: 1;
        transition-duration: 250ms;
        transition-property: transform, opacity;
      }
    }
  </style>
{% endif %}

{% if button_align == 'center' %}
  <style>
    .testimonials-btn-{{ section.id }} {
       margin-left: auto;
       margin-right: auto;
     }
  </style>
{% elsif button_align == 'right' %}
  <style>
    .testimonials-btn-{{ section.id }} {
       margin-left: auto;
     }
  </style>
{% endif %}

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

  .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 }} animate-section animate--hidden {{ section.settings.visibility }}"
  style="background-color:{{ background_color }}; background-image: {{ background_gradient }};"
>
    {% if section.settings.display_id %}
    <copy-button class='section-id-btn button' data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="section-{{ section.id }}-settings animate-item animate-item">
    {% if heading != blank %}
      <h2 class="testimonials-heading-{{ section.id }}">{{ heading }}</h2>
    {% endif %}
    {% unless rating_text_hide and rating_hide and stars_count == 0 %}
      <div class="testimonials-rating-{{ section.id }}">
        {% unless rating_text_hide %}
          <p class="testimonials-rating-text-{{ section.id }}">{{ rating_text }}</p>
        {% endunless %}
        {% unless rating_hide %}
          <span>{{ rating }}</span>
          <p class="testimonials-rating-text-{{ section.id }}"><strong>/ 5</strong></p>
        {% endunless %}
        {% if stars_count != 0 %}
          <div class="testimonials-stars-{{ section.id }}">
            {% if stars_icon != blank %}
              {% for item in (1..stars_count) %}
                <img
                  src="{{ stars_icon | image_url }}"
                  alt="{{ stars_icon.alt }}"
                  {% if lazy %}
                    loading="lazy"
                  {% endif %}
                >
              {% endfor %}
            {% else %}
              {% if stars_count > 0 %}
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {% if stars_count == 0.5 %}
                    <defs>
                      <linearGradient id="grad{{ section.id }}1">
                        <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="#DDDDDD" />
                        <stop offset="100%" stop-color="#DDDDDD" />
                      </linearGradient>
                    </defs>
                  {% endif %}
                  <rect width="32" height="32" fill="{% if stars_count == 0.5 %}url(#grad{{ section.id }}1){% else %}{{ stars_bg_color }}{% endif %}"/>
                  <g clip-path="url(#clip0_25_4)">
                  <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_25_4">
                  <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                  </clipPath>
                  </defs>
                </svg>
              {% endif %}
              {% if stars_count > 1 %}
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {% if stars_count == 1.5 %}
                    <defs>
                      <linearGradient id="grad{{ section.id }}2">
                        <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="#DDDDDD" />
                        <stop offset="100%" stop-color="#DDDDDD" />
                      </linearGradient>
                    </defs>
                  {% endif %}
                  <rect width="32" height="32" fill="{% if stars_count == 1.5 %}url(#grad{{ section.id }}2){% else %}{{ stars_bg_color }}{% endif %}"/>
                  <g clip-path="url(#clip0_25_4)">
                  <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_25_4">
                  <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                  </clipPath>
                  </defs>
                </svg>
              {% endif %}
              {% if stars_count > 2 %}
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {% if stars_count == 2.5 %}
                    <defs>
                      <linearGradient id="grad{{ section.id }}3">
                        <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="#DDDDDD" />
                        <stop offset="100%" stop-color="#DDDDDD" />
                      </linearGradient>
                    </defs>
                  {% endif %}
                  <rect width="32" height="32" fill="{% if stars_count == 2.5 %}url(#grad{{ section.id }}3){% else %}{{ stars_bg_color }}{% endif %}"/>
                  <g clip-path="url(#clip0_25_4)">
                  <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_25_4">
                  <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                  </clipPath>
                  </defs>
                </svg>
              {% endif %}
              {% if stars_count > 3 %}
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {% if stars_count == 3.5 %}
                    <defs>
                      <linearGradient id="grad{{ section.id }}4">
                        <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="#DDDDDD" />
                        <stop offset="100%" stop-color="#DDDDDD" />
                      </linearGradient>
                    </defs>
                  {% endif %}
                  <rect width="32" height="32" fill="{% if stars_count == 3.5 %}url(#grad{{ section.id }}4){% else %}{{ stars_bg_color }}{% endif %}"/>
                  <g clip-path="url(#clip0_25_4)">
                  <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_25_4">
                  <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                  </clipPath>
                  </defs>
                </svg>
              {% endif %}
              {% if stars_count > 4 %}
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  {% if stars_count == 4.5 %}
                    <defs>
                      <linearGradient id="grad{{ section.id }}5">
                        <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                        <stop offset="50%" stop-color="#DDDDDD" />
                        <stop offset="100%" stop-color="#DDDDDD" />
                      </linearGradient>
                    </defs>
                  {% endif %}
                  <rect width="32" height="32" fill="{% if stars_count == 4.5 %}url(#grad{{ section.id }}5){% else %}{{ stars_bg_color }}{% endif %}"/>
                  <g clip-path="url(#clip0_25_4)">
                  <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_25_4">
                  <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                  </clipPath>
                  </defs>
                </svg>
              {% endif %}
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endunless %}
    {% if text != blank %}
      <div class="testimonials-text-{{ section.id }} animate-item animate-item">
        {{ text }}
        {% if text_right_image != blank %}
          <div class="testimonials-image-{{ section.id }}">
            <img
              src="{{ text_right_image | image_url }}"
              alt="{{ text_right_image.alt }}"
              {% if lazy %}
                loading="lazy"
              {% endif %}
            >
          </div>
        {% endif %}
      </div>
    {% 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 %}
                  <div class="testimonials-stars-{{ section.id }}">
                    {% if stars_icon != blank %}
                      {% for item in (1..block.settings.stars_count) %}
                        <img
                          src="{{ stars_icon | image_url }}"
                          alt="{{ stars_icon.alt }}"
                          {% if lazy %}
                            loading="lazy"
                          {% endif %}
                        >
                      {% endfor %}
                    {% else %}
                      {% if block.settings.stars_count > 0 %}
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                          {% if block.settings.stars_count == 0.5 %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}1">
                                <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="#DDDDDD" />
                                <stop offset="100%" stop-color="#DDDDDD" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <rect width="32" height="32" fill="{% if block.settings.stars_count == 0.5 %}url(#grad{{ section.id }}1){% else %}{{ stars_bg_color }}{% endif %}"/>
                          <g clip-path="url(#clip0_25_4)">
                          <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                          </g>
                          <defs>
                          <clipPath id="clip0_25_4">
                          <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                          </clipPath>
                          </defs>
                        </svg>
                      {% endif %}
                      {% if block.settings.stars_count > 1 %}
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                          {% if block.settings.stars_count == 1.5 %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}2">
                                <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="#DDDDDD" />
                                <stop offset="100%" stop-color="#DDDDDD" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <rect width="32" height="32" fill="{% if block.settings.stars_count == 1.5 %}url(#grad{{ section.id }}2){% else %}{{ stars_bg_color }}{% endif %}"/>
                          <g clip-path="url(#clip0_25_4)">
                          <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                          </g>
                          <defs>
                          <clipPath id="clip0_25_4">
                          <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                          </clipPath>
                          </defs>
                        </svg>
                      {% endif %}
                      {% if block.settings.stars_count > 2 %}
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                          {% if block.settings.stars_count == 2.5 %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}3">
                                <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="#DDDDDD" />
                                <stop offset="100%" stop-color="#DDDDDD" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <rect width="32" height="32" fill="{% if block.settings.stars_count == 2.5 %}url(#grad{{ section.id }}3){% else %}{{ stars_bg_color }}{% endif %}"/>
                          <g clip-path="url(#clip0_25_4)">
                          <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                          </g>
                          <defs>
                          <clipPath id="clip0_25_4">
                          <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                          </clipPath>
                          </defs>
                        </svg>
                      {% endif %}
                      {% if block.settings.stars_count > 3 %}
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                          {% if block.settings.stars_count == 3.5 %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}4">
                                <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="#DDDDDD" />
                                <stop offset="100%" stop-color="#DDDDDD" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <rect width="32" height="32" fill="{% if block.settings.stars_count == 3.5 %}url(#grad{{ section.id }}4){% else %}{{ stars_bg_color }}{% endif %}"/>
                          <g clip-path="url(#clip0_25_4)">
                          <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                          </g>
                          <defs>
                          <clipPath id="clip0_25_4">
                          <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                          </clipPath>
                          </defs>
                        </svg>
                      {% endif %}
                      {% if block.settings.stars_count > 4 %}
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                          {% if block.settings.stars_count == 4.5 %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}5">
                                <stop offset="0%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="{{ stars_bg_color }}" />
                                <stop offset="50%" stop-color="#DDDDDD" />
                                <stop offset="100%" stop-color="#DDDDDD" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <rect width="32" height="32" fill="{% if block.settings.stars_count == 4.5 %}url(#grad{{ section.id }}5){% else %}{{ stars_bg_color }}{% endif %}"/>
                          <g clip-path="url(#clip0_25_4)">
                          <path d="M9.20283 27L16.001 21.807L22.7972 27L20.2018 18.596L27 13.403H18.5984L16.001 5L13.4037 13.403H5L11.7982 18.596L9.20283 27Z" fill="{{ stars_color }}"/>
                          </g>
                          <defs>
                          <clipPath id="clip0_25_4">
                          <rect width="22" height="22" fill="{{ stars_color }}" transform="translate(5 5)"/>
                          </clipPath>
                          </defs>
                        </svg>
                      {% endif %}
                    {% endif %}
                  </div>
                {% endif %}
                {% if block.settings.heading != blank %}
                  <p class="testimonials-slide-heading-{{ section.id }}">{{ block.settings.heading }}</p>
                {% endif %}
                {% if block.settings.text != blank %}
                  <p class="testimonials-slide-text-{{ section.id }}">
                    <span>{{ block.settings.text }}</span>
                    <span class="testimonials-slide-text-small-{{ section.id }} testimonials-slide-text-small">
                      {{- block.settings.text | truncatewords: card_count_words -}}
                    </span>
                    <span class="testimonials-slide-text-big-{{ section.id }} testimonials-slide-text-big">
                      {{- block.settings.text -}}
                    </span>
                    <button class="testimonials-slide-text-btn-{{ section.id }} testimonials-slide-text-btn">
                      {{ card_text_more }}
                    </button>
                  </p>
                {% endif %}
              </div>
              <div class="testimonials-slide-bottom-{{ section.id }}">
                {% if block.settings.author_date != blank %}
                  <p class="testimonials-slide-author-date-{{ section.id }}">{{ block.settings.author_date }}</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">
            <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">
            <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>
    {% if button != blank %}
      <a href="{{ button_url }}" class="testimonials-btn-{{ section.id }}">{{ button }}</a>
    {% endif %}
  </div>
</div>

<script>
  function initTestimonials8{{ section.id | replace: '-', '' }}() {
    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();
    let texts = document.querySelectorAll('.testimonials-slide-text-{{ section.id }}');
    texts.forEach(el => {
      let btn = el.querySelector('.testimonials-slide-text-btn');
      let small = el.querySelector('.testimonials-slide-text-small');
      let big = el.querySelector('.testimonials-slide-text-big');
      btn.addEventListener('click', () => {
        console.log(btn);
        if(btn.classList.contains("active")) {
          small.classList.remove('active');
          big.classList.remove('active');
          btn.classList.remove('active');
          btn.textContent = "{{ card_text_more }}";
        } else {
          small.classList.add('active');
          big.classList.add('active');
          btn.textContent = "{{ card_text_less }}";
          btn.classList.add('active');
        }
      })
    })
  }

  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initTestimonials8{{ section.id | replace: '-', '' }}, 500);
  });

  if (Shopify.designMode) {
     document.addEventListener('shopify:section:unload', initTestimonials8{{ section.id | replace: '-', '' }});
     document.addEventListener('shopify:section:load', initTestimonials8{{ section.id | replace: '-', '' }});
  }
</script>

{% schema %}
{
  "name": "Trustpilot reviews v2",
  "settings": [
    {
      "type": "header",
      "content": "ATT: Save editor before slider works"
    },
    {
    "type": "checkbox",
    "id": "display_id",
    "label": "Display section ID",
    "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
    "default": false
  },
   {
    "type": "select",
    "id": "visibility",
    "options": [
      {
        "value": "desktop-hidden",
        "label": "Mobile only"
      },
      {
        "value": "mobile-hidden",
        "label": "Desktop only"
      },
      {
        "value": "always-display",
        "label": "All devices"
      }
    ],
    "label": "Display on",
    "default": "always-display"
  },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our customers tell it better than we do!"
    },
    {
      "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": 40
    },
    {
      "type": "range",
      "id": "heading_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Heading Size - Mobile",
      "default": 24
    },
    {
      "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": "header",
      "content": "Rating Text"
    },
    {
      "type": "text",
      "id": "rating_text",
      "label": "Rating Text",
      "default": "Excellent"
    },
    {
      "type": "checkbox",
      "id": "rating_text_custom",
      "label": "Use Custom Font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "rating_text_font",
      "label": "Rating Text Font Family",
      "default": "josefin_sans_n4"
    },
    {
      "type": "range",
      "id": "rating_text_size",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Rating Text Size",
      "default": 24
    },
    {
      "type": "range",
      "id": "rating_text_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Rating Text Size - Mobile",
      "default": 20
    },
    {
      "type": "range",
      "id": "rating_text_height",
      "min": 50,
      "max": 200,
      "step": 10,
      "unit": "%",
      "label": "Rating Text Line Height",
      "default": 130
    },
    {
      "type": "range",
      "id": "rating_text_mt",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Rating Text Margin Top",
      "default": 16
    },
    {
      "type": "header",
      "content": "Rating Settings"
    },
    {
      "type": "range",
      "id": "rating",
      "min": 0,
      "max": 5,
      "step": 0.1,
      "label": "Rating",
      "default": 4.7
    },
    {
      "type": "checkbox",
      "id": "rating_hide",
      "label": "Rating Hide",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "rating_text_hide",
      "label": "Rating Text Hide",
      "default": false
    },
    {
      "type": "select",
      "id": "rating_align",
      "label": "Rating Align",
      "default": "center",
      "options": [
        {
          "label": "Left",
          "value": "start"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "end"
        }
      ]
    },
    {
      "type": "header",
      "content": "Stars Settings"
    },
    {
      "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": 0.5,
      "label": "Stars Count",
      "default": 5
    },
    {
      "type": "range",
      "id": "stars_size",
      "min": 10,
      "max": 100,
      "step": 2,
      "label": "Stars Size",
      "default": 28
    },
    {
      "type": "range",
      "id": "stars_size_mobile",
      "min": 10,
      "max": 100,
      "step": 2,
      "label": "Stars Size - Mobile",
      "default": 24
    },
    {
      "type": "select",
      "id": "stars_align",
      "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>based on <strong>1,067</strong> reviews</p>",
      "info": "Use 'Strong' for underline text"
    },
    {
      "type": "image_picker",
      "label": "Text Right Image",
      "id": "text_right_image"
    },
    {
      "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": 20
    },
    {
      "type": "range",
      "id": "text_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Text Size - Mobile",
      "default": 16
    },
    {
      "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": "start"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "end"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_mt",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Text Margin Top",
      "default": 16
    },
    {
      "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": 3,
      "step": 1,
      "label": "Slides Per View",
      "default": 3
    },
    {
      "type": "range",
      "id": "slider_view_mobile",
      "min": 1,
      "max": 3,
      "step": 0.2,
      "label": "Slides Per View - Mobile",
      "default": 1.2
    },
    {
      "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": 32
    },
    {
      "type": "range",
      "id": "card_padding_vertical_mobile",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Card Padding Vertical - Mobile",
      "default": 24
    },
    {
       "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": 24
    },
    {
       "type": "range",
       "id": "card_radius",
       "min": 0,
       "max": 100,
       "step": 2,
       "unit": "px",
       "label": "Card Border Radius",
       "default": 16
    },
    {
       "type": "range",
       "id": "card_border_thickness",
       "min": 0,
       "max": 10,
       "step": 1,
       "unit": "px",
       "label": "Card Border Thickness",
       "default": 0
    },
    {
      "type": "checkbox",
      "id": "card_shadow",
      "label": "Use Card Shadow",
      "default": true
    },
    {
      "type": "header",
      "content": "Card Heading"
    },
    {
      "type": "checkbox",
      "id": "card_heading_custom",
      "label": "Use Custom Font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "card_heading_font",
      "label": "Card Heading Font Family",
      "default": "josefin_sans_n4"
    },
    {
      "type": "range",
      "id": "card_heading_size",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Card Heading Size",
      "default": 24
    },
    {
      "type": "range",
      "id": "card_heading_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Card Heading Size - Mobile",
      "default": 20
    },
    {
      "type": "range",
      "id": "card_heading_height",
      "min": 50,
      "max": 200,
      "step": 10,
      "unit": "%",
      "label": "Card Heading Line Height",
      "default": 130
    },
    {
      "type": "select",
      "id": "card_heading_align",
      "label": "Card Heading Align",
      "default": "center",
      "options": [
        {
          "label": "Left",
          "value": "left"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "right"
        }
      ]
    },
    {
      "type": "range",
      "id": "card_heading_mt",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Card Heading Margin Top",
      "default": 16
    },
    {
      "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": 150
    },
    {
      "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": 16
    },
    {
      "type": "text",
      "id": "card_text_more",
      "label": "Card Text More",
      "default": "View More"
    },
    {
      "type": "text",
      "id": "card_text_less",
      "label": "Card Text Less",
      "default": "View Less"
    },
    {
      "type": "range",
      "id": "card_count_words",
      "min": 5,
      "max": 40,
      "step": 1,
      "label": "Count Words Before 'More Button'",
      "default": 20
    },
    {
      "type": "header",
      "content": "Card Author-Date Text"
    },
    {
      "type": "checkbox",
      "id": "card_author_date_text_custom",
      "label": "Use Custom Font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "card_author_date_text_font",
      "label": "Card Author-Date Text Font Family",
      "default": "josefin_sans_n4"
    },
    {
      "type": "range",
      "id": "card_author_date_text_size",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Card Author-Date Text Size",
      "default": 16
    },
    {
      "type": "range",
      "id": "card_author_date_text_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Card Author-Date Text Size - Mobile",
      "default": 16
    },
    {
      "type": "range",
      "id": "card_author_date_text_height",
      "min": 50,
      "max": 200,
      "step": 10,
      "unit": "%",
      "label": "Card Author-Date Text Line Height",
      "default": 130
    },
    {
      "type": "select",
      "id": "card_author_date_text_align",
      "label": "Card Author-Date Text Align",
      "default": "center",
      "options": [
        {
          "label": "Left",
          "value": "left"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "right"
        }
      ]
    },
    {
      "type": "range",
      "id": "card_author_date_text_mt",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Card Author-Date Text Margin Top",
      "default": 16
    },
    {
      "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": "Button"
    },
    {
      "type": "text",
      "id": "button",
      "label": "Button",
      "default": "View All"
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button URL"
    },
    {
      "type": "checkbox",
      "id": "button_custom",
      "label": "Use Custom Font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "button_font",
      "label": "Button Font Family",
      "default": "josefin_sans_n4"
    },
    {
      "type": "range",
      "id": "button_size",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Button Size",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_size_mobile",
      "min": 0,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Button Size - Mobile",
      "default": 14
    },
    {
      "type": "range",
      "id": "button_height",
      "min": 50,
      "max": 200,
      "step": 10,
      "unit": "%",
      "label": "Button Line Height",
      "default": 100
    },
    {
      "type": "select",
      "id": "button_align",
      "label": "Button Text Align",
      "default": "center",
      "options": [
        {
          "label": "Left",
          "value": "left"
        },
        {
          "label": "Center",
          "value": "center"
        },
        {
          "label": "Right",
          "value": "right"
        }
      ]
    },
    {
      "type": "range",
      "id": "button_mt",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Button Margin Top",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_padding_vertical",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Button Padding Vertical",
      "default": 20
    },
    {
       "type": "range",
       "id": "button_padding_horizontal",
       "min": 0,
       "max": 100,
       "step": 4,
       "unit": "px",
       "label": "Button Padding Horizontal",
       "default": 16
    },
    {
       "type": "range",
       "id": "button_radius",
       "min": 0,
       "max": 100,
       "step": 2,
       "unit": "px",
       "label": "Button Border Radius",
       "default": 8
    },
    {
       "type": "range",
       "id": "button_border_thickness",
       "min": 0,
       "max": 10,
       "step": 1,
       "unit": "px",
       "label": "Button Border Thickness",
       "default": 0
    },
    {
      "type": "header",
      "content": "Button Colors"
    },
    {
      "type": "color",
      "label": "Button Color",
      "id": "button_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Button Hover Color",
      "id": "button_hover_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Button Background Color",
      "id": "button_bg_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Button Background Hover Color",
      "id": "button_bg_hover_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Button Border Color",
      "id": "button_border_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Button Border Hover Color",
      "id": "button_border_hover_color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Card Colors"
    },
    {
      "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 Shadow Color",
      "id": "card_shadow_color",
      "default": "#00B67A"
    },
    {
      "type": "color",
      "label": "Card Heading Color",
      "id": "card_heading_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Card Text Color",
      "id": "card_text_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Card Author-Date Text Color",
      "id": "card_author_date_text_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": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Arrow Background Hover color",
      "id": "arrow_bg_hover_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Arrow Border color",
      "id": "arrow_border_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Arrow Border Hover color",
      "id": "arrow_border_hover_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Dots Color",
      "id": "dots_color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Section Colors"
    },
    {
      "type": "color",
      "label": "Heading Color",
      "id": "heading_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Rating Text Color",
      "id": "rating_text_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Default Stars Background Color",
      "id": "stars_bg_color",
      "default": "#00B67A"
    },
    {
      "type": "color",
      "label": "Default Stars Color",
      "id": "stars_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "label": "Text Color",
      "id": "text_color",
      "default": "#000000"
    },
    {
      "type": "color",
      "label": "Section background",
      "id": "background_color",
      "default": "#FFFFFF"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "Section background gradient",
      "default": "linear-gradient(180deg, rgba(206, 239, 199, 1), rgba(255, 255, 255, 1) 100%)"
    },
    {
      "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": 60
    },
    {
       "type": "range",
       "id": "padding_bottom",
       "min": 0,
       "max": 100,
       "step": 4,
       "unit": "px",
       "label": "Padding bottom",
       "default": 60
    },
    {
      "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
    },
    {
      "type": "checkbox",
      "id": "lazy",
      "label": "Lazy load",
      "info": "Lazy load images for speed optimisation",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "range",
          "id": "stars_count",
          "min": 0,
          "max": 5,
          "step": 0.5,
          "label": "Stars Count",
          "default": 5
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "author_date",
          "label": "Author and Date"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Trustpilot reviews v2",
      "category": "Testimonials",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        },
        {
          "type": "slide",
          "settings": {
            "heading": "I love it! 😍",
            "text": "I was initially hesitant to switch from my usual brand to this new one, but I'm so glad I did! This product has exceeded my expectations. It's not only affordable but also incredibly efficient. The quality is top-notch, and it's user-friendly.",
            "author_date": "Cathrine"
          }
        }
      ]
    }
  ],
    "disabled_on": {
  "groups": ["header", "footer"]
}
}
{% endschema %}
