/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:22 Unexpected "("
Line 19:1 Expected identifier but found "%"
Line 21:0 Unexpected "<"
Line 23:9 Unterminated string token
Line 24:28 Unexpected "{"
Line 24:37 Expected ":"
Line 24:64 Unexpected ";"
Line 25:31 Unexpected "{"
... and 60 more hidden warnings

**/
{% comment %}
  Email Signup Banner (Scalable)
  - Drop-in section with Shopify editor controls for typography + input sizing.
{% endcomment %}

<section
  class="email-signup-banner email-signup-banner--scalable"
  style="
    --signup-heading-size: {{ section.settings.heading_size }}px;
    --signup-subheading-size: {{ section.settings.subheading_size }}px;
    --signup-input-text-size: {{ section.settings.input_text_size }}px;
    --signup-input-height: {{ section.settings.input_height }}px;
    --signup-input-width: {{ section.settings.input_width }}px;
  "
>
  <div class="page-width">
    <div class="email-signup-banner__box banner__box">
      {% if section.settings.heading != blank %}
        <h2 class="email-signup-banner__heading">
          {{ section.settings.heading | escape }}
        </h2>
      {% endif %}

      {% if section.settings.subheading != blank %}
        <div class="newsletter__subheading rte">
          {{ section.settings.subheading }}
        </div>
      {% endif %}

      {% form 'customer', id: 'EmailSignupForm-' | append: section.id, class: 'newsletter-form' %}
        <input type="hidden" name="contact[tags]" value="newsletter">

        <div class="newsletter-form__field-wrapper">
          <div class="field">
            <input
              id="NewsletterForm--{{ section.id }}"
              type="email"
              name="contact[email]"
              class="field__input"
              value="{{ form.email }}"
              aria-required="true"
              autocorrect="off"
              autocapitalize="off"
              autocomplete="email"
              {% if form.errors %}
                aria-invalid="true"
                aria-describedby="Newsletter-error--{{ section.id }}"
              {% endif %}
              placeholder="{{ section.settings.placeholder | escape }}"
              required
            >

            <button
              type="submit"
              class="field__button"
              name="commit"
              aria-label="{{ section.settings.button_label | escape }}"
            >
              {{ section.settings.button_label | escape }}
            </button>
          </div>

          {% if form.errors %}
            <small
              class="newsletter-form__message form__message"
              id="Newsletter-error--{{ section.id }}"
            >
              {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}
            </small>
          {% endif %}

          {% if form.posted_successfully? %}
            <p class="newsletter-form__message newsletter-form__message--success">
              {{ section.settings.success_message | escape }}
            </p>
          {% endif %}
        </div>
      {% endform %}
    </div>
  </div>

  <style>
    /* ---------- Layout ---------- */
    .email-signup-banner--scalable .newsletter-form,
    .email-signup-banner--scalable .newsletter-form__field-wrapper {
      display: inline-block;
      width: 100%;
    }

    .email-signup-banner--scalable .email-signup-banner__box {
      width: 100%;
    }

    .email-signup-banner--scalable .email-signup-banner__heading {
      margin-bottom: 0;
      font-size: var(--signup-heading-size, 28px);
      line-height: 1.1;
    }

    .email-signup-banner--scalable .email-signup-banner__box > * + .newsletter__subheading {
      margin-top: 2rem;
    }

    .email-signup-banner--scalable .newsletter__subheading,
    .email-signup-banner--scalable .newsletter__subheading p {
      margin: 0;
      font-size: var(--signup-subheading-size, 16px);
      line-height: 1.4;
    }

    /* ---------- Input scaling (Editor-controlled) ---------- */
    .email-signup-banner--scalable .field__input {
      font-size: var(--signup-input-text-size, 16px);
      min-height: var(--signup-input-height, 48px);

      /* Centre the text nicely regardless of height */
      padding-top: 0;
      padding-bottom: 0;

      /* If theme uses line-height for height, this helps too */
      line-height: 1.2;
    }

    /* Make the button match the input height */
    .email-signup-banner--scalable .field__button {
      min-height: var(--signup-input-height, 48px);
    }

    /* Desktop width control */
    @media screen and (min-width: 750px) {
      .email-signup-banner--scalable .newsletter-form {
        width: var(--signup-input-width, 380px);
        max-width: 100%;
      }

      .email-signup-banner--scalable .newsletter-form__field-wrapper,
      .email-signup-banner--scalable .field,
      .email-signup-banner--scalable .field__input {
        width: 100%;
      }
    }

    /* ---------- Optional: keep messaging aligned like Dawn/Rise ---------- */
    @media screen and (max-width: 749px) {
      .email-signup-banner--scalable .newsletter-form__message {
        justify-content: flex-start;
      }
    }
    @media screen and (min-width: 750px) {
      .email-signup-banner--scalable .newsletter-form__message {
        justify-content: center;
      }
    }
  </style>
</section>

{% schema %}
{
  "name": "Email signup (scalable)",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Join the newsletter"
    },
    {
      "type": "richtext",
      "id": "subheading",
      "label": "Subheading",
      "default": "<p>Drop your email. We’ll send the good stuff. No waffle.</p>"
    },
    {
      "type": "text",
      "id": "placeholder",
      "label": "Input placeholder",
      "default": "Email address"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Sign up"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Success message",
      "default": "You’re in. Welcome."
    },

    {
      "type": "header",
      "content": "Scalable sizing"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 18,
      "max": 60,
      "step": 1,
      "unit": "px",
      "label": "Heading size",
      "default": 32
    },
    {
      "type": "range",
      "id": "subheading_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Subheading size",
      "default": 16
    },
    {
      "type": "range",
      "id": "input_text_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Input text size",
      "default": 16
    },
    {
      "type": "range",
      "id": "input_height",
      "min": 36,
      "max": 76,
      "step": 1,
      "unit": "px",
      "label": "Input height",
      "default": 48
    },
    {
      "type": "range",
      "id": "input_width",
      "min": 220,
      "max": 720,
      "step": 10,
      "unit": "px",
      "label": "Input width (desktop)",
      "default": 420
    }
  ],
  "presets": [
    {
      "name": "Email signup (scalable)"
    }
  ]
}
{% endschema %}