.na-viewport::-webkit-scrollbar {
    display: none;
}

.na-viewport {
    -ms-overflow-style: none;
    scrollbar-width: none;
    will-change: scroll-position;
}

[data-track]>* {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.na-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #CFCFD3;
    flex: 0 0 auto;
    transition: width .25s ease, background-color .25s ease, opacity .25s ease;
}

.na-dot[aria-current="true"] {
    width: 36px;
    background: #151515;
}

.na-box {
    position: relative;
    background: #F3F4F6;
    width: 100%;
    aspect-ratio: 358/550;
    --img-h: 75%;
}


.na-center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--img-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.na-img {
    height: 100%;
    width: auto;
    max-width: 92%;
    object-fit: contain;
    display: block;
}

.snap-start.group>.bg-white {
    border: 1px solid transparent;
    transition: border-color .2s ease;
}

@media (hover:hover) {
    .na-box {
        transform-origin: top center;
        transform: scaleY(1);
        transition: transform .4s cubic-bezier(.22, .61, .36, 1);
        will-change: transform;
        backface-visibility: hidden;
    }
}

@media (hover:hover) and (min-width:1024px) {
    .group:hover .na-box {
        transform: scaleY(.95);
    }
}

@media (hover:hover) and (min-width:640px) and (max-width:1023.98px) {
    .group:hover .na-box {
        transform: scaleY(.96);
    }
}

@media (hover:hover) {
    .snap-start.group:hover>.bg-white {
        border-color: var(--dark-60, #6B6F76);
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-box {
        transition: none !important;
    }
}

.hero-wedge {
    background: #fff;
    clip-path: polygon(0% 0%, 68% 0%, 40% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 68% 0%, 40% 100%, 0% 100%);
}

@supports not (clip-path: polygon(0% 0%, 60% 0%, 40% 100%, 0% 100%)) {
    .hero-wedge {
        background: linear-gradient(330deg, #fff 0 60%, rgba(255, 255, 255, 0) 60.1%);
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

[data-store-slider] .store-dots .sd-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #c7c7c7;
    opacity: .6;
    transition: all .3s ease;
}

[data-store-slider] .store-dots .sd-bullet.is-active {
    width: 22px;
    height: 8px;
    background: #111;
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes hotspot-zoom {
        from {
            transform: translateZ(0) scale(1);
        }

        to {
            transform: translateZ(0) scale(var(--pulse-scale, 1.12));
        }
    }

    .hotspot-pulse {
        animation: hotspot-zoom 0.5s ease-in-out infinite alternate !important;
        will-change: transform;
        transform-origin: center;
    }

    .hotspot-pulse:hover,
    .hotspot-pulse:focus-visible {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @keyframes hotspot-zoom {
        from {
            transform: translateZ(0) scale(1)
        }

        to {
            transform: translateZ(0) scale(var(--pulse-scale, 1.12))
        }
    }

    .hotspot-pulse {
        animation: hotspot-zoom 3.0s ease-in-out infinite alternate;
        will-change: transform;
        transform-origin: center;
    }

    .hotspot-pulse:hover,
    .hotspot-pulse:focus-visible {
        animation-play-state: paused
    }

    @keyframes copy-out {
        to {
            opacity: 0;
            transform: translateY(6px) scale(.985);
            filter: blur(.5px)
        }
    }

    @keyframes copy-in {
        from {
            opacity: 0;
            transform: translateY(10px) scale(1.01);
            filter: blur(.5px)
        }

        to {
            opacity: 1;
            transform: none;
            filter: none
        }
    }

    .copy-out {
        animation: copy-out .28s ease forwards
    }

    .copy-in {
        animation: copy-in .56s cubic-bezier(.2, .8, .2, 1) forwards
    }

    @keyframes media-in {
        from {
            opacity: 0;
            transform: translateX(10px) scale(1.02)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    .media-in {
        animation: media-in .90s cubic-bezier(.2, .8, .2, 1) forwards
    }

}