div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-list {
        font-weight: bold;
        background: none;
        border: 1px solid #8a8d8e;
        padding: 15px 10px;
}

@media (hover: hover) {
    div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-list:hover  {
        background: rgba(255, 212, 106, 1);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }
}
div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-list.selected {
    background: rgba(255, 212, 106, 1);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-image {
    border: 2px solid #8a8d8e;
}

@media (hover: hover) {
    div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-image:hover {
        border-color: rgba(255, 212, 106, 1);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }
}
div#options-combinations-container ul.thumbnails.image_picker_selector li div.opt-as-image.selected {
    border-color: rgba(255, 212, 106, 1);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.route-product-product.popup .product-info .product-details {
    padding-bottom: 73px !important;
}

.route-product-product:not(.popup) .product-info .product-details a#reset_options,
.route-product-product:not(.popup) .product-info .product-details div.options-combinations-error {
    order: 1;
}
.route-product-product:not(.popup) .product-info .product-details div.options-combinations-error {
    display: block !important;
}


/* Styling for the main option groups */
.form-group {
    display: block !important;
    margin-bottom: 20px; /* Space between option groups */
}

#options-combinations-container .selectable-options label.control-label {
    width: 100%;
    display: contents;
}

/* Styling for the option labels (like Color, Storage, Condition) */
#options-combinations-container .selectable-options .control-label {
    font-weight: bold;
    margin-bottom: 10px;
    display: block; /* Make the label take its own line */
    font-size: 16px; /* Adjust font size as needed */
    color: #333; /* Darker color for the main label */
}

/* Container for the radio options in each group */
#options-combinations-container .selectable-options [id^="input-option"] {
    display: flex; /* Arranges the options horizontally */
    flex-wrap: wrap; /* Allows options to wrap to the next line if needed */
    gap: 10px; /* Space between the option buttons */
}

/* Styling for the individual radio option wrapper (the div.radio) */
#options-combinations-container .selectable-options .radio {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

/* The label itself is styled to look like a button */
#options-combinations-container .selectable-options .radio label {
    display: block; /* Make the label take up the button area */
    padding: 8px 15px; /* Padding inside the button */
    border: 1px solid #ccc; /* Default border color */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer to indicate clickability */
    background-color: #fff; /* White background */
    color: #333; /* Default text color */
    font-weight: normal;
    transition: all 0.2s ease; /* Smooth transition for hover/selection effects */
    /* Use a dotted border for the default state to match the image, or solid for better visibility */
    border-style: dotted; 
}

/* Hide the actual radio button input */
#options-combinations-container .selectable-options .radio input[type="radio"] {
    display: none;
}

/* Hover effect for the labels/buttons */
#options-combinations-container .selectable-options .radio label:hover {
    border-color: #888; /* Slightly darker border on hover */
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); Optional subtle shadow on hover */
}

/* Style for the selected (checked) radio button label */
#options-combinations-container .selectable-options .radio input[type="radio"]:checked + label {
    border-style: solid; /* Change to solid border when selected */
    border-color: #007bff; /* A prominent color for the selected state (e.g., blue) */
    background-color: #e9f5ff; /* Light background color for selection */
    color: #007bff; /* Matching text color */
    font-weight: bold; /* Optional: Make text bold when selected */
}

/* Specific adjustment for labels inside the .radio class, as your HTML has 'Very good' and 'Excellent' directly inside the label */
#options-combinations-container .selectable-options .radio label {
    /* If the inner <label> structure contains both the input and the text,
       you might need to adjust based on how you want the text/input to align.
       The current CSS handles this by setting `display: block` on the label.
       For the specific values like "Very good" and "Excellent", the text is
       styled directly by the `.radio label` selector.
    */
    line-height: 1.4; /* Improves vertical centering/readability */
}

/* You might need to adjust the content of the labels to match the image 
   (e.g., 'Condition: Pre-Owned' needs to become 'Condition: Good' to match the image)
   This CSS assumes the HTML content is updated to match the image text.
*/