{% 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,700;1,6..96,400;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 -%}

/* ─── 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 ─── */
.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 %}

/* ─── Italic / em Heading Styles ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__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 !important;
    font-style: normal !important;
    text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
    text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
  {% endif %}
}

/* ─── Gradient on bold text ─── */
{% if section.settings.enable_gradient %}
  #HeroBenefits-{{ section.id }} .hero-benefits__heading strong {
    background: {{ section.settings.title_gradient_background }};
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
  }
{% endif %}

/* ─── Hero Benefits Layout ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#HeroBenefits-{{ section.id }} .hero-benefits__heading-wrap {
  width: 100%;
  text-align: {{ section.settings.heading_alignment }};
  margin-bottom: {{ section.settings.heading_margin_bottom }}px;
}

#HeroBenefits-{{ section.id }} .hero-benefits__heading {
  margin: 0;
}

/* Mobile heading size — overrides the desktop h0/h1/h2 class below 750px */
@media screen and (max-width: 749px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__heading--mobile-h0 {
    font-size: calc(var(--font-heading-scale) * 3.25rem);
  }
  #HeroBenefits-{{ section.id }} .hero-benefits__heading--mobile-h1 {
    font-size: calc(var(--font-heading-scale) * 2.25rem);
  }
  #HeroBenefits-{{ section.id }} .hero-benefits__heading--mobile-h2 {
    font-size: calc(var(--font-heading-scale) * 2rem);
  }
}

#HeroBenefits-{{ section.id }} .hero-benefits__subtext {
  margin-bottom: {{ section.settings.subtext_margin_bottom }}px;
  text-align: {{ section.settings.heading_alignment }};
  color: rgb(var(--color-foreground));
  opacity: 0.75;
}

#HeroBenefits-{{ section.id }} .hero-benefits__content-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: {{ section.settings.content_gap_mobile }}px;
}

@media screen and (min-width: 768px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__content-wrap {
    flex-direction: {% if section.settings.image_desktop_side == 'right' %}row-reverse{% else %}row{% endif %};
    gap: {{ section.settings.content_gap_desktop }}px;
    align-items: stretch;
  }
}

/* ─── Image / Icon Grid Panel ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__image-panel {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__image-panel {
    width: {{ section.settings.desktop_image_width }}%;
    {% if section.settings.hide_image_desktop %}display: none;{% endif %}
  }
}

#HeroBenefits-{{ section.id }} .hero-benefits__main-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: {{ section.settings.mobile_image_fit }};
  max-height: 65vh;
  border-radius: {{ section.settings.hero_image_border_radius }}px;
  {% if section.settings.hero_image_border_width > 0 %}
    border: {{ section.settings.hero_image_border_width }}px solid {{ section.settings.hero_image_border_color }};
  {% endif %}
  {% if section.settings.enable_image_fade %}
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) {{ 100 | minus: section.settings.image_fade_height }}%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) {{ 100 | minus: section.settings.image_fade_height }}%, rgba(0,0,0,0) 100%);
  {% endif %}
}

@media screen and (min-width: 768px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__main-image {
    object-fit: {{ section.settings.desktop_image_fit }};
  }
  #HeroBenefits-{{ section.id }} .hero-benefits__main-image--mobile { display: none; }
  #HeroBenefits-{{ section.id }} .hero-benefits__main-image--desktop { display: block; }
}
@media screen and (max-width: 767px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__main-image--desktop { display: none; }
  #HeroBenefits-{{ section.id }} .hero-benefits__main-image--mobile { display: block; }
}

#HeroBenefits-{{ section.id }} .hero-benefits__image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(var(--color-foreground), 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Benefit Icons Grid ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__icons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  position: absolute;
  width: 100%;
  gap: {{ section.settings.icon_gap_vertical_mobile }}px {{ section.settings.icon_gap_horizontal_mobile }}px;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__icons-grid {
    gap: {{ section.settings.icon_gap_vertical_desktop }}px {{ section.settings.icon_gap_horizontal_desktop }}px;
  }
  #HeroBenefits-{{ section.id }} .hero-benefits__icon-item:nth-child(odd)  { margin-right: {{ section.settings.icon_offset_desktop }}%; }
  #HeroBenefits-{{ section.id }} .hero-benefits__icon-item:nth-child(even) { margin-left: {{ section.settings.icon_offset_desktop }}%; }
}

#HeroBenefits-{{ section.id }} .hero-benefits__icon-item:nth-child(even) { margin-left: {{ section.settings.icon_offset_mobile }}%; }
#HeroBenefits-{{ section.id }} .hero-benefits__icon-item:nth-child(odd)  { margin-right: {{ section.settings.icon_offset_mobile }}%; }

#HeroBenefits-{{ section.id }} .hero-benefits__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  text-align: center;
  cursor: pointer;
  gap: {{ section.settings.icon_label_gap }}px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#HeroBenefits-{{ section.id }} .hero-benefits__icon-item p {
  margin: 0;
  font-size: {{ section.settings.icon_label_font_size }}px;
  font-weight: {{ section.settings.icon_label_font_weight }};
  color: {{ section.settings.icon_label_inactive_color }};
  transition: color 0.3s ease, font-weight 0.3s ease;
}

#HeroBenefits-{{ section.id }} .hero-benefits__icon-item.is-active p {
  color: {{ section.settings.icon_label_active_color }};
  font-weight: {{ section.settings.icon_label_active_weight }};
}

/* ─── Individual Benefit Icon ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__benefit-icon {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: {{ section.settings.icon_inactive_opacity | divided_by: 100.0 }};
  {% if section.settings.icon_circular %}
    width: {{ section.settings.icon_circle_size }}px;
    height: {{ section.settings.icon_circle_size }}px;
    border-radius: 50%;
  {% else %}
    width: {{ section.settings.icon_width }}px;
    height: {{ section.settings.icon_height }}px;
    border-radius: {{ section.settings.icon_border_radius }}px;
  {% endif %}
  object-fit: cover;
  flex-shrink: 0;
  padding: {{ section.settings.icon_padding }}px;
  box-sizing: content-box;
  {% if section.settings.icon_show_background %}background: {{ section.settings.icon_bg_inactive }};{% else %}background: transparent;{% endif %}
  {% if section.settings.icon_show_border %}border: {{ section.settings.icon_border_width }}px solid {{ section.settings.icon_border_inactive }};{% else %}border: none;{% endif %}
}

#HeroBenefits-{{ section.id }} .hero-benefits__benefit-icon.is-active {
  opacity: {{ section.settings.icon_active_opacity | divided_by: 100.0 }};
  transform: scale({{ section.settings.icon_active_scale | divided_by: 100.0 }});
  {% if section.settings.icon_show_background %}background: {{ section.settings.icon_bg_active }};{% endif %}
  {% if section.settings.icon_show_border %}border-color: {{ section.settings.icon_border_active }};{% endif %}
}

/* Material icon as benefit icon */
#HeroBenefits-{{ section.id }} .material-symbols-outlined.hero-benefits__benefit-icon {
  font-size: {{ section.settings.google_icon_size }}px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: {{ section.settings.google_icon_inactive_color }};
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' {{ section.settings.google_icon_size }};
  max-width: none;
  overflow: visible;
}

