/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 19:1 Expected identifier but found "%"
Line 21:5 Unexpected "1"
Line 24:4 Unexpected "{"
Line 24:13 Expected ":"
Line 28:0 Unexpected "<"
Line 37:3 Expected identifier but found "%"
Line 38:4 Unexpected "<"
Line 39:37 Unexpected "{"
... and 33 more hidden warnings

**/
{%- comment -%}
  section-featured-collection.liquid
  Featured Collection section with logo-overlay via JS
{%- endcomment -%}

<!-- 1) Inline CSS so Shopify interpolates the asset_url correctly -->
<style>
  /* Ensure each image wrapper can host an overlay */
  #{{ section.id }} .product-media-container {
    position: relative;
    overflow: hidden;
  }
</style>

<!-- 2) Section wrapper -->
<section
  id="{{ section.id }}"
  class="collection section-{{ section.id }} featured-collection"
  data-section-type="featured-collection"
  data-section-id="{{ section.id }}"
>
  {%- if section.settings.title != blank -%}
    <header class="collection__header">
      <h2 class="collection__title">{{ section.settings.title }}</h2>
      {%- if section.settings.description != blank -%}
        <p class="collection__description">{{ section.settings.description }}</p>
      {%- endif -%}
    </header>
  {%- endif -%}

  <!-- 3) Your existing slider-component -->
  <slider-component
    class="slider slider--mobile-gutter page-width page-width-desktop scroll-trigger animate--slide-in"
  >
    {% for product in collection.products %}
      <div class="slider__slide">
        <!-- Wrap the media in our positioning container -->
        <div class="product-media-container">
          <a href="{{ product.url }}" class="product-media-link">
            <img
              src="{{ product.featured_image | img_url: '600x' }}"
              alt="{{ product.title }}"
              class="product-media-image"
            />
          </a>
        </div>

        <!-- Preserve the rest of your card markup -->
        <div class="product-info">
          <h3 class="product-title">
            <a href="{{ product.url }}">{{ product.title }}</a>
          </h3>
          <span class="product-price">{{ product.price | money }}</span>
        </div>
      </div>
    {% endfor %}
  </slider-component>

  {%- if section.settings.show_view_all -%}
    <div class="view-all">
      <a href="{{ collection.url }}" class="btn">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</section>

<!-- 4) JS to append the overlay to each image -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var imgs = document.querySelectorAll('#{{ section.id }} img.product-media-image');
    imgs.forEach(function(img) {
      var wrapper = img.parentElement;
      if (getComputedStyle(wrapper).position === 'static') {
        wrapper.style.position = 'relative';
        wrapper.style.overflow = 'hidden';
      }
      if (wrapper.querySelector('.js-logo-overlay')) return;
      var overlay = document.createElement('img');
      overlay.className = 'js-logo-overlay';
      overlay.src       = '{{ "logo-overlay.png" | asset_url }}';
      overlay.alt       = 'Logo overlay';
      overlay.style.cssText = [
        'position:absolute',
        'top:50%',
        'right:10px',
        'transform:translateY(-50%)',
        'width:50px',
        'opacity:0.75',
        'pointer-events:none',
        'z-index:2'
      ].join(';');
      wrapper.appendChild(overlay);
    });
  });
</script>

{% schema %}
{
  "name": "Featured Collection",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section title",
      "default": "Newly Forged"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Section description",
      "default": "Fresh from the fire. Inked, cursed, and ready to wear"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Show \"View all\" button",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Featured Collection",
      "category": "Collection"
    }
  ],
  "blocks": [],
  "max_blocks": 0
}
{% endschema %}