/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 302:0 Unexpected "<"
Line 310:2 Unexpected "<"
Line 329:11 Unexpected "{"
Line 329:20 Expected ":"
Line 330:8 Unexpected "<"
Line 335:11 Unexpected "{"
Line 335:20 Expected ":"
Line 336:8 Unexpected "<"
Line 341:11 Unexpected "{"
... and 59 more hidden warnings

**/
<style>
  .split-50-section {
    width: 100%;
  }

  .split-50-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 50vh;
    column-gap: 0;
  }

  .split-50-grid--swap .split-50-left {
    order: 2;
  }

  .split-50-grid--swap .split-50-right {
    order: 1;
  }

  .split-50-left {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 24px 40px;
    box-sizing: border-box;
  }

  .split-50-left-inner {
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .split-50-text-top {
    font-size: clamp(12px, 5vw, 15px);
    line-height: 1.2;
    font-family: 'Second'
  }

  .split-50-text-middle {
    font-size: clamp(30px, 5vw, 50px);
    line-height: 2;
    font-family: 'Title'
  }

  .split-50-text-bottom {
    font-size: clamp(12px, 5vw, 15px);
    line-height: 1.5;
    font-family: 'Second'
  }

  .split-50-right {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 1 / 1;
    background-color: #e8e8e8;
    overflow: hidden;
    justify-self: stretch;
  }

  .split-50-right-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 50%;
    display: block;
  }

  .split-50-grid--swap .split-50-right-img {
    object-position: left 50%;
  }

  .split-50-section.split-50--reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s ease, transform 0.85s ease;
  }

  .split-50-section.split-50--reveal.split-50--reveal-in {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .split-50-section.split-50--reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .split-50-newsletter-block {
    margin-top: 1.5rem;
    width: 100%;
    font-family: 'Second';
  }

  .split-50-newsletter-form {
    width: 100%;
  }

  .split-50-newsletter-form .split-50-newsletter-errors:empty {
    display: none;
  }

  .split-50-newsletter-form .split-50-newsletter-errors {
    margin: 0 0 0.75rem;
    font-size: clamp(11px, 2.5vw, 14px);
    line-height: 1.4;
    font-family: 'Second';
  }

  .split-50-newsletter-form .split-50-newsletter-success {
    margin: 0 0 0.75rem;
    font-size: clamp(11px, 2.5vw, 14px);
    line-height: 1.4;
    font-family: 'Second';
  }

  .split-50-newsletter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .split-50-newsletter-input {
    flex: 1 1 10rem;
    min-width: 0;
    font: inherit;
    font-size: clamp(12px, 2.5vw, 15px);
    font-family: 'Second';
    background: transparent;
    border: none;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    box-shadow: none;
    padding: 0.4rem 0;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
  }

  .split-50-newsletter-input::placeholder {
    color: #000000;
    opacity: 1;
  }

  .split-50-newsletter-input::-webkit-input-placeholder {
    color: #000000;
  }

  .split-50-newsletter-input:hover,
  .split-50-newsletter-input:focus,
  .split-50-newsletter-input:focus-visible,
  .split-50-newsletter-input:active {
    outline: none;
    box-shadow: none;
  }

  .split-50-newsletter-register {
    background: none;
    border: none;
    margin: 0;
    padding: 0.4rem 0;
    font: inherit;
    font-family: 'Title';
    font-size: clamp(20px, 5vw, 28px);
    line-height: inherit;
    color: var(--split50-register-color, inherit);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .split-50-newsletter-register:not(:disabled):hover,
  .split-50-newsletter-register:not(:disabled):focus-visible {
    color: #d1cfbd;
  }

  .split-50-newsletter-register:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .split-50-newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    max-width: 100%;
  }

  .split-50-newsletter-checkbox {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    min-width: 18px;
    min-height: 18px;
    background-color: transparent;
    background-image: url('{{ "checkbox.svg" | asset_url }}');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    cursor: pointer;
    box-shadow: none;
    vertical-align: top;
  }

  .split-50-newsletter-checkbox:hover {
    opacity: 0.9;
  }

  .split-50-newsletter-checkbox:checked {
    background-image: url('{{ "checkbox_chk.svg" | asset_url }}');
  }

  .split-50-newsletter-checkbox:focus,
  .split-50-newsletter-checkbox:focus:active {
    outline: none;
  }

  .split-50-newsletter-checkbox:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .split-50-newsletter-consent-text {
    font-size: clamp(10px, 2vw, 12px);
    line-height: 1.5;
    font-family: 'Second';
  }

  .split-50-newsletter-consent-text a {
    text-decoration: underline;
    text-underline-offset: 0.12em;
    color: inherit;
  }

  @keyframes split50-newsletter-consent-flash {
    0%,
    100% {
      color: var(--split50-consent-color, currentColor);
    }
    50% {
      color: #ffffff;
    }
  }

  .split-50-newsletter-consent--flash {
    animation: split50-newsletter-consent-flash 1s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .split-50-newsletter-consent--flash {
      animation: none;
    }
  }

  .split-50-left-inner .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<noscript>
  <style>
    .split-50-section.split-50--reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  </style>
</noscript>

<section
  class="split-50-section split-50--reveal"
  data-section-id="{{ section.id }}"
  data-reveal-section
  data-snap-section
>
  <div class="split-50-grid{% if section.settings.swap_columns %} split-50-grid--swap{% endif %}">
    <div
      class="split-50-left"
      style="background-color: {{ section.settings.left_background }};"
    >
      <div class="split-50-left-inner">
        <div
          class="split-50-text-top"
          style="color: {{ section.settings.text_color_top }};"
        >
          {{ section.settings.text_top }}
        </div>
        <div
          class="split-50-text-middle"
          style="color: {{ section.settings.text_color_middle }};"
        >
          {{ section.settings.text_middle }}
        </div>
        <div
          class="split-50-text-bottom"
          style="color: {{ section.settings.text_color_bottom }};"
        >
          {{ section.settings.text_bottom }}
        </div>

        {%- liquid
          if section.settings.privacy_url != blank
            assign privacy_href = section.settings.privacy_url
          elsif shop.privacy_policy
            assign privacy_href = shop.privacy_policy.url
          else
            assign privacy_href = '/policies/privacy-policy'
          endif
          assign newsletter_form_id = 'NewsletterForm-' | append: section.id
        -%}

        <div
          class="split-50-newsletter-block"
          style="color: {{ section.settings.form_text_color }};"
        >
          {%- form 'customer', class: 'split-50-newsletter-form', id: newsletter_form_id -%}
            <input type="hidden" name="contact[tags]" value="newsletter, doctrine">
            {%- if form.posted_successfully? -%}
              <p
                class="split-50-newsletter-success"
                style="color: {{ section.settings.consent_text_color }};"
                role="status"
              >
                {%- if section.settings.success_message != blank -%}
                  {{ section.settings.success_message | escape }}
                {%- else -%}
                  Thanks for signing up.
                {%- endif -%}
              </p>
            {%- endif -%}

            {%- if form.errors -%}
              <div class="split-50-newsletter-errors" style="color: #b00020;">
                {{ form.errors | default_errors }}
              </div>
            {%- endif -%}

            <div class="split-50-newsletter-row">
              <label for="NewsletterEmail-{{ section.id }}" class="visually-hidden">
                Email
              </label>
              <input
                type="email"
                name="contact[email]"
                id="NewsletterEmail-{{ section.id }}"
                class="split-50-newsletter-input"
                value="{{ form.email }}"
                {%- if section.settings.email_placeholder != blank -%}
                  placeholder="{{ section.settings.email_placeholder | escape }}"
                {%- else -%}
                  placeholder="Your email"
                {%- endif -%}
                autocomplete="email"
                inputmode="email"
                required
                aria-required="true"
              >

              <button
                type="button"
                class="split-50-newsletter-register"
                data-newsletter-register
                style="--split50-register-color: {{ section.settings.register_text_color }};"
              >
                {%- if section.settings.register_label != blank -%}
                  {{ section.settings.register_label | escape }}
                {%- else -%}
                  Register
                {%- endif -%}
              </button>
            </div>

            <div class="split-50-newsletter-consent" data-newsletter-consent-wrap>
              <input
                type="checkbox"
                class="split-50-newsletter-checkbox"
                id="NewsletterAgree-{{ section.id }}"
                aria-describedby="NewsletterAgreeText-{{ section.id }}"
              >
              <span
                class="split-50-newsletter-consent-text"
                id="NewsletterAgreeText-{{ section.id }}"
                data-newsletter-consent-text
                style="
                  --split50-consent-color: {{ section.settings.consent_text_color }};
                  color: {{ section.settings.consent_text_color }};
                "
              >
                I agree to receive news from Doctrine. See our
                <a href="{{ privacy_href }}">Privacy Policy</a>
                for more information about how we handle and use personal information.
              </span>
            </div>
          {%- endform -%}
        </div>
      </div>
    </div>
    <div class="split-50-right">
      {% if section.settings.right_image != blank %}
        <img
          class="split-50-right-img"
          src="{{ section.settings.right_image | image_url: width: 2000 }}"
          alt="{{ section.settings.right_image.alt | escape }}"
          width="{{ section.settings.right_image.width }}"
          height="{{ section.settings.right_image.height }}"
          loading="lazy"
        >
      {% endif %}
    </div>
  </div>
</section>

<script>
  (function () {
    var el = document.querySelector('[data-section-id="{{ section.id }}"][data-reveal-section]');
    if (!el) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      el.classList.add('split-50--reveal-in');
      return;
    }
    if (!('IntersectionObserver' in window)) {
      el.classList.add('split-50--reveal-in');
      return;
    }
    var io = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('split-50--reveal-in');
          io.unobserve(entry.target);
        });
      },
      { root: null, rootMargin: '0px 0px -5% 0px', threshold: 0.12 }
    );
    io.observe(el);
  })();

  /* When ~30% of the section is in view, align its start to the viewport (scroll up or down) */
  (function () {
    var SNAP = 0.3;
    var el = document.querySelector('[data-section-id="{{ section.id }}"][data-snap-section]');
    if (!el || !('IntersectionObserver' in window)) return;
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var snapArmed = true;
    var thresholds = [];
    for (var t = 0; t <= 100; t++) {
      thresholds.push(t / 100);
    }
    var snapObs = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          var r = entry.intersectionRatio;
          if (r < SNAP) {
            snapArmed = true;
            return;
          }
          if (snapArmed) {
            snapArmed = false;
            var y = el.getBoundingClientRect().top + window.pageYOffset;
            window.scrollTo({ top: y, behavior: reduce ? 'auto' : 'smooth' });
          }
        });
      },
      { root: null, rootMargin: '0px', threshold: thresholds }
    );
    snapObs.observe(el);
  })();

  (function () {
    var section = document.querySelector('[data-section-id="{{ section.id }}"]');
    if (!section) return;
    var btn = section.querySelector('[data-newsletter-register]');
    var form = section.querySelector('.split-50-newsletter-form');
    var agree = section.querySelector('#NewsletterAgree-{{ section.id }}');
    var consentText = section.querySelector('[data-newsletter-consent-text]');
    if (!btn || !form || !agree || !consentText) return;
    btn.addEventListener('click', function () {
      if (!agree.checked) {
        consentText.classList.remove('split-50-newsletter-consent--flash');
        void consentText.offsetWidth;
        consentText.classList.add('split-50-newsletter-consent--flash');
        window.setTimeout(function () {
          consentText.classList.remove('split-50-newsletter-consent--flash');
        }, 1000);
        return;
      }
      if (typeof form.checkValidity === 'function' && !form.checkValidity()) {
        form.reportValidity();
        return;
      }
      if (typeof form.requestSubmit === 'function') {
        form.requestSubmit();
      } else {
        var submit = document.createElement('input');
        submit.type = 'submit';
        submit.hidden = true;
        form.appendChild(submit);
        submit.click();
        form.removeChild(submit);
      }
    });
  })();
