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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

{%- 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 }};
    --accent-color: {{ section.settings.custom_colors_accent.red }}, {{ section.settings.custom_colors_accent.green }}, {{ section.settings.custom_colors_accent.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;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: auto;
  }
  {% 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 %}

  /* =============================================
     Heading em/italic + gradient
     ============================================= */
  .uvt-heading-{{ section.id }} 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 %}
  }
  {% if section.settings.enable_heading_gradient %}
    .uvt-heading-{{ section.id }} strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* =============================================
     Section layout
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-header-wrapper {
    text-align: {{ section.settings.heading_text_align }};
    margin-bottom: {{ section.settings.heading_margin_bottom }}px;
  }
  #UvtSection-{{ section.id }} .uvt-intro-text {
    line-height: 1.6;
    margin-bottom: 24px;
    text-align: {{ section.settings.heading_text_align }};
  }

  /* Comparison wrapper — optional side image layout */
  #UvtSection-{{ section.id }} .uvt-comparison-wrapper {
    width: 100%;
    max-width: {{ section.settings.table_max_width }}px;
    margin: 0 auto;
  }
  @media screen and (min-width: 750px) {
    {% if section.settings.show_side_image %}
    #UvtSection-{{ section.id }} .uvt-comparison-wrapper {
      max-width: none;
      display: flex;
      gap: {{ section.settings.side_image_gap }}px;
      align-items: {{ section.settings.side_image_alignment }};
      {% if section.settings.side_image_position == 'right' %}
        flex-direction: row-reverse;
      {% else %}
        flex-direction: row;
      {% endif %}
    }
    #UvtSection-{{ section.id }} .uvt-table-container {
      flex: 1;
      min-width: 0;
      max-width: {{ section.settings.table_max_width }}px;
    }
    #UvtSection-{{ section.id }} .uvt-side-image-wrapper {
      flex-shrink: 0;
      width: {{ section.settings.side_image_width }}%;
    }
    {% endif %}
  }
  @media screen and (max-width: 749px) {
    {% if section.settings.show_side_image %}
    #UvtSection-{{ section.id }} .uvt-comparison-wrapper {
      display: flex;
      flex-direction: column;
      gap: {{ section.settings.side_image_gap }}px;
    }
    {% endif %}
    {% if section.settings.hide_side_image_mobile %}
    #UvtSection-{{ section.id }} .uvt-side-image-wrapper {
      display: none;
    }
    {% endif %}
  }
  #UvtSection-{{ section.id }} .uvt-side-image {
    width: 100%;
    height: auto;
    border-radius: {{ section.settings.side_image_border_radius }}px;
    object-fit: cover;
    display: block;
  }
  #UvtSection-{{ section.id }} .uvt-side-image-placeholder {
    min-height: 300px;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: {{ section.settings.side_image_border_radius }}px;
  }

  /* =============================================
     GRID — columns: feature | us | them | (them2)
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-grid-wrapper {
    border-radius: {{ section.settings.table_border_radius }}px;
    overflow: hidden;
  }
  #UvtSection-{{ section.id }} .uvt-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr{% if section.settings.enable_them2_column %} 1fr{% endif %};
  }
  @media screen and (min-width: 750px) {
    #UvtSection-{{ section.id }} .uvt-grid {
      grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr){% if section.settings.enable_them2_column %} minmax(120px, 1fr){% endif %};
    }
  }

  /* =============================================
     Shared cell base
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-cell {
    padding: {{ section.settings.cell_padding }}px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: {{ section.settings.cell_font_size }}px;
    color: {{ section.settings.cell_text_color }};
    border: {{ section.settings.row_border_width }}px solid {{ section.settings.row_border_color }};
    min-height: 60px;
    box-sizing: border-box;
  }

  /* =============================================
     ROW 1: Column headers
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-cell-corner {
    background: {{ section.settings.header_background }};
    {% if section.settings.override_row_height %}
      min-height: {{ section.settings.header_row_height }}px;
    {% endif %}
  }

  #UvtSection-{{ section.id }} .uvt-cell-us-label {
    {% if section.settings.us_gradient_enabled %}
      background: {{ section.settings.us_gradient }};
    {% else %}
      background: {{ section.settings.us_background }};
    {% endif %}
    color: {{ section.settings.us_text_color }};
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    border-top-left-radius: {{ section.settings.highlight_corner_radius }}px;
    border-top-right-radius: {{ section.settings.highlight_corner_radius }}px;
    {% if section.settings.override_row_height %}
      min-height: {{ section.settings.header_row_height }}px;
    {% endif %}
  }
  #UvtSection-{{ section.id }} .uvt-cell-us-label .uvt-label-text {
    font-size: {{ section.settings.us_label_font_size }}px;
    font-weight: {{ section.settings.us_label_font_weight }};
    color: {{ section.settings.us_label_color }};
  }
  #UvtSection-{{ section.id }} .uvt-cell-us-label .uvt-label-image {
    max-width: {{ section.settings.us_image_width }}px;
    height: auto;
    border-radius: {{ section.settings.label_image_border_radius }}px;
    margin-bottom: 8px;
    display: block;
  }
  @media screen and (max-width: 749px) {
    #UvtSection-{{ section.id }} .uvt-cell-us-label .uvt-label-image {
      max-width: {{ section.settings.us_image_width_mobile }}px;
    }
  }

  #UvtSection-{{ section.id }} .uvt-cell-them-label {
    {% if section.settings.them_gradient_enabled %}
      background: {{ section.settings.them_gradient }};
    {% else %}
      background: {{ section.settings.them_background }};
    {% endif %}
    color: {{ section.settings.them_text_color }};
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    {% if section.settings.override_row_height %}
      min-height: {{ section.settings.header_row_height }}px;
    {% endif %}
  }
  #UvtSection-{{ section.id }} .uvt-cell-them-label .uvt-label-text {
    font-size: {{ section.settings.them_label_font_size }}px;
    font-weight: {{ section.settings.them_label_font_weight }};
    color: {{ section.settings.them_label_color }};
  }
  #UvtSection-{{ section.id }} .uvt-cell-them-label .uvt-label-image {
    max-width: {{ section.settings.them_image_width }}px;
    height: auto;
    border-radius: {{ section.settings.label_image_border_radius }}px;
    margin-bottom: 8px;
    display: block;
  }
  @media screen and (max-width: 749px) {
    #UvtSection-{{ section.id }} .uvt-cell-them-label .uvt-label-image {
      max-width: {{ section.settings.them_image_width_mobile }}px;
    }
  }

  {% if section.settings.enable_them2_column %}
    #UvtSection-{{ section.id }} .uvt-cell-them2-label {
      {% if section.settings.them2_gradient_enabled %}
        background: {{ section.settings.them2_gradient }};
      {% else %}
        background: {{ section.settings.them2_background }};
      {% endif %}
      color: {{ section.settings.them2_text_color }};
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      {% if section.settings.override_row_height %}
        min-height: {{ section.settings.header_row_height }}px;
      {% endif %}
    }
    #UvtSection-{{ section.id }} .uvt-cell-them2-label .uvt-label-text {
      font-size: {{ section.settings.them2_label_font_size }}px;
      font-weight: {{ section.settings.them2_label_font_weight }};
      color: {{ section.settings.them2_label_color }};
    }
  {% endif %}

  /* =============================================
     FEATURE ROWS
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-cell-feature {
    justify-content: flex-start;
    text-align: left;
    font-weight: {{ section.settings.benefit_font_weight }};
    border-top: {{ section.settings.them_top_border_width }}px solid {{ section.settings.them_top_border_color }};
  }

  #UvtSection-{{ section.id }} .uvt-cell-us {
    {% if section.settings.us_gradient_enabled %}
      background: {{ section.settings.us_gradient }};
    {% else %}
      background: {{ section.settings.us_background }};
    {% endif %}
    color: {{ section.settings.us_text_color }};
    border-top: {{ section.settings.us_top_border_width }}px solid {{ section.settings.us_top_border_color }};
    {% if section.settings.override_row_height %}
      min-height: {{ section.settings.us_row_height }}px;
    {% endif %}
  }

  #UvtSection-{{ section.id }} .uvt-cell-them {
    {% if section.settings.them_gradient_enabled %}
      background: {{ section.settings.them_gradient }};
    {% else %}
      background: {{ section.settings.them_background }};
    {% endif %}
    color: {{ section.settings.them_text_color }};
    border-top: {{ section.settings.them_top_border_width }}px solid {{ section.settings.them_top_border_color }};
    {% if section.settings.override_row_height %}
      min-height: {{ section.settings.them_row_height }}px;
    {% endif %}
  }

  {% if section.settings.enable_them2_column %}
    #UvtSection-{{ section.id }} .uvt-cell-them2 {
      {% if section.settings.them2_gradient_enabled %}
        background: {{ section.settings.them2_gradient }};
      {% else %}
        background: {{ section.settings.them2_background }};
      {% endif %}
      color: {{ section.settings.them2_text_color }};
      border-top: {{ section.settings.them2_top_border_width }}px solid {{ section.settings.them2_top_border_color }};
      {% if section.settings.override_row_height %}
        min-height: {{ section.settings.them_row_height }}px;
      {% endif %}
    }
    #UvtSection-{{ section.id }} .uvt-cell-them2-last {
      border-bottom-left-radius: {{ section.settings.highlight_corner_radius }}px;
      border-bottom-right-radius: {{ section.settings.highlight_corner_radius }}px;
      overflow: hidden;
    }
  {% endif %}

  #UvtSection-{{ section.id }} .uvt-cell-us-last {
    border-bottom-left-radius: {{ section.settings.highlight_corner_radius }}px;
    border-bottom-right-radius: {{ section.settings.highlight_corner_radius }}px;
    overflow: hidden;
  }
  #UvtSection-{{ section.id }} .uvt-cell-them-last {
    border-bottom-left-radius: {{ section.settings.highlight_corner_radius }}px;
    border-bottom-right-radius: {{ section.settings.highlight_corner_radius }}px;
    overflow: hidden;
  }

  /* =============================================
     Us column outside border (optional)
     ============================================= */
  {% if section.settings.us_border_width > 0 %}
    #UvtSection-{{ section.id }} .uvt-cell-us-label {
      border-left: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
      border-right: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
      border-top: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
      {% if section.settings.us_border_radius > 0 %}
        border-top-left-radius: {{ section.settings.us_border_radius }}px;
        border-top-right-radius: {{ section.settings.us_border_radius }}px;
      {% endif %}
    }
    #UvtSection-{{ section.id }} .uvt-cell-us {
      border-left: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
      border-right: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
    }
    #UvtSection-{{ section.id }} .uvt-cell-us-last {
      border-bottom: {{ section.settings.us_border_width }}px solid {{ section.settings.us_border_color }};
      {% if section.settings.us_border_radius > 0 %}
        border-bottom-left-radius: {{ section.settings.us_border_radius }}px;
        border-bottom-right-radius: {{ section.settings.us_border_radius }}px;
      {% endif %}
    }
  {% endif %}

  /* =============================================
     Label main image (replaces text)
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-label-main-image {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    border-radius: {{ section.settings.label_image_border_radius }}px;
  }

  /* =============================================
     Material icons
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
  }

  /* =============================================
     Custom HTML block
     ============================================= */
  #UvtSection-{{ section.id }} .uvt-custom-html-block {
    margin-top: 24px;
  }
{%- endstyle -%}

