/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:2 Unexpected "{"
Line 19:3 Expected identifier but found "%"
Line 276:2 Unexpected "{"
Line 276:3 Expected identifier but found "%"
Line 277:0 Unexpected "{"
Line 277:1 Expected identifier but found "%"
... and 121 more hidden warnings

**/
{% render 'hs-defer-css', filename: 'section-image-banner.css', pages: 'collection,index,product', minify: false, local: true %}

{%- if section.index == 1 -%}
  {%- style -%}
    /* Critical, above-the-fold geometry only — inlined so it applies with zero
       extra network request, preventing the layout shift that section-image-banner.css
       (deferred above) would otherwise cause once it loads late. Everything NOT
       related to box position/size/display (colors, hover states, link colors,
       button spacing) is intentionally left out and stays in the deferred file. */

    .banner {
      display: flex;
      position: relative;
      flex-direction: column;
      z-index: auto;
      isolation: isolate;
    }

    @media screen and (max-width: 749px) {
      .banner:not(.banner--stacked) {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .banner--stacked {
        height: auto;
      }

      .banner--stacked .banner__media {
        flex-direction: column;
      }

      .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
      .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
        height: 28rem;
      }

      .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
      .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
        height: 34rem;
      }

      .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
      .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
        height: 39rem;
      }

      .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 28rem;
      }

      .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 34rem;
      }

      .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 39rem;
      }

      .banner--mobile-bottom .banner__media,
      .banner--stacked:not(.banner--mobile-bottom) .banner__media {
        position: relative;
      }

      .banner--stacked.banner--adapt .banner__content {
        height: auto;
      }

      .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        position: absolute;
        height: auto;
      }

      .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
        max-height: 100%;
        overflow: hidden;
        position: absolute;
      }

      .banner--stacked:not(.banner--adapt) .banner__media {
        position: relative;
      }

      .banner--stacked .banner__media-image-half {
        width: 100%;
      }

      .banner--mobile-bottom:not(.banner--stacked) .banner__content {
        order: 2;
      }
    }

    @media screen and (min-width: 750px) {
      .banner {
        flex-direction: row;
      }

      .banner--small:not(.banner--adapt) {
        min-height: 42rem;
      }

      .banner--medium:not(.banner--adapt) {
        min-height: 56rem;
      }

      .banner--large:not(.banner--adapt) {
        min-height: 72rem;
      }

      .banner__content.banner__content--top-left {
        align-items: flex-start;
        justify-content: flex-start;
      }

      .banner__content.banner__content--top-center {
        align-items: flex-start;
        justify-content: center;
      }

      .banner__content.banner__content--top-right {
        align-items: flex-start;
        justify-content: flex-end;
      }

      .banner__content.banner__content--middle-left {
        align-items: center;
        justify-content: flex-start;
      }

      .banner__content.banner__content--middle-center {
        align-items: center;
        justify-content: center;
      }

      .banner__content.banner__content--middle-right {
        align-items: center;
        justify-content: flex-end;
      }

      .banner__content.banner__content--bottom-left {
        align-items: flex-end;
        justify-content: flex-start;
      }

      .banner__content.banner__content--bottom-center {
        align-items: flex-end;
        justify-content: center;
      }

      .banner__content.banner__content--bottom-right {
        align-items: flex-end;
        justify-content: flex-end;
      }
    }

    .banner__media {
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

    .banner__media-half {
      width: 50%;
    }

    .banner__media-half + .banner__media-half {
      right: 0;
      left: auto;
    }

    @media screen and (max-width: 749px) {
      .banner--stacked .banner__media-half {
        width: 100%;
      }

      .banner--stacked .banner__media-half + .banner__media-half {
        order: 1;
      }
    }

    @media screen and (min-width: 750px) {
      .banner__media {
        height: 100%;
      }
    }

    .banner--adapt,
    .banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
      height: auto;
    }

    .banner__content {
      padding: 0;
      display: flex;
      position: relative;
      width: 100%;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    @media screen and (min-width: 750px) {
      .banner__content {
        padding: 5rem;
      }
    }

    .banner__box {
      padding: 4rem 1.5rem;
      position: relative;
      height: fit-content;
      align-items: center;
      text-align: center;
      width: 100%;
      word-wrap: break-word;
      z-index: 1;
    }

    .banner--mobile-bottom .banner__box {
      padding: 4rem 3.5rem;
    }

    @media screen and (max-width: 749px) {
      .banner--stacked .banner__box {
        width: 100%;
      }
    }

    @media screen and (min-width: 750px) {
      .banner__box {
        padding: 4rem 3.5rem;
        width: auto;
        max-width: 71rem;
        min-width: 45rem;
      }

      .banner--desktop-transparent .banner__box {
        padding: 4rem 0;
        max-width: 89rem;
      }
    }

    @media screen and (min-width: 1400px) {
      .banner__box {
        max-width: 90rem;
      }
    }

    .banner::after,
    .banner__media::after {
      content: '';
      position: absolute;
      top: 0;
      background: #000000;
      z-index: 1;
      width: 100%;
      height: 100%;
    }
  {%- endstyle -%}
{%- endif -%}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before,
      #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

{%- liquid
  assign full_width = '100vw'
  # Clamping the widths array stops mobile viewports from ever pulling bloated 2k/3k desktop files
  assign widths = '375, 550, 750, 1100, 1500, 1780'

  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
    assign half_width = '100vw'
    assign stacked_sizes = '100vw'
  else
    assign half_width = '50vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
  endif
  
  # Explicitly map a defensive mobile-first sizes layout string
  if section.settings.show_text_below == false
    assign sizes = '(min-width: 750px) 100vw, 100vw'
  else
    assign sizes = '(min-width: 750px) 50vw, 100vw'
  endif

  assign fetch_priority = 'auto'
  if section.index == 1
    assign fetch_priority = 'high'
  endif
-%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

<div
  id="Banner-{{ section.id }}"
  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
>
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
  section.settings.image
  | image_url: width: 1100
  | image_tag:
    width: section.settings.image.width,
    height: image_height,
    class: image_class,
    sizes: '(max-width: 749px) 100vw, (min-width: 750px) 100vw',
    widths: '375, 550, 750, 1100',
    loading: 'eager',
    fetchpriority: fetch_priority
}}
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
  section.settings.image_2
  | image_url: width: 1100
  | image_tag:
    width: section.settings.image_2.width,
    height: image_height_2,
    class: image_class_2,
    sizes: sizes,
    widths: widths,
    loading: 'eager',
    fetchpriority: fetch_priority
}}
    </div>
  {%- endif -%}
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <{{ block.settings.heading_tag }} 
              class="banner__heading inline-richtext {{ block.settings.heading_size }}"
              {{ block.shopify_attributes }}
            >
              {{ block.settings.heading }}
            </{{ block.settings.heading_tag }}>
          {%- when 'text' -%}
            <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <p>{{ block.settings.text }}</p>
            </div>
          {%- when 'buttons' -%}
            <div
              class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
              {{ block.shopify_attributes }}
            >
              {%- if block.settings.button_label_1 != blank -%}
                <a
                  {% if block.settings.button_link_1 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_1 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_1 | escape -}}
                </a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a
                  {% if block.settings.button_link_2 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_2 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_2 | escape -}}
                </a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        },
        {
          "value": "fixed",
          "label": "t:sections.all.animation.image_behavior.options__3.label"
        },
        {
          "value": "zoom-in",
          "label": "t:sections.all.animation.image_behavior.options__4.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.content.content"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.mobile.content"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },    
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "t:sections.image-banner.blocks.heading.settings.heading.default",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            },
            {
              "value": "hxl",
              "label": "t:sections.all.heading_size.options__4.label"
            },
            {
              "value": "hxxl",
              "label": "t:sections.all.heading_size.options__5.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        },
        {
          "type": "select",
          "id": "heading_tag",
          "options": [
            {
              "value": "h1",
              "label": "h1"
            },
            {
              "value": "h2",
              "label": "h2"
            },
            {
              "value": "h3",
              "label": "h3"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "t:sections.image-banner.blocks.text.settings.text.default",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
        "type": "header",
        "content": "t:sections.image-banner.blocks.buttons.settings.header_1.content"
        },
        {
          "type": "text",
          "id": "button_label_1",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
        "type": "header",
        "content": "t:sections.image-banner.blocks.buttons.settings.header_2.content"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}