Free Shipping Bar

<aside class="sl-ship-bar" role="status" aria-live="polite" style="padding:.85rem 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};border-bottom:1px solid currentColor;">
  <div style="max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem;">
    {%- assign threshold_cents = section.settings.threshold_cents | default: 5000 | times: 1 -%}
    {%- assign cart_total = cart.total_price | default: 0 -%}
    {%- assign remaining = threshold_cents | minus: cart_total -%}
    {%- if remaining < 0 -%}{%- assign remaining = 0 -%}{%- endif -%}
    {%- assign pct = cart_total | times: 100.0 | divided_by: threshold_cents -%}
    {%- if pct > 100 -%}{%- assign pct = 100 -%}{%- endif -%}
    <p style="margin:0;font-size:clamp(.85rem,1.5vw,.95rem);display:flex;gap:.45rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;">
      <span aria-hidden="true" style="font-size:1.1rem;">{{ section.settings.icon | default: '🚚' }}</span>
      {%- if remaining <= 0 -%}
        <strong>{{ section.settings.success_message | default: 'You unlocked FREE shipping!' }}</strong>
      {%- else -%}
        <span>{{ section.settings.prefix | default: "You're" }} <strong style="color:var(--sl-accent,#0a5cff);">{{ remaining | money }}</strong> {{ section.settings.suffix | default: 'away from free shipping' }}</span>
      {%- endif -%}
    </p>
    <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ pct | round }}" aria-label="Free shipping progress" style="position:relative;width:100%;height:.5rem;background:rgba(127,127,127,.18);border-radius:999px;overflow:hidden;">
      <span aria-hidden="true" style="position:absolute;inset:0 auto 0 0;width:{{ pct }}%;background:var(--sl-accent,#0a5cff);border-radius:999px;transition:width .4s ease;"></span>
    </div>
  </div>
</aside>
{% schema %}
{
  "name": "Free Shipping Bar",
  "settings": [
    { "type": "text", "id": "icon", "label": "Icon (emoji)", "default": "🚚" },
    { "type": "text", "id": "prefix", "label": "Prefix", "default": "You're" },
    { "type": "text", "id": "suffix", "label": "Suffix", "default": "away from free shipping" },
    { "type": "text", "id": "success_message", "label": "Unlocked message", "default": "You unlocked FREE shipping!" },
    { "type": "number", "id": "threshold_cents", "label": "Threshold (in cents)", "default": 5000 },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Free Shipping Bar" }]
}
{% endschema %}