{%- comment -%} ── Transformation Cards Section ── {%- endcomment -%}

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

{%- liquid
  assign image_mode = section.settings.image_mode
  assign columns    = section.settings.columns
-%}

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

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

  /* ── Heading: bold gradient (title-with-highlight) ── */
  {% if section.settings.enable_gradient %}
    #TransformationCards-{{ section.id }} .tc-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Heading: italic em styling ── */
  #TransformationCards-{{ section.id }} .tc-heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  /* ── Heading wrapper alignment ── */
  #TransformationCards-{{ section.id }} .title-wrapper-with-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    {% if section.settings.heading_alignment == 'left' %}
      text-align: left;
      align-items: flex-start;
    {% elsif section.settings.heading_alignment == 'right' %}
      text-align: right;
      align-items: flex-end;
    {% else %}
      text-align: center;
      align-items: center;
    {% endif %}
    margin-bottom: {{ section.settings.header_bottom_spacing }}px;
  }

  /* ── Subheading ── */
  #TransformationCards-{{ section.id }} .multicolumn-text {
    text-align: {{ section.settings.heading_alignment }};
  }

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

  /* ── Section-scoped design tokens ── */
  #TransformationCards-{{ section.id }} {
    --tc-card-radius:   {{ section.settings.card_border_radius }}px;
    --tc-image-height:  {{ section.settings.image_height }}px;
    --tc-card-bg:       {{ section.settings.card_background_color }};
    --tc-card-text:     {{ section.settings.card_text_color }};
    --tc-accent:        {{ section.settings.accent_color }};
    --tc-benefit-bg:    {{ section.settings.benefit_bg_color }};
    --tc-benefit-radius: {{ section.settings.benefit_border_radius }}px;
    --tc-verified-bg:   {{ section.settings.verified_badge_bg }};
    --tc-verified-radius: {{ section.settings.verified_badge_radius }}px;
    --tc-summary-bg:   {{ section.settings.rating_summary_bg_color }};
    --tc-summary-text: {{ section.settings.summary_text_color }};
    --tc-summary-star: {{ section.settings.summary_star_color }};
    --tc-star-color:    {{ section.settings.star_color }};
    --tc-rating-gap:   {{ section.settings.rating_pill_gap }}px;
    --tc-before-color:  {{ section.settings.before_label_color }};
    --tc-before-bg:     {{ section.settings.before_label_bg }};
    --tc-after-bg:      {{ section.settings.after_label_bg }};
    --tc-after-color:   {{ section.settings.after_label_color }};
    --tc-label-radius:  {{ section.settings.label_border_radius }}px;
    --tc-divider-color: {{ section.settings.slider_divider_color }};
  }

  /* ── Cards grid ── */
  #TransformationCards-{{ section.id }} .tc-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat({{ columns }}, 1fr);
    align-items: start;
  }

  /* ── Card ── */
  #TransformationCards-{{ section.id }} .tc-card {
    background: var(--tc-card-bg);
    border-radius: var(--tc-card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* ── Card image area ── */
  #TransformationCards-{{ section.id }} .tc-card__image-wrap {
    position: relative;
    width: 100%;
    height: var(--tc-image-height);
    overflow: hidden;
    flex-shrink: 0;
  }
  #TransformationCards-{{ section.id }} .tc-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Before/After labels ── */
  #TransformationCards-{{ section.id }} .tc-label {
    position: absolute;
    top: 0;
    padding: 0;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 10;
    border-radius: 0 0 var(--tc-label-radius) var(--tc-label-radius);
    height: 32px;
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 0.05em;
  }
  #TransformationCards-{{ section.id }} .tc-label--before {
    left: 13%;
    background: var(--tc-before-bg);
    color: var(--tc-before-color);
  }
  #TransformationCards-{{ section.id }} .tc-label--after {
    right: 13%;
    background: var(--tc-after-bg);
    color: var(--tc-after-color);
  }

  /* ── img-comparison-slider ── */
  #TransformationCards-{{ section.id }} img-comparison-slider {
    width: 100%;
    height: var(--tc-image-height);
    display: block;
    outline: none;
    --divider-width: 2px;
    --divider-color: var(--tc-divider-color);
    --default-handle-opacity: 0;
    cursor: ew-resize;
  }
  #TransformationCards-{{ section.id }} .tc-comparison-slot {
    width: 100%;
    height: var(--tc-image-height);
    display: block;
  }
  #TransformationCards-{{ section.id }} .tc-comparison-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  #TransformationCards-{{ section.id }} .tc-comparison-handle {
    cursor: ew-resize;
  }

  /* ── Card info ── */
  #TransformationCards-{{ section.id }} .tc-card__info {
    padding: {{ section.settings.card_padding }}px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--tc-card-text);
  }

  /* ── Card header row ── */
  #TransformationCards-{{ section.id }} .tc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #TransformationCards-{{ section.id }} .tc-reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #TransformationCards-{{ section.id }} .tc-reviewer-name {
    font-weight: 700;
    font-size: 15px;
    margin: 0;
  }
  #TransformationCards-{{ section.id }} .tc-card-stars {
    display: flex;
    gap: 2px;
  }
  #TransformationCards-{{ section.id }} .tc-card-star {
    width: 14px;
    height: 14px;
    color: var(--tc-star-color);
  }
  #TransformationCards-{{ section.id }} .tc-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tc-verified-bg);
    padding: 4px 10px;
    border-radius: var(--tc-verified-radius);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--tc-card-text);
    flex-shrink: 0;
  }
  #TransformationCards-{{ section.id }} .tc-verified-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--tc-accent);
  }

  /* ── Card title ── */
  #TransformationCards-{{ section.id }} .tc-card__title {
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.2;
  }

  /* ── Benefits list ── */
  #TransformationCards-{{ section.id }} .tc-benefits {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #TransformationCards-{{ section.id }} .tc-benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tc-benefit-bg);
    padding: 6px 10px;
    border-radius: var(--tc-benefit-radius);
    font-size: 14px;
  }
  #TransformationCards-{{ section.id }} .tc-benefit-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--tc-accent);
  }

  /* ── Testimonial text ── */
  #TransformationCards-{{ section.id }} .tc-testimonial {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.85;
    margin: 0;
  }

  /* ── Tablet grid ── */
  @media screen and (max-width: 989px) {
    #TransformationCards-{{ section.id }} .tc-grid {
      grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
      gap: 14px;
    }
  }

  /* ── Mobile: always single column ── */
  @media screen and (max-width: 749px) {
    #TransformationCards-{{ section.id }} .tc-grid {
      grid-template-columns: 1fr;
    }
    #TransformationCards-{{ section.id }} .tc-card__info {
      padding: 16px 16px 22px;
    }
  }
{%- endstyle -%}

