(() => {
        let selectedSizeSystem = null; // Global variable to store selected size system
    
        // Main mouseup handler
        const handleMouseUp = (event) => {
            const target = event.target;
    
            // Check if target or its parent has the js-size-selector attribute
            const sizeSelector = target.closest('[js-size-selector]');
            if (!sizeSelector) return;
    
            const newSizeSystem = sizeSelector.innerText.trim();
    
            // Only update and call updateProductContext if the size system changed
            if (selectedSizeSystem !== newSizeSystem) {
                selectedSizeSystem = newSizeSystem;
                console.log('Size system selector changed:', { text: selectedSizeSystem });
    
                // Call updateProductContext whenever the size system changess
                updateProductContext();
            }
        };
    
        // Use capture phase to ensure we get the mouseup before preventDefault
        document.addEventListener('mouseup', handleMouseUp, true);
    
        // Expose a function to get the selected size system
        window.getSelectedSizeSystem = () => selectedSizeSystem;
    })();