{%- for block in section.blocks -%}
  {%- if block.type == 'heading' -%}
    {% if block.settings.italic_font_family == 'georgia-pro' or block.settings.italic_font_family == 'bodoni-moda' or block.settings.italic_font_family == 'instrument-serif' or block.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 block.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 block.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 block.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 block.settings.italic_font_family == 'custom_google_font' and block.settings.custom_google_font_name != blank %}
        <link href="https://fonts.googleapis.com/css2?family={{ block.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 %}
  {%- endif -%}
{%- endfor -%}

{%- liquid
  assign needs_material_icons = false
  for block in section.blocks
    if block.type == 'benefits' or block.type == 'text_with_icon'
      assign needs_material_icons = true
    endif
  endfor
-%}
{%- if needs_material_icons -%}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
{%- endif -%}

{%- style -%}

  /* ── Base CSS (verbatim from original) ── */
  .custom-hero__container { max-width: 1200px; margin: 0 auto; width: 100%; }
  .custom-hero__flex { display: flex; }
  .custom-hero__flex--image-left { flex-direction: row; }
  .custom-hero__flex--image-right { flex-direction: row-reverse; }
  .custom-hero__image-wrapper { width: 50%; position: relative; }
  .custom-hero__image { width: 100%; height: auto; display: block; }
  .custom-hero__content { width: 50%; max-width: 100%; padding: 5px 0; overflow: hidden; box-sizing: border-box; }
  .custom-hero__badge-wrapper { margin-bottom: 5px; display: block; width: 100%; }
  .custom-hero__badge { display: inline-block; font-weight: var(--font-weight-semibold); margin-bottom: 0; padding: 2px 12px; border-radius: 20px; display: block; width: fit-content; }
  .custom-hero__rating-wrapper { display: block; width: 100%; margin-bottom: 8px; }
  .custom-hero__rating-container { display: flex; align-items: center; margin-bottom: 0; margin-top: 0; padding: 0; border-radius: 8px; display: inline-flex; clear: both; width: fit-content; }
  .custom-hero__rating-stars { display: flex; margin-right: 8px; font-size: 15px; letter-spacing: 1.5px; }
  .hero-star-icon { margin-right: -4px; }
  .custom-hero__rating-text { font-size: 14px; font-weight: var(--font-weight-semibold); margin-right: 4px; }
  .custom-hero__title { font-size: 3.4rem; line-height: 1.2; margin-bottom: 2px !important; margin-top: -10px; }
  .custom-hero__benefits { margin-top: 20px; margin-bottom: 20px; padding-right: 50px; }
  .custom-hero__benefit-item { display: flex; align-items: center; margin-bottom: 5px; font-size: 1.4rem; line-height: 1.4; letter-spacing: var(--letter-spacing-body); }
  .custom-hero__benefit-icon { margin-right: 4px; font-size: 20px; min-width: 24px; text-align: center; display: flex; align-items: center; justify-content: center; }
  .custom-hero__benefit-icon svg { width: 20px; height: 20px; fill: currentColor; }
  .custom-hero__button { display: block; cursor: pointer; text-decoration: none; text-align: center; transition: background-color 0.3s ease, color 0.3s ease; width: 100%; box-sizing: border-box; }
  .custom-hero__guarantee { display: inline-flex; align-items: center; vertical-align: top; }
  .custom-hero__guarantee-icon { display: inline-flex; vertical-align: middle; margin-right: 5px; align-items: center; justify-content: center; }
  .custom-hero__guarantee-icon svg { width: 15px; height: 15px; fill: currentColor; }
  .custom-hero__guarantee-text { font-size: 12px; letter-spacing: var(--letter-spacing-body); font-weight: var(--font-weight-regular); vertical-align: middle; }

  @media (max-width: 768px) {
    .custom-hero__flex { flex-direction: column; }
    .custom-hero__image-wrapper, .custom-hero__content { width: 100%; padding-left: 0; padding-right: 0; }
    .custom-hero__title { font-size: 3.4rem; line-height: 35px; }
    .custom-hero__button { width: 100%; }
    .custom-hero__benefits { margin-top: 10px; margin-bottom: 20px; padding-right: 0; }
  }

  @media (max-width: 440px) {
    .custom-hero__rating-container { max-width: 380px; }
    .custom-hero__rating-stars, .custom-hero__rating-text { font-size: 11px; }
    .custom-hero__benefits { margin-top: 12px; }
  }

  /* ── Section-scoped margin ── */
  .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 %};
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
    background-attachment: scroll !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  {% 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 %}

  /* ── Outer section ── */
  #HeroBanner-{{ section.id }} {
    background-color: {{ section.settings.outer_bg_color }};
    padding-top: calc({{ section.settings.outer_padding_v }}px + {{ section.settings.padding_top | times: 0.75 | round: 0 }}px);
    padding-bottom: calc({{ section.settings.outer_padding_v }}px + {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px);
    padding-left: {{ section.settings.outer_padding_h }}px;
    padding-right: {{ section.settings.outer_padding_h }}px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (min-width: 769px) {
    #HeroBanner-{{ section.id }} {
      padding-top: calc({{ section.settings.outer_padding_v }}px + {{ section.settings.padding_top }}px);
      padding-bottom: calc({{ section.settings.outer_padding_v }}px + {{ section.settings.padding_bottom }}px);
    }
  }

  @media screen and (max-width: 768px) {
    #HeroBanner-{{ section.id }} {
      {% if section.settings.mobile_full_width %}
        padding: 0px 0px;
      {% else %}
        padding: 10px 10px;
      {% endif %}
    }
  }
  {% if section.settings.mobile_full_width %}
    @media screen and (max-width: 768px) {
      #HeroBanner-{{ section.id }} .custom-hero__container {
        border-radius: 0 !important;
      }
    }
  {% endif %}

  {% if section.settings.desktop_full_width %}
  @media screen and (min-width: 769px) {
    #HeroBanner-{{ section.id }} {
      padding-left: 0px;
      padding-right: 0px;
    }
    #HeroBanner-{{ section.id }} .custom-hero__container {
      border-radius: 0 !important;
      max-width: 100%;
    }
  }
{% endif %}

  /* ── Container ── */
  #HeroBanner-{{ section.id }} .custom-hero__container {
    padding: 0px {{ section.settings.container_padding_x }}px 0px {{ section.settings.container_padding_x }}px;
    border-radius: {{ section.settings.container_border_radius }}px;
    position: relative;
    isolation: isolate;
    {% if section.settings.desktop_bg_image != blank %}
      {% # theme-check-disable %}
      background-image: url('{{ section.settings.desktop_bg_image | image_url: width: 1600 }}');
      {% # theme-check-enable %}
      background-size: cover;
      background-position: {{ section.settings.bg_position }};
      background-repeat: no-repeat;
    {% endif %}
    {% if section.settings.container_border_enable %}
      border: {{ section.settings.container_border_width }}px solid {{ section.settings.container_border_color }};
    {% endif %}
  }
  #HeroBanner-{{ section.id }} .custom-hero__container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: {{ section.settings.overlay_color }};
    opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
    pointer-events: none;
    border-radius: {{ section.settings.container_border_radius }}px;
    z-index: 0;
  }
  #HeroBanner-{{ section.id }} .custom-hero__container > * {
    position: relative;
    z-index: 1;
  }

  {% if section.settings.mobile_bg_image != blank %}
    @media screen and (max-width: 768px) {
      #HeroBanner-{{ section.id }} .custom-hero__container {
        {% # theme-check-disable %}
        background-image: url('{{ section.settings.mobile_bg_image | image_url: width: 900 }}') !important;
        {% # theme-check-enable %}
        background-position: {{ section.settings.bg_position_mobile }};
      }
    }
  {% endif %}
  @media screen and (max-width: 768px) {
    #HeroBanner-{{ section.id }} .custom-hero__container {
      padding: 0px 0px 0px 0px;
    }
  }

  /* ── Flex row ── */
  #HeroBanner-{{ section.id }} .custom-hero__flex {
    align-items: center;
    gap: 40px;
    min-height: {{ section.settings.min_height }}px;
  }
  @media screen and (max-width: 768px) {
    #HeroBanner-{{ section.id }} .custom-hero__flex {
      gap: 20px !important;
      min-height: {{ section.settings.min_height_mobile }}px;
    }
  }

  /* ── Content column ── */
  #HeroBanner-{{ section.id }} .custom-hero__content {
    padding: 20px 25px !important;
    display: flex;
    flex-direction: column;
    min-height: {{ section.settings.min_height }}px;
  }

  /* ── Content wrapper ── */
  #HeroBanner-{{ section.id }} .custom-hero__content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: {% if section.settings.content_position == 'top' %}flex-start{% elsif section.settings.content_position == 'bottom' %}flex-end{% else %}center{% endif %};
    align-items: {% if section.settings.content_alignment == 'center' %}center{% elsif section.settings.content_alignment == 'right' %}flex-end{% else %}flex-start{% endif %};
    text-align: {{ section.settings.content_alignment }};
    flex: 1;
    width: {{ section.settings.content_width }}px;
    max-width: 100%;
    gap: 0;
  }
  #HeroBanner-{{ section.id }} .custom-hero__content-wrapper > * { flex-shrink: 0; }
  #HeroBanner-{{ section.id }} .custom-hero__subtitle p { margin: 0 !important; padding: 0 !important; }

  @media screen and (max-width: 768px) {
    #HeroBanner-{{ section.id }} .custom-hero__content {
      padding: 15px 15px !important;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: {{ section.settings.min_height_mobile }}px;
    }
    #HeroBanner-{{ section.id }} .custom-hero__content-wrapper {
      align-items: {% if section.settings.mobile_content_alignment == 'center' %}center{% elsif section.settings.mobile_content_alignment == 'right' %}flex-end{% else %}flex-start{% endif %};
      text-align: {{ section.settings.mobile_content_alignment }};
      justify-content: {% if section.settings.mobile_content_position == 'top' %}flex-start{% elsif section.settings.mobile_content_position == 'bottom' %}flex-end{% else %}center{% endif %} !important;
      flex: 1;
      width: 100%;
    }
    #HeroBanner-{{ section.id }} .custom-hero__subtitle p { margin: 0 !important; padding: 0 !important; }
  }

  /* ── Button ── */
  #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap {
    width: 100%;
    display: block;
  }
  #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap .custom-hero__button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap .custom-hero__guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Block-level scoped styles ── */

  {%- for block in section.blocks -%}
    {%- case block.type -%}

      {%- when 'rating' -%}
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] {
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .custom-hero__rating-stars {
          color: {{ block.settings.star_color }};
          font-size: {{ block.settings.star_size }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .hero-star-icon {
          width: {{ block.settings.star_size }}px;
          height: {{ block.settings.star_size }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .hero-star-icon--active {
          fill: {{ block.settings.star_color }};
          color: {{ block.settings.star_color }};
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .hero-star-icon--inactive {
          fill: {{ block.settings.inactive_star_color }};
          color: {{ block.settings.inactive_star_color }};
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .custom-hero__rating-text {
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.text_size }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .custom-hero__rating-container {
          padding: {{ block.settings.border_padding_y }}px {{ block.settings.border_padding_x }}px !important;
        }
        {% if block.settings.show_border %}
          #HeroBanner-{{ section.id }} .custom-hero__rating-wrapper[data-block-id="{{ block.id }}"] .custom-hero__rating-container {
            border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }};
            border-radius: {{ block.settings.border_radius }}px;
            margin-top: {{ block.settings.border_margin_v }}px;
            margin-bottom: {{ block.settings.border_margin_v }}px;
          }
        {% endif %}

      {%- when 'badge' -%}
        #HeroBanner-{{ section.id }} .custom-hero__badge-wrapper[data-block-id="{{ block.id }}"] {
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__badge-wrapper[data-block-id="{{ block.id }}"] .custom-hero__badge {
          background-color: {{ block.settings.bg_color }};
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.font_size }}px;
          border-radius: {{ block.settings.border_radius }}px;
          {% if block.settings.show_border %}
            border: 1px solid {{ block.settings.border_color }};
          {% endif %}
        }

      {%- when 'heading' -%}
        #HeroBanner-{{ section.id }} .custom-hero__title[data-block-id="{{ block.id }}"] {
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.font_size_desktop }}px;
          line-height: {{ block.settings.line_height }};
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        @media screen and (max-width: 768px) {
          #HeroBanner-{{ section.id }} .custom-hero__title[data-block-id="{{ block.id }}"] {
            font-size: {{ block.settings.font_size_mobile }}px;
          }
        }
        #HeroBanner-{{ section.id }} .custom-hero__title[data-block-id="{{ block.id }}"] em {
          {% if block.settings.italic_style == 'italic' %}
            text-decoration: none !important;
            font-style: italic !important;
          {% elsif block.settings.italic_style == 'font_family' and block.settings.italic_font_family != 'inherit' %}
            text-decoration: none !important;
            font-style: italic !important;
            {% if block.settings.italic_font_family == 'serif' %}
              font-family: serif !important;
            {% elsif block.settings.italic_font_family == 'georgia-pro' %}
              font-family: 'Georgia Pro', Georgia, serif !important;
            {% elsif block.settings.italic_font_family == 'bodoni-moda' %}
              font-family: 'Bodoni Moda', Georgia, serif !important;
            {% elsif block.settings.italic_font_family == 'instrument-serif' %}
              font-family: 'Instrument Serif', Georgia, serif !important;
            {% elsif block.settings.italic_font_family == 'custom_google_font' and block.settings.custom_google_font_name != blank %}
              font-family: '{{ block.settings.custom_google_font_name }}', sans-serif !important;
            {% elsif block.settings.italic_font_family == 'cursive' %}
              font-family: cursive !important;
            {% endif %}
            {% if block.settings.italic_font_weight != 'inherit' %}
              font-weight: {{ block.settings.italic_font_weight }} !important;
            {% endif %}
          {% else %}
            text-decoration: underline !important;
            font-style: normal !important;
            text-decoration-color: {{ block.settings.underlinetextcolor }} !important;
            text-decoration-thickness: {{ block.settings.underlinethickness }}px !important;
          {% endif %}
        }
        {% if block.settings.enable_gradient %}
          #HeroBanner-{{ section.id }} .custom-hero__title[data-block-id="{{ block.id }}"] strong {
            background: {{ block.settings.title_gradient_background }};
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-style: normal;
          }
        {% endif %}

      {%- when 'text' -%}
        #HeroBanner-{{ section.id }} .custom-hero__subtitle[data-block-id="{{ block.id }}"] {
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.font_size }}px;
          font-weight: {{ block.settings.font_weight }};
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__subtitle[data-block-id="{{ block.id }}"] p {
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.font_size }}px;
          font-weight: {{ block.settings.font_weight }};
        }

      {%- when 'button' -%}
        #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] {
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__button {
          background-color: {{ block.settings.bg_color }} !important;
          background-image: none !important;
          color: {{ block.settings.text_color }} !important;
          font-size: {{ block.settings.font_size }}px !important;
          font-weight: {{ block.settings.font_weight }} !important;
          border-radius: {{ block.settings.border_radius }}px !important;
          border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }} !important;
          padding: {{ block.settings.padding_y }}px 24px !important;
          display: block !important;
          width: 100% !important;
          box-sizing: border-box !important;
          text-align: center !important;
          text-decoration: none !important;
          cursor: pointer !important;
        }
        #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__button:hover {
          background-color: {{ block.settings.bg_color_hover }} !important;
          color: {{ block.settings.text_color_hover }} !important;
        }
        {% if block.settings.show_guarantee %}
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee {
            margin-top: {{ block.settings.guarantee_margin_top }}px;
            {% if block.settings.guarantee_icon_position == 'right' %}
              flex-direction: row-reverse;
            {% endif %}
          }
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-icon {
            color: {{ block.settings.guarantee_icon_color }};
            {% if block.settings.guarantee_icon_position == 'right' %}
              margin-right: 0;
              margin-left: 5px;
            {% else %}
              margin-right: 5px;
            {% endif %}
          }
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-text {
            color: {{ block.settings.guarantee_text_color }};
            font-size: {{ block.settings.guarantee_font_size }}px;
          }
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-icon {
            color: {{ block.settings.guarantee_icon_color }};
            margin-right: 5px;
          }
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-icon svg {
            fill: {{ block.settings.guarantee_icon_color }};
            width: {{ block.settings.guarantee_icon_size }}px;
            height: {{ block.settings.guarantee_icon_size }}px;
          }
          #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-icon .material-symbols-rounded {
            color: {{ block.settings.guarantee_icon_color }};
            font-size: {{ block.settings.guarantee_icon_size }}px;
          }
          {% if block.settings.guarantee_icon_type == 'image' and block.settings.guarantee_icon_image != blank %}
            #HeroBanner-{{ section.id }} .custom-hero__button-guarantee-wrap[data-block-id="{{ block.id }}"] .custom-hero__guarantee-icon img {
              width: {{ block.settings.guarantee_icon_size }}px;
              height: {{ block.settings.guarantee_icon_size }}px;
              object-fit: contain;
              display: block;
            }
          {% endif %}
        {% endif %}

      {%- when 'benefits' -%}
        #HeroBanner-{{ section.id }} .custom-hero__benefits[data-block-id="{{ block.id }}"] {
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__benefits[data-block-id="{{ block.id }}"] .custom-hero__benefit-item {
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.font_size }}px;
        }
        #HeroBanner-{{ section.id }} .custom-hero__benefits[data-block-id="{{ block.id }}"] .custom-hero__benefit-icon {
          color: {{ block.settings.icon_color }};
          font-size: {{ block.settings.icon_size }}px;
        }
        
        {%- when 'text_with_icon' -%}
        #HeroBanner-{{ section.id }} .hero-text-icon-block[data-block-id="{{ block.id }}"] {
          margin-top: {{ block.settings.margin_top }}px;
          margin-bottom: {{ block.settings.margin_bottom }}px;
          text-align: {{ block.settings.alignment }};
        }
        #HeroBanner-{{ section.id }} .hero-text-icon-block[data-block-id="{{ block.id }}"] .hero-text-icon__item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: {{ block.settings.text_color }};
          font-size: {{ block.settings.desktop_text_size }}px;
          margin-bottom: 4px;
          {% if block.settings.alignment == 'center' %}justify-content: center;{% elsif block.settings.alignment == 'right' %}justify-content: flex-end;{% endif %}
        }
        #HeroBanner-{{ section.id }} .hero-text-icon-block[data-block-id="{{ block.id }}"] .hero-text-icon__icon {
          color: {{ block.settings.icon_color }};
          font-size: calc({{ block.settings.desktop_text_size }}px * {{ block.settings.icon_scale | divided_by: 100.0 }});
          line-height: 1;
          flex-shrink: 0;
        }
        @media screen and (max-width: 768px) {
          #HeroBanner-{{ section.id }} .hero-text-icon-block[data-block-id="{{ block.id }}"] .hero-text-icon__item {
            font-size: {{ block.settings.mobile_text_size }}px;
          }
          #HeroBanner-{{ section.id }} .hero-text-icon-block[data-block-id="{{ block.id }}"] .hero-text-icon__icon {
            font-size: calc({{ block.settings.mobile_text_size }}px * {{ block.settings.icon_scale | divided_by: 100.0 }});
          }
        }
    {%- endcase -%}
  {%- endfor -%}

