<div class="sticky-cart-container">
  <div class="sticky-cart-bar">
    <div class="sticky-cart-product-info">
      <div class="sticky-cart-product-image">
        {% if product.featured_media %}
          <img src="{{ product.featured_media | image_url: width: 60 }}" 
               alt="{{ product.title }}" 
               width="60" 
               height="60" 
               loading="lazy">
        {% endif %}
      </div>
      <div class="sticky-cart-product-title">
        {{ product.title }}
      </div>
      <div class="sticky-cart-product-price">
        {{ product.price | money }}
      </div>
    </div>
    <div class="sticky-cart-form-controls">
      <button type="button" class="sticky-cart-add-button" id="stickyAddToCart">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>" style="margin-right: 8px;">
          <path d="M3.33333 3.33333H5.41667L7.5 13.3333H15.8333L17.5 6.66667H6.66667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="8.33333" cy="16.6667" r="1.25" fill="currentColor"/>
          <circle cx="15" cy="16.6667" r="1.25" fill="currentColor"/>
        </svg>
        Add to cart
      </button>
    </div>
  </div>
</div>

<style>
.sticky-cart-bar {
  display: none;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 50px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}
.sticky-cart-product-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-cart-product-image {
  flex-shrink: 0;
}
.sticky-cart-product-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  {% comment %} border-radius: 4px; {% endcomment %}
}
.sticky-cart-product-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
}
.sticky-cart-product-price {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  margin-left: 8px;
}
.sticky-cart-form-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticky-cart-add-button {
  background-color: #2E4A29;
  color: #fff;
  padding: 12px 24px;
  border: none;
  {% comment %} border-radius: 15px; {% endcomment %}
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}
.sticky-cart-add-button:hover {
  background-color: #333;
}
.sticky-cart-add-button:active {
  transform: scale(0.98);
}
.sticky-cart-add-button.adding {
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sticky-cart-bar {
    padding: 12px 16px;
    gap: 0.5rem;
  }
  .sticky-cart-product-title {
    font-size: 0.95rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sticky-cart-product-price {
    font-size: 0.9rem;
  }
  .sticky-cart-add-button {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  .sticky-cart-product-image img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .sticky-cart-product-title {
    max-width: 100px;
  }
  .sticky-cart-add-button {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
  .sticky-cart-add-button svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const stickyCartBar = document.querySelector('.sticky-cart-bar');
  const stickyAddButton = document.getElementById('stickyAddToCart');
  const mainAddToCartButton = document.querySelector('form[action*="/cart/add"] button[type="submit"]');
  
  if (stickyCartBar && mainAddToCartButton) {
    // function to toggle sticky bar visibility
    function toggleStickyBar() {
      const buttonRect = mainAddToCartButton.getBoundingClientRect();
      const offset = 100;
      
      if (buttonRect.bottom < offset) {
        stickyCartBar.style.display = 'flex';
      } else {
        stickyCartBar.style.display = 'none';
      }
    }
    
    // listen for scroll events
    window.addEventListener('scroll', toggleStickyBar, { passive: true });
    toggleStickyBar();
    window.addEventListener('resize', toggleStickyBar);
    
    // handle sticky button click
    if (stickyAddButton) {
      stickyAddButton.addEventListener('click', function() {
        // add loading state
        this.classList.add('adding');
        this.textContent = 'Adding...';
        
        // trigger the main add to cart button
        mainAddToCartButton.click();
        
        // reset button after a delay
        setTimeout(() => {
          this.classList.remove('adding');
          this.innerHTML = `
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>" style="margin-right: 8px;">
              <path d="M3.33333 3.33333H5.41667L7.5 13.3333H15.8333L17.5 6.66667H6.66667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="8.33333" cy="16.6667" r="1.25" fill="currentColor"/>
              <circle cx="15" cy="16.6667" r="1.25" fill="currentColor"/>
            </svg>
            Click to add to cart
          `;
        }, 2000);
      });
    }
  }
});
</script>

{% schema %}
{
  "name": "Sticky Add to Cart",
  "tag": "section",
  "class": "section"
}
{% endschema %}