/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'collection-hero-banner.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 22:45 Unterminated string token
Line 55:0 Unexpected "{"
Line 55:1 Expected identifier but found "%"
Line 56:2 Unexpected "<"
Line 59:11 Unterminated string token
... and 43 more hidden warnings

**/
{{ 'collection-hero-banner.css' | asset_url | stylesheet_tag }}

{%- liquid
  # =============================================
  # PRIORITY ORDER FOR BANNER IMAGE:
  # 1. Collection metafield: custom.banner_image (unique per collection)
  # 2. Collection's featured image (fallback)
  # =============================================

  assign show_border_radius = section.settings.show_border_radius
  assign max_height = section.settings.max_height
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom

  # 1. Check metafield banner (unique per collection)
  assign meta_banner = collection.metafields.custom.desktop_banner.value
  assign meta_mobile_banner = collection.metafields.custom.mobile_banner.value
  assign banner_alt = collection.title | append: ' Banner'

  assign has_meta_image = false
  if meta_banner != blank
    assign has_meta_image = true
  endif

  # 2. Check collection featured image (fallback)
  assign has_collection_image = false
  if collection.image != blank
    assign has_collection_image = true
  endif

  # Decide if we should show the banner
  assign show_banner = false
  if has_meta_image
    assign show_banner = true
  elsif section.settings.fallback_to_collection_image and has_collection_image
    assign show_banner = true
  endif
-%}

{%- if show_banner -%}
  <div
    id="CollectionHeroBanner-{{ section.id }}"
    class="collection-hero-banner{% if show_border_radius %} collection-hero-banner--rounded{% endif %}"
    style="
      --banner-padding-top: {{ padding_top }}px;
      --banner-padding-bottom: {{ padding_bottom }}px;
      {% if max_height > 0 %}--banner-max-height: {{ max_height }}px;{% endif %}
    "
  >
    <picture class="collection-hero-banner__picture">

      {%- if has_meta_image -%}
        {%- comment -%} Banner from collection metafield (unique per collection) {%- endcomment -%}

        {%- if meta_mobile_banner != blank -%}
          <source
            srcset="{{ meta_mobile_banner | image_url: width: 768 }}"
            media="(max-width: 749px)"
          >
        {%- else -%}
          <source
            srcset="{{ meta_banner | image_url: width: 768 }}"
            media="(max-width: 749px)"
          >
        {%- endif -%}

        <source
          srcset="{{ meta_banner | image_url: width: 1440 }}"
          media="(min-width: 750px)"
        >

        <img
          src="{{ meta_banner | image_url: width: 1440 }}"
          alt="{{ banner_alt | escape }}"
          width="{{ meta_banner.width }}"
          height="{{ meta_banner.height }}"
          loading="eager"
          fetchpriority="high"
          class="collection-hero-banner__image"
        >

      {%- elsif section.settings.fallback_to_collection_image and has_collection_image -%}
        {%- comment -%} Fallback: collection's featured image {%- endcomment -%}

        <source
          srcset="{{ collection.image | image_url: width: 768 }}"
          media="(max-width: 749px)"
        >
        <source
          srcset="{{ collection.image | image_url: width: 1440 }}"
          media="(min-width: 750px)"
        >

        <img
          src="{{ collection.image | image_url: width: 1440 }}"
          alt="{{ collection.image.alt | default: collection.title | escape }}"
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
          loading="eager"
          fetchpriority="high"
          class="collection-hero-banner__image"
        >
      {%- endif -%}

    </picture>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Collection Hero Banner",
  "tag": "section",
  "class": "shopify-section collection-hero-banner-section",
  "limit": 1,
  "enabled_on": {
    "templates": ["collection"]
  },
  "settings": [
    {
      "type": "paragraph",
      "content": "⚡ Banner images are set PER COLLECTION using metafields. Go to: Shopify Admin → Products → Collections → select a collection → scroll to Metafields → upload a Banner Image."
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "checkbox",
      "id": "show_border_radius",
      "label": "Show rounded corners",
      "default": true,
      "info": "Adds 15px rounded corners to the banner image."
    },
    {
      "type": "checkbox",
      "id": "fallback_to_collection_image",
      "label": "Use collection image as fallback",
      "default": true,
      "info": "If no metafield banner is set, show the collection's featured image."
    },
    {
      "type": "range",
      "id": "max_height",
      "label": "Max banner height (px)",
      "min": 0,
      "max": 800,
      "step": 50,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 for auto height (image's natural aspect ratio)."
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top padding",
      "min": 0,
      "max": 60,
      "step": 4,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Bottom padding",
      "min": 0,
      "max": 60,
      "step": 4,
      "default": 20,
      "unit": "px"
    }
  ],
  "presets": [
    {
      "name": "Collection Hero Banner"
    }
  ]
}
{% endschema %}