{%- liquid
  assign product = section.settings.product
  assign product_form_id = 'qb-section-form-' | append: section.id
-%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.mobile_padding_top }}px;
    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
  }

  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.desktop_padding_top }}px;
      padding-bottom: {{ section.settings.desktop_padding_bottom }}px;
    }
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  #QBSection-{{ section.id }} {
    max-width: {{ section.settings.content_max_width }}px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Hero image */
  #QBSection-{{ section.id }} .qb-section__hero {
    width: 100%;
    overflow: hidden;
  }

  #QBSection-{{ section.id }} .qb-section__hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: {{ section.settings.image_object_fit }};
    border-radius: {{ section.settings.image_border_radius }}px;
  }

  #QBSection-{{ section.id }} .qb-section__hero--desktop {
    display: none;
  }

  #QBSection-{{ section.id }} .qb-section__hero--mobile {
    display: block;
  }

  @media screen and (min-width: 750px) {
    #QBSection-{{ section.id }} .qb-section__hero--desktop {
      display: block;
    }
    #QBSection-{{ section.id }} .qb-section__hero--mobile {
      display: none;
    }
  }

  /* Space between hero image and quantity breaks */
  #QBSection-{{ section.id }} quantity-breaks {
    margin-top: {{ section.settings.qb_margin_top }}px !important;
  }

  /* Quantity breaks margin — CSS vars set by snippet but not consumed in base.css */
  #QBSection-{{ section.id }} quantity-breaks {
    margin-top: var(--margin-top, 0);
    margin-bottom: var(--margin-bottom, 0);
  }

  /* ATC sizing — driven by buy_buttons block settings, rendered per-block below */

  /* Guarantee text */
  #QBSection-{{ section.id }} .qb-section__guarantee {
    margin-top: 1.2rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgb(var(--color-foreground));
    opacity: 0.7;
  }
{%- endstyle -%}

<div
  class="color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding section-{{ section.id }}-margin"
  data-section="{{ section.id }}"
