{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Collection banner: the header of a collection page. Collection title, description, product count
  and an optional breadcrumb, over the collection's image or beside it, or as text only. On a
  collection template it reads the page's collection; elsewhere it uses the collection picked in
  the settings. The collection image can be replaced, with a separate mobile image. No JavaScript.
  Depends on: snippets/lib-image.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign c = s.collection
  if c == blank
    assign c = collection
  endif
  assign heading_tag = s.heading_tag | default: 'h1'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif

  assign img = s.image
  if img == blank and s.use_collection_image
    assign img = c.image
  endif
  assign layout = s.layout
  if img == blank and s.image_mobile == blank and request.design_mode == false
    assign layout = 'text'
  endif

  assign title = c.title
  if title == blank
    assign title = s.placeholder_title
  endif
-%}

{%- if c != blank or request.design_mode -%}
  <div
    class="lib-collection-banner lib-collection-banner--{{ s.section_width }}"
    {% if s.anchor_id != blank %}
      id="{{ s.anchor_id | handleize }}"
    {% endif %}
    data-show="{{ s.show_on }}"
    data-layout="{{ layout }}"
    data-height="{{ s.height }}"
    data-image-position="{{ s.image_position }}"
    data-pos="{{ s.content_position }}"
    data-pos-m="{{ s.content_position_mobile }}"
    {% if s.animate %}
      data-animate
    {% endif %}
    style="
      --lib-bg: {{ s.color_bg }};
      {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
      --lib-text: {{ s.color_text }};
      --lib-overlay-text: {{ s.color_overlay_text }};
      --lib-accent: {{ s.color_accent }};
      --lib-overlay: {{ s.overlay_opacity | divided_by: 100.0 }};
      --lib-pt: {{ s.padding_top }}px;
      --lib-pb: {{ s.padding_bottom }}px;
      --lib-pt-m: {{ s.padding_top_mobile }}px;
      --lib-pb-m: {{ s.padding_bottom_mobile }}px;
    "
  >
    <div class="lib-collection-banner__inner">
      {%- if layout != 'text' -%}
        <div class="lib-collection-banner__media">
          {%- render 'lib-image',
            image: img,
            image_mobile: s.image_mobile,
            class: 'lib-collection-banner__img',
            sizes: '100vw',
            eager: eager,
            placeholder: 'collection-1'
          -%}
        </div>
      {%- endif -%}

      <div class="lib-collection-banner__content">
        <div class="lib-collection-banner__copy" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
          {%- if s.show_breadcrumb -%}
            <nav class="lib-collection-banner__crumbs" aria-label="{{ s.breadcrumb_label | escape }}">
              <ol role="list">
                <li><a href="{{ routes.root_url }}">{{ s.breadcrumb_home | escape }}</a></li>
                <li><span aria-current="page">{{ title | escape }}</span></li>
              </ol>
            </nav>
          {%- endif -%}

          <{{ heading_tag }} class="lib-collection-banner__heading lib-collection-banner__heading--{{ s.heading_size }}">
            {{- title | escape -}}
          </{{ heading_tag }}>

          {%- if s.show_count and c != blank -%}
            {%- assign count = c.products_count -%}
            <p class="lib-collection-banner__count">
              {{ count }}
              {% if count == 1 %}{{ s.count_singular | escape }}{% else %}{{ s.count_plural | escape }}{% endif %}
            </p>
          {%- endif -%}

          {%- if s.show_description -%}
            {%- if c.description != blank -%}
              <div class="lib-collection-banner__text">{{ c.description }}</div>
            {%- elsif c == blank -%}
              <div class="lib-collection-banner__text"><p>{{ s.placeholder_text | escape }}</p></div>
            {%- endif -%}
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- endif -%}

