/* ===== Carousel screen ===== */
.screen-carousel{
    min-height: 100svh;
    padding: clamp(16px,4vw,48px);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(14px,2vh,22px);
    background: #000; /* при желании поменяй/убери */
    scroll-snap-align: start;
  }
  
  .screen-carousel .title-xl.center{ text-align:center; }
  
  /* Контейнер карусели */
  .crs{
    position: relative;
    display:grid;
    grid-template-rows: 1fr auto; /* трек + точки */
    gap: clamp(10px,2vh,14px);
  }
  
  /* Трек */
  .crs-track{
    display:flex;
    gap: clamp(10px,1.6vw,16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 6px 46px;              /* отступы для стрелок */
  }
  
  /* Прячем нативный скроллбар */
  .crs-track::-webkit-scrollbar{ height:0; }
  
  /* Слайды: ширина зависит от экрана (3 / 2 / 1) */
  .crs-slide{
    flex: 0 0 28%;                  /* десктоп ~3 в ряд */
    scroll-snap-align: center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    background: #111;
  }
  @media (max-width: 1000px){ .crs-slide{ flex-basis: 44%; } } /* ~2 в ряд */
  @media (max-width: 640px) { .crs-slide{ flex-basis: 84%; } } /* по одному */
  
  .crs-slide img{
    display:block; width:100%; height:100%;
    object-fit: cover; aspect-ratio: 4/3;  /* меняй на 1/1 если квадраты */
  }
  
  /* Стрелки */
  .crs-nav{
    position:absolute; top:50%; translate:0 -50%;
    width:38px; height:38px; border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.35);
    color:#fff; font-size:22px; line-height:38px; text-align:center;
    cursor:pointer; z-index:3;
    backdrop-filter: blur(6px);
  }
  .crs-prev{ left:6px; }
  .crs-next{ right:6px; }
  .crs-nav:hover{ background: rgba(255,255,255,.12); }
  
  /* Точки */
  .crs-dots{ display:flex; justify-content:center; gap:8px; }
  .crs-dots button{
    width:8px; height:8px; border-radius:50%;
    border:none; background:#666; opacity:.6; cursor:pointer;
  }
  .crs-dots button[aria-selected="true"]{ background:#fff; opacity:1; width:22px; border-radius:999px; }
  
  /* Глобально запрещаем горизонтальный скролл */
html, body { max-width: 100%; overflow-x: clip; } /* можно hidden если старый браузер */

/* Экран с постоянными реставрациями — ничего не выпускаем наружу */
.screen-how.permanent { overflow: hidden; }

/* Экран с каруселью */
.screen-carousel { overflow: hidden; }

/* Навигационные стрелки точно поверх и кликабельны */
.crs{ position: relative; }
.crs-track{ position: relative; z-index: 1; }
.crs-nav{
  position:absolute; top:50%; translate:0 -50%;
  z-index: 10; pointer-events:auto;
}

/* Точки: не даём им раздувать ширину, разрешаем перенос/скролл */
.crs-dots{
  display:flex; justify-content:center;
  gap:6px; flex-wrap: wrap;           /* ← переносим на новую строку */
  max-width:100%;
  overflow-x:auto; padding:6px 0 2px;
  scrollbar-width: none;
}
.crs-dots::-webkit-scrollbar{ display:none; }

/* Мобильные размеры слайдов/стрелок */
@media (max-width: 640px){
  .crs-slide{ flex-basis: 86%; }        /* один крупный слайд */
  .crs-nav{ width:32px; height:32px; font-size:18px; line-height:32px; }
}