Cart Drawer Teaser

<aside class="sl-cart-teaser" aria-label="{{ section.settings.heading | default: 'Recently added' }}" style="padding:clamp(.9rem,2vw,1.1rem);color:inherit;font-family:inherit;border:1px solid currentColor;border-radius:.5rem;background:{{ section.settings.bg_color | default: 'transparent' }};display:flex;flex-direction:column;gap:.75rem;">
  <header style="display:flex;align-items:center;justify-content:space-between;gap:.5rem;">
    <strong style="font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;">{{ section.settings.heading | default: 'Recently added' }}</strong>
    {%- if cart.item_count > 0 -%}
      <span aria-label="Items in cart" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .4rem;border-radius:999px;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.7rem;font-weight:700;">{{ cart.item_count }}</span>
    {%- endif -%}
  </header>
  {%- assign item = cart.items.last -%}
  {%- if item -%}
    <article style="display:flex;gap:.75rem;align-items:center;">
      <img src="{{ item.image | image_url: width: 160 | default: 'https://picsum.photos/seed/cart-teaser/160/160' }}" alt="{{ item.product.title }}" loading="lazy" style="width:3.5rem;height:3.5rem;border-radius:.375rem;object-fit:cover;flex:0 0 auto;" />
      <div style="display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1;">
        <a href="{{ item.url }}" style="color:inherit;text-decoration:none;font-weight:600;font-size:.92rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ item.product.title }}</a>
        <span style="font-size:.78rem;opacity:.75;">Qty {{ item.quantity }} · <strong style="color:var(--sl-accent,#0a5cff);">{{ item.final_line_price | money }}</strong></span>
      </div>
      <a href="/cart/change?line={{ item.index | plus: 1 }}&quantity=0" aria-label="Remove {{ item.product.title }}" style="color:inherit;opacity:.55;text-decoration:none;font-size:1.15rem;line-height:1;padding:.25rem;">&times;</a>
    </article>
  {%- else -%}
    <article style="display:flex;gap:.75rem;align-items:center;opacity:.7;">
      <span aria-hidden="true" style="width:3.5rem;height:3.5rem;border-radius:.375rem;background:rgba(127,127,127,.12);display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;">🛍️</span>
      <div style="display:flex;flex-direction:column;gap:.15rem;">
        <span style="font-weight:600;font-size:.92rem;">{{ section.settings.empty_title | default: 'Your cart is empty' }}</span>
        <span style="font-size:.78rem;opacity:.8;">{{ section.settings.empty_sub | default: 'Add something and it will show up here.' }}</span>
      </div>
    </article>
  {%- endif -%}
  {%- if section.settings.cta_text != blank -%}
    <a href="{{ section.settings.cta_link | default: '/cart' }}" style="display:block;padding:.65rem;background:var(--sl-accent,#0a5cff);color:#fff;text-align:center;border-radius:.375rem;text-decoration:none;font-weight:700;font-size:.9rem;">{{ section.settings.cta_text }}</a>
  {%- endif -%}
</aside>
{% schema %}
{
  "name": "Cart Drawer Teaser",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Recently added" },
    { "type": "text", "id": "empty_title", "label": "Empty state title", "default": "Your cart is empty" },
    { "type": "text", "id": "empty_sub", "label": "Empty state subtitle", "default": "Add something and it will show up here." },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "View cart" },
    { "type": "url", "id": "cta_link", "label": "Button link" },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Cart Drawer Teaser" }]
}
{% endschema %}