{% 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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
  rel="stylesheet"
>

{%- style -%}
    .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;
      margin-top: {{ section.settings.margin_top }}px;
      margin-bottom: {{ section.settings.margin_bottom }}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;
      }
    }

    .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 }};
      --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
      --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
      --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
      background-attachment: scroll !important;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: auto;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
      perspective: 1000;
    }
    {% if section.settings.custom_mobile_image_background != blank %}
      @media screen and (max-width: 740px) {
        .color-scheme-{{ section.id }}.color-custom {
          {% # theme-check-disable %}
          --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
          {% # theme-check-enable %}
        }
      }
    {% endif %}

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

    {% if section.settings.enable_gradient %}
      #WellnessJourney-{{ section.id }} .wj-heading strong {
        background: {{ section.settings.title_gradient_background }};
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-style: normal;
      }
    {% endif %}

    /* ── Layout ── */
    #WellnessJourney-{{ section.id }} .wj-inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: {{ section.settings.column_gap }}px;
    }

    #WellnessJourney-{{ section.id }} .wj-content-col {
      text-align: {{ section.settings.heading_alignment }};
      display: flex;
      flex-direction: column;
      align-items: {% if section.settings.heading_alignment == 'left' %}flex-start{% elsif section.settings.heading_alignment == 'right' %}flex-end{% else %}center{% endif %};
      width: {{ section.settings.content_col_width }}%;
      flex-shrink: 0;
    }

    #WellnessJourney-{{ section.id }} .wj-timeline-col {
      flex: 1;
    }

    /* ── Media wrap ── */
    #WellnessJourney-{{ section.id }} .wj-brand-media-wrap {
      width: 100%;
      margin-bottom: {{ section.settings.image_bottom_spacing }}px;
    }

    #WellnessJourney-{{ section.id }} .wj-brand-image {
      width: 100%;
      object-fit: cover;
      display: block;
    }

    {% if section.settings.hide_image_mobile %}
      @media screen and (max-width: 991px) {
        #WellnessJourney-{{ section.id }} .wj-brand-media-wrap {
          display: none !important;
        }
      }
    {% endif %}

    /* ── Heading / description ── */
    #WellnessJourney-{{ section.id }} .wj-heading {
      margin-bottom: {{ section.settings.heading_bottom_spacing }}px;
    }

    #WellnessJourney-{{ section.id }} .wj-description {
      margin-bottom: {{ section.settings.description_bottom_spacing }}px;
      max-width: {{ section.settings.description_max_width }}px;
      font-size: {{ section.settings.description_size }}px;
      line-height: 1.4;
    }

    /* ── CTA button ── */
    #WellnessJourney-{{ section.id }} .wj-cta-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: {{ section.settings.button_max_width }}px;
      height: {{ section.settings.button_height }}px;
      border-radius: {{ section.settings.button_border_radius }}px;
      background: {% if section.settings.override_button_colors %}{{ section.settings.button_bg_color }}{% else %}rgb(var(--color-button)){% endif %};
      color: {% if section.settings.override_button_colors %}{{ section.settings.button_text_color }}{% else %}rgb(var(--color-button-text)){% endif %};
      font-weight: 500;
      font-size: {{ section.settings.button_font_size }}px;
      text-decoration: none;
      transition: 0.3s ease;
      padding: 0 24px;
      border: 2px solid transparent;
    }
    #WellnessJourney-{{ section.id }} .wj-cta-btn:hover {
      background: transparent;
      border-color: {% if section.settings.override_button_colors %}{{ section.settings.button_bg_color }}{% else %}rgb(var(--color-button)){% endif %};
      color: {% if section.settings.override_button_colors %}{{ section.settings.button_bg_color }}{% else %}rgb(var(--color-button)){% endif %};
    }

    /* ── Guarantee note ── */
    #WellnessJourney-{{ section.id }} .wj-guarantee-note {
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      gap: {{ section.settings.guarantee_icon_size | times: 0.4 | round: 0 }}px;
      font-size: {{ section.settings.guarantee_font_size }}px;
      color: {{ section.settings.guarantee_text_color }};
    }
    #WellnessJourney-{{ section.id }} .wj-guarantee-img {
      width: {{ section.settings.guarantee_icon_size }}px;
      height: {{ section.settings.guarantee_icon_size }}px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }
    #WellnessJourney-{{ section.id }} .wj-guarantee-mat-icon {
      font-size: {{ section.settings.guarantee_icon_size }}px;
      color: {{ section.settings.guarantee_icon_color }};
      font-variation-settings: 'FILL' {{ section.settings.guarantee_icon_fill }}, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      line-height: 1;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      user-select: none;
    }

    /* ── Timeline position on desktop ── */
    {% if section.settings.timeline_position_desktop == 'left' %}
      @media screen and (min-width: 992px) {
        #WellnessJourney-{{ section.id }} .wj-inner {
          flex-direction: row-reverse;
        }
      }
    {% endif %}

    /* ── Hide content col on desktop ── */
    {% if section.settings.hide_content_col_desktop %}
      @media screen and (min-width: 992px) {
        #WellnessJourney-{{ section.id }} .wj-content-col {
          display: none !important;
        }
        #WellnessJourney-{{ section.id }} .wj-timeline-col {
          width: 100%;
          flex: none;
        }
        #WellnessJourney-{{ section.id }} .wj-inner {
          display: block;
        }
      }
    {% endif %}

    /* ── Sticky content col on desktop ── */
    /* align-self: flex-start prevents the column stretching to full row height,
       which is required for position: sticky to fire correctly */
    {% if section.settings.sticky_content_col %}
      @media screen and (min-width: 992px) {
        #WellnessJourney-{{ section.id }} .wj-content-col {
          position: sticky;
          top: {{ section.settings.sticky_offset }}px;
          align-self: flex-start;
        }
      }
    {% endif %}

    /* ── Timeline ── */
    #WellnessJourney-{{ section.id }} .wj-milestones {
      display: flex;
      flex-direction: column;
      gap: {{ section.settings.milestone_gap }}px;
    }

    #WellnessJourney-{{ section.id }} .wj-milestone {
      position: relative;
      padding-left: 32px;
    }

    #WellnessJourney-{{ section.id }} .wj-timeline-dot {
      position: absolute;
      left: 0;
      top: 14px;
      width: {{ section.settings.dot_size }}px;
      height: {{ section.settings.dot_size }}px;
      border-radius: 50%;
      background: {{ section.settings.dot_inactive_color }};
      z-index: 1;
      transition: background 1s ease;
    }
    #WellnessJourney-{{ section.id }} .wj-milestone.is-active .wj-timeline-dot {
      background: {{ section.settings.accent_color }};
    }

    #WellnessJourney-{{ section.id }} .wj-timeline-line {
      position: absolute;
      left: calc({{ section.settings.dot_size | divided_by: 2 }}px - 1px);
      top: calc(14px + {{ section.settings.dot_size }}px);
      width: 2px;
      height: calc(100% + {{ section.settings.milestone_gap }}px);
      background: {{ section.settings.dot_inactive_color }};
      pointer-events: none;
    }
    #WellnessJourney-{{ section.id }} .wj-milestone:last-child .wj-timeline-line {
      display: none;
    }

    #WellnessJourney-{{ section.id }} .wj-timeline-progress {
      position: absolute;
      left: calc({{ section.settings.dot_size | divided_by: 2 }}px - 2px);
      top: calc(14px + {{ section.settings.dot_size }}px);
      width: 4px;
      height: 0;
      background: {{ section.settings.accent_color }};
      z-index: 1;
      pointer-events: none;
      transition: height 1.5s ease;
    }
    #WellnessJourney-{{ section.id }} .wj-milestone.is-active .wj-timeline-progress {
      height: calc(100% + {{ section.settings.milestone_gap }}px);
    }
    #WellnessJourney-{{ section.id }} .wj-milestone:last-child .wj-timeline-progress {
      display: none;
    }

    /* ── Milestone label ── */
    #WellnessJourney-{{ section.id }} .wj-week-label {
      display: flex;
      align-items: center;
      min-height: {{ section.settings.label_height }}px;
      padding: 4px {{ section.settings.label_padding_x }}px;
      border-radius: {{ section.settings.label_border_radius }}px;
      background: {{ section.settings.label_inactive_bg }};
      color: {{ section.settings.label_inactive_text }};
      font-weight: 500;
      font-size: {{ section.settings.label_font_size }}px;
      margin-bottom: {{ section.settings.label_bottom_spacing }}px;
      transition: background 1.5s ease, color 1.5s ease;
    }
    #WellnessJourney-{{ section.id }} .wj-milestone.is-active .wj-week-label {
      background: {{ section.settings.accent_color }};
      color: {{ section.settings.label_active_text }};
    }

    /* ── Bullet list ── */
    #WellnessJourney-{{ section.id }} .wj-bullets {
      list-style: none;
      padding: 0;
      margin: 0 0 {{ section.settings.milestone_gap | divided_by: 2 }}px;
    }
    #WellnessJourney-{{ section.id }} .wj-bullets li {
      position: relative;
      padding-left: {{ section.settings.bullet_icon_size | plus: 8 }}px;
      font-size: {{ section.settings.bullet_font_size }}px;
      line-height: 1.4;
      margin-bottom: {{ section.settings.bullet_spacing }}px;
    }
    #WellnessJourney-{{ section.id }} .wj-bullets li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: {{ section.settings.bullet_icon_size }}px;
      height: {{ section.settings.bullet_icon_size }}px;
      background-image: url('{{ section.settings.bullet_icon | img_url: 'master' }}');
      background-size: contain;
      background-repeat: no-repeat;
      {% if section.settings.bullet_icon == blank %}
        background-image: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: {{ section.settings.accent_color }};
        top: 7px;
      {% endif %}
    }

  #WellnessJourney-{{ section.id }} .wj-milestone-description.is-above {
    font-size: {{ section.settings.bullet_font_size }}px;
    line-height: 1.5;
    margin-bottom: 0;
  }
  #WellnessJourney-{{ section.id }} .wj-milestone-description.is-below {
    font-size: {{ section.settings.bullet_font_size }}px;
    line-height: 1.5;
    margin-top: 0;
  }

    /* ── Mobile action callout ── */
    #WellnessJourney-{{ section.id }} .wj-mobile-callout {
      margin-top: 24px;
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* ── Responsive ── */
    @media screen and (max-width: 991px) {
      #WellnessJourney-{{ section.id }} .wj-inner {
        flex-wrap: wrap;
        gap: {{ section.settings.mobile_col_gap }}px;
      }
      #WellnessJourney-{{ section.id }} .wj-content-col {
        width: 100%;
        align-items: center;
        text-align: center;
      }
      #WellnessJourney-{{ section.id }} .wj-timeline-col {
        width: 100%;
      }
      #WellnessJourney-{{ section.id }} .wj-hide-mobile {
        display: none !important;
      }
      #WellnessJourney-{{ section.id }} .wj-mobile-callout {
        display: flex;
      }
      #WellnessJourney-{{ section.id }} .wj-mobile-callout .wj-guarantee-note {
        justify-content: center;
      }
      #WellnessJourney-{{ section.id }} .wj-week-label {
        font-size: {{ section.settings.label_font_size | times: 0.75 | round: 0 }}px;
        min-height: 36px;
        padding: 8px {{ section.settings.label_padding_x | times: 0.7 | round: 0 }}px;
      }
      #WellnessJourney-{{ section.id }} .wj-bullets li {
        font-size: {{ section.settings.bullet_font_size | times: 0.8 | round: 0 }}px;
      }
    }
    @media screen and (min-width: 992px) {
      #WellnessJourney-{{ section.id }} .wj-hide-desktop {
        display: none !important;
      }
    }

    /* ── Animation backface fix ── */
    .section-{{ section.id }}-padding .animate-section,
    .section-{{ section.id }}-padding .animate-item {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 1000;
      perspective: 1000;
    }
{%- endstyle -%}

