{%- comment -%} ── Google Fonts for italic em text ── {%- endcomment -%}
{% if section.settings.italic_font_family == 'georgia-pro' or section.settings.italic_font_family == 'bodoni-moda' or section.settings.italic_font_family == 'instrument-serif' %}
  <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 %}
{% endif %}



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

{%- style -%}
  /* ── Section padding / margin ── */
  .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;
    }
  }

  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  /* ── Custom color scheme overrides ── */
  .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 %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}

  .cards-color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_cards_colors_background.red }}, {{ section.settings.custom_cards_colors_background.green }}, {{ section.settings.custom_cards_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_cards_gradient_background != blank %}{{ section.settings.custom_cards_gradient_background }}{% else %}{{ section.settings.custom_cards_colors_background }}{% endif %};
    --color-foreground: {{ section.settings.custom_cards_colors_text.red }}, {{ section.settings.custom_cards_colors_text.green }}, {{ section.settings.custom_cards_colors_text.blue }};
  }

  /* ── Bold / strong gradient on heading (matches testimonials.liquid) ── */
  {% if section.settings.enable_gradient %}
    #CustomerReviews-{{ section.id }} .cr-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Italic em styling on heading (matches testimonials.liquid) ── */
  #CustomerReviews-{{ section.id }} .cr-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 == '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 !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  /* ── Section-scoped design tokens ── */
  #CustomerReviews-{{ section.id }} {
    --cr-star-filled: {{ section.settings.star_filled_color }};
    --cr-star-empty:  {{ section.settings.star_empty_color }};
    --cr-star-size:   {{ section.settings.star_size }}px;
    --cr-card-radius: {{ section.settings.card_border_radius }}px;
    --cr-card-border: {{ section.settings.card_border_color }};
    --cr-image-height: {{ section.settings.image_height }}px;
    --cr-review-text-size: {{ section.settings.review_text_size }}px;
    --cr-verified-color: {{ section.settings.verified_badge_color }};
    --cr-product-price-color: {{ section.settings.product_price_color }};
    --cr-summary-bg: {{ section.settings.rating_summary_bg_color }};
    --cr-summary-text: {{ section.settings.summary_text_color }};
    --cr-summary-star: {{ section.settings.summary_star_color }};
  }

  /* ── Rating summary pill ── */
  #CustomerReviews-{{ section.id }} .cr-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cr-summary-bg);
    color: var(--cr-summary-text);
    border-radius: {{ section.settings.rating_summary_border_radius }}px;
    padding: 5px 16px;
    font-size: {{ section.settings.rating_summary_font_size }}px;
    {% if section.settings.enable_rating_summary_border %}
      border: {{ section.settings.rating_summary_border_width }}px {{ section.settings.rating_summary_border_style }} {{ section.settings.rating_summary_border_color }};
    {% endif %}
  }
  #CustomerReviews-{{ section.id }} .cr-summary-stars {
    display: flex;
    gap: 1px;
    align-items: center;
  }
  #CustomerReviews-{{ section.id }} .cr-summary-star {
    width: 13px;
    height: 13px;
    color: var(--cr-summary-star);
    display: block;
  }

  /* ── Heading alignment
       Base theme .title-wrapper-with-link is display:flex; flex-direction:row; justify-content:center
       — it sizes to content, so centering only works within its own narrow width.
       Override to flex-direction:column + width:100% so the heading fills the container,
       then align-items drives left / center / right correctly.
  ── */
  #CustomerReviews-{{ section.id }} .title-wrapper-with-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    {% if section.settings.heading_alignment == 'left' %}
      text-align: left;
      align-items: flex-start;
    {% elsif section.settings.heading_alignment == 'right' %}
      text-align: right;
      align-items: flex-end;
    {% else %}
      text-align: center;
      align-items: center;
    {% endif %}
    margin-top: {{ section.settings.header_top_spacing }}px;
    margin-bottom: {{ section.settings.header_bottom_spacing }}px;
  }
  #CustomerReviews-{{ section.id }} .cr-header-wrap {
    text-align: {{ section.settings.heading_alignment }};
  }
  #CustomerReviews-{{ section.id }} .multicolumn-text {
    text-align: {{ section.settings.heading_alignment }};
  }

  /* ── Review card ── */
  #CustomerReviews-{{ section.id }} .cr-card {
    border-radius: var(--cr-card-radius);
    border: 1px solid var(--cr-card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    {% if section.settings.review_card_3d %}
      box-shadow: 9px 9px 0 0 {{ section.settings.review_card_3d_color }};
    {% endif %}
  }

  /* ── Card image ── */
  #CustomerReviews-{{ section.id }} .cr-card__image-wrap {
    width: 100%;
    height: var(--cr-image-height);
    overflow: hidden;
    background-color: rgba(var(--color-foreground), 0.04);
    flex-shrink: 0;
  }
  #CustomerReviews-{{ section.id }} .cr-card__image-wrap.is-wrapped { height: auto; }
  #CustomerReviews-{{ section.id }} .cr-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #CustomerReviews-{{ section.id }} .cr-card__image-wrap.is-wrapped img {
    object-fit: contain;
    height: auto;
  }

  /* ── Card body ── */
  #CustomerReviews-{{ section.id }} .cr-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
  }

  /* ── Stars ── */
  #CustomerReviews-{{ section.id }} .cr-card__stars {
    display: flex;
    gap: 1px;
    align-items: center;
  }
  #CustomerReviews-{{ section.id }} .cr-card__star {
    width: var(--cr-star-size);
    height: var(--cr-star-size);
    display: block;
    flex-shrink: 0;
  }
  #CustomerReviews-{{ section.id }} .cr-card__star--filled { color: var(--cr-star-filled); }
  #CustomerReviews-{{ section.id }} .cr-card__star--empty  { color: var(--cr-star-empty);  }

  /* ── Reviewer pill ── */
  #CustomerReviews-{{ section.id }} .cr-card__reviewer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: {{ section.settings.reviewer_info_font_size }}px;
    background: rgba(var(--color-foreground), 0.06);
    color: rgb(var(--color-foreground));
    border-radius: 50px;
    padding: 3px 10px;
    flex-wrap: wrap;
    width: fit-content;
  }
  #CustomerReviews-{{ section.id }} .cr-card__reviewer-name { font-weight: var(--font-body-weight-bold, 700); }
  #CustomerReviews-{{ section.id }} .cr-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--cr-verified-color);
    font-weight: var(--font-body-weight-bold, 700);
    font-size: {{ section.settings.verified_badge_font_size }}px;
  }
  #CustomerReviews-{{ section.id }} .cr-card__verified svg {
    width: {{ section.settings.verified_badge_font_size | times: 1.2 }}px;
    height: {{ section.settings.verified_badge_font_size | times: 1.2 }}px;
  }
  #CustomerReviews-{{ section.id }} .cr-card__verified--star svg {
    width: {{ section.settings.verified_badge_font_size }}px;
    height: {{ section.settings.verified_badge_font_size }}px;
  }

  /* ── Review text ── */
  #CustomerReviews-{{ section.id }} .cr-card__text {
    font-size: var(--cr-review-text-size);
    color: rgb(var(--color-foreground));
    line-height: 1.6;
    flex: 1;
  }

  /* ── Product strip ── */
  #CustomerReviews-{{ section.id }} .cr-card__product {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid {{ section.settings.product_border_color }};
    border-radius: 8px;
    padding: 8px;
    background: {{ section.settings.product_bg_color }};
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-info { flex: 1; min-width: 0; }
  #CustomerReviews-{{ section.id }} .cr-card__product-title {
    font-size: {{ section.settings.product_title_font_size }}px;
    font-weight: var(--font-body-weight-bold, 700);
    color: rgb(var(--color-foreground));
    margin: 0 0 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-price {
    font-size: {{ section.settings.product_price_font_size }}px;
    font-weight: var(--font-body-weight-bold, 700);
    color: var(--cr-product-price-color);
    margin: 0;
    line-height: 1.2;
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-compare {
    font-size: {{ section.settings.product_compare_price_font_size }}px;
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: 4px;
  }
  #CustomerReviews-{{ section.id }} .cr-card__product-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: {{ section.settings.purchase_date_font_size }}px;
    color: rgb(var(--color-foreground));
    opacity: 0.65;
    margin: 2px 0 0;
  }

  /* ── Splide equal-height slides ── */
  #CustomerReviews-{{ section.id }} .splide__slide { display: flex; }
  #CustomerReviews-{{ section.id }} .splide__slide > div { display: flex; width: 100%; }
  #CustomerReviews-{{ section.id }} .cr-card { width: 100%; }

  @media screen and (min-width: 750px) {
  .section-{{ section.id }}-padding.desktop-full-page {
    overflow: hidden;
  }

  .section-{{ section.id }}-padding.desktop-full-page .splide__track {
    overflow: visible;
    padding-left: {{ section.settings.desktop_side_padding }}px;
    padding-right: {{ section.settings.desktop_side_padding }}px;
  }

  .section-{{ section.id }}-padding.desktop-full-page .splide {
    overflow: visible;
    margin-left: -{{ section.settings.desktop_side_padding }}px;
    margin-right: -{{ section.settings.desktop_side_padding }}px;
  }
}
{% if section.settings.enable_mask_fade %}
@media screen and (min-width: 750px) {
  #shopify-section-{{ section.id }} splide-component {
    -webkit-mask: linear-gradient(to right,
      transparent 0%,
      black {{ section.settings.desktop_side_padding }}px,
      black calc(100% - {{ section.settings.desktop_side_padding }}px),
      transparent 100%);
    mask: linear-gradient(to right,
      transparent 0%,
      black {{ section.settings.desktop_side_padding }}px,
      black calc(100% - {{ section.settings.desktop_side_padding }}px),
      transparent 100%);
  }
}