#HeroBenefits-{{ section.id }} .material-symbols-outlined.hero-benefits__benefit-icon.is-active {
  color: {{ section.settings.google_icon_active_color }};
}

/* ─── Content Display Panel ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__display-panel {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: {{ section.settings.display_gap }}px;
  color: rgb(var(--color-foreground));
  text-align: {{ section.settings.display_text_align }};
  padding: {{ section.settings.display_padding_vertical_mobile }}px {{ section.settings.display_padding_horizontal_mobile }}px;
  {% if section.settings.display_background != blank %}background: {{ section.settings.display_background }};{% endif %}
  {% if section.settings.display_border_radius > 0 %}border-radius: {{ section.settings.display_border_radius }}px;{% endif %}
  {% if section.settings.display_border_width > 0 %}border: {{ section.settings.display_border_width }}px solid {{ section.settings.display_border_color }};{% endif %}
}

@media screen and (min-width: 768px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__display-panel {
    padding: {{ section.settings.display_padding_vertical_desktop }}px {{ section.settings.display_padding_horizontal_desktop }}px;
  }
}

/* Timer bar */
#HeroBenefits-{{ section.id }} .hero-benefits__timer-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: {{ section.settings.timer_bar_color }};
  width: 0%;
  z-index: 10;
  transition: none;
}
#HeroBenefits-{{ section.id }} .hero-benefits__timer-bar.is-animating {
  transition: width {{ section.settings.timer_duration }}s linear;
  width: 100% !important;
}

/* Display header (icon + title row) */
#HeroBenefits-{{ section.id }} .hero-benefits__display-header {
  {% if section.settings.hide_display_header %}display: none;{% else %}
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: {% if section.settings.display_header_align == 'left' %}flex-start{% elsif section.settings.display_header_align == 'right' %}flex-end{% else %}center{% endif %};
  {% endif %}
  order: 2;
}

#HeroBenefits-{{ section.id }} .hero-benefits__display-title {
  margin: 0;
  color: {{ section.settings.display_title_color }};
  font-size: {{ section.settings.display_title_size_mobile }}px;
  font-weight: {{ section.settings.display_title_weight }};
  text-transform: {{ section.settings.display_title_transform }};
  text-align: {{ section.settings.display_title_align }};
  transition: all 0.3s ease;
}

@media screen and (min-width: 750px) {
  #HeroBenefits-{{ section.id }} .hero-benefits__display-title {
    font-size: {{ section.settings.display_title_size_desktop }}px !important;
  }
}

#HeroBenefits-{{ section.id }} .hero-benefits__display-content-icon {
  {% if section.settings.hide_display_icon %}display: none;{% else %}display: flex;{% endif %}
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  {% if section.settings.icon_circular %}
    width: {{ section.settings.icon_circle_size }}px;
    height: {{ section.settings.icon_circle_size }}px;
    border-radius: 50%;
  {% else %}
    width: {{ section.settings.display_icon_size }}px;
    height: {{ section.settings.display_icon_size }}px;
    border-radius: {{ section.settings.icon_border_radius }}px;
  {% endif %}
  {% if section.settings.display_icon_show_background %}background: {{ section.settings.display_icon_bg }};{% else %}background: transparent;{% endif %}
  {% if section.settings.display_icon_show_border %}border: {{ section.settings.icon_border_width }}px solid {{ section.settings.display_icon_border_color }};{% else %}border: none;{% endif %}
  padding: {{ section.settings.icon_padding }}px;
  box-sizing: content-box;
  color: {{ section.settings.display_icon_color }};
  object-fit: cover;
}

#HeroBenefits-{{ section.id }} .hero-benefits__display-content-icon.material-symbols-outlined {
  font-size: {{ section.settings.google_icon_size }}px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' {{ section.settings.google_icon_size }};
  max-width: none; overflow: visible;
}

#HeroBenefits-{{ section.id }} .hero-benefits__display-text {
  order: 4;
  margin: 0;
  line-height: 1.6;
  transition: all 0.3s ease;
}

/* ─── Block Image ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__block-image-wrap {
  order: 5;
  display: block;
  transition: all 0.3s ease;
  width: 100%;
}

#HeroBenefits-{{ section.id }} .hero-benefits__block-image {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* ─── Review Box ─── */
#HeroBenefits-{{ section.id }} .hero-benefits__review-box {
  order: 6;
  display: flex;
  flex-direction: column-reverse;
  background: {{ section.settings.review_bg }};
  border: {{ section.settings.review_border_width }}px solid {{ section.settings.review_border_color }};
  border-radius: {{ section.settings.review_border_radius }}px;
  padding: {{ section.settings.review_padding_top }}px {{ section.settings.review_padding_right }}px {{ section.settings.review_padding_bottom }}px {{ section.settings.review_padding_left }}px;
  margin-top: {{ section.settings.review_margin_top }}px;
  text-align: {{ section.settings.review_text_align }};
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

#HeroBenefits-{{ section.id }} .hero-benefits__review-text {
  margin: 0 0 10px;
  font-size: {{ section.settings.review_text_size }}px;
  font-weight: {{ section.settings.review_text_weight }};
  color: {{ section.settings.review_text_color }};
  line-height: 1.5;
  text-align: {{ section.settings.review_text_align }};
}

#HeroBenefits-{{ section.id }} .hero-benefits__review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: {% if section.settings.review_text_align == 'center' %}center{% elsif section.settings.review_text_align == 'right' %}flex-end{% else %}flex-start{% endif %};
}

#HeroBenefits-{{ section.id }} .hero-benefits__stars {
  display: flex;
  gap: 2px;
  color: {{ section.settings.star_color }};
  font-size: {{ section.settings.star_size }}px;
}

#HeroBenefits-{{ section.id }} .hero-benefits__reviewer-name {
  margin: 0;
  font-size: {{ section.settings.reviewer_name_size }}px;
  color: {{ section.settings.reviewer_name_color }};
  padding: 0 10px 0 0;
  border-right: 1px solid {{ section.settings.reviewer_name_color }};
}

