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

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
  }

  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
      }
    }
  {% endif %}

  {% if section.settings.enable_gradient %}
    .before-after-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

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

  /* Before After Testimonial Layout */
  .before-after-testimonial {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }

  @media screen and (min-width: 990px) {
    .before-after-testimonial {
      grid-template-columns: 2fr 1fr;
      gap: 3rem;
    }

    .before-after-testimonial--review-first {
      grid-template-columns: 1fr 2fr;
    }

    .before-after-testimonial--review-first .before-after-images {
      order: 2;
    }

    .before-after-testimonial--review-first .before-after-content {
      order: 1;
    }
  }

  .before-after-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .before-after-image {
    position: relative;
    {% if section.settings.label_placement == 'inside' %}
      overflow: hidden;
      border-radius: {{ section.settings.image_border_radius }}px;
    {% else %}
      overflow: visible;
    {% endif %}
  }

  /* Outside label placement */
  {% if section.settings.label_placement == 'outside' %}
    .before-after-image {
      padding-top: 45px;
      padding-bottom: 45px;
    }
  {% endif %}

  .before-after-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    {% if section.settings.label_placement == 'outside' %}
      border-radius: {{ section.settings.image_border_radius }}px;
    {% endif %}
  }

  .before-after-label {
    background: {{ section.settings.label_background_color }};
    color: {{ section.settings.label_text_color }};
    padding: 8px 16px;
    border-radius: {{ section.settings.label_border_radius }}px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: absolute;
  }

  /* Label positioning for inside placement */
  {% if section.settings.label_placement == 'inside' %}
    .before-after-label--top-left {
      top: 12px;
      left: 12px;
    }

    .before-after-label--top-right {
      top: 12px;
      right: 12px;
    }

    .before-after-label--top-center {
      top: 12px;
      left: 12px;
    }

    .before-after-label--bottom-left {
      bottom: 12px;
      left: 12px;
    }

    .before-after-label--bottom-right {
      bottom: 12px;
      right: 12px;
    }

    .before-after-label--bottom-center {
      bottom: 12px;
      left: 12px;
    }
  {% else %}
    /* Outside placement - labels at top or bottom of container */
    .before-after-label--top-left {
      top: 0;
      left: 0;
      margin-bottom: 8px;
    }

    .before-after-label--top-right {
      top: 0;
      right: 0;
      margin-bottom: 8px;
    }

    .before-after-label--top-center {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
    }

    .before-after-label--bottom-left {
      bottom: 0;
      left: 0;
      margin-top: 8px;
    }

    .before-after-label--bottom-right {
      bottom: 0;
      right: 0;
      margin-top: 8px;
    }

    .before-after-label--bottom-center {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 8px;
    }
  {% endif %}

    .before-after-content {
      display: flex;
      flex-direction: column;
      justify-content: {{ section.settings.desktop_content_alignment }};
    }

    @media screen and (min-width: 990px) {
      .before-after-content {
        min-height: 100%;
      }
    }

    @media screen and (max-width: 989px) {
      .before-after-content {
        justify-content: start;
      }
    }

  .testimonial-author {
    font-size: {{ section.settings.author_font_size_desktop }}px;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: rgb(var(--color-foreground));
    line-height: 1.2;
  }

  .testimonial-text {
    font-size: {{ section.settings.text_font_size_desktop }}px;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.85);
  }

  @media screen and (max-width: 989px) {
    .before-after-images {
      gap: 0.75rem;
    }

    {% if section.settings.label_placement == 'outside' %}
      .before-after-image {
        padding-top: 40px;
        padding-bottom: 40px;
      }
    {% endif %}

    .before-after-label {
      font-size: 12px;
      padding: 6px 12px;
    }

    {% if section.settings.label_placement == 'inside' %}
      .before-after-label--top-left,
      .before-after-label--top-right {
        top: 8px;
      }

      .before-after-label--bottom-left,
      .before-after-label--bottom-right {
        bottom: 8px;
      }

      .before-after-label--top-left,
      .before-after-label--bottom-left {
        left: 8px;
      }

      .before-after-label--top-right,
      .before-after-label--bottom-right {
        right: 8px;
      }
    {% endif %}

    .testimonial-author {
      font-size: {{ section.settings.author_font_size_mobile }}px;
    }

    .testimonial-text {
      font-size: {{ section.settings.text_font_size_mobile }}px;
    }
  }
{%- endstyle -%}

