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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/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 content_width = section.settings.content_width
  assign full_width = section.settings.full_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 heading_align_mobile = section.settings.heading_align_mobile

  assign layout = section.settings.layout
  assign layout_mobile = section.settings.layout_mobile
  assign layout_mt = section.settings.layout_mt
  assign layout_gap = section.settings.layout_gap
  assign layout_gap_mobile = section.settings.layout_gap_mobile

  assign hide_images = section.settings.hide_images
  assign image_row = section.settings.image_row
  assign image_row_mobile = section.settings.image_row_mobile
  assign image_gap_mobile = section.settings.image_gap_mobile
  assign image_gap = section.settings.image_gap
  assign image_border_thickness = section.settings.image_border_thickness
  assign image_radius = section.settings.image_radius
  assign image_border_color = section.settings.image_border_color
  assign image_ratio = section.settings.image_ratio

  assign testimonials_row = section.settings.testimonials_row
  assign testimonials_row_mobile = section.settings.testimonials_row_mobile
  assign testimonials_gap_mobile = section.settings.testimonials_gap_mobile
  assign testimonials_gap = section.settings.testimonials_gap
  assign testimonials_style_mobile = section.settings.testimonials_style_mobile

  assign testimonial_padding_vertical = section.settings.testimonial_padding_vertical
  assign testimonial_padding_horizontal = section.settings.testimonial_padding_horizontal
  assign testimonial_radius = section.settings.testimonial_radius
  assign testimonial_border_thickness = section.settings.testimonial_border_thickness
  assign testimonial_border_color = section.settings.testimonial_border_color
  assign testimonial_bg_color = section.settings.testimonial_bg_color

  assign stars_color = section.settings.stars_color
  assign stars_size = section.settings.stars_size

  assign testimonial_text_size = section.settings.testimonial_text_size
  assign testimonial_text_size_mobile = section.settings.testimonial_text_size_mobile
  assign testimonial_text_color = section.settings.testimonial_text_color
  assign testimonial_text_custom = section.settings.testimonial_text_custom
  assign testimonial_text_font = section.settings.testimonial_text_font
  assign testimonial_text_height = section.settings.testimonial_text_height
  assign testimonial_text_mt = section.settings.testimonial_text_mt

  assign testimonial_author_size = section.settings.testimonial_author_size
  assign testimonial_author_size_mobile = section.settings.testimonial_author_size_mobile
  assign testimonial_author_color = section.settings.testimonial_author_color
  assign testimonial_author_custom = section.settings.testimonial_author_custom
  assign testimonial_author_font = section.settings.testimonial_author_font
  assign testimonial_author_height = section.settings.testimonial_author_height
  assign testimonial_author_mt = section.settings.testimonial_author_mt

  assign testimonial_verified_size = section.settings.testimonial_verified_size
  assign testimonial_verified_size_mobile = section.settings.testimonial_verified_size_mobile
  assign testimonial_verified_color = section.settings.testimonial_verified_color
  assign testimonial_verified_custom = section.settings.testimonial_verified_custom
  assign testimonial_verified_font = section.settings.testimonial_verified_font
  assign testimonial_verified_height = section.settings.testimonial_text_height

  assign button = section.settings.button
  assign button_icon = section.settings.button_icon
  assign button_use_icon = section.settings.button_use_icon
  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_align_mobile = section.settings.button_align_mobile
  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

  assign testimonial_pagination_color = section.settings.testimonial_pagination_color
  
-%}

