carousel-container{display:flex;flex-direction:column;width:100%;gap:1.5rem;margin:auto;position:relative}@media screen and (min-width: 992px){.carousel-wrap{overflow:hidden}}@media screen and (min-width: 992px){carousel-container[vertical]{flex-direction:row;gap:1.5rem;justify-content:flex-end}carousel-container[vertical] .carousel-main{order:1;width:100%}carousel-container[vertical] .carousel-thumbnails{order:0;margin-top:0;flex-direction:column;max-height:0;overflow-y:auto;overflow-x:hidden;transition:scroll-top .2s ease-out}carousel-container[vertical] .thumbnail{width:100%}}.carousel-main{cursor:grab;position:relative}.carousel-track{display:flex;transition:transform .3s ease-out;cursor:grab}.carousel-track:active{cursor:grabbing}.carousel-slide{display:none;min-width:100%;-webkit-user-select:none;user-select:none}.carousel-slide img{width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}.carousel-slide video{width:100%;height:auto}.carousel-thumbnails{display:flex;overflow-x:auto;-webkit-user-select:none;user-select:none;gap:1rem;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;transition:scroll-left .2s ease-out}.carousel-thumbnails::-webkit-scrollbar{display:none}.carousel-thumbnails.carousel-thumbnails--rounded .thumbnail .carousel-slide__thumb-image{border-radius:50%}.carousel-thumbnails.carousel-thumbnails--rounded-square .thumbnail .carousel-slide__thumb-image{border-radius:.8rem}.thumbnail{flex:0 0 calc((100% - 8rem) / 6);cursor:pointer}.thumbnail img{width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}.thumbnail.active img{border:1px solid rgb(var(--color-link))}.carousel-nav{width:3.3rem;height:3.3rem;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);background:#fff;border:2px solid rgb(var(--color-link));color:rgb(var(--color-link));cursor:pointer;z-index:2;border-radius:50%;touch-action:manipulation}.carousel-nav .icon-arrow{height:1.3rem;width:auto}.carousel-prev{left:0}.carousel-prev .icon-arrow{transform:rotate(180deg)}.carousel-next{right:0}@media screen and (min-width: 992px){.carousel-nav{width:4rem;height:4rem}.carousel-nav .icon-arrow{height:1.5rem}}.is-grabbing{cursor:grabbing}
/*# sourceMappingURL=/cdn/shop/t/858/assets/component-carousel.css.map */