/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 252:0 Unexpected "<"
Line 254:1 Expected identifier but found "%"
Line 255:0 Unexpected "{"
Line 255:1 Expected identifier but found "%"
Line 256:0 Unexpected "{"
Line 256:1 Expected identifier but found "%"
Line 258:0 Unexpected "{"
Line 258:1 Expected identifier but found "%"
Line 259:0 Unexpected "{"
... and 285 more hidden warnings

**/
<link rel="stylesheet" href="{{ 'home-hero-banner.build.css' | asset_url }}">

<style>
  @media screen and (min-width: 768px) {
    .hidden--desktop {
      display: none;
    }
    
    /* Fix desktop - ensure media stays absolutely positioned with no padding */
    .home-hero-banner .home-hero-banner__media {
      position: absolute !important;
      padding-top: 0 !important;
      padding: 0 !important;
    }
  }
  
  /* Desktop video - ULTRA AGGRESSIVE */
  video.home-hero-banner__video--desktop,
  .home-hero-banner__video--desktop,
  video.js-video-desktop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }
  
  /* On desktop: hide mobile video */
  @media screen and (min-width: 768px) {
    .home-hero-banner__video--mobile,
    video.home-hero-banner__video--mobile {
      display: none !important;
    }
  }
  
  /* On mobile: show mobile video, hide desktop */
  @media screen and (max-width: 767px) {
    .home-hero-banner__video--desktop,
    video.home-hero-banner__video--desktop {
      display: none !important;
    }
    
    .home-hero-banner .home-hero-banner__video.home-hero-banner__video--mobile {
      display: block !important;
    }
  }
  
	.slide_link,
.slide_link_video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 1;
}

/* ===== ADDED for pink overlay extension (scoped to this section) ===== */
.home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__content {
  position: relative;
}

.home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__content-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;   /* where the pink panel should begin */
  right: 0;    /* extend to the right edge */
  z-index: 0;  /* behind text/buttons */
  pointer-events: none;
}

/* make sure text/buttons sit above the overlay */
.home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__title,
.home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__description,
.home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__button-container {
  position: relative;
  z-index: 1;
}

/* Optional: full-width on smaller screens */
@media (max-width: 767px) {
  .home-hero-banner[data-section-id="{{ section.id }}"] .home-hero-banner__content-overlay {
    left: 0;
  }
}
/* ===== END ADDED ===== */

/* ===== ADDED: Remove padding when no buttons ===== */
.home-hero-banner__button-container--empty,
.home-hero-banner .home-hero-banner__button-container--empty,
.home-hero-banner__slide .home-hero-banner__button-container--empty,
.home-hero-banner__content .home-hero-banner__button-container--empty {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  display: none !important;
}

