slideshow-component{position:relative}.c-arrows{display:flex;gap:1rem}.c-slideshow-controls{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem}.c-slideshow-controls .c-arrows{margin-top:0}.c-slideshow-controls.o-grid{display:grid;align-items:center;gap:1rem}.c-arrows--end{justify-content:flex-end}.c-arrow{display:flex;padding:0;align-items:center;justify-content:center;background-color:var(--color-primary-button-background);color:var(--color-primary-button-text);cursor:pointer;aspect-ratio:1 / 1}.c-arrow svg{fill:#000}.c-arrow:disabled,.c-arrow.disabled{cursor:not-allowed;opacity:.4}.c-arrow:hover{color:#000c}.c-arrow:hover svg{fill:#000c}.c-arrow--transparent{background-color:transparent;border:none;box-shadow:none}@keyframes activeDot{0%,to{transform:scaleY(1)}25%{transform:scaleY(.75)}}@keyframes inactiveDot{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.85) scaleY(1.25)}}:root{--dot-width: 6px;--dot-width-active: 6px;--dot-height: 2px;--dot-touch-target-size: 20px;--dot-spacing: .75rem;--timing: .6s;--easing: cubic-bezier(.23, 1, .32, 1)}.c-dots{display:flex;align-items:center;gap:var(--dot-spacing);padding:0;margin:0}.c-dots--left{justify-content:flex-start!important}.c-dots--center{justify-content:center!important}.c-dots--right{justify-content:flex-end!important}.c-dot{display:flex;align-items:center;justify-content:center;height:var(--dot-width);width:var(--dot-width);border-radius:50%;background-color:var(--color-background);cursor:pointer;transition:width var(--timing) var(--easing),transform .2s ease-out,opacity .2s ease-out;border:1px solid var(--color-foreground);padding:0;transform-origin:50% 50%}.c-dots:not(.c-dots--bars) .c-dot{position:relative}.c-dots:not(.c-dots--bars) .c-dot:before{content:"";position:absolute;inset:calc((var(--dot-touch-target-size) - var(--dot-width)) / -2)}.c-dot--active{width:var(--dot-width-active);height:var(--dot-width-active);animation:activeDot var(--timing) var(--easing);background-color:var(--color-foreground)}.c-dots:not(.c-dots--bars) .c-dot--active:before{inset:calc((var(--dot-touch-target-size) - var(--dot-width-active)) / -2)}.c-dot:not(.c-dot--active){animation:inactiveDot var(--timing) ease backwards}.c-dot:not(.c-dot--active):hover{opacity:.75}.c-dots--bars .c-dot{height:2px;width:20px;border-radius:2px}.c-dots--bars .c-dot--active{width:40px}
/*# sourceMappingURL=/cdn/shop/t/6/assets/component-slideshow.css.map */