<div class="us-vs-them color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient animate-section animate--hidden content-for-grouping {{ section.settings.visibility }} section-{{ section.id }}-margin" data-section-id="{{ section.id }}">

  {% 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 id="UvtSection-{{ section.id }}">

      {%- assign child_index = 0 -%}

      {%- comment -%} HEADING {%- endcomment -%}
      {%- unless section.settings.title == blank -%}
        <div class="uvt-header-wrapper animate-item animate-item--child" style="--index: {{ child_index }};">
          <h2 class="title {{ section.settings.heading_size }} title-with-highlight uvt-heading-{{ section.id }}"
              style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};">
            {{ section.settings.title }}
          </h2>
        </div>
        {%- assign child_index = child_index | plus: 1 -%}
      {%- endunless -%}

      {%- comment -%} INTRO TEXT {%- endcomment -%}
      {%- unless section.settings.text == blank -%}
        <div class="uvt-intro-text rte animate-item animate-item--child" style="--index: {{ child_index }};">
          {{ section.settings.text }}
        </div>
        {%- assign child_index = child_index | plus: 1 -%}
      {%- endunless -%}

      {%- comment -%} COMPARISON TABLE + OPTIONAL SIDE IMAGE {%- endcomment -%}
      <div class="uvt-comparison-wrapper animate-item animate-item--child" style="--index: {{ child_index }};">
        {%- assign child_index = child_index | plus: 1 -%}

        {%- if section.settings.show_side_image -%}
          <div class="uvt-side-image-wrapper">
            {%- if section.settings.side_image != blank -%}
              <img
                src="{{ section.settings.side_image | image_url: width: 800 }}"
                alt="{{ section.settings.side_image.alt | escape }}"
                loading="lazy"
                class="uvt-side-image"
              >
            {%- else -%}
              <div class="uvt-side-image-placeholder">
                <span class="material-icons" style="font-size:48px;color:#ccc;">image</span>
              </div>
            {%- endif -%}
          </div>
        {%- endif -%}

        <div class="uvt-table-container">
          {%- assign comparison_blocks = section.blocks | where: 'type', 'comparison_row' -%}

          <div class="uvt-grid-wrapper">
          <div class="uvt-grid">

            {%- comment -%} ROW 1: column headers {%- endcomment -%}
            <div class="uvt-cell uvt-cell-corner"></div>

            <div class="uvt-cell uvt-cell-us-label">
              {%- if section.settings.us_use_image_as_label and section.settings.us_main_image != blank -%}
                <img src="{{ section.settings.us_main_image | image_url: width: 300 }}" alt="{{ section.settings.us_column_label | escape }}" class="uvt-label-main-image" loading="lazy">
              {%- else -%}
                {%- if section.settings.us_image != blank -%}
                  <img src="{{ section.settings.us_image | image_url: width: 300 }}" alt="{{ section.settings.us_image.alt | escape }}" loading="lazy" class="uvt-label-image">
                {%- endif -%}
                <span class="uvt-label-text">{{ section.settings.us_column_label }}</span>
              {%- endif -%}
            </div>

            <div class="uvt-cell uvt-cell-them-label">
              {%- if section.settings.them_use_image_as_label and section.settings.them_main_image != blank -%}
                <img src="{{ section.settings.them_main_image | image_url: width: 300 }}" alt="{{ section.settings.them_column_label | escape }}" class="uvt-label-main-image" loading="lazy">
              {%- else -%}
                {%- if section.settings.them_image != blank -%}
                  <img src="{{ section.settings.them_image | image_url: width: 300 }}" alt="{{ section.settings.them_image.alt | escape }}" loading="lazy" class="uvt-label-image">
                {%- endif -%}
                <span class="uvt-label-text">{{ section.settings.them_column_label }}</span>
              {%- endif -%}
            </div>

            {%- if section.settings.enable_them2_column -%}
              <div class="uvt-cell uvt-cell-them2-label">
                <span class="uvt-label-text">{{ section.settings.them2_column_label }}</span>
              </div>
            {%- endif -%}

            {%- comment -%} FEATURE ROWS {%- endcomment -%}
            {%- for block in comparison_blocks -%}
              {%- liquid
                assign is_last     = forloop.last
                assign us_color    = block.settings.us_icon_color    | default: section.settings.us_icon_color
                assign us_size     = block.settings.us_icon_size     | default: section.settings.us_icon_size
                assign them_color  = block.settings.them_icon_color  | default: section.settings.them_icon_color
                assign them_size   = block.settings.them_icon_size   | default: section.settings.them_icon_size
                assign them2_color = block.settings.them2_icon_color | default: section.settings.them2_icon_color
                assign them2_size  = block.settings.them2_icon_size  | default: section.settings.them2_icon_size
              -%}

              <div class="uvt-cell uvt-cell-feature{% if is_last %} uvt-feature-last{% endif %}" {{ block.shopify_attributes }}>
                {{ block.settings.benefit_text }}
              </div>

              <div class="uvt-cell uvt-cell-us{% if is_last %} uvt-cell-us-last{% endif %}" {{ block.shopify_attributes }}>
                {%- case block.settings.us_value -%}
                  {%- when 'check' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ us_size }}px;color:{{ us_color }};">{{ section.settings.us_check_icon }}</span>
                  {%- when 'cross' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ us_size }}px;color:{{ us_color }};">{{ section.settings.us_cross_icon }}</span>
                  {%- when 'google_icon' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ us_size }}px;color:{{ us_color }};">{{ block.settings.us_google_icon }}</span>
                  {%- when 'text' -%}
                        <span style="text-align: {{ block.settings.us_text_align }}; display: block; width: 100%;">{{ block.settings.us_custom_text }}</span>
                {%- endcase -%}
              </div>

              <div class="uvt-cell uvt-cell-them{% if is_last %} uvt-cell-them-last{% endif %}" {{ block.shopify_attributes }}>
                {%- case block.settings.them_value -%}
                  {%- when 'check' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ them_size }}px;color:{{ them_color }};">{{ section.settings.them_check_icon }}</span>
                  {%- when 'cross' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ them_size }}px;color:{{ them_color }};">{{ section.settings.them_cross_icon }}</span>
                  {%- when 'google_icon' -%}
                    <span class="material-icons uvt-icon" style="font-size:{{ them_size }}px;color:{{ them_color }};">{{ block.settings.them_google_icon }}</span>
                  {%- when 'text' -%}
                    <span style="text-align: {{ block.settings.them_text_align }}; display: block; width: 100%;">{{ block.settings.them_custom_text }}</span>
                {%- endcase -%}
              </div>

              {%- if section.settings.enable_them2_column -%}
                <div class="uvt-cell uvt-cell-them2{% if is_last %} uvt-cell-them2-last{% endif %}" {{ block.shopify_attributes }}>
                  {%- case block.settings.them2_value -%}
                    {%- when 'check' -%}
                      <span class="material-icons uvt-icon" style="font-size:{{ them2_size }}px;color:{{ them2_color }};">{{ section.settings.them2_check_icon }}</span>
                    {%- when 'cross' -%}
                      <span class="material-icons uvt-icon" style="font-size:{{ them2_size }}px;color:{{ them2_color }};">{{ section.settings.them2_cross_icon }}</span>
                    {%- when 'google_icon' -%}
                      <span class="material-icons uvt-icon" style="font-size:{{ them2_size }}px;color:{{ them2_color }};">{{ block.settings.them2_google_icon }}</span>
                    {%- when 'text' -%}
                      <span style="text-align: {{ block.settings.them2_text_align }}; display: block; width: 100%;">{{ block.settings.them2_custom_text }}</span>
                  {%- endcase -%}
                </div>
              {%- endif -%}

            {%- endfor -%}

          </div>{%- comment -%} /.uvt-grid {%- endcomment -%}
          </div>{%- comment -%} /.uvt-grid-wrapper {%- endcomment -%}
        </div>{%- comment -%} /.uvt-table-container {%- endcomment -%}
      </div>{%- comment -%} /.uvt-comparison-wrapper {%- endcomment -%}

      {%- for block in section.blocks -%}
        {%- if block.type == 'custom_html' -%}
          <div class="uvt-custom-html-block animate-item animate-item--child" style="--index: {{ child_index }};" {{ block.shopify_attributes }}>
            {{ block.settings.html_content }}
          </div>
          {%- assign child_index = child_index | plus: 1 -%}
        {%- endif -%}
      {%- endfor -%}

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