/* Ensure it works on mobile too */
@media screen and (max-width: 767px) {
  .home-hero-banner__button-container--empty,
  .home-hero-banner .home-hero-banner__button-container--empty,
  .home-hero-banner__slide .home-hero-banner__button-container--empty,
  .home-hero-banner__content .home-hero-banner__button-container--empty {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  .home-hero-banner__button-container--empty,
  .home-hero-banner .home-hero-banner__button-container--empty,
  .home-hero-banner__slide .home-hero-banner__button-container--empty,
  .home-hero-banner__content .home-hero-banner__button-container--empty {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    display: none !important;
  }
}
/* ===== END ADDED ===== */

/* ===== ADDED: Hide overlay when no buttons ===== */
.home-hero-banner__content-overlay--empty {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
}

/* Remove padding from content container when empty - ULTRA AGGRESSIVE */
.home-hero-banner .home-hero-banner__content.home-hero-banner__content--empty,
.home-hero-banner__content--empty,
div.home-hero-banner__content--empty {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 767px) {
  .home-hero-banner .home-hero-banner__content.home-hero-banner__content--empty,
  .home-hero-banner__content--empty,
  div.home-hero-banner__content--empty {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 991px) {
  .home-hero-banner .home-hero-banner__content.home-hero-banner__content--empty,
  .home-hero-banner__content--empty,
  div.home-hero-banner__content--empty {
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
}

/* ===== MOBILE FIX: Remove white space on mobile when no content ===== */
@media (max-width: 767px) {
  /* Remove any min-height from slide container on mobile */
  .home-hero-banner__slide-container.home-hero-banner__min-height:not(:has(.home-hero-banner__content)),
  .home-hero-banner__slide-container:not(:has(.home-hero-banner__content)) {
    min-height: 0 !important;
    height: auto !important;
  }
  
  /* Ensure media container takes full height on mobile */
  .home-hero-banner__media {
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .home-hero-banner__media-container {
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove any top padding/margin from the slide itself */
  .home-hero-banner__slide {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
/* ===== END MOBILE FIX ===== */
/* ===== END ADDED ===== */
</style>

{%- assign autoplay         = section.settings.autoplay -%}
{%- assign autoplay_enable  = section.settings.autoplay_enable -%}
{%- assign blocks           = section.blocks -%}

{%- unless autoplay_enable -%}
{%- assign autoplay = 0 -%}
{%- endunless -%}

{%- if autoplay != blank and blocks.size > 0 -%}
	<section
		class="home-hero-banner"
		data-section-id="{{- section.id -}}"
		data-section-type="home-hero-banner"
	>
		<div
			class="swiper-container home-hero-banner__slider js-slider"
			data-autoplay="{{- autoplay -}}"
		>
			<div class="swiper-wrapper">
				{%- for block in blocks -%}
					{%- assign image                   = block.settings.image -%}
					{%- assign image_tablet            = block.settings.image_tablet | default: image -%}
					{%- assign image_mobile            = block.settings.image_mobile | default: image_tablet -%}
					{%- assign video_url               = block.settings.video_url -%}
					{%- assign video_url_mobile        = block.settings.video_url_mobile | default: video_url -%}
              		{%- assign video_poster            = block.settings.video_poster -%}
					{%- assign horizontal_alignment    = block.settings.horizontal_alignment -%}
					{%- assign content_above_image     = block.settings.content_above_image -%}
					{%- assign vertical_alignment      = block.settings.vertical_alignment -%}
					{%- assign header                  = block.settings.header -%}
					{%- assign header_font_size_mobile     = block.settings.header_font_size_mobile -%}
					{%- assign header_font_size_desktop     = block.settings.header_font_size_desktop -%}
					{%- assign description             = block.settings.description -%}
					{%- assign url                     = block.settings.url -%}
					{%- assign button_text             = block.settings.button_text -%}
					{%- assign url_second                     = block.settings.url_second -%}
					{%- assign button_text_second             = block.settings.button_text_second -%}
					{%- assign background_color        = block.settings.background_color | default: "#F6C080" -%}
					{%- assign text_color              = block.settings.text_color | default: "#003452" -%}
					
					{%- assign slide_link = block.settings.slide_link -%}
					{%- assign slide_link_video = block.settings.slide_link_video -%}

					{%- assign button_text_color       = block.settings.button_text_color | default: "#FFFFFF" -%}
					{%- assign button_bg_color         = block.settings.button_bg_color | default: "#DF5A35" -%}
					{%- assign button_text_color_hover = block.settings.button_text_color_hover | default: "#FFFFFF" -%}
					{%- assign button_bg_color_hover   = block.settings.button_bg_color_hover | default: "#003452" -%}
					{%- assign button_border_color 	   = block.settings.button_border_color | default: button_bg_color -%}
					{%- assign button_border_color_hover = block.settings.button_border_color_hover | default: button_bg_color_hover -%}

					{%- assign button_text_color_second       = block.settings.button_text_color_second | default: "#FFFFFF" -%}
					{%- assign button_bg_color_second         = block.settings.button_bg_color_second | default: "#DF5A35" -%}
					{%- assign button_text_color_hover_second = block.settings.button_text_color_hover_second | default: "#FFFFFF" -%}
					{%- assign button_bg_color_hover_second   = block.settings.button_bg_color_hover_second | default: "#003452" -%}
					{%- assign button_border_color_second 	  = block.settings.button_border_color_second | default: button_bg_color_second -%}
					{%- assign button_border_color_hover_second = block.settings.button_border_color_hover_second | default: button_bg_color_hover_second -%}
					{%- assign content_alignment_class = 'content-alignment--' | append: block.settings.content_alignment -%}
					{%- assign content_alignment_vertical = 'content-alignment-vertical--' | append: block.settings.content_vertical_alignment -%}

					<style>
					    @media screen and (max-width: 768px) {
							.home-hero-banner .home-hero-banner__title {
								font-size: {{ header_font_size_mobile }}px;
							}
					    }

						.home-hero-banner .home-hero-banner__title {
							font-size: {{ header_font_size_desktop }}px;
						}
					</style>


					{%- capture slide_styles -%}
						--bg-color: {{- background_color -}};
						--text-color: {{- text_color -}};
					{%- endcapture -%}

					{%- capture button_styles -%}
						--bg-color: {{- button_bg_color -}};
						--text-color: {{- button_text_color -}};
						--bg-color-hover: {{- button_bg_color_hover -}};
						--text-color-hover: {{- button_text_color_hover -}};
						--border-color: {{- button_border_color -}};
						--border-color-hover: {{- button_border_color_hover -}};
					{%- endcapture -%}

					{%- capture button_styles_second -%}
						--bg-color-second: {{- button_bg_color_second -}};
						--text-color-second: {{- button_text_color_second -}};
						--bg-color-hover-second: {{- button_bg_color_hover_second -}};
						--text-color-hover-second: {{- button_text_color_hover_second -}};
						--border-color-second: {{- button_border_color_second -}};
						--border-color-hover-second: {{- button_border_color_hover_second -}};
					{%- endcapture -%}

					{%- assign filled = false -%}

					{%- if image != blank or video_url != blank -%}
						{%- assign filled = true -%}
					{%- endif -%}

					{%- if filled -%}
						{%- comment -%} Check if there's actual content before adding min-height class {%- endcomment -%}
						{%- assign has_any_content = false -%}
						{%- if header != blank or description != blank or button_text != blank or button_text_second != blank -%}
							{%- assign has_any_content = true -%}
						{%- endif -%}

						<div
							class="swiper-slide home-hero-banner__slide {% if blocks.size == 1 %} swiper-slide-active {% endif %} js-slide"
							style="{{- slide_styles -}}"
						>
							<div class="home-hero-banner__slide-container home-hero-banner__slide-container--{{ vertical_alignment }} {% if has_any_content %}home-hero-banner__min-height{% endif %}">
								<div class="home-hero-banner__media">
									<div class="home-hero-banner__media-container">
										{%- if block.type == "image_slide" -%}
											{% if slide_link != blank %}
												<a href="{{ slide_link }}" class="slide_link"></a>
											{% endif %}
											<picture>
												{%- assign alt = image.alt | default: header | default: "Main banner image" -%}

												<source
													srcset="{{ image_mobile | img_url: "380x" }} 1x, {{ image_mobile | img_url: "760x" }} 2x"
													media="(max-width: 380px)"
													width="380"
													height="160"
												>

												<source
													srcset="{{ image_mobile | img_url: "480x" }} 1x, {{ image_mobile | img_url: "960x" }} 2x"
													media="(max-width: 480px)"
													width="480"
													height="201"
												>

												<source
													srcset="{{ image_mobile | img_url: "575x" }} 1x, {{ image_mobile | img_url: "1150x" }} 2x"
													media="(max-width: 575px)"
													width="575"
													height="241"
												>

												<source
													srcset="{{ image_mobile | img_url: "767x" }} 1x, {{ image_mobile | img_url: "1534x" }} 2x"
													media="(max-width: 767px)"
													width="767"
													height="322"
												>

												<source
													srcset="{{ image_tablet | img_url: "991x" }} 1x, {{ image_tablet | img_url: "1982x" }} 2x"
													media="(max-width: 991px)"
													width="991"
													height="416"
												>

												<source
													srcset="{{ image_tablet | img_url: "1199x" }} 1x, {{ image_tablet | img_url: "2398x" }} 2x"
													media="(max-width: 1199px)"
													width="1199"
													height="428"
												>

												<source
													srcset="{{ image_tablet | img_url: "1500x" }} 1x, {{ image_tablet | img_url: "3000x" }} 2x"
													media="(max-width: 1500px)"
													width="1500"
													height="535"
												>

												<source
													srcset="{{ image_tablet | img_url: "1700x" }} 1x, {{ image_tablet | img_url: "3400x" }} 2x"
													media="(max-width: 1700px)"
													width="1700"
													height="606"
												>

												<source
													srcset="{{ image | img_url: "1920x" }} 1x, {{ image | img_url: "3840x" }} 2x"
													media="(min-width: 1701px)"
													width="1920"
													height="685"
												>

												<img
													srcset="{{ image_tablet | img_url: "1199x" }}"
													alt="{{ alt }}"
													width="1199"
													height="428"
												>
											</picture>
										{%- elsif block.type == "video_slide" -%}
											{% if slide_link_video != blank %}
												<a href="{{ slide_link_video }}" class="slide_link_video"></a>
											{% endif %}
											<video
												class="home-hero-banner__video home-hero-banner__video--desktop js-video js-video-desktop"
												loop
												muted
												playsinline
                                                autoplay
												width="1620"
												height="685"
												preload="auto"
												loading="eager"
												fetchpriority="high"
												data-video-autoplay="true"
												style="display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 0 !important;"
											>
												<source
													src="{{- video_url -}}#t=0.001"
													type="video/mp4"
												>

											</video>



                                      	{%- if block.settings.video_url_mobile != blank -%}
											<div class="js-video-mobile-container">
											{% if video_poster %}
												<picture>
													<source
														srcset="{{ video_poster | img_url: "380x" }} 1x, {{ video_poster | img_url: "760x" }} 2x"
														media="(max-width: 380px)"
													>

													<source
														srcset="{{ video_poster | img_url: "480x" }} 1x, {{ video_poster | img_url: "960x" }} 2x"
														media="(max-width: 480px)"
													>

													<source
														srcset="{{ video_poster | img_url: "575x" }} 1x, {{ video_poster | img_url: "1150x" }} 2x"
														media="(max-width: 575px)"
													>
													<img class="home-hero-banner__video-poster js-video-mobile-poster"
														 srcset="{{ video_poster | img_url: "768x" }} 1x, {{ video_poster | img_url: "1536x" }} 2x"
														 src="{{ video_poster | img_url: "768x" }}"
														 alt="{{- video_poster.alt -}}"
													>
												</picture>
											{% endif %}

											<video
												class="home-hero-banner__video home-hero-banner__video--mobile js-video js-video-mobile"
												loop
												muted
												playsinline
                                                autoplay
												width="667"
												height="322"
												preload="auto"
												loading="eager"
												fetchpriority="high"
												data-video-autoplay="true"
											>
												<source
													src="{{- video_url_mobile -}}#t=0.001"
													type="video/mp4">

											</video>
											</div>

										{% elsif video_poster %}
											{%- assign image_mobile = video_poster -%}

                      <picture class="hidden--desktop">
												{%- assign alt = image_mobile.alt | default: header | default: "Main banner image" -%}

												<source
													srcset="{{ image_mobile | img_url: "380x" }} 1x, {{ image_mobile | img_url: "760x" }} 2x"
													media="(max-width: 380px)"
													width="380"
													height="160"
												>

												<source
													srcset="{{ image_mobile | img_url: "480x" }} 1x, {{ image_mobile | img_url: "960x" }} 2x"
													media="(max-width: 480px)"
													width="480"
													height="201"
												>

												<source
													srcset="{{ image_mobile | img_url: "575x" }} 1x, {{ image_mobile | img_url: "1150x" }} 2x"
													media="(max-width: 575px)"
													width="575"
													height="241"
												>

												<source
													srcset="{{ image_mobile | img_url: "767x" }} 1x, {{ image_mobile | img_url: "1534x" }} 2x"
													media="(max-width: 767px)"
													width="767"
													height="322"
												>

												<img
													srcset="{{ image_mobile | img_url: "768x" }}"
													alt="{{ alt }}"
													width="768"
													height="322"
												>
											</picture>


										{%- endif -%}
										{%- endif -%}
									</div>

									{%- comment -%} FIXED: Only render content container if there's actual content {%- endcomment -%}
									{%- assign has_content = false -%}
									{%- if header != blank or description != blank or button_text != blank or button_text_second != blank -%}
										{%- assign has_content = true -%}
									{%- endif -%}

									{%- if has_content -%}
										<div class="home-hero-banner__content home-hero-banner__content--{{ horizontal_alignment }} {{ content_alignment_class }} {{ content_alignment_vertical }} {% unless button_text != blank or button_text_second != blank %}home-hero-banner__content--empty{% endunless %}">
											
											{%- comment -%} ADDED: Pink overlay panel {%- endcomment -%}
											{%- assign has_buttons = false -%}
											{%- if button_text != blank or button_text_second != blank -%}
												{%- assign has_buttons = true -%}
											{%- endif -%}

											<div 
												class="home-hero-banner__content-overlay {% unless has_buttons %}home-hero-banner__content-overlay--empty{% endunless %}"
												style="background-color: {{ background_color }};"
											></div>

											{%- if header != blank -%}
												<h1 class="home-hero-banner__title" style="color: {{- text_color -}};">{{- header -}}</h1>
											{%- endif -%}

											{%- if description != blank -%}
												<div class="home-hero-banner__description" style="color: {{- text_color -}};">
													{{- description -}}
												</div>
											{%- endif -%}

											{%- comment -%} Button container logic {%- endcomment -%}
											{%- assign has_buttons = false -%}
											{%- if button_text != blank or button_text_second != blank -%}
												{%- assign has_buttons = true -%}
											{%- endif -%}

											<div class="home-hero-banner__button-container {% unless has_buttons %}home-hero-banner__button-container--empty{% endunless %}">
												{%- if button_text != blank -%}
													<a
														class="home-hero-banner__button"
														href="{{- url -}}"
														style="{{- button_styles -}}"
													>
														{{- button_text -}}
													</a>
												{%- endif -%}

												{%- if button_text_second != blank -%}
													<a
														class="home-hero-banner__button home-hero-banner__button--second"
														href="{{- url_second -}}"
														style="{{- button_styles_second -}}"
													>
														{{- button_text_second -}}
													</a>
												{%- endif -%}
											</div>
										</div>
									{%- endif -%}
								</div>
							</div>
						</div>
					{%- endif -%}
				{%- endfor -%}
			</div>

			{%- if blocks.size > 1 -%}
				<div class="swiper-pagination home-hero-banner__pagination"></div>
			{%- endif -%}
		</div>
	</section>
{%- endif -%}

<script>
(function() {
  'use strict';

  // Function to play all videos in the hero banner
  function playHeroBannerVideos() {
    const videos = document.querySelectorAll('.home-hero-banner__video[data-video-autoplay="true"]');
    
    videos.forEach(function(video) {
      // Ensure video is muted (required for autoplay)
      video.muted = true;
      
      // Try to play the video
      const playPromise = video.play();
      
      if (playPromise !== undefined) {
        playPromise
          .then(function() {
            console.log('Video autoplay started successfully');
          })
          .catch(function(error) {
            console.warn('Video autoplay was prevented:', error);
            
            // If autoplay fails, try again on user interaction
            const playOnInteraction = function() {
              video.play().catch(function(e) {
                console.warn('Video play failed even after interaction:', e);
              });
              // Remove listeners after first interaction
              document.removeEventListener('click', playOnInteraction);
              document.removeEventListener('touchstart', playOnInteraction);
              document.removeEventListener('scroll', playOnInteraction);
            };
            
            // Add multiple event listeners to capture various user interactions
            document.addEventListener('click', playOnInteraction, { once: true });
            document.addEventListener('touchstart', playOnInteraction, { once: true });
            document.addEventListener('scroll', playOnInteraction, { once: true });
          });
      }
    });
  }

  // Function to handle Intersection Observer for lazy-loaded videos
  function initVideoObserver() {
    if ('IntersectionObserver' in window) {
      const videoObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            const video = entry.target;
            video.muted = true;
            video.play().catch(function(error) {
              console.warn('Video play failed on intersection:', error);
            });
          }
        });
      }, {
        threshold: 0.25
      });

      const videos = document.querySelectorAll('.home-hero-banner__video[data-video-autoplay="true"]');
      videos.forEach(function(video) {
        videoObserver.observe(video);
      });
    }
  }

  // Run when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      playHeroBannerVideos();
      initVideoObserver();
    });
  } else {
    // DOM is already ready
    playHeroBannerVideos();
    initVideoObserver();
  }

  // Also try to play when the page becomes visible (for tab switching)
  document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
      playHeroBannerVideos();
    }
  });

  // Fallback: try to play after a short delay
  setTimeout(function() {
    playHeroBannerVideos();
  }, 500);

})();
</script>

