<div style="display:none" class="label-58-stud-kit-600">
        <link rel="stylesheet" href="{{ 'component-product-variant-picker.css' | asset_url }}"><style>.custom-radio{margin-top:0; display:flex; gap:5px; flex-wrap:wrap}.custom-radio div{display:flex;}.custom-radio label{margin-bottom:0}</style>
<div class="product-form__input product-form__input--pill">
<label class="form__label">Stud Kit</label>
<div class="custom-radio">
        <div>
            <input type="radio" id="A" name="properties[Label]" form="{{ 'product-form-' | append: section.id }}" value="A">
            <label class="form__label" for="A">A</label>
        </div>
        <div>
            <input type="radio" id="B" name="properties[Label]" form="{{ 'product-form-' | append: section.id }}" value="B">
            <label class="form__label" for="B">B</label>
        </div>
</div>
</div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const sanitizeClassName = str => str.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s+/g, '-').toLowerCase();
        const checkCurrentOption = ()=>{
            const variantSelects = document.querySelector('variant-selects');
            const currentValues = Array.from(variantSelects.querySelectorAll('select option[selected], fieldset input:checked')).map(el => el.value);
            const optionValue = "58-stud-kit-60"
            optionsConcerned = [0] 
            required = false
            selector = "." + "label-" + optionValue +  "0" 
            selectorInput = selector + " input"  + "," + selector + " textarea" 
            shouldDisplay = optionsConcerned.some(optionIndex => {
                return currentValues[optionIndex] !== undefined && sanitizeClassName(currentValues[optionIndex]) === optionValue;
              });
            document.querySelectorAll(selector).forEach(el =>{
                if( shouldDisplay){
                    el.style.display = "block"
                    document.querySelector(selectorInput).setAttribute('form', '{{ 'product-form-' | append: section.id }}')
                    document.querySelectorAll('.hidden-input-fileupload').forEach(el => el.setAttribute('form', '{{ 'product-form-' | append: section.id }}'))
                }
                else{
                    el.style.display ="none"
                    document.querySelector(selectorInput).setAttribute('form', '');
                    document.querySelectorAll('.hidden-input-fileupload').forEach(el => el.setAttribute('form', ''))
                }
           
            } );
            if (required) {
                const customInput = document.querySelector(selectorInput)
                if (shouldDisplay) {
                    customInput.setAttribute('required', 'required');
                } else {
                    customInput.removeAttribute('required');
                }
            }
        }
        checkCurrentOption()
        document.querySelector(".product-variant-id").addEventListener('change', checkCurrentOption)
    })
    </script>