slideshow-component{position:relative}.c-arrows{display:flex;margin-top:2.5rem}.c-slideshow-controls{justify-content:space-between;align-items:center;margin-top:2.5rem}.c-slideshow-controls .c-arrows{margin-top:0}@media(max-width:768px){.c-slideshow-controls{margin-top:1.5rem}}.c-slideshow-controls.o-grid{display:grid;align-items:center;gap:1rem}.c-arrows--end{justify-content:flex-end}.c-arrow{display:flex;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{background-color:#000;color:#fff}.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: 8px;--dot-width-active: 8px;--dot-height: 2px;--dot-spacing: .5rem;--timing: .6s;--easing: cubic-bezier(.23, 1, .32, 1)}.c-dots{display:flex;align-items:center;gap:var(--dot-spacing);margin:0;padding:.375rem .5rem;border-radius:var(--border-radius);background-color:#0000001a;width:fit-content;margin-inline:auto}.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{position:relative;display:flex;align-items:center;justify-content:center;height:var(--dot-width);width:var(--dot-width);border-radius:50%;background-color:#a8a29e;cursor:pointer;transition:width var(--timing) var(--easing),transform .2s ease-out,opacity .2s ease-out;border:none;padding:0;transform-origin:50% 50%}.c-dot:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:20px;min-height:20px;width:100%;height:100%}.c-dot--active{width:var(--dot-width-active);height:var(--dot-width-active);animation:activeDot var(--timing) var(--easing);opacity:1;background-color:var(--color-primary)}.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/2/assets/component-slideshow.css.map */