<div class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class='section-id-btn button' data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="page-width section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
        <h2 class="{{ section.settings.heading_size }} title-with-highlight before-after-heading" style='--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }};'>
          {{ section.settings.title }}
        </h2>
      </div>
    {%- endunless -%}

    {%- liquid
      assign has_mobile_slider = section.settings.slider_mobile
      assign has_desktop_slider = section.settings.slider_desktop
    -%}

    {% if has_mobile_slider or has_desktop_slider %}
      <splide-component
        data-type='{{ section.settings.type }}'
        data-autoplay='{{ section.settings.autoplay }}'
        data-autoplay-speed='{{ section.settings.autoplay_speed }}'
        data-arrows-color="{{ section.settings.arrows_color_scheme }}"
        data-dots-color="{{ section.settings.dots_color_scheme }}"
        data-slides-desktop="1"
        data-per-move-desktop='1'
        data-gap-desktop='{{ section.settings.desktop_spacing }}'
        data-side-padding-desktop='0'
        data-padding-calc-desktop='false'
        data-slides-mobile="1"
        data-gap-mobile='15'
        data-side-padding-mobile='15'
        {% if has_desktop_slider == false %}
          data-destroy-desktop="true"
        {% elsif has_mobile_slider == false %}
          data-destroy-mobile="true"
        {% endif %}
      >
    {% endif %}
      <div 
        class='splide splide--desktop-dots-{{ section.settings.desktop_dots_position }} splide--mobile-dots-{{ section.settings.mobile_dots_position }} splide--desktop-arrows-{{ section.settings.desktop_arrows_position }} splide--mobile-arrows-{{ section.settings.mobile_arrows_position }}{% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}{% if has_desktop_slider == false %} splide--destroy-desktop{% endif %}{% if has_mobile_slider == false %} splide--destroy-mobile{% endif %}' 
        style="--columns-desktop: 1;--columns-mobile:1;"
        {% if section.settings.desktop_adaptive_height and has_desktop_slider %}
          data-desktop-adaptive-height="true"
        {% endif %}
        {% if section.settings.mobile_adaptive_height and has_mobile_slider %}
          data-mobile-adaptive-height="true"
        {% endif %}
      >
        <div class="splide__track">
          <ul class="splide__list">
            {%- for block in section.blocks -%}
              <li class="splide__slide" {{ block.shopify_attributes }}>
                <div class="splide__slide__container">
                  <div class="before-after-testimonial {% if block.settings.desktop_layout == 'review-first' %}before-after-testimonial--review-first{% endif %}">
                    <div class="before-after-images">
                      <div class="before-after-image">
                        {%- if block.settings.before_image != blank -%}
                          {{ block.settings.before_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
                        {%- else -%}
                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        {%- endif -%}
                        {% unless block.settings.before_label == blank %}
                          <div class="before-after-label before-after-label--{{ section.settings.label_position }}">{{ block.settings.before_label }}</div>
                        {% endunless %}
                      </div>
                      <div class="before-after-image">
                        {%- if block.settings.after_image != blank -%}
                          {{ block.settings.after_image | image_url: width: 800 | image_tag: loading: 'lazy' }}
                        {%- else -%}
                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        {%- endif -%}
                        {% unless block.settings.after_label == blank %}
                          <div class="before-after-label before-after-label--{{ section.settings.label_position }}">{{ block.settings.after_label }}</div>
                        {% endunless %}
                      </div>
                    </div>
                    <div class="before-after-content">
                      {% unless block.settings.author == blank %}
                        <div class="testimonial-author">{{ block.settings.author }}</div>
                      {% endunless %}
                      {% unless block.settings.testimonial_text == blank %}
                        <div class="testimonial-text rte">{{ block.settings.testimonial_text }}</div>
                      {% endunless %}
                    </div>
                  </div>
                </div>
              </li>
            {%- endfor -%}
          </ul>
        </div>
        <div class='splide__dots-and-arrows'>
          <ul class="splide__pagination"></ul>
          <div class="splide__arrows"></div>
        </div>
      </div>
    {% if has_mobile_slider or has_desktop_slider %}
      </splide-component>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Before & After slider V2",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Real Customer Testimonials",
      "label": "Heading"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "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
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)"
    },
    {
      "type": "header",
      "content": "Italic Text Styling"
    },
    {
      "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"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3
    },
    {
      "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"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name"
    },
    {
      "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"
    },
    {
      "type": "header",
      "content": "Label Styling"
    },
    {
      "type": "select",
      "id": "label_placement",
      "label": "Label placement",
      "options": [
        {
          "value": "inside",
          "label": "Inside images"
        },
        {
          "value": "outside",
          "label": "Outside images"
        }
      ],
      "default": "inside",
      "info": "Choose whether labels appear inside or outside the images"
    },
    {
      "type": "select",
      "id": "label_position",
      "label": "Label position",
      "options": [
        {
          "value": "top-left",
          "label": "Top Left"
        },
        {
          "value": "top-right",
          "label": "Top Right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom Left"
        },
        {
          "value": "bottom-right",
          "label": "Bottom Right"
        }
      ],
      "default": "top-left"
    },
    {
      "type": "range",
      "id": "label_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Label border radius",
      "default": 4
    },
    {
      "type": "color",
      "id": "label_background_color",
      "label": "Label background color",
      "default": "#E87461"
    },
    {
      "type": "color",
      "id": "label_text_color",
      "label": "Label text color",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Image Styling"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Image border radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Testimonial Text Sizing"
    },
    {
      "type": "range",
      "id": "author_font_size_desktop",
      "min": 16,
      "max": 60,
      "step": 1,
      "unit": "px",
      "label": "Author name size (Desktop)",
      "default": 32
    },
    {
      "type": "range",
      "id": "text_font_size_desktop",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Testimonial text size (Desktop)",
      "default": 18
    },
    {
      "type": "range",
      "id": "author_font_size_mobile",
      "min": 16,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Author name size (Mobile)",
      "default": 24
    },
    {
      "type": "range",
      "id": "text_font_size_mobile",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Testimonial text size (Mobile)",
      "default": 16
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "label": "Desktop content alignment",
      "options": [
        {
          "value": "start",
          "label": "Top"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "center",
      "info": "Align testimonial content vertically on desktop"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "header",
      "content": "Slider Settings"
    },
    {
      "type": "select",
      "id": "type",
      "options": [
        {
          "value": "slide",
          "label": "Classic"
        },
        {
          "value": "loop",
          "label": "Infinite"
        }
      ],
      "default": "slide",
      "label": "Slider Type"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "default": 5,
      "unit": "sec",
      "label": "Autoplay speed"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        }
      ],
      "default": "inverse",
      "label": "Arrows color scheme"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Text"
        }
      ],
      "default": "inverse",
      "label": "Dots color"
    },
    {
      "type": "header",
      "content": "Desktop Settings"
    },
    {
      "type": "checkbox",
      "id": "slider_desktop",
      "label": "Enable desktop slider",
      "default": true
    },
    {
      "type": "range",
      "id": "desktop_spacing",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Spacing between slides",
      "default": 40
    },
    {
      "type": "checkbox",
      "id": "desktop_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "desktop_dots_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "desktop_arrows_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        },
        {
          "value": "sides",
          "label": "On sides of the slider"
        }
      ],
      "default": "under",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "Mobile Settings"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "mobile_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "options": [
        {
          "value": "hidden",
          "label": "Hidden"
        },
        {
          "value": "under",
          "label": "Under the slider"
        },
        {
          "value": "sides",
          "label": "On sides of the slider"
        }
      ],
      "default": "under",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "header",
      "content": "Custom color scheme"
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "comparison",
      "name": "Before/After Testimonial",
      "settings": [
        {
          "type": "image_picker",
          "id": "before_image",
          "label": "Before image"
        },
        {
          "type": "text",
          "id": "before_label",
          "label": "Before label",
          "default": "DAY 1"
        },
        {
          "type": "image_picker",
          "id": "after_image",
          "label": "After image"
        },
        {
          "type": "text",
          "id": "after_label",
          "label": "After label",
          "default": "MONTH 3"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author name",
          "default": "Margaret D."
        },
        {
          "type": "richtext",
          "id": "testimonial_text",
          "label": "Testimonial text",
          "default": "<p>After 30 years of struggling with hair loss from childbirth, hysterectomy, and a bald patch, I tried expensive specialists, PRP, and different shampoos with only temporary results.</p>"
        },
        {
          "type": "select",
          "id": "desktop_layout",
          "label": "Desktop layout",
          "options": [
            {
              "value": "images-first",
              "label": "Images first (left)"
            },
            {
              "value": "review-first",
              "label": "Review first (left)"
            }
          ],
          "default": "images-first",
          "info": "Choose whether images or review text appears first on desktop"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Before & After slider V2",
      "category": "Content",
      "blocks": [
        {
          "type": "comparison"
        },
        {
          "type": "comparison"
        },
        {
          "type": "comparison"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}