{% stylesheet %}
  .lib-collection-banner {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-collection-banner__inner { position: relative; max-width: 1200px; margin: 0 auto; }
  .lib-collection-banner--full { padding-left: 0; padding-right: 0; }
  .lib-collection-banner--full .lib-collection-banner__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-collection-banner { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-collection-banner[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-collection-banner[data-show='mobile'] { display: none; }
  }

  .lib-collection-banner__media { position: relative; overflow: hidden; background: color-mix(in srgb, var(--lib-text) 8%, transparent); }
  .lib-collection-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  svg.lib-collection-banner__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }

  /* Overlay: text over the image, at one of nine positions per device. */
  .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__inner {
    display: grid;
    min-height: var(--lib-h);
    overflow: hidden;
    --lib-h: 26rem;
  }
  .lib-collection-banner--page[data-layout='overlay'] .lib-collection-banner__inner { border-radius: 16px; }
  .lib-collection-banner[data-layout='overlay'][data-height='small'] .lib-collection-banner__inner { --lib-h: 18rem; }
  .lib-collection-banner[data-layout='overlay'][data-height='large'] .lib-collection-banner__inner { --lib-h: 36rem; }
  @media (max-width: 749px) {
    .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__inner { --lib-h: 20rem; }
    .lib-collection-banner[data-layout='overlay'][data-height='small'] .lib-collection-banner__inner { --lib-h: 14rem; }
    .lib-collection-banner[data-layout='overlay'][data-height='large'] .lib-collection-banner__inner { --lib-h: 28rem; }
  }
  .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__media,
  .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__content { grid-area: 1 / 1; }
  .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / var(--lib-overlay));
  }
  .lib-collection-banner[data-layout='overlay'] .lib-collection-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    color: var(--lib-overlay-text);
  }
  .lib-collection-banner[data-layout='overlay'][data-pos$='left'] .lib-collection-banner__content { justify-content: flex-start; }
  .lib-collection-banner[data-layout='overlay'][data-pos$='center'] .lib-collection-banner__content { justify-content: center; }
  .lib-collection-banner[data-layout='overlay'][data-pos$='right'] .lib-collection-banner__content { justify-content: flex-end; }
  .lib-collection-banner[data-layout='overlay'][data-pos^='top'] .lib-collection-banner__content { align-items: flex-start; }
  .lib-collection-banner[data-layout='overlay'][data-pos^='middle'] .lib-collection-banner__content { align-items: center; }
  .lib-collection-banner[data-layout='overlay'][data-pos^='bottom'] .lib-collection-banner__content { align-items: flex-end; }
  @media (max-width: 749px) {
    .lib-collection-banner[data-layout='overlay'][data-pos-m$='left'] .lib-collection-banner__content { justify-content: flex-start; }
    .lib-collection-banner[data-layout='overlay'][data-pos-m$='center'] .lib-collection-banner__content { justify-content: center; }
    .lib-collection-banner[data-layout='overlay'][data-pos-m$='right'] .lib-collection-banner__content { justify-content: flex-end; }
    .lib-collection-banner[data-layout='overlay'][data-pos-m^='top'] .lib-collection-banner__content { align-items: flex-start; }
    .lib-collection-banner[data-layout='overlay'][data-pos-m^='middle'] .lib-collection-banner__content { align-items: center; }
    .lib-collection-banner[data-layout='overlay'][data-pos-m^='bottom'] .lib-collection-banner__content { align-items: flex-end; }
  }

  /* Split: image on one side, text on the other; stacked on mobile, image first. */
  .lib-collection-banner[data-layout='split'] .lib-collection-banner__inner { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .lib-collection-banner[data-layout='split'] .lib-collection-banner__media { aspect-ratio: 4 / 3; border-radius: 16px; }
  .lib-collection-banner--full[data-layout='split'] .lib-collection-banner__content { padding: 0 1rem; }
  @media (min-width: 750px) {
    .lib-collection-banner[data-layout='split'] .lib-collection-banner__inner { grid-template-columns: 1fr 1fr; }
    .lib-collection-banner[data-layout='split'][data-image-position='right'] .lib-collection-banner__media { order: 2; }
    .lib-collection-banner[data-layout='split'][data-height='small'] .lib-collection-banner__media { aspect-ratio: 16 / 9; }
    .lib-collection-banner[data-layout='split'][data-height='large'] .lib-collection-banner__media { aspect-ratio: 1; }
  }

  .lib-collection-banner--full[data-layout='text'] .lib-collection-banner__content { padding: 0 1rem; }

  /* Copy and alignment: desktop, then mobile override. */
  .lib-collection-banner__copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 44rem; min-width: 0; }
  .lib-collection-banner__copy[data-align='center'] { align-items: center; text-align: center; }
  .lib-collection-banner__copy[data-align='right'] { align-items: flex-end; text-align: right; }
  .lib-collection-banner[data-layout='text'] .lib-collection-banner__copy[data-align='center'] { margin-inline: auto; }
  .lib-collection-banner[data-layout='text'] .lib-collection-banner__copy[data-align='right'] { margin-inline-start: auto; }
  @media (max-width: 749px) {
    .lib-collection-banner__copy[data-align-m='left'] { align-items: flex-start; text-align: left; margin-inline: 0; }
    .lib-collection-banner__copy[data-align-m='center'] { align-items: center; text-align: center; margin-inline: auto; }
    .lib-collection-banner__copy[data-align-m='right'] { align-items: flex-end; text-align: right; margin-inline: auto 0; }
  }

  .lib-collection-banner__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: 0.875rem; }
  .lib-collection-banner__crumbs li + li::before { content: '/'; margin-inline-end: 0.25rem; opacity: 0.55; }
  .lib-collection-banner__crumbs a { display: inline-block; padding-block: 0.15rem; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-collection-banner__crumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
  .lib-collection-banner__crumbs [aria-current] { opacity: 0.8; }

  .lib-collection-banner__heading {
    margin: 0;
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .lib-collection-banner__heading--small { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
  .lib-collection-banner__heading--medium { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
  .lib-collection-banner__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.75rem); }
  .lib-collection-banner__count {
    margin: 0.85rem 0 0;
    padding: 0.2rem 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .lib-collection-banner[data-layout='split'] .lib-collection-banner__count,
  .lib-collection-banner[data-layout='text'] .lib-collection-banner__count { border-color: var(--lib-accent); color: var(--lib-accent); }
  .lib-collection-banner__text { margin-top: 1rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.85; }
  .lib-collection-banner__text > :first-child { margin-top: 0; }
  .lib-collection-banner__text > :last-child { margin-bottom: 0; }
  .lib-collection-banner__text a { color: inherit; text-underline-offset: 0.2em; }

  @media (prefers-reduced-motion: no-preference) {
    .lib-collection-banner[data-animate] .lib-collection-banner__img { animation: lib-collection-banner-zoom 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .lib-collection-banner[data-animate] .lib-collection-banner__copy { animation: lib-collection-banner-in 0.8s 0.15s ease-out both; }
  }
  @keyframes lib-collection-banner-zoom { from { transform: scale(1.06); } }
  @keyframes lib-collection-banner-in { from { opacity: 0; transform: translateY(10px); } }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Collection banner",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection",
      "info": "Leave empty on collection templates to use the page's collection. Pick one to use the banner on other pages."
    },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Title tag",
      "info": "H1 by default: on a collection page the title is the page's main heading. Use H2 when another section already has the H1.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h1"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Title size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "large"
    },
    { "type": "checkbox", "id": "show_description", "label": "Show collection description", "default": true },
    { "type": "checkbox", "id": "show_count", "label": "Show product count", "default": true },
    { "type": "text", "id": "count_singular", "label": "Product count word, one", "default": "product" },
    { "type": "text", "id": "count_plural", "label": "Product count word, more than one", "default": "products" },
    { "type": "checkbox", "id": "show_breadcrumb", "label": "Show breadcrumb", "default": false },
    { "type": "text", "id": "breadcrumb_home", "label": "Breadcrumb home link", "default": "Home" },
    { "type": "text", "id": "breadcrumb_label", "label": "Breadcrumb label for screen readers", "default": "Breadcrumb" },
    { "type": "text", "id": "placeholder_title", "label": "Title in the editor preview", "info": "Shown only in the theme editor when no collection is set.", "default": "Collection title" },
    { "type": "text", "id": "placeholder_text", "label": "Description in the editor preview", "default": "The collection's description from Shopify admin appears here." },

    { "type": "header", "content": "Image" },
    { "type": "checkbox", "id": "use_collection_image", "label": "Use the collection's image", "info": "Set in Products > Collections. A desktop image below replaces it.", "default": true },
    { "type": "image_picker", "id": "image", "label": "Desktop image", "info": "Optional." },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px." },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "info": "Without any image the banner shows text only.",
      "options": [
        { "value": "overlay", "label": "Text over the image" },
        { "value": "split", "label": "Image beside the text" },
        { "value": "text", "label": "Text only" }
      ],
      "default": "overlay"
    },
    {
      "type": "select",
      "id": "height",
      "label": "Banner height",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    { "type": "range", "id": "overlay_opacity", "label": "Image overlay", "info": "Darkens the image so the text stays readable.", "min": 0, "max": 80, "step": 5, "unit": "%", "default": 35 },
    {
      "type": "select",
      "id": "image_position",
      "label": "Image side (beside the text)",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Text position over the image on desktop",
      "options": [
        { "value": "top-left", "label": "Top left" },
        { "value": "top-center", "label": "Top center" },
        { "value": "top-right", "label": "Top right" },
        { "value": "middle-left", "label": "Middle left" },
        { "value": "middle-center", "label": "Middle center" },
        { "value": "middle-right", "label": "Middle right" },
        { "value": "bottom-left", "label": "Bottom left" },
        { "value": "bottom-center", "label": "Bottom center" },
        { "value": "bottom-right", "label": "Bottom right" }
      ],
      "default": "bottom-left"
    },
    {
      "type": "select",
      "id": "content_position_mobile",
      "label": "Text position over the image on mobile",
      "options": [
        { "value": "top-left", "label": "Top left" },
        { "value": "top-center", "label": "Top center" },
        { "value": "middle-left", "label": "Middle left" },
        { "value": "middle-center", "label": "Middle center" },
        { "value": "bottom-left", "label": "Bottom left" },
        { "value": "bottom-center", "label": "Bottom center" }
      ],
      "default": "bottom-left"
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Text alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFDF9" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "color_overlay_text", "label": "Text over the image", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent", "label": "Accent (product count)", "default": "#7A5C3E" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 24 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 16 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 28 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Slow image zoom and text fade on load", "info": "Always off for visitors who prefer reduced motion.", "default": false }
  ],
  "presets": [
    { "name": "Lib · Collection banner" }
  ]
}
{% endschema %}