const productForm = document.querySelector('product-form[data-main="true"]');
      if (productForm) {
        document.querySelectorAll('[id^="SectionAtcBtn-"]').forEach(btn => {
          btn.addEventListener('click', (e) => {
            productForm.handleSubmit(e);
          })
        })
      }

      
        const stickyAtc = document.querySelector('.sticky-atc');
        let bottomMargin = 50;
        if (stickyAtc) bottomMargin += stickyAtc.clientHeight;
        const shrineAnimationsObserver = new IntersectionObserver(elements => {
          elements.forEach(element => {
            if (element.isIntersecting) {
              element.target.classList.add('animate--shown');
            } 
            
          })
        },  { rootMargin: `0px 0px -${bottomMargin}px 0px` })

        function initAnimations(rootElement = document, isThemeEditorEvent = false) {
          const elementsToAnimate = rootElement.querySelectorAll('.animate-section');
          if (elementsToAnimate.length == 0) return;

          
          elementsToAnimate.forEach(element => {
            if (isThemeEditorEvent) {
              element.classList.add('animate--shown');
              return;
            } 
            shrineAnimationsObserver.observe(element);
          })
        }

        window.addEventListener('DOMContentLoaded', () => initAnimations());
        if (Shopify.designMode) {
          document.addEventListener('shopify:section:load', (event) => initAnimations(event.target, true));
          document.addEventListener('shopify:section:reorder', () => initAnimations(document, true));
        }