/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 16:48 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-collection-hero.css'"
Line 18:0 Unexpected "<"
Line 19:3 Expected identifier but found "%"
Line 19:30 Expected identifier but found "%"
Line 20:2 Unexpected "<"
... and 63 more hidden warnings

**/
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
<div class="collection-hero color-{{ section.settings.color_scheme }} gradient">
  {%- comment -%} Breadcrumb {%- endcomment -%}
  <div class="collection-hero__breadcrumb page-width">
    <nav class="breadcrumb" aria-label="breadcrumb">
      <a href="{{ routes.root_url }}">Home</a>
      <span aria-hidden="true"> / </span>
      <a href="{{ routes.collections_url }}">Shop</a>
      <span aria-hidden="true"> / </span>
      <span>{{ collection.title }}</span>
    </nav>
  </div>
  {%- if section.settings.show_collection_image and collection.image -%}
    <div class="collection-hero__inner page-width">
      <div class="collection-hero__image-container media gradient">
        <img
          srcset="
            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
            {%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
            {%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {{ collection.image | image_url }} {{ collection.image.width }}w
          "
          src="{{ collection.image | image_url: width: 750 }}"
          sizes="100vw"
          alt="{{ collection.image.alt | escape }}"
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
          loading="eager"
        >
      </div>
    </div>
  {%- endif -%}
</div>
<style>
  .collection-hero__breadcrumb {
    padding: 1.2rem 1.5rem;
  }
  @media screen and (min-width: 750px) {
    .collection-hero__breadcrumb {
      padding: 1.2rem 5rem;
    }
  }
  @media screen and (min-width: 990px) {
    .collection-hero__breadcrumb {
      padding: 1.2rem 4.5rem;
    }
  }
  .breadcrumb {
    font-family: var(--font-body-family);
    font-size: 1.2rem;
    color: rgba(var(--color-foreground), 0.6);
    letter-spacing: 0.04em;
  }
  .breadcrumb a {
    color: rgba(var(--color-foreground), 0.6);
    text-decoration: none;
    text-transform: uppercase;
  }
  .breadcrumb a:hover {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
  }
  .breadcrumb span:last-child {
    color: rgb(var(--color-foreground));
    text-transform: uppercase;
  }

  /* --- Fix: image should not crop, keep full ratio + rounded corners --- */
  .collection-hero__inner {
    padding-top: 0;
    padding-bottom: 0;
  }
  .collection-hero__image-container {
    border-radius: 1.6rem;
    overflow: hidden;
    /* remove any fixed/aspect-ratio height forcing crop */
    height: auto !important;
    aspect-ratio: unset !important;
    padding-bottom: 0 !important;
  }
  .collection-hero__image-container img {
    position: static !important;   /* undo absolute positioning that causes cover-crop */
    width: 100%;
    height: auto !important;
    object-fit: contain;           /* show full image, no cropping */
    display: block;
    border-radius: 1.6rem;
  }
</style>
{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    }
  ]
}
{% endschema %}