Subscribe & Save Toggle

<fieldset class="sl-subscribe-save" style="border:1px solid currentColor;border-radius:.5rem;padding:clamp(.85rem,2vw,1.1rem);color:inherit;font-family:inherit;display:flex;flex-direction:column;gap:.65rem;">
  <legend style="padding:0 .4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:700;">{{ section.settings.heading | default: 'Purchase options' }}</legend>
  <style>
    .sl-sub-opt { display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;border:1px solid currentColor;border-radius:.5rem;cursor:pointer;transition:border-color .15s ease;}
    .sl-sub-opt:has(input:checked) { border-color: var(--sl-accent,#0a5cff); background: rgba(10,92,255,.04); }
    .sl-sub-opt input[type="radio"] { accent-color: var(--sl-accent,#0a5cff); margin-top:.2rem; }
  </style>
  <label class="sl-sub-opt">
    <input type="radio" name="selling_plan" value="" checked />
    <span style="display:flex;flex-direction:column;gap:.2rem;flex:1;">
      <span style="display:flex;justify-content:space-between;gap:.5rem;align-items:center;"><strong>{{ section.settings.onetime_label | default: 'One-time purchase' }}</strong><span style="font-weight:700;">{{ product.price | default: 2900 | money }}</span></span>
      <small style="opacity:.7;">{{ section.settings.onetime_note | default: 'Pay once — no commitment.' }}</small>
    </span>
  </label>
  {%- assign discount = section.settings.discount_percent | default: 15 -%}
  {%- assign interval = section.settings.interval_weeks | default: 4 -%}
  {%- if product.selling_plan_groups.first.selling_plans.size > 0 -%}
    {%- for plan in product.selling_plan_groups.first.selling_plans -%}
      <label class="sl-sub-opt" {% if forloop.first %}{% endif %}>
        <input type="radio" name="selling_plan" value="{{ plan.id }}" />
        <span style="display:flex;flex-direction:column;gap:.2rem;flex:1;">
          <span style="display:flex;justify-content:space-between;gap:.5rem;align-items:center;flex-wrap:wrap;"><strong>{{ plan.name }}</strong><span style="display:inline-flex;align-items:center;gap:.4rem;"><span style="padding:.15rem .45rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;">Save {{ discount }}%</span><span style="font-weight:700;">{{ product.price | default: 2900 | times: 100 | minus: discount | divided_by: 100 | times: product.price | default: 2900 | divided_by: 100 | money }}</span></span></span>
          <small style="opacity:.7;">{{ section.settings.subscribe_note | default: 'Skip or cancel anytime.' }}</small>
        </span>
      </label>
    {%- endfor -%}
  {%- else -%}
    <label class="sl-sub-opt">
      <input type="radio" name="selling_plan" value="subscribe" />
      <span style="display:flex;flex-direction:column;gap:.2rem;flex:1;">
        <span style="display:flex;justify-content:space-between;gap:.5rem;align-items:center;flex-wrap:wrap;"><strong>{{ section.settings.subscribe_label | default: 'Subscribe & Save' }} — every {{ interval }} weeks</strong><span style="display:inline-flex;align-items:center;gap:.4rem;"><span style="padding:.15rem .45rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.05em;">Save {{ discount }}%</span></span></span>
        <small style="opacity:.7;">{{ section.settings.subscribe_note | default: 'Skip or cancel anytime.' }}</small>
      </span>
    </label>
  {%- endif -%}
</fieldset>
{% schema %}
{
  "name": "Subscribe & Save Toggle",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Purchase options" },
    { "type": "text", "id": "onetime_label", "label": "One-time label", "default": "One-time purchase" },
    { "type": "text", "id": "onetime_note", "label": "One-time note", "default": "Pay once — no commitment." },
    { "type": "text", "id": "subscribe_label", "label": "Subscribe label", "default": "Subscribe & Save" },
    { "type": "text", "id": "subscribe_note", "label": "Subscribe note", "default": "Skip or cancel anytime." },
    { "type": "range", "id": "discount_percent", "label": "Discount %", "min": 0, "max": 40, "step": 1, "default": 15 },
    { "type": "range", "id": "interval_weeks", "label": "Interval (weeks)", "min": 1, "max": 12, "step": 1, "default": 4 }
  ],
  "presets": [{ "name": "Subscribe & Save Toggle" }]
}
{% endschema %}