.image-circles-section__heading{margin:0 0 2rem;text-align:center}.image-circles-viewport{overflow:hidden;touch-action:pan-y;cursor:grab}.image-circles-viewport:active{cursor:grabbing}.image-circles{display:flex;width:max-content;list-style:none;margin:0;padding:.6rem 0;gap:2rem;user-select:none;-webkit-user-select:none;will-change:transform}.image-circles__item{flex:0 0 auto;width:10rem}.image-circles__button{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%;padding:0;border:none;background:transparent;cursor:pointer}.image-circles__ring{display:block;width:10rem;height:10rem;border-radius:50%;padding:.25rem;background:conic-gradient(from 180deg,#7c3aed,#f97316,#facc15,#7c3aed)}.image-circles__ring-inner{display:block;width:100%;height:100%;border-radius:50%;padding:.3rem;background:rgb(var(--color-background));overflow:hidden}.image-circles__thumb{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;-webkit-user-drag:none}.image-circles__label{font-size:1.3rem;text-align:center;color:rgb(var(--color-foreground))}@media screen and (max-width:749px){.image-circles__item{width:8rem}.image-circles__ring{width:8rem;height:8rem}}.image-circles__modal{position:fixed;top:0;inset-inline-start:0;z-index:-1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:2rem;box-sizing:border-box;background:rgba(var(--color-foreground),.5);opacity:0;visibility:hidden}.image-circles__modal[open]{z-index:101;opacity:1;visibility:visible}.image-circles__modal-content{position:relative;width:100%;max-width:50rem;background:rgb(var(--color-background));border-radius:.8rem;padding:1.6rem;box-sizing:border-box}.image-circles__modal-close{position:absolute;top:-1.6rem;inset-inline-end:-1.6rem;display:flex;align-items:center;justify-content:center;width:3.6rem;height:3.6rem;border-radius:50%;border:none;background:rgb(var(--color-background));box-shadow:0 0 .6rem rgba(var(--color-foreground),.25);cursor:pointer;color:rgb(var(--color-foreground))}.image-circles__modal-close .icon{width:1.4rem;height:1.4rem}.image-circles__modal-image-wrap{width:100%;aspect-ratio:1 / 1;border-radius:.6rem;overflow:hidden}.image-circles__modal-image{display:block;width:100%;height:100%;object-fit:cover}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-image-circles.css.map */