Gift Bar

<aside class="sl-gift-bar" role="status" style="padding:.75rem 1rem;color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};border-top:1px solid currentColor;border-bottom:1px solid currentColor;display:flex;gap:.75rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;font-size:clamp(.85rem,1.4vw,1rem);">
  <style>
    @keyframes sl-gift-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .5; } }
    .sl-gift-dot-anim { animation: sl-gift-dot 1.2s ease-in-out infinite; }
  </style>
  <span aria-hidden="true" class="sl-gift-dot-anim" style="display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--sl-accent,#0a5cff);flex:0 0 auto;"></span>
  <span aria-hidden="true" style="font-size:1.15rem;">&#127873;</span>
  {%- assign days = section.settings.days_ahead | default: 7 -%}
  {%- assign secs = days | times: 86400 -%}
  {%- assign deadline_ts = 'now' | date: '%s' | plus: secs -%}
  <span>
    {{ section.settings.prefix | default: 'Order by' }}
    <strong style="color:var(--sl-accent,#0a5cff);"><time datetime="{{ deadline_ts | date: '%Y-%m-%d' }}">{{ deadline_ts | date: '%a, %B %e' }}</time></strong>
    {{ section.settings.suffix | default: 'for guaranteed FREE GIFTS' }}
  </span>
  {%- if section.settings.cta_text != blank -%}
    <a href="{{ section.settings.cta_link | default: '#' }}" style="padding:.35rem .85rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;text-decoration:none;font-size:.8rem;font-weight:700;">{{ section.settings.cta_text }}</a>
  {%- endif -%}
</aside>
{% schema %}
{
  "name": "Gift Bar",
  "settings": [
    { "type": "text", "id": "prefix", "label": "Prefix text", "default": "Order by" },
    { "type": "text", "id": "suffix", "label": "Suffix text", "default": "for guaranteed FREE GIFTS" },
    { "type": "range", "id": "days_ahead", "label": "Days ahead", "min": 1, "max": 30, "step": 1, "default": 7 },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Shop now" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Gift Bar" }]
}
{% endschema %}