{% liquid
  if section.settings.product_images == 'all' or section.settings.product_images == 'one'
    assign product = section.settings.product
  endif
%}
{% if product.selling_plan_groups.size == 0 %}
  <h4>This product has no active subscription plans created. Create a subscription plan by using a <a href='https://apps.shopify.com/shopify-subscriptions'>subscription app</a></h4>
{% else %}
  {% liquid
    assign show_one_time = true
    assign is_checkbox = false
    assign is_toggle = false
    assign is_toggle2 = false
    if block.settings.style == 'checkbox'
      assign show_one_time = false
      assign is_checkbox = true
    elsif block.settings.style == 'toggle'
      assign is_toggle = true
    elsif block.settings.style == 'toggle2'
      assign show_one_time = false
      assign is_toggle2 = true
    endif
    assign preselected = block.settings.preselected_option

    assign variant = product.selected_or_first_available_variant
    assign allocation = variant.selling_plan_allocations[0]     
    assign subscription_name = product.selling_plan_groups[0].name
    assign first_selling_plan_id = product.selected_or_first_available_variant.selling_plan_allocations[0].selling_plan.id
    assign price = product.selected_or_first_available_variant.price
    assign compare_price = price
    if product.selected_or_first_available_variant.compare_at_price > price
      assign compare_price = product.selected_or_first_available_variant.compare_at_price
    endif
    
    assign amount_saved = compare_price | minus: price
    assign amount_saved_rounded = amount_saved | divided_by: 100.0 | round | times: 100
    assign percentage_saved = compare_price | minus: price | times: 100.0 | divided_by: compare_price | floor 
    
    assign sub_price = allocation.price
    assign sub_compare_price = allocation.compare_at_price
    if block.settings.sub_compare_based_on == 'compare' and compare_price > sub_compare_price
      assign sub_compare_price = compare_price
    endif
    
    assign sub_amount_saved = sub_compare_price | minus: sub_price
    assign sub_amount_saved_rounded = sub_amount_saved | divided_by: 100.0 | round | times: 100
    assign sub_percentage_saved = sub_compare_price | minus: sub_price | times: 100.0 | divided_by: sub_compare_price | floor

    assign plan_adj = allocation.selling_plan.price_adjustments | first
    assign plan_adj_type = plan_adj.value_type
    assign plan_adj_val = plan_adj.value
    if plan_adj_type == 'price'
      assign plan_adj_val = plan_adj.price
    endif
  %}
  <theme-subscription-widget
    id="SubscriptionWidget-{{ section.id }}"
    class="subscription-widget subscription-widget--style-{{ block.settings.style }} accent-color-{{ block.settings.color_scheme }} display-block full-width{% if block.settings.first_displayed_option == 'subscription' %} subscription-widget--sub-first{% endif %}{% if block.settings.show_selected_indicators and block.settings.style == 'horizontal' %} subscription-widget--show-indicators{% endif %}"
    data-first-selling-plan-id="{{ first_selling_plan_id }}"
    data-preselected="{{ preselected }}"
    data-update-prices="{{ block.settings.update_prices }}"
    data-money-format="{{ shop.money_format | escape }}"
    data-subscription-name="{{ subscription_name }}"
    data-base-price="{{ price }}"
    data-base-compare-price="{{ compare_price }}"
    data-discount-type="{{ plan_adj_type }}"
    data-discount-value="{{ plan_adj_val }}"
    data-section="{{ section.id }}"
    {% if block.settings.style == 'checkbox' %}
      data-is-checkbox="true"
    {% elsif block.settings.style == 'toggle' %}
      data-is-toggle="true"
    {% elsif block.settings.style == 'toggle2' %}
      data-is-toggle2="true"
      data-is-checkbox="true"
    {% endif %}
    style="
      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 }}
  >

<style>
  #SubscriptionWidget-{{ section.id }} .subscription__box {
    border-width: {{ block.settings.border_width }}px;
    --border-width: {{ block.settings.border_width }}px;
    --text-accent-color: rgb(var(--color-base-{{ block.settings.accent_color }}));
    border-radius: {{ block.settings.corner_radius }}px;
    --badge-border-radius: {{  block.settings.badge_radius | divided_by: 100.0 | times: 1.33 }}em;
    --checkbox-size: {{ block.settings.checkbox_size | divided_by: 10.0 }}rem;
    {% if block.settings.hide_pickers_overlay %}--pickers-overlay-opacity:0;--pickers-hover-overlay-opacity:0;{% endif %}
  }

  #SubscriptionWidget-{{ section.id }} .subscription__wrapper {
    display: grid;
    grid-template-columns: repeat({% if block.settings.style == 'vertical' %}2{% else %}1{% endif %}, 1fr);
    gap: {{ block.settings.spacing_between_options }}px;
    {% if block.settings.style == 'vertical' %}align-items: {{ block.settings.vertical_align }}{% endif %};
  }

  #SubscriptionWidget-{{ section.id }} .subscription__content__right {
    flex-direction: {{ block.settings.price_layout }};
    {% if block.settings.price_layout contains 'row' %}align-items: baseline;{% endif %}
  }

  #SubscriptionWidget-{{ section.id }} .subscription__separator {
    opacity: {{  block.settings.subscription_separator_opacity }}%;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits p {
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin: 0;
    line-height: 1.3;
    font-size: {{ block.settings.subscription_description_font_size | divided_by: 10.0 }}rem;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits--stacked p + p {
    margin-top: {{ block.settings.subscription_benefits_spacing | divided_by: 10.0 }}rem;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits--two-column {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits--two-column p {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    margin: 0 !important;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits p .material-icon {
    font-size: {{ block.settings.subscription_benefits_icon_size | divided_by: 100.0 }}em;
    {% if block.settings.subscription_benefits_icon_color == 'accent' %}color: var(--text-accent-color);{% endif %}
    flex-shrink: 0;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__benefits p img {
    height: {{ block.settings.subscription_benefits_icon_size | divided_by: 100.0 }}em;
    width: auto;
    flex-shrink: 0;
  }

  {% if block.settings.colors == 'custom' %}
    #SubscriptionWidget-{{ section.id }} .subscription__box {
      border-style: {{ block.settings.non_selected_border_style }};
      border-color: {{ block.settings.non_selected_border_color }};
      background: {% if block.settings.non_selected_background_type == 'color' %}{{ block.settings.non_selected_background_color }}{% elsif block.settings.non_selected_background_type == 'gradient' %}{{ block.settings.non_selected_background_gradient }}{% else %}transparent{% endif %};
      color: {{ block.settings.non_selected_text_color }};
      --text-accent-color: {{ block.settings.non_selected_accent_color }};
      --checkbox-color: {{ block.settings.non_selected_checkbox_color }};
    }
    #SubscriptionWidget-{{ section.id }} .subscription__box .subscription__badge {
      color: {{ block.settings.non_selected_badge_text_color }};
      background: {{ block.settings.non_selected_badge_bg_color }};
    }

    #SubscriptionWidget-{{ section.id }} .subscription__box--selected {
      border-style: {{ block.settings.selected_border_style }};
      border-color: {{ block.settings.selected_border_color }};
      background: {% if block.settings.selected_background_type == 'color' %}{{ block.settings.selected_background_color }}{% elsif block.settings.selected_background_type == 'gradient' %}{{ block.settings.selected_background_gradient }}{% else %}transparent{% endif %};
      color: {{ block.settings.selected_text_color }};
      --text-accent-color: {{ block.settings.selected_accent_color }};
      --checkbox-color: {{ block.settings.selected_checkbox_color }};
    }
    #SubscriptionWidget-{{ section.id }} .subscription__box--selected .subscription__badge {
      color: {{ block.settings.selected_badge_text_color }};
      background: {{ block.settings.selected_badge_bg_color }};
    }
  {% endif %}

  /* Toggle Style with Color Scheme Support */
  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle .subscription__toggle-wrapper {
    background: rgb(var(--color-background));
    border-color: rgba(var(--color-foreground), 0.15);
  }

  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle .subscription__toggle-option[data-type="one_time"] .subscription__toggle-label {
  font-size: {{ block.settings.one_time_label_font_size_desktop | divided_by: 10.0 }}rem;
}

#SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle .subscription__toggle-option[data-type="subscription"] .subscription__toggle-label {
  font-size: {{ block.settings.subscription_label_font_size_desktop | divided_by: 10.0 }}rem;
}

