{%- style -%}
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px!important;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px!important;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px!important;
      padding-bottom: {{ section.settings.padding_bottom }}px!important;
    }
  }
{% if section.settings.disable_header %}
  .header {
    display: none!important;
  }
{% endif %}  

{% if section.settings.disable_footer %}
  .footer {
    display: none!important;
  }
  .footer-custom {
    display: none!important;
  }
{% endif %}  
{%- endstyle -%}

<style>
  .listicle-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 10px;
    background-color: {{ section.settings.background_color }};
  }
  
  .listicle-section h1 {
    {% if section.settings.main_heading_size == 'small' %}
      font-size: 1.8rem;
    {% elsif section.settings.main_heading_size == 'large' %}
      font-size: 3.2rem;
    {% else %}
      font-size: 2.5rem;
    {% endif %}
    font-weight: 700;
    text-align: {{ section.settings.main_heading_alignment }};
    margin-bottom: 20px;
    color: {{ section.settings.heading_color }};
    line-height: 1.2;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .listicle-section .subtitle {
    text-align: {{ section.settings.subtitle_alignment }};
    {% if section.settings.subtitle_size == 'medium' %}
      font-size: 16px;
    {% elsif section.settings.subtitle_size == 'large' %}
      font-size: 19px;
      {% elsif section.settings.subtitle_size == 'small' %}
      font-size: 15px;
    {% endif %}
    color: {{ section.settings.text_color }};
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
  }
  
  .listicle-item {
    display: flex;
    margin-bottom: 40px;
    align-items: flex-start;
    gap: 20px;
  }
  
  .listicle-item.image-right {
    flex-direction: row-reverse;
  }
  
  .item-image {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    border-radius: {{ section.settings.image_border_radius }}%;
    overflow: hidden;
  }
  
  .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .item-content {
    flex: 1;
    padding: 20px 0;
  }
  
  .item-content h3 {
    {% if section.settings.item_title_size == 'small' %}
      font-size: 16px;
    {% elsif section.settings.item_title_size == 'large' %}
      font-size: 20px;
    {% else %}
      font-size: 18px; /* default medium */
    {% endif %}
    font-weight: 700;
    margin-bottom: 15px;
    color: {{ section.settings.heading_color }};
    line-height: 1.3;
  }
  
  .item-content p {
    {% if section.settings.item_description_size == 'small' %}
      font-size: 14px;
    {% elsif section.settings.item_description_size == 'large' %}
      font-size: 16px;
    {% else %}
      font-size: 15px; /* default medium */
    {% endif %}
    color: {{ section.settings.text_color }};
    line-height: 1.6;
    margin: 0;
  }

  /* Testimonial Card Styles */
  .testimonial-card {
    background: {{ section.settings.testimonial_bg_color }};
    border-radius: {{ section.settings.testimonial_radius }};
    padding: 30px;
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    {% if section.settings.enable_testimonial_border %}
      border: 3px solid {{ section.settings.testimonial_border_color }};
    {% endif %}
  }

  .testimonial-card__image-wrapper {
    margin-bottom: 20px;
  }

  .testimonial-card__image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    display: block;
  }

  .testimonial-card__stars {
    color: {{ section.settings.stars_color }};
    font-size: 18px;
    margin-bottom: 15px;
    letter-spacing: 2px;
  }

  .testimonial-card__quotes {
    margin-bottom: 20px;
    color: {{ section.settings.quote_color }};
  }

  .testimonial-card__quotes svg {
    width: 30px;
    height: 30px;
    opacity: 0.6;
  }

  .testimonial-card h3 {
    {% if section.settings.testimonial_title_size == 'small' %}
      font-size: 16px;
    {% elsif section.settings.testimonial_title_size == 'large' %}
      font-size: 20px;
    {% else %}
      font-size: 18px;
    {% endif %}
    font-weight: 700;
    margin-bottom: 15px;
    color: {{ section.settings.heading_color }};
  }

  .testimonial-card .rte {
    {% if section.settings.testimonial_text_size == 'small' %}
      font-size: 14px;
    {% elsif section.settings.testimonial_text_size == 'large' %}
      font-size: 16px;
    {% else %}
      font-size: 15px;
    {% endif %}
    color: {{ section.settings.text_color }};
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .testimonial-card__author-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
  }

  .testimonial-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .testimonial-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial-card__author {
    font-weight: 600;
    color: {{ section.settings.author_color }};
    margin: 0;
    font-size: 14px;
  }

  /* LIMITED TIME SALE BLOCK STYLES */
  {% for block in section.blocks %}
    {% if block.type == 'limited_time_sale' %}
      .limited-time-sale-{{ block.id }} {
        background: {{ block.settings.container_bg_color }};
        border: 3px {{ block.settings.container_border_style }} {{ block.settings.accent_color }};
        border-radius: {{ block.settings.container_border_radius }}px;
        padding: 10px 0px 0px;
        margin: 40px 0;
        position: relative;
      }

      .limited-time-sale-{{ block.id }} .sale-chip {
        background: {{ block.settings.chip_bg_color }};
        color: {{ block.settings.chip_text_color }};
        display: inline-block;
        padding: 8px 20px;
        border-radius: {{ block.settings.chip_border_radius }}px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: calc(100% - 40px);
        width: auto;
      }

      @media screen and (max-width: 749px) {
        .limited-time-sale-{{ block.id }} .sale-chip {
          width: calc(90% - 40px);
          max-width: none;
          padding: 10px 15px;
          font-size: 10px;
          line-height: 1.3;
        }
      }

      .limited-time-sale-{{ block.id }} .sale-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      @media screen and (min-width: 750px) {
        .limited-time-sale-{{ block.id }} .sale-content-wrapper {
          flex-direction: row;
          align-items: stretch;
          gap: 0;
        }
      }

      .limited-time-sale-{{ block.id }} .sale-image {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      @media screen and (min-width: 750px) {
        .limited-time-sale-{{ block.id }} .sale-image {
          padding: 20px;
        }
      }

      .limited-time-sale-{{ block.id }} .sale-image img {
        width: 100%;
        max-width: 300px;
        height: auto;
        border-radius: 8px;
        display: block;
      }

      @media screen and (min-width: 750px) {
        .limited-time-sale-{{ block.id }} .sale-image img {
          max-width: 100%;
          width: 100%;
          height: auto;
          border-radius: {{ block.settings.container_border_radius }}px;
        }
      }

      .limited-time-sale-{{ block.id }} .sale-text-content {
        flex: 1;
        text-align: center;
        padding: 20px;
      }

      @media screen and (min-width: 750px) {
        .limited-time-sale-{{ block.id }} .sale-text-content {
          padding: 30px;
        }
      }

      .limited-time-sale-{{ block.id }} .sale-eyebrow {
        color: {{ block.settings.eyebrow_color }};
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .limited-time-sale-{{ block.id }} .sale-headline {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
        line-height: 1.2;
      }

      .limited-time-sale-{{ block.id }} .headline-accent {
        color: {{ block.settings.accent_color }};
        display: block;
      }

      .limited-time-sale-{{ block.id }} .headline-strong {
        color: {{ block.settings.text_color }};
        font-size: 20px;
      }

      .limited-time-sale-{{ block.id }} .sale-description {
        color: {{ block.settings.text_color }};
        margin-bottom: 20px;
        font-size: 14px;
      }

      .limited-time-sale-{{ block.id }} .sale-cta-button {
        background: {{ block.settings.cta_bg_color }};
        color: {{ block.settings.cta_text_color }};
        padding: 15px 30px;
        border-radius: {{ block.settings.cta_border_radius }}px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: opacity 0.3s ease;
      }

      .limited-time-sale-{{ block.id }} .sale-cta-button:hover {
        opacity: 0.9;
      }

      .limited-time-sale-{{ block.id }} .countdown-wrapper {
        margin-bottom: 20px;
      }

      .limited-time-sale-{{ block.id }} .countdown-label {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 5px;
        color: {{ block.settings.text_color }};
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .limited-time-sale-{{ block.id }} .countdown-timer {
        font-size: 24px;
        font-weight: 700;
        color: {{ block.settings.accent_color }};
        font-family: monospace;
      }

      .limited-time-sale-{{ block.id }} .sale-badges {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
      }

      .limited-time-sale-{{ block.id }} .sellout-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
      }

      .limited-time-sale-{{ block.id }} .sellout-label {
        font-weight: 600;
        color: {{ block.settings.text_color }};
      }

      .limited-time-sale-{{ block.id }} .sellout-value {
        background: {{ block.settings.accent_color }};
        color: white;
        padding: 4px 10px;
        border-radius: 4px;
        font-weight: 700;
      }

      .limited-time-sale-{{ block.id }} .shipping-badge {
        border: 2px solid {{ block.settings.text_color }};
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        color: {{ block.settings.text_color }};
      }

      .limited-time-sale-{{ block.id }} .guarantee-text {
        font-size: 12px;
        color: {{ block.settings.text_color }};
        margin-top: 10px;
      }

      .limited-time-sale-{{ block.id }} .countdown-timer {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
      }

      .limited-time-sale-{{ block.id }} .countdown-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
        gap: 4px;
      }

      .limited-time-sale-{{ block.id }} .countdown-unit {
        font-size: 10px;
        font-weight: 700;
        color: {{ block.settings.text_color }};
        letter-spacing: 0.5px;
      }

      .limited-time-sale-{{ block.id }} .countdown-sep {
        font-size: 24px;
        font-weight: 700;
        color: {{ block.settings.accent_color }};
        line-height: 1;
        margin-bottom: 14px;
      }
    {% endif %}
  {% endfor %}
  .cta-section {
    background: {{ section.settings.cta_bg_start }};
    {% if section.settings.enable_dashed_border %}
      border: 3px dashed {{ section.settings.cta_border_color }};
    {% endif %}
    border-radius: {{ section.settings.cta_border_radius }}px;
    padding: 40px 30px;
    text-align: center;
    margin: 50px 0 30px 0;
     position: relative;
  }
  
  .cta-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: {{ section.settings.cta_heading_color }};
    margin-bottom: 10px;
  }
  
  .cta-section .highlight-text {
    font-size: 14px;
    color: {{ section.settings.text_color }};
    margin-bottom: 25px;
  }
  
  .cta-content {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 25px 0;
  }
  
  .product-showcase {
    flex: 0 0 auto;
    width: 250px;
  }
  
  .product-showcase img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  .benefits-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    {% if section.settings.benefit_font_size == 'small' %}
      font-size: 12px;
    {% elsif section.settings.benefit_font_size == 'medium' %}
      font-size: 13px;
    {% else %}
      font-size: 14px;
    {% endif %}
    color: {{ section.settings.cta_text_color }};
    width: 100%;
  }
  
  .benefit-icon {
    width: 20px;
    height: 20px;
    background: {{ section.settings.accent_color }};
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
  }
  
  .bottom-cta-button {
    background: {{ section.settings.button_bg_color }};
    color: {{ section.settings.button_text_color }};
    border: none;
    padding: 15px 40px;
    border-radius: {{ section.settings.button_border_radius }}px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    text-align: center;
  }
  
  .bottom-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }

  .author-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px auto 40px auto;
    max-width: 600px;
  }

  .author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .author-info {
    text-align: left;
  }

  .author-name {
    {% if section.settings.author_name_size == 'small' %}
      font-size: 14px;
    {% elsif section.settings.author_name_size == 'large' %}
      font-size: 18px;
    {% else %}
      font-size: 16px;
    {% endif %}
    font-weight: 600;
    color: {{ section.settings.heading_color }};
    margin: 0 0 3px 0;
  }

  .author-date {
    {% if section.settings.author_date_size == 'small' %}
      font-size: 12px;
    {% elsif section.settings.author_date_size == 'large' %}
      font-size: 16px;
    {% else %}
      font-size: 14px;
    {% endif %}
    color: {{ section.settings.text_color }};
    margin: 0;
    opacity: 0.8;
  }

  .author-section.position-above {
    margin: 20px auto 30px auto;
  }

  .author-section.position-below {
    margin: 30px auto 40px auto;
  }

  .sticky-button {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 1000;
    background: {{ section.settings.sticky_button_bg_color }};
    color: {{ section.settings.sticky_button_text_color }};
    border: none;
    padding: 18px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: auto;
    text-align: center;
    animation: pulse 2s infinite;
  }

  .sticky-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  }

  .sticky-button .arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
  }

  .sticky-button:hover .arrow {
    transform: translateX(3px);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    50% {
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    }
    100% {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
  }

  .sticky-button.hidden {
    display: none;
  }

  /* Desktop styles */
  @media (min-width: 769px) {
    .sticky-button {
      position: fixed;
      bottom: 20px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: auto;
      max-width: 400px;
      border-radius: {{ section.settings.sticky_button_border_radius }}px;
    }
    
    .sticky-button:hover {
      transform: translateX(-50%) translateY(-3px);
    }
  }
  
  @media (max-width: 768px) {
  .listicle-section h1 {
    {% if section.settings.main_heading_size == 'small' %}
      font-size: 1.5rem;
    {% elsif section.settings.main_heading_size == 'large' %}
      font-size: 2.5rem;
    {% else %}
      font-size: 2rem;
    {% endif %}
  }
  
  .listicle-item {
    flex-direction: column !important;
    text-align: center;
  }
  
  /* Mobile layout: text above image */
  .listicle-item.mobile-text-above {
    flex-direction: column !important;
  }
  
  .listicle-item.mobile-text-above .item-content {
    order: 1;
  }
  
  .listicle-item.mobile-text-above .item-image {
    order: 2;
  }
  
  /* Mobile layout: text below image (default) */
  .listicle-item.mobile-text-below {
    flex-direction: column !important;
  }
  
  .listicle-item.mobile-text-below .item-image {
    order: 1;
  }
  
  .listicle-item.mobile-text-below .item-content {
    order: 2;
  }
  
  .item-image {
    flex: none;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 auto;
    border-radius: {{ section.settings.image_border_radius }}%;
    overflow: hidden;
  }

  .testimonial-card {
    padding: 25px 20px;
    margin: 30px auto;
  }

  .testimonial-card__author-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .cta-section {
   padding: 35px 10px 25px 10px;
    margin: 30px 0;
  }
  
  .cta-section h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    line-height: 1.3;
  }
  
  .cta-section .highlight-text {
    margin-bottom: 25px;
    padding: 0;
  }
  
  .cta-content {
    flex-direction: column;
    gap: 25px;
    margin: 25px 0;
  }
  
  .product-showcase {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .product-showcase img {
    border-radius: 12px;
  }
  
  .benefits-list {
    align-items: stretch;
    text-align: left;
    padding: 0 5px;
  }
  
  .benefit-item {
    justify-content: flex-start;
    padding: 8px 0;
  }
  
  .bottom-cta-button {
    margin: 25px 0 20px 0;
    padding: 16px 40px;
  }
  
  .author-section {
    margin: 25px auto 35px auto;
  }
  
  .author-avatar {
    width: 50px;
    height: 50px;
  }
}

.cta-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: {{ section.settings.badge_bg_color }};
  color: {{ section.settings.badge_text_color }};
  padding: 8px 20px;
  border-radius: {{ section.settings.badge_border_radius }}px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: {{ section.settings.cta_eyebrow_color }};
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.cta-price {
  font-size: 32px;
  font-weight: 700;
  color: {{ section.settings.cta_price_color }};
  margin-bottom: 5px;
}

.cta-original-price {
  font-size: 18px;
  font-weight: 700;
  color: {{ section.settings.cta_original_price_color }};
  margin-bottom: 15px;
}

/* Center product image when no benefits are filled */
.cta-content {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 25px 0;
  justify-content: center;
}

.benefits-list:empty {
  display: none;
}

/* Hide benefits list if all items are empty */
.benefits-list:not(:has(.benefit-item)) {
  display: none;
}

{% for block in section.blocks %}
  {% if block.type == 'listicle_item' %}
    .item-content-{{ block.id }} {
      text-align: {{ block.settings.text_alignment }};
    }
  {% endif %}
{% endfor %}

{% if section.settings.enable_item_border %}
  .listicle-item {
    border: {{ section.settings.item_border_width }}px solid {{ section.settings.item_border_color }};
    border-radius: {{ section.settings.item_border_radius }}px;
    padding: {{ section.settings.item_padding }}px;
    background: {{ section.settings.background_color }};
  }
{% endif %}

{% for block in section.blocks %}
  {% if block.type == 'listicle_item' %}
    .listicle-item[data-block-id="{{ block.id }}"] {
      margin-bottom: {{ block.settings.block_margin_bottom }}px !important;
    }
  {% elsif block.type == 'testimonial' %}
    .testimonial-card[data-block-id="{{ block.id }}"] {
      margin-bottom: {{ block.settings.block_margin_bottom }}px !important;
    }
  {% endif %}
{% endfor %}
</style>

<div class="listicle-section section-{{ section.id }}-padding">
  <h1 class="title-with-highlight" style='--hightlight-color:{{ section.settings.title_highlight_color }}'>{{ section.settings.main_heading }}</h1>
  
  {% comment %} Author section above subtitle {% endcomment %}
  {% if section.settings.show_author and section.settings.author_position == 'above' %}
    <div class="author-section">
      {% if section.settings.author_image %}
        <div class="author-avatar">
          {{
            section.settings.author_image
            | image_url: width: 120
            | image_tag: loading: 'lazy'
          }}
        </div>
      {% endif %}
      <div class="author-info">
        {% if section.settings.author_name != blank %}
          <p class="author-name">By {{ section.settings.author_name }}</p>
        {% endif %}
        {% if section.settings.last_updated_text != blank and section.settings.last_updated_date != blank %}
          <p class="author-date">{{ section.settings.last_updated_text }} {{ section.settings.last_updated_date }}</p>
        {% endif %}
      </div>
    </div>
  {% endif %}
  
  <p class="subtitle">{{ section.settings.subtitle }}</p>
  
  {% comment %} Author section below subtitle {% endcomment %}
  {% if section.settings.show_author and section.settings.author_position == 'below' %}
    <div class="author-section">
      {% if section.settings.author_image %}
        <div class="author-avatar">
          {{
            section.settings.author_image
            | image_url: width: 120
            | image_tag: loading: 'lazy'
          }}
        </div>
      {% endif %}
      <div class="author-info">
        {% if section.settings.author_name != blank %}
          <p class="author-name">{{ section.settings.author_name }}</p>
        {% endif %}
        {% if section.settings.last_updated_text != blank and section.settings.last_updated_date != blank %}
          <p class="author-date">{{ section.settings.last_updated_text }} {{ section.settings.last_updated_date }}</p>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% for block in section.blocks %}
    {% if block.type == 'listicle_item' %}
        <div class="listicle-item {% if block.settings.image_position == 'right' %}image-right{% endif %} {% if block.settings.mobile_text_position == 'above' %}mobile-text-above{% else %}mobile-text-below{% endif %}" data-block-id="{{ block.id }}"  {{ block.shopify_attributes }}>
        <div class="item-image">
         <img src="{{ block.settings.image | img_url: '1000x1000' }}" alt="{{ block.settings.image.alt | default: block.settings.title }}">
        </div>
        <div class="item-content item-content-{{ block.id }}">
          <h3>{{ block.settings.title }}</h3>
          <p>{{ block.settings.description }}</p>
        </div>
      </div>
    {% elsif block.type == 'testimonial' %}
     <div class="testimonial-card" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
        {%- if block.settings.image != blank -%}
          <div class="testimonial-card__image-wrapper">
            {{
              block.settings.image
              | image_url: width: 160
              | image_tag: loading: 'lazy', class: 'testimonial-card__image'
            }}
          </div>
        {%- endif -%}
        
        {%- if section.settings.show_stars -%}
          <p class="testimonial-card__stars">★★★★★</p>
        {%- endif -%}
        
        {%- if block.settings.title != blank -%}
          <h3>{{ block.settings.title }}</h3>
        {%- endif -%}
        
        {%- if block.settings.text != blank -%}
          <div class="rte">{{ block.settings.text }}</div>
        {%- endif -%}
        
        {%- unless block.settings.author_avatar == blank and block.settings.author == blank -%}
          <div class="testimonial-card__author-container">
            {%- if block.settings.author_avatar != blank -%}
              <div class="testimonial-card__avatar">
                {{
                  block.settings.author_avatar
                  | image_url: width: 100
                  | image_tag: loading: 'lazy'
                }}
              </div>
            {%- endif -%}
            {%- if block.settings.author != blank -%}
              <p class="testimonial-card__author">
                {{ block.settings.author }}
              </p>
            {%- endif -%}
          </div>
        {%- endunless -%}
      </div>

       {% elsif block.type == 'comparison_chart' %}
  <style>
    .comparison-table-container-{{ block.id }} {
      width: 100%;
      max-width: 90rem;
      margin-top: {{ block.settings.margin_top }}px !important;
      margin-bottom: {{ block.settings.margin_bottom }}px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .comparison-table-{{ block.id }} {
      --border-radius: {{ block.settings.border_radius }}rem;
      width: 100%;
      border-spacing: 0;
      border-collapse: separate;
      padding-bottom: 3rem;
    }

    .comparison-table-{{ block.id }} th {
      padding: 0.5rem 0.75rem;
      font-size: {{ block.settings.header_font_size }}px;
      line-height: 1.3;
    }

    .comparison-table-{{ block.id }} thead {
      z-index: 1;
    }

    .comparison-table-{{ block.id }} tbody {
      border-radius: var(--border-radius);
    }

    .comparison-table-{{ block.id }} td {
      --cell-bottom-separator-thickness: -0.1rem;
      --cell-separator-opacity: {{ block.settings.cell_separator_opacity }};
      --border-shadow-offset: -0.1rem 0 0 0;
      --outer-box-shadow: 0.3rem 0.3rem 0.8rem rgba(0, 0, 0, 0.15),
        var(--border-shadow-offset) rgba(0, 0, 0, 0.08);
      padding: 1rem 1.5rem;
      text-align: center;
      box-shadow: inset 0 var(--cell-bottom-separator-thickness) 0 0
          rgba(0, 0, 0, var(--cell-separator-opacity)),
        var(--outer-box-shadow);
      position: relative;
    }

    .comparison-table-{{ block.id }} td:last-of-type {
      --border-shadow-offset: 0.1rem 0 0 0;
    }

    .comparison-table-{{ block.id }} tbody tr:first-of-type td:first-child {
      border-radius: var(--border-radius) 0 0 0;
      --border-shadow-offset: -0.1rem -0.1rem 0 0;
    }

    .comparison-table-{{ block.id }} tbody tr:last-of-type td:first-child {
      border-radius: 0 0 0 var(--border-radius);
      --border-shadow-offset: -0.1rem 0.1rem 0 0;
    }

    .comparison-table-{{ block.id }} tbody tr:first-of-type td:last-child {
      border-radius: 0 var(--border-radius) 0 0;
      --border-shadow-offset: 0.1rem -0.1rem 0 0;
    }

    .comparison-table-{{ block.id }} tbody tr:last-of-type td:last-child {
      border-radius: 0 0 var(--border-radius) 0;
      --border-shadow-offset: 0.1rem 0.1rem 0 0;
    }

    .comparison-table-{{ block.id }} tbody td:not(.comparison-table__row-name) {
      padding: 1rem 2rem;
    }

    .comparison-table-{{ block.id }} .comparison-table__logo {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      padding: 2rem 1rem;
      background-color: {{ block.settings.your_brand_bg_color }};
      border: {{ block.settings.your_brand_border_width }}px solid {{ block.settings.your_brand_border_color }};
      border-bottom: none;
    }

    .comparison-table-{{ block.id }} .comparison-table__others {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      padding: 2rem 1rem;
      background-color: {{ block.settings.other_brand_bg_color }};
      border: {{ block.settings.other_brand_border_width }}px solid {{ block.settings.other_brand_border_color }};
      border-bottom: none;
    }

    .comparison-table-{{ block.id }} .comparison-table__logo img,
    .comparison-table-{{ block.id }} .comparison-table__others img {
      max-width: {{ block.settings.logo_width }}px;
      height: auto;
      display: block;
      margin: 0 auto 1rem;
    }

    .comparison-table-{{ block.id }} .comparison-benefit-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: {{ block.settings.icon_size }}px;
    }

    .comparison-table-{{ block.id }} .comparison-table__icon {
      font-size: 1.4rem;
      width: 1em;
      height: 1em;
      margin: auto;
      border-radius: 50%;
      box-sizing: content-box;
      background: var(--bg-color);
      padding: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .comparison-table-{{ block.id }} .comparison-table__icon svg {
      color: var(--icon-color);
      width: 100%;
      height: 100%;
    }

    .comparison-table-{{ block.id }} .comparison-table__text {
      font-size: {{ block.settings.cell_text_size }}px;
      font-weight: {{ block.settings.cell_text_weight }};
    }

    .comparison-table-{{ block.id }} .comparison-table__text--positive {
      color: {{ block.settings.positive_text_color }};
    }

    .comparison-table-{{ block.id }} .comparison-table__text--negative {
      color: {{ block.settings.negative_text_color }};
    }

    .comparison-table-{{ block.id }} .comparison-table__row-name {
      font-size: {{ block.settings.row_font_size }}px;
      text-align: left;
      background-color: {{ block.settings.row_bg_color }};
      color: {{ block.settings.row_text_color }};
      font-weight: {{ block.settings.row_font_weight }};
    }

    .comparison-table-{{ block.id }} .highlighted-cell {
      background-color: {{ block.settings.your_brand_cell_bg_color }};
    }

    .comparison-table-{{ block.id }} .regular-cell {
      background-color: {{ block.settings.other_brand_cell_bg_color }};
    }

    .comparison-table-{{ block.id }} tbody tr:last-of-type td:nth-child(2)::after {
      content: "";
      display: block;
      width: 100%;
      height: 3rem;
      position: absolute;
      top: 100%;
      left: 0;
      background: {{ block.settings.your_brand_cell_bg_color }};
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      border: {{ block.settings.your_brand_border_width }}px solid {{ block.settings.your_brand_border_color }};
      border-top: none;
    }

    @media screen and (max-width: 500px) {
      .comparison-table-{{ block.id }} thead img {
        max-width: {{ block.settings.mobile_logo_width }}px;
      }

      .comparison-table-{{ block.id }} .comparison-table__row-name,
      .comparison-table-{{ block.id }} th {
        font-size: calc({{ block.settings.row_font_size }}px * 0.85);
      }
    }
  </style>

  <div class="comparison-table-container-{{ block.id }}"  {{ block.shopify_attributes }}>
    <table class="comparison-table-{{ block.id }}">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th align="center" class="comparison-table__logo">
            <div>
              {%- if block.settings.your_brand_image != blank -%}
                <img 
                  src="{{ block.settings.your_brand_image | image_url: width: 300 }}"
                  alt="{{ block.settings.your_brand_title }}"
                  loading="lazy"
                >
              {%- endif -%}
              {{ block.settings.your_brand_title }}
              
              {%- if block.settings.show_your_brand_badge -%}
                <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem;">
                  {%- if block.settings.your_brand_icon != blank -%}
                    <span class="comparison-benefit-icon" style="--icon-color: {{ block.settings.your_brand_icon_color }};">
                      <span class="material-symbols-outlined">{{ block.settings.your_brand_icon }}</span>
                    </span>
                  {%- endif -%}
                  {%- if block.settings.your_brand_badge_text != blank -%}
                    <span style="font-size: {{ block.settings.badge_font_size }}px; color: {{ block.settings.your_brand_badge_color }};">
                      {{ block.settings.your_brand_badge_text }}
                    </span>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </th>
          <th align="center" class="comparison-table__others">
            <div>
              {%- if block.settings.other_brand_image != blank -%}
                <img 
                  src="{{ block.settings.other_brand_image | image_url: width: 300 }}"
                  alt="{{ block.settings.other_brand_title }}"
                  loading="lazy"
                >
              {%- endif -%}
              {{ block.settings.other_brand_title }}
              
              {%- if block.settings.show_other_brand_badge -%}
                <div style="margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem;">
                  {%- if block.settings.other_brand_icon != blank -%}
                    <span class="comparison-benefit-icon" style="--icon-color: {{ block.settings.other_brand_icon_color }};">
                      <span class="material-symbols-outlined">{{ block.settings.other_brand_icon }}</span>
                    </span>
                  {%- endif -%}
                  {%- if block.settings.other_brand_badge_text != blank -%}
                    <span style="font-size: {{ block.settings.badge_font_size }}px; color: {{ block.settings.other_brand_badge_color }};">
                      {{ block.settings.other_brand_badge_text }}
                    </span>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        {%- for i in (1..8) -%}
          {%- assign row_text_key = 'row_' | append: i | append: '_text' -%}
          {%- assign row_your_brand_key = 'row_' | append: i | append: '_your_brand' -%}
          {%- assign row_other_brand_key = 'row_' | append: i | append: '_other_brand' -%}
          {%- assign row_your_brand_custom_key = 'row_' | append: i | append: '_your_brand_custom' -%}
          {%- assign row_other_brand_custom_key = 'row_' | append: i | append: '_other_brand_custom' -%}
          
          {%- assign row_text = block.settings[row_text_key] -%}
          {%- assign your_brand_has = block.settings[row_your_brand_key] -%}
          {%- assign other_brand_has = block.settings[row_other_brand_key] -%}
          {%- assign your_brand_custom = block.settings[row_your_brand_custom_key] -%}
          {%- assign other_brand_custom = block.settings[row_other_brand_custom_key] -%}
          
          {%- if row_text != blank -%}
            <tr>
              <td align="left" class="comparison-table__row-name regular-cell">
                <strong>{{ row_text }}</strong>
              </td>
              <td align="center" class="highlighted-cell">
                {%- if your_brand_custom != blank -%}
                  {%- comment -%} CUSTOM TEXT OVERRIDES EVERYTHING {%- endcomment -%}
                  {%- if your_brand_has -%}
                    <div class="comparison-table__text comparison-table__text--positive">
                      {{ your_brand_custom }}
                    </div>
                  {%- else -%}
                    <div class="comparison-table__text comparison-table__text--negative">
                      {{ your_brand_custom }}
                    </div>
                  {%- endif -%}
                {%- elsif block.settings.use_text_display -%}
                  {%- comment -%} TEXT MODE {%- endcomment -%}
                  {%- if your_brand_has -%}
                    <div class="comparison-table__text comparison-table__text--positive">
                      {{ block.settings.positive_text }}
                    </div>
                  {%- else -%}
                    <div class="comparison-table__text comparison-table__text--negative">
                      {{ block.settings.negative_text }}
                    </div>
                  {%- endif -%}
                {%- else -%}
                  {%- comment -%} ICON MODE {%- endcomment -%}
                  {%- if your_brand_has -%}
                    <div class="comparison-table__icon" style="--icon-color:#FFFFFF;--bg-color:{{ block.settings.checkmark_color }}">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
                      </svg>
                    </div>
                  {%- else -%}
                    <div class="comparison-table__icon" style="--icon-color:#FFFFFF;--bg-color:{{ block.settings.crossmark_bg_color }}">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                        <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
                      </svg>
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </td>
              <td align="center" class="regular-cell">
                {%- if other_brand_custom != blank -%}
                  {%- comment -%} CUSTOM TEXT OVERRIDES EVERYTHING {%- endcomment -%}
                  {%- if other_brand_has -%}
                    <div class="comparison-table__text comparison-table__text--positive">
                      {{ other_brand_custom }}
                    </div>
                  {%- else -%}
                    <div class="comparison-table__text comparison-table__text--negative">
                      {{ other_brand_custom }}
                    </div>
                  {%- endif -%}
                {%- elsif block.settings.use_text_display -%}
                  {%- comment -%} TEXT MODE {%- endcomment -%}
                  {%- if other_brand_has -%}
                    <div class="comparison-table__text comparison-table__text--positive">
                      {{ block.settings.positive_text }}
                    </div>
                  {%- else -%}
                    <div class="comparison-table__text comparison-table__text--negative">
                      {{ block.settings.negative_text }}
                    </div>
                  {%- endif -%}
                {%- else -%}
                  {%- comment -%} ICON MODE {%- endcomment -%}
                  {%- if other_brand_has -%}
                    <div class="comparison-table__icon" style="--icon-color:#FFFFFF;--bg-color:{{ block.settings.checkmark_color }}">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                        <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
                      </svg>
                    </div>
                  {%- else -%}
                    <div class="comparison-table__icon" style="--icon-color:#FFFFFF;--bg-color:{{ block.settings.crossmark_bg_color }}">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                        <path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
                      </svg>
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </td>
            </tr>
          {%- endif -%}
        {%- endfor -%}
      </tbody>
    </table>
  </div>

    {% elsif block.type == 'limited_time_sale' %}
      <div class="limited-time-sale-{{ block.id }}" {{ block.shopify_attributes }}>
        {% if block.settings.chip_text != blank %}
          <div class="sale-chip">{{ block.settings.chip_text }}</div>
        {% endif %}

        <div class="sale-content-wrapper">
          {% if block.settings.image != blank %}
            <div class="sale-image">
              {{ block.settings.image | image_url: width: 600 | image_tag: loading: 'lazy' }}
            </div>
          {% endif %}

          <div class="sale-text-content">
            {% if block.settings.eyebrow_text != blank %}
              <div class="sale-eyebrow">{{ block.settings.eyebrow_text }}</div>
            {% endif %}

            <div class="sale-headline">
              {% if block.settings.headline_accent != blank %}
                <span class="headline-accent">{{ block.settings.headline_accent }}</span>
              {% endif %}
              {% if block.settings.headline_strong != blank %}
                <span class="headline-strong">{{ block.settings.headline_strong }}</span>
              {% endif %}
            </div>

            {% if block.settings.description != blank %}
              <p class="sale-description">{{ block.settings.description }}</p>
            {% endif %}

            {% if block.settings.cta_label != blank %}
              <a href="{{ block.settings.cta_link | default: '#' }}" class="sale-cta-button">
                {{ block.settings.cta_label }}
              </a>
            {% endif %}

            {% if block.settings.enable_countdown %}
          <div class="countdown-wrapper">
            {% if block.settings.countdown_label != blank %}
              <div class="countdown-label">{{ block.settings.countdown_label }}</div>
            {% endif %}
            <div class="countdown-timer">
              <span class="countdown-cell countdown-days-cell" style="display:none"><span class="days">00</span><span class="countdown-unit">{{ block.settings.label_days | default: 'DAYS' }}</span></span>
              <span class="countdown-sep countdown-days-sep" style="display:none">:</span>
              <span class="countdown-cell"><span class="hours">00</span><span class="countdown-unit">{{ block.settings.label_hours | default: 'HRS' }}</span></span>
              <span class="countdown-sep">:</span>
              <span class="countdown-cell"><span class="minutes">00</span><span class="countdown-unit">{{ block.settings.label_minutes | default: 'MIN' }}</span></span>
              <span class="countdown-sep">:</span>
              <span class="countdown-cell"><span class="seconds">00</span><span class="countdown-unit">{{ block.settings.label_seconds | default: 'SEC' }}</span></span>
            </div>
          </div>
          {% endif %}

            <div class="sale-badges">
              {% if block.settings.sellout_risk_label != blank %}
                <div class="sellout-badge">
                  <span class="sellout-label">{{ block.settings.sellout_risk_label }}</span>
                  <span class="sellout-value">{{ block.settings.sellout_risk_text }}</span>
                </div>
              {% endif %}

              {% if block.settings.shipping_text != blank %}
                <div class="shipping-badge">{{ block.settings.shipping_text }}</div>
              {% endif %}
            </div>

            {% if block.settings.guarantee_text != blank %}
              <div class="guarantee-text">{{ block.settings.guarantee_text }}</div>
            {% endif %}
          </div>
        </div>

        <script>
        (function() {
          var timer = document.querySelector('.limited-time-sale-{{ block.id }} .countdown-timer');
          if (!timer) return;

          var useCustom = {{ block.settings.enable_custom_timer | json }};
          var storageKey = 'countdownEndTime-listicle-{{ block.id }}';
          var configKey = 'countdownConfig-listicle-{{ block.id }}';

          var durationMs;
          if (useCustom) {
            var d = {{ block.settings.reset_days | default: 0 }};
            var h = {{ block.settings.reset_hours | default: 0 }};
            var m = {{ block.settings.reset_minutes | default: 0 }};
            durationMs = (d * 86400 + h * 3600 + m * 60) * 1000;
          } else {
            durationMs = {{ block.settings.countdown_hours | default: 24 }} * 3600 * 1000;
          }

          var currentConfig = String(durationMs);

          var daysCell = timer.querySelector('.countdown-days-cell');
          var daysSep = timer.querySelector('.countdown-days-sep');

          function getEndTime() {
            if (localStorage.getItem(configKey) !== currentConfig) {
              localStorage.removeItem(storageKey);
              localStorage.setItem(configKey, currentConfig);
              return null;
            }
            var stored = localStorage.getItem(storageKey);
            return stored ? parseInt(stored) : null;
          }

          function getTarget() {
            var end = getEndTime();
            if (!end) {
              end = Date.now() + durationMs;
              localStorage.setItem(storageKey, end.toString());
              localStorage.setItem(configKey, currentConfig);
            }
            return end;
          }

          function tick() {
            var distance = getTarget() - Date.now();
            if (distance < 0) {
              var end = Date.now() + durationMs;
              localStorage.setItem(storageKey, end.toString());
              distance = end - Date.now();
            }

            var days = Math.floor(distance / 86400000);
            var h = Math.floor((distance % 86400000) / 3600000);
            var m = Math.floor((distance % 3600000) / 60000);
            var s = Math.floor((distance % 60000) / 1000);

            if (days > 0) {
              daysCell.style.display = 'flex';
              daysSep.style.display = 'inline';
              timer.querySelector('.days').textContent = days.toString().padStart(2, '0');
            } else {
              daysCell.style.display = 'none';
              daysSep.style.display = 'none';
            }

            timer.querySelector('.hours').textContent = h.toString().padStart(2, '0');
            timer.querySelector('.minutes').textContent = m.toString().padStart(2, '0');
            timer.querySelector('.seconds').textContent = s.toString().padStart(2, '0');
          }

          tick();
          setInterval(tick, 1000);
        })();
      </script>
      </div>
    {% endif %}
  {% endfor %}
  
{% if section.settings.enable_cta %}
  <div class="cta-section">
  {% if section.settings.cta_badge_text != blank %}
    <div class="cta-badge">{{ section.settings.cta_badge_text }}</div>
  {% endif %}

  {% if section.settings.cta_eyebrow != blank %}
    <div class="cta-eyebrow">{{ section.settings.cta_eyebrow }}</div>
  {% endif %}

  {% if section.settings.cta_price != blank %}
    <div class="cta-price">{{ section.settings.cta_price }}</div>
  {% endif %}

  {% if section.settings.cta_original_price != blank %}
    <div class="cta-original-price">{{ section.settings.cta_original_price }}</div>
  {% endif %}

  <h2>{{ section.settings.cta_heading }}</h2>
  <p class="highlight-text">{{ section.settings.cta_highlight_text }}</p>
    
    <div class="cta-content">
      <div class="product-showcase">
        {% if section.settings.cta_product_image_1 %}
          <img src="{{ section.settings.cta_product_image_1 | img_url: '1000x1000' }}" alt="Product Bundle">
        {% endif %}
      </div>
      
      <div class="benefits-list">
        {% if section.settings.benefit_1 != blank %}
          <div class="benefit-item">
            <div class="benefit-icon">✓</div>
            <span>{{ section.settings.benefit_1 }}</span>
          </div>
        {% endif %}
        {% if section.settings.benefit_2 != blank %}
          <div class="benefit-item">
            <div class="benefit-icon">✓</div>
            <span>{{ section.settings.benefit_2 }}</span>
          </div>
        {% endif %}
        {% if section.settings.benefit_3 != blank %}
          <div class="benefit-item">
            <div class="benefit-icon">✓</div>
            <span>{{ section.settings.benefit_3 }}</span>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  
  <a href="{{ section.settings.bottom_cta_url }}" class="bottom-cta-button">{{ section.settings.bottom_cta_text }}</a>
</div>
{% endif %}

{% if section.settings.show_sticky_button %}
  {% if section.settings.sticky_button_action == 'scroll_to_cta' %}
    <button class="sticky-button" onclick="scrollToTarget()">
      {{ section.settings.sticky_button_text }}
      <span class="arrow">→</span>
    </button>
  {% else %}
    <a href="{{ section.settings.sticky_button_url }}" class="sticky-button">
      {{ section.settings.sticky_button_text }}
      <span class="arrow">→</span>
    </a>
  {% endif %}
{% endif %}

{% if section.settings.show_sticky_button and section.settings.sticky_button_action == 'scroll_to_cta' %}
<script>
function scrollToTarget() {
  // First, try to find limited-time-sale block
  const limitedTimeSale = document.querySelector('[class*="limited-time-sale-"]');
  
  // If limited-time-sale exists, scroll to it; otherwise scroll to CTA section
  const targetSection = limitedTimeSale || document.querySelector('.cta-section');
  
  if (targetSection) {
    const targetPosition = targetSection.getBoundingClientRect().top + window.pageYOffset;
    const offset = 100; // Adjust this value to control how much before the target to scroll
    const scrollPosition = targetPosition - offset;
    
    window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
  }
}

// Optional: Hide sticky button when target is visible
window.addEventListener('scroll', function() {
  const limitedTimeSale = document.querySelector('[class*="limited-time-sale-"]');
  const targetSection = limitedTimeSale || document.querySelector('.cta-section');
  const stickyButton = document.querySelector('.sticky-button');
  
  if (targetSection && stickyButton) {
    const targetRect = targetSection.getBoundingClientRect();
    const isTargetVisible = targetRect.top < window.innerHeight && targetRect.bottom > 0;
    
    if (isTargetVisible) {
      stickyButton.classList.add('hidden');
    } else {
      stickyButton.classList.remove('hidden');
    }
  }
});
</script>
{% endif %}



<!-- Disclaimer Footer -->
{%- assign disclaimer_block = section.blocks | where: 'type', 'disclaimer' | first -%}
{%- if disclaimer_block -%}
	<div class="advertorial-disclaimer-footer advertorial-disclaimer-{{ disclaimer_block.id }}"  {{ block.shopify_attributes }}>
		<div class="advertorial-disclaimer-content">
			{{ disclaimer_block.settings.disclaimer_text }}
			
			{%- if disclaimer_block.settings.show_copyright or disclaimer_block.settings.show_legal_links -%}
				<div class="disclaimer-footer-bottom">
					{%- if disclaimer_block.settings.show_copyright and disclaimer_block.settings.copyright_text != blank -%}
						<p class="copyright-text">{{ disclaimer_block.settings.copyright_text }}</p>
					{%- endif -%}
					
					{%- if disclaimer_block.settings.show_legal_links -%}
						<div class="legal-links">
							{%- if disclaimer_block.settings.terms_link_text != blank and disclaimer_block.settings.terms_link_url != blank -%}
								<a href="{{ disclaimer_block.settings.terms_link_url }}">{{ disclaimer_block.settings.terms_link_text }}</a>
							{%- endif -%}
							{%- if disclaimer_block.settings.privacy_link_text != blank and disclaimer_block.settings.privacy_link_url != blank -%}
								<a href="{{ disclaimer_block.settings.privacy_link_url }}">{{ disclaimer_block.settings.privacy_link_text }}</a>
							{%- endif -%}
						</div>
					{%- endif -%}
				</div>
			{%- endif -%}
		</div>
	</div>

	<style>
	.advertorial-disclaimer-footer {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		background-color: {{ disclaimer_block.settings.disclaimer_background_color }};
		text-align: {{ disclaimer_block.settings.disclaimer_alignment }};
		padding: {{ disclaimer_block.settings.disclaimer_padding_top }}px 20px {{ disclaimer_block.settings.disclaimer_padding_bottom }}px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 0;
	}

	.advertorial-disclaimer-content {
		max-width: 1200px;
		margin: 0 auto;
		font-size: {{ disclaimer_block.settings.disclaimer_font_size }}px;
		color: {{ disclaimer_block.settings.disclaimer_text_color }};
		line-height: 1.4;
	}

	.advertorial-disclaimer-content p {
		margin: 0;
	}

	.advertorial-disclaimer-content small {
		font-size: inherit;
	}

	.disclaimer-footer-bottom {
		margin-top: 20px;
		padding-top: 15px;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
	}

	.copyright-text {
		margin: 0;
		font-size: {{ disclaimer_block.settings.disclaimer_font_size }}px;
		color: {{ disclaimer_block.settings.disclaimer_text_color }};
	}

	.legal-links {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
	}

	.legal-links a {
		color: {{ disclaimer_block.settings.disclaimer_text_color }};
		text-decoration: underline;
		font-size: {{ disclaimer_block.settings.disclaimer_font_size }}px;
	}

	.legal-links a:hover {
		opacity: 0.7;
	}

	@media (max-width: 768px) {
		.advertorial-disclaimer-footer {
			padding: {{ disclaimer_block.settings.disclaimer_padding_top | times: 0.8 | round }}px 15px {{ disclaimer_block.settings.disclaimer_padding_bottom | times: 0.8 | round }}px;
		}
		
		.advertorial-disclaimer-content {
			font-size: {{ disclaimer_block.settings.disclaimer_font_size | times: 0.9 | round }}px;
		}

		.disclaimer-footer-bottom {
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 15px;
		}

		.legal-links {
			justify-content: center;
		}

		.copyright-text,
		.legal-links a {
			font-size: {{ disclaimer_block.settings.disclaimer_font_size | times: 0.9 | round }}px;
		}
	}
</style>
{%- endif -%}




{% schema %}
{
  "name": "Listicle",
  "tag": "section",
  "class": "listicle-section",
  "settings": [
    {
		"type": "header",
		"content": "IMPORTANT"
		},
		{
			"type": "paragraph",
			"content": "To hide your Header and Footer from your Listicle page, go into the Theme Settings > Hide Header/Footer tab and enter your page handle."
		},
    {
      "type": "header",
      "content": "General settings"
    },
    {
      "type": "checkbox",
      "id": "disable_header",
      "label": "Hide header",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "disable_footer",
      "label": "Hide footer",
      "default": false
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "main_heading",
      "label": "Main Heading",
      "default": "5 Reasons Why This Coffee Is On Everyones Black Friday Wishlist"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "select",
      "id": "main_heading_size",
      "label": "Main Heading Size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "large"
    },
    {
      "type": "select",
      "id": "main_heading_alignment",
      "label": "Main Heading Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "center"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Here are the big five reasons why everyone is finally tossing the coffee grounds, ditching big chain coffee shops, and saving tons of money by switching to the worlds most convenient (and delicious) Coffee ever by NAME."
    },
    {
      "type": "select",
      "id": "subtitle_size",
      "label": "Subtitle Size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "select",
      "id": "subtitle_alignment",
      "label": "Subtitle Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "center"
    },
    {
  "type": "header",
  "content": "Author Section"
},
{
  "type": "checkbox",
  "id": "show_author",
  "label": "Show Author Section",
  "default": true
},
{
  "type": "select",
  "id": "author_position",
  "label": "Author Position",
  "options": [
    {
      "value": "above",
      "label": "Above Subtitle"
    },
    {
      "value": "below",
      "label": "Below Subtitle"
    }
  ],
  "default": "below"
},
{
  "type": "image_picker",
  "id": "author_image",
  "label": "Author Image"
},
{
  "type": "text",
  "id": "author_name",
  "label": "Author Name",
  "default": "By Jade M."
},
{
  "type": "text",
  "id": "last_updated_text",
  "label": "Last Updated Label",
  "default": "Last Updated"
},
{
  "type": "text",
  "id": "last_updated_date",
  "label": "Last Updated Date",
  "default": "Sep 13, 2025"
},
{
  "type": "select",
  "id": "author_name_size",
  "label": "Author Name Size",
  "options": [
    {
      "value": "small",
      "label": "Small (14px)"
    },
    {
      "value": "medium",
      "label": "Medium (16px)"
    },
    {
      "value": "large",
      "label": "Large (18px)"
    }
  ],
  "default": "medium"
},
{
  "type": "select",
  "id": "author_date_size",
  "label": "Last Updated Size",
  "options": [
    {
      "value": "small",
      "label": "Small (12px)"
    },
    {
      "value": "medium",
      "label": "Medium (14px)"
    },
    {
      "value": "large",
      "label": "Large (16px)"
    }
  ],
  "default": "medium"
},
    {
      "type": "header",
      "content": "Listicle Items"
    },
    {
      "type": "select",
      "id": "item_title_size",
      "label": "Item Title Size",
      "options": [
        {
          "value": "small",
          "label": "Small (16px)"
        },
        {
          "value": "medium",
          "label": "Medium (18px)"
        },
        {
          "value": "large",
          "label": "Large (20px)"
        }
      ],
      "default": "large"
    },
    {
      "type": "select",
      "id": "item_description_size",
      "label": "Item Description Size",
      "options": [
        {
          "value": "small",
          "label": "Small (14px)"
        },
        {
          "value": "medium",
          "label": "Medium (15px)"
        },
        {
          "value": "large",
          "label": "Large (16px)"
        }
      ],
      "default": "medium"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Image Border Radius",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "enable_item_border",
      "label": "Enable Item Border",
      "default": false
    },
    {
      "type": "color",
      "id": "item_border_color",
      "label": "Item Border Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "item_border_width",
      "min": 1,
      "max": 3,
      "step": 1,
      "unit": "px",
      "label": "Item Border Width",
      "default": 2
    },
    {
      "type": "range",
      "id": "item_border_radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Item Border Radius",
      "default": 12
    },
    {
      "type": "range",
      "id": "item_padding",
      "min": 0,
      "max": 40,
      "step": 5,
      "unit": "px",
      "label": "Item Padding",
      "default": 20
    },
    {
      "type": "header",
      "content": "Testimonial Settings"
    },
    {
      "type": "checkbox",
      "id": "show_stars",
      "default": true,
      "label": "Show stars in testimonials"
    },
    {
      "type": "range",
      "id": "testimonial_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Testimonial radius",
      "default": 12
    },
    {
      "type": "checkbox",
      "id": "enable_testimonial_border",
      "default": false,
      "label": "Enable testimonial border"
    },
    {
      "type": "select",
      "id": "testimonial_title_size",
      "label": "Testimonial Title Size",
      "options": [
        {
          "value": "small",
          "label": "Small (16px)"
        },
        {
          "value": "medium",
          "label": "Medium (18px)"
        },
        {
          "value": "large",
          "label": "Large (20px)"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "testimonial_text_size",
      "label": "Testimonial Text Size",
      "options": [
        {
          "value": "small",
          "label": "Small (14px)"
        },
        {
          "value": "medium",
          "label": "Medium (15px)"
        },
        {
          "value": "large",
          "label": "Large (16px)"
        }
      ],
      "default": "medium"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "testimonial_bg_color",
      "label": "Testimonial Background Color",
      "default": "#f8f9fa"
    },
    {
      "type": "color",
      "id": "testimonial_border_color",
      "label": "Testimonial Border Color",
      "default": "#e0e0e0"
    },
    {
      "type": "color",
      "id": "stars_color",
      "label": "Stars Color",
      "default": "#ffd700"
    },
    {
      "type": "color",
      "id": "quote_color",
      "label": "Quote Marks Color",
      "default": "#6c757d"
    },
    {
      "type": "color",
      "id": "author_color",
      "label": "Author Name Color",
      "default": "#495057"
    },
    {
      "type": "header",
      "content": "CTA Section"
    },
    {
      "type": "checkbox",
      "id": "enable_cta",
      "label": "Enable CTA Section V1",
      "default": true,
      "info": "Show or hide the entire CTA section. For a more advanced CTA section, add the CTA section V2 block."
    },
    {
      "type": "text",
      "id": "cta_heading",
      "label": "CTA Heading",
      "default": "Exclusive Early Black Friday Deal"
    },
    {
      "type": "text",
      "id": "cta_highlight_text",
      "label": "Highlight Text",
      "default": "Join the #1 coffee club and try NAME while it's on sale now!"
    },
    {
      "type": "text",
      "id": "cta_badge_text",
      "label": "Badge Text",
      "default": "FREE $40 PREMIUM SERUM WITH YOUR ORDER"
    },
    {
      "type": "color",
      "id": "badge_bg_color",
      "label": "Badge Background Color",
      "default": "#25282A"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge Text Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "badge_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Badge Border Radius",
      "default": 20
    },
    {
      "type": "text",
      "id": "cta_eyebrow",
      "label": "Eyebrow Text",
      "default": "60% OFF FOR A LIMITED TIME ONLY!"
    },
    {
      "type": "color",
      "id": "cta_eyebrow_color",
      "label": "Eyebrow Text Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "cta_price",
      "label": "Price",
      "default": "$79.99"
    },
    {
      "type": "color",
      "id": "cta_price_color",
      "label": "Price Color",
      "default": "#4CAF50"
    },
    {
      "type": "text",
      "id": "cta_original_price",
      "label": "Original Price",
      "default": "(was $199.99)"
    },
    {
      "type": "color",
      "id": "cta_original_price_color",
      "label": "Original Price Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "cta_bg_start",
      "label": "CTA Background Color",
      "default": "#FFF8E1"
    },
    {
      "type": "checkbox",
      "id": "enable_dashed_border",
      "label": "Enable Dashed Border",
      "default": true
    },
    {
      "type": "range",
      "id": "cta_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "CTA Border Radius",
      "default": 16
    },
    {
      "type": "color",
      "id": "cta_border_color",
      "label": "CTA Border Color",
      "default": "#FFB74D"
    },
    {
      "type": "color",
      "id": "cta_heading_color",
      "label": "CTA Heading Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "cta_text_color",
      "label": "CTA Text Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Benefit checkmark color",
      "default": "#4CAF50"
    },
    {
      "type": "image_picker",
      "id": "cta_product_image_1",
      "label": "CTA Product Image"
    },
    {
      "type": "text",
      "id": "benefit_1",
      "label": "Benefit 1",
      "default": "FREE X"
    },
    {
      "type": "text",
      "id": "benefit_2",
      "label": "Benefit 2",
      "default": "FREE X"
    },
    {
      "type": "text",
      "id": "benefit_3",
      "label": "Benefit 3",
      "default": "FREE X"
    },
    {
      "type": "select",
      "id": "benefit_font_size",
      "label": "Benefit Item Font Size",
      "options": [
        {
          "value": "small",
          "label": "Small (12px)"
        },
        {
          "value": "medium",
          "label": "Medium (13px)"
        },
        {
          "value": "large",
          "label": "Large (14px)"
        }
      ],
      "default": "medium"
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Button Border Radius",
      "default": 25
    },
    {
      "type": "text",
      "id": "bottom_cta_text",
      "label": "Bottom CTA Button Text",
      "default": "BUY NOW"
    },
    {
      "type": "url",
      "id": "bottom_cta_url",
      "label": "Bottom CTA Button URL"
    },
    {
  "type": "header",
  "content": "Sticky Button"
},
{
  "type": "checkbox",
  "id": "show_sticky_button",
  "label": "Show Sticky Button",
  "default": true
},
{
  "type": "select",
  "id": "sticky_button_action",
  "label": "Sticky Button Action",
  "options": [
    {
      "value": "scroll_to_cta",
      "label": "Scroll to CTA Section"
    },
    {
      "value": "link_to_page",
      "label": "Link to Page"
    }
  ],
  "default": "scroll_to_cta"
},
{
  "type": "text",
  "id": "sticky_button_text",
  "label": "Sticky Button Text",
  "default": "YES, GET 60% OFF"
},
{
  "type": "url",
  "id": "sticky_button_url",
  "label": "Sticky Button URL",
  "info": "Only used when 'Link to Page' is selected"
},
{
  "type": "color",
  "id": "sticky_button_bg_color",
  "label": "Sticky Button Background Color",
  "default": "#4a4a4a"
},
{
  "type": "color",
  "id": "sticky_button_text_color",
  "label": "Sticky Button Text Color",
  "default": "#ffffff"
},
{
  "type": "range",
  "id": "sticky_button_border_radius",
  "min": 0,
  "max": 25,
  "step": 1,
  "unit": "px",
  "label": "Sticky Button Border Radius",
  "default": 4
},
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 20
    }
  ],
  "blocks": [
    {
      "type": "listicle_item",
      "name": "Listicle Item",
      "settings": [
        {
          "type": "select",
          "id": "image_position",
          "label": "Image Position (Desktop)",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        },
        {
          "type": "select",
          "id": "mobile_text_position",
          "label": "Mobile Text Position",
          "info": "Choose whether title and description appear above or below the image on mobile devices",
          "options": [
            {
              "value": "below",
              "label": "Below Image"
            },
            {
              "value": "above",
              "label": "Above Image"
            }
          ],
          "default": "below"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Item Title"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "default": "Item description goes here."
        },
        {
        "type": "select",
        "id": "text_alignment",
        "label": "Text Alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "range",
        "id": "block_margin_bottom",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Spacing Below Block",
        "default": 40,
        "info": "Adjust the space between this block and the next one"
      }
      ]
    },
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Testimonial Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Testimonial Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Testimonial Text",
          "default": "<p>This is an amazing product! I highly recommend it to everyone.</p>"
        },
        {
          "type": "image_picker",
          "id": "author_avatar",
          "label": "Author Avatar"
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author Name",
          "default": "Customer Name"
        },
        {
        "type": "range",
        "id": "block_margin_bottom",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "px",
        "label": "Spacing Below Block",
        "default": 40,
        "info": "Adjust the space between this block and the next one"
      }
      ]
    },
    {
      "type": "limited_time_sale",
      "name": "CTA section V2",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Product Image"
        },
        {
          "type": "text",
          "id": "chip_text",
          "label": "Chip Text",
          "default": "BEST VALUE"
        },
        {
          "type": "range",
          "id": "chip_border_radius",
          "label": "Chip Border Radius",
          "min": 0,
          "max": 50,
          "step": 1,
          "unit": "px",
          "default": 20
        },
        {
          "type": "text",
          "id": "eyebrow_text",
          "label": "Eyebrow Text",
          "default": "LIMITED TIME ONLY"
        },
        {
          "type": "color",
          "id": "eyebrow_color",
          "label": "Eyebrow Color",
          "default": "#FF6B6B"
        },
        {
          "type": "text",
          "id": "headline_accent",
          "label": "Headline Primary Text",
          "default": "$79.99"
        },
        {
          "type": "text",
          "id": "headline_strong",
          "label": "Headline Secondary Text",
          "default": "(was $199.99)"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "Description",
          "default": "This exclusive offer is in high demand and stock keeps selling out."
        },
        {
          "type": "text",
          "id": "cta_label",
          "label": "Button Label",
          "default": "CLAIM 60% OFF + FREE BOTTLE"
        },
        {
          "type": "url",
          "id": "cta_link",
          "label": "Button Link"
        },
        {
          "type": "color",
          "id": "cta_bg_color",
          "label": "Button Background Color",
          "default": "#FF6B6B"
        },
        {
          "type": "color",
          "id": "cta_text_color",
          "label": "Button Text Color",
          "default": "#FFFFFF"
        },
        {
          "type": "range",
          "id": "cta_border_radius",
          "label": "Button Border Radius",
          "min": 0,
          "max": 50,
          "step": 1,
          "unit": "px",
          "default": 25,
          "info": "Adjust the roundness of the button corners"
        },
        {
          "type": "text",
          "id": "sellout_risk_label",
          "label": "Sell-Out Risk Label",
          "default": "Sell-Out Risk:"
        },
        {
          "type": "text",
          "id": "sellout_risk_text",
          "label": "Sell-Out Risk Text",
          "default": "VERY HIGH",
          "info": "Custom text to display for sell-out risk level"
        },
        {
          "type": "checkbox",
          "id": "enable_countdown",
          "label": "Enable Countdown Timer",
          "default": true,
          "info": "Show/hide the countdown timer"
        },
        {
          "type": "text",
          "id": "countdown_label",
          "label": "Countdown Label",
          "default": "DEAL ENDING IN:"
        },
        {
          "type": "range",
          "id": "countdown_hours",
          "label": "Countdown Hours",
          "min": 1,
          "max": 72,
          "step": 1,
          "default": 24
        },
        {
          "type": "checkbox",
          "id": "enable_custom_timer",
          "label": "Enable Custom Timer",
          "default": false,
          "info": "When enabled, uses the days/hours/minutes below instead of the Hours setting above",
          "visible_if": "{{ block.settings.enable_countdown == true }}"
        },
        {
          "type": "header",
          "content": "Custom Timer",
          "visible_if": "{{ block.settings.enable_custom_timer == true }}"
        },
        {
          "type": "range",
          "id": "reset_days",
          "label": "Days",
          "min": 0,
          "max": 31,
          "step": 1,
          "default": 0,
          "visible_if": "{{ block.settings.enable_custom_timer == true }}"
        },
        {
          "type": "range",
          "id": "reset_hours",
          "label": "Hours",
          "min": 0,
          "max": 23,
          "step": 1,
          "default": 0,
          "visible_if": "{{ block.settings.enable_custom_timer == true }}"
        },
        {
          "type": "range",
          "id": "reset_minutes",
          "label": "Minutes",
          "min": 0,
          "max": 59,
          "step": 1,
          "default": 0,
          "visible_if": "{{ block.settings.enable_custom_timer == true }}"
        },
        {
          "type": "text",
          "id": "label_days",
          "label": "Days label",
          "default": "DAYS",
          "visible_if": "{{ block.settings.enable_custom_timer == true }}"
        },
        {
          "type": "text",
          "id": "label_hours",
          "label": "Hours label",
          "default": "HRS",
          "visible_if": "{{ block.settings.enable_countdown == true }}"
        },
        {
          "type": "text",
          "id": "label_minutes",
          "label": "Minutes label",
          "default": "MIN",
          "visible_if": "{{ block.settings.enable_countdown == true }}"
        },
        {
          "type": "text",
          "id": "label_seconds",
          "label": "Seconds label",
          "default": "SEC",
          "visible_if": "{{ block.settings.enable_countdown == true }}"
        },
        {
          "type": "text",
          "id": "shipping_text",
          "label": "Shipping Badge Text",
          "default": "FREE SHIPPING"
        },
        {
          "type": "text",
          "id": "guarantee_text",
          "label": "Guarantee Badge Text",
          "default": "90-Day Money-Back Guarantee"
        },
        {
          "type": "color",
          "id": "container_bg_color",
          "label": "Container Background Color",
          "default": "#FFF9E6"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#333333"
        },
        {
          "type": "color",
          "id": "accent_color",
          "label": "Accent Color",
          "default": "#FF6B6B"
        },
        {
          "type": "color",
          "id": "chip_bg_color",
          "label": "Chip Background Color",
          "default": "#FF6B6B"
        },
        {
          "type": "color",
          "id": "chip_text_color",
          "label": "Chip Text Color",
          "default": "#FFFFFF"
        },
        {
          "type": "range",
          "id": "container_border_radius",
          "label": "Container Border Radius",
          "min": 0,
          "max": 30,
          "step": 1,
          "unit": "px",
          "default": 12
        },
        {
          "type": "select",
          "id": "container_border_style",
          "label": "Container Border Style",
          "options": [
            { "value": "dashed", "label": "Dashed" },
            { "value": "solid", "label": "Solid" }
          ],
          "default": "dashed"
        }
      ]
    },
     {
  "type": "comparison_chart",
  "name": "Comparison table",
    "limit": 1,
  "settings": [
    {
      "type": "header",
      "content": "Display Mode"
    },
    {
      "type": "checkbox",
      "id": "use_text_display",
      "label": "Use Text Instead of Icons",
      "default": false,
      "info": "When enabled, displays custom text or Yes/No instead of checkmark/cross icons"
    },
    {
      "type": "header",
      "content": "Your Brand Column"
    },
    {
      "type": "image_picker",
      "id": "your_brand_image",
      "label": "Your Brand Image"
    },
    {
      "type": "text",
      "id": "your_brand_title",
      "label": "Your Brand Title",
      "default": "Your Brand"
    },
    {
      "type": "color",
      "id": "your_brand_bg_color",
      "label": "Header Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "your_brand_border_color",
      "label": "Border Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "your_brand_border_width",
      "min": 1,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Border Width",
      "default": 3
    },
    {
      "type": "color",
      "id": "your_brand_cell_bg_color",
      "label": "Cell Background Color",
      "default": "#f5f5f5"
    },
    {
      "type": "checkbox",
      "id": "show_your_brand_badge",
      "label": "Show Badge",
      "default": false
    },
    {
      "type": "text",
      "id": "your_brand_icon",
      "label": "Badge Icon Name",
      "info": "Material Symbols icon name (e.g., 'verified', 'star')",
      "default": "verified"
    },
    {
      "type": "color",
      "id": "your_brand_icon_color",
      "label": "Badge Icon Color",
      "default": "#000000"
    },
    {
      "type": "text",
      "id": "your_brand_badge_text",
      "label": "Badge Text",
      "default": "Original"
    },
    {
      "type": "color",
      "id": "your_brand_badge_color",
      "label": "Badge Text Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Other Brand Column"
    },
    {
      "type": "image_picker",
      "id": "other_brand_image",
      "label": "Other Brand Image"
    },
    {
      "type": "text",
      "id": "other_brand_title",
      "label": "Other Brand Title",
      "default": "Others"
    },
    {
      "type": "color",
      "id": "other_brand_bg_color",
      "label": "Header Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "other_brand_border_color",
      "label": "Border Color",
      "default": "#e0e0e0"
    },
    {
      "type": "range",
      "id": "other_brand_border_width",
      "min": 1,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Border Width",
      "default": 1
    },
    {
      "type": "color",
      "id": "other_brand_cell_bg_color",
      "label": "Cell Background Color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "show_other_brand_badge",
      "label": "Show Badge",
      "default": false
    },
    {
      "type": "text",
      "id": "other_brand_icon",
      "label": "Badge Icon Name",
      "info": "Material Symbols icon name (e.g., 'cancel', 'close')",
      "default": "cancel"
    },
    {
      "type": "color",
      "id": "other_brand_icon_color",
      "label": "Badge Icon Color",
      "default": "#121212"
    },
    {
      "type": "text",
      "id": "other_brand_badge_text",
      "label": "Badge Text",
      "default": "Knock-off"
    },
    {
      "type": "color",
      "id": "other_brand_badge_color",
      "label": "Badge Text Color",
      "default": "#121212"
    },
    {
      "type": "header",
      "content": "Comparison Rows"
    },
    {
      "type": "text",
      "id": "row_1_text",
      "label": "Row 1 - Feature Text",
      "default": "Benefit"
    },
    {
      "type": "checkbox",
      "id": "row_1_your_brand",
      "label": "Row 1 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_1_your_brand_custom",
      "label": "Row 1 - Your Brand Custom Text",
      "info": "Optional: Override default text for this cell"
    },
    {
      "type": "checkbox",
      "id": "row_1_other_brand",
      "label": "Row 1 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_1_other_brand_custom",
      "label": "Row 1 - Other Brand Custom Text",
      "info": "Optional: Override default text for this cell"
    },
    {
      "type": "text",
      "id": "row_2_text",
      "label": "Row 2 - Feature Text",
      "default": "Benefit"
    },
    {
      "type": "checkbox",
      "id": "row_2_your_brand",
      "label": "Row 2 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_2_your_brand_custom",
      "label": "Row 2 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_2_other_brand",
      "label": "Row 2 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_2_other_brand_custom",
      "label": "Row 2 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_3_text",
      "label": "Row 3 - Feature Text",
      "default": "Benefit"
    },
    {
      "type": "checkbox",
      "id": "row_3_your_brand",
      "label": "Row 3 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_3_your_brand_custom",
      "label": "Row 3 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_3_other_brand",
      "label": "Row 3 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_3_other_brand_custom",
      "label": "Row 3 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_4_text",
      "label": "Row 4 - Feature Text"
    },
    {
      "type": "checkbox",
      "id": "row_4_your_brand",
      "label": "Row 4 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_4_your_brand_custom",
      "label": "Row 4 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_4_other_brand",
      "label": "Row 4 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_4_other_brand_custom",
      "label": "Row 4 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_5_text",
      "label": "Row 5 - Feature Text"
    },
    {
      "type": "checkbox",
      "id": "row_5_your_brand",
      "label": "Row 5 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_5_your_brand_custom",
      "label": "Row 5 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_5_other_brand",
      "label": "Row 5 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_5_other_brand_custom",
      "label": "Row 5 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_6_text",
      "label": "Row 6 - Feature Text"
    },
    {
      "type": "checkbox",
      "id": "row_6_your_brand",
      "label": "Row 6 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_6_your_brand_custom",
      "label": "Row 6 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_6_other_brand",
      "label": "Row 6 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_6_other_brand_custom",
      "label": "Row 6 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_7_text",
      "label": "Row 7 - Feature Text"
    },
    {
      "type": "checkbox",
      "id": "row_7_your_brand",
      "label": "Row 7 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_7_your_brand_custom",
      "label": "Row 7 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_7_other_brand",
      "label": "Row 7 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_7_other_brand_custom",
      "label": "Row 7 - Other Brand Custom Text"
    },
    {
      "type": "text",
      "id": "row_8_text",
      "label": "Row 8 - Feature Text"
    },
    {
      "type": "checkbox",
      "id": "row_8_your_brand",
      "label": "Row 8 - Your Brand Has Feature",
      "default": true
    },
    {
      "type": "text",
      "id": "row_8_your_brand_custom",
      "label": "Row 8 - Your Brand Custom Text"
    },
    {
      "type": "checkbox",
      "id": "row_8_other_brand",
      "label": "Row 8 - Other Brand Has Feature",
      "default": false
    },
    {
      "type": "text",
      "id": "row_8_other_brand_custom",
      "label": "Row 8 - Other Brand Custom Text"
    },
    {
      "type": "header",
      "content": "Text Display Settings"
    },
    {
      "type": "text",
      "id": "positive_text",
      "label": "Positive Text",
      "default": "Yes",
      "info": "Text shown when feature is present"
    },
    {
      "type": "text",
      "id": "negative_text",
      "label": "Negative Text",
      "default": "No",
      "info": "Text shown when feature is absent"
    },
    {
      "type": "color",
      "id": "positive_text_color",
      "label": "Positive Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "negative_text_color",
      "label": "Negative Text Color",
      "default": "#999999"
    },
    {
      "type": "range",
      "id": "cell_text_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Cell Text Size",
      "default": 16
    },
    {
      "type": "select",
      "id": "cell_text_weight",
      "label": "Cell Text Weight",
      "options": [
        {
          "value": "400",
          "label": "Normal"
        },
        {
          "value": "600",
          "label": "Semi Bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600"
    },
    {
      "type": "header",
      "content": "Icon Styling"
    },
    {
      "type": "color",
      "id": "checkmark_color",
      "label": "Checkmark Background Color",
      "default": "#53AF01"
    },
    {
      "type": "color",
      "id": "crossmark_bg_color",
      "label": "Cross Background Color",
      "default": "#DBDBDB"
    },
    {
      "type": "range",
      "id": "icon_size",
      "min": 16,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Badge Icon Size",
      "default": 20
    },
    {
      "type": "header",
      "content": "Row Styling"
    },
    {
      "type": "color",
      "id": "row_bg_color",
      "label": "Row Background Color",
      "default": "#fafafa"
    },
    {
      "type": "color",
      "id": "row_text_color",
      "label": "Row Text Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "row_font_size",
      "min": 14,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Row Font Size",
      "default": 18
    },
    {
      "type": "select",
      "id": "row_font_weight",
      "label": "Row Font Weight",
      "options": [
        {
          "value": "400",
          "label": "Normal"
        },
        {
          "value": "600",
          "label": "Semi Bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "700"
    },
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "range",
      "id": "header_font_size",
      "min": 14,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Header Font Size",
      "default": 18
    },
    {
      "type": "range",
      "id": "badge_font_size",
      "min": 8,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Badge Font Size",
      "default": 10
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 4,
      "step": 0.5,
      "unit": "rem",
      "label": "Border Radius",
      "default": 2
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 40,
      "max": 150,
      "step": 10,
      "unit": "px",
      "label": "Logo Width (Desktop)",
      "default": 80
    },
    {
      "type": "range",
      "id": "mobile_logo_width",
      "min": 30,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Logo Width (Mobile)",
      "default": 60
    },
    {
      "type": "range",
      "id": "cell_separator_opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Cell Separator Opacity",
      "default": 0
    },
    {
      "type": "header",
      "content": "Block Margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 30,
      "step": 3,
      "unit": "px",
      "label": "Top Margin",
      "default": 15
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 30,
      "step": 3,
      "unit": "px",
      "label": "Bottom Margin",
      "default": 15
    }
  ]
},
    {
  "type": "disclaimer",
  "name": "Disclaimer Footer",
  "limit": 1,
  "settings": [
    {
      "type": "richtext",
      "id": "disclaimer_text",
      "label": "Disclaimer Text",
      "default": "<p>This statement has not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.</p>",
      "info": "Disclaimer text that appears at the bottom of the page"
    },
    {
      "type": "header",
      "content": "Copyright & Legal Links"
    },
    {
      "type": "checkbox",
      "id": "show_copyright",
      "label": "Show Copyright Text",
      "default": true
    },
    {
      "type": "text",
      "id": "copyright_text",
      "label": "Copyright Text",
      "default": "© 2025 STORE NAMEs. All rights reserved."
    },
    {
      "type": "checkbox",
      "id": "show_legal_links",
      "label": "Show Legal Links",
      "default": true
    },
    {
      "type": "text",
      "id": "terms_link_text",
      "label": "Terms Link Text",
      "default": "Terms of Service"
    },
    {
      "type": "url",
      "id": "terms_link_url",
      "label": "Terms Link URL"
    },
    {
      "type": "text",
      "id": "privacy_link_text",
      "label": "Privacy Link Text",
      "default": "Privacy Policy"
    },
    {
      "type": "url",
      "id": "privacy_link_url",
      "label": "Privacy Link URL"
    },
    {
      "type": "select",
      "id": "disclaimer_alignment",
      "label": "Text Alignment",
      "default": "center",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    {
      "type": "color",
      "id": "disclaimer_text_color",
      "label": "Text Color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "disclaimer_background_color",
      "label": "Background Color",
      "default": "#f8f8f8"
    },
    {
      "type": "range",
      "id": "disclaimer_font_size",
      "label": "Font Size",
      "default": 12,
      "min": 10,
      "max": 18,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "disclaimer_padding_top",
      "label": "Padding Top",
      "default": 20,
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "disclaimer_padding_bottom",
      "label": "Padding Bottom",
      "default": 20,
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px"
    }
  ]
}
  ],
  "presets": [
    {
      "name": "Listicle",
      "category": "Content",
      "blocks": [
        {
          "type": "listicle_item",
          "settings": {
            "title": "Reason #1: Premium Quality",
            "description": "Our coffee is sourced from the finest beans around the world, ensuring every cup delivers exceptional taste and aroma.",
            "image_position": "left"
          }
        },
        {
          "type": "listicle_item",
          "settings": {
            "title": "Reason #2: Convenient Delivery",
            "description": "Get fresh coffee delivered right to your door every month. Never run out of your favorite brew again.",
            "image_position": "right"
          }
        },
        {
          "type": "listicle_item",
          "settings": {
            "title": "Reason #3: Money-Back Guarantee",
            "description": "Try our coffee risk-free with our 30-day money-back guarantee. We're confident you'll love every sip.",
            "image_position": "left"
          }
        },
        {
          "type": "testimonial",
          "settings": {
            "title": "Life-Changing Coffee Experience",
            "text": "<p>I've been a coffee lover for years, but this subscription has completely transformed my morning routine. The quality is unmatched!</p>",
            "author": "Sarah Johnson"
          }
        },
        {
        "type": "disclaimer",
        "settings": {
          "disclaimer_text": "<p>This statement has not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.</p>"
        }
      }
      ]
    }
  ]
}
{% endschema %}