/* базовая сетка */

.ms-slider { 

  position: relative; 

  display: grid; 

  grid-template-columns: 1fr; 

  align-items: center; 

}



/* вьюпорт (2-й слой) */

.ms-viewport { 

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  /* разрешаем вертикальные свайпы/скролл родителю */

  touch-action: pan-x pan-y;        /* или просто 'auto' */

  overscroll-behavior-x: contain;   /* горизонталь не «прокидываем» */

  overscroll-behavior-y: auto;  

}

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



/* состояние драга */

.ms-viewport.is-dragging { 

  cursor: grabbing; 

  user-select: none;

}



/* стрелки */

.ms-arrow, .ms-arrow:focus-visible, .ms-arrow:focus {

    cursor: pointer;

    user-select: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    z-index: 99;

    transform: translateY(-50%);

    background: #eea05b;

    backdrop-filter: blur(2px);

}



.ms-arrow.ms-arrow--left { 

    left: 0.5em;

}



.ms-arrow.ms-arrow--right { 

    right: 0.5em;

}



.ms-arrow::before {

    content: '';

    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/return-arr2.svg);

    background-size: cover;

    width: 20px;

    height: 20px;

    position: absolute;

    top: 7px;

    left: 7px;

}



.ms-arrow.ms-arrow--left::before {

    transform: rotate(-90deg);

}



.ms-arrow.ms-arrow--right::before {

    transform: rotate(90deg);

}



.ms-arrow.is-hidden { opacity: 0;  pointer-events: none; }



/* опционально — чтобы картинки не хватались мышью даже вне драга */

.ms-viewport img { 

  -webkit-user-drag: none; 

  user-drag: none;

}