.variations-as-radio-buttons input[type=checkbox], 
.variations-as-radio-buttons input[type=radio] {
	outline: none;
}

.variations-as-radio-buttons .varb-radio-variation-list{
	margin-bottom: 1.618em;
}

.variations-as-radio-buttons .varb-radio-variation-list label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 7px;
	position: relative;
	outline: 2px solid rgba(106, 106, 106, 0.25);
	outline-offset: -2px;
	cursor: pointer;
	margin-right: 2px;
	border-radius: 5px;
	max-width: 400px;
}

.variations-as-radio-buttons .varb-radio-variation-list label:hover {
	outline: 2px solid #b2b2b2;
}

.variations-as-radio-buttons .varb-radio-variation-list label:not(:last-child) {
	margin-bottom: 10px;
}

.variations-as-radio-buttons .varb-radio-variation-list label.varb-radio.varb-selected {
	outline: 2px solid #b2b2b2;
}

.variations-as-radio-buttons .varb-radio-variation-list label img{
	-webkit-box-shadow: none;
	        box-shadow: none;
	margin: 5px;
}

.variations-as-radio-buttons .varb-radio-variation ~ table.variations{
	display: none;
}


/*
 * =====================================================
 * Unavailable Style start [radio]
 * =====================================================
 */


/* Style for disabled radio buttons */
.variations-as-radio-buttons .varb-radio.varb-unavailable {
    position: relative; /* Needed for positioning pseudo-elements like the disabled "cross" */
    overflow: hidden; /* Hide anything that overflows the label's boundary (like the cross lines) */
}

.variations-as-radio-buttons .varb-radio.varb-unavailable span {
	opacity: 0.5; /* Make the disabled label semi-transparent to indicate it's disabled */
}

.variations-as-radio-buttons .varb-radio.varb-unavailable.disabled {
	pointer-events: none;
	cursor: not-allowed;
}

/* Add cross lines to the disabled radio buttons (using pseudo-element) */
.variations-as-radio-buttons .varb-radio.blur_and_cross.varb-unavailable::before,
.variations-as-radio-buttons .varb-radio.blur_and_cross.varb-unavailable::after {
    content: ''; /* Define a pseudo-element with no content, but just for its styles */
    position: absolute; /* Position the pseudo-element absolutely within the label */
    background-color: rgba(255, 0, 0, 0.5); /* Red color for the cross lines */
    height: 2px; /* Set the thickness of the cross lines */
    width: 100%; /* Make the cross line span the full width of the label */
    right: 0; /* Align the cross line to the left of the label */
    top: 50%; /* Vertically center the cross line */
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); /* Adjust positioning for perfect vertical centering */
    z-index: 1; /* Ensure the cross lines stay behind the label's text */
}

/* Second cross line, rotated at -45 degrees (X mark effect) */
.variations-as-radio-buttons .varb-radio.blur_and_cross.varb-unavailable::after {
    -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg); /* Rotate the cross line at -45 degrees */
}

/* Second cross line, rotated at -45 degrees (X mark effect) */
.variations-as-radio-buttons .varb-radio.blur_and_cross.varb-unavailable::before {
    -webkit-transform: translateY(50%) rotate(-45deg);
        -ms-transform: translateY(50%) rotate(-45deg);
            transform: translateY(50%) rotate(-45deg); /* Rotate the cross line at -45 degrees */
}

.variations-as-radio-buttons .varb-radio.hide.varb-unavailable {
    display: none;
}