>
  <div id="QBSection-{{ section.id }}">

  {%- if section.settings.display_id -%}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {%- endif -%}

  {%- comment -%} ── Hero image ── {%- endcomment -%}
  {%- if section.settings.desktop_image != blank or section.settings.mobile_image != blank -%}
    <div class="qb-section__hero" style="margin-bottom: {{ section.settings.image_bottom_spacing }}px;">

      {%- if section.settings.desktop_image != blank -%}
        <div class="qb-section__hero--desktop">
          {{
            section.settings.desktop_image
            | image_url: width: 1400
            | image_tag:
              loading: 'lazy',
              widths: '400, 600, 800, 1000, 1200, 1400',
              sizes: '(min-width: 750px) min(100vw, 1400px), 100vw',
              alt: section.settings.desktop_image.alt
          }}
        </div>
      {%- endif -%}

      {%- if section.settings.mobile_image != blank -%}
        <div class="qb-section__hero--mobile">
          {{
            section.settings.mobile_image
            | image_url: width: 800
            | image_tag:
              loading: 'lazy',
              widths: '375, 480, 600, 750, 800',
              sizes: '100vw',
              alt: section.settings.mobile_image.alt
          }}
        </div>
      {%- elsif section.settings.desktop_image != blank -%}
        {%- comment -%}Fallback: show desktop image on mobile if no mobile image set{%- endcomment -%}
        <div class="qb-section__hero--mobile">
          {{
            section.settings.desktop_image
            | image_url: width: 800
            | image_tag:
              loading: 'lazy',
              widths: '375, 480, 600, 750, 800',
              sizes: '100vw',
              alt: section.settings.desktop_image.alt
          }}
        </div>
      {%- endif -%}

    </div>
  {%- endif -%}

  {%- comment -%} ── Quantity breaks + ATC ── {%- endcomment -%}
  {%- if product != blank -%}

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

        {%- when 'quantity_breaks' -%}
          {%- liquid
            assign price = product.selected_or_first_available_variant.price
            assign compare_price = product.selected_or_first_available_variant.compare_at_price
          -%}
          {% render 'quantity-breaks',
            block: block,
            product: product,
            product_form_id: product_form_id,
            price: price,
            compare_price: compare_price,
            section: section
          %}
          <script>
            (function() {
              var sid = {{ section.id | json }};
              var qb = document.querySelector('#QBSection-' + sid + ' quantity-breaks');
              if (!qb) return;
              // The snippet hardcodes id="quantity1..4" and for="quantity1..4".
              // If the main product section also has quantity breaks, the browser's
              // native label→input association scrolls to the first matching ID on the page.
              // Scope all IDs and for attributes to this section to prevent that.
              qb.querySelectorAll('input[name="quantity"]').forEach(function(input) {
                var oldId = input.id;
                var newId = oldId + '-' + sid;
                input.id = newId;
                var label = qb.querySelector('label[for="' + oldId + '"]');
                if (label) label.setAttribute('for', newId);
              });
            })();
          </script>

        {%- when 'buy_buttons' -%}
          {%- liquid
            assign quantity_rule_soldout = false
            if product.selected_or_first_available_variant.inventory_management == 'shopify' and product.selected_or_first_available_variant.inventory_policy != 'continue'
              if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity
                assign quantity_rule_soldout = true
              endif
            endif
          -%}

          {%- style -%}
            #QBSection-{{ section.id }} .qb-product-form {
              margin-top: {{ block.settings.atc_margin_top }}px;
            }
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }} {
              font-size: {{ block.settings.atc_font_size }}px;
            }
            {%- unless block.settings.atc_text %}
            #QBSection-{{ section.id }} .qb-atc-label-text {
              display: none !important;
            }
            {%- endunless %}
            {%- if block.settings.enable_gradient %}
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }} {
              background: {{ block.settings.button_gradient }} !important;
              background-color: transparent !important;
            }
            {%- elsif block.settings.enable_custom_color %}
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }} {
              --color-button: {{ block.settings.custom_color.red }}, {{ block.settings.custom_color.green }}, {{ block.settings.custom_color.blue }};
            }
            {%- endif %}
            {%- if block.settings.enable_shine_animation %}
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }} {
              position: relative;
              overflow: hidden;
            }
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }}::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(255,255,255,{{ block.settings.shine_opacity | divided_by: 100.0 }}), transparent);
              transition: left {{ block.settings.shine_duration | divided_by: 10.0 }}s ease;
              z-index: 1;
            }
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }}:hover::before {
              left: 100%;
            }
            #QBSection-{{ section.id }} #QBSubmitButton-{{ section.id }} .button__label {
              position: relative;
              z-index: 2;
            }
            {%- endif %}
          {%- endstyle -%}

          <div
            {{ block.shopify_attributes }}
            class="qb-product-form"
            style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem; --margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
          >
            {%- if product != blank -%}
              <product-form
                class="product-form"
                data-section="{{ section.id }}"
                data-options="{{ product.options | join: ',' }}"
                data-main="false"
              >
                <div class="product-form__error-message-wrapper" role="alert" hidden>
                  <svg aria-hidden="true" focusable="false" class="icon icon-error" viewBox="0 0 13 13">
                    <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                    <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                    <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                  </svg>
                  <span class="product-form__error-message"></span>
                </div>
                {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <div class="hidden product-form__variants" id="product-form-{{ section.id }}__variants" data-values=""></div>
                  <input
                    type="hidden"
                    name="id"
                    value="{{ product.selected_or_first_available_variant.id }}"
                    class="product-variant-id"
                  >
                  <div class="product-form__buttons">
                    <button
                      id="QBSubmitButton-{{ section.id }}"
                      type="submit"
                      name="add"
                      class="atc-button product-form__submit button button--full-width button--primary featured-product-atc-{{ section.id }}"
                      {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
                        disabled
                        data-unavailable="true"
                      {% endif %}
                      data-required-fields="0"
                      data-valid-fields="0"
                      style="padding-top: {{ block.settings.atcbuttonpadding }}px !important; padding-bottom: {% if block.settings.atc_text %}35{% else %}{{ block.settings.atcbuttonpadding }}{% endif %}px !important;{% if block.settings.atc_text %} overflow: visible;{% endif %}"
                    >
                      <span class="main-atc__label button__label">
                        {%- if block.settings.display_price and block.settings.price_position == 'left' -%}
                          <span id="main-atc-price-{{ section.id }}" class="main-atc-price{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                            {%- if block.settings.show_compare_price and product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
                              {%- if block.settings.compare_price_position == 'before' -%}
                                <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">({{ product.selected_or_first_available_variant.compare_at_price | money }})</span>
                              {%- endif -%}
                              <span class="main-atc-price-span-{{ section.id }}">{{- product.selected_or_first_available_variant.price | money -}}</span>
                              {%- if block.settings.compare_price_position == 'after' -%}
                                <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">({{ product.selected_or_first_available_variant.compare_at_price | money }})</span>
                              {%- endif -%}
                            {%- else -%}
                              <span class="main-atc-price-span-{{ section.id }}">{{- product.selected_or_first_available_variant.price | money -}}</span>
                            {%- endif -%}
                            <span class="price-separator-spacing">{{ block.settings.price_separator }}</span>
                          </span>
                        {%- endif -%}
                        <span class="main-atc__label__text">
                          {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- elsif block.settings.atc_custom_label != blank -%}
                            {{ block.settings.atc_custom_label }}
                          {%- else -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- endif -%}
                        </span>
                        {%- if block.settings.display_price and block.settings.price_position == 'right' -%}
                          <span id="main-atc-price-{{ section.id }}" class="main-atc-price{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                            {%- unless block.settings.enable_opposite_layout -%}
                              <span class="price-separator-spacing">{{ block.settings.price_separator }}</span>
                            {%- endunless -%}
                            {%- if block.settings.show_compare_price and product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
                              {%- if block.settings.compare_price_position == 'before' -%}
                                <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">({{ product.selected_or_first_available_variant.compare_at_price | money }})</span>
                              {%- endif -%}
                              <span class="main-atc-price-span-{{ section.id }}">{{- product.selected_or_first_available_variant.price | money -}}</span>
                              {%- if block.settings.compare_price_position == 'after' -%}
                                <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">({{ product.selected_or_first_available_variant.compare_at_price | money }})</span>
                              {%- endif -%}
                            {%- else -%}
                              <span class="main-atc-price-span-{{ section.id }}">{{- product.selected_or_first_available_variant.price | money -}}</span>
                            {%- endif -%}
                          </span>
                        {%- endif -%}
                        {%- if block.settings.atc_icon == 'shopping_cart' -%}<i class="fa-solid fa-cart-shopping" style="margin-left:10px;"></i>{%- endif -%}
                        {%- if block.settings.atc_icon == 'shopping_bag' -%}<i class="fa-solid fa-bag-shopping" style="margin-left:10px;"></i>{%- endif -%}
                        {%- if block.settings.atc_icon == 'arrow_next_to_text' -%}<i class="fa-solid fa-arrow-right" style="margin-left:10px;"></i>{%- endif -%}
                      </span>
                      <div class="loading-overlay__spinner hidden">
                        <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                      {%- if block.settings.atc_text -%}
                        <div class="qb-atc-label-text" style="position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 50px; font-size: {{ block.settings.atc_text_labelsize }}px; text-transform: {{ block.settings.atc_text_labeltransform }}; width: 100%; left: 0;">
                          {%- if block.settings.atc_text_icon_enable -%}
                            {%- if block.settings.atc_text_icon_image != blank -%}
                              <img src="{{ block.settings.atc_text_icon_image | image_url: width: 40 }}" alt="" style="height: {{ block.settings.atc_text_icon_size }}px; width: {{ block.settings.atc_text_icon_size }}px; object-fit: contain; display: inline-block;">
                            {%- elsif block.settings.atc_text_icon_name != blank -%}
                              <span class="material-symbols-outlined" style="font-size: {{ block.settings.atc_text_icon_size }}px; line-height: 1;">{{ block.settings.atc_text_icon_name }}</span>
                            {%- endif -%}
                          {%- endif -%}
                          {{ block.settings.atc_text_label }}
                        </div>
                      {%- endif -%}
                    </button>
                  </div>
                {%- endform -%}
              </product-form>
            {%- else -%}
              <div class="product-form">
                <div class="product-form__buttons form">
                  <button type="submit" name="add" class="product-form__submit button button--full-width button--primary" disabled>
                    {{ 'products.product.sold_out' | t }}
                  </button>
                </div>
              </div>
            {%- endif -%}
          </div>

          <script>
            (function() {
              var sid = {{ section.id | json }};
              var moneyFormat = {{ shop.money_format | json }};

              function formatMoney(cents) {
                if (typeof window.Shopify !== 'undefined' && window.Shopify.formatMoney) {
                  return window.Shopify.formatMoney(cents, moneyFormat);
                }
                return (cents / 100).toFixed(2);
              }

              function updateAtcPrice() {
                var qb = document.querySelector('#QBSection-' + sid + ' quantity-breaks');
                if (!qb) return;

                var checkedInput = qb.querySelector('input[name="quantity"]:checked');
                if (!checkedInput) return;

                var label = qb.querySelector('label[data-input="' + checkedInput.dataset.input + '"]');
                if (!label) return;

                var basePrice = parseInt(qb.dataset.basePrice || 0);
                var baseCompare = parseInt(qb.dataset.baseComparePrice || 0);
                var qty = parseInt(checkedInput.value) || 1;
                var pctLeft = parseFloat(label.dataset.percentageLeft || 1);
                var fixedDiscount = parseInt(label.dataset.fixedDiscount || 0);

                var totalPrice = Math.round(basePrice * qty * pctLeft) - fixedDiscount;
                var totalCompare = baseCompare * qty;

                var priceSpans = document.querySelectorAll('#QBSection-' + sid + ' .main-atc-price-span-' + sid);
                priceSpans.forEach(function(span) {
                  span.innerHTML = formatMoney(totalPrice);
                });

                var compareSpans = document.querySelectorAll('#QBSection-' + sid + ' .main-atc-compare-price-span-' + sid);
                compareSpans.forEach(function(span) {
                  span.innerHTML = '(' + formatMoney(totalCompare) + ')';
                  if (totalCompare > totalPrice) {
                    span.closest('.main-atc-compare-price') && span.closest('.main-atc-compare-price').classList.remove('hidden');
                  } else {
                    span.closest('.main-atc-compare-price') && span.closest('.main-atc-compare-price').classList.add('hidden');
                  }
                });
              }

              function init() {
                var qb = document.querySelector('#QBSection-' + sid + ' quantity-breaks');
                if (!qb) return;
                qb.querySelectorAll('input[name="quantity"]').forEach(function(input) {
                  input.addEventListener('change', updateAtcPrice);
                });
                // Run once on load to set initial state
                updateAtcPrice();
              }

              if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
              } else {
                init();
              }
            })();
          </script>

        {%- when 'guarantee' -%}
          {%- if block.settings.guarantee_text != blank -%}
            <p
              class="qb-section__guarantee"
              {{ block.shopify_attributes }}
              style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px; font-size: {{ block.settings.font_size }}px; text-align: {{ block.settings.alignment }};"
            >
              {{ block.settings.guarantee_text }}
            </p>
          {%- endif -%}

        {%- when 'blinkingdot' -%}
          <div {{ block.shopify_attributes }} style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;">
            {% render 'blinkingdot', block: block %}
          </div>

        {%- when 'text' -%}
          <div {{ block.shopify_attributes }} style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;">
            {% render 'text-with-icon-block', block: block, margins: true, block_attributes: true %}
          </div>

        {%- when 'estimated_shipping' -%}
          <div {{ block.shopify_attributes }} style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;">
            {% render 'ascendify-estimated-shipping', block: block %}
          </div>

        {%- when 'justtext' -%}
          <div {{ block.shopify_attributes }} style="margin-top: {{ block.settings.margin_top }}px; margin-bottom: {{ block.settings.margin_bottom }}px;">
            {% render 'text-block', block: block %}
          </div>

        {%- when 'heading' -%}
          <h2
            class="rich-text__heading rte {{ block.settings.heading_size }} title-with-highlight {{ block.settings.visibility }}"
            style="--hightlight-color: {{ block.settings.title_highlight_color }}; --gradient-text: {{ block.settings.title_gradient_background }}; text-align: {{ block.settings.alignment }}; margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem; margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
            {{ block.shopify_attributes }}
          >
            {{ block.settings.heading | replace: 'p>', 'span>' }}
          </h2>
          {%- style -%}
            .rich-text__heading.rte em {
              text-decoration: underline;
              font-style: normal;
              text-decoration-color: {{ block.settings.underlinetextcolor }};
              text-decoration-thickness: {{ block.settings.underlinethickness }}px;
            }
            {%- if block.settings.enable_gradient %}
            .rich-text__heading.rte strong {
              background: {{ block.settings.title_gradient_background }};
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              font-style: normal;
            }
            {%- endif %}
          {%- endstyle -%}

          {%- when 'payment_badges' -%}
          {%- liquid
            assign alignment = block.settings.alignment | default: 'center'
            assign icon_height = block.settings.icon_height | default: 22
            assign icon_spacing = block.settings.icon_spacing | default: 6
            assign margin_top = block.settings.margin_top | default: 8
            assign margin_bottom = block.settings.margin_bottom | default: 8
          -%}
          <div
            class="payment-badges-block {{ block.settings.visibility }}"
            {{ block.shopify_attributes }}
            style="margin-top: {{ margin_top }}px; margin-bottom: {{ margin_bottom }}px; text-align: {{ alignment }};"
          >
            <ul class="payment-badges" role="list" style="display: inline-flex; flex-wrap: wrap; justify-content: {{ alignment }}; align-items: center; gap: {{ icon_spacing }}px; margin: 0; padding: 0; list-style: none;">
              {%- assign enabled_payment_types = shop.enabled_payment_types -%}
              {%- if block.settings.enabled_payment_types != blank -%}
                {%- assign enabled_payment_types = block.settings.enabled_payment_types | remove: ' ' | split: ',' -%}
              {%- endif -%}
              {%- for type in enabled_payment_types -%}
                <li class="list-payment__item" style="height: {{ icon_height }}px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                  {{ type | strip | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
          <style>
            .payment-badges-block .payment-badges .list-payment__item svg { max-height: 100%; width: auto; display: block; }
            @media screen and (max-width: 749px) {
              .payment-badges-block .payment-badges { gap: {{ icon_spacing | divided_by: 2 }}px !important; }
              .payment-badges-block .payment-badges .list-payment__item { height: {{ icon_height | times: 0.8 }}px !important; }
            }
          </style>

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

    {%- comment -%} ── Guarantee text — rendered by guarantee block ── {%- endcomment -%}

  {%- else -%}
    {%- if request.design_mode -%}
      <div style="padding: 2rem; border: 2px dashed rgba(var(--color-foreground), 0.3); border-radius: 8px; text-align: center; color: rgb(var(--color-foreground)); opacity: 0.6;">
        <p style="margin: 0; font-size: 1.4rem;">Select a product in section settings to display quantity breaks.</p>
      </div>
    {%- endif -%}
  {%- endif -%}

  </div>
</div>

{% schema %}
{
  "name": "Quantity breaks",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "Use this section to display quantity breaks and an add to cart button anywhere on your page — independently from the main product section."
    },
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "The section ID can be placed inside any button link to scroll to this section.",
      "default": false
    },
    {
      "type": "header",
      "content": "Product"
    },
    {
      "type": "product",
      "id": "product",
      "label": "Product"
    },
    {
      "type": "header",
      "content": "Hero Image"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop image"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile image",
      "info": "If left blank the desktop image will be used on mobile."
    },
    {
      "type": "select",
      "id": "image_object_fit",
      "label": "Image fit",
      "options": [
        { "value": "cover", "label": "Cover" },
        { "value": "contain", "label": "Contain" },
        { "value": "fill", "label": "Fill" }
      ],
      "default": "cover"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Image corner radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "image_bottom_spacing",
      "label": "Space below image",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "qb_margin_top",
      "label": "Space above quantity breaks",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "content_max_width",
      "label": "Content max width",
      "min": 400,
      "max": 1400,
      "step": 20,
      "unit": "px",
      "default": 600
    },
    {
      "type": "header",
      "content": "Color & Style"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" }
      ],
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "Padding — Desktop"
    },
    {
      "type": "range",
      "id": "desktop_padding_top",
      "label": "Top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_padding_bottom",
      "label": "Bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Padding — Mobile"
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "label": "Top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "label": "Bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Margin — Desktop"
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "label": "Top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "label": "Bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Margin — Mobile"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "label": "Top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "label": "Bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "quantity_breaks",
      "name": "Quantity Breaks",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Style"
        },
        {
          "type": "select",
          "id": "style",
          "label": "Style",
          "options": [
            { "value": "normal", "label": "Normal" },
            { "value": "compact", "label": "Compact" },
            { "value": "vertical", "label": "Vertical" }
          ],
          "default": "normal"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "label": "Accent color",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "text",
          "id": "headline",
          "label": "Headline"
        },
        {
          "type": "select",
          "id": "headline_style",
          "label": "Headline alignment",
          "options": [
            { "value": "center", "label": "Centered with lines" },
            { "value": "left", "label": "Left" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "preselected",
          "label": "Pre-selected option",
          "options": [
            { "value": "option_1", "label": "Option 1" },
            { "value": "option_2", "label": "Option 2" },
            { "value": "option_3", "label": "Option 3" },
            { "value": "option_4", "label": "Option 4" }
          ],
          "default": "option_1"
        },
        {
          "type": "header",
          "content": "Option 1"
        },
        {
          "type": "range",
          "id": "option_1_quantity",
          "label": "Quantity",
          "min": 0,
          "max": 20,
          "step": 1,
          "default": 1
        },
        {
          "type": "text",
          "id": "option_1_label",
          "label": "Label",
          "default": "Buy [quantity]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_1_caption",
          "label": "Caption",
          "default": "You save [amount_saved]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_1_badge",
          "label": "Badge text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_1_badge_color",
          "label": "Badge color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "select",
          "id": "option_1_badge_style",
          "label": "Badge style",
          "options": [
            { "value": "1", "label": "Style 1" },
            { "value": "2", "label": "Style 2" },
            { "value": "3", "label": "Style 3" },
            { "value": "4", "label": "Style 4" },
            { "value": "5", "label": "Style 5" },
            { "value": "6", "label": "Style 6" }
          ],
          "default": "2"
        },
        {
          "type": "text",
          "id": "option_1_benefit",
          "label": "Benefit text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_1_benefit_position",
          "label": "Benefit position",
          "options": [
            { "value": "inline", "label": "Inline" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "inline"
        },
        {
          "type": "select",
          "id": "option_1_benefit_style",
          "label": "Benefit style",
          "options": [
            { "value": "plain", "label": "Plain" },
            { "value": "solid", "label": "Solid" },
            { "value": "outline", "label": "Outline" }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "option_1_benefit_color",
          "label": "Benefit color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "text",
          "id": "option_1_price_text",
          "label": "Price text",
          "default": "[price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_1_compare_price_text",
          "label": "Compare price text",
          "default": "[compare_price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_1_percentage_off_text",
          "label": "Option #1 Percentage off",
          "default": "0",
          "info": "A percentage that will be discounted from the quantity's total price"
        },
        {
          "type": "text",
          "id": "option_1_fixed_amount_off",
          "label": "Option #1 Fixed amount off",
          "default": "0",
          "info": "A fixed amount of money (WITHOUT the currency symbol/code) that will be subtracted from the quantity's total price"
        },
        {
          "type": "select",
          "id": "option_1_compare_price",
          "label": "Compare price source",
          "options": [
            { "value": "price", "label": "Regular price × qty" },
            { "value": "compare_price", "label": "Compare-at price × qty" }
          ],
          "default": "compare_price"
        },
        {
          "type": "image_picker",
          "id": "option_1_image",
          "label": "Option image"
        },
        {
          "type": "header",
          "content": "Option 2"
        },
        {
          "type": "range",
          "id": "option_2_quantity",
          "label": "Quantity",
          "min": 0,
          "max": 20,
          "step": 1,
          "default": 2
        },
        {
          "type": "text",
          "id": "option_2_label",
          "label": "Label",
          "default": "Buy [quantity]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_2_caption",
          "label": "Caption",
          "default": "You save [amount_saved]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_2_badge",
          "label": "Badge text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_2_badge_color",
          "label": "Badge color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "select",
          "id": "option_2_badge_style",
          "label": "Badge style",
          "options": [
            { "value": "1", "label": "Style 1" },
            { "value": "2", "label": "Style 2" },
            { "value": "3", "label": "Style 3" },
            { "value": "4", "label": "Style 4" },
            { "value": "5", "label": "Style 5" },
            { "value": "6", "label": "Style 6" }
          ],
          "default": "2"
        },
        {
          "type": "text",
          "id": "option_2_benefit",
          "label": "Benefit text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_2_benefit_position",
          "label": "Benefit position",
          "options": [
            { "value": "inline", "label": "Inline" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "inline"
        },
        {
          "type": "select",
          "id": "option_2_benefit_style",
          "label": "Benefit style",
          "options": [
            { "value": "plain", "label": "Plain" },
            { "value": "solid", "label": "Solid" },
            { "value": "outline", "label": "Outline" }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "option_2_benefit_color",
          "label": "Benefit color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "text",
          "id": "option_2_price_text",
          "label": "Price text",
          "default": "[price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_2_compare_price_text",
          "label": "Compare price text",
          "default": "[compare_price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_2_percentage_off_text",
          "label": "Option #2 Percentage off",
          "default": "0",
          "info": "A percentage that will be discounted from the quantity's total price"
        },
        {
          "type": "text",
          "id": "option_2_fixed_amount_off",
          "label": "Option #2 Fixed amount off",
          "default": "0",
          "info": "A fixed amount of money (WITHOUT the currency symbol/code) that will be subtracted from the quantity's total price"
        },
        {
          "type": "select",
          "id": "option_2_compare_price",
          "label": "Compare price source",
          "options": [
            { "value": "price", "label": "Regular price × qty" },
            { "value": "compare_price", "label": "Compare-at price × qty" }
          ],
          "default": "compare_price"
        },
        {
          "type": "image_picker",
          "id": "option_2_image",
          "label": "Option image"
        },
        {
          "type": "header",
          "content": "Option 3"
        },
        {
          "type": "range",
          "id": "option_3_quantity",
          "label": "Quantity",
          "min": 0,
          "max": 20,
          "step": 1,
          "default": 3
        },
        {
          "type": "text",
          "id": "option_3_label",
          "label": "Label",
          "default": "Buy [quantity]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_3_caption",
          "label": "Caption",
          "default": "You save [amount_saved]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_3_badge",
          "label": "Badge text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_3_badge_color",
          "label": "Badge color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "select",
          "id": "option_3_badge_style",
          "label": "Badge style",
          "options": [
            { "value": "1", "label": "Style 1" },
            { "value": "2", "label": "Style 2" },
            { "value": "3", "label": "Style 3" },
            { "value": "4", "label": "Style 4" },
            { "value": "5", "label": "Style 5" },
            { "value": "6", "label": "Style 6" }
          ],
          "default": "2"
        },
        {
          "type": "text",
          "id": "option_3_benefit",
          "label": "Benefit text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_3_benefit_position",
          "label": "Benefit position",
          "options": [
            { "value": "inline", "label": "Inline" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "inline"
        },
        {
          "type": "select",
          "id": "option_3_benefit_style",
          "label": "Benefit style",
          "options": [
            { "value": "plain", "label": "Plain" },
            { "value": "solid", "label": "Solid" },
            { "value": "outline", "label": "Outline" }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "option_3_benefit_color",
          "label": "Benefit color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "text",
          "id": "option_3_price_text",
          "label": "Price text",
          "default": "[price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_3_compare_price_text",
          "label": "Compare price text",
          "default": "[compare_price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_3_percentage_off_text",
          "label": "Option #3 Percentage off",
          "default": "0",
          "info": "A percentage that will be discounted from the quantity's total price"
        },
        {
          "type": "text",
          "id": "option_3_fixed_amount_off",
          "label": "Option #3 Fixed amount off",
          "default": "0",
          "info": "A fixed amount of money (WITHOUT the currency symbol/code) that will be subtracted from the quantity's total price"
        },
        {
          "type": "select",
          "id": "option_3_compare_price",
          "label": "Compare price source",
          "options": [
            { "value": "price", "label": "Regular price × qty" },
            { "value": "compare_price", "label": "Compare-at price × qty" }
          ],
          "default": "compare_price"
        },
        {
          "type": "image_picker",
          "id": "option_3_image",
          "label": "Option image"
        },
        {
          "type": "header",
          "content": "Option 4"
        },
        {
          "type": "range",
          "id": "option_4_quantity",
          "label": "Quantity (set to 0 to hide)",
          "min": 0,
          "max": 20,
          "step": 1,
          "default": 0
        },
        {
          "type": "text",
          "id": "option_4_label",
          "label": "Label",
          "default": "Buy [quantity]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_4_caption",
          "label": "Caption",
          "default": "You save [amount_saved]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_4_badge",
          "label": "Badge text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_4_badge_color",
          "label": "Badge color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "select",
          "id": "option_4_badge_style",
          "label": "Badge style",
          "options": [
            { "value": "1", "label": "Style 1" },
            { "value": "2", "label": "Style 2" },
            { "value": "3", "label": "Style 3" },
            { "value": "4", "label": "Style 4" },
            { "value": "5", "label": "Style 5" },
            { "value": "6", "label": "Style 6" }
          ],
          "default": "2"
        },
        {
          "type": "text",
          "id": "option_4_benefit",
          "label": "Benefit text",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "select",
          "id": "option_4_benefit_position",
          "label": "Benefit position",
          "options": [
            { "value": "inline", "label": "Inline" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "inline"
        },
        {
          "type": "select",
          "id": "option_4_benefit_style",
          "label": "Benefit style",
          "options": [
            { "value": "plain", "label": "Plain" },
            { "value": "solid", "label": "Solid" },
            { "value": "outline", "label": "Outline" }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "option_4_benefit_color",
          "label": "Benefit color scheme",
          "options": [
            { "value": "accent-1", "label": "Accent 1" },
            { "value": "accent-2", "label": "Accent 2" },
            { "value": "background-1", "label": "Background 1" },
            { "value": "background-2", "label": "Background 2" },
            { "value": "inverse", "label": "Inverse" }
          ],
          "default": "accent-1"
        },
        {
          "type": "text",
          "id": "option_4_price_text",
          "label": "Price text",
          "default": "[price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_4_compare_price_text",
          "label": "Compare price text",
          "default": "[compare_price]",
          "info": "Dynamic values: [price], [compare_price], [price_each], [compare_price_each], [amount_saved], [amount_saved_rounded], [quantity]"
        },
        {
          "type": "text",
          "id": "option_4_percentage_off_text",
          "label": "Option #4 Percentage off",
          "default": "0",
          "info": "A percentage that will be discounted from the quantity's total price"
        },
        {
          "type": "text",
          "id": "option_4_fixed_amount_off",
          "label": "Option #4 Fixed amount off",
          "default": "0",
          "info": "A fixed amount of money (WITHOUT the currency symbol/code) that will be subtracted from the quantity's total price"
        },
        {
          "type": "select",
          "id": "option_4_compare_price",
          "label": "Compare price source",
          "options": [
            { "value": "price", "label": "Regular price × qty" },
            { "value": "compare_price", "label": "Compare-at price × qty" }
          ],
          "default": "compare_price"
        },
        {
          "type": "image_picker",
          "id": "option_4_image",
          "label": "Option image"
        },
        {
          "type": "header",
          "content": "Variant Selectors"
        },
        {
          "type": "checkbox",
          "id": "enable_variant_selectors",
          "label": "Enable variant selectors",
          "default": true,
          "info": "Shows a variant picker inside each quantity option when the product has multiple variants."
        },
        {
          "type": "checkbox",
          "id": "enable_variant_selectors_on_quantity_of_1",
          "label": "Show variant selector on single-quantity option",
          "default": true
        },
        {
          "type": "header",
          "content": "Appearance"
        },
        {
          "type": "range",
          "id": "border_radius",
          "label": "Border radius",
          "min": 0,
          "max": 40,
          "step": 2,
          "unit": "px",
          "default": 8,
          "info": "Applied as tenths of a rem (e.g. 8 → 0.8rem)"
        },
        {
          "type": "range",
          "id": "border_width",
          "label": "Border width",
          "min": 1,
          "max": 10,
          "step": 1,
          "unit": "px",
          "default": 2,
          "info": "Applied as tenths of a rem"
        },
        {
          "type": "range",
          "id": "image_width",
          "label": "Option image width",
          "min": 20,
          "max": 100,
          "step": 5,
          "unit": "%",
          "default": 100
        },
        {
          "type": "checkbox",
          "id": "display_selected_indicator",
          "label": "Show selected indicator dot",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "space_images",
          "label": "Add spacing around images",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "full_width_pickers",
          "label": "Full-width variant pickers",
          "default": false
        },
        {
          "type": "select",
          "id": "vertical_images_position",
          "label": "Image position",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "right", "label": "Right" }
          ],
          "default": "left"
        },
        {
          "type": "select",
          "id": "vertical_prices_layout",
          "label": "Price layout",
          "options": [
            { "value": "vertical", "label": "Vertical (stacked)" },
            { "value": "horizontal", "label": "Horizontal" }
          ],
          "default": "vertical"
        },
        {
          "type": "header",
          "content": "Pricing"
        },
        {
          "type": "checkbox",
          "id": "update_prices",
          "label": "Update prices dynamically",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "skip_unavailable",
          "label": "Skip unavailable variants",
          "default": false
        },
        {
          "type": "header",
          "content": "Spacing"
        },
        {
          "type": "range",
          "id": "margin_top",
          "label": "Margin top",
          "min": 0,
          "max": 80,
          "step": 4,
          "unit": "px",
          "default": 0
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "label": "Margin bottom",
          "min": 0,
          "max": 80,
          "step": 4,
          "unit": "px",
          "default": 0
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "Buy Buttons",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Button"
        },
        {
          "type": "text",
          "id": "atc_custom_label",
          "label": "Button label",
          "default": "Add to Cart"
        },
        {
          "type": "range",
          "id": "atc_margin_top",
          "label": "Space above button",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "default": 16
        },
        {
          "type": "range",
          "id": "atc_font_size",
          "label": "Font size",
          "min": 12,
          "max": 32,
          "step": 1,
          "unit": "px",
          "default": 16
        },
        {
          "type": "range",
          "id": "atcbuttonpadding",
          "label": "Button top / bottom padding",
          "min": 0,
          "max": 20,
          "step": 2,
          "unit": "px",
          "default": 20
        },
        {
          "type": "header",
          "content": "Button Icon"
        },
        {
          "type": "select",
          "id": "atc_icon",
          "label": "Icon",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "shopping_cart", "label": "Cart" },
            { "value": "shopping_bag", "label": "Bag" },
            { "value": "arrow_next_to_text", "label": "Arrow" }
          ],
          "default": "none"
        },
        {
          "type": "header",
          "content": "Price in Button"
        },
        {
          "type": "checkbox",
          "id": "display_price",
          "label": "Show price in button",
          "default": false
        },
        {
          "type": "select",
          "id": "price_position",
          "label": "Price position",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "right", "label": "Right" }
          ],
          "default": "right"
        },
        {
          "type": "text",
          "id": "price_separator",
          "label": "Price separator",
          "default": "—"
        },
        {
          "type": "select",
          "id": "compare_price_position",
          "label": "Compare price position",
          "options": [
            { "value": "before", "label": "Before price" },
            { "value": "after", "label": "After price" }
          ],
          "default": "before"
        },
        {
          "type": "checkbox",
          "id": "enable_opposite_layout",
          "label": "Opposite layout (label left, price right)",
          "default": false
        },
        {
          "type": "header",
          "content": "Button Color"
        },
        {
          "type": "checkbox",
          "id": "enable_custom_color",
          "label": "Enable custom button color",
          "default": false
        },
        {
          "type": "color",
          "id": "custom_color",
          "label": "Button custom color",
          "default": "#dd1d1d",
          "info": "Applied when Enable custom button color is checked."
        },
        {
          "type": "checkbox",
          "id": "enable_gradient",
          "label": "Enable button gradient",
          "default": false
        },
        {
          "type": "color_background",
          "id": "button_gradient",
          "label": "Button gradient color",
          "default": "linear-gradient(0deg, rgba(44, 35, 74, 1) 11%, rgba(140, 114, 159, 1) 79%)",
          "info": "Applied when Enable button gradient is checked. Overrides custom color."
        },
        {
          "type": "header",
          "content": "Text within ATC button"
        },
        {
          "type": "checkbox",
          "id": "atc_text",
          "label": "Enable text below ATC label",
          "default": false
        },
        {
          "type": "text",
          "id": "atc_text_label",
          "label": "Text below ATC label",
          "default": "30-Day Money Back Guarantee"
        },
        {
          "type": "range",
          "id": "atc_text_labelsize",
          "min": 11,
          "max": 15,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 13
        },
        {
          "type": "select",
          "id": "atc_text_labeltransform",
          "label": "Text style (Regular or uppercase)",
          "options": [
            { "value": "uppercase", "label": "Uppercase" },
            { "value": "none", "label": "Regular" }
          ],
          "default": "none"
        },
        {
          "type": "checkbox",
          "id": "atc_text_icon_enable",
          "label": "Show icon before ATC label text",
          "default": false
        },
        {
          "type": "text",
          "id": "atc_text_icon_name",
          "label": "Material icon name",
          "info": "e.g. verified_user, shield, check_circle. Browse at fonts.google.com/icons",
          "default": "verified_user"
        },
        {
          "type": "image_picker",
          "id": "atc_text_icon_image",
          "label": "Custom icon image"
        },
        {
          "type": "range",
          "id": "atc_text_icon_size",
          "label": "Icon size",
          "min": 20,
          "max": 25,
          "step": 1,
          "unit": "px",
          "default": 20
        },
        {
          "type": "header",
          "content": "Shine Animation"
        },
        {
          "type": "checkbox",
          "id": "enable_shine_animation",
          "label": "Enable shine",
          "default": false
        },
        {
          "type": "range",
          "id": "shine_opacity",
          "label": "Shine opacity",
          "min": 0,
          "max": 100,
          "step": 5,
          "unit": "%",
          "default": 40,
          "info": "Stored as 0–100; divided by 100 at render time."
        },
        {
          "type": "range",
          "id": "shine_duration",
          "label": "Shine duration (tenths of a second)",
          "min": 1,
          "max": 20,
          "step": 1,
          "default": 6,
          "info": "Stored as tenths; 6 = 0.6 s, 10 = 1 s."
        }
      ]
    },
{
   "type":"blinkingdot",
   "name":"Blinking dot",
   "settings":[
      {
         "type":"select",
         "id":"visibility",
         "options":[
            {
               "value":"desktop-hidden",
               "label":"Mobile only"
            },
            {
               "value":"mobile-hidden",
               "label":"Desktop only"
            },
            {
               "value":"always-display",
               "label":"All devices"
            }
         ],
         "label":"Display on",
         "default":"always-display"
      },
      {
         "type":"color",
         "id":"dot_color",
         "label":"Blinking Dot Color",
         "default":"#4fbb4e"
      },
      {
         "type":"richtext",
         "id":"dot_text",
         "label":"Text",
         "default":"<p>Order will arrive by <strong>[end_date]</strong></p>",
         "info": "Use [end_date] to display the estimated delivery date"
      },
      {
         "type": "number",
         "id": "max_shipping_days",
         "label": "Shipping time delivery",
         "default": 7
      },
      {
         "type": "header",
         "content": "Date Badge Style"
      },
      {
         "type": "checkbox",
         "id": "enable_date_badge",
         "label": "Enable date badge",
         "default": false
      },
      {
         "type": "color",
         "id": "date_badge_bg",
         "label": "Badge background color",
         "default": "#418E6E",
         "visible_if": "{{ block.settings.enable_date_badge }}"
      },
      {
         "type": "color",
         "id": "date_badge_text_color",
         "label": "Badge text color",
         "default": "#FFFFFF",
         "visible_if": "{{ block.settings.enable_date_badge }}"
      },
      {
         "type": "range",
         "id": "date_badge_radius",
         "label": "Badge border radius",
         "min": 0,
         "max": 30,
         "step": 1,
         "unit": "px",
         "default": 6,
         "visible_if": "{{ block.settings.enable_date_badge }}"
      },
      {
        "type": "header",
        "content": "Text Underline"
      },
      {
        "type": "checkbox",
        "id": "enable_underline",
        "label": "Enable custom text underline",
        "default": false
      },
      {
        "type": "text",
        "id": "underline_text",
        "label": "Text to underline",
        "info": "Enter the exact text phrase to underline. Case-sensitive.",
        "visible_if": "{{ block.settings.enable_underline == true }}"
      },
      {
        "type": "color",
        "id": "underline_color",
        "label": "Underline color",
        "default": "#000000",
        "visible_if": "{{ block.settings.enable_underline == true }}"
      },
      {
          "type": "header",
          "content": "Skip Days Settings"
        },
        {
          "type": "text",
          "id": "skip_weekdays",
          "label": "Skip weekdays",
          "info": "Enter day names to skip (comma-separated). Example: 'Saturday, Sunday' to skip weekends. Accepts full names (Monday) or abbreviations (Mon)."
        },
        {
          "type": "textarea",
          "id": "skip_specific_dates",
          "label": "Skip specific dates",
          "info": "Enter specific dates to skip (comma-separated, YYYY-MM-DD format). Example: '2025-12-25, 2025-01-01' for Christmas and New Year's Day."
        },
      {
         "type": "select",
         "id": "date_format",
         "label": "Date format",
         "options": [
            {
               "value": "mm_dd",
               "label": "February 1st"
            },
            {
               "value": "month_day",
               "label": "February 1"
            },
            {
              "value": "day_mm_dd",
              "label": "Monday, February 1st"
            }
         ],
         "default": "mm_dd"
      },
      {
         "type": "text",
         "id": "months_labels",
         "label": "Month labels",
         "default": "Jan, Feb, March, April, May, June, July, August, Sept, Oct, Nov, Dec"
      },
      {
          "type": "text",
          "id": "days_labels",
          "label": "Day labels",
          "default": "Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday"
      },
      {
         "type":"color",
         "id":"dot_textcolor",
         "label":"Text Color",
         "default":"#000000"
      },
      {
         "type":"range",
         "id":"dot_textsize",
         "min":12,
         "max":15,
         "step":1,
         "label":"Font size",
         "default":13
      },
      {
         "type":"select",
         "id":"blinktext_align",
         "label":"Text Position",
         "options":[
            {
               "value":"contents",
               "label":"Left"
            },
            {
               "value":"inline-flex",
               "label":"Center"
            }
         ],
         "default":"inline-flex"
      },
      {
        "type": "checkbox",
        "id": "dot_textbackground",
        "label": "Enable background",
        "default": false
      },
      {
  "type": "select",
  "id": "border_style",
  "label": "Border Style",
  "options": [
    {
      "value": "solid",
      "label": "Solid"
    },
    {
      "value": "dotted",
      "label": "Dotted"
    }
  ],
  "default": "dotted"
},
      {
        "type": "color",
        "id": "dot_textcolorbackground",
        "label": "Background Color",
        "default": "#FFF4F3"
      },
      {
        "type": "color",
        "id": "dot_textcolorbackgroundborder",
        "label": "Border Color",
        "default": "#F86C84"
      },
      {
        "type": "range",
        "id": "dot_textcolorbackgroundradius",
        "label": "Border Radius",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "px",
        "default": 12
      },
      {
        "type": "range",
        "id": "dot_textcborderthickness",
        "label": "Border thickness",
        "min": 1,
        "max": 3,
        "step": 1,
        "unit": "px",
        "default": 2
      },
      {
        "type": "checkbox",
        "id": "enable_custom_padding",
        "label": "Enable Custom Padding",
        "default": false,
        "info": "Enable to customize horizontal and vertical padding"
      },
      {
        "type": "range",
        "id": "horizontal_padding",
        "label": "Horizontal Padding (Left/Right)",
        "min": 0,
        "max": 80,
        "step": 2,
        "unit": "px",
        "default": 20,
        "info": "Control left and right padding. Lower values make it more compact."
      },
      {
        "type": "range",
        "id": "vertical_padding",
        "label": "Vertical Padding (Top/Bottom)",
        "min": 0,
        "max": 20,
        "step": 1,
        "unit": "px",
        "default": 8,
        "info": "Control top and bottom padding."
      },
      {
      "type": "header",
      "content": "Variant Visibility Settings"
      },
      {
      "type": "text",
      "id": "variant_option_names",
      "label": "Option Names (comma separated)",
      "info": "Enter variant option names like: Color, Size, Material",
      "placeholder": "Color, Size"
      },
      {
      "type": "text", 
      "id": "variant_option_values",
      "label": "Option Values (comma separated)",
      "info": "Enter variant option values like: Black, Large, Premium",
      "placeholder": "Black, Large"
      },
      {
         "type":"header",
         "content":"Block margin"
      },
      {
         "type":"range",
         "id":"margin_top",
         "min":0,
         "max":45,
         "step":3,
         "unit":"px",
         "label":"Top margin",
         "default":24
      },
      {
         "type":"range",
         "id":"margin_bottom",
         "min":0,
         "max":45,
         "step":3,
         "unit":"px",
         "label":"Bottom margin",
         "default":24
      }
   ]
},
    {
      "type": "text",
      "name": "Text with icon",
      "settings": [
        {
      "type": "select",
      "id": "visibility",
      "options": [
          {
            "value": "desktop-hidden",
            "label": "Mobile only"
          },
          {
            "value": "mobile-hidden",
            "label": "Desktop only"
          },
          {
            "value": "always-display",
            "label": "All devices"
          }
          ],
          "label": "Display on",
          "default": "always-display"
        },
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "range",
          "id": "mobile_text_size",
          "min": 8,
          "max": 24,
          "step": 1,
          "unit": "px",
          "default": 14,
          "label": "Mobile text size"
        },
        {
          "type": "range",
          "id": "desktop_text_size",
          "min": 10,
          "max": 30,
          "step": 1,
          "unit": "px",
          "default": 16,
          "label": "Desktop text size"
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        },
        {
          "type": "color",
          "id": "text_color",
          "default": "#121212",
          "label": "Text color"
        },
        {
          "type": "inline_richtext",
          "id": "text_1",
          "default": "Text with icon",
          "label": "Text #1"
        },
        {
          "type": "inline_richtext",
          "id": "text_2",
          "label": "Text #2"
        },
        {
          "type": "inline_richtext",
          "id": "text_3",
          "label": "Text #3"
        },
        {
          "type": "inline_richtext",
          "id": "text_4",
          "label": "Text #4"
        },
        {
          "type": "checkbox",
          "id": "enable_separator",
          "default": false,
          "label": "Show separator between items",
          "info": "Adds a \"|\" divider between items and tightens the spacing between them. Only applies when multiple texts are added."
        },
        {
          "type": "header",
          "content": "Icons"
        },
        {
          "type": "range",
          "id": "icon_scale",
          "min": 100,
          "max": 200,
          "step": 5,
          "default": 120,
          "unit": "%",
          "label": "Icon scale",
          "info": "Relative to text size"
        },
        {
          "type": "color",
          "id": "icon_color",
          "default": "#121212",
          "label": "Icons color"
        },
        {
          "type": "text",
          "id": "icon_1",
          "default": "check_circle",
          "label": "Icon #1",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon_1",
          "default": false,
          "label": "Filled icon #1"
        },
        {
          "type": "image_picker",
          "id": "custom_icon_1",
          "label": "Custom icon #1"
        },
        {
          "type": "text",
          "id": "icon_2",
          "default": "check_circle",
          "label": "Icon #2",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon_2",
          "default": false,
          "label": "Filled icon #2"
        },
        {
          "type": "image_picker",
          "id": "custom_icon_2",
          "label": "Custom icon #2"
        },
        {
          "type": "text",
          "id": "icon_3",
          "default": "check_circle",
          "label": "Icon #3",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon_3",
          "default": false,
          "label": "Filled icon #3"
        },
        {
          "type": "image_picker",
          "id": "custom_icon_3",
          "label": "Custom icon #3"
        },
        {
          "type": "text",
          "id": "icon_4",
          "default": "check_circle",
          "label": "Icon #4",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon_4",
          "default": false,
          "label": "Filled icon #4"
        },
        {
          "type": "image_picker",
          "id": "custom_icon_4",
          "label": "Custom icon #4"
        },
        {
          "type": "header",
          "content": "Container"
        },
        {
          "type": "select",
          "id": "width",
          "options": [
            {
              "value": "fit-content",
              "label": "Fit text"
            },
            {
              "value": "100%",
              "label": "Full"
            }
          ],
          "default": "100%",
          "label": "Width"
        },
        {
          "type": "select",
          "id": "direction",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal"
            },
            {
              "value": "vertical",
              "label": "Vertical"
            }
          ],
          "default": "horizontal",
          "label": "Stacking direction",
          "info": "Applied when multiple texts are added."
        },
        {
         "type": "select",
         "id": "grid_layout",
         "label": "Layout for 4 items",
         "options": [
         {
            "value": "row",
            "label": "Single row"
         },
         {
            "value": "2x2",
            "label": "2x2 grid"
         }
         ],
         "default": "row",
         "info": "Choose how to display 4 items: in a single row or as a 2x2 grid"
        },
        {
          "type": "range",
          "id": "column_gap",
          "min": 0,
          "max": 6,
          "step": 0.5,
          "label": "Stacking spacing",
          "default": 3
        },
        {
          "type": "checkbox",
          "id": "enable_bg",
          "default": false,
          "label": "Enable background",
          "info": "The following settings are applied when this option is enabled."
        },
        {
          "type": "select",
          "id": "styling_container",
          "options": [
            {
              "value": "container",
              "label": "Whole block container"
            },
            {
              "value": "text",
              "label": "Each text item"
            }
          ],
          "default": "container",
          "label": "Apply background & border to:"
        },
        {
          "type": "color",
          "id": "bg_color",
          "label": "Background color",
          "default": "#F3F3F3"
        },
        {
         "type": "checkbox",
          "id": "enable_gradient_bg",
          "label": "Enable gradient background",
          "info": "Recomended to have normal background enabled to add some padding.",
          "default": false
        },
        {
          "type": "color_background",
          "id": "gradient_bg",
          "label": "Gradient background",
          "default": "linear-gradient(270deg, #ff9c9f 0%, #efc885 100%)"
        },
        {
          "type": "header",
          "content": "Per-item background colors",
          "info": "Override the background color per pill. Only applies when 'Apply background & border to' is set to 'Each text item'.",
          "visible_if": "{{ block.settings.styling_container == 'text' }}"
        },
        {
          "type": "select",
          "id": "bg_type_1",
          "label": "Item #1 background type",
          "options": [
            { "value": "global", "label": "Use global color" },
            { "value": "solid", "label": "Solid color" },
            { "value": "gradient", "label": "Gradient" }
          ],
          "default": "global",
          "visible_if": "{{ block.settings.styling_container == 'text' }}"
        },
        {
          "type": "color",
          "id": "bg_color_1",
          "label": "Item #1 solid color",
          "default": "#F3F3F3",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_1 == 'solid' }}"
        },
        {
          "type": "color_background",
          "id": "gradient_bg_1",
          "label": "Item #1 gradient",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_1 == 'gradient' }}"
        },
        {
          "type": "select",
          "id": "bg_type_2",
          "label": "Item #2 background type",
          "options": [
            { "value": "global", "label": "Use global color" },
            { "value": "solid", "label": "Solid color" },
            { "value": "gradient", "label": "Gradient" }
          ],
          "default": "global",
          "visible_if": "{{ block.settings.styling_container == 'text' }}"
        },
        {
          "type": "color",
          "id": "bg_color_2",
          "label": "Item #2 solid color",
          "default": "#F3F3F3",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_2 == 'solid' }}"
        },
        {
          "type": "color_background",
          "id": "gradient_bg_2",
          "label": "Item #2 gradient",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_2 == 'gradient' }}"
        },
        {
          "type": "select",
          "id": "bg_type_3",
          "label": "Item #3 background type",
          "options": [
            { "value": "global", "label": "Use global color" },
            { "value": "solid", "label": "Solid color" },
            { "value": "gradient", "label": "Gradient" }
          ],
          "default": "global",
          "visible_if": "{{ block.settings.styling_container == 'text' }}"
        },
        {
          "type": "color",
          "id": "bg_color_3",
          "label": "Item #3 solid color",
          "default": "#F3F3F3",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_3 == 'solid' }}"
        },
        {
          "type": "color_background",
          "id": "gradient_bg_3",
          "label": "Item #3 gradient",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_3 == 'gradient' }}"
        },
        {
          "type": "select",
          "id": "bg_type_4",
          "label": "Item #4 background type",
          "options": [
            { "value": "global", "label": "Use global color" },
            { "value": "solid", "label": "Solid color" },
            { "value": "gradient", "label": "Gradient" }
          ],
          "default": "global",
          "visible_if": "{{ block.settings.styling_container == 'text' }}"
        },
        {
          "type": "color",
          "id": "bg_color_4",
          "label": "Item #4 solid color",
          "default": "#F3F3F3",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_4 == 'solid' }}"
        },
        {
          "type": "color_background",
          "id": "gradient_bg_4",
          "label": "Item #4 gradient",
          "visible_if": "{{ block.settings.styling_container == 'text' and block.settings.bg_type_4 == 'gradient' }}"
        },
        {
          "type": "checkbox",
          "id": "boxshadow",
          "default": false,
          "label": "Enable background shadow",
          "info": "Background shadow shows only if Background color is enabled and background & border set to Each text item."
      },
        {
          "type": "range",
          "id": "corner_radius",
          "min": 0,
          "max": 100,
          "step": 5,
          "unit": "%",
          "label": "t:settings_schema.global.settings.corner_radius.label",
          "default": 40,
          "info": "Relative to font size"
        },
        {
          "type": "range",
          "id": "padding",
          "min": 1,
          "max": 5,
          "step": 0.5,
          "label": "Padding",
          "default": 3
        },
        {
          "type": "range",
          "id": "border_size",
          "min": 0,
          "max": 5,
          "step": 1,
          "label": "Border thickness",
          "unit": "px",
          "default": 0
        },
        {
          "type": "color",
          "id": "border_color",
          "label": "Border color",
          "default": "#B7B7B7"
        },
        {
          "type": "checkbox",
          "id": "dashedborder",
          "default": false,
          "label": "Enable dashed border",
          "info": "Border thickness must at least be 1px to show"
        },
        {
          "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": "estimated_shipping",
      "name": "Estimated shipping",
      "limit": 1,
      "settings": [
        {
         "type":"select",
         "id":"visibility",
         "options":[
            {
               "value":"desktop-hidden",
               "label":"Mobile only"
            },
            {
               "value":"mobile-hidden",
               "label":"Desktop only"
            },
            {
               "value":"always-display",
               "label":"All devices"
            }
         ],
         "label":"Display on",
         "default":"always-display"
      },
        {
          "type": "text",
          "id": "icon",
          "default": "local_shipping",
          "label": "Icon",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon",
          "default": false,
          "label": "Filled icon"
        },
        {
          "type": "image_picker",
          "id": "custom_icon",
          "label": "Custom icon"
        },
        {
          "type": "select",
          "id": "icon_size",
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "medium",
          "label": "Icon size"
        },
        {
          "type": "select",
          "id": "icon_alignment",
          "options": [
            {
              "value": "top",
              "label": "Top"
            },
            {
              "value": "middle",
              "label": "Middle"
            }
          ],
          "default": "top",
          "label": "Icon alignment"
        },
        {
          "type": "richtext",
          "id": "message",
          "label": "Text",
          "default": "<p>Get it between <strong>[start_date]</strong> and <strong>[end_date]</strong>.</p>",
          "info": "Use [start_date] to display the earliest date the package can arrive and [end_date] to display the latest date the package can arrive."
        },
        {
          "type": "number",
          "id": "min_shipping_days",
          "label": "Minimum shipping days",
          "default": 7
        },
        {
          "type": "number",
          "id": "max_shipping_days",
          "label": "Maximum shipping days",
          "default": 15
        },
         {
          "type": "header",
          "content": "Skip Days Settings"
        },
        {
          "type": "text",
          "id": "skip_weekdays",
          "label": "Skip weekdays",
          "info": "Enter day names to skip (comma-separated). Example: 'Saturday, Sunday' to skip weekends. Accepts full names (Monday) or abbreviations (Mon)."
        },
        {
          "type": "textarea",
          "id": "skip_specific_dates",
          "label": "Skip specific dates",
          "info": "Enter specific dates to skip (comma-separated, YYYY-MM-DD format). Example: '2025-12-25, 2025-01-01' for Christmas and New Year's Day."
        },
        {
          "type": "select",
          "id": "date_format",
          "label": "Date format",
          "options": [
            {
              "value": "day_mm_dd",
              "label": "Monday, February 1st"
            },
            {
              "value": "day_dd_mm",
              "label": "Monday, 1. February"
            },
            {
              "value": "mm_dd",
              "label": "February 1st"
            },
            {
            "value": "month_day",
            "label": "February 1"
            },
            {
              "value": "dd_mm",
              "label": "1. February"
            },
            {
              "value": "dd_mm_no_dot",
              "label": "1 February"
            },
            {
              "value": "day_dd_mm_numeric",
              "label": "Monday, 01. 02."
            },
            {
              "value": "dd_mm_numeric",
              "label": "01. 02."
            }
          ],
          "default": "mm_dd"
        },
        {
          "type": "text",
          "id": "days_labels",
          "label": "Day labels",
          "default": "Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday"
        },
        {
          "type": "text",
          "id": "months_labels",
          "label": "Month labels",
          "default": "January, February, March, April, May, June, July, August, September, October, November, December"
        },
        {
      "type": "header",
      "content": "Timer Settings"
    },
    {
      "type": "checkbox",
      "id": "show_timer",
      "label": "Show countdown timer",
      "default": false,
      "info": "Display countdown timer below the date. If enabled, it's recommended to only show [end_date] above. Example: Want it by [end_date]?"
    },
    {
      "type": "text",
      "id": "cutoff_time",
      "label": "Daily cutoff time (24-hour format)",
      "default": "14:00",
      "placeholder": "14:00",
      "info": "Enter time in 24-hour format (HH:MM). Time is based on the current date (Today)."
    },
    {
      "type": "select",
      "id": "timezone",
      "label": "Timezone",
      "default": "America/New_York",
      "options": [
        {
          "value": "America/New_York",
          "label": "Eastern Time (ET) - New York"
        },
        {
          "value": "America/Chicago",
          "label": "Central Time (CT) - Chicago"
        },
        {
          "value": "America/Denver",
          "label": "Mountain Time (MT) - Denver"
        },
        {
          "value": "America/Los_Angeles",
          "label": "Pacific Time (PT) - Los Angeles"
        },
        {
          "value": "America/Anchorage",
          "label": "Alaska Time - Anchorage"
        },
        {
          "value": "Pacific/Honolulu",
          "label": "Hawaii Time - Honolulu"
        },
        {
          "value": "Europe/London",
          "label": "GMT - London"
        },
        {
          "value": "Europe/Paris",
          "label": "CET - Paris"
        },
        {
          "value": "Asia/Tokyo",
          "label": "JST - Tokyo"
        },
        {
          "value": "Australia/Sydney",
          "label": "AEST - Sydney"
        }
        ]
        },
        {
          "type": "header",
          "content": "Timer Text Customization"
        },
        {
          "type": "text",
          "id": "timer_prefix",
          "label": "Timer prefix text",
          "default": "ORDER WITHIN",
          "info": "Text displayed before the countdown timer"
        },
        {
          "type": "text",
          "id": "hours_text",
          "label": "Hours text",
          "default": "HOURS",
          "info": "Text displayed after hours value"
        },
        {
          "type": "text",
          "id": "minutes_text",
          "label": "Minutes text",
          "default": "MINUTES",
          "info": "Text displayed after minutes value"
        },
        {
          "type": "color",
          "id": "timer_text_color",
          "label": "Timer text color",
          "default": "#000000",
          "info": "Color for 'ORDER WITHIN' text"
        },
        {
          "type": "color",
          "id": "timer_value_color",
          "label": "Timer value color",
          "default": "#000000",
          "info": "Color for hours and minutes values"
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "checkbox",
          "id": "enable_custom_colors",
          "label": "Enable custom colors",
          "default": false
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background color",
          "default": "#e8f5e9",
          "info": "Background color for the shipping section",
          "visible_if": "{{ block.settings.enable_custom_colors }}"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text color",
          "default": "#000000",
          "info": "Text color for the shipping section",
          "visible_if": "{{ block.settings.enable_custom_colors }}"
        },
        {
          "type": "range",
          "id": "vertical_padding",
          "min": 2,
          "max": 10,
          "step": 1,
          "unit": "px",
          "label": "Vertical padding",
          "default": 5,
          "info": "Top and bottom padding",
          "visible_if": "{{ block.settings.enable_custom_colors }}"
        },
        {
          "type": "range",
          "id": "border_radius",
          "min": 0,
          "max": 15,
          "step": 1,
          "unit": "px",
          "label": "Border radius",
          "default": 0,
          "info": "Corner roundness",
          "visible_if": "{{ block.settings.enable_custom_colors }}"
        },
        {
          "type": "header",
          "content": "Block margin"
        },
        {
          "type": "range",
          "id": "margin_top",
          "min": 0,
          "max": 45,
          "step": 3,
          "unit": "px",
          "label": "Top margin",
          "default": 24
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "min": 0,
          "max": 45,
          "step": 3,
          "unit": "px",
          "label": "Bottom margin",
          "default": 24
        }
      ]
    },
    {
      "type": "guarantee",
      "name": "Guarantee Text",
      "limit": 1,
      "settings": [
        {
          "type": "textarea",
          "id": "guarantee_text",
          "label": "Guarantee text",
          "default": "30-day money-back guarantee. Not satisfied? Contact support within 30 days of purchase for a full refund."
        },
        {
          "type": "range",
          "id": "font_size",
          "label": "Font size",
          "min": 10,
          "max": 20,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "range",
          "id": "margin_top",
          "label": "Margin top",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "default": 12
        },
        {
          "type": "range",
          "id": "margin_bottom",
          "label": "Margin bottom",
          "min": 0,
          "max": 60,
          "step": 4,
          "unit": "px",
          "default": 0
        }
      ]
    },
  {
  "type": "justtext",
  "name": "Text",
  "settings": [
    {
         "type":"select",
         "id":"visibility",
         "options":[
            {
               "value":"desktop-hidden",
               "label":"Mobile only"
            },
            {
               "value":"mobile-hidden",
               "label":"Desktop only"
            },
            {
               "value":"always-display",
               "label":"All devices"
            }
         ],
         "label":"Display on",
         "default":"always-display"
      },
    {
      "type": "range",
      "id": "mobile_text_size",
      "min": 8,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14,
      "label": "Mobile text size"
    },
    {
      "type": "range",
      "id": "desktop_text_size",
      "min": 10,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 16,
      "label": "Desktop text size"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "color",
      "id": "text_color",
      "default": "#121212",
      "label": "Text color"
    },
    {
      "type": "inline_richtext",
      "id": "text_1",
      "default": "Text",
      "label": "Main text"
    },
    {
      "type": "header",
      "content": "Text Highlight"
    },
    {
      "type": "checkbox",
      "id": "enable_text_highlight",
      "default": false,
      "label": "Enable text highlight",
      "info": "Highlight specific words with a background color or gradient"
    },
    {
      "type": "text",
      "id": "highlight_words",
      "label": "Words to highlight",
      "info": "Enter words separated by commas (e.g., premium, fast, mobile-optimised)",
      "placeholder": "premium, fast, mobile-optimised",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "select",
      "id": "highlight_type",
      "label": "Highlight type",
      "options": [
        {
          "value": "solid",
          "label": "Solid color"
        },
        {
          "value": "gradient",
          "label": "Gradient"
        }
      ],
      "default": "solid",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "color",
      "id": "highlight_color_1",
      "default": "#FFEDC9",
      "label": "Highlight background color",
      "info": "For gradients, this is the start color",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "color",
      "id": "highlight_text_color",
      "default": "#D48C00",
      "label": "Highlight text color",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "color",
      "id": "highlight_color_2",
      "default": "#FFD899",
      "label": "Gradient end color",
      "visible_if": "{{ block.settings.enable_text_highlight and block.settings.highlight_type == 'gradient' }}"
    },
    {
      "type": "range",
      "id": "gradient_angle",
      "min": 0,
      "max": 360,
      "step": 15,
      "unit": "deg",
      "default": 90,
      "label": "Gradient angle",
      "visible_if": "{{ block.settings.enable_text_highlight and block.settings.highlight_type == 'gradient' }}"
    },
    {
      "type": "range",
      "id": "highlight_corner_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 4,
      "label": "Highlight corner radius",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "range",
      "id": "highlight_padding_vertical",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 1,
      "label": "Highlight vertical padding",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "range",
      "id": "highlight_padding_horizontal",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 4,
      "label": "Highlight horizontal padding",
      "visible_if": "{{ block.settings.enable_text_highlight }}"
    },
    {
      "type": "header",
      "content": "Subtitle Settings"
    },
    {
      "type": "inline_richtext",
      "id": "subtitle_text",
      "label": "Subtitle text",
      "info": "Optional subtitle text that appears below the main text"
    },
    {
      "type": "range",
      "id": "subtitle_mobile_size",
      "min": 6,
      "max": 13,
      "step": 1,
      "unit": "px",
      "default": 12,
      "label": "Subtitle mobile size"
    },
    {
      "type": "range",
      "id": "subtitle_desktop_size",
      "min": 8,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 14,
      "label": "Subtitle desktop size"
    },
    {
      "type": "color",
      "id": "subtitle_color",
      "default": "#666666",
      "label": "Subtitle color"
    },
    {
      "type": "range",
      "id": "subtitle_opacity",
      "min": 30,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 80,
      "label": "Subtitle opacity"
    },
    {
      "type": "range",
      "id": "subtitle_spacing",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "default": 8,
      "label": "Subtitle top spacing",
      "info": "Only applies when divider is disabled"
    },
    {
      "type": "header",
      "content": "Divider Settings"
    },
    {
      "type": "checkbox",
      "id": "show_divider",
      "default": false,
      "label": "Show decorative lines",
      "info": "Add decorative lines before and after the main text on the same line"
    },
    {
      "type": "select",
      "id": "divider_position",
      "label": "Line position",
      "options": [
        {
          "value": "both",
          "label": "Both sides"
        },
        {
          "value": "right",
          "label": "Right side only"
        },
        {
          "value": "left",
          "label": "Left side only"
        }
      ],
      "default": "both",
      "visible_if": "{{ block.settings.show_divider }}"
    },
    {
      "type": "range",
      "id": "divider_thickness",
      "min": 1,
      "max": 5,
      "step": 1,
      "unit": "px",
      "default": 1,
      "label": "Line thickness"
    },
    {
      "type": "range",
      "id": "divider_width",
      "min": 10,
      "max": 40,
      "step": 5,
      "unit": "%",
      "default": 25,
      "label": "Line length",
      "info": "Only applies to left-aligned text"
    },
    {
      "type": "color",
      "id": "divider_color",
      "default": "#000000",
      "label": "Line color"
    },
    {
      "type": "range",
      "id": "divider_spacing",
      "min": 6,
      "max": 26,
      "step": 2,
      "unit": "px",
      "default": 10,
      "label": "Space between text and lines"
    },
    {
      "type": "header",
      "content": "Container"
    },
    {
      "type": "select",
      "id": "width",
      "options": [
        {
          "value": "fit-content",
          "label": "Fit text"
        },
        {
          "value": "100%",
          "label": "Full"
        }
      ],
      "default": "100%",
      "label": "Width"
    },
    {
      "type": "checkbox",
      "id": "enable_bg",
      "default": false,
      "label": "Enable background",
      "info": "The following settings are applied when this option is enabled."
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#F3F3F3"
    },
    {
      "type": "range",
      "id": "corner_radius",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%",
      "label": "Corner radius",
      "default": 40,
      "info": "Relative to font size"
    },
    {
      "type": "range",
      "id": "padding",
      "min": 1,
      "max": 5,
      "step": 0.5,
      "label": "Padding",
      "default": 3
    },
    {
      "type": "range",
      "id": "border_size",
      "min": 0,
      "max": 5,
      "step": 1,
      "label": "Border thickness",
      "unit": "px",
      "default": 0
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#B7B7B7"
    },
    {
      "type": "checkbox",
      "id": "dashedborder",
      "default": false,
      "label": "Enable dashed border",
      "info": "Border thickness must at least be 1px to show"
    },
    {
      "type": "header",
      "content": "Circle Number"
    },
    {
      "type": "checkbox",
      "id": "enable_circle_number",
      "default": false,
      "label": "Enable circle number",
      "info": "Show a numbered circle badge before the main text"
    },
    {
      "type": "text",
      "id": "circle_number_text",
      "label": "Circle text",
      "default": "1",
      "placeholder": "1",
      "info": "Enter a number or short label (e.g. 1, 2, A)",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "color",
      "id": "circle_bg_color",
      "default": "#1B2641",
      "label": "Circle background color",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "color",
      "id": "circle_text_color",
      "default": "#FFFFFF",
      "label": "Circle text color",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "range",
      "id": "circle_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "%",
      "default": 50,
      "label": "Circle border radius",
      "info": "50% = full circle, 0% = square",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "color",
      "id": "circle_border_color",
      "label": "Circle border color",
      "default": "#1B2641",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "range",
      "id": "circle_border_size",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "default": 0,
      "label": "Circle border thickness",
      "visible_if": "{{ block.settings.enable_circle_number }}"
    },
    {
      "type": "header",
      "content": "Block margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": -21,
      "max": 30,
      "step": 3,
      "unit": "px",
      "label": "Top margin",
      "default": 15
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": -21,
      "max": 30,
      "step": 3,
      "unit": "px",
      "label": "Bottom margin",
      "default": 15
    }
  ]
},
{
  "type": "payment_badges",
  "name": "Payment badges",
  "limit": 1,
  "settings": [
    { "type": "select", "id": "visibility", "label": "Display on", "options": [{ "value": "desktop-hidden", "label": "Mobile only" }, { "value": "mobile-hidden", "label": "Desktop only" }, { "value": "always-display", "label": "All devices" }], "default": "always-display" },
    { "type": "text", "id": "enabled_payment_types", "label": "Custom payment icons to show", "info": "Comma-separated list. Options: afterpay, american_express, apple_pay, bitcoin, diners_club, discover, google_pay, ideal, jcb, klarna, maestro, master, paypal, shopify_pay, visa" },
    { "type": "select", "id": "alignment", "label": "Alignment", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }], "default": "center" },
    { "type": "range", "id": "icon_height", "label": "Icon height", "min": 24, "max": 38, "step": 2, "unit": "px", "default": 36 },
    { "type": "range", "id": "icon_spacing", "label": "Icon spacing", "min": 1, "max": 20, "step": 1, "unit": "px", "default": 1 },
    { "type": "header", "content": "Block margin" },
    { "type": "range", "id": "margin_top", "label": "Top margin", "min": 0, "max": 30, "step": 3, "unit": "px", "default": 15 },
    { "type": "range", "id": "margin_bottom", "label": "Bottom margin", "min": 0, "max": 30, "step": 3, "unit": "px", "default": 15 }
  ]
},
    {
      "type": "heading",
      "name": "t:sections.rich-text.blocks.heading.name",
      "limit": 3,
      "settings": [
        {
         "type":"select",
         "id":"visibility",
         "options":[
            {
               "value":"desktop-hidden",
               "label":"Mobile only"
            },
            {
               "value":"mobile-hidden",
               "label":"Desktop only"
            },
            {
               "value":"always-display",
               "label":"All devices"
            }
         ],
         "label":"Display on",
         "default":"always-display"
      },
            {
      "type": "select",
      "id": "alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center",
      "label": "Heading Align"
    },
          {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Headline",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        },
           {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
            {
      "type": "header",
      "content": "Underline text",
       "info": "Underline text color. Works by italicizing the text you want."
    },
     {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline text color",
      "default": "#FF0000"
    },
     {
      "type": "range",
      "id": "underlinethickness",
      "min": 3,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3
    },
    {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            }
          ],
          "default": "h2",
          "label": "t:sections.all.heading_size.label"
        },
        {
          "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
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Quantity breaks",
      "category": "Product",
      "blocks": [
        {
          "type": "quantity_breaks"
        },
        {
          "type": "blinkingdot",
          "settings": {
            "margin_top": 9,
            "margin_bottom": 9
          }
        },
        {
          "type": "buy_buttons"
        }
      ]
    }
  ]
}
{% endschema %}