table.variations {
    display: block;
    tbody, tr, td, th {
        display: block;  
    }

    .label{
        padding: 0;
        text-align: left;
        margin: 0 0 .5rem;
        background: transparent !important;
    }

    td.value{
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

td.value {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background: transparent;
}
td.value input[type="radio"] {
    appearance: none;
    display: none;
}
td.value label {
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    transition: linear 0.3s;
    color: var(--radio-color);
    padding: 0.3em 0.6em;
    border: 2px solid var(--radio-color);
    cursor: pointer;
    background-color: #f1f3f5;
}
td.value input[type="radio"]:checked + label {
    background-color: #222 !important;
    color: #f1f3f5 !important;
    transition: 0.3s;
}
a.reset_variations {
    display: none !important;
}