#HeroBenefits-{{ section.id }} .hero-benefits__verified-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: {{ section.settings.verified_text_size }}px;
  color: {{ section.settings.verified_text_color }};
}

{%- endstyle -%}

<div
  id="HeroBenefits-{{ section.id }}"
  class="hero-benefits animate-section animate--hidden color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping {{ 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 %}

  <div class="page-width section-{{ section.id }}-padding">
    <div class="hero-benefits__inner">

      {%- liquid
        assign animate_index = 0
      -%}

      {%- unless section.settings.title == blank -%}
        {%- if section.settings.heading_two_lines and section.settings.heading_line_two != blank -%}
          {%- assign heading_line_two_with_br = '<br>' | append: section.settings.heading_line_two -%}
          {%- assign heading_output = section.settings.title
            | replace: section.settings.heading_line_two, heading_line_two_with_br
          -%}
        {%- else -%}
          {%- assign heading_output = section.settings.title -%}
        {%- endif -%}
        <div class="hero-benefits__heading-wrap animate-item animate-item--child index-{{ animate_index }}">
          <h2
            class="hero-benefits__heading title-with-highlight {{ section.settings.heading_size_desktop }} hero-benefits__heading--mobile-{{ section.settings.heading_size_mobile }}"
            style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};"
          >
            {{ heading_output }}
          </h2>
        </div>
        {%- assign animate_index = animate_index | plus: 1 -%}
      {%- endunless -%}

      {%- if section.settings.subtext != blank -%}
        <div class="hero-benefits__subtext rte animate-item animate-item--child index-{{ animate_index }}">
          {{ section.settings.subtext }}
        </div>
        {%- assign animate_index = animate_index | plus: 1 -%}
      {%- endif -%}

      <div class="hero-benefits__content-wrap animate-item animate-item--child index-{{ animate_index }}">

        <div class="hero-benefits__image-panel">

          {% if section.settings.mobile_image != blank %}
            <img
              class="hero-benefits__main-image hero-benefits__main-image--mobile"
              src="{{ section.settings.mobile_image | image_url }}"
              alt="{{ section.settings.mobile_image.alt | escape }}"
              width="{{ section.settings.mobile_image.width }}"
              height="{{ section.settings.mobile_image.height }}"
              loading="lazy"
            >
          {% else %}
            <div class="hero-benefits__main-image hero-benefits__main-image--mobile hero-benefits__image-placeholder">
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {% endif %}

          {% if section.settings.desktop_image != blank %}
            <img
              class="hero-benefits__main-image hero-benefits__main-image--desktop"
              src="{{ section.settings.desktop_image | image_url }}"
              alt="{{ section.settings.desktop_image.alt | escape }}"
              width="{{ section.settings.desktop_image.width }}"
              height="{{ section.settings.desktop_image.height }}"
              loading="lazy"
            >
          {% else %}
            <div class="hero-benefits__main-image hero-benefits__main-image--desktop hero-benefits__image-placeholder">
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {% endif %}

          <div class="hero-benefits__icons-grid">
            {%- for block in section.blocks -%}
              {%- if block.type == 'benefit_item' -%}
                <div
                  class="hero-benefits__icon-item{% if forloop.first %} is-active{% endif %}"
                  data-benefit-index="{{ forloop.index0 }}"
                  {{ block.shopify_attributes }}
                >
                  {% if block.settings.icon_type == 'google' %}
                    <span
                      class="hero-benefits__benefit-icon material-symbols-outlined{% if forloop.first %} is-active{% endif %}"
                      data-index="{{ forloop.index0 }}"
                    >{{ block.settings.icon_google_name }}</span>
                  {% elsif block.settings.icon_image != blank %}
                    <img
                      class="hero-benefits__benefit-icon{% if forloop.first %} is-active{% endif %}"
                      src="{{ block.settings.icon_image | image_url }}"
                      alt="{{ block.settings.label | escape }}"
                      width="80" height="80"
                      loading="lazy"
                      data-index="{{ forloop.index0 }}"
                    >
                  {% else %}
                    <div class="hero-benefits__benefit-icon{% if forloop.first %} is-active{% endif %}" data-index="{{ forloop.index0 }}">
                      <span class="hero-benefits__benefit-icon material-symbols-outlined{% if forloop.first %} is-active{% endif %}">
                        {{ block.settings.icon_google_name | default: 'star' }}
                      </span>
                    </div>
                  {% endif %}
                  <p>{{ block.settings.label }}</p>
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>
        </div>{%- comment -%} /.hero-benefits__image-panel {%- endcomment -%}

        <div class="hero-benefits__display-panel">
          <div class="hero-benefits__timer-bar" id="HeroBenefitsTimer-{{ section.id }}"></div>

          {%- assign first_block = section.blocks | where: 'type', 'benefit_item' | first -%}

          <div class="hero-benefits__display-header">
            {% if first_block.settings.icon_type == 'google' %}
              <span
                id="HeroBenefitsIcon-{{ section.id }}"
                class="hero-benefits__display-content-icon material-symbols-outlined"
              >{{ first_block.settings.icon_google_name }}</span>
            {% elsif first_block.settings.icon_image != blank %}
              <img
                id="HeroBenefitsIcon-{{ section.id }}"
                class="hero-benefits__display-content-icon"
                src="{{ first_block.settings.icon_image | image_url }}"
                alt="{{ first_block.settings.label | escape }}"
              >
            {% else %}
              <span
                id="HeroBenefitsIcon-{{ section.id }}"
                class="hero-benefits__display-content-icon material-symbols-outlined"
              >{{ first_block.settings.icon_google_name | default: 'star' }}</span>
            {% endif %}

            <h3
              id="HeroBenefitsTitle-{{ section.id }}"
              class="hero-benefits__display-title"
            >{{ first_block.settings.label }}</h3>
          </div>

          <p id="HeroBenefitsText-{{ section.id }}" class="hero-benefits__display-text">
            {{ first_block.settings.description }}
          </p>

          {% if first_block.settings.block_image != blank %}
            <div
              class="hero-benefits__block-image-wrap"
              id="HeroBenefitsBlockImageWrap-{{ section.id }}"
              style="{% if first_block.settings.block_image_position == 'above_title' %}order: 1;{% elsif first_block.settings.block_image_position == 'under_title' %}order: 3;{% elsif first_block.settings.block_image_position == 'above_review' %}order: 5;{% else %}order: 7;{% endif %}"
            >
              <img
                id="HeroBenefitsBlockImage-{{ section.id }}"
                class="hero-benefits__block-image"
                src="{{ first_block.settings.block_image | image_url }}"
                alt="{{ first_block.settings.label | escape }}"
                style="aspect-ratio: {{ first_block.settings.block_image_aspect }}; border-radius: {{ first_block.settings.block_image_border_radius }}px;"
              >
            </div>
          {% else %}
            <div
              class="hero-benefits__block-image-wrap"
              id="HeroBenefitsBlockImageWrap-{{ section.id }}"
              style="display: none;"
            >
              <img id="HeroBenefitsBlockImage-{{ section.id }}" class="hero-benefits__block-image" src="" alt="">
            </div>
          {% endif %}

          <div
            class="hero-benefits__review-box"
            id="HeroBenefitsReview-{{ section.id }}"
            {% if section.settings.hide_all_reviews or first_block.settings.hide_review %}style="display: none;"{% endif %}
          >
            <p class="hero-benefits__review-text" id="HeroBenefitsReviewText-{{ section.id }}">
              {{ first_block.settings.review_text }}
            </p>
            <div class="hero-benefits__review-meta">
              <div class="hero-benefits__stars" id="HeroBenefitsStars-{{ section.id }}">
                {%- for i in (1..5) -%}
                  <span>{% if i <= first_block.settings.star_rating %}★{% else %}☆{% endif %}</span>
                {%- endfor -%}
              </div>
              <h4 class="hero-benefits__reviewer-name" id="HeroBenefitsReviewerName-{{ section.id }}">
                {{ first_block.settings.reviewer_name }}
              </h4>
              <div class="hero-benefits__verified-badge">
                <span class="material-symbols-outlined" style="font-size: {{ section.settings.verified_text_size }}px; color: {{ section.settings.verified_badge_color }}; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; line-height: 1; flex-shrink: 0;">verified</span>
                <span>{{ section.settings.verified_text | default: 'Verified' }}</span>
              </div>
            </div>
          </div>
        </div>{%- comment -%} /.hero-benefits__display-panel {%- endcomment -%}

      </div>{%- comment -%} /.hero-benefits__content-wrap {%- endcomment -%}
    </div>{%- comment -%} /.hero-benefits__inner {%- endcomment -%}
  </div>{%- comment -%} /.page-width {%- endcomment -%}
