/* Ensure uniform spacing for all variants */
.variants-container {
    display: flex;
    font-family: Nunito Sans, sans-serif;
    font-size: .875EM;
    font-weight: 700;
    letter-spacing: .08em;
    gap:0.3rem;
    justify-content: center;
    align-content: center;
}

.variant-btns {
    display: flex;
    flex-wrap:wrap;
    gap: 0.5rem;
}
/* Hide the default radio button */
.variant-option input[type="radio"] {
    display: none;
}

/* Style the label to look like a square button */
.variant-option label {
    display: inline-block;
    padding: 10px;
    background-color:white;
    padding: 0px 20px;
    text-align: center;
    color: #5c5c5c;
    border: 1px solid #d7d6d0;
    cursor: pointer;
    /*transition: background-color 0.3s, border-color 0.3s;*/
    text-transform:uppercase;
    transition: border-color .2s ease;
    box-sizing: border-box;
    line-height: 40px; /* Center the text vertically */
}

/* Style for the checked state */
.variant-option input[type="radio"]:checked + label {
    /*background-color: #4CAF50;*/ /* Green background when selected */
    box-shadow: inset 0 0 0 1px #5c5c5c;
    border-color: #5c5c5c;
}

/* Hover effect */
.variant-option label:hover {
    border-color: #999;
}

/* Styling the link to look like the square radio buttons */
.add-color-link {
    display: inline-block;
    padding: 10px;
    padding: 0px 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    box-sizing: border-box;
    line-height: 40px; /* Center the text vertically */
    color: white; /* Default text color */
    letter-spacing: 0.08em;
    text-decoration: none; /* Remove underline */
    background-color: black;
}

    /* Hover effect for the link */
    .add-color-link:hover {
        background-color: beige; /* Change background on hover */
        color: #5c5c5c; /* Change text color on hover */
        border-color: #5c5c5c; /* Change border color on hover */
        box-shadow: inset 0 0 0 1px #5c5c5c;
    }