/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:10 Expected identifier but found whitespace
Line 17:28 Unexpected "("
Line 19:1 Expected identifier but found "%"
Line 21:0 Unexpected "<"
Line 244:0 Unexpected "<"
Line 251:11 Unexpected "{"
Line 251:20 Expected ":"
Line 251:40 Unexpected "<"
... and 39 more hidden warnings

**/
{% comment %}
  Section: Newsletter Close (S10B)
  Self-contained — no external CSS dependencies, all design tokens inlined.
{% endcomment %}

<style>
  /* ─── Reset / base ──────────────────────────────────────────────────── */
  .hp-newsletter-close *,
  .hp-newsletter-close *::before,
  .hp-newsletter-close *::after {
    box-sizing: border-box;
  }

  /* ─── Section shell ─────────────────────────────────────────────────── */
  .hp-newsletter-close {
    position: relative;
    padding: 30px 0 50px;
    background: linear-gradient(180deg, rgba(244, 237, 229, 1), rgba(251, 248, 243, 1));
    color: #1d1d1f;
    overflow: hidden;
  }

  /* Grain overlay */
  .hp-newsletter-close::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.72'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: multiply;
  }

  /* ─── Shell / layout container ──────────────────────────────────────── */
  .hp-newsletter-close__inner {
    width: min(100% - clamp(1.2rem, 3vw, 2.6rem) * 2, 88rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.6rem;
    border-top: 1px solid rgba(34, 32, 29, 0.08);
    position: relative;
    z-index: 1;
  }

  /* ─── Eyebrow / overline ─────────────────────────────────────────────── */
  .hp-newsletter-close__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: "Space Grotesk", "Avenir Next", sans-serif;
    font-size: clamp(0.88rem, 0.82rem + 0.22vw, 1rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fe5e10;
  }

  .hp-newsletter-close__eyebrow::before {
    content: "";
    width: 2.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
  }

  /* ─── Heading ────────────────────────────────────────────────────────── */
  .hp-newsletter-close__copy h2 {
    margin: 0.8rem 0 0;
    font-family: "Clash Display", "Satoshi", "Avenir Next", sans-serif;
    font-size: clamp(2.6rem, 4.2vw, 4.4rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.05em;
    color: #1d1d1f;
  }

  /* ─── Body copy & trust note ─────────────────────────────────────────── */
  .hp-newsletter-close__copy p,
  .hp-newsletter-close__copy small {
    display: block;
    margin: 0.9rem 0 0;
    color: #5f5a56;
    font-family: "DM Sans", "Helvetica Neue", sans-serif;
    font-size: clamp(1.12rem, 1.06rem + 0.28vw, 1.32rem);
    font-weight: 400;
    line-height: 1.72;
  }

  /* ─── Form ───────────────────────────────────────────────────────────── */
  .hp-newsletter-close__form {
    display: grid;
    gap: 0.8rem;
  }

  .hp-newsletter-close__field-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
  }

  /* Email input */
  .hp-newsletter-close__field-row input[type="email"] {
    min-height: 3.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 32, 29, 0.12);
    background: rgba(255, 251, 246, 0.84);
    color: #22201d;
    font-family: "DM Sans", "Helvetica Neue", sans-serif;
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.14rem);
    transition:
      border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
  }

  .hp-newsletter-close__field-row input[type="email"]::placeholder {
    color: #8c8278;
  }

  .hp-newsletter-close__field-row input[type="email"]:focus {
    border-color: rgba(254, 94, 16, 0.38);
    box-shadow: 0 0 0 3px rgba(254, 94, 16, 0.12);
  }

  /* Subscribe button */
  .hp-newsletter-close__form .hp-button-fill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #1d1d1f;
    color: #fffaf4;
    font-family: "Space Grotesk", "Avenir Next", sans-serif;
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.14rem);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hp-newsletter-close__form .hp-button-fill:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(27, 22, 17, 0.08);
  }

  .hp-newsletter-close__form .hp-button-fill:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(254, 94, 16, 0.22);
  }

  /* ─── Status messages ────────────────────────────────────────────────── */
  .hp-newsletter-close__message {
    margin: 0;
    font-family: "DM Sans", "Helvetica Neue", sans-serif;
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.14rem);
  }

  .hp-newsletter-close__message.is-success { color: #00b39b; }
  .hp-newsletter-close__message.is-error   { color: #d74e0d; }

  /* ─── Screen-reader only ─────────────────────────────────────────────── */
  .hp-newsletter-close .hp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ─── Responsive ─────────────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .hp-newsletter-close {
      padding-bottom: clamp(3.6rem, 12vw, 5rem);
    }

    .hp-newsletter-close__inner {
      width: min(100% - 1rem * 2, 88rem);
      grid-template-columns: 1fr;
    }

    .hp-newsletter-close__field-row {
      grid-template-columns: 1fr;
    }

    .hp-newsletter-close__eyebrow::before {
      width: 2rem;
    }

    .hp-newsletter-close__form .hp-button-fill {
      width: 100%;
    }
  }

  @media (max-width: 1024px) {
    .hp-newsletter-close {
      padding-bottom: clamp(4rem, 8vw, 6rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hp-newsletter-close__form .hp-button-fill,
    .hp-newsletter-close__field-row input[type="email"] {
      transition: none;
    }
  }
</style>

<section class="hp-newsletter-close">
  <div class="hp-newsletter-close__inner">

    <div class="hp-newsletter-close__copy">
      <p class="hp-newsletter-close__eyebrow">Stay in the loop</p>
      <h2>{{ section.settings.heading }}</h2>
      <p>{{ section.settings.body }}</p>
      {%- if section.settings.trust_note != blank -%}
        <small>{{ section.settings.trust_note }}</small>
      {%- endif -%}
    </div>

    {% form 'customer', class: 'hp-newsletter-close__form' %}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <label class="hp-sr-only" for="NewsletterClose-{{ section.id }}">{{ section.settings.placeholder }}</label>
      <div class="hp-newsletter-close__field-row">
        <input
          id="NewsletterClose-{{ section.id }}"
          type="email"
          name="contact[email]"
          value="{{ form.email }}"
          placeholder="{{ section.settings.placeholder }}"
          autocapitalize="off"
          autocomplete="email"
          required
        >
        <button class="hp-button-fill" type="submit">
          <span>Subscribe</span>
        </button>
      </div>
      {%- if form.posted_successfully? -%}
        <p class="hp-newsletter-close__message is-success">{{ 'newsletter.success' | t }}</p>
      {%- endif -%}
      {%- if form.errors -%}
        <p class="hp-newsletter-close__message is-error">
          {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
        </p>
      {%- endif -%}
    {% endform %}

  </div>
</section>

{% schema %}
{
  "name": "Newsletter Close (S10B)",
  "tag": "section",
  "class": "shopify-section--home-newsletter-close",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Stay in the Loop"
    },
    {
      "type": "textarea",
      "id": "body",
      "label": "Body",
      "default": "Updates on new drops, restocks, and the stories behind Techpod."
    },
    {
      "type": "text",
      "id": "placeholder",
      "label": "Placeholder",
      "default": "Enter your email"
    },
    {
      "type": "text",
      "id": "trust_note",
      "label": "Trust note",
      "default": "No noise. Only meaningful updates."
    }
  ],
  "presets": [
    {
      "name": "Newsletter Close (S10B)"
    }
  ]
}
{% endschema %}