:root {
  --mcard-pad: 15px;     /* поля слева/справа */
  --mcard-gap: 2px;      /* отступ между карточками */
  --mcard-radius: 4px;   /* радиус у крайних карточек */
  --mcard-skel: #1A2238; /* цвет плейсхолдера */
}

/* Только мобилка */
@media (max-width: 860px) {
  .mcard-slider {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    isolation: isolate;
    margin: 10px 0; /* сверху/снизу 5px */
  }
  .mcard-slider, .mcard-slider * { box-sizing: border-box; }

  /* ⛔ Полный анти-snap (убираем «магниты») */
  .mcard-slider,
  .mcard-slider__viewport,
  .mcard-track {
    scroll-snap-type: none !important;
    -ms-scroll-snap-type: none !important;
  }
  .mcard-slider__viewport {
    scroll-snap-points-x: none !important;
    scroll-snap-points-y: none !important;
    scroll-snap-destination: 0 0 !important;
  }
  .mcard-slider .mcard-slide {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    scroll-snap-coordinate: none !important; /* legacy */
  }

  /* Вьюпорт: свободный горизонтальный скролл + разрешаем вертикальный скролл страницы */
  .mcard-slider__viewport {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* инерция iOS */
    overscroll-behavior-x: contain;     /* не дергаем историю при перетяге в край */
    touch-action: auto !important;      /* позволяем вертикальный скролл страницы */
    -ms-touch-action: auto !important;

    /* слева 15px, справа дадим через спейсер у трека */
    padding-left: var(--mcard-pad);
    padding-right: 0;
  }
  .mcard-slider__viewport::-webkit-scrollbar { display: none; }
  .mcard-slider__viewport { scrollbar-width: none; }

  /* Лента */
  .mcard-track {
    display: flex;
    align-items: stretch;
    gap: var(--mcard-gap); /* 2px между карточками */
  }

  /* Энд-спейсер: гарантирует 15px от правого края у последней карточки */
  .mcard-track::after {
    content: "";
    flex: 0 0 calc(var(--mcard-pad) - var(--mcard-gap)); /* 15px - 2px = 13px */
    align-self: stretch;
    pointer-events: none;
  }

  /* Карточка: ширина = 85% экрана минус поля; одинаковая у всех */
  .mcard-slider .mcard-slide {
    flex: 0 0 auto;
    width:     calc(85vw - (var(--mcard-pad) * 2));
    min-width: calc(85vw - (var(--mcard-pad) * 2));
    max-width: calc(85vw - (var(--mcard-pad) * 2));

    position: relative;
    overflow: hidden;
    background: var(--mcard-skel); /* виден до загрузки фото */
    border-radius: 0;              /* скругления только у крайних */
    aspect-ratio: 4 / 3;           /* при необходимости поменять */
  }

  /* Скругления только у первой и последней карточек */
  .mcard-track .mcard-slide:first-of-type {
    border-top-left-radius: var(--mcard-radius);
    border-bottom-left-radius: var(--mcard-radius);
  }
  .mcard-track .mcard-slide:last-of-type {
    border-top-right-radius: var(--mcard-radius);
    border-bottom-right-radius: var(--mcard-radius);
  }
  .mcard-track .mcard-slide:only-of-type {
    border-radius: var(--mcard-radius);
  }

  /* Скелетон поверх до загрузки */
  .mcard-skeleton {
    position: absolute;
    inset: 0;
    background: var(--mcard-skel);
    z-index: 1;
    opacity: 1;
    transition: opacity .2s ease;
    pointer-events: none;
  }
  .mcard-slide.loaded .mcard-skeleton { opacity: 0; }

  /* Картинка плавно проявляется после загрузки */
  .mcard-slider .mcard-slide__img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 0;
    -webkit-user-drag: none;
    transform: translateZ(0);

    opacity: 0;
    transition: opacity .2s ease;
  }
  .mcard-slide.loaded .mcard-slide__img { opacity: 1; }

  /* На всякий — блок счётчика скрыт */
  .mcard-slider__dots { display: none !important; }
}