<div
  id="WellnessJourney-{{ section.id }}"
  class="wellness-journey animate-section{% unless request.design_mode %} animate--hidden{% endunless %} color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding {{ section.settings.visibility }}"
>
  {% 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">
    <div class="wj-inner">
      {%- comment -%} ── LEFT: Content column ── {%- endcomment -%}
      <div class="wj-content-col animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 0;">
        {%- liquid
          assign has_media = false
          if section.settings.video != blank or section.settings.brand_image != blank
            assign has_media = true
          endif
          assign video_autoplay = false
          if section.settings.video_muted_autoplay
            assign video_autoplay = true
          endif
        -%}

        {%- if has_media -%}
          <div class="wj-brand-media-wrap animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 1;">
            {%- if section.settings.video != blank -%}
              <div
                class="wj-brand-media media media--transparent global-media-settings ratio"
                style="position: relative; --ratio-percent: {{ 1 | divided_by: section.settings.video.aspect_ratio | times: 100 }}%;"
              >
                <internal-video data-autoplay="{{ video_autoplay }}" data-no-play-btn="{{ video_autoplay }}">
                  <video
                    width="100%"
                    height="auto"
                    preload="metadata"
                    poster="{{ section.settings.video.preview_image | image_url }}"
                    {% if video_autoplay %}
                      muted autoplay loop
                    {% endif %}
                    playsinline
                    disablepictureinpicture
                  >
                    {% for source in section.settings.video.sources %}
                      <source
                        {% if video_autoplay %}
                          data-
                        {% endif -%}
                        src="{{ source.url }}"
                        type="{{ source.mime_type }}"
                      >
                    {% endfor %}
                  </video>
                  <button
                    class="internal-video__play"
                    {% if video_autoplay %}
                      style="visibility: hidden;"
                    {% endif %}
                  >
                    <div class="play-button color-accent-1">
                      {%- render 'icon-play' -%}
                    </div>
                  </button>
                </internal-video>
              </div>
            {%- elsif section.settings.brand_image != blank -%}
              {{
                section.settings.brand_image
                | image_url: width: 800
                | image_tag:
                  loading: 'lazy',
                  widths: '400, 600, 800',
                  class: 'wj-brand-image',
                  alt: section.settings.brand_image.alt
              }}
            {%- endif -%}
          </div>
        {%- endif -%}

        {%- unless section.settings.title == blank -%}
          {%- if section.settings.heading_two_lines and section.settings.heading_line_two != blank -%}
            {%- assign heading_line_two_with_br = '<br>' | append: section.settings.heading_line_two -%}
            {%- assign heading_output = section.settings.title
              | replace: section.settings.heading_line_two, heading_line_two_with_br
            -%}
          {%- else -%}
            {%- assign heading_output = section.settings.title -%}
          {%- endif -%}
          <h2
            class="wj-heading title {{ section.settings.heading_size }} title-with-highlight animate-item{% unless request.design_mode %} animate-item--child{% endunless %}"
            style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }}; --index: 2;"
          >
            {{ heading_output }}
          </h2>
        {%- endunless -%}

        {%- unless section.settings.description == blank -%}
          <div class="wj-description rte animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 3;">
            {{ section.settings.description }}
          </div>
        {%- endunless -%}

        {%- if section.settings.button_label != blank -%}
          <a
            href="{{ section.settings.button_link | default: '#' }}"
            class="wj-cta-btn wj-hide-mobile animate-item{% unless request.design_mode %} animate-item--child{% endunless %}"
            style="--index: 4;"
          >
            {{ section.settings.button_label | escape }}
          </a>
        {%- endif -%}

        {%- if section.settings.guarantee_text != blank -%}
          <p class="wj-guarantee-note wj-hide-mobile animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 5;">
            {%- if section.settings.guarantee_icon != blank -%}
              {{
                section.settings.guarantee_icon
                | image_url: width: 40
                | image_tag: loading: 'lazy', class: 'wj-guarantee-img', alt: ''
              }}
            {%- elsif section.settings.guarantee_material_icon != blank -%}
              <span class="wj-guarantee-mat-icon material-symbols-rounded" aria-hidden="true">
                {{- section.settings.guarantee_material_icon -}}
              </span>
            {%- endif -%}
            {{ section.settings.guarantee_text | escape }}
          </p>
        {%- endif -%}
      </div>

      {%- comment -%} ── RIGHT: Timeline column ── {%- endcomment -%}
      <div class="wj-timeline-col animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 1;">
        <div class="wj-milestones" id="WjMilestones-{{ section.id }}">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'milestone' -%}
                <div
                  class="wj-milestone{% if forloop.first %} is-active{% endif %}"
                  {{ block.shopify_attributes }}
                >
                  <span class="wj-timeline-dot"></span>
                  <span class="wj-timeline-line"></span>
                  <span class="wj-timeline-progress"></span>

                  {%- unless block.settings.label == blank -%}
                    <div class="wj-week-label">{{ block.settings.label | escape }}</div>
                  {%- endunless -%}

                  {%- if block.settings.description_position == 'above' and block.settings.description != blank -%}
                    <div
                      class="wj-milestone-description rte is-above"
                      style="margin-bottom: {{ block.settings.description_margin }}px;"
                    >
                      {{ block.settings.description }}
                    </div>
                  {%- endif -%}

                  {%- unless block.settings.bullets == blank -%}
                    <ul class="wj-bullets">
                      {%- assign bullet_lines = block.settings.bullets | newline_to_br | split: '<br />' -%}
                      {%- for line in bullet_lines -%}
                        {%- assign trimmed = line | strip -%}
                        {%- unless trimmed == blank -%}
                          <li>{{ trimmed }}</li>
                        {%- endunless -%}
                      {%- endfor -%}
                    </ul>
                  {%- endunless -%}

                  {%- if block.settings.description_position == 'below' and block.settings.description != blank -%}
                    <div
                      class="wj-milestone-description rte is-below"
                      style="margin-top: {{ block.settings.description_margin }}px;"
                    >
                      {{ block.settings.description }}
                    </div>
                  {%- endif -%}
                </div>
            {%- endcase -%}
          {%- endfor -%}
        </div>

        {%- comment -%} Mobile CTA — hidden on desktop via CSS {%- endcomment -%}
        {%- if section.settings.button_label != blank or section.settings.guarantee_text != blank -%}
          <div class="wj-mobile-callout">
            {%- if section.settings.button_label != blank -%}
              <a href="{{ section.settings.button_link | default: '#' }}" class="wj-cta-btn">
                {{ section.settings.button_label | escape }}
              </a>
            {%- endif -%}
            {%- if section.settings.guarantee_text != blank -%}
              <p class="wj-guarantee-note">
                {%- if section.settings.guarantee_icon != blank -%}
                  {{
                    section.settings.guarantee_icon
                    | image_url: width: 40
                    | image_tag: loading: 'lazy', class: 'wj-guarantee-img', alt: ''
                  }}
                {%- elsif section.settings.guarantee_material_icon != blank -%}
                  <span class="wj-guarantee-mat-icon material-symbols-rounded" aria-hidden="true">
                    {{- section.settings.guarantee_material_icon -}}
                  </span>
                {%- endif -%}
                {{ section.settings.guarantee_text | escape }}
              </p>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var sectionId = '{{ section.id }}';
    var container = document.getElementById('WjMilestones-' + sectionId);
    if (!container) return;

    function isScrolledPast(el) {
      var rect = el.getBoundingClientRect();
      return rect.bottom + 200 <= window.innerHeight;
    }

    function onScroll() {
      var milestones = container.querySelectorAll('.wj-milestone');
      milestones.forEach(function (ms) {
        if (isScrolledPast(ms)) {
          ms.classList.add('is-active');
        } else {
          ms.classList.remove('is-active');
        }
      });
      if (milestones[0]) milestones[0].classList.add('is-active');
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
  })();
