.variant-list {
            list-style: none;
            padding: 0;
            margin: 10px 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
}

.variant-list li {
            display: inline-block;
}

/* Hide the actual radio button input */
.variant-list input[type="radio"] {
            display: none;
}

/* Base style for the button/label */
.variant-button {
            display: flex; /* Key for aligning image and text */
            align-items: center; /* Vertically center the contents */
            padding: 4px 12px; /* Slightly adjusted padding for the image */
            border: 1px solid #ccc;
            border-radius: 20px;
            cursor: pointer;
            background-color: #fff;
            font-size: 14px;
            color: #333;
            transition: all 0.2s ease;
            text-align: center;
            user-select: none;
}

/* Image styling */
.variant-button .variant-image {
            width: 24px;
            height: 24px;
            object-fit: cover;
            border-radius: 4px; /* Slight roundness for the image */
            margin-right: 8px; /* Space between image and text */
            border: 1px solid #eee; /* Subtle border for the image itself */
}
        
/* Text styling when next to an image */
.variant-button .variant-text {
            line-height: 1.5;
            white-space: nowrap; /* Keep the text on one line */
}

/* HOVER effect */
.variant-button:hover:not(.disabled) {
            border-color: #f53d2d;
}

/* Style for the SELECTED button */
.variant-list input[type="radio"]:checked + .variant-button {
            border-color: #f53d2d;
            color: #f53d2d;
            background-color: #fff8f8;
            font-weight: bold;
}

/* Style for DISABLED/Out of Stock variants */
.variant-list input[type="radio"]:disabled + .variant-button,
.variant-button.disabled {
            cursor: not-allowed;
            background-color: #f7f7f7;
            border-color: #eee;
            color: #aaa;
            opacity: 0.8;
            /* Remove line-through as it looks odd with the image */
}
        
/* The disabled image should look faded */
.variant-list input[type="radio"]:disabled + .variant-button .variant-image {
             filter: grayscale(100%);
             opacity: 0.5;
}

/* --- STYLES FOR DETAILED VARIANTS (OPTIONAL) --- */
.variant-button.detailed {
            flex-direction: column;
            align-items: flex-start; /* Align text items to the left */
            padding: 4px 10px;
            min-width: 80px;
}
        
/* Re-center the image when it's just a swatch */
.variant-button.detailed .variant-image {
             margin-right: 0;
             margin-bottom: 4px;
}

.variant-button.detailed .variant-name {
            font-weight: 600;
            margin-top: 2px;
}

.variant-button.detailed .variant-price {
            font-size: 10px;
            color: #666;
            margin-top: -2px;
}

.variant-list input[type="radio"]:checked + .variant-button.detailed .variant-price {
            color: #f53d2d;
}