<mmq-embed short-code="KP43OX" template="Basket"></mmq-embed>

<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" rel="script" type="application/javascript" async></script>

/* Define animations for icons */
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  /* Target specific icons for animation */
  .mmq-basket::part(icon) {
    animation: pulse 2s infinite;
    transform-origin: center;
  }

document.addEventListener('mimeeq-app-loaded', () => {
    window.mimeeqApp.config.icons = {
      // Cart icon with pulse animation
      basket: {
        cart: '<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>',
      },
    };
    
    // Add data attributes to help target specific icons with CSS
    const observer = new MutationObserver(() => {
      document.querySelectorAll('.mmq-quick-icon-button').forEach(btn => {
        // Find which icon this button represents by checking its content
        if (btn.innerHTML.includes('reset-icon')) {
          btn.setAttribute('data-icon', 'reset');
        }
      });
    });
    
    // Start observing the document for added nodes
    observer.observe(document.body, { childList: true, subtree: true });
  });