.archive-variation  {
    width:100%;   
    max-width: 217px; 
    margin:0 auto;
    margin-top: 5px;    
    padding-bottom: 20px;    
    position: relative;
}
.archive-variation:after {
    display: block;
    position: absolute;
    content: '';
    width: 69px;
    height: 33px;
    left: -12px;
    top: 0px;
    background-image: linear-gradient(90deg, #FFFFFF 16%, rgba(255,255,255,0.00) 100%);
}
.archive-variation .variation-box { 
    width: 100%;
    overflow: scroll;
    padding-bottom: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    position: relative;
}

.archive-variation ul.variation-options { 
    white-space: nowrap;
    text-align: center;
    padding: 0;
    margin: 0;
}

.archive-variation ul.variation-options li.wc-layered-nav-term span.swatch-color,
.archive-variation ul.variation-options li.wc-layered-nav-term span.swatch-image { 
    width:26px;
    height:26px;
    margin: 0;
    display: block;
}


.archive-variation ul.variation-options li.wc-layered-nav-term { 
    display: inline-block;
    width:auto !important;
    float: none;
    clear: none;
    padding: 0px;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    -webkit-appearance: none; 
    margin-left: 10px;
}

.archive-variation ul.variation-options li.wc-layered-nav-term.current { 
    border-color: rgb(120, 120, 120);
}

.archive-variation ul.variation-options li.wc-layered-nav-term .tawcvs-swatches .swatch { 
    border-width: 1px;
}

.products-grid .btn.btn-out-of-stock {
    background: #7e7e7e !important;
    cursor: auto;
}