/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'component-image-with-text.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
Line 21:0 Unexpected "{"
... and 143 more hidden warnings

**/
{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

{% assign background_section_rgb = section.settings['section-color-overlay'] | color_to_rgb %}
{% assign heading_rgb = section.settings['section-color-body-text'] | color_to_rgb %}
{% assign background_rgb = section.settings['color-overlay'] | color_to_rgb %}
{% assign text_rgb = section.settings['color-body-text'] | color_to_rgb %}

{% for block in section.blocks %}
  {% if block.type == 'text' %}
    <style>
      [data-section-id="{{ section.id }}"] [data-block-id="{{ block.id }}"] .selling-point {
        --selling-point-background-color: {{ block.settings.selling_point_background_color | default: '#ffffff' }};
        --selling-point-border-color: {{ block.settings.selling_point_border_color | default: '#000000' }};
        --selling-point-text-color: {{ block.settings.selling_point_text_color | default: '#000000' }};
        --selling-point-border-width: {{ block.settings.selling_point_border_width | default: 1 }}px;
        --selling-point-border-radius: {{ block.settings.selling_point_border_radius | default: 20 }}px;
      }
    </style>
  {% endif %}
{% endfor %}

<style>
  section[id="shopify-section-{{ section.id }}"] {
    {% if background_section_rgb != 'rgba(0, 0, 0, 0.0)' %}
      --color-overlay-rgb: {{ section.settings.section-color-overlay | color_to_rgb | remove: 'rgb(' | remove: ')' }};
      --color-overlay-opacity: {{ section.settings.section-color-overlay-opacity | divided_by: 100.0 }};
    {% endif %}
  }

  section[id="shopify-section-{{ section.id }}"] .headline__title {
    {% if heading_rgb != 'rgba(0, 0, 0, 0.0)' %}
      --color-custom-text: {{ section.settings.section-color-body-text }};
    {% endif %}
  }

  [data-section-id="{{ section.id }}"] {
    {% if background_rgb != 'rgba(0, 0, 0, 0.0)' %}
      --color-overlay-rgb: {{ section.settings.color-overlay | color_to_rgb | remove: 'rgb(' | remove: ')' }};
      --color-overlay-opacity: {{ section.settings.color-overlay-opacity | divided_by: 100.0 }};
    {% endif %}
    {% if section.settings.full-width-enabled %}
      --border-radius: 0;
    {% endif %}
    {% if section.settings.margin-top %}
      --section-gap-top: {{ section.settings.margin-top }}px;
    {% endif %}
    {% if section.settings.margin-bottom %}
      --section-gap-bottom: {{ section.settings.margin-bottom }}px;
    {% endif %}
    --desktop-percentage-image-width: {{ section.settings.desktop-percentage-image-width }}%;
    {% if section.settings.slide_height == 'fixed_height' %}
      --section-height: {{ section.settings.mobile_fixed_height }}px;
      --section-height-desk: {{ section.settings.desktop_fixed_height }}px;
    {% endif %}
    {% if section.settings.slide_height == 'adapt_to_first_image' %}
      --first-slide-ratio: {{ section.blocks.first.settings.mobile_image.aspect_ratio | default: 1 }};
      --first-slide-ratio-desk: {{ section.blocks.first.settings.desktop_image.aspect_ratio | default: 2.5 }};
    {% endif %}
  }

  [data-section-id="{{ section.id }}"] .hero {
    {% if text_rgb != 'rgba(0, 0, 0, 0.0)' %}
      --color-custom-text: {{ section.settings.color-body-text }};
    {% endif %}
  }

  [data-section-id="{{ section.id }}"] .hero__overlay__content {
    display: block !important;
    text-align: left !important;
    padding: 16px !important;
  }

  [data-section-id="{{ section.id }}"] .hero__text {
    display: block !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: {{ section.settings.color-body-text | default: '#000000' }} !important;
  }

  [data-section-id="{{ section.id }}"] .hero__text p {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  [data-section-id="{{ section.id }}"] [data-block-id] .selling-points {
    display: block !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
  }

  [data-section-id="{{ section.id }}"] [data-block-id] .selling-point {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background-color: var(--selling-point-background-color, #ffffff) !important;
    border: var(--selling-point-border-width, 1px) solid var(--selling-point-border-color, #000000) !important;
    border-radius: var(--selling-point-border-radius, 20px) !important;
    color: var(--selling-point-text-color, #000000) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
  }

  [data-section-id="{{ section.id }}"] .hero__button--gap {
    display: block !important;
    margin-top: 16px !important;
  }

  @media (max-width: 767px) {
    [data-section-id="{{ section.id }}"] .hero--grid {
      display: block !important;
    }
    [data-section-id="{{ section.id }}"] .hero__text {
      font-size: 14px !important;
    }
    [data-section-id="{{ section.id }}"] .hero__text p {
      font-size: 14px !important;
    }
    [data-section-id="{{ section.id }}"] [data-block-id] .selling-points {
      gap: 6px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
    }
    [data-section-id="{{ section.id }}"] [data-block-id] .selling-point {
      font-size: 12px !important;
      padding: 4px 8px !important;
    }
  }

  @media (max-width: 479px) {
    [data-section-id="{{ section.id }}"] [data-block-id] .selling-points {
      gap: 5px !important;
    }
    [data-section-id="{{ section.id }}"] [data-block-id] .selling-point {
      font-size: 12px !important;
      padding: 3px 6px !important;
    }
  }
</style>

{% if section.settings.layout == 'text_first' %}
  {% assign customclass = 'hero--grid hero--grid--rev' %}
{% else %}
  {% assign customclass = 'hero--grid' %}
{% endif %}

{% if section.settings['full-width-enabled'] %}
  {% assign customwrapperclass = 'hero__wrapper--full' %}
{% else %}
  {% assign customwrapperclass = 'hero__wrapper' %}
{% endif %}

<div
  data-section-id="{{ section.id }}"
  class="{{ customwrapperclass }} {% if settings.animations %} scroll-trigger animate--slide-in {% endif %} {% if settings.disabled_animations_on_mobile %} disabled-on-mobile {% endif %}"
>
  {% render 'headline', title: section.settings.title %}
  <div class="{% if settings.animations %} scroll-trigger animate--slide-in {% endif %} {% if settings.disabled_animations_on_mobile %} disabled-on-mobile {% endif %}">
    {% render 'hero',
      type: 'blocks',
      classname: customclass,
      desktop_text_horizontal_position: section.settings.desktop_text_horizontal_position,
      desktop_text_vertical_position: section.settings.desktop_text_vertical_position,
      mobile_text_horizontal_position: section.settings.mobile_text_horizontal_position,
      mobile_text_vertical_position: section.settings.mobile_text_vertical_position,
      desktop_image: section.settings.desktop_image,
      mobile_image: section.settings.mobile_image,
      placeholder: 'detailed-apparel-1',
      blocks: section.blocks
    %}
  </div>
</div>

{% schema %}
{
  "name": "Image with text",
  "tag": "section",
  "class": "section-image-with-text",
  "settings": [
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "textarea",
      "id": "title",
      "label": "Title",
      "default": "Image with text"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        { "value": "image_first", "label": "Image first" },
        { "value": "text_first", "label": "Text first" }
      ],
      "default": "image_first",
      "label": "Layout",
      "info": "Choose the order of image and text"
    },
    {
      "type": "range",
      "id": "desktop-percentage-image-width",
      "min": 30,
      "max": 70,
      "step": 1,
      "unit": "%",
      "default": 50,
      "label": "Desktop image width"
    },
    {
      "type": "checkbox",
      "id": "full-width-enabled",
      "label": "Full width",
      "default": true
    },
    {
      "type": "header",
      "content": "Section height"
    },
    {
      "type": "select",
      "id": "slide_height",
      "label": "Slide height",
      "options": [
        { "value": "adapt_to_first_image", "label": "Adapt to first image" },
        { "value": "fixed_height", "label": "Fixed height" }
      ],
      "default": "fixed_height",
      "info": "Choose how the section height is determined"
    },
    {
      "type": "range",
      "id": "desktop_fixed_height",
      "min": 200,
      "max": 1000,
      "unit": "px",
      "step": 20,
      "default": 320,
      "label": "Desktop height",
      "info": "Set a fixed height for desktop"
    },
    {
      "type": "range",
      "id": "mobile_fixed_height",
      "min": 400,
      "max": 1000,
      "unit": "px",
      "step": 20,
      "default": 600,
      "label": "Mobile height",
      "info": "Set a fixed height for mobile"
    },
    {
      "type": "header",
      "content": "Colors",
      "info": "Customize section colors"
    },
    {
      "type": "color",
      "id": "section-color-body-text",
      "default": "#000000",
      "label": "Heading color"
    },
    {
      "type": "color",
      "id": "section-color-overlay",
      "default": "transparent",
      "label": "Section background color"
    },
    {
      "type": "range",
      "id": "section-color-overlay-opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 100,
      "label": "Background opacity"
    },
    {
      "type": "color",
      "id": "color-body-text",
      "default": "#000000",
      "label": "Text color"
    },
    {
      "type": "color",
      "id": "color-overlay",
      "default": "transparent",
      "label": "Text container color"
    },
    {
      "type": "range",
      "id": "color-overlay-opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "default": 100,
      "label": "Background opacity"
    },
    {
      "type": "header",
      "content": "Desktop version"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "desktop_text_vertical_position",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "center", "label": "Center" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "center",
      "label": "Vertical text position"
    },
    {
      "type": "select",
      "id": "desktop_text_horizontal_position",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Horizontal text position"
    },
    {
      "type": "header",
      "content": "Mobile version"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image"
    },
    {
      "type": "select",
      "id": "mobile_text_horizontal_position",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Horizontal text position"
    },
    {
      "type": "select",
      "id": "mobile_text_vertical_position",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "center", "label": "Center" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "center",
      "label": "Vertical text position"
    },
    {
      "type": "header",
      "content": "Section spacing"
    },
    {
      "type": "range",
      "id": "margin-top",
      "min": 0,
      "max": 100,
      "unit": "px",
      "step": 4,
      "default": 20,
      "label": "Top margin"
    },
    {
      "type": "range",
      "id": "margin-bottom",
      "min": 0,
      "max": 100,
      "unit": "px",
      "step": 4,
      "default": 20,
      "label": "Bottom margin",
      "info": "Distance from the section below"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "#Brand",
          "label": "Heading"
        },
        {
          "type": "checkbox",
          "id": "disable_on_mobile",
          "default": false,
          "label": "Disable on mobile"
        },
        {
          "type": "range",
          "id": "size_heading",
          "min": 100,
          "max": 500,
          "step": 10,
          "default": 100,
          "label": "Desktop heading size",
          "unit": "%"
        },
        {
          "type": "range",
          "id": "size_heading_mobile",
          "min": 80,
          "max": 300,
          "step": 10,
          "default": 100,
          "label": "Mobile heading size",
          "unit": "%"
        }
      ]
    },
    {
      "type": "subheading",
      "name": "Subheading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "subheading",
          "default": "Tell your story",
          "label": "Subheading"
        },
        {
          "type": "checkbox",
          "id": "subheading_disable_on_mobile",
          "default": false,
          "label": "Disable on mobile"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Text"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            { "value": "subtitle", "label": "Subtitle" },
            { "value": "body", "label": "Body" }
          ],
          "default": "body",
          "label": "Text style"
        },
        {
          "type": "checkbox",
          "id": "disable_on_mobile",
          "default": false,
          "label": "Disable on mobile"
        },
        {
          "type": "header",
          "content": "Selling Points"
        },
        {
          "type": "text",
          "id": "selling_point_1",
          "default": "Free Shipping",
          "label": "Selling point 1 text"
        },
        {
          "type": "text",
          "id": "selling_point_2",
          "default": "30-Day Returns",
          "label": "Selling point 2 text"
        },
        {
          "type": "text",
          "id": "selling_point_3",
          "label": "Selling point 3 text"
        },
        {
          "type": "text",
          "id": "selling_point_4",
          "label": "Selling point 4 text"
        },
        {
          "type": "text",
          "id": "selling_point_5",
          "label": "Selling point 5 text"
        },
        {
          "type": "text",
          "id": "selling_point_6",
          "label": "Selling point 6 text"
        },
        {
          "type": "text",
          "id": "selling_point_7",
          "label": "Selling point 7 text"
        },
        {
          "type": "color",
          "id": "selling_point_background_color",
          "default": "#ffffff",
          "label": "Selling points background color"
        },
        {
          "type": "color",
          "id": "selling_point_border_color",
          "default": "#000000",
          "label": "Selling points border color"
        },
        {
          "type": "color",
          "id": "selling_point_text_color",
          "default": "#000000",
          "label": "Selling points text color"
        },
        {
          "type": "range",
          "id": "selling_point_border_radius",
          "min": 0,
          "max": 50,
          "step": 1,
          "unit": "px",
          "default": 20,
          "label": "Selling points border radius"
        },
        {
          "type": "range",
          "id": "selling_point_border_width",
          "min": 0,
          "max": 5,
          "step": 1,
          "unit": "px",
          "default": 1,
          "label": "Selling points border width"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "button_select",
          "options": [
            { "value": "primary", "label": "Primary" },
            { "value": "secondary", "label": "Secondary" },
            { "value": "link", "label": "Link" }
          ],
          "default": "primary",
          "label": "Button style"
        },
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link",
          "default": "/"
        },
        {
          "type": "checkbox",
          "id": "disable_on_mobile",
          "default": false,
          "label": "Disable on mobile"
        }
      ]
    },
    {
      "type": "countdown_timer",
      "name": "Countdown timer",
      "settings": [
        {
          "type": "text",
          "id": "end_datetime",
          "default": "2025-12-31 23:59",
          "label": "End date and time",
          "placeholder": "YYYY-MM-DD HH:MM",
          "info": "Format: YYYY-MM-DD HH:MM (24-hour)"
        },
        {
          "type": "text",
          "id": "expired_message",
          "label": "Expired message"
        },
        {
          "type": "checkbox",
          "id": "labels_below",
          "label": "Show labels below",
          "default": true
        },
        {
          "type": "select",
          "id": "timer_style",
          "label": "Timer style",
          "options": [
            { "value": "headline", "label": "Headline" },
            { "value": "text", "label": "Text" }
          ],
          "default": "text"
        },
        {
          "type": "range",
          "id": "scale_timer",
          "min": 100,
          "max": 500,
          "step": 10,
          "default": 100,
          "label": "Desktop timer scale",
          "unit": "%"
        },
        {
          "type": "range",
          "id": "scale_timer_mobile",
          "min": 80,
          "max": 300,
          "step": 10,
          "default": 100,
          "label": "Mobile timer scale",
          "unit": "%"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image with text",
      "blocks": [
        { "type": "subheading" },
        { "type": "heading" },
        {
          "type": "text",
          "settings": {
            "selling_point_1": "Free Shipping",
            "selling_point_2": "30-Day Returns",
            "selling_point_3": "Secure Checkout"
          }
        },
        { "type": "button" }
      ]
    },
    {
      "name": "Image with countdown timer",
      "blocks": [
        { "type": "countdown_timer" },
        {
          "type": "text",
          "settings": {
            "selling_point_1": "Limited Offer",
            "selling_point_2": "Fast Delivery"
          }
        },
        { "type": "button" }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}