/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-image-banner.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 26:11 Unexpected "{"
Line 26:20 Expected ":"
Line 26:27 Unexpected "{"
... and 207 more hidden warnings

**/
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- liquid
   assign global_heading_size = settings.enable_global_heading_font_size
   assign global_body_size = settings.enable_global_body_font_size
   assign global_color = settings.enable_global_color
-%}

{%- style -%}
  /* Apple-inspired centered grid layout */
  #Banner-{{ section.id }} {
    position: relative;
    overflow: hidden;
    background-color: {{ section.settings.background_color }};
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }

  /* Centered content grid */
  #Banner-{{ section.id }} .banner__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px 40px;
    position: relative;
    z-index: 2;
  }

  #Banner-{{ section.id }} .banner__grid {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 32px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
  }

  /* Typography styling */
  #Banner-{{ section.id }} .banner__heading {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  #Banner-{{ section.id }} .banner__subheading {
    margin: 0 auto;
    opacity: 0.9;
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 700px;
  }

  /* Button styling - Apple inspired */
  #Banner-{{ section.id }} .banner__buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 0;
  }

  #Banner-{{ section.id }} .button {
    padding: 12px 28px;
    border-radius: 980px;
    font-weight: 500;
    font-size: 17px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
  }

  #Banner-{{ section.id }} .button--primary {
    background: #0071e3;
    color: white;
  }

  #Banner-{{ section.id }} .button--primary:hover {
    background: #0077ed;
  }

  #Banner-{{ section.id }} .button--secondary {
    background: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
  }

  #Banner-{{ section.id }} .button--secondary:hover {
    background: #0066cc;
    color: white;
  }

  /* Product image styling */
  #Banner-{{ section.id }} .banner__product-container {
    position: relative;
    width: 100%;
    height: {{ section.settings.product_image_height }}px;
    margin-top: -100px; /* Pulls image up to overlap slightly */
  }

  #Banner-{{ section.id }} .banner__product-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: {{ section.settings.product_image_width }}px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  #Banner-{{ section.id }} .banner__product-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    max-height: 100%;
  }

  /* Height variations with better proportions */
  #Banner-{{ section.id }}.banner--small {
    min-height: 500px;
  }

  #Banner-{{ section.id }}.banner--medium {
    min-height: 600px;
  }

  #Banner-{{ section.id }}.banner--large {
    min-height: 700px;
  }

  #Banner-{{ section.id }}.banner--xlarge {
    min-height: 800px;
  }

  /* Ensure content has minimum space */
  #Banner-{{ section.id }} .banner__content {
    min-height: 400px;
  }

    @media screen and (max-width: 768px) {
    #Banner-{{ section.id }} .banner__content {
      padding: 60px 20px 30px;
      min-height: 350px;
    }

    #Banner-{{ section.id }} .banner__grid {
      gap: 20px;
    }

    #Banner-{{ section.id }} .banner__subheading {
      font-size: 1.125rem;
    }

    #Banner-{{ section.id }} .button {
      font-size: 16px;
      padding: 10px 24px;
    }

    #Banner-{{ section.id }} .banner__buttons {
      flex-direction: column;
      width: 100%;
      max-width: 280px;
      margin: 0 auto;
    }

    #Banner-{{ section.id }} .banner__buttons .button {
      width: 100%;
    }

    #Banner-{{ section.id }}.banner--small {
      min-height: 450px;
    }

    #Banner-{{ section.id }}.banner--medium {
      min-height: 500px;
    }

    #Banner-{{ section.id }}.banner--large {
      min-height: 600px;
    }

    #Banner-{{ section.id }}.banner--xlarge {
      min-height: 700px;
    }

    #Banner-{{ section.id }} .banner__product-container {
      height: {{ section.settings.product_image_height_mobile }}px;
      margin-top: -60px;
    }

    #Banner-{{ section.id }} .banner__product-image {
      max-width: {{ section.settings.product_image_width_mobile }}px;
    }
  }

  /* Color text styling */
  #Banner-{{ section.id }} .color-accent {
    color: {{ section.settings.accent_color }};
  }

  /* Gradient text effect (optional) */
  #Banner-{{ section.id }} .gradient-text {
    background: linear-gradient(90deg, {{ section.settings.gradient_start }}, {{ section.settings.gradient_end }});
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Section spacing based on product image */
  #Banner-{{ section.id }}.has-product-image {
    padding-bottom: 0;
  }

  /* Ensure content stays above product */
  #Banner-{{ section.id }} .banner__content {
    min-height: 100%;
  }

  /* Debug: Add subtle grid to see spacing */
  #Banner-{{ section.id }}.show-grid .banner__grid > * {
    outline: 1px dashed rgba(255, 0, 0, 0.2);
  }
{%- endstyle -%}

<div
  id="Banner-{{ section.id }}"
  class="banner banner--{{ section.settings.height }}{% if section.settings.product_image != blank %} has-product-image{% endif %}"
