.color.groupRadio{
    opacity: 0;
    transition: all .3s ease-in-out;
}
.col.item:hover .color.groupRadio{
    opacity: 1;
}
.col.item:has(div[id^=size]:not(:empty)):hover .differentColors{
    background-color: rgba(0,0,0,.2);    
}

.differentColors{
    bottom: -1rem;
    border-radius: 5px;
    transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
div[id^=size] button, div[id^=color] button{
    min-width: auto;
    width: auto;    
}

div[id^=size] button:last-child{
    margin-left: 0;
}

div[id^=size] button{        
    min-height: 27px;
    min-width: 27px;
    max-width: 80px;
    padding:2px;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: #ffffff;
    border-color: #B4B4B4;
    direction: ltr;
}

div[id^=color] div{
    width: 32px;
    height: 32px;        
    border-radius: 50%;
}
div[id^=size] img, div[id^=color] img{
    width: 32px;
    height: 32px;    
    border-radius: 50%;
    object-fit: cover;
}
div[id^=color] .active{
    -webkit-box-shadow:0px 0px 0px 1px #141414;-moz-box-shadow:0px 0px 0px 1px #141414;box-shadow: 0px 0px 0px 1px #141414;
}
div[id^=size] .active{
    background-color:#ffffff;
    color:#000000;
    box-shadow: none;
    border-color: #000000;

}
div[id^=color] .active{
    background-color:#ffffff;
    color:#000000;
    border-color:#B4B4B4;
}
div[id^=color] .active img{
    padding: 2px;
}
.outofStockline{
    opacity: 0.6;
}

.outofStockline::after{
    content: "";
    display: block;
    width: 120%;
    height: 2px;
    pointer-events: none;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translate(-50%) rotate(-45deg);
}

@media (max-width: 991px) {
    .col.item:has(div[id^=size]:not(:empty)):hover .differentColors{background-color: unset;}
    .col.item:hover .color.groupRadio{opacity: 0;}
    div[id^=size] img, div[id^=color] img{
        width: 22px;
        height: 22px;
    }
    div[id^=color] div{
        width: 22px;
        height: 22px;
        display: flex;
    }
}