/* Product Page Specific CSS */

/* Grey out the out-of-stock radio buttons */
input[type="radio"].out-of-stock-radio + label {
    opacity: 0.5;
    cursor: default; /* Use default cursor */
    border: 2px solid lightgrey; /* Add grey border to out-of-stock radio buttons */
    background-color: #f2f2f2; /* Add light grey background to out-of-stock radio buttons */
    padding: 5px; /* Add padding to make the label area larger */
    border-radius: 3px; /* Optional: add slight rounding to corners */
    color: black; /* Black text color when out of stock */
}

/* Ensure the radio button itself remains clickable */
input[type="radio"].out-of-stock-radio {
    pointer-events: auto;
    cursor: pointer;
}

/* When an out-of-stock radio button is selected */
input[type="radio"].out-of-stock-radio:checked + label {
    border: 2px solid grey; /* Darker grey border when selected */
    background-color: #d9d9d9 !important; /* Darker grey background when selected */
    color: black !important; /* Black text color when selected */
}

/* Remove the default purple background for selected radio button */
input[type="radio"].out-of-stock-radio:checked {
    background-color: #d9d9d9 !important; /* Apply the same darker grey background when checked */
    box-shadow: none !important; /* Remove any default box-shadow */
}