@media screen and (max-width: 749px) {
  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle .subscription__toggle-option[data-type="one_time"] .subscription__toggle-label {
    font-size: {{ block.settings.one_time_label_font_size_mobile | divided_by: 10.0 }}rem;
  }

  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle .subscription__toggle-option[data-type="subscription"] .subscription__toggle-label {
    font-size: {{ block.settings.subscription_label_font_size_mobile | divided_by: 10.0 }}rem;
  }
}

 /* Vertical style — badge styles 3 & 4: add top space to wrapper so both boxes start at same point */
#SubscriptionWidget-{{ section.id }}.subscription-widget--style-vertical .subscription__wrapper:has(.subscription__box--badge-style-3),
#SubscriptionWidget-{{ section.id }}.subscription-widget--style-vertical .subscription__wrapper:has(.subscription__box--badge-style-4) {
  padding-top: calc(0.9em + 0.4rem);
  overflow: visible;
}

/* Remove the margin-top from the box itself in vertical — wrapper handles it now */
#SubscriptionWidget-{{ section.id }}.subscription-widget--style-vertical .subscription__box--badge-style-3,
#SubscriptionWidget-{{ section.id }}.subscription-widget--style-vertical .subscription__box--badge-style-4 {
  margin-top: 0;
  align-self: stretch;
}

/* Badge style 3 — center it in vertical */
#SubscriptionWidget-{{ section.id }}.subscription-widget--style-vertical .subscription__box--badge-style-3 .subscription__badge {
  top: 0;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Badge style 4 — full width option */
{% if block.settings.badge_style_4_full_width and block.settings.subscription_badge_style == '4' %}
  #SubscriptionWidget-{{ section.id }} .subscription__box--badge-style-4 .subscription__badge {
    left: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    top: calc(var(--border-width) * -1);
    transform: none;
    width: calc(100% + var(--border-width) * 2);
    text-align: center;
    border-radius: {{ block.settings.corner_radius }}px {{ block.settings.corner_radius }}px 0 0;
  }

  #SubscriptionWidget-{{ section.id }} .subscription__box--badge-style-4 {
    padding-top: calc(var(--padding-y) + 1.8em);
    overflow: hidden;
    margin-top: 0;
    border-top: none;
  }
{% endif %}

#SubscriptionWidget-{{ section.id }}:not(.subscription-widget--style-toggle) .subscription__box--one-time .subscription__label {
    font-size: {{ block.settings.one_time_label_font_size_other_desktop | divided_by: 10.0 }}rem;
  }

  #SubscriptionWidget-{{ section.id }}:not(.subscription-widget--style-toggle) .subscription__box--subscription .subscription__label {
    font-size: {{ block.settings.subscription_label_font_size_other_desktop | divided_by: 10.0 }}rem;
  }

  @media screen and (max-width: 749px) {
    #SubscriptionWidget-{{ section.id }}:not(.subscription-widget--style-toggle) .subscription__box--one-time .subscription__label {
      font-size: {{ block.settings.one_time_label_font_size_other_mobile | divided_by: 10.0 }}rem;
    }

    #SubscriptionWidget-{{ section.id }}:not(.subscription-widget--style-toggle) .subscription__box--subscription .subscription__label {
      font-size: {{ block.settings.subscription_label_font_size_other_mobile | divided_by: 10.0 }}rem;
    }
  }

  /* Toggle #2 scoped overrides */
  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle2 .subscription__box {
    cursor: default;
  }

  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle2 .subscription__t2-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
  }

  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle2 .subscription__t2-labels {
    flex: 1;
  }

  #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle2 .subscription__label {
    font-size: {{ block.settings.subscription_label_font_size_other_desktop | divided_by: 10.0 }}rem;
  }

  @media screen and (max-width: 749px) {
    #SubscriptionWidget-{{ section.id }}.subscription-widget--style-toggle2 .subscription__label {
      font-size: {{ block.settings.subscription_label_font_size_other_mobile | divided_by: 10.0 }}rem;
    }
  }
