/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 19:3 Unexpected "{"
Line 19:5 Expected identifier but found "'component-newsletter.css'"
Line 20:2 Unexpected "{"
Line 20:3 Unexpected "{"
Line 20:5 Expected identifier but found "'newsletter-section.css'"
Line 21:0 Unexpected "<"
Line 23:1 Expected identifier but found "%"
Line 29:2 Unexpected "{"
Line 29:3 Expected identifier but found "%"
... and 228 more hidden warnings

**/
<link rel="preload" href="{{ 'component-newsletter.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="{{ 'newsletter-section.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  {{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
  {{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
</noscript>

{%- style -%}
  @media screen and (min-width: 550px) {
    .ab-newsletter .image-mob {
      display: none!important;
    }
  }
  {%- if section.settings.image_mobile != blank -%}
    @media screen and (max-width: 549px) {
      .ab-newsletter .image-desct {
        display: none!important;
      }
    }
  {%- endif -%}
  #shopify-section-{{ section.id }} .media:after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
  @media screen and (max-width: 549px) {
    #shopify-section-{{ section.id }} .media:after {
      opacity: {{ section.settings.mobile_image_overlay_opacity | divided_by: 100.0 }};
    }
  }

  @media screen and (max-width: 749px) {
    #shopify-section-{{ section.id }} {
      margin-top: {{ section.settings.section_top_padding | divided_by: 18.7 }}rem;
      margin-bottom: {{ section.settings.section_bottom_padding | divided_by: 18.7 }}rem;
    }
  }
  @media screen and (min-width: 750px) and (max-width: 1199px) {
    #shopify-section-{{ section.id }} {
      margin-top: {{ section.settings.section_top_padding | divided_by: 15.0 }}rem;
      margin-bottom: {{ section.settings.section_bottom_padding | divided_by: 15.0 }}rem;
    }
  }
  @media screen and (min-width: 1200px) {
    #shopify-section-{{ section.id }} {
      margin-top: {{ section.settings.section_top_padding | divided_by: 10.0 }}rem;
      margin-bottom: {{ section.settings.section_bottom_padding | divided_by: 10.0 }}rem;
    }
  }

  {% if section.settings.color_bg != blank %}
    #shopify-section-{{ section.id }} {
      background-color: {{ section.settings.color_bg }};
    }
  {% endif %}

  {% if settings.placeholder_color != blank and settings.form_style_enabled == true %}
    #shopify-section-{{ section.id }} .field__label {
			color: {{ settings.placeholder_color }};
    }
  {% endif %}

  .newsletter__wrapper {
    padding: 6rem 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-color: {{ section.settings.color_bg }};
    display: flex;
    justify-content: center;
  }

  .newsletter__wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: {{ section.settings.overlay_color }};
    opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
    pointer-events: none;
  }

  .newsletter__content {
    width: 100%;
    max-width: 85%;
    padding: 0 4rem;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .newsletter__text-column {
    padding-right: 4rem;
    max-width: 100%;
  }

  .newsletter__form-column {
    padding-left: 4rem;
    max-width: 100%;
  }

  .newsletter__heading {
    font-size: {{ section.settings.heading_size | divided_by: 10.0 }}rem;
    margin-bottom: 0;
    color: {{ section.settings.heading_color }};
    line-height: 1.2;
    font-weight: {{ section.settings.heading_weight }};
  }

  .newsletter__heading-secondary {
   
    font-size: {{ section.settings.heading_secondary_size | divided_by: 10.0 }}rem;
    margin-bottom: 2rem !important;
    color: {{ section.settings.heading_color }};
    line-height: 1.2;
    font-weight: {{ section.settings.heading_secondary_weight }};
    margin: 0 !important;
    padding: 0 !important;

  }

  .newsletter__subheading {
     width: 55%;
    font-size: {{ section.settings.text_size | divided_by: 10.0 }}rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: {{ section.settings.text_color }};
    line-height: 1.5;
    font-weight: {{ section.settings.text_weight }};
  }

  .newsletter__offer {
    width: 55%;
    font-size: {{ section.settings.offer_size | divided_by: 10.0 }}rem;
    margin-bottom: 2rem;
    color: {{ section.settings.text_color }};
    line-height: 1.5;
    font-weight: {{ section.settings.offer_weight }};
  }

  .newsletter__note {
    font-size: {{ section.settings.note_size | divided_by: 10.0 }}rem;
    margin-top: 1rem;
    color: {{ section.settings.note_color }};
    line-height: 1.4;
    font-weight: {{ section.settings.note_weight }};
  }

  .newsletter-form__field-wrapper .field {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
    align-items: center;
  }

  .field__input {
    flex: 1;
    height: 4.5rem;
    padding: 0 1.5rem;
    border: none;
    font-size: 1.4rem;
    border-radius: 2px;
    outline: none;
  }

  .newsletter-form__field-wrapper .button {
    background-color: {{ section.settings.button_bg_color }};
    color: {{ section.settings.button_text_color }};
    border: none;
    padding: 0 2.5rem;
    min-width: auto;
    height: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    background: #000000;
    transition: background-color 0.3s ease;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .newsletter-form__field-wrapper .button:hover {
    background-color: #333333;
  }

  .newsletter-form__checkbox {
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.6);
  }

  .newsletter-form__checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    cursor: pointer;
  }

  .newsletter-form__checkbox input[type="checkbox"]:checked {
    background: #000000;
    border-color: #000000;
  }

  .newsletter-form__checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .newsletter-form__checkbox label {
    color: {{ section.settings.text_color }};
    font-size: 1.2rem;
    line-height: 1.4;
  }

  @media screen and (max-width: 989px) {
      .newsletter__subheading{
        width: 100%;
      }
      .newsletter__offer{
        width: 100%;
      }
    .newsletter__content {
      grid-template-columns: 1fr;
      gap: 4rem;
      padding: 0 2rem;
    }

    .newsletter__text-column,
    .newsletter__form-column {
    
      padding: 0;
      max-width: 100%;
      margin: 0;
    }
  }

  @media screen and (max-width: 749px) {
    .newsletter__content {
      padding: 0 1.5rem;
    }
    
    .newsletter__wrapper {
      padding: 4rem 0;
    }

    .newsletter__heading {
      font-size: 2.4rem;
    }

    .newsletter-form__field-wrapper .field {
      flex-direction: column;
      gap: 1rem;
      align-items: stretch;
    }

    .field__input {
      width: 100%;
    }

    .newsletter-form__field-wrapper .button {
      width: 100%;
      height: 4.5rem;
    }
  }
{%- endstyle -%}

