Delivery Box

<aside class="sl-delivery-box" style="padding:clamp(.85rem,2vw,1.25rem);color:inherit;font-family:inherit;border:1px solid currentColor;border-radius:.5rem;display:flex;align-items:center;gap:.85rem;max-width:480px;">
  <span aria-hidden="true" style="flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.5rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:1.4rem;">&#128666;</span>
  <div style="display:flex;flex-direction:column;gap:.2rem;min-width:0;">
    <strong style="font-size:.95rem;">{{ section.settings.title | default: 'Free Delivery and Returns' }}</strong>
    {%- assign min_days = section.settings.min_days | default: 2 -%}
    {%- assign max_days = section.settings.max_days | default: 5 -%}
    {%- assign now_ts = 'now' | date: '%s' | times: 1 -%}
    {%- assign min_sec = min_days | times: 86400 -%}
    {%- assign max_sec = max_days | times: 86400 -%}
    {%- assign min_ts = now_ts | plus: min_sec -%}
    {%- assign max_ts = now_ts | plus: max_sec -%}
    <p style="margin:0;font-size:.85rem;opacity:.85;">
      {{ section.settings.eta_label | default: 'Arrives in:' }}
      <time datetime="{{ min_ts | date: '%Y-%m-%d' }}" style="color:var(--sl-accent,#0a5cff);font-weight:600;">{{ min_ts | date: '%a, %b %e' }}</time>
      &ndash;
      <time datetime="{{ max_ts | date: '%Y-%m-%d' }}" style="color:var(--sl-accent,#0a5cff);font-weight:600;">{{ max_ts | date: '%a, %b %e' }}</time>
    </p>
    {%- if section.settings.subnote != blank -%}
      <span style="font-size:.75rem;opacity:.7;">{{ section.settings.subnote }}</span>
    {%- endif -%}
  </div>
</aside>
{% schema %}
{
  "name": "Delivery Box",
  "settings": [
    { "type": "text", "id": "title", "label": "Title", "default": "Free Delivery and Returns" },
    { "type": "text", "id": "eta_label", "label": "ETA label", "default": "Arrives in:" },
    { "type": "range", "id": "min_days", "label": "Min days", "min": 1, "max": 14, "step": 1, "default": 2 },
    { "type": "range", "id": "max_days", "label": "Max days", "min": 1, "max": 21, "step": 1, "default": 5 },
    { "type": "text", "id": "subnote", "label": "Subnote", "default": "Orders placed before 2pm ship today." }
  ],
  "presets": [{ "name": "Delivery Box" }]
}
{% endschema %}