{%- schema -%}
{
	"name": "Home Hero Banner",
	"settings": [
		{
			"type": "number",
			"id": "autoplay",
			"label": "Autoplay (in milliseconds), 0 to turn off",
			"default": 5000
		},
		{
			"type": "checkbox",
			"id": "autoplay_enable",
			"label": "Autoplay Enable",
			"default": false
		}
	],
	"blocks": [
		{
			"name": "Image slide",
			"type": "image_slide",
			"settings": [
				{
					"type": "image_picker",
					"id": "image",
					"label": "Image (desktop)"
				},
				{
					"type": "image_picker",
					"id": "image_tablet",
					"label": "Image (tablet)"
				},
				{
					"type": "image_picker",
					"id": "image_mobile",
					"label": "Image (mobile)"
				},
				{
					"type": "checkbox",
					"id": "content_above_image",
					"label": "Content Above Image",
					"default": false
				},
				{
					"type": "select",
					"id": "horizontal_alignment",
					"label": "Horizontal alignment",
					"options": [
						{
							"value": "left",
							"label": "Left"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "right",
							"label": "Right"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "vertical_alignment",
					"label": "Vertical alignment",
					"options": [
						{
							"value": "top",
							"label": "Top"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "bottom",
							"label": "Bottom"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "content_alignment",
					"label": "Content Alignment",
					"options": [
						{
							"value": "left",
							"label": "Left"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "right",
							"label": "Right"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "content_vertical_alignment",
					"label": "Content Vertical Alignment",
					"options": [
						{
							"value": "top",
							"label": "Top"
						},
						{
							"value": "middle",
							"label": "Middle"
						},
						{
							"value": "bottom",
							"label": "Bottom"
						}
					],
					"default": "middle"
				},
				{
					"type": "text",
					"id": "header",
					"label": "Header"
				},
				{
					"type": "number",
					"id": "header_font_size_mobile",
					"label": "Header Font Size Mobile (pixels)",
					"default": 28
				},
				{
					"type": "number",
					"id": "header_font_size_desktop",
					"label": "Header Font Size Desktop (pixels)",
					"default": 36
				},
				{
					"type": "richtext",
					"id": "description",
					"label": "Description"
				},
				{
					"type": "url",
					"id": "url",
					"label": "First button URL"
				},
				{
					"type": "text",
					"id": "button_text",
					"label": "First button text"
				},
				{
					"type": "url",
					"id": "url_second",
					"label": "Second button URL"
				},
				{
					"type": "text",
					"id": "button_text_second",
					"label": "Second button text"
				},
				{
					"type": "url",
					"id": "slide_link",
					"label": "Slide link"
				},
				{
					"type": "color",
					"id": "background_color",
					"label": "Background color",
					"default": "#F6C080"
				},
				{
					"type": "color",
					"id": "text_color",
					"label": "Text color",
					"default": "#003452"
				},
				{
					"type": "header",
					"content": "First button colors"
				},
				{
					"type": "color",
					"id": "button_text_color",
					"label": "Button text color",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color",
					"label": "Button background color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_text_color_hover",
					"label": "Button text color on hover",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_hover",
					"label": "Button background color on hover",
					"default": "#003452"
				},
				{
					"type": "color",
					"id": "button_border_color",
					"label": "Button border color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_border_color_hover",
					"label": "Button text color on hover",
					"default": "#003452"
				},
				{
					"type": "header",
					"content": "Second button colors"
				},
				{
					"type": "color",
					"id": "button_text_color_second",
					"label": "Button text color",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_second",
					"label": "Button background color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_text_color_hover_second",
					"label": "Button text color on hover",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_hover_second",
					"label": "Button background color on hover",
					"default": "#003452"
				},
				{
					"type": "color",
					"id": "button_border_color_second",
					"label": "Button border color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_border_color_hover_second",
					"label": "Button text color on hover",
					"default": "#003452"
				}
			]
		},
		{
			"name": "Video slide",
			"type": "video_slide",
			"settings": [
				{
					"type": "text",
					"id": "video_url",
					"label": "Video URL (desktop)"
				},
				{
					"type": "text",
					"id": "video_url_mobile",
					"label": "Video URL (mobile)"
				},
        {
					"type": "image_picker",
					"id": "video_poster",
					"label": "Video Poster (mobile)"
				},
				{
					"type": "select",
					"id": "horizontal_alignment",
					"label": "Horizontal alignment",
					"options": [
						{
							"value": "left",
							"label": "Left"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "right",
							"label": "Right"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "vertical_alignment",
					"label": "Vertical alignment",
					"options": [
						{
							"value": "top",
							"label": "Top"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "bottom",
							"label": "Bottom"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "content_alignment",
					"label": "Content Alignment",
					"options": [
						{
							"value": "left",
							"label": "Left"
						},
						{
							"value": "center",
							"label": "Center"
						},
						{
							"value": "right",
							"label": "Right"
						}
					],
					"default": "center"
				},
				{
					"type": "select",
					"id": "content_vertical_alignment",
					"label": "Content Vertical Alignment",
					"options": [
						{
							"value": "top",
							"label": "Top"
						},
						{
							"value": "middle",
							"label": "Middle"
						},
						{
							"value": "bottom",
							"label": "Bottom"
						}
					],
					"default": "middle"
				},
				{
					"type": "text",
					"id": "header",
					"label": "Header"
				},
				{
					"type": "number",
					"id": "header_font_size_mobile",
					"label": "Header Font Size Mobile (pixels)",
					"default": 28
				},
				{
					"type": "number",
					"id": "header_font_size_desktop",
					"label": "Header Font Size Desktop (pixels)",
					"default": 36
				},
				{
					"type": "richtext",
					"id": "description",
					"label": "Description"
				},
				{
					"type": "url",
					"id": "url",
					"label": "First button URL"
				},
				{
					"type": "text",
					"id": "button_text",
					"label": "First button text"
				},
				{
					"type": "url",
					"id": "url_second",
					"label": "Second button URL"
				},
				{
					"type": "text",
					"id": "button_text_second",
					"label": "Second button text"
				},
				{
					"type": "url",
					"id": "slide_link_video",
					"label": "Slide link"
				},
				{
					"type": "color",
					"id": "background_color",
					"label": "Background color",
					"default": "#F6C080"
				},
				{
					"type": "color",
					"id": "text_color",
					"label": "Text color",
					"default": "#003452"
				},
				{
					"type": "header",
					"content": "First button colors"
				},
				{
					"type": "color",
					"id": "button_text_color",
					"label": "Button text color",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color",
					"label": "Button background color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_text_color_hover",
					"label": "Button text color on hover",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_hover",
					"label": "Button background color on hover",
					"default": "#003452"
				},
				{
					"type": "color",
					"id": "button_border_color",
					"label": "Button border color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_border_color_hover",
					"label": "Button text color on hover",
					"default": "#003452"
				},
				{
					"type": "header",
					"content": "Second button colors"
				},
				{
					"type": "color",
					"id": "button_text_color_second",
					"label": "Button text color",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_second",
					"label": "Button background color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_text_color_hover_second",
					"label": "Button text color on hover",
					"default": "#FFFFFF"
				},
				{
					"type": "color",
					"id": "button_bg_color_hover_second",
					"label": "Button background color on hover",
					"default": "#003452"
				},
				{
					"type": "color",
					"id": "button_border_color_second",
					"label": "Button border color",
					"default": "#DF5A35"
				},
				{
					"type": "color",
					"id": "button_border_color_hover_second",
					"label": "Button text color on hover",
					"default": "#003452"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Home Hero Banner",
			"category": "Banners",
			"blocks": [
				{
					"type": "video_slide",
					"settings": {
					"video_url": "/cdn/shop/videos/c/o/v/374b2e19b9154f3aac63636da49c5e59.mp4",
					"video_url_mobile": "/cdn/shop/videos/c/o/v/4e0dd01bc66d4092a48357c396d5d2a4.mp4",
					"horizontal_alignment": "center",
					"vertical_alignment": "bottom",
					"header": "",
					"description": "",
					"url": "shopify://products/elevated-drink-mix",
					"button_text": "",
					"url_second": "shopify://products/elevated-drink-mix",
					"button_text_second": "",
					"slide_link_video": "shopify://products/elevated-drink-mix",
					"background_color": "#fbf8f5",
					"text_color": "#003452",
					"button_text_color": "#ffffff",
					"button_bg_color": "#003452",
					"button_text_color_hover": "#003452",
					"button_bg_color_hover": "#ffffff",
					"button_border_color": "#003452",
					"button_border_color_hover": "#003452",
					"button_text_color_second": "#ffffff",
					"button_bg_color_second": "#df5a35",
					"button_text_color_hover_second": "#ffffff",
					"button_bg_color_hover_second": "#003452",
					"button_border_color_second": "#df5a35",
					"button_border_color_hover_second": "#003452"
					}
				},
				{
					"type": "image_slide",
					"settings": {
					"image": "shopify://shop_images/EDM_HERO_ca34e636-ee78-4068-b3e0-97f8d641e796.png",
					"content_above_image": false,
					"horizontal_alignment": "center",
					"vertical_alignment": "bottom",
					"header": "",
					"header_font_size_mobile": 28,
					"header_font_size_desktop": 36,
					"description": "",
					"url": "shopify://products/elevated-drink-mix",
					"button_text": "SHOP ELEVATED DRINK MIX",
					"url_second": "",
					"button_text_second": "",
					"slide_link": "",
					"background_color": "#003452",
					"text_color": "#ffffff",
					"button_text_color": "#ffffff",
					"button_bg_color": "#003452",
					"button_text_color_hover": "#ffffff",
					"button_bg_color_hover": "#003452",
					"button_border_color": "#ffffff",
					"button_border_color_hover": "#003452",
					"button_text_color_second": "#ffffff",
					"button_bg_color_second": "#df5a35",
					"button_text_color_hover_second": "#ffffff",
					"button_bg_color_hover_second": "#003452",
					"button_border_color_second": "#df5a35",
					"button_border_color_hover_second": "#003452"
					}
				},
				{
					"type": "image_slide",
					"settings": {
					"image": "shopify://shop_images/Instant_Bone_Broth_Photo_Shoot03935.jpg",
					"image_tablet": "shopify://shop_images/Instant_Bone_Broth_Photo_Shoot03935.jpg",
					"image_mobile": "shopify://shop_images/Instant_Bone_Broth_Photo_Shoot03935.jpg",
					"content_above_image": false,
					"horizontal_alignment": "center",
					"vertical_alignment": "bottom",
					"header": "",
					"header_font_size_mobile": 28,
					"header_font_size_desktop": 36,
					"description": "",
					"url": "shopify://products/instant-bone-broth",
					"button_text": "SHOP INSTANT BONE BROTH",
					"url_second": "",
					"button_text_second": "",
					"slide_link": "",
					"background_color": "#003452",
					"text_color": "#ffffff",
					"button_text_color": "#ffffff",
					"button_bg_color": "#003452",
					"button_text_color_hover": "#ffffff",
					"button_bg_color_hover": "#003452",
					"button_border_color": "#ffffff",
					"button_border_color_hover": "#003452",
					"button_text_color_second": "#ffffff",
					"button_bg_color_second": "#df5a35",
					"button_text_color_hover_second": "#ffffff",
					"button_bg_color_hover_second": "#003452",
					"button_border_color_second": "#df5a35",
					"button_border_color_hover_second": "#003452"
					}
				}	
			],
			"settings": {
			"autoplay": 5000,
			"autoplay_enable": false
			}
		}
	]
}
{%- endschema -%}