{% schema %}
{
  "name": "Comparison table V3",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false,
      "info": "ID can also be put inside any button link and the button will scroll to this section."
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        { "value": "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",
      "default": "Here's How We're Different",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_text_align",
      "label": "Heading alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_heading_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "range",
      "id": "heading_margin_bottom",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Heading margin bottom",
      "default": 16
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        { "value": "italic", "label": "Normal Italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom Font Family" }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "serif", "label": "Serif" },
        { "value": "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": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>See how our product stacks up against the competition.</p>"
    },
    {
      "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 edited at bottom of section settings."
    },
    {
      "type": "header",
      "content": "Table settings"
    },
    {
      "type": "range",
      "id": "table_max_width",
      "min": 400,
      "max": 1400,
      "step": 50,
      "unit": "px",
      "label": "Table max width",
      "default": 900
    },
    {
      "type": "range",
      "id": "table_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Table border radius",
      "default": 5
    },
    {
      "type": "header",
      "content": "Side image"
    },
    {
      "type": "checkbox",
      "id": "show_side_image",
      "label": "Show side image",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "side_image",
      "label": "Side image"
    },
    {
      "type": "checkbox",
      "id": "hide_side_image_mobile",
      "label": "Hide on mobile",
      "default": true
    },
    {
      "type": "select",
      "id": "side_image_position",
      "label": "Image position",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "side_image_alignment",
      "label": "Image vertical alignment",
      "options": [
        { "value": "flex-start", "label": "Top" },
        { "value": "center", "label": "Center" },
        { "value": "flex-end", "label": "Bottom" }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "side_image_width",
      "min": 20,
      "max": 60,
      "step": 5,
      "unit": "%",
      "label": "Image width",
      "default": 40
    },
    {
      "type": "range",
      "id": "side_image_gap",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Image gap",
      "default": 32
    },
    {
      "type": "range",
      "id": "side_image_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Image border radius",
      "default": 12
    },
    {
      "type": "header",
      "content": "Column labels"
    },
    {
      "type": "text",
      "id": "us_column_label",
      "label": "Our product label",
      "default": "Our Product"
    },
    {
      "type": "text",
      "id": "them_column_label",
      "label": "Other products label",
      "default": "Other Products"
    },
    {
      "type": "checkbox",
      "id": "enable_them2_column",
      "label": "Enable 3rd column (2nd Other Products)",
      "default": false,
      "info": "Adds an additional comparison column. Disabled by default."
    },
    {
      "type": "text",
      "id": "them2_column_label",
      "label": "2nd other products label",
      "default": "Other Products",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "header",
      "content": "Our product header image"
    },
    {
      "type": "image_picker",
      "id": "us_image",
      "label": "Decorative image (above label)"
    },
    {
      "type": "range",
      "id": "us_image_width",
      "min": 40,
      "max": 200,
      "step": 10,
      "unit": "px",
      "label": "Image max width (desktop)",
      "default": 100
    },
    {
      "type": "range",
      "id": "us_image_width_mobile",
      "min": 30,
      "max": 140,
      "step": 5,
      "unit": "px",
      "label": "Image max width (mobile)",
      "default": 70
    },
    {
      "type": "checkbox",
      "id": "us_use_image_as_label",
      "label": "Use image instead of text label",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "us_main_image",
      "label": "Label image (replaces text)"
    },
    {
      "type": "header",
      "content": "Other products header image"
    },
    {
      "type": "image_picker",
      "id": "them_image",
      "label": "Decorative image (above label)"
    },
    {
      "type": "range",
      "id": "them_image_width",
      "min": 40,
      "max": 200,
      "step": 10,
      "unit": "px",
      "label": "Image max width (desktop)",
      "default": 100
    },
    {
      "type": "range",
      "id": "them_image_width_mobile",
      "min": 30,
      "max": 140,
      "step": 5,
      "unit": "px",
      "label": "Image max width (mobile)",
      "default": 70
    },
    {
      "type": "checkbox",
      "id": "them_use_image_as_label",
      "label": "Use image instead of text label",
      "default": false
    },
    {
      "type": "image_picker",
      "id": "them_main_image",
      "label": "Label image (replaces text)"
    },
    {
      "type": "range",
      "id": "label_image_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Label image border radius",
      "default": 6
    },
    {
      "type": "header",
      "content": "Header row styling"
    },
    {
      "type": "color",
      "id": "header_background",
      "label": "Feature corner cell background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "header",
      "content": "Our product column styling"
    },
    {
      "type": "checkbox",
      "id": "us_gradient_enabled",
      "label": "Enable gradient background",
      "default": false
    },
    {
      "type": "color_background",
      "id": "us_gradient",
      "label": "Gradient",
      "default": "linear-gradient(270deg, rgba(255, 239, 180, 1) 11%, rgba(255, 209, 241, 1) 81%)"
    },
    {
      "type": "color",
      "id": "us_background",
      "label": "Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "us_text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "us_label_font_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Label font size",
      "default": 15
    },
    {
      "type": "range",
      "id": "us_label_font_weight",
      "min": 100,
      "max": 900,
      "step": 100,
      "label": "Label font weight",
      "default": 700
    },
    {
      "type": "color",
      "id": "us_label_color",
      "label": "Label text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Our product column border"
    },
    {
      "type": "range",
      "id": "us_border_width",
      "min": 0,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 0
    },
    {
      "type": "color",
      "id": "us_border_color",
      "label": "Border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "us_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Border radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Other products column styling"
    },
    {
      "type": "checkbox",
      "id": "them_gradient_enabled",
      "label": "Enable gradient background",
      "default": false
    },
    {
      "type": "color_background",
      "id": "them_gradient",
      "label": "Gradient",
      "default": "linear-gradient(135deg, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1) 100%)"
    },
    {
      "type": "color",
      "id": "them_background",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "them_text_color",
      "label": "Text color",
      "default": "#666666"
    },
    {
      "type": "range",
      "id": "them_label_font_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Label font size",
      "default": 14
    },
    {
      "type": "range",
      "id": "them_label_font_weight",
      "min": 100,
      "max": 900,
      "step": 100,
      "label": "Label font weight",
      "default": 400
    },
    {
      "type": "color",
      "id": "them_label_color",
      "label": "Label text color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "2nd other products column styling",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "checkbox",
      "id": "them2_gradient_enabled",
      "label": "Enable gradient background",
      "default": false,
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color_background",
      "id": "them2_gradient",
      "label": "Gradient",
      "default": "linear-gradient(135deg, rgba(240, 147, 251, 1), rgba(245, 87, 108, 1) 100%)",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color",
      "id": "them2_background",
      "label": "Background",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color",
      "id": "them2_text_color",
      "label": "Text color",
      "default": "#666666",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "range",
      "id": "them2_label_font_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Label font size",
      "default": 14,
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "range",
      "id": "them2_label_font_weight",
      "min": 100,
      "max": 900,
      "step": 100,
      "label": "Label font weight",
      "default": 400,
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color",
      "id": "them2_label_color",
      "label": "Label text color",
      "default": "#000000",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "range",
      "id": "them2_top_border_width",
      "min": 0,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Top border width",
      "default": 1,
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color",
      "id": "them2_top_border_color",
      "label": "Top border color",
      "default": "#e5e7eb",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "header",
      "content": "Highlight corner radius"
    },
    {
      "type": "range",
      "id": "highlight_corner_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Highlight corner radius",
      "default": 10,
      "info": "Rounds top corners of the Us column header and bottom corners of the last Us/Them row."
    },
    {
      "type": "header",
      "content": "Row height override"
    },
    {
      "type": "checkbox",
      "id": "override_row_height",
      "label": "Override row heights",
      "default": false
    },
    {
      "type": "range",
      "id": "header_row_height",
      "min": 40,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Header row height",
      "default": 72
    },
    {
      "type": "range",
      "id": "us_row_height",
      "min": 40,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Us value row height",
      "default": 60
    },
    {
      "type": "range",
      "id": "them_row_height",
      "min": 40,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Them value row height",
      "default": 60,
      "info": "Also applies to the 2nd Other Products row when enabled."
    },
    {
      "type": "header",
      "content": "Cell styling"
    },
    {
      "type": "range",
      "id": "cell_padding",
      "min": 8,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Cell padding",
      "default": 10
    },
    {
      "type": "range",
      "id": "cell_font_size",
      "min": 11,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Cell font size",
      "default": 13
    },
    {
      "type": "color",
      "id": "cell_text_color",
      "label": "Cell text color",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "benefit_font_weight",
      "min": 100,
      "max": 900,
      "step": 100,
      "label": "Feature label font weight",
      "default": 400
    },
    {
      "type": "header",
      "content": "Borders"
    },
    {
      "type": "range",
      "id": "row_border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Cell border width",
      "default": 0
    },
    {
      "type": "color",
      "id": "row_border_color",
      "label": "Cell border color",
      "default": "#e5e7eb"
    },
    {
      "type": "range",
      "id": "us_top_border_width",
      "min": 0,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Our product top border width",
      "default": 1
    },
    {
      "type": "color",
      "id": "us_top_border_color",
      "label": "Our product top border color",
      "default": "#676767"
    },
    {
      "type": "range",
      "id": "them_top_border_width",
      "min": 0,
      "max": 6,
      "step": 1,
      "unit": "px",
      "label": "Feature & other products top border width",
      "default": 1,
      "info": "Applies to both feature label cells and Other Products cells."
    },
    {
      "type": "color",
      "id": "them_top_border_color",
      "label": "Feature & other products top border color",
      "default": "#e5e7eb"
    },
    {
      "type": "header",
      "content": "Global icon settings"
    },
    {
      "type": "text",
      "id": "us_check_icon",
      "label": "Our product — check icon",
      "default": "check_circle",
      "info": "Material Icon name. Browse at fonts.google.com/icons"
    },
    {
      "type": "text",
      "id": "us_cross_icon",
      "label": "Our product — cross icon",
      "default": "cancel"
    },
    {
      "type": "color",
      "id": "us_icon_color",
      "label": "Our product icon color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "us_icon_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Our product icon size",
      "default": 24
    },
    {
      "type": "text",
      "id": "them_check_icon",
      "label": "Other products — check icon",
      "default": "check_circle"
    },
    {
      "type": "text",
      "id": "them_cross_icon",
      "label": "Other products — cross icon",
      "default": "cancel"
    },
    {
      "type": "color",
      "id": "them_icon_color",
      "label": "Other products icon color",
      "default": "#ef4444"
    },
    {
      "type": "range",
      "id": "them_icon_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Other products icon size",
      "default": 24
    },
    {
      "type": "text",
      "id": "them2_check_icon",
      "label": "2nd other products — check icon",
      "default": "check_circle",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "text",
      "id": "them2_cross_icon",
      "label": "2nd other products — cross icon",
      "default": "cancel",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "color",
      "id": "them2_icon_color",
      "label": "2nd other products icon color",
      "default": "#ef4444",
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "range",
      "id": "them2_icon_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "2nd other products icon size",
      "default": 24,
      "visible_if": "{{ section.settings.enable_them2_column }}"
    },
    {
      "type": "header",
      "content": "Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 60
    },
    {
      "type": "header",
      "content": "Margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color."
    },
    {
      "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 also applies to mobile."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_accent",
      "default": "#6366f1",
      "label": "Accents"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#6366f1",
      "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": "#6366f1",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "comparison_row",
      "name": "Comparison row",
      "settings": [
        {
          "type": "text",
          "id": "benefit_text",
          "label": "Feature / benefit",
          "default": "Feature name"
        },
        {
          "type": "header",
          "content": "Our product value"
        },
        {
          "type": "select",
          "id": "us_value",
          "label": "Our product value",
          "options": [
            { "value": "check", "label": "Check mark" },
            { "value": "cross", "label": "Cross mark" },
            { "value": "google_icon", "label": "Custom icon" },
            { "value": "text", "label": "Custom text" }
          ],
          "default": "check"
        },
        {
          "type": "text",
          "id": "us_google_icon",
          "label": "Custom icon name",
          "default": "check_circle",
          "info": "Material Icon name. Only used when 'Custom icon' is selected."
        },
        {
          "type": "text",
          "id": "us_custom_text",
          "label": "Custom text",
          "info": "Only used when 'Custom text' is selected."
        },
        {
          "type": "select",
          "id": "us_text_align",
          "label": "Custom text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" }
          ],
          "default": "center",
          "info": "Only used when 'Custom text' is selected."
        },
        {
          "type": "color",
          "id": "us_icon_color",
          "label": "Icon color override",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "us_icon_size",
          "min": 16,
          "max": 48,
          "step": 2,
          "unit": "px",
          "label": "Icon size override",
          "default": 24
        },
        {
          "type": "header",
          "content": "Other products value"
        },
        {
          "type": "select",
          "id": "them_value",
          "label": "Other products value",
          "options": [
            { "value": "check", "label": "Check mark" },
            { "value": "cross", "label": "Cross mark" },
            { "value": "google_icon", "label": "Custom icon" },
            { "value": "text", "label": "Custom text" }
          ],
          "default": "cross"
        },
        {
          "type": "text",
          "id": "them_google_icon",
          "label": "Custom icon name",
          "default": "cancel",
          "info": "Material Icon name. Only used when 'Custom icon' is selected."
        },
        {
          "type": "text",
          "id": "them_custom_text",
          "label": "Custom text",
          "info": "Only used when 'Custom text' is selected."
        },
        {
          "type": "select",
          "id": "them_text_align",
          "label": "Custom text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" }
          ],
          "default": "center",
          "info": "Only used when 'Custom text' is selected."
        },
        {
          "type": "color",
          "id": "them_icon_color",
          "label": "Icon color override",
          "default": "#ef4444"
        },
        {
          "type": "range",
          "id": "them_icon_size",
          "min": 16,
          "max": 48,
          "step": 2,
          "unit": "px",
          "label": "Icon size override",
          "default": 24
        },
        {
          "type": "header",
          "content": "2nd other products value",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "select",
          "id": "them2_value",
          "label": "2nd other products value",
          "options": [
            { "value": "check", "label": "Check mark" },
            { "value": "cross", "label": "Cross mark" },
            { "value": "google_icon", "label": "Custom icon" },
            { "value": "text", "label": "Custom text" }
          ],
          "default": "cross",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "text",
          "id": "them2_google_icon",
          "label": "Custom icon name",
          "default": "cancel",
          "info": "Material Icon name. Only used when 'Custom icon' is selected.",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "text",
          "id": "them2_custom_text",
          "label": "Custom text",
          "info": "Only used when 'Custom text' is selected.",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "select",
          "id": "them2_text_align",
          "label": "Custom text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" }
          ],
          "default": "center",
          "info": "Only used when 'Custom text' is selected.",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "color",
          "id": "them2_icon_color",
          "label": "Icon color override",
          "default": "#ef4444",
          "visible_if": "{{ section.settings.enable_them2_column }}"
        },
        {
          "type": "range",
          "id": "them2_icon_size",
          "min": 16,
          "max": 48,
          "step": 2,
          "unit": "px",
          "label": "Icon size override",
          "default": 24,
          "visible_if": "{{ section.settings.enable_them2_column }}"
        }
      ]
    },
    {
      "type": "custom_html",
      "name": "Custom HTML",
      "settings": [
        {
          "type": "html",
          "id": "html_content",
          "label": "HTML content",
          "default": "<div style=\"padding: 1rem; text-align: center;\"><p>Add custom HTML here</p></div>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Comparison table V3",
      "category": "Content",
      "blocks": [
        {
          "type": "comparison_row",
          "settings": {
            "benefit_text": "Multi-Targeted",
            "us_value": "google_icon",
            "us_google_icon": "check_circle",
            "us_icon_color": "#ffffff",
            "them_value": "google_icon",
            "them_google_icon": "arrow_right_alt",
            "them_icon_color": "#ef4444"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "benefit_text": "Drug-Free",
            "us_value": "check",
            "them_value": "text",
            "them_custom_text": "FEW"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "benefit_text": "Bio-Optimized",
            "us_value": "check",
            "them_value": "cross"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "benefit_text": "Clinically Proven",
            "us_value": "check",
            "them_value": "text",
            "them_custom_text": "FEW"
          }
        },
        {
          "type": "comparison_row",
          "settings": {
            "benefit_text": "Doesn't Impact",
            "us_value": "check",
            "them_value": "text",
            "them_custom_text": "FEW"
          }
        }
      ]
    }
  ]
}
{% endschema %}