.color-option{flex-wrap:wrap;gap:10px;width:100%;margin-top:6px;display:flex}.color-option button{border:1px solid transparent;border-radius:100px;align-content:center;justify-content:center;padding:2px;transition:all .3s;display:grid;position:relative}.color-option button:disabled{cursor:not-allowed}.color-option button.loading{cursor:wait;animation:.7s infinite alternate loading}@keyframes loading{0%{opacity:.6}to{opacity:.3}}.color-option button i{color:#03a9f4;opacity:0;visibility:hidden;font-size:30px;transition:all .3s;position:absolute;top:calc(50% - 11px);left:10px;z-index:10!important}.color-option button .circle-image{border:8px solid var(--color-bg-products);border-radius:32px;width:48px;height:48px;transition:all .2s ease-in-out;overflow:hidden}.color-option button .circle-image img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}.color-option button .circle-image.available:hover{border-width:3px}.color-option button .circle-image.unavailable{opacity:.5}.color-option button>span{border:8px solid var(--color-bg-products);border-radius:100px;width:48px;height:48px;transition:all .2s ease-in-out;display:inline-block;position:relative;overflow:hidden}.color-option button>span .third-color{transform-origin:100%;width:100%;height:100%;display:inline-block;position:absolute;top:0;right:50%;rotate:-45deg}.color-option button>span.available:hover{border-width:3px}.color-option button .none-option{border:4px solid var(--color-primary);transition:all .1s ease-in-out;position:relative}.color-option button .none-option .slash-none-option{background-color:var(--color-primary);width:100%;height:4px;margin:auto;transition:all .1s ease-in-out;position:absolute;top:0;bottom:0;left:0;right:0;transform:rotate(45deg)}.color-option button .none-option:hover{border-width:6px!important}.color-option button .none-option:hover .slash-none-option{height:6px}.color-option button .unavailable{opacity:.5}.color-option button:has(.unavailable){border-color:#cecece;position:relative}.color-option button:has(.unavailable):after{content:"";background-color:#cecece;width:100%;height:1px;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;transform:rotate(-45deg)}.color-option .active{border-color:#03a9f4}.color-option .active i{opacity:1;visibility:visible;font-size:16px;top:4px;left:-33px}