>
  <div class="banner__content page-width">
    <div class="banner__grid">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            {% style %}
              #heading-section-{{ block.id }} {
                color: {% if global_color %}rgb(var(--color-base-heading)){% else %}{{ block.settings.color }}{% endif %};
                font-size: {% if global_heading_size %}var(--font-heading-size) !important{% else %}{{ block.settings.size }}px !important{% endif %};
                line-height: 1.1;
              }
              @media (max-width: 768px) {
                #heading-section-{{ block.id }}{
                  font-size: {% if global_heading_size %}var(--font-heading-mob-size) !important{% else %}{{ block.settings.mobile_font_size }}px !important{% endif %};
                }
              }
            {% endstyle %}

            <h1 id="heading-section-{{ block.id }}" class="banner__heading" {{ block.shopify_attributes }}>
              {{ block.settings.heading }}
            </h1>

          {%- when 'text' -%}
            <p class="banner__subheading" style="color: {{ block.settings.color }};" {{ block.shopify_attributes }}>
              {{ block.settings.text }}
            </p>

          {%- when 'subheading' -%}
            <p class="banner__subheading" style="color: {{ block.settings.color }};" {{ block.shopify_attributes }}>
              {{ block.settings.text }}
            </p>

          {%- when 'buttons' -%}
            <div class="banner__buttons" {{ 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 button--primary"
                >
                  {{- 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 button--secondary"
                >
                  {{- block.settings.button_label_2 | escape -}}
                </a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>

  {%- if section.settings.product_image != blank -%}
    <div class="banner__product-container">
      <div class="banner__product-image">
        {{
          section.settings.product_image
          | image_url: width: 2000
          | image_tag:
            loading: section.settings.image_preload,
            widths: '375, 550, 750, 1100, 1500, 2000',
            sizes: '(max-width: 768px) 90vw, {{ section.settings.product_image_width }}px'
        }}
      </div>
    </div>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "Hero Banner",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "small",
          "label": "Small (500px)"
        },
        {
          "value": "medium",
          "label": "Medium (600px)"
        },
        {
          "value": "large",
          "label": "Large (700px)"
        },
        {
          "value": "xlarge",
          "label": "Extra Large (800px)"
        }
      ],
      "default": "medium",
      "label": "Section height"
    },
    {
      "type": "header",
      "content": "Background"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#f5f5f7"
    },
    {
      "type": "header",
      "content": "Product Image"
    },
    {
      "type": "image_picker",
      "id": "product_image",
      "label": "Product image (PNG recommended)",
      "info": "Upload a PNG with transparent background. Image will be positioned at the bottom center."
    },
    {
      "type": "range",
      "id": "product_image_width",
      "min": 200,
      "max": 1200,
      "step": 50,
      "unit": "px",
      "label": "Product image max width",
      "default": 600,
      "info": "Controls how wide the product image can be"
    },
    {
      "type": "range",
      "id": "product_image_height",
      "min": 200,
      "max": 600,
      "step": 20,
      "unit": "px",
      "label": "Product image container height (Desktop)",
      "default": 400,
      "info": "Height of the container that holds the product image"
    },
    {
      "type": "range",
      "id": "product_image_height_mobile",
      "min": 150,
      "max": 400,
      "step": 10,
      "unit": "px",
      "label": "Product image container height (Mobile)",
      "default": 300
    },
    {
      "type": "range",
      "id": "product_image_width_mobile",
      "min": 200,
      "max": 600,
      "step": 20,
      "unit": "px",
      "label": "Product image max width (Mobile)",
      "default": 400
    },
    {
      "type": "checkbox",
      "id": "image_preload",
      "label": "Preload hero image",
      "info": "Loads image immediately for better performance",
      "default": true
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent color",
      "default": "#ff6b6b"
    },
    {
      "type": "color",
      "id": "gradient_start",
      "label": "Gradient start color",
      "default": "#667eea"
    },
    {
      "type": "color",
      "id": "gradient_end",
      "label": "Gradient end color",
      "default": "#764ba2"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Skip TSA Lines Forever",
          "label": "Heading text"
        },
        {
          "type": "range",
          "id": "size",
          "min": 32,
          "max": 72,
          "step": 2,
          "unit": "px",
          "label": "Desktop font size",
          "default": 56
        },
        {
          "type": "range",
          "id": "mobile_font_size",
          "min": 24,
          "max": 48,
          "step": 1,
          "unit": "px",
          "label": "Mobile font size",
          "default": 36
        },
        {
          "type": "color",
          "id": "color",
          "label": "Heading color",
          "default": "#1d1d1f"
        }
      ]
    },
    {
      "type": "text",
      "name": "Body/Subheading",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "Join 47,000+ travelers who've ditched liquid toothpaste.",
          "label": "Text"
        },
        {
          "type": "color",
          "id": "color",
          "label": "Text color",
          "default": "#6e6e73"
        }
      ]
    },
    {
      "type": "subheading",
      "name": "Subheading",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "Join 47,000+ travelers who've ditched liquid toothpaste.",
          "label": "Subheading text"
        },
        {
          "type": "color",
          "id": "color",
          "label": "Text color",
          "default": "#6e6e73"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "Buttons",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Buy Now",
          "label": "Primary button label"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "Primary button link"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "label": "Secondary button label"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "Secondary button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hero Banner",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}