.hdt-sf__frames{position:absolute;right:min(var(--sf-offset),16px);bottom:min(var(--sf-offset),16px);z-index:5;display:flex;align-items:flex-end;gap:calc(var(--sf-gap) * .6)}.hdt-sf__frame{--h: var(--sf-h-mb);position:relative;flex:none;width:calc(var(--h) * .3);height:var(--h);padding:0;overflow:hidden;border:2px solid transparent;border-radius:10px;background:#ffffff1f;cursor:pointer;transition:width .6s cubic-bezier(.2,.7,.2,1),border-color .3s ease}.hdt-sf__frame.is-active{width:calc(var(--h) * .84);border-color:color-mix(in srgb,var(--sf-accent) 55%,transparent);cursor:default}.hdt-sf__frame:not(.is-active):hover{border-color:color-mix(in srgb,var(--sf-accent) 30%,transparent)}.hdt-sf__frame:focus-visible{outline:2px solid var(--sf-accent);outline-offset:3px}.hdt-sf__frame img,.hdt-sf__frame svg{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.hdt-sf__progress{position:absolute;top:0;left:0;right:0;height:2px;background:var(--sf-accent);transform:scaleX(0);transform-origin:left;pointer-events:none}.hdt-sf__frames[autoplay] .is-active .hdt-sf__progress{animation:hdt-sf-progress var(--sf-duration) linear forwards}.hdt-sf__frames.is-paused .is-active .hdt-sf__progress{animation-play-state:paused}.hdt-sf__frames:not([autoplay]) .is-active .hdt-sf__progress{transform:scaleX(1)}@keyframes hdt-sf-progress{to{transform:scaleX(1)}}@media(max-width:767px){.hdt-sf:not(.hdt-sf--frames-mb) .hdt-sf__frames,.hdt-sf:not(.hdt-sf--dots-mb) .hdt-sf__dots{display:none}.hdt-sf--frames-mb .hdt-slide_inner>.hdt-grid{padding-bottom:calc(var(--sf-h-mb) + 16px)}.hdt-sf--frames-mb .hdt-content.hdt-place-self-end{place-self:end start}}@media(min-width:768px){.hdt-sf__frames{right:var(--sf-offset);bottom:var(--sf-offset);gap:var(--sf-gap)}.hdt-sf__frame{--h: var(--sf-h);border-radius:12px}.hdt-sf:not(.hdt-sf--frames-dk) .hdt-sf__frames,.hdt-sf:not(.hdt-sf--dots-dk) .hdt-sf__dots{display:none}.hdt-sf--frames-dk .hdt-content.md\:hdt-place-self-end{place-self:end start}}@media(prefers-reduced-motion:reduce){.hdt-sf__frame{transition:none}.hdt-sf__frames[autoplay] .is-active .hdt-sf__progress{animation:none;transform:scaleX(1)}}
/*# sourceMappingURL=/cdn/shop/t/81/assets/hdt-slideshow-frames.css.map */