</div>{%- comment -%} /#HeroBenefits {%- endcomment -%}

<div id="HeroBenefitsData-{{ section.id }}" style="display:none;" aria-hidden="true">
  {%- for block in section.blocks -%}
    {%- if block.type == 'benefit_item' -%}
      <div
        data-index="{{ forloop.index0 }}"
        data-icon-type="{{ block.settings.icon_type }}"
        data-icon-src="{% if block.settings.icon_image != blank %}{{ block.settings.icon_image | image_url }}{% endif %}"
        data-icon-google="{{ block.settings.icon_google_name | escape }}"
        data-reviewer-name="{{ block.settings.reviewer_name | escape }}"
        data-star-rating="{{ block.settings.star_rating }}"
        data-review="{{ block.settings.review_text | escape }}"
        data-hide-review="{{ block.settings.hide_review }}"
        data-block-image="{% if block.settings.block_image != blank %}{{ block.settings.block_image | image_url }}{% endif %}"
        data-block-image-aspect="{{ block.settings.block_image_aspect }}"
        data-block-image-radius="{{ block.settings.block_image_border_radius }}"
        data-block-image-position="{{ block.settings.block_image_position }}"
      >
        <span data-label>{{ block.settings.label }}</span>
        <span data-description>{{ block.settings.description }}</span>
      </div>
    {%- endif -%}
  {%- endfor -%}
</div>

