/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:20 Unexpected "("
Line 22:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Unexpected "{"
Line 24:3 Expected identifier but found "'email-signup-banner.css'"
Line 25:0 Unexpected "<"
Line 25:11 Unexpected "{"
Line 25:13 Expected identifier but found "'email-signup-banner.css'"
... and 67 more hidden warnings

**/
{% comment %}
Email signup banner (external CSS + safe text)
- Uses assets/email-signup-banner.css
- No inline @media; alignment via classes
- Overlay opacity via CSS var on section
- Subheading rendered as PLAIN TEXT (strip_html | escape)
{% endcomment %}

{{ 'email-signup-banner.css' | asset_url | stylesheet_tag: preload: true, onload: "this.media='all'" }}
<noscript>{{ 'email-signup-banner.css' | asset_url | stylesheet_tag }}</noscript>

{%- liquid
  assign img = section.settings.image
  assign alt_text = section.settings.image_alt | default: ''

  assign section_classes = 'email-signup-banner'
  if section.settings.show_text_box
    assign section_classes = section_classes | append: ' show-text-box'
  endif
  if section.settings.image_height != 'adapt-image'
    assign section_classes = section_classes | append: ' height--' | append: section.settings.image_height
  endif
  if section.settings.color_scheme == 'scheme-1'
    assign section_classes = section_classes | append: ' color-scheme--dark'
  else
    assign section_classes = section_classes | append: ' color-scheme--light'
  endif

  assign desktop_align_class = 'align-' | append: section.settings.desktop_content_alignment
  assign mobile_align_class  = 'mobile-align-' | append: section.settings.mobile_content_alignment
  assign overlay_opacity = section.settings.image_overlay_opacity | divided_by: 100.0
-%}

<section
  id="EmailSignup-{{ section.id }}"
  class="{{ section_classes }}"
  role="region"
  aria-label="Email signup"
  style="--overlay: {{ overlay_opacity }};"
>
  <div class="banner">
    {% if section.settings.show_background_image and img != blank %}
      <div class="banner__media">
        {% render 'optimized-image',
          image: img,
          alt: alt_text,
          width_override: 1500,
          sizes: '100vw',
          loading: 'eager',
          fetchpriority: 'high',
          class: 'banner__media-image' %}
        {% if section.settings.image_overlay_opacity > 0 %}
          <div class="banner__overlay"></div>
        {% endif %}
      </div>
    {% endif %}

    <div class="banner__content {{ desktop_align_class }} {{ mobile_align_class }}">
      <div class="signup__box">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'heading' -%}
              <h2 class="signup__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>

            {%- when 'paragraph' -%}
              <p class="signup__subheading {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                {{ block.settings.text | strip_html | escape }}
              </p>

            {%- when 'email_form' -%}
              <div {{ block.shopify_attributes }}>
                {% form 'customer', class: 'newsletter-form' %}
                  <input type="hidden" name="contact[tags]" value="newsletter">
                  <div class="newsletter-form__field-wrapper">
                    <input
                      id="NewsletterForm--{{ section.id }}"
                      type="email"
                      name="contact[email]"
                      class="field__input"
                      value="{{ form.email | escape }}"
                      autocorrect="off" autocapitalize="off" autocomplete="email"
                      placeholder="Email address" required
                      {% if form.errors %} aria-invalid="true" aria-describedby="Newsletter-error--{{ section.id }}"{% endif %}
                      {% if form.posted_successfully? %} aria-describedby="Newsletter-success--{{ section.id }}"{% endif %}
                    >
                    <button type="submit" class="field__button button">Subscribe</button>
                  </div>

                  {% if form.errors %}
                    <small class="form__message" id="Newsletter-error--{{ section.id }}">Please enter a valid email.</small>
                  {% endif %}

                  {% if form.posted_successfully? %}
                    <p class="form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1">Thanks! You’re subscribed.</p>
                  {% endif %}
                {% endform %}
              </div>
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Email signup banner",
  "tag": "section",
  "class": "section section-email-signup-banner",
  "settings": [
    { "type": "checkbox", "id": "show_background_image", "label": "Show background image", "default": true },
    { "type": "image_picker", "id": "image", "label": "Background image" },
    { "type": "text", "id": "image_alt", "label": "Background image alt" },
    { "type": "range", "id": "image_overlay_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Overlay opacity", "default": 20 },
    { "type": "select", "id": "image_height", "label": "Section height",
      "options": [
        { "value": "adapt-image", "label": "Adapt to image" },
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ],
      "default": "medium"
    },
    { "type": "select", "id": "desktop_content_alignment", "label": "Desktop content alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    { "type": "select", "id": "mobile_content_alignment", "label": "Mobile content alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    { "type": "checkbox", "id": "show_text_box", "label": "Show frosted background for content", "default": true },
    { "type": "checkbox", "id": "show_text_below", "label": "Show text below image on mobile", "default": true }
  ],
  "blocks": [
    { "type": "heading", "name": "Heading", "limit": 1,
      "settings": [
        { "type": "text", "id": "heading", "label": "Heading text", "default": "Join the Phoenix Elite" },
        { "type": "select", "id": "heading_size", "label": "Heading size",
          "options": [ { "value": "h2", "label": "H2" }, { "value": "h1", "label": "H1" }, { "value": "h0", "label": "Hero" } ],
          "default": "h1"
        }
      ]
    },
    { "type": "paragraph", "name": "Subheading", "limit": 1,
      "settings": [
        { "type": "richtext", "id": "text", "label": "Subheading text", "default": "<p>Get exclusive drops, tips, and members-only discounts.</p>" },
        { "type": "select", "id": "text_style", "label": "Text style",
          "options": [ { "value": "body", "label": "Body" }, { "value": "subtitle", "label": "Subtitle" } ],
          "default": "body"
        }
      ]
    },
    { "type": "email_form", "name": "Email form", "limit": 1 }
  ],
  "presets": [
    { "name": "Email signup banner", "blocks": [ { "type": "heading" }, { "type": "paragraph" }, { "type": "email_form" } ] }
  ]
}
{% endschema %}