/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 22:5 Unexpected "{"
Line 22:7 Expected identifier but found "'base.css'"
Line 23:4 Unexpected "{"
Line 23:5 Unexpected "{"
Line 23:7 Expected identifier but found "'logo-scroll-animation.css'"
Line 24:4 Unexpected "{"
Line 24:5 Unexpected "{"
Line 24:7 Expected identifier but found "'hero-animations.css'"
Line 25:4 Unexpected "{"
... and 74 more hidden warnings

**/
<!doctype html>
<html
  class="no-js{% if request.design_mode %} shopify-design-mode{% endif %}"
  lang="{{ request.locale.iso_code }}"
>
  <head>
    {{ 'base.css' | asset_url | stylesheet_tag }}
    {{ 'logo-scroll-animation.css' | asset_url | stylesheet_tag }}
    {{ 'hero-animations.css' | asset_url | stylesheet_tag }}
    {{ 'mobile-video-controls.css' | asset_url | stylesheet_tag }}

    {%- if settings.favicon != blank -%}
      <link
        rel="icon"
        type="image/png"
        href="{{ settings.favicon | image_url: width: 32, height: 32 }}"
      >
    {%- endif -%}

    {% comment %} This a way to wait for main content to load when navigating to a new page so that the view transitions can work consistently {% endcomment %}
    <link
      rel="expect"
      href="#MainContent"
      blocking="render"
      id="view-transition-render-blocker"
    >

    {%- render 'meta-tags' -%}
    {%- render 'fonts' -%}
    {%- render 'scripts' -%}
    {%- render 'theme-styles-variables' -%}
    {%- render 'color-schemes' -%}

    {% if request.design_mode %}
      {%- render 'theme-editor' -%}
    {% endif %}

    {{ content_for_header }}
  </head>

  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}">
    {% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
    <div id="header-group">
      {% sections 'header-group' %}
    </div>

    <main
      id="MainContent"
      class="content-for-layout"
      role="main"
      data-page-transition-enabled="{{ settings.page_transition_enabled }}"
      data-product-transition="{{ settings.transition_to_main_product }}"
      data-template="{{ template }}"
    >
      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    {% render 'search-modal' %}

    {% # theme-check-disable ParserBlockingScript %}
    <script src="{{ 'critical.js' | asset_url }}"></script>
    {{ 'logo-scroll-animation.js' | asset_url | script_tag }}
    
    <!-- Mobile Video Enhancement -->
    <script>
      // Enhanced mobile video autoplay handler
      document.addEventListener('DOMContentLoaded', function() {
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        console.log('Mobile detected:', isMobile);
        console.log('User agent:', navigator.userAgent);
        
        function handleVideoAutoplay() {
          console.log('Running handleVideoAutoplay...');
          const allVideos = document.querySelectorAll('video[autoplay]');
          console.log('Found videos with autoplay:', allVideos.length);
          allVideos.forEach((video, index) => {
            console.log(`Video ${index}:`, video);
            console.log(`Video ${index} autoplay attr:`, video.hasAttribute('autoplay'));
            console.log(`Video ${index} muted:`, video.muted);
            console.log(`Video ${index} playsInline:`, video.playsInline);
          });
          // Only handle deferred media auto-click on desktop, not mobile
          if (!isMobile) {
            document.querySelectorAll('deferred-media[autoplay]').forEach(deferredMedia => {
              const playButton = deferredMedia.querySelector('.deferred-media__poster-button');
              if (playButton) {
                setTimeout(() => {
                  playButton.click();
                }, 100);
              }
            });
          }

          // Handle ALL video elements with autoplay (including hero videos)
          document.querySelectorAll('video[autoplay]').forEach(video => {
            video.muted = true;
            video.playsInline = true;
            video.controls = false;
            video.removeAttribute('controls');
            
            // More aggressive mobile autoplay approach
            if (isMobile) {
              // Force attributes for mobile compatibility
              video.setAttribute('webkit-playsinline', 'true');
              video.setAttribute('playsinline', 'true');
              video.setAttribute('muted', 'true');
              video.muted = true;
              
              // Multiple play attempts
              const attemptPlay = (attempt = 1) => {
                const playPromise = video.play();
                if (playPromise !== undefined) {
                  playPromise.then(() => {
                    console.log(`Video autoplay successful on attempt ${attempt}`);
                  }).catch(error => {
                    console.log(`Video autoplay failed on attempt ${attempt}:`, error);
                    if (attempt < 5) {
                      setTimeout(() => attemptPlay(attempt + 1), 200 * attempt);
                    }
                  });
                }
              };
              
              attemptPlay();
            } else {
              // Desktop autoplay
              video.play().catch(() => {});
            }
          });
        }

        // Run immediately
        handleVideoAutoplay();
        
        // Run again after a delay for dynamic content
        setTimeout(handleVideoAutoplay, 500);
        
        // Additional aggressive handler for hero videos on window load
        window.addEventListener('load', function() {
          setTimeout(() => {
            document.querySelectorAll('.hero__video[autoplay], video[autoplay]').forEach(video => {
              video.muted = true;
              video.playsInline = true;
              video.controls = false;
              video.removeAttribute('controls');
              
              if (isMobile) {
                // Extra aggressive mobile approach
                video.setAttribute('webkit-playsinline', 'true');
                video.setAttribute('playsinline', 'true');
                video.setAttribute('muted', 'true');
                
                // Try immediate play
                video.play().catch(() => {
                  // If immediate play fails, try on first user interaction
                  const playOnTouch = () => {
                    video.play().catch(() => {});
                    document.removeEventListener('touchstart', playOnTouch);
                    document.removeEventListener('click', playOnTouch);
                  };
                  
                  document.addEventListener('touchstart', playOnTouch, { once: true });
                  document.addEventListener('click', playOnTouch, { once: true });
                });
              } else {
                video.play().catch(() => {});
              }
            });
          }, 100);
        });
        
        // Also run when new content is added to the page
        const observer = new MutationObserver(function(mutations) {
          let shouldHandle = false;
          mutations.forEach(mutation => {
            if (mutation.addedNodes.length > 0) {
              mutation.addedNodes.forEach(node => {
                if (node.nodeType === 1 && (node.tagName === 'DEFERRED-MEDIA' || node.querySelector && node.querySelector('deferred-media[autoplay]'))) {
                  shouldHandle = true;
                }
              });
            }
          });
          if (shouldHandle) {
            setTimeout(handleVideoAutoplay, 100);
          }
        });
        
        observer.observe(document.body, { childList: true, subtree: true });
        
        // NUCLEAR OPTION: Try to bypass autoplay restrictions completely
        if (isMobile) {
          console.log('Applying nuclear mobile autoplay fix...');
          
          // Create a fake user interaction to unlock autoplay
          const unlockAutoplay = () => {
            console.log('Attempting to unlock autoplay...');
            document.querySelectorAll('video[autoplay]').forEach((video, index) => {
              console.log(`Forcing play on video ${index}`);
              video.muted = true;
              video.playsInline = true;
              video.controls = false;
              
              // Force play immediately
              video.play().then(() => {
                console.log(`Video ${index} started playing successfully`);
              }).catch(error => {
                console.log(`Video ${index} failed to play:`, error);
              });
            });
          };
          
          // Try immediately
          unlockAutoplay();
          
          // Try on any user interaction
          const interactionEvents = ['touchstart', 'touchend', 'click', 'scroll'];
          interactionEvents.forEach(eventType => {
            document.addEventListener(eventType, function() {
              console.log('User interaction detected:', eventType);
              unlockAutoplay();
            }, { once: true, passive: true });
          });
          
          // Use Intersection Observer to play when video comes into view
          const videoObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
              if (entry.isIntersecting && entry.target.hasAttribute('autoplay')) {
                console.log('Video in view, attempting autoplay...');
                entry.target.muted = true;
                entry.target.playsInline = true;
                entry.target.play().catch(() => {});
              }
            });
          }, { threshold: 0.1 });
          
          // Observe all videos
          setTimeout(() => {
            document.querySelectorAll('video[autoplay]').forEach(video => {
              videoObserver.observe(video);
            });
          }, 100);
        }
      });
    </script>
    {% # theme-check-enable ParserBlockingScript %}

    {% if settings.quick_add or settings.mobile_quick_add %}
      {% render 'quick-add-modal' %}
    {% endif %}
   
  </body>
</html>
