/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:46 Unexpected "("
Line 18:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
Line 38:0 Unexpected "<"
Line 40:11 Unterminated string token
Line 42:13 Unexpected "{"
Line 42:25 Expected ":"
... and 84 more hidden warnings

**/
{% comment %}
  Renders a collection card with image slider (up to 5 images from first product)
{% endcomment %}

{%- liquid
  assign ratio = 1
  if card_collection.featured_image and media_aspect_ratio == 'portrait'
    assign ratio = 0.8
  elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
    assign ratio = card_collection.featured_image.aspect_ratio
  endif
  if ratio == 0 or ratio == null
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == null or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif
-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
  <div
    class="
      card
      card--{{ card_style }}
      {% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
      {% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
      {% if extend_height %} card--extend-height{% endif %}
      {% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}
    "
    style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
  >
    <div
      class="lumin-collection-card-{{ section.id }} card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or card_style == 'standard' %} ratio{% endif %}"
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      {%- if card_collection.featured_image -%}
        {% assign first_product = card_collection.products.first %}
        {% assign imgs = first_product.images %}
        <div class="collection-slider" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
             data-images='[
               {% for img in imgs limit:5 %}
                 "{{ img | img_url: media_size }}"{% unless forloop.last %},{% endunless %}
               {% endfor %}
             ]'>
          <img src="{{ imgs[0] | img_url: media_size }}" alt="{{ card_collection.title }}" loading="lazy">
        </div>
      {%- endif -%}

      {%- if card_collection == blank -%}
        <div class="card__media">
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading{% if section.settings.subtitle_center %} text-center{% endif %}">
              <a role="link" aria-disabled="true" class="full-unstyled-link">
                {{ 'onboarding.collection_title' | t }}
              </a>
            </h3>
          </div>
        </div>
      {%- endif -%}
    </div>

    {%- if card_collection != blank and card_style == 'card' or card_collection.featured_image -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if section.settings.subtitle_center %} text-center{% endif %}">
            <a href="{{ card_collection.url }}" class="full-unstyled-link">
              {{- card_collection.title | escape -}}
              {% if section.settings.show_arrow %}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
            </a>
          </h3>
          {%- if card_collection.featured_image == null and card_collection.description != blank -%}
            <p class="card__caption">
              {{- card_collection.description | strip_html | truncatewords: 12 -}}
              {% if section.settings.show_arrow %}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
            </p>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}

    {%- if card_collection == blank -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if section.settings.subtitle_center %} text-center{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.collection_title' | t }}
              {% if section.settings.show_arrow %}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
            </a>
          </h3>
        </div>
      </div>
    {%- endif -%}
  </div>
</div>
/* === Début du slider image pour collection === */
.collection-slider {
  position: relative;
  width: 100%;
  padding-top: var(--ratio-percent, 100%);
  overflow: hidden;
}

.collection-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.6s ease-in-out;
}

.collection-slider img.fade {
  opacity: 0;
}
/* === Fin du slider image pour collection === */