@media screen and (max-width: 749px) {
  #shopify-section-{{ section.id }} splide-component {
    -webkit-mask: linear-gradient(to right,
      transparent 0%,
      black {{ section.settings.mobile_side_padding | default: 24 }}px,
      black calc(100% - {{ section.settings.mobile_side_padding | default: 24 }}px),
      transparent 100%);
    mask: linear-gradient(to right,
      transparent 0%,
      black {{ section.settings.mobile_side_padding | default: 24 }}px,
      black calc(100% - {{ section.settings.mobile_side_padding | default: 24 }}px),
      transparent 100%);
  }
}
{% endif %}
{%- endstyle -%}

{%- comment -%} ── SECTION WRAPPER ── {%- endcomment -%}
<div
  id="CustomerReviews-{{ section.id }}"
  class="customer-reviews multicolumn color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient{% if section.settings.title == blank %} no-heading{% endif %} content-for-grouping animate-section animate--hidden {{ section.settings.visibility }} section-{{ section.id }}-margin"
>

  {% 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 %}

  {%- liquid
    assign has_mobile_slider = false
    assign has_desktop_slider = false
    if section.settings.slider_mobile
      assign has_mobile_slider = true
    endif
    if section.settings.slider_desktop
      assign has_desktop_slider = true
    endif

    assign bg_diff_class = ' multicolumn--same-bgs'
    unless section.settings.color_scheme == section.settings.cards_color_scheme
      assign bg_diff_class = ' multicolumn--diff-bgs'
    endunless
    if section.settings.color_scheme == 'custom' and section.settings.cards_color_scheme == 'custom'
      unless section.settings.custom_colors_background == section.settings.custom_cards_colors_background
        assign bg_diff_class = ' multicolumn--diff-bgs'
      endunless
    endif
  -%}

  <div class="page-width{% if section.settings.desktop_full_page %} desktop-full-page{% endif %}{% if has_mobile_slider %} mobile-full-page{% endif %} section-{{ section.id }}-padding isolate" style="--columns-desktop:{{ section.settings.slides_per_page_desktop }};--columns-mobile:1;--gap-desktop:{{ section.settings.desktop_spacing | divided_by: 10.0 }}rem;--gap-mobile:1.5rem;">

    {%- comment -%} ── Header block — wrapped in animate-item (matches testimonials.liquid) ── {%- endcomment -%}
    <div class="animate-item animate-item--child index-0">

      {%- comment -%} ── Rating summary pill ── {%- endcomment -%}
      {% if section.settings.show_rating_summary %}
        <div class="cr-header-wrap">
          <div class="cr-rating-summary">
            <span class="cr-summary-stars" aria-hidden="true">
              {% for i in (1..5) %}
                <svg class="cr-summary-star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5245 3.46353C11.6741 3.00287 12.3259 3.00287 12.4755 3.46353L14.1329 8.56434C14.1998 8.77035 14.3918 8.90983 14.6084 8.90983H19.9717C20.4561 8.90983 20.6575 9.52964 20.2656 9.81434L15.9266 12.9668C15.7514 13.0941 15.678 13.3198 15.745 13.5258L17.4023 18.6266C17.552 19.0873 17.0248 19.4704 16.6329 19.1857L12.2939 16.0332C12.1186 15.9059 11.8814 15.9059 11.7061 16.0332L7.3671 19.1857C6.97524 19.4704 6.448 19.0873 6.59768 18.6266L8.25503 13.5258C8.32197 13.3198 8.24864 13.0941 8.07339 12.9668L3.73438 9.81434C3.34253 9.52964 3.54392 8.90983 4.02828 8.90983H9.39159C9.6082 8.90983 9.80018 8.77035 9.86712 8.56434L11.5245 3.46353Z" fill="currentColor"/>
                </svg>
              {% endfor %}
            </span>
            <span class="cr-rating-text">{{ section.settings.rating_summary_text }}</span>
          </div>
        </div>
      {% endif %}

      {%- comment -%}
        Heading uses inline_richtext (same as testimonials.liquid):
        – title-with-highlight applies --hightlight-color to <strong>
        – cr-heading scopes the italic em CSS
        – heading_size outputs h0 / h1 / h2 theme scale classes
      {%- endcomment -%}
      {%- unless section.settings.title == blank -%}
        <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin{% if section.settings.text != blank %} multicolumn-title-with-text{% endif %}">
          <h2 class="title {{ section.settings.heading_size }} title-with-highlight cr-heading" style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text:{{ section.settings.title_gradient_background }};">
            {{ section.settings.title }}
          </h2>
        </div>
      {%- endunless -%}

      {%- comment -%} ── Description / subtitle (richtext) ── {%- endcomment -%}
      {% if section.settings.show_description and section.settings.text != blank %}
        <div class="multicolumn-text rte">{{ section.settings.text }}</div>
      {% endif %}

    </div>{%- comment -%} /.animate-item index-0 {%- endcomment -%}

    {%- comment -%} ── Splide carousel (identical structure to testimonials.liquid) ── {%- endcomment -%}
    {% 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="{{ section.settings.slides_per_page_desktop }}"
        data-per-move-desktop="{{ section.settings.per_move_desktop }}"
        data-gap-desktop="{{ section.settings.desktop_spacing }}"
        data-side-padding-desktop="{{ section.settings.desktop_side_padding }}"
        data-padding-calc-desktop="{{ section.settings.desktop_padding_calc }}"
        data-slides-mobile="1"
        data-gap-mobile="15"
        {% if section.settings.enable_mobile_preview %}
          data-side-padding-mobile='{{ section.settings.mobile_side_padding }}'
        {% else %}
          data-side-padding-mobile='15'
        {% endif %}
        {% 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--desktop-arrows-outside
          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 %}
          {% if section.settings.stretch_cards %} splide--align-stretch{% endif %}"
        style="--columns-desktop:{{ section.settings.slides_per_page_desktop }};--columns-mobile:1;--gap-desktop:{{ section.settings.desktop_spacing | divided_by: 10.0 }}rem;--gap-mobile:1.5rem;"
        {% 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 -%}
              {%- if block.type == 'review' -%}
                <li class="splide__slide">
                  <div class="splide__slide__container" style="--index:{{ forloop.index0 | plus: 1 }};" {{ block.shopify_attributes }}>
                    <div class="cr-card multicolumn-card content-container cards-color-scheme-{{ section.id }} color-{{ section.settings.cards_color_scheme }} gradient{{ bg_diff_class }} animate-item animate-item--child">

                      {%- comment -%} Review image {%- endcomment -%}
                      {% if block.settings.review_image != blank %}
                        <div class="cr-card__image-wrap{% if block.settings.wrap_image %} is-wrapped{% endif %}">
                          <img
                            src="{{ block.settings.review_image | image_url: width: 720 }}"
                            srcset="
                              {{ block.settings.review_image | image_url: width: 400 }} 400w,
                              {{ block.settings.review_image | image_url: width: 720 }} 720w,
                              {{ block.settings.review_image | image_url: width: 1000 }} 1000w
                            "
                            sizes="(max-width: 480px) 90vw, (max-width: 749px) 85vw, 400px"
                            alt="Review by {{ block.settings.reviewer_name | escape }}"
                            style="object-position: {{ block.settings.image_position }};"
                            width="720"
                            height="480"
                            loading="lazy"
                          >
                        </div>
                      {% elsif section.settings.show_image_placeholder %}
                        <div class="cr-card__image-wrap" style="background:rgba(var(--color-foreground),0.04);"></div>
                      {% endif %}

                      <div class="cr-card__body">

                        {%- comment -%} Stars {%- endcomment -%}
                        <div class="cr-card__stars" aria-label="{{ block.settings.rating }} out of 5 stars">
                          {% for i in (1..5) %}
                            <svg
                              class="cr-card__star {% if i <= block.settings.rating %}cr-card__star--filled{% else %}cr-card__star--empty{% endif %}"
                              viewBox="0 0 24 24"
                              xmlns="http://www.w3.org/2000/svg"
                              aria-hidden="true"
                            >
                              <path d="M11.5245 3.46353C11.6741 3.00287 12.3259 3.00287 12.4755 3.46353L14.1329 8.56434C14.1998 8.77035 14.3918 8.90983 14.6084 8.90983H19.9717C20.4561 8.90983 20.6575 9.52964 20.2656 9.81434L15.9266 12.9668C15.7514 13.0941 15.678 13.3198 15.745 13.5258L17.4023 18.6266C17.552 19.0873 17.0248 19.4704 16.6329 19.1857L12.2939 16.0332C12.1186 15.9059 11.8814 15.9059 11.7061 16.0332L7.3671 19.1857C6.97524 19.4704 6.448 19.0873 6.59768 18.6266L8.25503 13.5258C8.32197 13.3198 8.24864 13.0941 8.07339 12.9668L3.73438 9.81434C3.34253 9.52964 3.54392 8.90983 4.02828 8.90983H9.39159C9.6082 8.90983 9.80018 8.77035 9.86712 8.56434L11.5245 3.46353Z" fill="currentColor"/>
                            </svg>
                          {% endfor %}
                        </div>

                        {%- comment -%} Reviewer pill — position controlled by section.settings.reviewer_position ── {%- endcomment -%}
                        {%- capture reviewer_pill -%}
                        <div class="cr-card__reviewer">
                          <span class="cr-card__reviewer-name">{{ block.settings.reviewer_name | escape }}</span>
                          {% if block.settings.reviewer_age != blank %}
                            <span>,&nbsp;{{ block.settings.reviewer_age | escape }}</span>
                          {% endif %}
                          {% if block.settings.show_verified_badge %}
                            {% if section.settings.verified_badge_icon == 'star' %}
                              <span class="cr-card__verified cr-card__verified--star">
                                <span aria-hidden="true" style="font-size:{{ section.settings.verified_badge_font_size }}px; line-height:1;">✦</span>
                                {{ section.settings.verified_badge_text | escape }}
                              </span>
                            {% else %}
                              <span class="cr-card__verified">
                                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
                                </svg>
                                {{ section.settings.verified_badge_text | escape }}
                              </span>
                            {% endif %}
                          {% endif %}
                        </div>
                        {%- endcapture -%}

                        {%- comment -%} Review text {%- endcomment -%}
                        {%- capture review_text_html -%}
                        {% if block.settings.review_text != blank %}
                          <div class="cr-card__text rte">{{ block.settings.review_text }}</div>
                        {% endif %}
                        {%- endcapture -%}

                        {% if section.settings.reviewer_position == 'above' %}
                          {{ reviewer_pill }}
                          {{ review_text_html }}
                        {% else %}
                          {{ review_text_html }}
                          {{ reviewer_pill }}
                        {% endif %}

                        {%- comment -%} Purchased product strip {%- endcomment -%}
                        {% if block.settings.show_purchased_product %}
                          {%- liquid
                            assign show_product = false
                            if block.settings.product_reference != blank
                              assign ref_product = all_products[block.settings.product_reference]
                              assign show_product = true
                            elsif block.settings.product_title != blank
                              assign show_product = true
                            endif
                          -%}
                          {% if show_product %}
                            <div class="cr-card__product">
                              {% if block.settings.product_reference != blank and ref_product.featured_image != blank %}
                                <div class="cr-card__product-img">
                                  <img
                                    src="{{ ref_product.featured_image | image_url: width: 120 }}"
                                    srcset="{{ ref_product.featured_image | image_url: width: 60 }} 60w, {{ ref_product.featured_image | image_url: width: 120 }} 120w"
                                    sizes="48px"
                                    alt="{{ ref_product.title | escape }}"
                                    width="48" height="48" loading="lazy"
                                  >
                                </div>
                              {% elsif block.settings.product_image != blank %}
                                <div class="cr-card__product-img">
                                  <img
                                    src="{{ block.settings.product_image | image_url: width: 120 }}"
                                    srcset="{{ block.settings.product_image | image_url: width: 60 }} 60w, {{ block.settings.product_image | image_url: width: 120 }} 120w"
                                    sizes="48px"
                                    alt="{{ block.settings.product_title | escape }}"
                                    width="48" height="48" loading="lazy"
                                  >
                                </div>
                              {% endif %}
                              <div class="cr-card__product-info">
                                {% if block.settings.product_reference != blank %}
                                  <p class="cr-card__product-title">{{ ref_product.title }}</p>
                                  <p class="cr-card__product-price">
                                    {{ ref_product.price | money }}
                                    {% if ref_product.compare_at_price > ref_product.price %}
                                      <span class="cr-card__product-compare">{{ ref_product.compare_at_price | money }}</span>
                                    {% endif %}
                                  </p>
                                {% else %}
                                  <p class="cr-card__product-title">{{ block.settings.product_title }}</p>
                                  {% if block.settings.product_price != blank %}
                                    <p class="cr-card__product-price">
                                      {{ block.settings.product_price }}
                                      {% if block.settings.product_compare_price != blank %}
                                        <span class="cr-card__product-compare">{{ block.settings.product_compare_price }}</span>
                                      {% endif %}
                                    </p>
                                  {% endif %}
                                {% endif %}
                                {% if block.settings.show_purchase_date and block.settings.purchase_date != blank %}
                                  <p class="cr-card__product-date">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                      <line x1="16" y1="2" x2="16" y2="6"></line>
                                      <line x1="8" y1="2" x2="8" y2="6"></line>
                                      <line x1="3" y1="10" x2="21" y2="10"></line>
                                    </svg>
                                    {{ section.settings.purchase_date_prefix | default: 'Purchased' | escape }} {{ block.settings.purchase_date | escape }}
                                  </p>
                                {% endif %}
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}

                      </div>{%- comment -%} /.cr-card__body {%- endcomment -%}
                    </div>{%- comment -%} /.cr-card {%- endcomment -%}
                  </div>
                </li>
              {%- endif -%}
            {%- endfor -%}
          </ul>
        </div>

        <div class="splide__dots-and-arrows">
          <ul class="splide__pagination"></ul>
          <div class="splide__arrows"></div>
        </div>

      </div>{%- comment -%} /.splide {%- endcomment -%}

    {% if has_mobile_slider or has_desktop_slider %}
      </splide-component>
    {% endif %}

  </div>{%- comment -%} /.page-width {%- endcomment -%}