<script>
(function() {
  const sectionId = {{ section.id | json }};

  function initHeroBenefits() {
    const timerDisabled = {{ section.settings.disable_timer | json }};
    const timerDuration = {{ section.settings.timer_duration }} * 1000;

    const root        = document.getElementById('HeroBenefits-' + sectionId);
    if (!root) return;

    const timerBar    = document.getElementById('HeroBenefitsTimer-' + sectionId);
    const titleEl     = document.getElementById('HeroBenefitsTitle-' + sectionId);
    const textEl      = document.getElementById('HeroBenefitsText-' + sectionId);
    const iconEl      = document.getElementById('HeroBenefitsIcon-' + sectionId);
    const reviewBox   = document.getElementById('HeroBenefitsReview-' + sectionId);
    const reviewText  = document.getElementById('HeroBenefitsReviewText-' + sectionId);
    const reviewerName= document.getElementById('HeroBenefitsReviewerName-' + sectionId);
    const starsEl     = document.getElementById('HeroBenefitsStars-' + sectionId);
    const blockImgWrap= document.getElementById('HeroBenefitsBlockImageWrap-' + sectionId);
    const blockImg    = document.getElementById('HeroBenefitsBlockImage-' + sectionId);

    const iconItems   = root.querySelectorAll('.hero-benefits__icon-item');
    const benefitIcons= root.querySelectorAll('.hero-benefits__benefit-icon');
    const dataStore   = document.getElementById('HeroBenefitsData-' + sectionId);

    const hideAllReviews = {{ section.settings.hide_all_reviews | json }};
    const displayTitleSizeMobile  = {{ section.settings.display_title_size_mobile }};
    const displayTitleSizeDesktop = {{ section.settings.display_title_size_desktop }};

    let currentIndex = 0;
    let autoTimer    = null;
    let userActive   = false;

    function getData(index) {
      return dataStore ? dataStore.querySelector('[data-index="' + index + '"]') : null;
    }

    function buildStars(rating) {
      starsEl.innerHTML = '';
      for (let i = 0; i < 5; i++) {
        const s = document.createElement('span');
        s.textContent = i < rating ? '★' : '☆';
        starsEl.appendChild(s);
      }
    }

    function updateBlockImage(data) {
      if (!blockImgWrap || !blockImg) return;
      const src      = data.getAttribute('data-block-image');
      const aspect   = data.getAttribute('data-block-image-aspect');
      const radius   = data.getAttribute('data-block-image-radius');
      const position = data.getAttribute('data-block-image-position');

      if (src && src !== '' && !src.includes('no-image')) {
        blockImg.src = src;
        blockImg.style.aspectRatio = aspect || '16/9';
        blockImg.style.borderRadius = (radius || '0') + 'px';

        const orderMap = { above_title: '1', under_title: '3', above_review: '5', under_review: '7' };
        blockImgWrap.style.order = orderMap[position] || '5';
        blockImgWrap.style.display = 'block';
      } else {
        blockImgWrap.style.display = 'none';
      }
    }

    function updateIcon(iconType, iconSrc, iconGoogle) {
      if (!iconEl) return;
      if (iconType === 'google') {
        if (!iconEl.classList.contains('material-symbols-outlined')) {
          iconEl.className = iconEl.className.replace(/[^\s]*display-content-icon[^\s]*/g, '').trim();
          iconEl.className += ' hero-benefits__display-content-icon material-symbols-outlined';
        }
        iconEl.textContent = iconGoogle;
      } else {
        if (iconEl.tagName !== 'IMG') {
          const img = document.createElement('img');
          img.id = 'HeroBenefitsIcon-' + sectionId;
          img.className = 'hero-benefits__display-content-icon';
          iconEl.replaceWith(img);
        }
        document.getElementById('HeroBenefitsIcon-' + sectionId).src = iconSrc;
      }
    }

    function setActive(index) {
      if (autoTimer) { clearTimeout(autoTimer); autoTimer = null; }

      timerBar.classList.remove('is-animating');
      timerBar.style.width = '0%';
      void timerBar.offsetWidth;

      iconItems.forEach(function(item, i) {
        item.classList.toggle('is-active', i === index);
      });
      benefitIcons.forEach(function(ic, i) {
        ic.classList.toggle('is-active', i === index);
      });

      const data = getData(index);
      if (!data) return;

      const labelEl = data.querySelector('[data-label]');
      const descEl  = data.querySelector('[data-description]');

      if (titleEl && labelEl)  titleEl.textContent = labelEl.textContent;
      if (textEl  && descEl)   textEl.textContent  = descEl.textContent;

      if (titleEl) {
        const mobile = window.innerWidth < 750;
        titleEl.style.fontSize = (mobile ? displayTitleSizeMobile : displayTitleSizeDesktop) + 'px';
      }

      updateIcon(
        data.getAttribute('data-icon-type'),
        data.getAttribute('data-icon-src'),
        data.getAttribute('data-icon-google')
      );

      const hideReview = data.getAttribute('data-hide-review') === 'true';
      if (reviewBox) reviewBox.style.display = (hideAllReviews || hideReview) ? 'none' : 'flex';
      if (reviewText)   reviewText.textContent   = data.getAttribute('data-review');
      if (reviewerName) reviewerName.textContent = data.getAttribute('data-reviewer-name');
      buildStars(parseInt(data.getAttribute('data-star-rating')) || 5);

      updateBlockImage(data);

      currentIndex = index;

      if (!timerDisabled) {
        setTimeout(function() { timerBar.classList.add('is-animating'); }, 50);
        if (!userActive) {
          autoTimer = setTimeout(function() {
            setActive((currentIndex + 1) % iconItems.length);
          }, timerDuration);
        }
      }
    }

    iconItems.forEach(function(item) {
      item.addEventListener('click', function() {
        userActive = true;
        const idx = parseInt(item.getAttribute('data-benefit-index'));
        setActive(idx);
        if (!timerDisabled) {
          setTimeout(function() {
            userActive = false;
            autoTimer = setTimeout(function() {
              setActive((currentIndex + 1) % iconItems.length);
            }, timerDuration);
          }, 2000);
        }
      });
    });

    let resizeTimer;
    window.addEventListener('resize', function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        if (titleEl) {
          titleEl.style.fontSize = (window.innerWidth < 750 ? displayTitleSizeMobile : displayTitleSizeDesktop) + 'px';
        }
      }, 100);
    });

    setActive(0);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initHeroBenefits);
  } else {
    initHeroBenefits();
  }

  document.addEventListener('shopify:section:load', function(e) {
    if (e.detail.sectionId === sectionId) {
      initHeroBenefits();
    }
  });
})();
</script>

