Pricing Comparison

<section class="sl-pricing" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <header style="max-width:720px;margin:0 auto 2rem;text-align:center;">
    {%- if section.settings.eyebrow != blank -%}
      <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
    {%- endif -%}
    <h2 style="margin:.25rem 0 .75rem;font-size:clamp(1.5rem,3.25vw,2.25rem);line-height:1.2;">{{ section.settings.heading }}</h2>
    {%- if section.settings.subheading != blank -%}
      <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
    {%- endif -%}
  </header>
  <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:1080px;margin:0 auto;align-items:stretch;">
    {%- for block in section.blocks -%}
      {%- assign highlight = block.settings.highlight -%}
      <article style="position:relative;border:{% if highlight %}2px{% else %}1px{% endif %} solid {% if highlight %}var(--sl-accent,#0a5cff){% else %}currentColor{% endif %};border-radius:.75rem;padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;background:transparent;{% if highlight %}box-shadow:0 8px 30px rgba(10,92,255,.12);{% endif %}" {{ block.shopify_attributes }}>
        {%- if highlight and block.settings.badge != blank -%}
          <span style="position:absolute;top:-.75rem;right:1rem;padding:.25rem .7rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;font-weight:700;">{{ block.settings.badge }}</span>
        {%- endif -%}
        <header>
          <h3 style="margin:0;font-size:1.25rem;line-height:1.2;">{{ block.settings.tier_name }}</h3>
          {%- if block.settings.description != blank -%}
            <p style="margin:.25rem 0 0;opacity:.75;font-size:.88rem;">{{ block.settings.description }}</p>
          {%- endif -%}
        </header>
        <p style="margin:0;display:flex;align-items:baseline;gap:.3rem;">
          <span style="font-size:2rem;font-weight:800;color:{% if highlight %}var(--sl-accent,#0a5cff){% else %}inherit{% endif %};line-height:1;">{{ block.settings.price }}</span>
          {%- if block.settings.price_period != blank -%}
            <span style="font-size:.85rem;opacity:.7;">{{ block.settings.price_period }}</span>
          {%- endif -%}
        </p>
        <ul style="list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.5;display:flex;flex-direction:column;gap:.45rem;">
          {%- assign features = block.settings.features | newline_to_br | split: '<br />' -%}
          {%- for f in features -%}
            {%- assign trimmed = f | strip -%}
            {%- if trimmed != blank -%}
              <li style="display:flex;gap:.5rem;align-items:flex-start;"><span aria-hidden="true" style="flex:0 0 auto;color:var(--sl-accent,#0a5cff);font-weight:700;">✓</span><span>{{ trimmed }}</span></li>
            {%- endif -%}
          {%- endfor -%}
        </ul>
        {%- if block.settings.cta_text != blank -%}
          <a href="{{ block.settings.cta_link | default: '#' }}" style="margin-top:auto;padding:.75rem 1rem;background:{% if highlight %}var(--sl-accent,#0a5cff){% else %}transparent{% endif %};color:{% if highlight %}#fff{% else %}inherit{% endif %};border:1px solid {% if highlight %}var(--sl-accent,#0a5cff){% else %}currentColor{% endif %};border-radius:.375rem;text-align:center;text-decoration:none;font-weight:700;font-family:inherit;">{{ block.settings.cta_text }}</a>
        {%- endif -%}
      </article>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Pricing Comparison",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Membership" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Choose the plan that fits" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Switch or cancel anytime. All plans include free US shipping and 30-day returns." }
  ],
  "blocks": [
    {
      "type": "tier",
      "name": "Tier",
      "settings": [
        { "type": "text", "id": "tier_name", "label": "Tier name", "default": "Starter" },
        { "type": "text", "id": "price", "label": "Price", "default": "$19" },
        { "type": "text", "id": "price_period", "label": "Price period", "default": "/mo" },
        { "type": "text", "id": "description", "label": "Short description", "default": "For getting started." },
        { "type": "textarea", "id": "features", "label": "Features (one per line)", "default": "1 shipment per month\nFree shipping over $60\nEmail support" },
        { "type": "checkbox", "id": "highlight", "label": "Highlighted tier", "default": false },
        { "type": "text", "id": "badge", "label": "Highlight badge", "default": "Most popular" },
        { "type": "text", "id": "cta_text", "label": "Button text", "default": "Choose plan" },
        { "type": "url", "id": "cta_link", "label": "Button link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Pricing Comparison",
      "blocks": [
        { "type": "tier", "settings": { "tier_name": "Starter", "price": "$19", "price_period": "/mo", "description": "For the casual shopper.", "features": "1 shipment per month\nFree US shipping over $60\nEmail support", "cta_text": "Choose Starter" } },
        { "type": "tier", "settings": { "tier_name": "Club", "price": "$39", "price_period": "/mo", "description": "Our most-loved tier.", "features": "2 shipments per month\nFree US shipping on every order\nPriority support\n10% off a la carte items\nEarly access to drops", "highlight": true, "badge": "Most popular", "cta_text": "Choose Club" } },
        { "type": "tier", "settings": { "tier_name": "Atelier", "price": "$79", "price_period": "/mo", "description": "For the true collector.", "features": "4 shipments per month\nFree worldwide shipping\n24/7 concierge support\n20% off a la carte items\nExclusive capsule collections", "cta_text": "Choose Atelier" } }
      ]
    }
  ]
}
{% endschema %}