</script>

{% schema %}
{
  "name": "Newsletter",
  "settings": [
    {
      "type": "checkbox",
      "id": "swap_columns",
      "label": "Swap columns (image and text switch sides)",
      "default": false
    },
    {
      "type": "text",
      "id": "text_top",
      "label": "Top text"
    },
    {
      "type": "text",
      "id": "text_middle",
      "label": "Middle text"
    },
    {
      "type": "text",
      "id": "text_bottom",
      "label": "Bottom text"
    },
    {
      "type": "header",
      "content": "Newsletter form"
    },
    {
      "type": "text",
      "id": "email_placeholder",
      "label": "Email placeholder",
      "default": "Your email"
    },
    {
      "type": "text",
      "id": "register_label",
      "label": "Register button label",
      "default": "Register"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Message after sign up",
      "default": "Thanks for signing up."
    },
    {
      "type": "url",
      "id": "privacy_url",
      "label": "Privacy policy URL (optional, defaults to your store policy)"
    },
    {
      "type": "color",
      "id": "form_text_color",
      "label": "Email field and row text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "register_text_color",
      "label": "Register button text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "consent_text_color",
      "label": "Consent line text and link",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "left_background",
      "label": "Left column background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color_top",
      "label": "Top text color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "text_color_middle",
      "label": "Middle text color",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "text_color_bottom",
      "label": "Bottom text color",
      "default": "#111111"
    },
    {
      "type": "image_picker",
      "id": "right_image",
      "label": "Right image (square area)"
    }
  ],
  "presets": [
    {
      "name": "Newsletter"
    }
  ]
}
{% endschema %}