{% schema %}
{
  "name": "Hero benefits",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "header",
      "content": "Section ID"
    },
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Show section ID copy button",
      "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": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "Why choose <strong>our formula</strong>",
      "info": "Bold words to highlight them. Italic words can be styled below."
    },
    {
      "type": "checkbox",
      "id": "heading_two_lines",
      "label": "Split heading onto two lines",
      "default": false,
      "info": "Breaks the heading at the exact word(s) you specify below."
    },
    {
      "type": "text",
      "id": "heading_line_two",
      "label": "Start of second line",
      "info": "Type the plain text of the word or phrase where the line break should begin. The break will be inserted before that text, preserving any bold or italic styling. Note: the phrase must not straddle a bold/italic boundary.",
      "visible_if": "{{ section.settings.heading_two_lines == true }}"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Highlight color",
      "default": "#6D388B"
    },
    {
      "type": "select",
      "id": "heading_size_desktop",
      "label": "Heading size — desktop",
      "options": [
        { "value": "h0", "label": "Large" },
        { "value": "h1", "label": "Medium" },
        { "value": "h2", "label": "Small" }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_size_mobile",
      "label": "Heading size — mobile",
      "options": [
        { "value": "h0", "label": "Large" },
        { "value": "h1", "label": "Medium" },
        { "value": "h2", "label": "Small" }
      ],
      "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": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient on bold text",
      "default": false
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient (bold text)",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)"
    },
    {
      "type": "range",
      "id": "heading_margin_bottom",
      "label": "Heading margin bottom",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "default": 16
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Controls how italic text (created with *text*) appears in the heading"
    },
    {
      "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": "#6D388B",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "label": "Underline thickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "default": 3
    },
    {
      "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" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "Browse fonts at https://fonts.google.com/ e.g. 'Playfair Display'"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic 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)" }
      ],
      "default": "inherit"
    },
    {
      "type": "header",
      "content": "Subtext"
    },
    {
      "type": "richtext",
      "id": "subtext",
      "label": "Subtext",
      "default": "<p>Tap each benefit to learn more</p>"
    },
    {
      "type": "range",
      "id": "subtext_margin_bottom",
      "label": "Subtext margin bottom",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 28
    },
    {
      "type": "header",
      "content": "Hero Images"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile hero image"
    },
    {
      "type": "select",
      "id": "mobile_image_fit",
      "label": "Mobile image fit",
      "options": [
        { "value": "cover", "label": "Cover" },
        { "value": "contain", "label": "Contain" }
      ],
      "default": "contain"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop hero image"
    },
    {
      "type": "select",
      "id": "desktop_image_fit",
      "label": "Desktop image fit",
      "options": [
        { "value": "cover", "label": "Cover" },
        { "value": "contain", "label": "Contain" }
      ],
      "default": "contain"
    },
    {
      "type": "range",
      "id": "desktop_image_width",
      "label": "Desktop image column width",
      "min": 30,
      "max": 70,
      "step": 5,
      "unit": "%",
      "default": 50
    },
    {
      "type": "select",
      "id": "image_desktop_side",
      "label": "Image side (desktop)",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "checkbox",
      "id": "hide_image_desktop",
      "label": "Hide image on desktop",
      "default": false
    },
    {
      "type": "header",
      "content": "Hero Image Styling"
    },
    {
      "type": "range",
      "id": "hero_image_border_radius",
      "label": "Border radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "hero_image_border_width",
      "label": "Border width",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "color",
      "id": "hero_image_border_color",
      "label": "Border color",
      "default": "#1a3b3b"
    },
    {
      "type": "checkbox",
      "id": "enable_image_fade",
      "label": "Enable bottom fade effect",
      "default": true
    },
    {
      "type": "range",
      "id": "image_fade_height",
      "label": "Fade height",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 45
    },
    {
      "type": "header",
      "content": "Benefit Icons — Grid"
    },
    {
      "type": "range",
      "id": "icon_gap_vertical_mobile",
      "label": "Vertical gap (mobile)",
      "min": 0,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 65
    },
    {
      "type": "range",
      "id": "icon_gap_horizontal_mobile",
      "label": "Horizontal gap (mobile)",
      "min": 0,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 30
    },
    {
      "type": "range",
      "id": "icon_gap_vertical_desktop",
      "label": "Vertical gap (desktop)",
      "min": 0,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "icon_gap_horizontal_desktop",
      "label": "Horizontal gap (desktop)",
      "min": 0,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "icon_offset_mobile",
      "label": "Stagger offset (mobile)",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "%",
      "default": 40
    },
    {
      "type": "range",
      "id": "icon_offset_desktop",
      "label": "Stagger offset (desktop)",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "%",
      "default": 35
    },
    {
      "type": "header",
      "content": "Benefit Icons — Shape & Size"
    },
    {
      "type": "checkbox",
      "id": "icon_circular",
      "label": "Circular icons",
      "default": true
    },
    {
      "type": "range",
      "id": "icon_circle_size",
      "label": "Circle size",
      "min": 40,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 50,
      "info": "Controls size when circular mode is on"
    },
    {
      "type": "range",
      "id": "icon_border_radius",
      "label": "Border radius (non-circular)",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "icon_width",
      "label": "Icon width (non-circular)",
      "min": 40,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 80
    },
    {
      "type": "range",
      "id": "icon_height",
      "label": "Icon height (non-circular)",
      "min": 40,
      "max": 200,
      "step": 5,
      "unit": "px",
      "default": 80
    },
    {
      "type": "range",
      "id": "icon_active_scale",
      "label": "Active icon scale (%)",
      "min": 100,
      "max": 200,
      "step": 5,
      "unit": "%",
      "default": 110,
      "info": "Scale of active icon. 100 = no scale, 150 = 1.5x size"
    },
    {
      "type": "header",
      "content": "Benefit Icons — Opacity"
    },
    {
      "type": "range",
      "id": "icon_active_opacity",
      "label": "Active opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "icon_inactive_opacity",
      "label": "Inactive opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 70
    },
    {
      "type": "header",
      "content": "Benefit Icons — Background"
    },
    {
      "type": "checkbox",
      "id": "icon_show_background",
      "label": "Show background",
      "default": true
    },
    {
      "type": "color",
      "id": "icon_bg_inactive",
      "label": "Background (inactive)",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "icon_bg_active",
      "label": "Background (active)",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "icon_padding",
      "label": "Icon padding",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "default": 4
    },
    {
      "type": "header",
      "content": "Benefit Icons — Border"
    },
    {
      "type": "checkbox",
      "id": "icon_show_border",
      "label": "Show border",
      "default": true
    },
    {
      "type": "range",
      "id": "icon_border_width",
      "label": "Border width",
      "min": 1,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 2
    },
    {
      "type": "color",
      "id": "icon_border_inactive",
      "label": "Border color (inactive)",
      "default": "#c9c9c9"
    },
    {
      "type": "color",
      "id": "icon_border_active",
      "label": "Border color (active)",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Benefit Icons — Labels"
    },
    {
      "type": "color",
      "id": "icon_label_inactive_color",
      "label": "Label color (inactive)",
      "default": "#1a3b3b"
    },
    {
      "type": "color",
      "id": "icon_label_active_color",
      "label": "Label color (active)",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "icon_label_font_size",
      "label": "Label font size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 13
    },
    {
      "type": "select",
      "id": "icon_label_font_weight",
      "label": "Label weight (inactive)",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "500"
    },
    {
      "type": "select",
      "id": "icon_label_active_weight",
      "label": "Label weight (active)",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "700"
    },
    {
      "type": "range",
      "id": "icon_label_gap",
      "label": "Gap between icon and label",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "header",
      "content": "Google Material Icons"
    },
    {
      "type": "range",
      "id": "google_icon_size",
      "label": "Icon size",
      "min": 24,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 36
    },
    {
      "type": "color",
      "id": "google_icon_inactive_color",
      "label": "Color (inactive)",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "google_icon_active_color",
      "label": "Color (active)",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Content Gap"
    },
    {
      "type": "range",
      "id": "content_gap_mobile",
      "label": "Gap (mobile)",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "content_gap_desktop",
      "label": "Gap (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "header",
      "content": "Content Display Panel"
    },
    {
      "type": "color",
      "id": "display_background",
      "label": "Background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "select",
      "id": "display_text_align",
      "label": "Text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "display_header_align",
      "label": "Header row alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "display_padding_vertical_mobile",
      "label": "Vertical padding (mobile)",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 20
    },
    {
      "type": "range",
      "id": "display_padding_horizontal_mobile",
      "label": "Horizontal padding (mobile)",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 20
    },
    {
      "type": "range",
      "id": "display_padding_vertical_desktop",
      "label": "Vertical padding (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "display_padding_horizontal_desktop",
      "label": "Horizontal padding (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "display_gap",
      "label": "Internal gap",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "display_border_radius",
      "label": "Border radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "display_border_width",
      "label": "Border width",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "color",
      "id": "display_border_color",
      "label": "Border color",
      "default": "#e0e0e0"
    },
    {
      "type": "header",
      "content": "Display Title"
    },
    {
      "type": "color",
      "id": "display_title_color",
      "label": "Title color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "display_title_size_mobile",
      "label": "Title size (mobile)",
      "min": 14,
      "max": 48,
      "step": 2,
      "unit": "px",
      "default": 26
    },
    {
      "type": "range",
      "id": "display_title_size_desktop",
      "label": "Title size (desktop)",
      "min": 16,
      "max": 72,
      "step": 2,
      "unit": "px",
      "default": 32
    },
    {
      "type": "select",
      "id": "display_title_align",
      "label": "Title alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "display_title_weight",
      "label": "Title weight",
      "options": [
        { "value": "400", "label": "Regular" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi Bold" },
        { "value": "700", "label": "Bold" }
      ],
      "default": "600"
    },
    {
      "type": "select",
      "id": "display_title_transform",
      "label": "Title text transform",
      "options": [
        { "value": "none", "label": "None" },
        { "value": "uppercase", "label": "UPPERCASE" },
        { "value": "capitalize", "label": "Capitalize" }
      ],
      "default": "none"
    },
    {
      "type": "header",
      "content": "Display Icon"
    },
    {
      "type": "checkbox",
      "id": "hide_display_header",
      "label": "Hide header row (icon + title)",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "hide_display_icon",
      "label": "Hide icon",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "display_icon_show_background",
      "label": "Show icon background",
      "default": false
    },
    {
      "type": "color",
      "id": "display_icon_bg",
      "label": "Icon background",
      "default": "#000000"
    },
    {
      "type": "checkbox",
      "id": "display_icon_show_border",
      "label": "Show icon border",
      "default": false
    },
    {
      "type": "color",
      "id": "display_icon_border_color",
      "label": "Icon border color",
      "default": "#1a3b3b"
    },
    {
      "type": "color",
      "id": "display_icon_color",
      "label": "Icon color",
      "default": "#1a3b3b"
    },
    {
      "type": "range",
      "id": "display_icon_size",
      "label": "Icon size (non-circular)",
      "min": 24,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 48
    },
    {
      "type": "header",
      "content": "Review Box"
    },
    {
      "type": "checkbox",
      "id": "hide_all_reviews",
      "label": "Hide all review boxes",
      "default": false
    },
    {
      "type": "range",
      "id": "review_margin_top",
      "label": "Margin top",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "default": 8
    },
    {
      "type": "color",
      "id": "review_bg",
      "label": "Background",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "review_border_color",
      "label": "Border color",
      "default": "#ffffff33"
    },
    {
      "type": "range",
      "id": "review_border_width",
      "label": "Border width",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 1
    },
    {
      "type": "range",
      "id": "review_border_radius",
      "label": "Border radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "review_padding_top",
      "label": "Padding top",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "review_padding_right",
      "label": "Padding right",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "review_padding_bottom",
      "label": "Padding bottom",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "review_padding_left",
      "label": "Padding left",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "select",
      "id": "review_text_align",
      "label": "Text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "review_text_color",
      "label": "Review text color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "review_text_size",
      "label": "Review text size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "review_text_weight",
      "label": "Review text weight",
      "min": 300,
      "max": 700,
      "step": 100,
      "default": 300
    },
    {
      "type": "color",
      "id": "reviewer_name_color",
      "label": "Reviewer name color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "reviewer_name_size",
      "label": "Reviewer name size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "text",
      "id": "verified_text",
      "label": "Verified text",
      "default": "Verified"
    },
    {
      "type": "color",
      "id": "verified_badge_color",
      "label": "Verified badge color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "verified_text_color",
      "label": "Verified text color",
      "default": "#eeeeee"
    },
    {
      "type": "range",
      "id": "verified_text_size",
      "label": "Verified text size",
      "min": 8,
      "max": 18,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "Star color",
      "default": "#FFCC00"
    },
    {
      "type": "range",
      "id": "star_size",
      "label": "Star size",
      "min": 10,
      "max": 32,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "header",
      "content": "Auto-Rotation Timer"
    },
    {
      "type": "checkbox",
      "id": "disable_timer",
      "label": "Disable auto-rotation",
      "default": true
    },
    {
      "type": "range",
      "id": "timer_duration",
      "label": "Timer duration",
      "min": 2,
      "max": 30,
      "step": 1,
      "unit": "s",
      "default": 8
    },
    {
      "type": "color",
      "id": "timer_bar_color",
      "label": "Timer bar color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Color Scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "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",
      "info": "Custom color scheme settings are below."
    },
    {
      "type": "header",
      "content": "Custom Color Scheme",
      "info": "Only applies when 'Custom' is selected above."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Background gradient",
      "info": "Overrides solid color when set."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Background image",
      "info": "Overrides gradient/color when set."
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Background image (mobile)",
      "info": "Replaces desktop image on screens under 740px."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#121212"
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top padding",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom padding",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "default": 60
    },
    {
      "type": "header",
      "content": "Section Margin"
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "label": "Top margin (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "label": "Bottom margin (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "label": "Top margin (mobile)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "label": "Bottom margin (mobile)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "benefit_item",
      "name": "Benefit Item",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Label",
          "default": "Hydration"
        },
        {
          "type": "header",
          "content": "Icon"
        },
        {
          "type": "select",
          "id": "icon_type",
          "label": "Icon type",
          "options": [
            { "value": "image", "label": "Uploaded image" },
            { "value": "google", "label": "Google Material Icon" }
          ],
          "default": "google"
        },
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Icon image",
          "info": "Used when icon type is 'Uploaded image'"
        },
        {
          "type": "text",
          "id": "icon_google_name",
          "label": "Google Material Icon name",
          "default": "water_drop",
          "info": "Browse names at fonts.google.com/icons — used when icon type is 'Google Material Icon'"
        },
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "default": "Experience optimal hydration with our advanced electrolyte formula that keeps you energized all day."
        },
        {
          "type": "header",
          "content": "Review"
        },
        {
          "type": "text",
          "id": "reviewer_name",
          "label": "Reviewer name",
          "default": "Sarah M."
        },
        {
          "type": "range",
          "id": "star_rating",
          "label": "Star rating",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "type": "textarea",
          "id": "review_text",
          "label": "Review quote",
          "default": "\"No more afternoon crashes!\""
        },
        {
          "type": "checkbox",
          "id": "hide_review",
          "label": "Hide review box for this item",
          "default": false
        },
        {
          "type": "header",
          "content": "Block Image"
        },
        {
          "type": "image_picker",
          "id": "block_image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "block_image_position",
          "label": "Image position",
          "options": [
            { "value": "above_title", "label": "Above title" },
            { "value": "under_title", "label": "Below title" },
            { "value": "above_review", "label": "Above review" },
            { "value": "under_review", "label": "Below review" }
          ],
          "default": "above_review"
        },
        {
          "type": "select",
          "id": "block_image_aspect",
          "label": "Aspect ratio",
          "options": [
            { "value": "1/1", "label": "Square (1:1)" },
            { "value": "4/3", "label": "Landscape (4:3)" },
            { "value": "16/9", "label": "Wide (16:9)" },
            { "value": "3/4", "label": "Portrait (3:4)" },
            { "value": "auto", "label": "Original" }
          ],
          "default": "16/9"
        },
        {
          "type": "range",
          "id": "block_image_border_radius",
          "label": "Image border radius",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "default": 10
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero benefits",
      "category": "Features",
      "settings": {
        "title": "Slumbr isn't only for healthy sleep",
        "heading_size_desktop": "h1",
        "heading_size_mobile": "h1",
        "heading_alignment": "center",
        "heading_margin_bottom": 12,
        "color_scheme": "background-1",
        "custom_colors_background": "#2c234a",
        "custom_gradient_background": "linear-gradient(90deg, rgba(44, 35, 74, 1), rgba(43, 35, 74, 1) 33.3%, rgba(95, 67, 116, 1) 66.7%, rgba(141, 116, 160, 1) 100%)",
        "custom_colors_text": "#ffffff",
        "enable_gradient": false,
        "title_highlight_color": "#6D388B",
        "italic_style": "underline",
        "underlinetextcolor": "#000000",
        "subtext": "<p>Theres alot more to slumbr than you think...</p>",
        "subtext_margin_bottom": 0,
        "mobile_image_fit": "contain",
        "desktop_image_fit": "contain",
        "desktop_image_width": 50,
        "image_desktop_side": "left",
        "enable_image_fade": true,
        "image_fade_height": 30,
        "hero_image_border_radius": 0,
        "hero_image_border_width": 0,
        "icon_circular": true,
        "icon_circle_size": 50,
        "icon_active_opacity": 100,
        "icon_inactive_opacity": 100,
        "icon_active_scale": 110,
        "icon_show_background": true,
        "icon_bg_inactive": "rgba(0,0,0,0)",
        "icon_bg_active": "#000000",
        "icon_show_border": true,
        "icon_border_width": 2,
        "icon_border_inactive": "#c9c9c9",
        "icon_border_active": "#000000",
        "icon_padding": 2,
        "icon_label_font_size": 13,
        "icon_label_font_weight": "500",
        "icon_label_active_weight": "700",
        "icon_label_inactive_color": "#000000",
        "icon_label_active_color": "#000000",
        "icon_label_gap": 8,
        "icon_gap_vertical_mobile": 60,
        "icon_gap_horizontal_mobile": 40,
        "icon_gap_vertical_desktop": 20,
        "icon_gap_horizontal_desktop": 0,
        "icon_offset_mobile": 50,
        "icon_offset_desktop": 35,
        "google_icon_size": 36,
        "google_icon_inactive_color": "#000000",
        "google_icon_active_color": "#ffffff",
        "content_gap_mobile": 0,
        "content_gap_desktop": 40,
        "display_background": "rgba(0,0,0,0)",
        "display_text_align": "center",
        "display_header_align": "center",
        "display_padding_vertical_mobile": 12,
        "display_padding_horizontal_mobile": 0,
        "display_padding_vertical_desktop": 40,
        "display_padding_horizontal_desktop": 40,
        "display_gap": 0,
        "display_border_radius": 0,
        "display_border_width": 0,
        "display_title_color": "#000000",
        "display_title_size_mobile": 26,
        "display_title_size_desktop": 32,
        "display_title_align": "left",
        "display_title_weight": "600",
        "display_title_transform": "none",
        "hide_display_header": false,
        "hide_display_icon": false,
        "display_icon_color": "#000000",
        "display_icon_show_background": false,
        "display_icon_show_border": false,
        "review_bg": "#f5f5f5",
        "review_border_color": "#e0e0e0",
        "review_border_width": 2,
        "review_border_radius": 4,
        "review_padding_top": 8,
        "review_padding_right": 8,
        "review_padding_bottom": 8,
        "review_padding_left": 8,
        "review_text_align": "center",
        "review_text_color": "#000000",
        "review_text_size": 16,
        "review_text_weight": 300,
        "reviewer_name_color": "#000000",
        "reviewer_name_size": 14,
        "verified_badge_color": "#008ccc",
        "verified_text_color": "#000000",
        "verified_text_size": 12,
        "star_color": "#FFCC00",
        "star_size": 16,
        "review_margin_top": 16,
        "disable_timer": false,
        "timer_duration": 6,
        "timer_bar_color": "#000000",
        "padding_top": 60,
        "padding_bottom": 60
      },
      "blocks": [
        {
          "type": "benefit_item",
          "settings": {
            "label": "Sleep",
            "icon_type": "google",
            "icon_google_name": "snooze",
            "description": "Experience optimal hydration with our advanced electrolyte formula that helps you stay refreshed and energized throughout your day.",
            "reviewer_name": "Sarah M",
            "star_rating": 5,
            "review_text": "\"No more afternoon crashes!\"",
            "hide_review": false,
            "block_image_position": "above_review",
            "block_image_aspect": "auto",
            "block_image_border_radius": 10
          }
        },
        {
          "type": "benefit_item",
          "settings": {
            "label": "Energy",
            "icon_type": "google",
            "icon_google_name": "recent_patient",
            "description": "Natural energy boost without the crash. Our carefully crafted blend provides sustained vitality to power through your activities.",
            "reviewer_name": "Marcus T",
            "star_rating": 5,
            "review_text": "\"More focused, more me.\"",
            "hide_review": false,
            "block_image_position": "above_review",
            "block_image_aspect": "16/9",
            "block_image_border_radius": 10
          }
        },
        {
          "type": "benefit_item",
          "settings": {
            "label": "Recovery",
            "icon_type": "google",
            "icon_google_name": "hr_resting",
            "description": "Accelerate your recovery with essential nutrients that help your body bounce back stronger after workouts and daily challenges.",
            "reviewer_name": "Jessica L",
            "star_rating": 3,
            "review_text": "\"Push further without feeling tired.\"",
            "hide_review": false,
            "block_image_position": "under_title",
            "block_image_aspect": "auto",
            "block_image_border_radius": 10
          }
        },
        {
          "type": "benefit_item",
          "settings": {
            "label": "Wellness",
            "icon_type": "google",
            "icon_google_name": "cardiology",
            "description": "Support your overall health with our comprehensive blend of vitamins, minerals, and antioxidants for total body wellness.",
            "reviewer_name": "David R",
            "star_rating": 5,
            "review_text": "\"Actually feels different this time.\"",
            "hide_review": false,
            "block_image_position": "above_review",
            "block_image_aspect": "16/9",
            "block_image_border_radius": 10
          }
        }
      ]
    }
  ]
}
{% endschema %}