{%- style -%}

  {{  heading_font | font_face: font_display: 'swap' }}
  {{  testimonial_text_font | font_face: font_display: 'swap' }}
  {{  testimonial_author_font | font_face: font_display: 'swap' }}
  {{  testimonial_verified_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;
  }
  
  .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-transform: unset;
    text-align: {{ heading_align_mobile }};
  }

  .testimonials-grid-{{ section.id }} {
    margin-top: {{ layout_mt | times: 0.75 | round: 0 }}px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    gap: {{ layout_gap_mobile }}px;
  }

  .testimonials-left-{{ section.id }} {
    display: grid;
    grid-template-columns: repeat({{ image_row_mobile }}, 1fr);
    gap: {{ image_gap_mobile }}px;
  }

  .testimonials-image-{{ section.id }} {
    border-radius: {{ image_radius }}px;
    border: {{ image_border_thickness }}px solid {{ image_border_color }};
  }

  .testimonials-image-{{ section.id }} img,
  .testimonials-image-{{ section.id }} svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: {{ image_radius }}px;
  }

  .testimonials-image-{{ section.id }} svg {
    background-color: #DDDDDD;
  }

  .testimonials-right-{{ section.id }} {
    min-width: 0;
  }

  .testimonials-right-inner-{{ section.id }} {
    display: grid;
    grid-template-columns: repeat({{ testimonials_row_mobile }}, 1fr);
    gap: {{ testimonials_gap_mobile }}px;
  }

  .testimonials-item-{{ section.id }} {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: {{ testimonial_padding_vertical | times: 0.75 | round: 0 }}px {{ testimonial_padding_horizontal | times: 0.75 | round: 0 }}px;
    border-radius: {{ testimonial_radius }}px;
    border: {{ testimonial_border_thickness }}px solid {{ testimonial_border_color }};
    background-color: {{ testimonial_bg_color }};
    box-sizing: border-box;
  }

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

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

  .testimonials-text-{{ section.id }} {
    margin: 0px;
    margin-top: {{ testimonial_text_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ testimonial_text_size_mobile }}px;
    color: {{ testimonial_text_color }};
    line-height: {{ testimonial_text_height }}%;
    text-transform: unset;
  }

  .testimonials-bottom-{{ section.id }} {
    margin-top: {{ testimonial_author_mt | times: 0.75 | round: 0 }}px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  .testimonials-author-{{ section.id }} {
    margin: 0px;
    font-size: {{ testimonial_author_size_mobile }}px;
    color: {{ testimonial_author_color }};
    line-height: {{ testimonial_author_height }}%;
    text-transform: unset;
    font-weight: 700;
  }

  .testimonials-verified-{{ section.id }} {
    margin: 0px;
    font-size: {{ testimonial_verified_size_mobile }}px;
    color: {{ testimonial_verified_color }};
    line-height: {{ testimonial_verified_height }}%;
    text-transform: unset;
    font-weight: 700;
  }

  .testimonials-btn-{{ section.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 384px;
    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;
  }

  .testimonials-btn-{{ section.id }} svg,
  .testimonials-btn-{{ section.id }} img {
    display: block;
    object-fit: contain;
    width: 24px;
    height: 24px;
  }

  .testimonials-btn-{{ section.id }} svg path {
    stroke: {{ button_color }};
  }

  .testimonials-btn-{{ section.id }}:hover svg path {
    stroke: {{ button_hover_color }};
  }

  .testimonials-slider-{{ section.id }} {
    padding-bottom: 40px;
    display: none !important;
  }

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

  .testimonials-slider-{{ section.id }} .swiper-slide {
    height: auto !important;
  }

  .testimonials-pagination-{{ section.id }} {
    position: static !important;
    margin-top: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  

  .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid {{ testimonial_pagination_color }};
    background-color: white;
    opacity: 1;
  }

  .testimonials-pagination-{{ section.id }} .swiper-pagination-bullet-active {
    background-color: {{ testimonial_pagination_color }};
  }
  
  @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;
      text-align: {{ heading_align }};
    }

    .testimonials-grid-{{ section.id }} {
      margin-top: {{ layout_mt }}px;
      grid-template-columns: repeat(2, 1fr);
      gap: {{ layout_gap }}px;
    }

    .testimonials-left-{{ section.id }} {
      grid-template-columns: repeat({{ image_row }}, 1fr);
      gap: {{ image_gap }}px;
    }

    .testimonials-right-inner-{{ section.id }} {
      grid-template-columns: repeat({{ testimonials_row }}, 1fr);
      gap: {{ testimonials_gap }}px;
    }

    .testimonials-item-{{ section.id }} {
      padding: {{ testimonial_padding_vertical }}px {{ testimonial_padding_horizontal }}px;
    }

    .testimonials-text-{{ section.id }} {
      margin-top: {{ testimonial_text_mt }}px;
      font-size: {{ testimonial_text_size }}px;
    }

    .testimonials-bottom-{{ section.id }} {
      margin-top: {{ testimonial_author_mt }}px;
    }

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

    .testimonials-verified-{{ section.id }} {
      font-size: {{ testimonial_verified_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;
    }
  }

  {% if section.settings.enable_gradient %}
      .testimonials-heading-{{ section.id }} strong {
        background: {{ section.settings.title_gradient_background }};
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-style: normal;
      }
    {% endif %}
  
{%- 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 testimonial_text_custom %}
  <style>
    .testimonials-text-{{ section.id }} {
      font-family: {{ testimonial_text_font.family }}, {{ testimonial_text_font.fallback_families }};
      font-weight: {{ testimonial_text_font.weight }};
      font-style: {{ testimonial_text_font.style }};
    }
  </style>
{% endif %}

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

{% if testimonial_verified_custom %}
  <style>
    .testimonials-verified-{{ section.id }} {
      font-family: {{ testimonial_verified_font.family }}, {{ testimonial_verified_font.fallback_families }};
      font-weight: {{ testimonial_verified_font.weight }};
      font-style: {{ testimonial_verified_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 button_align_mobile == "center" %}
  <style>
   .testimonials-btn-{{ section.id }} {
      margin-left: auto;
      margin-right: auto;
    } 
  </style>
{% elsif button_align_mobile == "right" %}
  <style>
   .testimonials-btn-{{ section.id }} {
      margin-left: auto;
    } 
  </style>
{% endif %}

{% if button_align == "center" %}
  <style>
    @media(min-width: 1024px) {
     .testimonials-btn-{{ section.id }} {
        margin-left: auto;
        margin-right: auto;
      } 
    }
  </style>
{% elsif button_align == "right" %}
  <style>
    @media(min-width: 1024px) {
     .testimonials-btn-{{ section.id }} {
        margin-left: auto;
      } 
    }
  </style>
{% else %}
  <style>
    @media(min-width: 1024px) {
     .testimonials-btn-{{ section.id }} {
        margin-left: 0px;
        margin-right: 0px;
      } 
    }
  </style>
{% endif %}

{% if image_ratio == "portrait" %}
  <style>
    .testimonials-image-{{ section.id }} {
     aspect-ratio: 9.6/12; 
    }
  </style>
{% elsif image_ratio == "landscape" %}
  <style>
    .testimonials-image-{{ section.id }} {
     aspect-ratio: 12/8; 
    }
  </style>
{% else %}
  <style>
    .testimonials-image-{{ section.id }} {
     aspect-ratio: 12/12; 
    }
  </style>
{% endif %}

{% if layout_mobile == "image_testimonial" %}
  <style>
    .testimonials-left-{{ section.id }} {
      order: 1;
    }
    
    .testimonials-right-{{ section.id }} {
      order: 2;
    }
  </style>
{% else %}
  <style>
    .testimonials-left-{{ section.id }} {
      order: 2;
    }
    
    .testimonials-right-{{ section.id }} {
      order: 1;
    }
  </style>
{% endif %}

{% if layout == "image_testimonial" %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-left-{{ section.id }} {
        order: 1;
      }
      
      .testimonials-right-{{ section.id }} {
        order: 2;
      }
    }
  </style>
{% else %}
  <style>
    @media(min-width: 1024px) {
      .testimonials-left-{{ section.id }} {
        order: 2;
      }
      
      .testimonials-right-{{ section.id }} {
        order: 1;
      }
    }
  </style>
{% endif %}

{% if testimonials_style_mobile == "slider" %}
  <style>
    .testimonials-slider-{{ section.id }} {
      display: block !important;
    }
    .testimonials-right-inner-{{ section.id }} {
      display: none !important;
    }
    @media(min-width: 1024px) {
      .testimonials-slider-{{ section.id }} {
        display: none !important;
      }
      .testimonials-right-inner-{{ section.id }} {
        display: grid !important;
      }
    }
  </style>
{% endif %}

{% unless hide_images %}
  <style>
    .testimonials-left-{{ section.id }} {
      display: none;
    }
    .testimonials-grid-{{ section.id }} {
      grid-template-columns: 1fr;
    }
  </style>
{% endunless %}

<style>
  .testimonials-heading-{{ section.id }} em {
                  {% if section.settings.italic_style == 'italic' %}
                  /* Normal italic styling */
                  text-decoration: none !important;
                  font-style: italic !important;
                  {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
                    /* Font family styling - no underline */
                    text-decoration: none !important;
                    font-style: italic !important;
                    {% if section.settings.italic_font_family == 'serif' %}
                      font-family: serif !important;
                    {% elsif section.settings.italic_font_family == 'georgia-pro' %}
                      font-family: 'Georgia Pro', Georgia, serif !important;
                    {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
                        font-family: 'Bodoni Moda', Georgia, serif !important;
                      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
                        font-family: 'Instrument Serif', Georgia, serif !important;
                         {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
                      font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
                      {% elsif section.settings.italic_font_family == 'cursive' %}
                        font-family: cursive !important;
                      {% endif %}
                      {% if section.settings.italic_font_weight != 'inherit' %}
                        font-weight: {{ section.settings.italic_font_weight }} !important;
                      {% endif %}
                    {% else %}
                    /* Underline styling */
                    text-decoration: underline !important;
                    font-style: normal !important;
                    text-decoration-color: {{section.settings.underlinetextcolor}} !important;
                    text-decoration-thickness: {{section.settings.underlinethickness}}px !important;
                  {% endif %}
                } 
</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 }};">
    <div class="section-{{ section.id }}-settings page-width isolate animate-section animate-item animate-item">
      
      {% if heading != blank %}
        <div class="testimonials-heading-{{ section.id }} title-with-highlight" style='--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }}; '>{{ heading }}</div>
      {% endif %}
      
      <div class="testimonials-grid-{{ section.id }}">
        <div class="testimonials-left-{{ section.id }}">
          {% for block in section.blocks %}
            {% if block.type == "image" %}
              <div class="testimonials-image-{{ section.id }}"  {{ block.shopify_attributes }}>
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
        <div class="testimonials-right-{{ section.id }}">
          <div class="testimonials-slider-{{ section.id }} swiper">
            <div class="swiper-wrapper">
              {% for block in section.blocks %}
                {% if block.type == "testimonial" %}
                  <div class="testimonials-item-{{ section.id }} swiper-slide"  {{ block.shopify_attributes }}>
                    <div class="testimonials-top-{{ section.id }}">
                      <div class="testimonials-stars-{{ section.id }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                          {% if block.settings.rating > 0.2 and block.settings.rating < 0.8  %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}1">
                                <stop offset="0%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="100%" stop-color="white" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <path {% if block.settings.rating < 0.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 0.2 and block.settings.rating < 0.8 %}url(#grad{{ section.id }}1){% elsif block.settings.rating > 0.7 %}{{ stars_color }}{% endif %}"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                          {% if block.settings.rating > 1.2 and block.settings.rating < 1.8  %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}2">
                                <stop offset="0%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="100%" stop-color="white" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <path {% if block.settings.rating < 1.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 1.2 and block.settings.rating < 1.8 %}url(#grad{{ section.id }}2){% elsif block.settings.rating > 1.7 %}{{ stars_color }}{% endif %}"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                          {% if block.settings.rating > 2.2 and block.settings.rating < 2.8  %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}3">
                                <stop offset="0%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="100%" stop-color="white" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <path {% if block.settings.rating < 2.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 2.2 and block.settings.rating < 2.8 %}url(#grad{{ section.id }}3){% elsif block.settings.rating > 2.7 %}{{ stars_color }}{% endif %}"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                          {% if block.settings.rating > 3.2 and block.settings.rating < 3.8  %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}4">
                                <stop offset="0%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="100%" stop-color="white" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <path {% if block.settings.rating < 3.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 3.2 and block.settings.rating < 3.8 %}url(#grad{{ section.id }}4){% elsif block.settings.rating > 3.7 %}{{ stars_color }}{% endif %}"></path>
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                          {% if block.settings.rating > 4.2 and block.settings.rating < 4.8  %}
                            <defs>
                              <linearGradient id="grad{{ section.id }}5">
                                <stop offset="0%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="{{ stars_color }}" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="100%" stop-color="white" />
                              </linearGradient>
                            </defs>
                          {% endif %}
                          <path {% if block.settings.rating < 4.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 4.2 and block.settings.rating < 4.8 %}url(#grad{{ section.id }}5){% elsif block.settings.rating > 4.7 %}{{ stars_color }}{% endif %}"></path>
                        </svg>
                      </div>
                      {% if block.settings.text != blank %}
                        <p class="testimonials-text-{{ section.id }}">{{ block.settings.text }}</p>
                      {% endif %}
                    </div>
                    <div class="testimonials-bottom-{{ section.id }}">
                      {% if block.settings.author != blank %}
                        <p class="testimonials-author-{{ section.id }}">{{ block.settings.author }}</p>
                      {% endif %}
                      {% if block.settings.verified != blank %}
                        <p class="testimonials-verified-{{ section.id }}">{{ block.settings.verified }}</p>
                      {% endif %}
                    </div>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
            <div class="testimonials-pagination-{{ section.id }} swiper-pagination"></div>
          </div>
          <div class="testimonials-right-inner-{{ section.id }}">
            {% for block in section.blocks %}
              {% if block.type == "testimonial" %}
                <div class="testimonials-item-{{ section.id }}"  {{ block.shopify_attributes }}>
                  <div class="testimonials-top-{{ section.id }}">
                    <div class="testimonials-stars-{{ section.id }}">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                        {% if block.settings.rating > 0.2 and block.settings.rating < 0.8  %}
                          <defs>
                            <linearGradient id="grad{{ section.id }}1">
                              <stop offset="0%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="white" />
                              <stop offset="100%" stop-color="white" />
                            </linearGradient>
                          </defs>
                        {% endif %}
                        <path {% if block.settings.rating < 0.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 0.2 and block.settings.rating < 0.8 %}url(#grad{{ section.id }}1){% elsif block.settings.rating > 0.7 %}{{ stars_color }}{% endif %}"></path>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                        {% if block.settings.rating > 1.2 and block.settings.rating < 1.8  %}
                          <defs>
                            <linearGradient id="grad{{ section.id }}2">
                              <stop offset="0%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="white" />
                              <stop offset="100%" stop-color="white" />
                            </linearGradient>
                          </defs>
                        {% endif %}
                        <path {% if block.settings.rating < 1.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 1.2 and block.settings.rating < 1.8 %}url(#grad{{ section.id }}2){% elsif block.settings.rating > 1.7 %}{{ stars_color }}{% endif %}"></path>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                        {% if block.settings.rating > 2.2 and block.settings.rating < 2.8  %}
                          <defs>
                            <linearGradient id="grad{{ section.id }}3">
                              <stop offset="0%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="white" />
                              <stop offset="100%" stop-color="white" />
                            </linearGradient>
                          </defs>
                        {% endif %}
                        <path {% if block.settings.rating < 2.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 2.2 and block.settings.rating < 2.8 %}url(#grad{{ section.id }}3){% elsif block.settings.rating > 2.7 %}{{ stars_color }}{% endif %}"></path>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                        {% if block.settings.rating > 3.2 and block.settings.rating < 3.8  %}
                          <defs>
                            <linearGradient id="grad{{ section.id }}4">
                              <stop offset="0%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="white" />
                              <stop offset="100%" stop-color="white" />
                            </linearGradient>
                          </defs>
                        {% endif %}
                        <path {% if block.settings.rating < 3.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 3.2 and block.settings.rating < 3.8 %}url(#grad{{ section.id }}4){% elsif block.settings.rating > 3.7 %}{{ stars_color }}{% endif %}"></path>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none">
                        {% if block.settings.rating > 4.2 and block.settings.rating < 4.8  %}
                          <defs>
                            <linearGradient id="grad{{ section.id }}5">
                              <stop offset="0%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="{{ stars_color }}" />
                              <stop offset="50%" stop-color="white" />
                              <stop offset="100%" stop-color="white" />
                            </linearGradient>
                          </defs>
                        {% endif %}
                        <path {% if block.settings.rating < 4.8 %}stroke="{{ stars_color }}"{% endif %} 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="{% if block.settings.rating > 4.2 and block.settings.rating < 4.8 %}url(#grad{{ section.id }}5){% elsif block.settings.rating > 4.7 %}{{ stars_color }}{% endif %}"></path>
                      </svg>
                    </div>
                    {% if block.settings.text != blank %}
                      <p class="testimonials-text-{{ section.id }}">{{ block.settings.text }}</p>
                    {% endif %}
                  </div>
                  <div class="testimonials-bottom-{{ section.id }}">
                    {% if block.settings.author != blank %}
                      <p class="testimonials-author-{{ section.id }}">{{ block.settings.author }}</p>
                    {% endif %}
                    {% if block.settings.verified != blank %}
                      <p class="testimonials-verified-{{ section.id }}">{{ block.settings.verified }}</p>
                    {% endif %}
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
          {% if button != blank %}
            <a href="{{ button_url }}" class="testimonials-btn-{{ section.id }}">
              {{ button }}
              {% if button_use_icon %}
                {% if button_icon != blank %}
                  <img src="{{ button_icon | image_url }}" alt="{{ button_icon.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.75 12H20.25" stroke="#120A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M13.5 5.25L20.25 12L13.5 18.75" stroke="#120A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                {% endif %}
              {% endif %}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
</div>

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

<script>
  function initTestimonials7() {
    const slider = new Swiper('.testimonials-slider-{{ section.id }}', {
      speed: 300,
      slidesPerView: {{ testimonials_row_mobile }}.3,
      spaceBetween: {{ testimonials_gap_mobile }},
      pagination: {
        el: ".testimonials-pagination-{{ section.id }}",
        type: "bullets",
        clickable: true
      }
    })
  }

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

{% schema %}
  {
    "name": "Images with reviews",
    "settings": [
           {
      "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": "checkbox",
        "id": "hide_images",
        "label": "Show Images",
        "default": true
      },
      {
        "type": "header",
        "content": "Heading"
      },
      {
        "type": "richtext",
        "id": "heading",
        "label": "Heading",
        "default": "<h2> Customers are thrilled with their 'glow-up bedtime' routine.</h2>"
      },
      {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
      },
      {
  "type": "checkbox",
  "id": "enable_gradient",
  "label": "Enable gradient for bold text",
  "default": false,
  "info": "Override solid color with gradient for bold text"
},
{
  "type": "color_background",
  "id": "title_gradient_background",
  "label": "Gradient highlight",
  "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
  "info": "Used when gradient is enabled"
},
    {
          "type": "header",
          "content": "Italic Text Styling",
          "info": "Choose how italic text (created with *text*) should be displayed"
        },
        {
          "type": "select",
          "id": "italic_style",
          "label": "Italic Text Style",
          "options": [
              {
              "value": "italic",
              "label": "Normal Italic"
            },
            {
              "value": "underline",
              "label": "Underline"
            },
            {
              "value": "font_family",
              "label": "Custom Font Family"
            }
          ],
          "default": "underline",
          "info": "Choose to either underline italic text or use a custom font family"
        },
        {
          "type": "color",
          "id": "underlinetextcolor",
          "label": "Underline color",
          "default": "#FF0000",
          "info": "Used when 'Underline' style is selected"
        },
        {
          "type": "range",
          "id": "underlinethickness",
          "min": 1,
          "max": 8,
          "step": 1,
          "unit": "px",
          "label": "Underline thickness",
          "default": 3,
          "info": "Used when 'Underline' style is selected"
        },
        {
          "type": "select",
          "id": "italic_font_family",
          "label": "Italic Text Font Family",
          "options": [
            {
              "value": "inherit",
              "label": "Default (Inherit)"
            },
            {
              "value": "serif",
              "label": "Serif"
            },
            {
              "value": "instrument-serif",
              "label": "Instrument Serif"
            },
            {
              "value": "georgia-pro",
              "label": "Georgia Pro"
            },
            {
              "value": "bodoni-moda",
              "label": "Bodoni Moda"
            },
            {
              "value": "cursive",
              "label": "Cursive"
            },
            {
            "value": "custom_google_font",
            "label": "Custom Google Font"
          }
          ],
          "default": "serif",
          "info": "Used when 'Custom Font Family' style is selected"
        },
        {
          "type": "text",
          "id": "custom_google_font_name",
          "label": "Custom Google Font Name",
          "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
        },
        {
          "type": "select",
          "id": "italic_font_weight",
          "label": "Italic Text Font Weight",
          "options": [
            {
              "value": "inherit",
              "label": "Default (Inherit)"
            },
            {
              "value": "300",
              "label": "Light (300)"
            },
            {
              "value": "400",
              "label": "Normal (400)"
            },
            {
              "value": "500",
              "label": "Medium (500)"
            },
            {
              "value": "600",
              "label": "Semi Bold (600)"
            },
            {
              "value": "700",
              "label": "Bold (700)"
            },
            {
              "value": "800",
              "label": "Extra Bold (800)"
            },
            {
              "value": "900",
              "label": "Black (900)"
            }
          ],
          "default": "inherit",
          "info": "Used when 'Custom Font Family' style is selected"
        },
      {
        "type": "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": 36
      },
      {
        "type": "range",
        "id": "heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size - Mobile",
        "default": 30
      },
      {
        "type": "range",
        "id": "heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Heading Line Height",
        "default": 150
      },
      {
        "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": "select",
        "id": "heading_align_mobile",
        "label": "Heading Text Align - Mobile",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "header",
        "content": "Layout Settings"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "image_testimonial",
        "options": [
          {
            "label": "Image - Testimonial",
            "value": "image_testimonial"
          },
          {
            "label": "Testimonial - Image",
            "value": "testimonial_image"
          }
        ]
      },
      {
        "type": "select",
        "id": "layout_mobile",
        "label": "Layout Mobile",
        "default": "image_testimonial",
        "options": [
           {
            "label": "Image - Testimonial",
            "value": "image_testimonial"
          },
          {
            "label": "Testimonial - Image",
            "value": "testimonial_image"
          }
        ]
      },
      {
        "type": "range",
        "id": "layout_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Layout Gap",
        "default": 24
      },
      {
        "type": "range",
        "id": "layout_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Layout Gap - Mobile",
        "default": 24
      },
      {
        "type": "range",
        "id": "layout_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Layout Margin Top",
        "default": 36
      },
      {
        "type": "header",
        "content": "Image Settings"
      },
      {
        "type": "select",
        "id": "image_row",
        "label": "Images in Row",
        "default": "2",
        "options": [
          {
            "label": "1",
            "value": "1"
          },
          {
            "label": "2",
            "value": "2"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_row_mobile",
        "label": "Images in Row - Mobile",
        "default": "2",
        "options": [
          {
            "label": "1",
            "value": "1"
          },
          {
            "label": "2",
            "value": "2"
          },
          {
            "label": "3",
            "value": "3"
          }
        ]
      },
      {
        "type": "range",
        "id": "image_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Images Gap",
        "default": 12
      },
      {
        "type": "range",
        "id": "image_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Images Gap - Mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "image_radius",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Image Radius",
        "default": 8
      },
      {
        "type": "range",
        "id": "image_border_thickness",
        "min": 0,
        "max": 10,
        "step": 1,
        "unit": "px",
        "label": "Image Border Thickness",
        "default": 0
      },
      {
        "type": "select",
        "id": "image_ratio",
        "label": "Image Aspect Ratio",
        "default": "square",
        "options": [
          {
            "label": "Portrait",
            "value": "portrait"
          },
          {
            "label": "Square",
            "value": "square"
          },
          {
            "label": "Landscape",
            "value": "landscape"
          }
        ]
      },
      {
        "type": "header",
        "content": "Testimonials Settings"
      },
      {
        "type": "select",
        "id": "testimonials_style_mobile",
        "label": "Testimonials Style - Mobile",
        "default": "grid",
        "options": [
          {
            "label": "Grid",
            "value": "grid"
          },
          {
            "label": "Slider",
            "value": "slider"
          }
        ]
      },
      {
        "type": "select",
        "id": "testimonials_row",
        "label": "Testimonials in Row",
        "default": "2",
        "options": [
          {
            "label": "1",
            "value": "1"
          },
          {
            "label": "2",
            "value": "2"
          }
        ]
      },
      {
        "type": "select",
        "id": "testimonials_row_mobile",
        "label": "Testimonials in Row - Mobile",
        "default": "2",
        "options": [
          {
            "label": "1",
            "value": "1"
          },
          {
            "label": "2",
            "value": "2"
          },
          {
            "label": "3",
            "value": "3"
          }
        ]
      },
      {
        "type": "range",
        "id": "testimonials_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Testimonials Gap",
        "default": 12
      },
      {
        "type": "range",
        "id": "testimonials_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Testimonials Gap - Mobile",
        "default": 12
      },
      {
        "type": "header",
        "content": "Testimonial Card Settings"
      },
      {
        "type": "range",
        "id": "testimonial_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Card Padding Vertical",
        "default": 12
      },
      {
         "type": "range",
         "id": "testimonial_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Card Padding Horizontal",
         "default": 12
      },
      {
         "type": "range",
         "id": "testimonial_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Card Border Radius",
         "default": 8
      },
      {
         "type": "range",
         "id": "testimonial_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Card Border Thickness",
         "default": 1
      },
      {
        "type": "header",
        "content": "Testimonial Stars Settings"
      },
      {
        "type": "range",
        "id": "stars_size",
        "min": 10,
        "max": 100,
        "step": 2,
        "label": "Stars Size",
        "default": 24
      },
      {
        "type": "header",
        "content": "Testimonial Text"
      },
      {
        "type": "checkbox",
        "id": "testimonial_text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "testimonial_text_font",
        "label": "Testimonial Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "testimonial_text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Text Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "testimonial_text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Text Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "testimonial_text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Testimonial Text Line Height",
        "default": 150
      },
      {
        "type": "range",
        "id": "testimonial_text_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Text Margin top",
        "default": 8
      },
      {
        "type": "header",
        "content": "Testimonial Author"
      },
      {
        "type": "checkbox",
        "id": "testimonial_author_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "testimonial_author_font",
        "label": "Testimonial Author Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "testimonial_author_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Author Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "testimonial_author_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Author Size - Mobile",
        "default": 14
      },
      {
        "type": "range",
        "id": "testimonial_author_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Testimonial Author Line Height",
        "default": 150
      },
      {
        "type": "range",
        "id": "testimonial_author_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Author Margin top",
        "default": 12
      },
      {
        "type": "header",
        "content": "Testimonial Verified"
      },
      {
        "type": "checkbox",
        "id": "testimonial_verified_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "testimonial_verified_font",
        "label": "Testimonial Verified Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "testimonial_verified_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Verified Size",
        "default": 10
      },
      {
        "type": "range",
        "id": "testimonial_verified_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Testimonial Verified Size - Mobile",
        "default": 10
      },
      {
        "type": "range",
        "id": "testimonial_verified_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Testimonial Verified Line Height",
        "default": 150
      },
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button",
        "default": "SHOP NOW"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      },
      {
        "type": "image_picker",
        "id": "button_icon",
        "label": "Button Icon"
      },
      {
        "type": "checkbox",
        "id": "button_use_icon",
        "label": "Button Use Icon",
        "default": false
      },
      {
        "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": 18
      },
      {
        "type": "range",
        "id": "button_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Button Size - Mobile",
        "default": 16
      },
      {
        "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": "select",
        "id": "button_align_mobile",
        "label": "Button Text Align - Mobile",
        "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": 2,
        "unit": "px",
        "label": "Button Margin Top",
        "default": 24
      },
      {
        "type": "range",
        "id": "button_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Button Padding Vertical",
        "default": 16
      },
      {
         "type": "range",
         "id": "button_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Button Padding Horizontal",
         "default": 50
      },
      {
         "type": "range",
         "id": "button_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Button Border Radius",
         "default": 12
      },
      {
         "type": "range",
         "id": "button_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Button Border Thickness",
         "default": 2
      },
      {
        "type": "header",
        "content": "Section Colors"
      },
      {
        "type": "color",
        "label": "Heading Color",
        "id": "heading_color",
        "default": "#120A0A"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#F4F4F4"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "Section background gradient"
      },
      {
        "type": "color",
        "label": "Border",
        "id": "border_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Button Colors"
      },
      {
        "type": "color",
        "label": "Button Color",
        "id": "button_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Button Hover Color",
        "id": "button_hover_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Button Background Color",
        "id": "button_bg_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Button Background Hover Color",
        "id": "button_bg_hover_color",
        "default": "#FFFFFF"
      },
      {
        "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": "Other Colors"
      },
      {
        "type": "color",
        "label": "Image Border Color",
        "id": "image_border_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Testimonial Background Color",
        "id": "testimonial_bg_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Testimonial Border Color",
        "id": "testimonial_border_color",
        "default": "#F7DC5A"
      },
      {
        "type": "color",
        "label": "Stars Color",
        "id": "stars_color",
        "default": "#F7DC5A"
      },
      {
        "type": "color",
        "label": "Testimonial Text Color",
        "id": "testimonial_text_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Testimonial Author Color",
        "id": "testimonial_author_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Testimonial Verified Color",
        "id": "testimonial_verified_color",
        "default": "#999999"
      },
      {
        "type": "color",
        "label": "Testimonial Pagination Color",
        "id": "testimonial_pagination_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": 96
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 96
      },
      {
        "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": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 140
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      }
    ],
    "blocks":[
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "label": "Image",
            "id": "image"
          }
        ]
      },
      {
        "type": "testimonial",
        "name": "Testimonial",
        "settings": [
          {
            "type": "range",
            "id": "rating",
            "min": 0.1,
            "max": 5,
            "step": 0.1,
            "label": "Rating",
            "default": 4.5
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "text",
            "id": "author",
            "label": "Author"
          },
          {
            "type": "text",
            "id": "verified",
            "label": "Verified Text",
            "default": "VERIFIED PURCHASE"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Images with reviews",
        "category": "Testimonials",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 5,
              "text": "'Just 3 times isn't enough; it intensifies the more you use it, with a warming effect that's irresistible.'",
              "author": "Sarah M."
            }
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 4.5,
              "text": "'Patience pays off with these Tabs. It takes a moment, but the enduring radiance is undeniable.'",
              "author": "Chloe K."
            }
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 5,
              "text": "'Never knew my skin could feel so alive. It's the perfect prep for a night out with someone special.'",
              "author": "Hans B."
            }
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 4.5,
              "text": "'Plan a night in with this one! Once it activates, you're in for hours of silky-smooth skin.'",
              "author": "Linus S."
            }
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 5,
              "text": "'Had my doubts, but no regrets now! Every application turns my skin's luminosity up a notch.'",
              "author": "William I."
            }
          },
          {
            "type": "testimonial",
            "settings": {
              "rating": 4.5,
              "text": "'The scent and packaging won me over. Solo use? Absolutely enjoyable and quite the treat.'",
              "author": "Stephanie A."
            }
          }
        ]
      }
    ],
      "disabled_on": {
    "groups": ["header", "footer"]
  }
  }
{% endschema %}