Trending Now Rail

<section class="sl-trending" style="padding:clamp(40px,6vw,72px) clamp(1rem,3vw,2rem);color:inherit;font-family:inherit;">
  <div style="max-width:1400px;margin:0 auto;">
    <header style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;margin:0 0 1.5rem;">
      <div>
        <span style="display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:800;"><span aria-hidden="true">🔥</span>{{ section.settings.eyebrow | default: 'Trending this week' }}</span>
        <h2 style="margin:.4rem 0 0;font-size:clamp(1.5rem,3vw,2.25rem);font-family:inherit;line-height:1.15;">{{ section.settings.heading | default: 'Trending now' }}</h2>
      </div>
      {%- if section.settings.cta_link != blank -%}
        <a href="{{ section.settings.cta_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;border-bottom:1px solid var(--sl-accent,#0a5cff);font-weight:600;font-size:.9rem;">{{ section.settings.cta_text | default: 'See everything' }} &rarr;</a>
      {%- endif -%}
    </header>
    <div role="list" style="display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem;scrollbar-width:thin;">
      {%- assign coll = collections[section.settings.collection] -%}
      {%- if coll.products.size > 0 -%}
        {%- for product in coll.products limit: 8 -%}
          <article role="listitem" style="position:relative;scroll-snap-align:start;flex:0 0 clamp(200px,40vw,280px);display:flex;flex-direction:column;gap:.5rem;">
            <span aria-hidden="true" style="position:absolute;top:.5rem;left:.5rem;z-index:1;min-width:1.8rem;height:1.8rem;padding:0 .55rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;">#{{ forloop.index }}</span>
            {%- if product.compare_at_price > product.price -%}
              <span style="position:absolute;top:.5rem;right:.5rem;z-index:1;padding:.25rem .55rem;background:#111;color:#fff;border-radius:.25rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;">Sale</span>
            {%- endif -%}
            <a href="{{ product.url }}" style="color:inherit;text-decoration:none;">
              <img src="{{ product.featured_image | image_url: width: 600 | default: 'https://picsum.photos/seed/trn/600/750' }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.5rem;display:block;" />
            </a>
            <h3 style="margin:0;font-size:.95rem;font-weight:600;line-height:1.3;"><a href="{{ product.url }}" style="color:inherit;text-decoration:none;">{{ product.title }}</a></h3>
            <p style="margin:0;font-size:.9rem;"><span style="color:var(--sl-accent,#0a5cff);font-weight:700;">{{ product.price | money }}</span>{%- if product.compare_at_price > product.price -%} <s style="opacity:.5;margin-left:.3rem;">{{ product.compare_at_price | money }}</s>{%- endif -%}</p>
          </article>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..6) -%}
          <article role="listitem" style="position:relative;scroll-snap-align:start;flex:0 0 clamp(200px,40vw,280px);display:flex;flex-direction:column;gap:.5rem;">
            <span aria-hidden="true" style="position:absolute;top:.5rem;left:.5rem;z-index:1;min-width:1.8rem;height:1.8rem;padding:0 .55rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;">#{{ i }}</span>
            <img src="https://picsum.photos/seed/trn{{ i }}/600/750" alt="{{ section.settings.placeholder_alt | default: 'Trending product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.5rem;display:block;" />
            <h3 style="margin:0;font-size:.95rem;font-weight:600;line-height:1.3;">Trending product {{ i }}</h3>
            <p style="margin:0;font-size:.9rem;"><span style="color:var(--sl-accent,#0a5cff);font-weight:700;">$29.00</span> <s style="opacity:.5;margin-left:.3rem;">$39.00</s></p>
          </article>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Trending Now Rail",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Trending this week" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Trending now" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "text", "id": "cta_text", "label": "Link text", "default": "See everything" },
    { "type": "url", "id": "cta_link", "label": "Link URL" },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Trending product placeholder" }
  ],
  "presets": [{ "name": "Trending Now Rail" }]
}
{% endschema %}