</div>{%- comment -%} /#CustomerReviews-{{ section.id }} {%- endcomment -%}

{% schema %}
{
  "name": "Customer reviews",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false,
      "info": "ID can also be put inside any button link and the button will scroll to this section."
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        { "value": "always-display", "label": "All devices"  },
        { "value": "mobile-hidden",  "label": "Desktop only" },
        { "value": "desktop-hidden", "label": "Mobile only"  }
      ],
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "Customer Reviews",
      "info": "Bold words to highlight them with a color. Italicize words to apply the Italic text style set below."
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "h2", "label": "Small"  },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large"  }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "left",   "label": "Left"   },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right"  }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "header_top_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space above heading",
      "info": "Gap between the rating summary pill and the heading.",
      "default": 12
    },
    {
      "type": "range",
      "id": "header_bottom_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space below header",
      "default": 12
    },
    {
      "type": "header",
      "content": "Bold text highlight"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#EF4A65"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Use gradient for bold text",
      "default": false,
      "info": "Overrides the solid highlight color with a gradient."
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Bold text gradient",
      "default": "linear-gradient(45deg, #EF4A65 0%, #FF6B9D 100%)",
      "visible_if": "{{ section.settings.enable_gradient }}"
    },
    {
      "type": "header",
      "content": "Italic text styling",
      "info": "Controls how italic text in the heading is displayed."
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic 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": "#EF4A65",
      "visible_if": "{{ section.settings.italic_style == 'underline' }}"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "visible_if": "{{ section.settings.italic_style == 'underline' }}"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic font family",
      "options": [
        { "value": "inherit",          "label": "Default (Inherit)" },
        { "value": "serif",            "label": "Serif"             },
        { "value": "georgia-pro",      "label": "Georgia Pro"       },
        { "value": "bodoni-moda",      "label": "Bodoni Moda"       },
        { "value": "instrument-serif", "label": "Instrument Serif"  },
        { "value": "cursive",          "label": "Cursive"           }
      ],
      "default": "serif",
      "visible_if": "{{ section.settings.italic_style == 'font_family' }}"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic font weight",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "300",     "label": "Light 300"         },
        { "value": "400",     "label": "Regular 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",
      "visible_if": "{{ section.settings.italic_style == 'font_family' }}"
    },
    {
      "type": "header",
      "content": "Description"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "Show description",
      "default": true
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Description",
      "default": "<p>See what our customers are saying about our products.</p>",
      "visible_if": "{{ section.settings.show_description }}"
    },
    {
      "type": "header",
      "content": "Rating summary"
    },
    {
      "type": "checkbox",
      "id": "show_rating_summary",
      "label": "Show rating summary pill",
      "default": true
    },
    {
      "type": "range",
      "id": "rating_summary_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Rating pill border radius",
      "default": 50,
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "text",
      "id": "rating_summary_text",
      "label": "Rating summary text",
      "default": "Rated 4.8/5 based on +10,839 total ratings",
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "range",
      "id": "rating_summary_font_size",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Rating summary font size",
      "default": 13,
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "color",
      "id": "rating_summary_bg_color",
      "label": "Rating summary background",
      "default": "#FEF6E6",
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "color",
      "id": "summary_text_color",
      "label": "Rating summary text color",
      "default": "#7a5c00",
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "color",
      "id": "summary_star_color",
      "label": "Rating summary star color",
      "default": "#FFBF00",
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "checkbox",
      "id": "enable_rating_summary_border",
      "label": "Show border on rating summary",
      "default": true,
      "visible_if": "{{ section.settings.show_rating_summary }}"
    },
    {
      "type": "range",
      "id": "rating_summary_border_width",
      "min": 1,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1,
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "select",
      "id": "rating_summary_border_style",
      "label": "Border style",
      "options": [
        { "value": "solid",  "label": "Solid"  },
        { "value": "dashed", "label": "Dashed" },
        { "value": "dotted", "label": "Dotted" }
      ],
      "default": "solid",
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "color",
      "id": "rating_summary_border_color",
      "label": "Border color",
      "default": "#FFBF00",
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Section 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"
    },
    {
      "type": "select",
      "id": "cards_color_scheme",
      "label": "Cards color scheme",
      "options": [
        { "value": "bg-overlay",   "label": "Light overlay" },
        { "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": "transparent",  "label": "Transparent"   },
        { "value": "custom",       "label": "Custom"        }
      ],
      "default": "background-2"
    },
    {
      "type": "header",
      "content": "Card styling"
    },
    {
      "type": "checkbox",
      "id": "stretch_cards",
      "label": "Make all cards same height",
      "default": true
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Card border radius",
      "default": 10
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border color",
      "default": "#e0e0e0"
    },
    {
      "type": "checkbox",
      "id": "review_card_3d",
      "label": "Enable 3D card style",
      "default": false
    },
    {
      "type": "color",
      "id": "review_card_3d_color",
      "label": "3D shadow color",
      "default": "#2F465F",
      "visible_if": "{{ section.settings.review_card_3d }}"
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 120,
      "max": 480,
      "step": 8,
      "unit": "px",
      "label": "Image height",
      "default": 280
    },
    {
      "type": "checkbox",
      "id": "show_image_placeholder",
      "label": "Show placeholder when no image",
      "default": false
    },
    {
      "type": "header",
      "content": "Review stars"
    },
    {
      "type": "color",
      "id": "star_filled_color",
      "label": "Filled star color",
      "default": "#FFC107"
    },
    {
      "type": "color",
      "id": "star_empty_color",
      "label": "Empty star color",
      "default": "#E0E0E0"
    },
    {
      "type": "range",
      "id": "star_size",
      "min": 12,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Star size",
      "default": 16
    },
    {
      "type": "header",
      "content": "Review text"
    },
    {
      "type": "range",
      "id": "review_text_size",
      "min": 10,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Review text size",
      "default": 14
    },
    {
      "type": "header",
      "content": "Reviewer info"
    },
    {
      "type": "select",
      "id": "reviewer_position",
      "label": "Reviewer name position",
      "options": [
        { "value": "above", "label": "Above review text" },
        { "value": "below", "label": "Below review text" }
      ],
      "default": "above",
      "info": "Controls whether the reviewer name/badge appears above or below the review quote."
    },
    {
      "type": "select",
      "id": "verified_badge_icon",
      "label": "Verified badge icon style",
      "options": [
        { "value": "badge", "label": "Shield checkmark" },
        { "value": "star",  "label": "Star" }
      ],
      "default": "badge"
    },
    {
      "type": "range",
      "id": "reviewer_info_font_size",
      "min": 8,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Reviewer info font size",
      "default": 12
    },
    {
      "type": "text",
      "id": "verified_badge_text",
      "label": "Verified badge text",
      "default": "Verified Buyer"
    },
    {
      "type": "color",
      "id": "verified_badge_color",
      "label": "Verified badge color",
      "default": "#1D9BF0"
    },
    {
      "type": "range",
      "id": "verified_badge_font_size",
      "min": 8,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Verified badge font size",
      "default": 10
    },
    {
      "type": "header",
      "content": "Product purchased"
    },
    {
      "type": "color",
      "id": "product_bg_color",
      "label": "Product strip background",
      "default": "#f9f9f9"
    },
    {
      "type": "color",
      "id": "product_border_color",
      "label": "Product strip border color",
      "default": "#eeeeee"
    },
    {
      "type": "color",
      "id": "product_price_color",
      "label": "Product price color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "product_title_font_size",
      "min": 8,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Product title font size",
      "default": 12
    },
    {
      "type": "range",
      "id": "product_price_font_size",
      "min": 8,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Product price font size",
      "default": 12
    },
    {
      "type": "range",
      "id": "product_compare_price_font_size",
      "min": 8,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Compare price font size",
      "default": 10
    },
    {
      "type": "range",
      "id": "purchase_date_font_size",
      "min": 8,
      "max": 14,
      "step": 1,
      "unit": "px",
      "label": "Purchase date font size",
      "default": 10
    },
    {
      "type": "text",
      "id": "purchase_date_prefix",
      "label": "Purchase date prefix",
      "default": "Purchased"
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "paragraph",
      "content": "ATTENTION: In the theme editor, pagination dots may duplicate after changing settings. Click Save to resolve. This does NOT affect the published site."
    },
    {
      "type": "checkbox",
      "id": "enable_mask_fade",
      "label": "Enable edge mask fade",
      "default": true,
      "info": "Fades the left and right edges of the slider. Works best with the side preview enabled."
    },
    {
      "type": "select",
      "id": "type",
      "label": "Slider type",
      "options": [
        { "value": "slide", "label": "Classic"  },
        { "value": "loop",  "label": "Infinite" }
      ],
      "default": "loop"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "unit": "sec",
      "label": "Autoplay speed",
      "default": 5,
      "visible_if": "{{ section.settings.autoplay }}"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "label": "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"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "label": "Dots color",
      "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"
    },
    {
      "type": "header",
      "content": "Desktop slider"
    },
    {
      "type": "checkbox",
      "id": "desktop_full_page",
      "label": "Full page width",
      "default": true
    },
    {
      "type": "range",
      "id": "slides_per_page_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "label": "Slides per page (desktop)",
      "default": 3
    },
    {
      "type": "checkbox",
      "id": "slider_desktop",
      "label": "Enable desktop slider",
      "default": true
    },
    {
      "type": "range",
      "id": "per_move_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "label": "Slides to scroll per move",
      "default": 1,
      "visible_if": "{{ section.settings.slider_desktop }}"
    },
    {
      "type": "range",
      "id": "desktop_spacing",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Gap between slides",
      "default": 20,
      "visible_if": "{{ section.settings.slider_desktop }}"
    },
    {
      "type": "range",
      "id": "desktop_side_padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Preview of adjacent slides",
      "default": 30,
      "visible_if": "{{ section.settings.slider_desktop }}"
    },
    {
      "type": "checkbox",
      "id": "desktop_padding_calc",
      "label": "Trim empty preview on first & last slide",
      "default": true,
      "visible_if": "{{ section.settings.slider_desktop }}"
    },
    {
      "type": "select",
      "id": "desktop_dots_position",
      "label": "Dots position (desktop)",
      "options": [
        { "value": "hidden", "label": "Hidden"            },
        { "value": "under",  "label": "Under the slider"  }
      ],
      "default": "hidden"
    },
    {
      "type": "select",
      "id": "desktop_arrows_position",
      "label": "Arrows position (desktop)",
      "options": [
        { "value": "hidden", "label": "Hidden"             },
        { "value": "under",  "label": "Under the slider"   },
        { "value": "sides",  "label": "On sides of slider" }
      ],
      "default": "under"
    },
    {
      "type": "header",
      "content": "Mobile slider"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_mobile_preview",
      "label": "Preview adjacent slides on mobile",
      "default": true,
      "visible_if": "{{ section.settings.slider_mobile }}"
    },
    {
      "type": "range",
      "id": "mobile_side_padding",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Preview px amount",
      "default": 36,
      "info": "Only applies when preview is enabled.",
      "visible_if": "{{ section.settings.enable_mobile_preview == true }}"
    },
    {
      "type": "checkbox",
      "id": "mobile_adaptive_height",
      "label": "Adaptive height (mobile)",
      "default": false,
      "visible_if": "{{ section.settings.slider_mobile }}"
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "label": "Dots position (mobile)",
      "options": [
        { "value": "hidden", "label": "Hidden"            },
        { "value": "under",  "label": "Under the slider"  }
      ],
      "default": "under"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "label": "Arrows position (mobile)",
      "options": [
        { "value": "hidden", "label": "Hidden"             },
        { "value": "under",  "label": "Under the slider"   },
        { "value": "sides",  "label": "On sides of slider" }
      ],
      "default": "under"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 60
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#FFFFFF",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "Replaces Background color when set.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the desktop image is used on mobile.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#2E2A39",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "header",
      "content": "Custom cards color scheme",
      "info": "Applied when Cards color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_cards_colors_background",
      "label": "Cards background color",
      "default": "#FFFFFF",
      "visible_if": "{{ section.settings.cards_color_scheme == 'custom' }}"
    },
    {
      "type": "color_background",
      "id": "custom_cards_gradient_background",
      "label": "Cards gradient background",
      "info": "Replaces Background color when set.",
      "visible_if": "{{ section.settings.cards_color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_cards_colors_text",
      "label": "Cards text color",
      "default": "#2E2A39",
      "visible_if": "{{ section.settings.cards_color_scheme == 'custom' }}"
    }
  ],
  "blocks": [
    {
      "type": "review",
      "name": "Review",
      "settings": [
        {
          "type": "header",
          "content": "Review image"
        },
        {
          "type": "image_picker",
          "id": "review_image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "image_position",
          "label": "Image focal point",
          "options": [
            { "value": "center center", "label": "Center" },
            { "value": "top center",    "label": "Top"    },
            { "value": "bottom center", "label": "Bottom" },
            { "value": "left center",   "label": "Left"   },
            { "value": "right center",  "label": "Right"  }
          ],
          "default": "center center",
          "visible_if": "{{ block.settings.review_image != blank }}"
        },
        {
          "type": "checkbox",
          "id": "wrap_image",
          "label": "Show full image (variable height)",
          "default": false,
          "info": "Displays the entire image instead of cropping to the fixed height.",
          "visible_if": "{{ block.settings.review_image != blank }}"
        },
        {
          "type": "header",
          "content": "Review details"
        },
        {
          "type": "range",
          "id": "rating",
          "min": 1,
          "max": 5,
          "step": 1,
          "label": "Star rating",
          "default": 5
        },
        {
          "type": "textarea",
          "id": "review_text",
          "label": "Review text",
          "default": "This product completely transformed my routine — I couldn't be happier with the results."
        },
        {
          "type": "header",
          "content": "Reviewer"
        },
        {
          "type": "text",
          "id": "reviewer_name",
          "label": "Name",
          "default": "Sarah M."
        },
        {
          "type": "text",
          "id": "reviewer_age",
          "label": "Age / location (optional)",
          "default": "28"
        },
        {
          "type": "checkbox",
          "id": "show_verified_badge",
          "label": "Show verified badge",
          "default": true
        },
        {
          "type": "header",
          "content": "Purchased product"
        },
        {
          "type": "checkbox",
          "id": "show_purchased_product",
          "label": "Show purchased product",
          "default": true
        },
        {
          "type": "product",
          "id": "product_reference",
          "label": "Select product",
          "info": "Auto-fills title, price, and image from your store."
        },
        {
          "type": "header",
          "content": "Manual product (fallback)"
        },
        {
          "type": "image_picker",
          "id": "product_image",
          "label": "Product image",
          "visible_if": "{{ block.settings.show_purchased_product }}"
        },
        {
          "type": "text",
          "id": "product_title",
          "label": "Product title",
          "default": "Product Name",
          "visible_if": "{{ block.settings.show_purchased_product }}"
        },
        {
          "type": "text",
          "id": "product_price",
          "label": "Product price",
          "default": "$29.99",
          "visible_if": "{{ block.settings.show_purchased_product }}"
        },
        {
          "type": "text",
          "id": "product_compare_price",
          "label": "Compare at price",
          "default": "$39.99",
          "visible_if": "{{ block.settings.show_purchased_product }}"
        },
        {
          "type": "checkbox",
          "id": "show_purchase_date",
          "label": "Show purchase date",
          "default": true,
          "visible_if": "{{ block.settings.show_purchased_product }}"
        },
        {
          "type": "text",
          "id": "purchase_date",
          "label": "Purchase date",
          "default": "March 14, 2025",
          "visible_if": "{{ block.settings.show_purchase_date }}"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer reviews",
      "category": "Testimonials",
      "blocks": [
        {
          "type": "review",
          "settings": {
            "rating": 5,
            "review_text": "The product has completely transformed my routine. I'm seeing amazing results and couldn't be happier.",
            "reviewer_name": "Sarah M.",
            "reviewer_age": "28",
            "show_verified_badge": true,
            "show_purchased_product": true,
            "product_title": "Product Name",
            "product_price": "$29.99",
            "product_compare_price": "$39.99",
            "purchase_date": "March 14, 2025"
          }
        },
        {
          "type": "review",
          "settings": {
            "rating": 5,
            "review_text": "I was skeptical at first, but after a month I'm a true believer. Outstanding quality!",
            "reviewer_name": "Michael R.",
            "reviewer_age": "35",
            "show_verified_badge": true,
            "show_purchased_product": true,
            "product_title": "Product Name",
            "product_price": "$29.99",
            "product_compare_price": "$39.99",
            "purchase_date": "February 28, 2025"
          }
        },
        {
          "type": "review",
          "settings": {
            "rating": 4,
            "review_text": "Great product that delivers on its promises. Would definitely recommend to friends and family.",
            "reviewer_name": "Jessica L.",
            "reviewer_age": "42",
            "show_verified_badge": true,
            "show_purchased_product": true,
            "product_title": "Product Name",
            "product_price": "$29.99",
            "product_compare_price": "$39.99",
            "purchase_date": "January 5, 2025"
          }
        }
      ]
    }
  ]
}
{% endschema %}