{%- endstyle -%}

<div
  id="HeroBanner-{{ section.id }}"
  class="custom-hero color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient 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 %}

  <div class="custom-hero__container">
      <div class="custom-hero__flex custom-hero__flex--image-{{ section.settings.content_side }}">

        <div class="custom-hero__content">
          <div class="custom-hero__content-wrapper">

            {%- for block in section.blocks -%}
              {%- case block.type -%}

                {%- when 'rating' -%}
                  {%- liquid
                    assign full_stars = block.settings.star_count
                    assign has_half = block.settings.half_star
                    assign half_star_index = full_stars | plus: 1
                  -%}
                  <div class="custom-hero__rating-wrapper" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                    <div class="custom-hero__rating-container">
                      <div class="custom-hero__rating-stars">
                        {%- for i in (1..5) -%}
                          {%- if i <= full_stars -%}
                            <svg class="hero-star-icon hero-star-icon--active" width="18" height="18" viewBox="0 0 24 24" fill="none" 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>
                          {%- elsif has_half and i == half_star_index -%}
                            <svg class="hero-star-icon hero-star-icon--half" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <defs>
                                <linearGradient id="half-grad-{{ block.id }}">
                                  <stop offset="50%" stop-color="currentColor"/>
                                  <stop offset="50%" stop-color="{{ block.settings.inactive_star_color }}"/>
                                </linearGradient>
                              </defs>
                              <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="url(#half-grad-{{ block.id }})"/>
                            </svg>
                          {%- else -%}
                            <svg class="hero-star-icon hero-star-icon--inactive" width="18" height="18" viewBox="0 0 24 24" fill="none" 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="{{ block.settings.inactive_star_color }}"/>
                            </svg>
                          {%- endif -%}
                        {%- endfor -%}
                      </div>
                      {%- if block.settings.text != blank -%}
                        <div class="custom-hero__rating-text"><p>{{ block.settings.text }}</p></div>
                      {%- endif -%}
                    </div>
                  </div>

                {%- when 'badge' -%}
                  <div class="custom-hero__badge-wrapper" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                    <span class="custom-hero__badge">{{ block.settings.text }}</span>
                  </div>

                {%- when 'heading' -%}
                  {%- if block.settings.heading_two_lines and block.settings.heading_line_two != blank -%}
                    {%- assign heading_line_two_with_br = '<br>' | append: block.settings.heading_line_two -%}
                    {%- assign heading_output = block.settings.heading
                      | replace: block.settings.heading_line_two, heading_line_two_with_br
                    -%}
                  {%- else -%}
                    {%- assign heading_output = block.settings.heading -%}
                  {%- endif -%}
                  <h2
                    class="custom-hero__title section-heading title-with-highlight"
                    data-block-id="{{ block.id }}"
                    style="--hightlight-color: {{ block.settings.title_highlight_color }}; --gradient-text: {{ block.settings.title_gradient_background }};"
                    {{ block.shopify_attributes }}
                  >
                    {{ heading_output }}
                  </h2>

                {%- when 'text' -%}
                  <div class="custom-hero__subtitle" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                    {{ block.settings.text }}
                  </div>

                {%- when 'button' -%}
                  {%- if block.settings.button_label != blank -%}
                    <div class="custom-hero__button-guarantee-wrap" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                      <a
                        href="{{ block.settings.button_link }}"
                        class="custom-hero__button"
                      >
                        {{ block.settings.button_label | escape }}
                      </a>
                      {%- if block.settings.show_guarantee and block.settings.guarantee_text != blank -%}
                        <div class="custom-hero__guarantee">
                          <span class="custom-hero__guarantee-icon">
                            {%- if block.settings.guarantee_icon_type == 'image' and block.settings.guarantee_icon_image != blank -%}
                              <img
                                src="{{ block.settings.guarantee_icon_image | image_url: width: 60 }}"
                                alt="{{ block.settings.guarantee_icon_image.alt | default: '' }}"
                                width="{{ block.settings.guarantee_icon_size }}"
                                height="{{ block.settings.guarantee_icon_size }}"
                                loading="lazy"
                              >
                            {%- elsif block.settings.guarantee_icon_type == 'material' -%}
                              <span class="material-symbols-rounded">{{ block.settings.guarantee_icon_name }}</span>
                            {%- else -%}
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16L4.35009 13.3929C2.24773 11.8912 1 9.46667 1 6.88306V3L8 0L15 3V6.88306C15 9.46667 13.7523 11.8912 11.6499 13.3929L8 16ZM12.2071 5.70711L10.7929 4.29289L7 8.08579L5.20711 6.29289L3.79289 7.70711L7 10.9142L12.2071 5.70711Z"/>
                              </svg>
                            {%- endif -%}
                          </span>
                          <span class="custom-hero__guarantee-text">{{ block.settings.guarantee_text }}</span>
                        </div>
                      {%- endif -%}
                    </div>
                  {%- endif -%}

                {%- when 'benefits' -%}
                  <div class="custom-hero__benefits" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                    {%- if block.settings.benefit_1 != blank -%}
                      <div class="custom-hero__benefit-item">
                        <span class="custom-hero__benefit-icon material-symbols-rounded">{{ block.settings.benefit_1_icon }}</span>
                        <span>{{ block.settings.benefit_1 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.benefit_2 != blank -%}
                      <div class="custom-hero__benefit-item">
                        <span class="custom-hero__benefit-icon material-symbols-rounded">{{ block.settings.benefit_2_icon }}</span>
                        <span>{{ block.settings.benefit_2 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.benefit_3 != blank -%}
                      <div class="custom-hero__benefit-item">
                        <span class="custom-hero__benefit-icon material-symbols-rounded">{{ block.settings.benefit_3_icon }}</span>
                        <span>{{ block.settings.benefit_3 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.benefit_4 != blank -%}
                      <div class="custom-hero__benefit-item">
                        <span class="custom-hero__benefit-icon material-symbols-rounded">{{ block.settings.benefit_4_icon }}</span>
                        <span>{{ block.settings.benefit_4 }}</span>
                      </div>
                    {%- endif -%}
                  </div>

                  {%- when 'text_with_icon' -%}
                  <div class="hero-text-icon-block" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
                    {%- if block.settings.text_1 != blank -%}
                      <div class="hero-text-icon__item">
                        {%- if block.settings.icon_1 != blank -%}
                          <span class="hero-text-icon__icon material-symbols-rounded">{{ block.settings.icon_1 }}</span>
                        {%- endif -%}
                        <span>{{ block.settings.text_1 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.text_2 != blank -%}
                      <div class="hero-text-icon__item">
                        {%- if block.settings.icon_2 != blank -%}
                          <span class="hero-text-icon__icon material-symbols-rounded">{{ block.settings.icon_2 }}</span>
                        {%- endif -%}
                        <span>{{ block.settings.text_2 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.text_3 != blank -%}
                      <div class="hero-text-icon__item">
                        {%- if block.settings.icon_3 != blank -%}
                          <span class="hero-text-icon__icon material-symbols-rounded">{{ block.settings.icon_3 }}</span>
                        {%- endif -%}
                        <span>{{ block.settings.text_3 }}</span>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.text_4 != blank -%}
                      <div class="hero-text-icon__item">
                        {%- if block.settings.icon_4 != blank -%}
                          <span class="hero-text-icon__icon material-symbols-rounded">{{ block.settings.icon_4 }}</span>
                        {%- endif -%}
                        <span>{{ block.settings.text_4 }}</span>
                      </div>
                    {%- endif -%}
                  </div>

              {%- endcase -%}
            {%- endfor -%}

          </div>
        </div>

      </div>
  </div>
</div>

{% schema %}
{
  "name": "Hero banner",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only"  },
        { "value": "mobile-hidden",  "label": "Desktop only" },
        { "value": "always-display", "label": "All devices"  }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1",     "label": "Accent 1"     },
        { "value": "accent-2",     "label": "Accent 2"     },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse",      "label": "Inverse"      },
        { "value": "custom",       "label": "Custom"       }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Content position"
    },
    {
      "type": "select",
      "id": "content_side",
      "label": "Content side (desktop)",
      "options": [
        { "value": "left",  "label": "Content left, image right" },
        { "value": "right", "label": "Content right, image left" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "Horizontal alignment (desktop)",
      "options": [
        { "value": "left",   "label": "Left"   },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right"  }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Vertical position (desktop)",
      "options": [
        { "value": "top",    "label": "Top"    },
        { "value": "center", "label": "Middle" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "label": "Horizontal alignment (mobile)",
      "options": [
        { "value": "left",   "label": "Left"   },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right"  }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "mobile_content_position",
      "label": "Vertical position (mobile)",
      "options": [
        { "value": "top",    "label": "Top"    },
        { "value": "center", "label": "Middle" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "bottom"
    },
    {
      "type": "range",
      "id": "content_width",
      "min": 280,
      "max": 680,
      "step": 4,
      "unit": "px",
      "label": "Content column width",
      "default": 412
    },
    {
      "type": "checkbox",
      "id": "mobile_full_width",
      "label": "Full width on mobile",
      "default": false,
      "info": "Removes outer padding on mobile so the section extends edge to edge"
    },
    {
      "type": "checkbox",
      "id": "desktop_full_width",
      "label": "Full width on desktop",
      "default": false,
      "info": "Removes outer padding on desktop so the section extends edge to edge"
    },
    {
      "type": "header",
      "content": "Background images"
    },
    {
      "type": "image_picker",
      "id": "desktop_bg_image",
      "label": "Desktop background image"
    },
    {
      "type": "select",
      "id": "bg_position",
      "label": "Desktop image position",
      "options": [
        { "value": "top center",    "label": "Top center"    },
        { "value": "top left",      "label": "Top left"      },
        { "value": "top right",     "label": "Top right"     },
        { "value": "center center", "label": "Center"        },
        { "value": "center left",   "label": "Center left"   },
        { "value": "center right",  "label": "Center right"  },
        { "value": "bottom center", "label": "Bottom center" }
      ],
      "default": "top center"
    },
    {
      "type": "image_picker",
      "id": "mobile_bg_image",
      "label": "Mobile background image",
      "info": "Shown on screens narrower than 768px. Falls back to desktop image if empty."
    },
    {
      "type": "select",
      "id": "bg_position_mobile",
      "label": "Mobile image position",
      "options": [
        { "value": "top center",    "label": "Top center"    },
        { "value": "top left",      "label": "Top left"      },
        { "value": "top right",     "label": "Top right"     },
        { "value": "center center", "label": "Center"        },
        { "value": "center left",   "label": "Center left"   },
        { "value": "center right",  "label": "Center right"  },
        { "value": "bottom center", "label": "Bottom center" }
      ],
      "default": "top center"
    },
    {
      "type": "header",
      "content": "Image overlay"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "min": 0,
      "max": 35,
      "step": 5,
      "unit": "%",
      "label": "Overlay opacity",
      "default": 0
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "min_height",
      "min": 300,
      "max": 800,
      "step": 10,
      "unit": "px",
      "label": "Min height (desktop)",
      "default": 550
    },
    {
      "type": "range",
      "id": "min_height_mobile",
      "min": 300,
      "max": 800,
      "step": 10,
      "unit": "px",
      "label": "Min height (mobile)",
      "default": 560
    },
    {
      "type": "range",
      "id": "container_padding_x",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Container horizontal padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "container_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Container border radius",
      "default": 14
    },
    {
      "type": "checkbox",
      "id": "container_border_enable",
      "label": "Enable container border",
      "default": true
    },
    {
      "type": "color",
      "id": "container_border_color",
      "label": "Border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "container_border_width",
      "min": 1,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 2
    },
    {
      "type": "color",
      "id": "outer_bg_color",
      "label": "Outer background color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "outer_padding_v",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Outer vertical padding",
      "default": 16
    },
    {
      "type": "range",
      "id": "outer_padding_h",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Outer horizontal padding",
      "default": 8
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 0
    },
    {
      "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 if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "rating",
      "name": "Rating",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "range",
          "id": "star_count",
          "min": 1,
          "max": 5,
          "step": 1,
          "label": "Active stars",
          "info": "Total stars is always 5. Enable half star below for .5 values.",
          "default": 5
        },
        {
          "type": "checkbox",
          "id": "half_star",
          "label": "Add half star",
          "default": false,
          "info": "Adds a half star after the active stars (e.g. 4 + half = 4.5)"
        },
        {
          "type": "text",
          "id": "text",
          "default": "500,000+ Satisfied Customers",
          "label": "Rating label"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "star_color",
          "label": "Active star color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "inactive_star_color",
          "label": "Inactive star color",
          "default": "#555555"
        },
        {
          "type": "range",
          "id": "star_size",
          "min": 10,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Star size",
          "default": 16
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "text_size",
          "min": 10,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Text size",
          "default": 14
        },
        {
          "type": "checkbox",
          "id": "show_border",
          "label": "Show border around rating",
          "default": false
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "border_width",
          "min": 1,
          "max": 6,
          "step": 1,
          "unit": "px",
          "label": "Border width",
          "default": 1
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 30,
          "step": 2,
          "unit": "px",
          "label": "Border radius",
          "default": 4
        },
        {
          "type": "range",
          "id": "border_padding_y",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Border vertical padding",
          "default": 0
        },
        {
          "type": "range",
          "id": "border_padding_x",
          "min": 0,
          "max": 40,
          "step": 1,
          "unit": "px",
          "label": "Border horizontal padding",
          "default": 8
        },
        {
          "type": "range",
          "id": "border_margin_v",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Border top/bottom margin",
          "default": 0
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 40
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 20
        }
      ]
    },
    {
      "type": "badge",
      "name": "Badge",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "text",
          "id": "text",
          "default": "Limited Time Offer",
          "label": "Badge text"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background color",
          "default": "#00000000"
        },
        {
          "type": "range",
          "id": "font_size",
          "min": 10,
          "max": 24,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 13
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 30,
          "step": 2,
          "unit": "px",
          "label": "Border radius",
          "default": 20
        },
        {
          "type": "checkbox",
          "id": "show_border",
          "label": "Show border",
          "default": false
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border color",
          "default": "#ffffff"
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 8
        }
      ]
    },
    {
      "type": "heading",
      "name": "Heading",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Limited Time Offer",
          "label": "Heading",
          "info": "Bold words to highlight them. Italicize words to apply the italic style 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": "{{ block.settings.heading_two_lines == true }}"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "font_size_desktop",
          "min": 20,
          "max": 80,
          "step": 2,
          "unit": "px",
          "label": "Font size (desktop)",
          "default": 52
        },
        {
          "type": "range",
          "id": "font_size_mobile",
          "min": 16,
          "max": 60,
          "step": 2,
          "unit": "px",
          "label": "Font size (mobile)",
          "default": 30
        },
        {
          "type": "select",
          "id": "line_height",
          "label": "Line height",
          "options": [
            { "value": "1",   "label": "Tight (1)"    },
            { "value": "1.1", "label": "1.1"          },
            { "value": "1.2", "label": "1.2"          },
            { "value": "1.3", "label": "1.3"          },
            { "value": "1.4", "label": "1.4"          },
            { "value": "1.5", "label": "Normal (1.5)" }
          ],
          "default": "1"
        },
        {
          "type": "header",
          "content": "Bold text highlight"
        },
        {
          "type": "color",
          "id": "title_highlight_color",
          "label": "Highlight color",
          "default": "#6D388B"
        },
        {
          "type": "checkbox",
          "id": "enable_gradient",
          "label": "Enable gradient for bold text",
          "default": false,
          "info": "Override solid color with gradient"
        },
        {
          "type": "color_background",
          "id": "title_gradient_background",
          "label": "Gradient highlight",
          "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
          "info": "Used when gradient is enabled"
        },
        {
          "type": "header",
          "content": "Italic Text Styling",
          "info": "Choose how italic text (created with *text*) should be displayed"
        },
        {
          "type": "select",
          "id": "italic_style",
          "label": "Italic Text Style",
          "options": [
            { "value": "italic",      "label": "Normal Italic"      },
            { "value": "underline",   "label": "Underline"          },
            { "value": "font_family", "label": "Custom Font Family" }
          ],
          "default": "underline"
        },
        {
          "type": "color",
          "id": "underlinetextcolor",
          "label": "Underline color",
          "default": "#FF0000"
        },
        {
          "type": "range",
          "id": "underlinethickness",
          "min": 1,
          "max": 8,
          "step": 1,
          "unit": "px",
          "label": "Underline thickness",
          "default": 3
        },
        {
          "type": "select",
          "id": "italic_font_family",
          "label": "Italic Font Family",
          "options": [
            { "value": "inherit",           "label": "Default (Inherit)"  },
            { "value": "serif",             "label": "Serif"              },
            { "value": "instrument-serif",  "label": "Instrument Serif"   },
            { "value": "georgia-pro",       "label": "Georgia Pro"        },
            { "value": "bodoni-moda",       "label": "Bodoni Moda"        },
            { "value": "cursive",           "label": "Cursive"            },
            { "value": "custom_google_font","label": "Custom Google Font" }
          ],
          "default": "serif"
        },
        {
          "type": "text",
          "id": "custom_google_font_name",
          "label": "Custom Google Font Name",
          "info": "Exact Google Font family name (e.g. 'Playfair Display'). Browse fonts at https://fonts.google.com/"
        },
        {
          "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)"        },
            { "value": "800",     "label": "Extra Bold (800)"  },
            { "value": "900",     "label": "Black (900)"       }
          ],
          "default": "inherit"
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 16
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Discover premium quality products designed to elevate your everyday experience.</p>",
          "label": "Text"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "font_size",
          "min": 12,
          "max": 24,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 15
        },
        {
          "type": "select",
          "id": "font_weight",
          "label": "Font weight",
          "options": [
            { "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)"      }
          ],
          "default": "400"
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 24
        }
      ]
    },
    {
      "type": "button",
      "name": "Button & Guarantee",
      "limit": 2,
      "settings": [
        {
          "type": "header",
          "content": "Button"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Shop Now - Special Offer",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "bg_color_hover",
          "label": "Background color (hover)",
          "default": "#e4e4e4"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "text_color_hover",
          "label": "Text color (hover)",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "font_size",
          "min": 12,
          "max": 28,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 18
        },
        {
          "type": "select",
          "id": "font_weight",
          "label": "Font weight",
          "options": [
            { "value": "400", "label": "Regular (400)"   },
            { "value": "500", "label": "Medium (500)"    },
            { "value": "600", "label": "Semi Bold (600)" },
            { "value": "700", "label": "Bold (700)"      }
          ],
          "default": "700"
        },

        {
          "type": "range",
          "id": "padding_y",
          "min": 4,
          "max": 13,
          "step": 1,
          "unit": "px",
          "label": "Vertical padding",
          "default": 12
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 30,
          "step": 2,
          "unit": "px",
          "label": "Border radius",
          "default": 6
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "border_width",
          "min": 0,
          "max": 6,
          "step": 1,
          "unit": "px",
          "label": "Border width",
          "default": 1
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 24
        },
        {
          "type": "header",
          "content": "Guarantee"
        },
        {
          "type": "checkbox",
          "id": "show_guarantee",
          "label": "Show guarantee",
          "default": true
        },
        {
          "type": "text",
          "id": "guarantee_text",
          "default": "30-Day Satisfaction Promise",
          "label": "Guarantee text"
        },
        {
          "type": "header",
          "content": "Guarantee icon"
        },
        {
          "type": "select",
          "id": "guarantee_icon_type",
          "label": "Icon type",
          "options": [
            { "value": "default",  "label": "Default (shield)"     },
            { "value": "material", "label": "Google Material Icon"  },
            { "value": "image",    "label": "Custom image"          }
          ],
          "default": "default"
        },
        {
          "type": "text",
          "id": "guarantee_icon_name",
          "label": "Material icon name",
          "default": "verified_user",
          "info": "Used when Icon type is Google Material Icon. Browse at fonts.google.com/icons"
        },
        {
          "type": "image_picker",
          "id": "guarantee_icon_image",
          "label": "Custom icon image"
        },
        {
          "type": "header",
          "content": "Guarantee style"
        },
        {
          "type": "select",
          "id": "guarantee_icon_position",
          "label": "Icon position",
          "options": [
            { "value": "left",  "label": "Left of text"  },
            { "value": "right", "label": "Right of text" }
          ],
          "default": "left"
        },
        {
          "type": "color",
          "id": "guarantee_text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "guarantee_font_size",
          "min": 10,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 15
        },
        {
          "type": "color",
          "id": "guarantee_icon_color",
          "label": "Icon color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "guarantee_icon_size",
          "min": 10,
          "max": 40,
          "step": 2,
          "unit": "px",
          "label": "Icon size",
          "default": 16
        },
        {
          "type": "range",
          "id": "guarantee_margin_top",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "label": "Guarantee top spacing",
          "default": 8
        }
      ]
    },
    {
      "type": "text_with_icon",
      "name": "Text with icon",
      "settings": [
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "inline_richtext",
          "id": "text_1",
          "default": "Text with icon",
          "label": "Text #1"
        },
        {
          "type": "text",
          "id": "icon_1",
          "default": "check_circle",
          "label": "Icon #1",
          "info": "Material Symbol name. Browse at fonts.google.com/icons"
        },
        {
          "type": "inline_richtext",
          "id": "text_2",
          "label": "Text #2"
        },
        {
          "type": "text",
          "id": "icon_2",
          "default": "check_circle",
          "label": "Icon #2"
        },
        {
          "type": "inline_richtext",
          "id": "text_3",
          "label": "Text #3"
        },
        {
          "type": "text",
          "id": "icon_3",
          "default": "check_circle",
          "label": "Icon #3"
        },
        {
          "type": "inline_richtext",
          "id": "text_4",
          "label": "Text #4"
        },
        {
          "type": "text",
          "id": "icon_4",
          "default": "check_circle",
          "label": "Icon #4"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "desktop_text_size",
          "min": 10,
          "max": 30,
          "step": 1,
          "unit": "px",
          "label": "Text size (desktop)",
          "default": 15
        },
        {
          "type": "range",
          "id": "mobile_text_size",
          "min": 8,
          "max": 24,
          "step": 1,
          "unit": "px",
          "label": "Text size (mobile)",
          "default": 14
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Alignment",
          "options": [
            { "value": "left",   "label": "Left"   },
            { "value": "center", "label": "Center" },
            { "value": "right",  "label": "Right"  }
          ],
          "default": "left"
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "icon_scale",
          "min": 80,
          "max": 200,
          "step": 5,
          "unit": "%",
          "label": "Icon scale",
          "info": "Relative to text size",
          "default": 120
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 20
        }
      ]
    },
    {
      "type": "benefits",
      "name": "Benefits list",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Benefit 1"
        },
        {
          "type": "text",
          "id": "benefit_1",
          "default": "Long-lasting 12-hour wear",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "benefit_1_icon",
          "default": "check_circle",
          "label": "Icon",
          "info": "Material Symbol icon name. Browse at fonts.google.com/icons"
        },
        {
          "type": "header",
          "content": "Benefit 2"
        },
        {
          "type": "text",
          "id": "benefit_2",
          "default": "Premium ingredients",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "benefit_2_icon",
          "default": "check_circle",
          "label": "Icon"
        },
        {
          "type": "header",
          "content": "Benefit 3"
        },
        {
          "type": "text",
          "id": "benefit_3",
          "default": "Free shipping over $50",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "benefit_3_icon",
          "default": "local_shipping",
          "label": "Icon"
        },
        {
          "type": "header",
          "content": "Benefit 4"
        },
        {
          "type": "text",
          "id": "benefit_4",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "benefit_4_icon",
          "default": "check_circle",
          "label": "Icon"
        },
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "font_size",
          "min": 10,
          "max": 22,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 14
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "icon_size",
          "min": 12,
          "max": 32,
          "step": 2,
          "unit": "px",
          "label": "Icon size",
          "default": 20
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin top",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "label": "Margin bottom",
          "default": 20
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero banner",
      "category": "Hero",
      "blocks": [
        { "type": "rating" },
        { "type": "heading" },
        { "type": "text" },
        { "type": "button" }
      ]
    }
  ]
}
{% endschema %}