.variant-circle-section{text-align:center;position:relative}.variant-circle-title{margin-top:0;margin-bottom:3rem!important}.variant-circle-container{position:relative;width:500px;height:500px;margin:0 auto}.variant-center-image{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:320px;height:320px;display:flex;align-items:center;justify-content:center}.variant-center-image img{width:65%!important;height:90%!important;object-fit:cover!important;padding:10px;border-radius:6px!important}.variant-circle-items{position:absolute;top:0;left:0;width:100%;height:100%}.variant-circle-item{position:absolute;display:flex;align-items:center;justify-content:center;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;z-index:2}.variant-swatch{width:100%;height:100%;border-radius:50%;border:2px solid rgba(0,0,0,.08);box-shadow:0 3px 10px #0000000f;outline:none;cursor:pointer}.variant-swatch-label{display:flex;align-items:center;justify-content:center;padding:6px;font-size:12px;white-space:nowrap;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.08)}.variant-circle-item:hover,.variant-circle-item.active{transform:scale(1.08);z-index:2}.variant-circle-item.active .variant-swatch{background:#fff;box-shadow:0 6px 20px #0000002e}@media screen and (min-width:769px)and (max-width:1024px){.variant-circle-container{width:420px!important;height:420px!important}.variant-center-image{width:150px;height:150px}.variant-circle-wrapper .variant-circle-items{top:0;left:0}}@media(max-width:768px){.variant-circle-container{width:320px;height:320px;transform:scale(1.24);-webkit-transform:scale(1.24)}.variant-center-image{width:130px;height:130px}.variant-circle-wrapper .variant-circle-items{top:14px;left:14px}.variant-circle-title{margin-bottom:1.5rem!important}.variant-center-image img{width:90%!important;height:100%!important}}@media screen and (min-width:320px)and (max-width:350px){.variant-circle-container{transform:none;-webkit-transform:none}.variant-circle-uniqe .variant-circle-wrapper .variant-circle-items{top:50px!important;left:33px!important}.variant-center-image{left:45%}}
/*# sourceMappingURL=/cdn/shop/t/47/assets/custom-variant-circle.css.map */