Sticky Announcement With Icon

<aside class="sl-sticky-announce" aria-label="{{ section.settings.message | default: 'Announcement' }}" style="color:inherit;font-family:inherit;">
  <input type="checkbox" id="sl-sticky-dismiss" aria-label="Dismiss announcement" style="position:absolute;left:-9999px;" />
  <style>
    .sl-sticky-band { position:sticky; top:0; z-index:40; padding:.7rem 1rem; background: {{ section.settings.bg_color | default: 'var(--sl-accent,#0a5cff)' }}; color: {{ section.settings.text_color | default: '#fff' }}; font-size:.88rem; display:flex; gap:.75rem; align-items:center; justify-content:center; text-align:center; flex-wrap:wrap; transition: all .2s ease; }
    #sl-sticky-dismiss:checked ~ .sl-sticky-band { display: none; }
    .sl-sticky-close { margin-left:auto; background:transparent; border:0; color:inherit; font-size:1.15rem; cursor:pointer; opacity:.8; line-height:1; padding:.25rem .5rem; }
  </style>
  <div class="sl-sticky-band" role="status">
    <span aria-hidden="true" style="font-size:1.05rem;line-height:1;">{{ section.settings.icon | default: '✨' }}</span>
    <span style="font-weight:600;">{{ section.settings.message | default: 'New arrivals just dropped — shop the edit.' }}</span>
    {%- if section.settings.link_text != blank and section.settings.link != blank -%}
      <a href="{{ section.settings.link }}" style="color:inherit;text-decoration:underline;font-weight:700;">{{ section.settings.link_text }} &rarr;</a>
    {%- endif -%}
    {%- if section.settings.dismissible -%}
      <label for="sl-sticky-dismiss" class="sl-sticky-close" aria-label="Dismiss">&times;</label>
    {%- endif -%}
  </div>
</aside>
{% schema %}
{
  "name": "Sticky Announcement With Icon",
  "settings": [
    { "type": "text", "id": "icon", "label": "Leading icon (emoji)", "default": "✨" },
    { "type": "text", "id": "message", "label": "Message", "default": "New arrivals just dropped — shop the edit." },
    { "type": "text", "id": "link_text", "label": "Link text", "default": "Shop now" },
    { "type": "url", "id": "link", "label": "Link" },
    { "type": "checkbox", "id": "dismissible", "label": "Dismissible", "default": true },
    { "type": "color", "id": "bg_color", "label": "Background color" },
    { "type": "color", "id": "text_color", "label": "Text color" }
  ],
  "presets": [{ "name": "Sticky Announcement With Icon" }]
}
{% endschema %}