.embla {
    width: 100%;
    overflow: hidden;
}
.embla * {
    user-select: none;
}
.embla__container {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.embla__container > .embla__slide {
    flex: 0 0 32.2%;
    /* flex: 0 0 31.9%; */
}
section:has(.slider__controls.top) .slider__controls.bottom {
    display: none !important;
}
.slider__controls.top,
.slider__controls.bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 44px;
    z-index: 50;
}
.slider__controls.top {
    position: absolute;
    right: 0;
    top: -94px !important;
    /* top: -148px !important; */
    margin-top: 0;
}
.slider__controls * {
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.slider__dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* height: 10px; */
}
.slider__controls:has(.slider__dots > .slider_dot:only-child) {
    display: none;
}
.slider_dot {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    opacity: 0.25;
    background-color: var(--accent1);
}
.slider_dot.active {
    opacity: 1;
}
.slider_arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.slider_arrows > * {
    cursor: pointer;
}
.slider_arrows > div:first-child {
    scale: -1 1;
}
.slider_arrows > div.disabled {
    opacity: 0.5;
}

section:has(.slider__controls.top) .slider__controls.bottom {
    display: none !important;
}
.product__dots {
    gap: 16px !important;
}
@media (max-width: 768px) {
    .embla {
        overflow: visible;
    }

    section:has(.slider__controls.top) .slider__controls.bottom {
        display: flex !important;
    }
    .slider__controls.top {
        display: none !important;
    }
    .slider__dots {
        /* display: none; */
    }
}

/* когда embla-disabled — отключаем “работу” */
.desktop_embla.embla-disabled .embla__container {
    transform: none !important;
}

.desktop_embla.embla-disabled .embla__viewport {
    overflow: visible; /* или hidden — как тебе нужно на десктопе */
}

.desktop_embla.embla-disabled {
    pointer-events: none; /* полностью блокируем drag/click по embla */
}

/* если внутри есть кликабельные элементы и их надо оставить кликабельными: */
.desktop_embla.embla-disabled * {
    pointer-events: auto;
}