{%- comment -%} Load img-comparison-slider library only when before/after mode is active {%- endcomment -%}
{% if image_mode == 'before_after' and section.blocks.size > 0 %}
  <script defer src="https://unpkg.com/img-comparison-slider@8/dist/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/img-comparison-slider@8/dist/styles.css">
{% endif %}

<div
  id="TransformationCards-{{ section.id }}"
  class="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="page-width section-{{ section.id }}-padding">

    {%- comment -%} ── Section header ── {%- endcomment -%}
    <div class="animate-item animate-item--child index-0">

      {%- unless section.settings.title == blank -%}
        <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin">
          <h2 class="title {{ section.settings.heading_size }} title-with-highlight tc-heading"
              style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text:{{ section.settings.title_gradient_background }};">
            {{ section.settings.title }}
          </h2>
        </div>
      {%- endunless -%}

      {%- unless section.settings.subheading == blank -%}
        <div class="multicolumn-text rte">{{ section.settings.subheading }}</div>
      {%- endunless -%}

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

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

    {%- comment -%} ── Cards grid ── {%- endcomment -%}
    {% if section.blocks.size > 0 %}
      <div class="tc-grid">
        {% for block in section.blocks %}
          {%- liquid
            assign rating    = block.settings.rating | default: 5
            assign benefit_1 = block.settings.benefit_1
            assign benefit_2 = block.settings.benefit_2
            assign benefit_3 = block.settings.benefit_3
          -%}

          <div class="tc-card animate-item animate-item--child index-{{ forloop.index }}" {{ block.shopify_attributes }}>

            {%- comment -%} ── Image area ── {%- endcomment -%}
            <div class="tc-card__image-wrap">
              {% if image_mode == 'before_after' %}
                {%- comment -%} Before/After: only the image draggable — card itself stays static {%- endcomment -%}
                <img-comparison-slider>
                  <div slot="first" class="tc-comparison-slot">
                    {% if block.settings.before_image != blank %}
                      {{ block.settings.before_image | image_url: width: 800 | image_tag:
                          loading: 'lazy',
                          alt: block.settings.before_image.alt | default: 'Before'
                      }}
                    {% else %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {% endif %}
                    {% if section.settings.show_before_after_labels %}
                      <span class="tc-label tc-label--before">{{ section.settings.before_label_text }}</span>
                    {% endif %}
                  </div>
                  <div slot="second" class="tc-comparison-slot">
                    {% if block.settings.after_image != blank %}
                      {{ block.settings.after_image | image_url: width: 800 | image_tag:
                          loading: 'lazy',
                          alt: block.settings.after_image.alt | default: 'After'
                      }}
                    {% else %}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {% endif %}
                    {% if section.settings.show_before_after_labels %}
                      <span class="tc-label tc-label--after">{{ section.settings.after_label_text }}</span>
                    {% endif %}
                  </div>
                  <div slot="handle" class="tc-comparison-handle">
                    <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="22.5" cy="22.5" r="21.5" fill="white"/>
                      <path d="M32.5 17.9L37 22.5L32.5 27.1" stroke="black" stroke-width="1.5"/>
                      <path d="M12.5 17.9L8 22.5L12.5 27.1" stroke="black" stroke-width="1.5"/>
                      <line x1="22.5" y1="13" x2="22.5" y2="32" stroke="black" stroke-width="1" stroke-opacity="0.08"/>
                    </svg>
                  </div>
                </img-comparison-slider>

              {% else %}
                {%- comment -%} Single image mode {%- endcomment -%}
                {% if block.settings.card_image != blank %}
                  {{ block.settings.card_image | image_url: width: 800 | image_tag:
                      loading: 'lazy',
                      alt: block.settings.card_image.alt | default: block.settings.reviewer_name
                  }}
                {% else %}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {% endif %}
              {% endif %}
            </div>{%- comment -%} /.tc-card__image-wrap {%- endcomment -%}

            {%- comment -%} ── Card info ── {%- endcomment -%}
            <div class="tc-card__info">

              {%- comment -%} Reviewer name + stars | verified badge {%- endcomment -%}
              <div class="tc-card__header">
                <div class="tc-reviewer-info">
                  <span class="tc-reviewer-name">
                    {{- block.settings.reviewer_name | escape -}}{% if block.settings.reviewer_age != blank %}, {{ block.settings.reviewer_age | escape }}{% endif %}
                  </span>
                  <span class="tc-card-stars" aria-label="{{ rating }} out of 5 stars">
                    {% for i in (1..5) %}
                      <svg class="tc-card-star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M11.5245 3.46353C11.6741 3.00287 12.3259 3.00287 12.4755 3.46353L14.1329 8.56434C14.1998 8.77035 14.3918 8.90983 14.6084 8.90983H19.9717C20.4561 8.90983 20.6575 9.52964 20.2656 9.81434L15.9266 12.9668C15.7514 13.0941 15.678 13.3198 15.745 13.5258L17.4023 18.6266C17.552 19.0873 17.0248 19.4704 16.6329 19.1857L12.2939 16.0332C12.1186 15.9059 11.8814 15.9059 11.7061 16.0332L7.3671 19.1857C6.97524 19.4704 6.448 19.0873 6.59768 18.6266L8.25503 13.5258C8.32197 13.3198 8.24864 13.0941 8.07339 12.9668L3.73438 9.81434C3.34253 9.52964 3.54392 8.90983 4.02828 8.90983H9.39159C9.6082 8.90983 9.80018 8.77035 9.86712 8.56434L11.5245 3.46353Z"
                          {% if i <= rating %}fill="currentColor"{% else %}fill="none" stroke="currentColor" stroke-width="1.5"{% endif %}/>
                      </svg>
                    {% endfor %}
                  </span>
                </div>
                {% if block.settings.show_verified_badge %}
                  <span class="tc-verified-badge">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5924 3.20027C9.34888 3.4078 9.22711 3.51158 9.09706 3.59874C8.79896 3.79854 8.46417 3.93721 8.1121 4.00672C7.95851 4.03705 7.79903 4.04977 7.48008 4.07522C6.6787 4.13918 6.278 4.17115 5.94371 4.28923C5.17051 4.56233 4.56233 5.17051 4.28923 5.94371C4.17115 6.278 4.13918 6.6787 4.07522 7.48008C4.04977 7.79903 4.03705 7.95851 4.00672 8.1121C3.93721 8.46417 3.79854 8.79896 3.59874 9.09706C3.51158 9.22711 3.40781 9.34887 3.20027 9.5924C2.67883 10.2043 2.4181 10.5102 2.26522 10.8301C1.91159 11.57 1.91159 12.43 2.26522 13.1699C2.41811 13.4898 2.67883 13.7957 3.20027 14.4076C3.40778 14.6511 3.51158 14.7729 3.59874 14.9029C3.79854 15.201 3.93721 15.5358 4.00672 15.8879C4.03705 16.0415 4.04977 16.201 4.07522 16.5199C4.13918 17.3213 4.17115 17.722 4.28923 18.0563C4.56233 18.8295 5.17051 19.4377 5.94371 19.7108C6.278 19.8288 6.6787 19.8608 7.48008 19.9248C7.79903 19.9502 7.95851 19.963 8.1121 19.9933C8.46417 20.0628 8.79896 20.2015 9.09706 20.4013C9.22711 20.4884 9.34887 20.5922 9.5924 20.7997C10.2043 21.3212 10.5102 21.5819 10.8301 21.7348C11.57 22.0884 12.43 22.0884 13.1699 21.7348C13.4898 21.5819 13.7957 21.3212 14.4076 20.7997C14.6511 20.5922 14.7729 20.4884 14.9029 20.4013C15.201 20.2015 15.5358 20.0628 15.8879 19.9933C16.0415 19.963 16.201 19.9502 16.5199 19.9248C17.3213 19.8608 17.722 19.8288 18.0563 19.7108C18.8295 19.4377 19.4377 18.8295 19.7108 18.0563C19.8288 17.722 19.8608 17.3213 19.9248 16.5199C19.9502 16.201 19.963 16.0415 19.9933 15.8879C20.0628 15.5358 20.2015 15.201 20.4013 14.9029C20.4884 14.7729 20.5922 14.6511 20.7997 14.4076C21.3212 13.7957 21.5819 13.4898 21.7348 13.1699C22.0884 12.43 22.0884 11.57 21.7348 10.8301C21.5819 10.5102 21.3212 10.2043 20.7997 9.5924C20.5922 9.34887 20.4884 9.22711 20.4013 9.09706C20.2015 8.79896 20.0628 8.46417 19.9933 8.1121C19.963 7.95851 19.9502 7.79903 19.9248 7.48008C19.8608 6.6787 19.8288 6.278 19.7108 5.94371C19.4377 5.17051 18.8295 4.56233 18.0563 4.28923C17.722 4.17115 17.3213 4.13918 16.5199 4.07522C16.201 4.04977 16.0415 4.03705 15.8879 4.00672C15.5358 3.93721 15.201 3.79854 14.9029 3.59874C14.7729 3.51158 14.6511 3.40781 14.4076 3.20027C13.7957 2.67883 13.4898 2.41811 13.1699 2.26522C12.43 1.91159 11.57 1.91159 10.8301 2.26522C10.5102 2.4181 10.2043 2.67883 9.5924 3.20027ZM16.3735 9.86314C16.6913 9.5453 16.6913 9.03 16.3735 8.71216C16.0557 8.39433 15.5403 8.39433 15.2225 8.71216L10.3723 13.5624L8.77746 11.9676C8.45963 11.6498 7.94432 11.6498 7.62649 11.9676C7.30866 12.2854 7.30866 12.8007 7.62649 13.1186L9.79678 15.2889C10.1146 15.6067 10.6299 15.6067 10.9478 15.2889L16.3735 9.86314Z" fill="currentColor"/>
                    </svg>
                    {{ section.settings.verified_badge_text | escape }}
                  </span>
                {% endif %}
              </div>

              {%- comment -%} Transformation title {%- endcomment -%}
              {%- unless block.settings.card_title == blank -%}
                <h3 class="tc-card__title">{{ block.settings.card_title | escape }}</h3>
              {%- endunless -%}

              {%- comment -%} Benefit checkmarks {%- endcomment -%}
              {%- if benefit_1 != blank or benefit_2 != blank or benefit_3 != blank -%}
                <div class="tc-benefits">
                  {% if benefit_1 != blank %}
                    <div class="tc-benefit-item">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
                      <span>{{ benefit_1 | escape }}</span>
                    </div>
                  {% endif %}
                  {% if benefit_2 != blank %}
                    <div class="tc-benefit-item">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
                      <span>{{ benefit_2 | escape }}</span>
                    </div>
                  {% endif %}
                  {% if benefit_3 != blank %}
                    <div class="tc-benefit-item">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
                      <span>{{ benefit_3 | escape }}</span>
                    </div>
                  {% endif %}
                </div>
              {%- endif -%}

              {%- comment -%} Testimonial quote {%- endcomment -%}
              {%- unless block.settings.testimonial == blank -%}
                <p class="tc-testimonial">{{ block.settings.testimonial }}</p>
              {%- endunless -%}

            </div>{%- comment -%} /.tc-card__info {%- endcomment -%}
          </div>{%- comment -%} /.tc-card {%- endcomment -%}
        {% endfor %}
      </div>
    {% else %}
      <p style="text-align:center;opacity:0.6;">Add transformation cards using the block editor.</p>
    {% endif %}

  </div>
</div>

{% schema %}
{
  "name": "Transformation cards",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false,
      "info": "ID can be used as a button link to scroll to this section."
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        {
          "value": "always-display",
          "label": "All devices"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        }
      ],
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "REAL MEN. REAL TRANSFORMATIONS.",
      "info": "Bold words to highlight them with a color. Italicize words to apply the Italic text style set below."
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "header_bottom_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space below header",
      "default": 32
    },
    {
      "type": "header",
      "content": "Bold text highlight"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#EF4A65"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Use gradient for bold text",
      "default": false,
      "info": "Overrides the solid highlight color with a gradient."
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Bold text gradient",
      "default": "linear-gradient(45deg, #EF4A65 0%, #FF6B9D 100%)",
      "visible_if": "{{ section.settings.enable_gradient }}"
    },
    {
      "type": "header",
      "content": "Italic text styling",
      "info": "Controls how italic text in the heading is displayed."
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic style",
      "options": [
        {
          "value": "italic",
          "label": "Normal italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom font family"
        }
      ],
      "default": "underline"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.italic_style == 'underline' }}"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "visible_if": "{{ section.settings.italic_style == 'underline' }}"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic font family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        }
      ],
      "default": "serif",
      "visible_if": "{{ section.settings.italic_style == 'font_family' }}"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic font weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "300",
          "label": "Light 300"
        },
        {
          "value": "400",
          "label": "Regular 400"
        },
        {
          "value": "500",
          "label": "Medium 500"
        },
        {
          "value": "600",
          "label": "Semi Bold 600"
        },
        {
          "value": "700",
          "label": "Bold 700"
        },
        {
          "value": "800",
          "label": "Extra Bold 800"
        },
        {
          "value": "900",
          "label": "Black 900"
        }
      ],
      "default": "inherit",
      "visible_if": "{{ section.settings.italic_style == 'font_family' }}"
    },
    {
      "type": "header",
      "content": "Subheading"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "See the visible changes thousands of men have experienced."
    },
    {
      "type": "header",
      "content": "Rating summary pill"
    },
    {
      "type": "checkbox",
      "id": "show_header_rating",
      "label": "Show rating summary pill",
      "default": true
    },
    {
      "type": "text",
      "id": "rating_summary_text",
      "label": "Rating text",
      "default": "Rated 4.8/5 based on +10,839 total ratings",
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "range",
      "id": "rating_summary_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Pill border radius",
      "default": 50,
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "range",
      "id": "rating_summary_font_size",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 13,
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "color",
      "id": "rating_summary_bg_color",
      "label": "Background",
      "default": "#FEF6E6",
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "color",
      "id": "summary_text_color",
      "label": "Text color",
      "default": "#7a5c00",
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "color",
      "id": "summary_star_color",
      "label": "Star color",
      "default": "#FFBF00",
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "checkbox",
      "id": "enable_rating_summary_border",
      "label": "Show border",
      "default": true,
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "range",
      "id": "rating_summary_border_width",
      "min": 1,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1,
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "select",
      "id": "rating_summary_border_style",
      "label": "Border style",
      "options": [
        {
          "value": "solid",
          "label": "Solid"
        },
        {
          "value": "dashed",
          "label": "Dashed"
        },
        {
          "value": "dotted",
          "label": "Dotted"
        }
      ],
      "default": "solid",
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "color",
      "id": "rating_summary_border_color",
      "label": "Border color",
      "default": "#FFBF00",
      "visible_if": "{{ section.settings.enable_rating_summary_border }}"
    },
    {
      "type": "range",
      "id": "rating_pill_gap",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space below pill (before cards)",
      "default": 32,
      "visible_if": "{{ section.settings.show_header_rating }}"
    },
    {
      "type": "header",
      "content": "Image mode"
    },
    {
      "type": "select",
      "id": "image_mode",
      "label": "Image type",
      "options": [
        {
          "value": "before_after",
          "label": "Before / After slider"
        },
        {
          "value": "single",
          "label": "Single image"
        }
      ],
      "default": "before_after",
      "info": "Before/After: each card shows a draggable before & after comparison. Single: one static image per card."
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 150,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Image area height",
      "default": 300
    },
    {
      "type": "header",
      "content": "Before / After labels",
      "info": "Only used in Before / After slider mode."
    },
    {
      "type": "checkbox",
      "id": "show_before_after_labels",
      "label": "Show Before / After labels",
      "default": true,
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "text",
      "id": "before_label_text",
      "label": "Before label",
      "default": "Before",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "text",
      "id": "after_label_text",
      "label": "After label",
      "default": "After",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "color",
      "id": "before_label_color",
      "label": "Before label text color",
      "default": "#A45B2C",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "color",
      "id": "before_label_bg",
      "label": "Before label background",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "color",
      "id": "after_label_bg",
      "label": "After label background",
      "default": "#A45B2C",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "color",
      "id": "after_label_color",
      "label": "After label text color",
      "default": "#F2E9DB",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "range",
      "id": "label_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Label border radius",
      "default": 8,
      "info": "Applied to the bottom corners of Before / After labels.",
      "visible_if": "{{ section.settings.image_mode == 'before_after' and section.settings.show_before_after_labels }}"
    },
    {
      "type": "color",
      "id": "slider_divider_color",
      "label": "Slider divider line color",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.image_mode == 'before_after' }}"
    },
    {
      "type": "header",
      "content": "Layout",
      "info": "On mobile, cards always stack to a single column regardless of the settings below."
    },
    {
      "type": "range",
      "id": "columns",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Columns (desktop)",
      "default": 2
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Columns (tablet)",
      "default": 2
    },
    {
      "type": "header",
      "content": "Card design"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Card border radius",
      "default": 10
    },
    {
      "type": "range",
      "id": "card_padding",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card inner padding",
      "default": 20
    },
    {
      "type": "color",
      "id": "card_background_color",
      "label": "Card background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_text_color",
      "label": "Card text color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "star_color",
      "label": "Card star color",
      "default": "#F5A623"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent / checkmark color",
      "default": "#A45B2C"
    },
    {
      "type": "color",
      "id": "benefit_bg_color",
      "label": "Benefit row background",
      "default": "#FAF6EF"
    },
    {
      "type": "range",
      "id": "benefit_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Benefit row border radius",
      "default": 8
    },
    {
      "type": "color",
      "id": "verified_badge_bg",
      "label": "Verified badge background",
      "default": "#FAF6EF"
    },
    {
      "type": "range",
      "id": "verified_badge_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Verified badge border radius",
      "default": 20
    },
    {
      "type": "text",
      "id": "verified_badge_text",
      "label": "Verified badge text",
      "default": "Verified Customer"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Section color scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-2"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 60
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#1a1a1a",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "Replaces Background color when set.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the desktop image is used on mobile.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Transformation Card",
      "settings": [
        {
          "type": "header",
          "content": "Image"
        },
        {
          "type": "image_picker",
          "id": "before_image",
          "label": "Before image",
          "info": "Used in Before / After slider mode."
        },
        {
          "type": "image_picker",
          "id": "after_image",
          "label": "After image",
          "info": "Used in Before / After slider mode."
        },
        {
          "type": "image_picker",
          "id": "card_image",
          "label": "Single image",
          "info": "Used in Single image mode."
        },
        {
          "type": "header",
          "content": "Reviewer"
        },
        {
          "type": "text",
          "id": "reviewer_name",
          "label": "Name",
          "default": "Mark P."
        },
        {
          "type": "text",
          "id": "reviewer_age",
          "label": "Age / location (optional)",
          "default": "54",
          "info": "Displayed after the name with a comma — e.g. \"Mark P., 54\""
        },
        {
          "type": "range",
          "id": "rating",
          "min": 1,
          "max": 5,
          "step": 1,
          "label": "Star rating",
          "default": 5
        },
        {
          "type": "checkbox",
          "id": "show_verified_badge",
          "label": "Show verified badge",
          "default": true
        },
        {
          "type": "header",
          "content": "Card content"
        },
        {
          "type": "text",
          "id": "card_title",
          "label": "Transformation title",
          "default": "Deep Wrinkles & Lines"
        },
        {
          "type": "header",
          "content": "Benefits (up to 3)"
        },
        {
          "type": "text",
          "id": "benefit_1",
          "label": "Benefit 1",
          "default": "Smooths forehead and eye wrinkles"
        },
        {
          "type": "text",
          "id": "benefit_2",
          "label": "Benefit 2",
          "default": "Rebuilds firmness and hydration"
        },
        {
          "type": "text",
          "id": "benefit_3",
          "label": "Benefit 3",
          "default": "Brings back a healthy, youthful tone"
        },
        {
          "type": "header",
          "content": "Testimonial"
        },
        {
          "type": "textarea",
          "id": "testimonial",
          "label": "Quote text",
          "default": "\"I've tried everything from pharmacy creams to overpriced serums. Nothing made a difference until this. My wife said my skin looks tighter and I finally look rested again.\""
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Transformation cards",
      "category": "Stats / Results",
      "settings": {
        "title": "REAL MEN. REAL TRANSFORMATIONS.",
        "subheading": "See the visible changes thousands of men have experienced.",
        "image_mode": "before_after",
        "columns": 2,
        "color_scheme": "background-2"
      },
      "blocks": [
        {
          "type": "card",
          "settings": {
            "reviewer_name": "Mark P.",
            "reviewer_age": "54",
            "rating": 5,
            "card_title": "Deep Wrinkles & Lines",
            "benefit_1": "Smooths forehead and eye wrinkles",
            "benefit_2": "Rebuilds firmness and hydration",
            "benefit_3": "Brings back a healthy, youthful tone",
            "testimonial": "\"I've tried everything from pharmacy creams to overpriced serums. Nothing made a difference until this. My wife said my skin looks tighter and I finally look rested again.\""
          }
        },
        {
          "type": "card",
          "settings": {
            "reviewer_name": "Anthony R.",
            "reviewer_age": "48",
            "rating": 5,
            "card_title": "Tired, Dull Skin",
            "benefit_1": "Revives tired-looking skin",
            "benefit_2": "Locks in moisture all day",
            "benefit_3": "Makes skin look alive again",
            "testimonial": "\"I used to look drained no matter how much I slept. This changed that within two weeks. My skin feels alive, hydrated, and younger.\""
          }
        }
      ]
    }
  ]
}
{% endschema %}