.qb-carousel{--qb-cols: 4;--qb-gap: 20px;--qb-slide-mobile: 78%;--qb-nav-top: 50%}.qb-carousel__viewport{position:relative}.qb-carousel__track{display:flex;gap:var(--qb-gap);list-style:none;margin:0;padding:4px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.qb-carousel__track::-webkit-scrollbar{display:none}.qb-carousel__slide{flex:0 0 calc((100% - (var(--qb-cols) - 1) * var(--qb-gap)) / var(--qb-cols));min-width:0;scroll-snap-align:start}.qb-carousel__nav{position:absolute;top:var(--qb-nav-top);transform:translateY(-50%);z-index:4;width:4.4rem;height:4.4rem;border-radius:50%;border:0;background:rgb(var(--color-base-background-1));color:rgb(var(--color-base-text));box-shadow:0 6px 18px rgba(var(--color-base-text),.14);cursor:pointer;display:none;align-items:center;justify-content:center;transition:opacity .18s ease}.qb-carousel__nav svg{width:1.7rem;height:auto}.qb-carousel__nav--prev{left:-1.4rem}.qb-carousel__nav--prev svg{transform:rotate(90deg)}.qb-carousel__nav--next{right:-1.4rem}.qb-carousel__nav--next svg{transform:rotate(-90deg)}.qb-carousel__nav[disabled]{opacity:0;pointer-events:none}.qb-carousel__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:3rem}.qb-carousel__dot{width:3.2rem;height:.3rem;border:0;padding:0;border-radius:2px;background:rgba(var(--color-foreground),.2);cursor:pointer;transition:background .2s ease}.qb-carousel__dot[aria-current=true]{background:rgb(var(--color-foreground))}@media(max-width:989px){.qb-carousel--nav-mobile .qb-carousel__nav{display:inline-flex;width:3.6rem;height:3.6rem;touch-action:pan-x}.qb-carousel--nav-mobile .qb-carousel__nav svg{width:1.4rem}.qb-carousel--nav-mobile .qb-carousel__nav--prev{left:.6rem}.qb-carousel--nav-mobile .qb-carousel__nav--next{right:.6rem}.qb-carousel--nav-mobile .qb-carousel__dots{display:none}}@media(min-width:990px){.qb-carousel__nav{display:inline-flex}.qb-carousel__dots{display:none}}@media(max-width:749px){.qb-carousel{--qb-gap: 12px}.qb-carousel__slide{flex-basis:var(--qb-slide-mobile)}.qb-carousel__track{padding-left:16px!important;padding-right:0!important;scroll-padding-left:16px}}@media(prefers-reduced-motion:reduce){.qb-carousel__track{scroll-behavior:auto}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/qb-carousel.css.map */
