Free shipping progress

1{%- comment -%}2  Driven by cart.total_price, so the message is always accurate.3  Pass the free-shipping threshold in paise (49900 = Rs. 499).4{%- endcomment -%}5{%- assign goal = threshold | default: 49900 -%}6{%- assign total = cart.total_price | default: 0 -%}7{%- assign pct = total | times: 100 | divided_by: goal -%}8{%- if pct > 100 -%}{%- assign pct = 100 -%}{%- endif -%}9<div class="gpl-ship" style="--gpl-accent: {{ accent | default: 'rgb(var(--color-button, 21 128 61))' }};">10  {%- if total >= goal -%}11    <p class="gpl-ship__msg gpl-ship__msg--done">You have unlocked <strong>free shipping</strong></p>12  {%- else -%}13    <p class="gpl-ship__msg">Add <strong>{{ goal | minus: total | money }}</strong> more to unlock free shipping</p>14  {%- endif -%}15  <div class="gpl-ship__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ pct }}" aria-label="Progress to free shipping">16    <span class="gpl-ship__fill" style="width: {{ pct }}%;"></span>17  </div>18</div>19 20{% stylesheet %}21.gpl-ship { margin: 0.75rem 0; }22.gpl-ship__msg { margin: 0 0 0.45rem; font-size: 0.85rem; }23.gpl-ship__msg strong { color: var(--gpl-accent); }24.gpl-ship__msg--done { color: var(--gpl-accent); font-weight: 700; }25.gpl-ship__track {26  height: 0.5rem;27  border-radius: 999px;28  background: #e2e8f0;29  overflow: hidden;30}31.gpl-ship__fill {32  display: block;33  height: 100%;34  border-radius: 999px;35  background: linear-gradient(90deg, var(--gpl-accent), #34d399);36  box-shadow: 0 0 10px -2px var(--gpl-accent);37  transition: width 0.4s ease;38}39{% endstylesheet %}40