</style>

    {% if is_toggle %}
      <div class="subscription__toggle-container">
        <div class="subscription__toggle-wrapper" style="border-radius: {{ block.settings.toggle_border_radius }}px;">
          {%- comment -%} Order based on first_displayed_option setting {%- endcomment -%}
          {% if block.settings.first_displayed_option == 'subscription' %}
            {%- comment -%} Subscription first {%- endcomment -%}
            <div
              class="subscription__toggle-option{% if preselected == 'subscription' %} subscription__toggle-option--selected{% endif %}"
              data-type="subscription"
              data-selected="{% if preselected == 'subscription' %}true{% else %}false{% endif %}"
              style="border-radius: {{ block.settings.toggle_border_radius }}px;"
            >
              {% if block.settings.subscription_label != blank %}
                <span class="subscription__toggle-label sub-price-update" data-text="{{ block.settings.subscription_label }}">
                  {% render 'text-with-price',
                    text: block.settings.subscription_label,
                    price: sub_price,
                    compare_price: sub_compare_price,
                    amount_saved: sub_amount_saved,
                    amount_saved_rounded: sub_amount_saved_rounded,
                    percentage_saved: sub_percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
            
            <div
              class="subscription__toggle-option{% if preselected == 'one_time' %} subscription__toggle-option--selected{% endif %}"
              data-type="one_time"
              data-selected="{% if preselected == 'one_time' %}true{% endif %}"
              style="border-radius: {{ block.settings.toggle_border_radius }}px;"
            >
              {% if block.settings.one_time_label != blank %}
                <span class="subscription__toggle-label one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_label,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
          {% else %}
            {%- comment -%} One-time first {%- endcomment -%}
            <div
              class="subscription__toggle-option{% if preselected == 'one_time' %} subscription__toggle-option--selected{% endif %}"
              data-type="one_time"
              data-selected="{% if preselected == 'one_time' %}true{% endif %}"
              style="border-radius: {{ block.settings.toggle_border_radius }}px;"
            >
              {% if block.settings.one_time_label != blank %}
                <span class="subscription__toggle-label one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_label,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
            
            <div
              class="subscription__toggle-option{% if preselected == 'subscription' %} subscription__toggle-option--selected{% endif %}"
              data-type="subscription"
              data-selected="{% if preselected == 'subscription' %}true{% else %}false{% endif %}"
              style="border-radius: {{ block.settings.toggle_border_radius }}px;"
            >
              {% if block.settings.subscription_label != blank %}
                <span class="subscription__toggle-label sub-price-update" data-text="{{ block.settings.subscription_label }}">
                  {% render 'text-with-price',
                    text: block.settings.subscription_label,
                    price: sub_price,
                    compare_price: sub_compare_price,
                    amount_saved: sub_amount_saved,
                    amount_saved_rounded: sub_amount_saved_rounded,
                    percentage_saved: sub_percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
          {% endif %}
        </div>

        {% if product.selling_plan_groups[0].selling_plans.size > 1 %}
          {%- liquid
            assign current_variant = product.selected_or_first_available_variant
            assign group = product.selling_plan_groups[0]
            assign allocations = current_variant.selling_plan_allocations | where: 'selling_plan_group_id', group.id
            assign frequency_selector_type = block.settings.frequency_selector_type
          -%}
          
          <div class="subscription__toggle-frequency" style="display: {% if preselected == 'subscription' %}block{% else %}none{% endif %};">
            <div class="subscription__frequency subscription__frequency--{{ frequency_selector_type }}">
              <span class="subscription__frequency-label">
                {{ block.settings.frequency_label }}
              </span>
              {%- if frequency_selector_type == 'dropdown' -%}
                <div class="select select--small subscription__select{% if block.settings.frequency_dropdown_width != 'full' %} fit-content{% endif %} no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }} accent-2-color-{{ settings.pickers_text_color }}">
                  <select
                    id="SubscriptionFrequency-{{ section.id }}"
                    class="select__select"
                  >
                    {%- for allocation in allocations -%}
                      {%- liquid
                        assign plan_id = allocation.selling_plan.id
                        assign plan_name = allocation.selling_plan.name
                        if block.settings.frequency_names == 'no_discount'
                          assign plan_name = plan_name | split: ',' | first
                        elsif block.settings.frequency_names == 'dash'
                          assign plan_name = plan_name | replace: ',', ' -'
                        elsif block.settings.frequency_names == 'brackets'
                          assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                        endif
                        assign plan_price_cents = allocation.price
                        assign plan_compare_cents = allocation.compare_at_price

                        assign adj = allocation.selling_plan.price_adjustments | first
                        assign adj_type = adj.value_type
                        assign adj_val = adj.value
                        if adj_type == 'price' or adj_type == blank
                          assign adj_type = 'price'
                          assign adj_val  = plan_price_cents
                        endif
                      -%}
                       {%- liquid
                      assign is_recommended = false
                      assign base_plan_name = plan_name | split: ',' | first | strip
                      assign recommended_freq = block.settings.recommended_frequency | strip
                      if base_plan_name == recommended_freq
                        assign is_recommended = true
                      endif
                      assign recommended_text = block.settings.recommended_badge_text | default: "Recommended"
                    -%}
                    <option
                      value="{{ plan_id }}"
                      data-selling-plan-id="{{ plan_id }}"
                      data-price="{{ plan_price_cents }}"
                      data-compare-price="{{ plan_compare_cents }}"
                      data-discount-type="{{ adj_type }}"
                      data-discount-value="{{ adj_val }}"
                      {% if forloop.first %}selected{% endif %}
                    >
                      {{ plan_name }}{% if is_recommended %} - {{ recommended_text }}{% endif %}
                    </option>
                    {%- endfor -%}
                  </select>
                  {% render 'icon-caret' %}
                </div>

              {%- elsif frequency_selector_type == 'radio' -%}
                <div class="subscription__frequency-radios">
                  <form id="SubscriptionFrequency-{{ block.id }}">
                    {%- for allocation in allocations -%}
                      {%- liquid
                        assign plan_id = allocation.selling_plan.id
                        assign plan_name = allocation.selling_plan.name
                        if block.settings.frequency_names == 'no_discount'
                          assign plan_name = plan_name | split: ',' | first
                        elsif block.settings.frequency_names == 'dash'
                          assign plan_name = plan_name | replace: ',', ' -'
                        elsif block.settings.frequency_names == 'brackets'
                          assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                        endif
                        assign plan_price_cents = allocation.price
                        assign plan_compare_cents = allocation.compare_at_price
                        assign input_id = 'SubFreq-' | append: section.id | append: '-' | append: plan_id

                        assign adj = allocation.selling_plan.price_adjustments | first
                        assign adj_type = adj.value_type
                        assign adj_val = adj.value
                        if adj_type == 'price' or adj_type == blank
                          assign adj_type = 'price'
                          assign adj_val  = plan_price_cents
                        endif
                      -%}
                      <label class="subscription__frequency-radio" for="{{ input_id }}">
                        <input
                          id="{{ input_id }}"
                          type="radio"
                          name="subscription_frequency_{{ section.id }}"
                          class="subscription__frequency-input"
                          value="{{ plan_id }}"
                          data-selling-plan-id="{{ plan_id }}"
                          data-price="{{ plan_price_cents }}"
                          data-compare-price="{{ plan_compare_cents }}"
                          data-discount-type="{{ adj_type }}"
                          data-discount-value="{{ adj_val }}"
                          {% if forloop.first %}
                            checked
                          {% endif %}
                        />
                        <span class="subscription__frequency-text">{{ plan_name }}</span>
                      </label>
                    {%- endfor -%}
                  </form>
                </div>
              {%- endif -%}
            </div>
          </div>
        {% endif %}
      </div>
    {% elsif is_toggle2 %}
      {%- comment -%} ── Toggle #2: single card with iOS-style toggle switch ── {%- endcomment -%}
      <div
        class="subscription__box subscription__box--subscription{% if preselected == 'subscription' %} subscription__box--selected{% endif %}{% if block.settings.subscription_badge_text != blank %} subscription__box--badge-style-{{ block.settings.subscription_badge_style }}{% endif %}"
        data-type="subscription"
        data-selected="{% if preselected == 'subscription' %}true{% else %}false{% endif %}"
      >
        {% if block.settings.subscription_badge_text != blank %}
          <span class="subscription__badge quantity-break__badge{% if block.settings.colors == 'theme' %} color-{{ block.settings.badge_color_scheme }}{% endif %} sub-price-update" data-text="{{ block.settings.subscription_badge_text }}">
            {% render 'text-with-price',
              text: block.settings.subscription_badge_text,
              price: sub_price,
              compare_price: sub_compare_price,
              amount_saved: sub_amount_saved,
              amount_saved_rounded: sub_amount_saved_rounded,
              percentage_saved: sub_percentage_saved,
              subscription_name: subscription_name
            %}
          </span>
        {% endif %}

        <div class="subscription__t2-header">
          {%- comment -%} iOS-style toggle switch {%- endcomment -%}
          <button
            class="subscription__t2-toggle-btn"
            type="button"
            role="switch"
            aria-checked="{% if preselected == 'subscription' %}true{% else %}false{% endif %}"
            aria-label="{{ block.settings.subscription_label | escape }}"
          >
            <span class="subscription__t2-toggle-track">
              <span class="subscription__t2-toggle-thumb"></span>
            </span>
          </button>
          <div class="subscription__t2-labels">
            {% if block.settings.subscription_label != blank %}
              <span class="subscription__label sub-price-update" data-text="{{ block.settings.subscription_label }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_label,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
            {% if block.settings.subscription_caption != blank %}
              <span class="subscription__caption sub-price-update" data-text="{{ block.settings.subscription_caption }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_caption,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
          </div>

          <div class="subscription__content__right right flex flex-justify-end">
            {% if block.settings.subscription_price_text != blank %}
              <span class="subscription__price sub-price-update" data-text="{{ block.settings.subscription_price_text }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_price_text,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
            {% if block.settings.subscription_compare_price_text != blank %}
              <span class="subscription__compare-price sub-price-update" data-text="{{ block.settings.subscription_compare_price_text }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_compare_price_text,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
          </div>
        </div>

        {%- comment -%} Benefits / description and free gift (visible immediately, same as checkbox style) {%- endcomment -%}
        {%- liquid
          assign t2_has_bottom = false
          if block.settings.subscription_description_text != blank
            assign t2_has_bottom = true
          endif
          if block.settings.show_free_gift
            assign t2_has_bottom = true
          endif
        -%}
        {% if t2_has_bottom %}
          <div class="subscription__separator">&nbsp;</div>
          <div class="subscription__bottom">

            {% if block.settings.show_free_gift and block.settings.free_gift_position == 'above' %}
              <div class="subscription__free-gift">
                <div class="subscription__free-gift-image">
                  {% if block.settings.free_gift_image != blank %}
                    <img
                      src="{{ block.settings.free_gift_image | image_url: width: 120 }}"
                      alt="{{ block.settings.free_gift_title }}"
                      width="60"
                      height="60"
                      loading="lazy"
                    >
                  {% endif %}
                </div>
                <div class="subscription__free-gift-content">
                  <div class="subscription__free-gift-header">
                    {% if block.settings.free_gift_title != blank %}
                      <div>
                        <h4 class="subscription__free-gift-title">{{ block.settings.free_gift_title }}</h4>
                        {% if block.settings.free_gift_subtitle != blank %}
                          <p class="subscription__free-gift-subtitle">{{ block.settings.free_gift_subtitle }}</p>
                        {% endif %}
                      </div>
                    {% endif %}
                    <div class="subscription__free-gift-badge-wrapper">
                      {% if block.settings.free_gift_badge_text != blank %}
                        <span class="subscription__free-gift-badge">{{ block.settings.free_gift_badge_text }}</span>
                      {% endif %}
                      {% if block.settings.free_gift_price != blank %}
                        <span class="subscription__free-gift-price">{{ block.settings.free_gift_price }}</span>
                      {% endif %}
                    </div>
                  </div>
                  {% if block.settings.free_gift_description != blank %}
                    <p class="subscription__free-gift-description">{{ block.settings.free_gift_description }}</p>
                  {% endif %}
                </div>
              </div>
            {% endif %}

            {% if block.settings.subscription_description_text != blank %}
              {% capture benefit_icon_t2 %}
                {%- if block.settings.benefits_custom_icon == blank -%}
                  {% render 'material-icon', icon: block.settings.benefits_icon, filled: block.settings.benefits_filled_icon %}
                {%- else -%}
                  <img
                    src="{{ block.settings.benefits_custom_icon | image_url }}"
                    {% if block.settings.benefits_custom_icon.alt != blank %}
                      alt="{{ block.settings.benefits_custom_icon.alt | escape }}"
                    {% else %}
                      role="presentation"
                    {% endif %}
                    height="auto"
                    width="auto"
                    loading="lazy"
                  >
                {%- endif -%}
              {% endcapture %}
              {%- assign t2_benefits_array = block.settings.subscription_description_text | split: ',' -%}
              <div class="subscription__benefits subscription__benefits--{{ block.settings.benefits_layout }}">
                {%- for benefit in t2_benefits_array -%}
                  <p>{{ benefit_icon_t2 }}{{ benefit | strip }}</p>
                {%- endfor -%}
              </div>
            {% endif %}

            {% if block.settings.show_free_gift and block.settings.free_gift_position == 'below' %}
              <div class="subscription__free-gift">
                <div class="subscription__free-gift-image">
                  {% if block.settings.free_gift_image != blank %}
                    <img
                      src="{{ block.settings.free_gift_image | image_url: width: 120 }}"
                      alt="{{ block.settings.free_gift_title }}"
                      width="60"
                      height="60"
                      loading="lazy"
                    >
                  {% endif %}
                </div>
                <div class="subscription__free-gift-content">
                  <div class="subscription__free-gift-header">
                    {% if block.settings.free_gift_title != blank %}
                      <div>
                        <h4 class="subscription__free-gift-title">{{ block.settings.free_gift_title }}</h4>
                        {% if block.settings.free_gift_subtitle != blank %}
                          <p class="subscription__free-gift-subtitle">{{ block.settings.free_gift_subtitle }}</p>
                        {% endif %}
                      </div>
                    {% endif %}
                    <div class="subscription__free-gift-badge-wrapper">
                      {% if block.settings.free_gift_badge_text != blank %}
                        <span class="subscription__free-gift-badge">{{ block.settings.free_gift_badge_text }}</span>
                      {% endif %}
                      {% if block.settings.free_gift_price != blank %}
                        <span class="subscription__free-gift-price">{{ block.settings.free_gift_price }}</span>
                      {% endif %}
                    </div>
                  </div>
                  {% if block.settings.free_gift_description != blank %}
                    <p class="subscription__free-gift-description">{{ block.settings.free_gift_description }}</p>
                  {% endif %}
                </div>
              </div>
            {% endif %}

          </div>
        {% endif %}
        {% if product.selling_plan_groups[0].selling_plans.size > 1 %}
          {%- liquid
            assign current_variant_t2 = product.selected_or_first_available_variant
            assign group_t2 = product.selling_plan_groups[0]
            assign allocations_t2 = current_variant_t2.selling_plan_allocations | where: 'selling_plan_group_id', group_t2.id
            assign frequency_selector_type = block.settings.frequency_selector_type
          -%}
          <div class="subscription__bottom">
            <div class="subscription__frequency subscription__frequency--{{ frequency_selector_type }}">
              <span class="subscription__frequency-label">{{ block.settings.frequency_label }}</span>
              {%- if frequency_selector_type == 'dropdown' -%}
                <div class="select select--small subscription__select{% if block.settings.frequency_dropdown_width != 'full' %} fit-content{% endif %} no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }} accent-2-color-{{ settings.pickers_text_color }}">
                  <select id="SubscriptionFrequency-{{ section.id }}" class="select__select">
                    {%- for allocation in allocations_t2 -%}
                      {%- liquid
                        assign plan_id = allocation.selling_plan.id
                        assign plan_name = allocation.selling_plan.name
                        if block.settings.frequency_names == 'no_discount'
                          assign plan_name = plan_name | split: ',' | first
                        elsif block.settings.frequency_names == 'dash'
                          assign plan_name = plan_name | replace: ',', ' -'
                        elsif block.settings.frequency_names == 'brackets'
                          assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                        endif
                        assign plan_price_cents = allocation.price
                        assign plan_compare_cents = allocation.compare_at_price
                        assign adj = allocation.selling_plan.price_adjustments | first
                        assign adj_type = adj.value_type
                        assign adj_val = adj.value
                        if adj_type == 'price' or adj_type == blank
                          assign adj_type = 'price'
                          assign adj_val = plan_price_cents
                        endif
                      -%}
                      <option
                        value="{{ plan_id }}"
                        data-selling-plan-id="{{ plan_id }}"
                        data-price="{{ plan_price_cents }}"
                        data-compare-price="{{ plan_compare_cents }}"
                        data-discount-type="{{ adj_type }}"
                        data-discount-value="{{ adj_val }}"
                        {% if forloop.first %}selected{% endif %}
                      >{{ plan_name }}</option>
                    {%- endfor -%}
                  </select>
                  {% render 'icon-caret' %}
                </div>
              {%- elsif frequency_selector_type == 'radio' -%}
                <div class="subscription__frequency-radios">
                  <form id="SubscriptionFrequency-{{ block.id }}">
                    {%- for allocation in allocations_t2 -%}
                      {%- liquid
                        assign plan_id = allocation.selling_plan.id
                        assign plan_name = allocation.selling_plan.name
                        if block.settings.frequency_names == 'no_discount'
                          assign plan_name = plan_name | split: ',' | first
                        elsif block.settings.frequency_names == 'dash'
                          assign plan_name = plan_name | replace: ',', ' -'
                        elsif block.settings.frequency_names == 'brackets'
                          assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                        endif
                        assign plan_price_cents = allocation.price
                        assign plan_compare_cents = allocation.compare_at_price
                        assign input_id_t2 = 'SubFreq-' | append: section.id | append: '-' | append: plan_id
                        assign adj = allocation.selling_plan.price_adjustments | first
                        assign adj_type = adj.value_type
                        assign adj_val = adj.value
                        if adj_type == 'price' or adj_type == blank
                          assign adj_type = 'price'
                          assign adj_val = plan_price_cents
                        endif
                      -%}
                      <label class="subscription__frequency-radio" for="{{ input_id_t2 }}">
                        <input
                          id="{{ input_id_t2 }}"
                          type="radio"
                          name="subscription_frequency_{{ section.id }}"
                          class="subscription__frequency-input"
                          value="{{ plan_id }}"
                          data-selling-plan-id="{{ plan_id }}"
                          data-price="{{ plan_price_cents }}"
                          data-compare-price="{{ plan_compare_cents }}"
                          data-discount-type="{{ adj_type }}"
                          data-discount-value="{{ adj_val }}"
                          {% if forloop.first %}checked{% endif %}
                        />
                        <span class="subscription__frequency-text">{{ plan_name }}</span>
                      </label>
                    {%- endfor -%}
                  </form>
                </div>
              {%- endif -%}
            </div>
          </div>
        {% endif %}
      </div>
      <script>
        (function() {
          var widget = document.getElementById('SubscriptionWidget-{{ section.id }}');
          if (!widget) return;
          function syncToggle2() {
            var box = widget.querySelector('.subscription__box--subscription');
            var btn = widget.querySelector('.subscription__t2-toggle-btn');
            if (!box || !btn) return;
            var isSelected = box.classList.contains('subscription__box--selected');
            btn.setAttribute('aria-checked', isSelected ? 'true' : 'false');
          }
          var observer = new MutationObserver(syncToggle2);
          var box = widget.querySelector('.subscription__box--subscription');
          if (box) observer.observe(box, { attributes: true, attributeFilter: ['class'] });
          var btn = widget.querySelector('.subscription__t2-toggle-btn');
          if (btn) {
            btn.addEventListener('click', function(e) {
              e.stopPropagation();
              var subscriptionBox = widget.querySelector('[data-type="subscription"]');
              if (subscriptionBox) subscriptionBox.click();
            });
          }
        })();
      </script>

    {% else %}
      <div class="subscription__wrapper">
      {% if show_one_time %}
        <div
          class="subscription__box subscription__box--one-time{% if preselected == 'one_time' %} subscription__box--selected{% endif %}"
          data-type="one_time"
          data-selected="{% if preselected == 'one_time' %}true{% endif %}"
        >
          <div class="subscription__content">
            <div class="subscription__content__left left"> 
              {% if block.settings.one_time_label != blank %}
                <span class="subscription__label one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_label,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
              {% if block.settings.one_time_caption != blank %}
                <span class="subscription__caption one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_caption,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
            <div class="subscription__content__right right">
              {% if block.settings.one_time_price_text != blank %}
                <span class="subscription__price one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_price_text,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
              {% if block.settings.one_time_compare_price_text != blank %}
                <span class="subscription__compare-price one-time-price-update">
                  {% render 'text-with-price',
                    text: block.settings.one_time_compare_price_text,
                    price: price,
                    compare_price: compare_price,
                    amount_saved: amount_saved,
                    amount_saved_rounded: amount_saved_rounded,
                    percentage_saved: percentage_saved,
                    subscription_name: subscription_name
                  %}
                </span>
              {% endif %}
            </div>
          </div>
        </div>
      {% endif %}

      <div
        class="subscription__box subscription__box--subscription{% if preselected == 'subscription' %} subscription__box--selected{% endif %}{% if block.settings.subscription_badge_text != blank %} subscription__box--badge-style-{{ block.settings.subscription_badge_style }}{% endif %}{% if block.settings.hide_frequency %} subscription__box--hide-frequency{% endif %}"
        data-type="subscription"
        data-selected="{% if preselected == 'subscription' %}true{% else %}false{% endif %}"
      >
        {% if block.settings.subscription_badge_text != blank %}
          <span class="subscription__badge quantity-break__badge{% if block.settings.colors == 'theme' %} color-{{ block.settings.badge_color_scheme }}{% endif %} sub-price-update" data-text="{{ block.settings.subscription_badge_text }}">
            {% render 'text-with-price',
              text: block.settings.subscription_badge_text,
              price: sub_price,
              compare_price: sub_compare_price,
              amount_saved: sub_amount_saved,
              amount_saved_rounded: sub_amount_saved_rounded,
              percentage_saved: sub_percentage_saved,
              subscription_name: subscription_name
            %}
          </span>
        {% endif %}
        <div class="subscription__content">
          {% if is_checkbox %}
            {% render 'checkbox-icons', checked: preselected == 'subscription' %}
          {% endif %}
          <div class="subscription__content__left left">
            {% if block.settings.subscription_label != blank %}
              <span class="subscription__label sub-price-update" data-text="{{ block.settings.subscription_label }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_label,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
            {% if block.settings.subscription_caption != blank %}
              <span class="subscription__caption sub-price-update" data-text="{{ block.settings.subscription_caption }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_caption,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
          </div>
          <div class="subscription__content__right right flex flex-justify-end">
            {% if block.settings.subscription_price_text != blank %}
              <span class="subscription__price sub-price-update" data-text="{{ block.settings.subscription_price_text }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_price_text,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  mount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
            {% if block.settings.subscription_compare_price_text != blank %}
              <span class="subscription__compare-price sub-price-update" data-text="{{ block.settings.subscription_compare_price_text }}">
                {% render 'text-with-price',
                  text: block.settings.subscription_compare_price_text,
                  price: sub_price,
                  compare_price: sub_compare_price,
                  amount_saved: sub_amount_saved,
                  amount_saved_rounded: sub_amount_saved_rounded,
                  percentage_saved: sub_percentage_saved,
                  subscription_name: subscription_name
                %}
              </span>
            {% endif %}
          </div>
        </div>
        {% liquid
          assign has_separator = false
          if block.settings.subscription_separator_opacity > 0
            assign has_separator = true
          endif
          assign has_bottom = false
          if block.settings.subscription_description_text != blank
            assign has_bottom = true
          endif
          if block.settings.show_single_frequency_label and product.selling_plan_groups[0].selling_plans.size == 1
            assign has_bottom = true
          endif
          if product.selling_plan_groups[0].selling_plans.size > 1
            assign has_bottom = true
          endif
        %}
        {% if has_separator %}<div class="subscription__separator">&nbsp</div>{% endif %}
        <div class="subscription__bottom{% unless has_bottom %} hidden{% endunless %}">
  {% if block.settings.show_free_gift and block.settings.free_gift_position == 'above' and block.settings.style != 'vertical' %}
    <div class="subscription__free-gift">
      <div class="subscription__free-gift-image">
        {% if block.settings.free_gift_image != blank %}
          <img 
            src="{{ block.settings.free_gift_image | image_url: width: 120 }}" 
            alt="{{ block.settings.free_gift_title }}"
            width="60"
            height="60"
            loading="lazy"
          >
        {% endif %}
      </div>
      <div class="subscription__free-gift-content">
        <div class="subscription__free-gift-header">
          {% if block.settings.free_gift_title != blank %}
            <div>
              <h4 class="subscription__free-gift-title">{{ block.settings.free_gift_title }}</h4>
              {% if block.settings.free_gift_subtitle != blank %}
                <p class="subscription__free-gift-subtitle">{{ block.settings.free_gift_subtitle }}</p>
              {% endif %}
            </div>
          {% endif %}
          <div class="subscription__free-gift-badge-wrapper">
            {% if block.settings.free_gift_badge_text != blank %}
              <span class="subscription__free-gift-badge">{{ block.settings.free_gift_badge_text }}</span>
            {% endif %}
            {% if block.settings.free_gift_price != blank %}
              <span class="subscription__free-gift-price">{{ block.settings.free_gift_price }}</span>
            {% endif %}
          </div>
        </div>
        {% if block.settings.free_gift_description != blank %}
          <p class="subscription__free-gift-description">{{ block.settings.free_gift_description }}</p>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if block.settings.subscription_description_text != blank %}
    {% capture benefit_icon %}
      {%- if block.settings.benefits_custom_icon == blank -%}
        {% render 'material-icon', icon: block.settings.benefits_icon, filled: block.settings.benefits_filled_icon %}
      {%- else -%}
        <img
          src="{{ block.settings.benefits_custom_icon | image_url }}"
          {% if block.settings.benefits_custom_icon.alt != blank %}
            alt="{{ block.settings.benefits_custom_icon.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          height="auto"
          width="auto"
          loading="lazy"
        >
      {%- endif -%}
    {% endcapture %}
    
    {%- assign benefits_array = block.settings.subscription_description_text | split: ',' -%}
    <div class="subscription__benefits subscription__benefits--{{ block.settings.benefits_layout }}">
      {%- for benefit in benefits_array -%}
        <p>{{ benefit_icon }}{{ benefit | strip }}</p>
      {%- endfor -%}
    </div>
  {% endif %}

  {% if block.settings.show_free_gift and block.settings.free_gift_position == 'below' and block.settings.style != 'vertical' %}
    <div class="subscription__free-gift">
      <div class="subscription__free-gift-image">
        {% if block.settings.free_gift_image != blank %}
          <img 
            src="{{ block.settings.free_gift_image | image_url: width: 120 }}" 
            alt="{{ block.settings.free_gift_title }}"
            width="60"
            height="60"
            loading="lazy"
          >
        {% endif %}
      </div>
      <div class="subscription__free-gift-content">
        <div class="subscription__free-gift-header">
          {% if block.settings.free_gift_title != blank %}
            <div>
              <h4 class="subscription__free-gift-title">{{ block.settings.free_gift_title }}</h4>
              {% if block.settings.free_gift_subtitle != blank %}
                <p class="subscription__free-gift-subtitle">{{ block.settings.free_gift_subtitle }}</p>
              {% endif %}
            </div>
          {% endif %}
          <div class="subscription__free-gift-badge-wrapper">
            {% if block.settings.free_gift_badge_text != blank %}
              <span class="subscription__free-gift-badge">{{ block.settings.free_gift_badge_text }}</span>
            {% endif %}
            {% if block.settings.free_gift_price != blank %}
              <span class="subscription__free-gift-price">{{ block.settings.free_gift_price }}</span>
            {% endif %}
          </div>
        </div>
        {% if block.settings.free_gift_description != blank %}
          <p class="subscription__free-gift-description">{{ block.settings.free_gift_description }}</p>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {% if product.selling_plan_groups[0].selling_plans.size > 1 %}
    {%- liquid
      assign current_variant = product.selected_or_first_available_variant
      assign group = product.selling_plan_groups[0]
      assign allocations = current_variant.selling_plan_allocations | where: 'selling_plan_group_id', group.id
      assign frequency_selector_type = block.settings.frequency_selector_type
    -%}
    
    <div class="subscription__frequency subscription__frequency--{{ frequency_selector_type }}">
      <span class="subscription__frequency-label">
        {{ block.settings.frequency_label }}
      </span>
      {%- if frequency_selector_type == 'dropdown' -%}
        <div class="select select--small subscription__select{% if block.settings.frequency_dropdown_width != 'full' %} fit-content{% endif %} no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }} accent-2-color-{{ settings.pickers_text_color }}">
          <select
            id="SubscriptionFrequency-{{ section.id }}"
            class="select__select"
          >
            {%- for allocation in allocations -%}
              {%- liquid
                assign plan_id = allocation.selling_plan.id
                assign plan_name = allocation.selling_plan.name
                if block.settings.frequency_names == 'no_discount'
                  assign plan_name = plan_name | split: ',' | first
                elsif block.settings.frequency_names == 'dash'
                  assign plan_name = plan_name | replace: ',', ' -'
                elsif block.settings.frequency_names == 'brackets'
                  assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                endif
                assign plan_price_cents = allocation.price
                assign plan_compare_cents = allocation.compare_at_price

                assign adj = allocation.selling_plan.price_adjustments | first
                assign adj_type = adj.value_type
                assign adj_val = adj.value
                if adj_type == 'price' or adj_type == blank
                  assign adj_type = 'price'
                  assign adj_val  = plan_price_cents
                endif
              -%}
             {%- liquid
              assign is_recommended = false
              assign base_plan_name = plan_name | split: ',' | first | strip
              assign recommended_freq = block.settings.recommended_frequency | strip
              if base_plan_name == recommended_freq
                assign is_recommended = true
              endif
              assign recommended_text = block.settings.recommended_badge_text | default: "Recommended"
            -%}
            <option
              value="{{ plan_id }}"
              data-selling-plan-id="{{ plan_id }}"
              data-price="{{ plan_price_cents }}"
              data-compare-price="{{ plan_compare_cents }}"
              data-discount-type="{{ adj_type }}"
              data-discount-value="{{ adj_val }}"
              {% if forloop.first %}selected{% endif %}
            >
              {{ plan_name }}{% if is_recommended %} - {{ recommended_text }}{% endif %}
            </option>
            {%- endfor -%}
          </select>
          {% render 'icon-caret' %}
        </div>

      {%- elsif frequency_selector_type == 'radio' -%}
        <div class="subscription__frequency-radios">
          <form id="SubscriptionFrequency-{{ block.id }}">
            {%- for allocation in allocations -%}
              {%- liquid
                assign plan_id = allocation.selling_plan.id
                assign plan_name = allocation.selling_plan.name
                if block.settings.frequency_names == 'no_discount'
                  assign plan_name = plan_name | split: ',' | first
                elsif block.settings.frequency_names == 'dash'
                  assign plan_name = plan_name | replace: ',', ' -'
                elsif block.settings.frequency_names == 'brackets'
                  assign plan_name = plan_name | replace: ', ', ' (' | append: ")"
                endif
                assign plan_price_cents = allocation.price
                assign plan_compare_cents = allocation.compare_at_price
                assign input_id = 'SubFreq-' | append: section.id | append: '-' | append: plan_id

                assign adj = allocation.selling_plan.price_adjustments | first
                assign adj_type = adj.value_type
                assign adj_val = adj.value
                if adj_type == 'price' or adj_type == blank
                  assign adj_type = 'price'
                  assign adj_val  = plan_price_cents
                endif
              -%}
              <label class="subscription__frequency-radio" for="{{ input_id }}">
                <input
                  id="{{ input_id }}"
                  type="radio"
                  name="subscription_frequency_{{ section.id }}"
                  class="subscription__frequency-input"
                  value="{{ plan_id }}"
                  data-selling-plan-id="{{ plan_id }}"
                  data-price="{{ plan_price_cents }}"
                  data-compare-price="{{ plan_compare_cents }}"
                  data-discount-type="{{ adj_type }}"
                  data-discount-value="{{ adj_val }}"
                  {% if forloop.first %}
                    checked
                  {% endif %}
                />
                <span class="subscription__frequency-text">{{ plan_name }}</span>
              </label>
            {%- endfor -%}
          </form>
        </div>
      {%- endif -%}
    </div>
  {% endif %}
</div>
      </div>
    </div>
    {% endif %}
  </theme-subscription-widget>
{% endif %}

<style>
  .subscription-widget {
  --padding-y: 1.5rem;
  --padding-x: 1.1rem;
  --padding-indicator: 3.7rem;
  --indicator-size: 1.5rem;
}

.subscription-widget--show-indicators .subscription__content {
  padding-left: var(--padding-indicator);
  margin-left: calc(var(--padding-x) * -1);
}

.subscription-widget--show-indicators .subscription__content::before {
  content: "";
  display: block;
  width: var(--indicator-size);
  height: var(--indicator-size);
  position: absolute;
  left: calc(var(--padding-indicator) / 2);
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: solid 0.2rem rgba(var(--accent-color), 0.3);
}

.subscription-widget--show-indicators .subscription__box--selected .subscription__content::before {
  border: solid 0.2rem rgb(var(--color-background));
  background: rgb(var(--accent-color));
  box-shadow: 0 0 0 0.1rem rgb(var(--accent-color));
}

.subscription__box {
  position: relative;
  padding: var(--padding-y) var(--padding-x);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(var(--accent-color), 0.02);
  border: solid var(--border-width) rgba(var(--accent-color), 0.3);
  --checkbox-color: rgba(var(--accent-color));
}

.subscription__box--selected {
  background: rgba(var(--accent-color), 0.1);
  border: solid var(--border-width) rgb(var(--accent-color));
}

.subscription__box em {
  color: var(--text-accent-color);
  font-style: normal;
}

.subscription__badge {
  font-size: 1.1rem;
  line-height: 1.8;
}

.subscription__box--badge-style-2 .subscription__badge,
.subscription__box--badge-style-3 .subscription__badge {
  right: 1rem;
}

.subscription__box svg {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  color: var(--checkbox-color);
}

.subscription-widget:not(.subscription-widget--sub-first) .subscription__box--badge-style-3 {
  margin-top: 1.2rem;
}

.subscription__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.subscription__content span {
  display: block;
  line-height: 1.1;
}

.subscription__content__left {
  flex-grow: 1;
}

.subscription__content__left span+span {
  margin-top: 0.4rem;
}

.subscription__content__right {
  row-gap: 0.2rem;
  column-gap: 0.5rem;
}

.subscription__compare-price {
  font-size: 1.2rem;
  text-decoration: line-through;
}

.subscription__caption {
  font-size: 1.3rem;
}

.subscription-widget--sub-first .subscription__box--subscription {
  order: -1;
}

.subscription__separator {
  height: 1px;
  background: currentColor;
}

.subscription__separator {
  margin-top: 0.9rem;
}

.subscription__bottom {
  margin-top: 0.6rem;
}

.subscription__benefits p {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  line-height: 1.3;
}

.subscription__benefits p .material-icon,
.subscription__benefits p img {
  flex-shrink: 0;
}

.subscription__frequency-label {
  font-size: 1.3rem;
}

.subscription__frequency-radio {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.subscription__frequency-radio input {
  margin: 0;
  accent-color: rgb(var(--accent-color));
  transform: scale(0.8);
}

.subscription__frequency-radio+.subscription__frequency-radio {
  margin-top: 0.4rem;
}

.subscription__box--hide-frequency:not(.subscription__box--selected) .subscription__frequency {
  display: none;
}

.subscription-widget--style-vertical .subscription__content,
.subscription-widget--style-vertical .left {
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 749px) {
  .subscription-widget--style-vertical .subscription__label {
    font-size: 1.4rem;
  }
}

/* Toggle Style */
.subscription__toggle-container {
  width: 100%;
}

.subscription__toggle-wrapper {
  display: flex;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 50px;
  padding: 4px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}

.subscription__toggle-option {
  flex: 1;
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease;
  background: transparent;
  font-weight: 500;
  font-size: 1.4rem;
}

.subscription__toggle-option--selected {
  background: {{ block.settings.toggle_selected_background }};
  color: {{ block.settings.toggle_selected_text_color }};
}

.subscription__toggle-label {
  display: block;
  line-height: 1.3;
}

{% assign toggle_rgb = block.settings.toggle_wrapper_color | color_to_rgb | remove: 'rgb(' | remove: ')' %}

.subscription__toggle-frequency {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: rgba({{ toggle_rgb }}, 0.02);
  border: 1px solid rgba({{ toggle_rgb }}, 0.1);
  border-radius: 8px;
}

.subscription-widget--style-toggle .subscription__frequency {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subscription-widget--style-toggle .subscription__frequency-label {
  font-weight: 500;
}

/* ── Toggle #2 Style ── */
.subscription-widget--style-toggle2 .subscription__box {
  cursor: default;
}

.subscription-widget--style-toggle2 .subscription__t2-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

.subscription-widget--style-toggle2 .subscription__t2-labels {
  flex: 1;
}

.subscription-widget--style-toggle2 .subscription__label {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}

.subscription-widget--style-toggle2 .subscription__caption {
  display: block;
  margin-top: 0.2rem;
}

.subscription-widget--style-toggle2 .subscription__content__right {
  flex-direction: column;
  align-items: flex-end;
}

/* iOS-style toggle button */
.subscription__t2-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.subscription__t2-toggle-track {
  display: block;
  width: 4.8rem;
  height: 2.8rem;
  border-radius: 50px;
  background: rgba(var(--color-foreground), 0.2);
  position: relative;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.subscription__t2-toggle-thumb {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgb(var(--color-background));
  position: absolute;
  top: 50%;
  left: 0.3rem;
  transform: translateY(-50%);
  transition: left 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Checked state — box selected */
.subscription-widget--style-toggle2 .subscription__box--selected .subscription__t2-toggle-track {
  background: {% if block.settings.toggle2_active_color != blank %}{{ block.settings.toggle2_active_color }}{% else %}rgb(var(--accent-color)){% endif %};
}

.subscription-widget--style-toggle2 .subscription__box--selected .subscription__t2-toggle-thumb {
  left: calc(100% - 2.5rem);
}

/* Separator always visible in toggle2 */
.subscription-widget--style-toggle2 .subscription__separator {
  opacity: 1;
  margin-top: 1rem;
}

/* Benefits shown always (not gated to selected state) */
.subscription-widget--style-toggle2 .subscription__benefits {
  margin-top: 0.8rem;
}


#SubscriptionWidget-{{ section.id }} .subscription__free-gift {
  display: flex;
  gap: 1.2rem;
  padding: 1.2rem;
  background: {% if block.settings.free_gift_transparent_bg %}transparent{% else %}{{ block.settings.free_gift_background }}{% endif %};
  border-radius: {{ block.settings.free_gift_border_radius }}px;
  color: {{ block.settings.free_gift_text_color }};
  margin-top: 1rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift:has(+ .subscription__benefits),
#SubscriptionWidget-{{ section.id }} .subscription__free-gift:has(+ .subscription__frequency) {
  margin-bottom: 1rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-image {
  flex-shrink: 0;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-image img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 0.4rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-subtitle {
  font-size: 1.2rem;
  margin: 0.2rem 0 0;
  opacity: 0.7;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-badge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-badge {
  background: {{ block.settings.free_gift_badge_bg }};
  color: {{ block.settings.free_gift_badge_text_color }};
  padding: 0.4rem 0.8rem;
  border-radius: {{ block.settings.free_gift_badge_radius }}px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-price {
  font-size: 1.2rem;
  text-decoration: line-through;
  opacity: 0.6;
}

#SubscriptionWidget-{{ section.id }} .subscription__free-gift-description {
  font-size: 1.2rem;
  line-height: 1.4;
  margin: 0;
  opacity: 0.8;
}

/* Badge style 4 */
.subscription__box--badge-style-4 {
  margin-top: calc(0.9em + 0.4rem);
}

.subscription__box--badge-style-4 .subscription__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  right: auto;
}

.subscription-widget--sub-first .subscription__box--badge-style-4 {
  margin-top: calc(0.9em + 0.4rem);
}
</style>