</script>

{% schema %}
{
  "name": "Timeline results V2",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID can be used to be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Content column"
    },
    {
      "type": "image_picker",
      "id": "brand_image",
      "label": "Image"
    },
    {
      "type": "paragraph",
      "content": "Or"
    },
    {
      "type": "video",
      "id": "video",
      "label": "Video",
      "info": "Use autoplay mp4 instead of GIFs & animated WEBPs."
    },
    {
      "type": "checkbox",
      "id": "video_muted_autoplay",
      "label": "Muted autoplay",
      "default": true,
      "info": "Use this instead of GIFs & animated WEBPs."
    },
    {
      "type": "checkbox",
      "id": "hide_image_mobile",
      "label": "Hide image/video on mobile",
      "default": false
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "<strong>Your Wellness</strong> Journey",
      "label": "Heading",
      "info": "Bold words are highlighted with the accent color."
    },
    {
      "type": "checkbox",
      "id": "heading_two_lines",
      "label": "Split heading onto two lines",
      "default": false,
      "info": "Breaks the heading at the exact word(s) you specify below."
    },
    {
      "type": "text",
      "id": "heading_line_two",
      "label": "Start of second line",
      "info": "Type the plain text of the word or phrase where the line break should begin. The break will be inserted before that text, preserving any bold or italic styling. Note: the phrase must not straddle a bold/italic boundary.",
      "visible_if": "{{ section.settings.heading_two_lines == true }}"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#009370"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides solid highlight color with a gradient"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #009370 0%, #00c89a 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Controls how italic text (*text*) is displayed in the heading"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        { "value": "italic", "label": "Normal Italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom Font Family" }
      ],
      "default": "italic"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#009370",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 2,
      "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": "instrument-serif", "label": "Instrument Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "serif",
      "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. 'Playfair Display'). 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"
    },
    {
      "type": "richtext",
      "id": "description",
      "default": "<p>Designed to deliver real, lasting results — not just quick fixes. Here's how your body begins to shift once you start taking it daily.</p>",
      "label": "Description"
    },
    {
      "type": "range",
      "id": "description_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Description font size",
      "default": 16
    },
    {
      "type": "range",
      "id": "description_max_width",
      "min": 200,
      "max": 600,
      "step": 10,
      "unit": "px",
      "label": "Description max width",
      "default": 400
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Start My Journey →"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "range",
      "id": "button_max_width",
      "min": 160,
      "max": 480,
      "step": 8,
      "unit": "px",
      "label": "Button max width",
      "default": 320
    },
    {
      "type": "range",
      "id": "button_height",
      "min": 40,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Button height",
      "default": 56
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Button border radius",
      "default": 60
    },
    {
      "type": "range",
      "id": "button_font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Button font size",
      "default": 18
    },
    {
      "type": "checkbox",
      "id": "override_button_colors",
      "label": "Override button colors",
      "default": false,
      "info": "Override the theme's default button colors for this section."
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background",
      "default": "#095946",
      "visible_if": "{{ section.settings.override_button_colors == true }}"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.override_button_colors == true }}"
    },
    {
      "type": "header",
      "content": "Guarantee note"
    },
    {
      "type": "text",
      "id": "guarantee_text",
      "label": "Guarantee text",
      "default": "30-day money-back guarantee"
    },
    {
      "type": "text",
      "id": "guarantee_material_icon",
      "label": "Material icon name",
      "default": "verified",
      "info": "Google Material Symbols icon name e.g. 'verified', 'shield', 'check_circle'. Browse icons at fonts.google.com/icons"
    },
    {
      "type": "select",
      "id": "guarantee_icon_fill",
      "label": "Icon style",
      "options": [
        { "value": "0", "label": "Outlined" },
        { "value": "1", "label": "Filled" }
      ],
      "default": "1"
    },
    {
      "type": "color",
      "id": "guarantee_icon_color",
      "label": "Icon color",
      "default": "#009370"
    },
    {
      "type": "color",
      "id": "guarantee_text_color",
      "label": "Text color",
      "default": "#333333"
    },
    {
      "type": "range",
      "id": "guarantee_icon_size",
      "min": 14,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Icon size",
      "default": 20
    },
    {
      "type": "range",
      "id": "guarantee_font_size",
      "min": 11,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 14
    },
    {
      "type": "image_picker",
      "id": "guarantee_icon",
      "label": "Custom icon image",
      "info": "If set, overrides the Material icon above."
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "checkbox",
      "id": "hide_content_col_desktop",
      "label": "Hide content column on desktop",
      "default": false,
      "info": "Timeline fills full width on desktop. Content column still shows on mobile."
    },
    {
      "type": "select",
      "id": "timeline_position_desktop",
      "label": "Timeline position on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right"
    },
    {
      "type": "range",
      "id": "content_col_width",
      "min": 30,
      "max": 60,
      "step": 2,
      "unit": "%",
      "label": "Content column width",
      "default": 44
    },
    {
      "type": "range",
      "id": "column_gap",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Desktop column gap",
      "default": 64
    },
    {
      "type": "range",
      "id": "mobile_col_gap",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Mobile column gap",
      "default": 24
    },
    {
      "type": "checkbox",
      "id": "sticky_content_col",
      "label": "Sticky content column on desktop",
      "default": true
    },
    {
      "type": "range",
      "id": "sticky_offset",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Sticky offset from top",
      "default": 80
    },
    {
      "type": "range",
      "id": "image_bottom_spacing",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Image/video bottom spacing",
      "default": 40
    },
    {
      "type": "range",
      "id": "heading_bottom_spacing",
      "min": 0,
      "max": 48,
      "step": 4,
      "unit": "px",
      "label": "Heading bottom spacing",
      "default": 16
    },
    {
      "type": "range",
      "id": "description_bottom_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Description bottom spacing",
      "default": 28
    },
    {
      "type": "header",
      "content": "Timeline style"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent color (active state)",
      "default": "#009370"
    },
    {
      "type": "color",
      "id": "dot_inactive_color",
      "label": "Inactive dot / line color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "dot_size",
      "min": 8,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Dot size",
      "default": 16
    },
    {
      "type": "range",
      "id": "milestone_gap",
      "min": 4,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Gap between milestones",
      "default": 16
    },
    {
      "type": "header",
      "content": "Milestone label style"
    },
    {
      "type": "color",
      "id": "label_inactive_bg",
      "label": "Inactive label background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "label_inactive_text",
      "label": "Inactive label text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "label_active_text",
      "label": "Active label text",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "label_height",
      "min": 32,
      "max": 72,
      "step": 4,
      "unit": "px",
      "label": "Label min height",
      "default": 48
    },
    {
      "type": "range",
      "id": "label_font_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Label font size",
      "default": 18
    },
    {
      "type": "range",
      "id": "label_padding_x",
      "min": 12,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Label horizontal padding",
      "default": 28
    },
    {
      "type": "range",
      "id": "label_border_radius",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Label border radius",
      "default": 8
    },
    {
      "type": "range",
      "id": "label_bottom_spacing",
      "min": 4,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Label bottom spacing",
      "default": 16
    },
    {
      "type": "header",
      "content": "Bullet list style"
    },
    {
      "type": "image_picker",
      "id": "bullet_icon",
      "label": "Bullet icon",
      "info": "If empty, a colored dot is used."
    },
    {
      "type": "range",
      "id": "bullet_icon_size",
      "min": 10,
      "max": 28,
      "step": 2,
      "unit": "px",
      "label": "Bullet icon size",
      "default": 18
    },
    {
      "type": "range",
      "id": "bullet_font_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Bullet font size",
      "default": 16
    },
    {
      "type": "range",
      "id": "bullet_spacing",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Spacing between bullets",
      "default": 14
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited below."
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 40
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin bottom",
      "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 will also apply to mobile."
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#095946",
      "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": "#095946",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "milestone",
      "name": "Timeline Milestone",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "label": "Week label",
          "default": "Week 1: Relief Begins"
        },
        {
          "type": "select",
          "id": "description_position",
          "label": "Description position",
          "options": [
            { "value": "above", "label": "Above bullet points" },
            { "value": "below", "label": "Below bullet points" }
          ],
          "default": "above"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "info": "Optional text shown above or below the bullet points."
        },
        {
          "type": "range",
          "id": "description_margin",
          "label": "Description spacing",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "default": 12,
          "info": "Space between description and bullet points."
        },
        {
          "type": "textarea",
          "id": "bullets",
          "label": "Bullet points",
          "info": "One bullet per line.",
          "default": "Digestion starts to feel lighter\nBloating begins to calm\nBreathing feels clearer, especially in the mornings"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Timeline results V2",
      "category": "Stats / Results",
      "blocks": [
        {
          "type": "milestone",
          "settings": {
            "label": "Week 1: Relief Begins",
            "bullets": "Digestion starts to feel lighter\nBloating begins to calm\nBreathing feels clearer, especially in the mornings"
          }
        },
        {
          "type": "milestone",
          "settings": {
            "label": "Week 2: Energy Returns",
            "bullets": "More stable daily energy\nLess brain fog and fatigue\nImmune system feels stronger and more responsive"
          }
        },
        {
          "type": "milestone",
          "settings": {
            "label": "Week 3: Gut + Immune Sync",
            "bullets": "Improved regularity and gut comfort\nFewer signs of inflammation (skin, joints, sinuses)\nYou feel more in control of your health"
          }
        },
        {
          "type": "milestone",
          "settings": {
            "label": "Week 4+: Long-Term Balance",
            "bullets": "Resilience through seasonal changes\nClearer mind, steady energy, fewer sick days\nYour body feels lighter, calmer, and stronger from the inside out"
          }
        }
      ]
    }
  ]
}
{% endschema %}
