.ring-carousel{position:relative;display:block;width:100%;container-type:inline-size;--ring-card-gap: 32px;--ring-card-width: calc((100cqw - 4 * var(--ring-card-gap)) / 5)}.ring-carousel__viewport{overflow:hidden;width:100%;max-width:100%;margin-inline:auto;touch-action:pan-y}.ring-carousel__track{display:flex;gap:var(--ring-card-gap);transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}.ring-carousel--static .ring-carousel__track{justify-content:center;transition:none}.ring-carousel__slide{flex:0 0 auto;width:var(--ring-card-width)}.ring-carousel__card{position:relative;display:block;aspect-ratio:278 / 300;text-decoration:none}.ring-carousel__frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.ring-carousel__frame path{fill:var(--color-background);stroke:#030303;stroke-width:2px}.ring-carousel__image{position:absolute;top:9.1%;right:9.5%;bottom:9.1%;left:9.5%;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-lfe-gray-bg)}.ring-carousel__image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}@media(any-pointer:fine)and (prefers-reduced-motion:no-preference){.ring-carousel__image img{transition:transform var(--hover-transition-duration) var(--hover-transition-timing)}.ring-carousel__card:hover .ring-carousel__image img{transform:scale(var(--hover-subtle-zoom-amount))}}.ring-carousel__arrow{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0px solid var(--color-foreground);border-radius:50%;background-color:var(--color-background);box-shadow:0 1px 6px #0003;color:var(--color-foreground);cursor:pointer;transform:translateY(-50%);transition:opacity .2s ease,background-color .2s ease,color .2s ease}.ring-carousel__arrow:hover{background-color:var(--color-foreground);color:var(--color-background)}.ring-carousel__arrow[hidden]{display:none}.ring-carousel__arrow--prev{left:8px}.ring-carousel__arrow--next{right:8px}.ring-carousel__arrow:disabled{opacity:.3;cursor:default}.ring-carousel__arrow:disabled:hover{background-color:var(--color-background);color:var(--color-foreground)}.ring-carousel__arrow svg{width:14px;height:16px}@media(prefers-reduced-motion:reduce){.ring-carousel__track{transition:none}}@media screen and (max-width:749px){.ring-carousel{--ring-card-width: 70vw;--ring-card-gap: 16px}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/custom-ring-carousel.css.map */