{% liquid 
  if section.settings.image != blank
    assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
  endif
  if section.settings.image_mobile != blank
    assign image_height_mobile = section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio
  endif
%}

<div class="ab-newsletter newsletter
  {% if section.settings.column_alignment == 'right' %} right{% elsif section.settings.column_alignment == 'left' %} left {% else %} center{% endif %}
  {% if section.settings.image_position == 'left' %} image-left{% elsif section.settings.image_position == 'right' %} image-right{% endif %}
  {% if section.settings.full_width == false %} newsletter--narrow page-width{% endif %}
  {% if section.settings.image_position_mobile == 'bottom' %} bottom{% endif %}">

  <div class="media{% if section.settings.image == blank %} placeholder{% endif %} {% if section.settings.image_position_mobile != "none" %}image__mobile {% endif %}{% if settings.theme_animations != 'no-animation' %} aside-media scroll-animation{% endif %}">
    {%- if section.settings.image != blank -%}
        {{
          section.settings.image
          | image_url: width: 1840
          | image_tag:
            loading: 'lazy',
            width: section.settings.image.width,
            height: image_height,
            class: 'lazy image-desct',
            sizes: '100vw',
            widths: '375, 550, 750, 950, 1100, 1360, 1440, 1500, 1600, 1780, 1900, 2000'
        }}
      {%- if section.settings.image_mobile != blank -%}
        {{
          section.settings.image_mobile
          | image_url: width: 450
          | image_tag:
            loading: 'lazy',
            width: section.settings.image.width,
            height: image_height_mobile,
            class: 'lazy image-mob',
            sizes: '100vw',
            widths: '375, 400, 425, 450, 475, 500, 550'
        }}
      {%- endif -%}
    {%- endif -%}
    
    {% if section.settings.image_position != "background" and section.settings.image == blank %}
      {{ 'collection-1' | placeholder_svg_tag }}
    {% endif %}
  </div>

  <div class="newsletter__wrapper{% if section.settings.column_color == 'dark' %} dark{% else %} light{% endif %}{% if section.settings.image == blank %} placeholder-bg{% endif %}{% if settings.theme_animations != 'no-animation' %} aside-text scroll-animation{% endif %}">
    <div class="newsletter__content">
      <div class="newsletter__text-column">
        <h2 class="newsletter__heading">{{ section.settings.heading | escape }}</h2>
        <h3 class="newsletter__heading-secondary">{{ section.settings.heading_secondary | escape }}</h3>
        <div class="newsletter__subheading">{{ section.settings.subheading }}</div>
        <div class="newsletter__offer">{{ section.settings.offer_text }}</div>
        <div class="newsletter__note">{{ section.settings.note_text }}</div>
      </div>

      <div class="newsletter__form-column">
        {% form 'customer', 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"
                placeholder="{{ 'newsletter.label' | t }}"
                required
              >
              <button type="submit" class="button" name="commit">
                {{ 'newsletter.button_label' | t }}
              </button>
            </div>

            <div class="newsletter-form__checkbox">
              <input type="checkbox" id="newsletter-consent-{{ section.id }}" required>
              <label for="newsletter-consent-{{ section.id }}">
                {{ section.settings.consent_text }}
              </label>
            </div>

            {%- if form.errors -%}
              <small class="newsletter-form__message form__message">
                {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
              </small>
            {%- endif -%}

            {%- if form.posted_successfully? -%}
              <div class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>
                {% render 'icon-success' %}{{ 'newsletter.success' | t }}
              </div>
            {%- endif -%}
          </div>
        {% endform %}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Email signup",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "disabled_on": {
    "groups": [
      "header",
      "footer"
    ]
  },
  "settings": [
    {
      "type": "header",
      "content": "Image settings"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "Image overlay opacity",
      "default": 60
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Image for mobile",
      "info": "Not required, recommended max width 550px"
    },
    {
      "type": "range",
      "id": "mobile_image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "Image overlay opacity (mobile)",
      "default": 60
    },
    {
      "type": "select",
      "id": "image_position",
      "options": [
        {
          "value": "background",
          "label": "Background"
        },
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "background",
      "label": "Image position desktop"
    },
    {
      "type": "select",
      "id": "image_position_mobile",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ],
      "default": "none",
      "label": "Image position(mobile)"
    },
    {
      "type": "header",
      "content": "Form settings"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center",
      "label": "Text aligment"
    },
    {
      "type": "select",
      "id": "column_color",
      "options": [
        {
          "value": "light",
          "label": "Light"
        },
        {
          "value": "dark",
          "label": "Dark"
        }
      ],
      "default": "light",
      "label": "Text color"
    },
    {
      "type": "select",
      "id": "button_style",
      "options": [
        {
          "value": "btn_primary",
          "label": "Primary"
        },
        {
          "value": "btn_secondary",
          "label": "Secondary"
        }
      ],
      "default": "btn_primary",
      "label": "Button color style"
    },
    {
      "type": "select",
      "id": "button_type",
      "options": [
        {
          "value": "button",
          "label": "t:sections.buttons.select_button_default"
        },
        {
          "value": "button_icon",
          "label": "t:sections.buttons.select_button_default_icon"
        },
        {
          "value": "button_outline",
          "label": "t:sections.buttons.select_button_outline"
        },
        {
          "value": "button_outline_icon",
          "label": "t:sections.buttons.select_button_outline_icon"
        },
        {
          "value": "inline_button",
          "label": "t:sections.buttons.select_button_inline"
        },
        {
          "value": "button_with_underline",
          "label": "t:sections.buttons.select_button_with_underline"
        },
        {
          "value": "button_underline",
          "label": "t:sections.buttons.select_button_underline"
        }
      ],
      "default": "button",
      "label": "t:sections.buttons.select_button_type"
    },
    {
      "type": "select",
      "id": "button_width",
      "options": [
        {
          "value": "btn-full-width",
          "label": "Full width"
        },
        {
          "value": "btn-content-width",
          "label": "Content"
        }
      ],
      "default": "btn-content-width",
      "label": "Form button width"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "section_top_padding",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_bottom_padding",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 0
    },
    {
      "type": "color",
      "id": "color_bg",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "Overlay color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Overlay opacity",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Join The Family"
    },
    {
      "type": "text",
      "id": "heading_secondary",
      "label": "Secondary heading",
      "default": "10% offerts"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Subscribe to our newsletter to discover the latest design trends, news, and exclusive invitations."
    },
    {
      "type": "text",
      "id": "offer_text",
      "label": "Offer text",
      "default": "The best part: we offer 10% off your first order over €500"
    },
    {
      "type": "text",
      "id": "note_text",
      "label": "Note text",
      "default": "*Offer valid from €500 purchase and limited to €100 maximum discount per order. The code is valid 60 days from your registration. Offer not combinable with other discounts."
    },
    {
      "type": "text",
      "id": "consent_text",
      "label": "Consent text",
      "default": "By subscribing, you agree to our terms and conditions and privacy policy. You can unsubscribe at any time."
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Button settings"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 20,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 32
    },
    {
      "type": "select",
      "id": "heading_weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600",
      "label": "Heading weight"
    },
    {
      "type": "range",
      "id": "heading_secondary_size",
      "min": 20,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Secondary heading size",
      "default": 28
    },
    {
      "type": "select",
      "id": "heading_secondary_weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600",
      "label": "Secondary heading weight"
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 16
    },
    {
      "type": "select",
      "id": "text_weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        }
      ],
      "default": "400",
      "label": "Text weight"
    },
    {
      "type": "range",
      "id": "offer_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Offer text size",
      "default": 14
    },
    {
      "type": "select",
      "id": "offer_weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        }
      ],
      "default": "400",
      "label": "Offer text weight"
    },
    {
      "type": "range",
      "id": "note_size",
      "min": 10,
      "max": 16,
      "step": 1,
      "unit": "px",
      "label": "Note text size",
      "default": 12
    },
    {
      "type": "select",
      "id": "note_weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        }
      ],
      "default": "400",
      "label": "Note text weight"
    },
    {
      "type": "color",
      "id": "note_color",
      "label": "Note text color",
      "default": "#666666"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "heading",
          "default": "<p>Subscribe to our emails</p>",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "text_color",
          "options": [
            {
              "value": "color-text-main",
              "label": "Main"
            },
            {
              "value": "color-text-secondary",
              "label": "Secondary"
            },
            {
              "value": "color-general-heading",
              "label": "Heading"
            }
          ],
          "default": "color-text-main",
          "label": "Heading color"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Add descriptive text to invite your users to sign up for your newsletter.</p>",
          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
        },
        {
          "type": "select",
          "id": "description_size",
          "options": [
            {
              "value": "large",
              "label": "Large"
            },
            {
              "value": "",
              "label": "Medium"
            },
            {
              "value": "small",
              "label": "Small"
            }
          ],
          "default": "",
          "label": "Subheading font size"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.newsletter.blocks.email_form.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "Email signup",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}