/* ============================================================
   RusFoodFest — страница маршрута «Moscow from Above»
   Десктоп: фрейм 1440×10402. Мобилка: фрейм 393×12783.
   Хиро позиционирован жёстко, дальше — поток.
   ============================================================ */

.orpage {
  position: relative;
  overflow: clip;
}

/* ---------- Хиро ---------- */

.orhero {
  position: relative;
  height: auto;
  margin-bottom: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orhero__white {
  position: absolute;
  inset: 0 0 auto 0;
  height: 301px;
  background: #fff;
}

.orhero__media {
  position: relative;
  left: 0;
  right: 0;
  margin-top: 77px;
  top: unset;
  width: 100%;
  height: 640px;
  z-index: 2;
  pointer-events: none;
}

.orhero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22640%22 viewBox=%220 0 1440 640%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M1317.67 0 C1328.38 0.000135836 1337.07 8.68546 1337.07 19.3994 L1337.07 34.0508 L1401.2 34.0508 C1422.63 34.051 1440 51.4222 1440 72.8506 L1440 495.918 C1440 517.346 1422.63 534.718 1401.2 534.718 L1337.07 534.718 L1337.07 549.369 C1337.07 560.083 1328.38 568.769 1317.67 568.77 L1039.7 568.77 C953.297 613.182 842.031 639.911 720.613 639.911 C599.196 639.911 487.93 613.182 401.523 568.77 L122.33 568.77 C111.616 568.77 102.93 560.083 102.93 549.369 L102.93 534.718 L38.7998 534.718 C17.3713 534.718 0 517.346 0 495.918 L0 72.8506 C0 51.4221 17.3713 34.0508 38.7998 34.0508 L102.93 34.0508 L102.93 19.3994 C102.93 8.68552 111.615 0.000247898 122.329 0 L500.832 0 C562.553 40.6785 638.496 64.6699 720.614 64.6699 C802.733 64.6699 878.676 40.6784 940.396 0 L1317.67 0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22640%22 viewBox=%220 0 1440 640%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M1317.67 0 C1328.38 0.000135836 1337.07 8.68546 1337.07 19.3994 L1337.07 34.0508 L1401.2 34.0508 C1422.63 34.051 1440 51.4222 1440 72.8506 L1440 495.918 C1440 517.346 1422.63 534.718 1401.2 534.718 L1337.07 534.718 L1337.07 549.369 C1337.07 560.083 1328.38 568.769 1317.67 568.77 L1039.7 568.77 C953.297 613.182 842.031 639.911 720.613 639.911 C599.196 639.911 487.93 613.182 401.523 568.77 L122.33 568.77 C111.616 568.77 102.93 560.083 102.93 549.369 L102.93 534.718 L38.7998 534.718 C17.3713 534.718 0 517.346 0 495.918 L0 72.8506 C0 51.4221 17.3713 34.0508 38.7998 34.0508 L102.93 34.0508 L102.93 19.3994 C102.93 8.68552 111.615 0.000247898 122.329 0 L500.832 0 C562.553 40.6785 638.496 64.6699 720.614 64.6699 C802.733 64.6699 878.676 40.6784 940.396 0 L1317.67 0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.orhero__media::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  background: url("../icons/hero-line-desk.svg") center / 100% 100% no-repeat;
}

.orhero__uzor {
  position: absolute;
  left: 50%;
  top: 618px;
  transform: translateX(-50%) scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  z-index: 1;
  pointer-events: none;
}

.orhero__title {
  position: relative;
  left: unset;
  top: unset;
  margin-top: 52px;
  margin-bottom: 97px;
  transform: unset;
  width: 700px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 86px;
  line-height: 87px;
  letter-spacing: 2.58px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
  z-index: 3;
}

.orpage .collab {
  top: 767px;
}

.orhero__intro {
  position: relative;
  left: unset;
  top: unset;
  transform: unset;
  width: 766px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.4;
  z-index: 3;
}

.orhero__dropcap {
  float: left;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 70.4px;
  line-height: 56px;
  letter-spacing: 2.11px;
  margin-right: 10px;
  color: var(--c-title);
}

/* ---------- Остановки ---------- */

.stops {
  width: 1228px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* Шапка остановки: номер + фото + текст */
.stop__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 46px;
  padding-left: 150px;
  padding-bottom: 20px;
}

.stop__num {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 208px;
  height: 207px;
  flex: none;
}

.stop__num img {
  position: absolute;
  inset: 3.4% 6.3% 5.9% 6.3%;
  width: 87.4%;
  height: 90.7%;
}

.stop__num span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 119.6px;
  letter-spacing: 3.59px;
  color: var(--c-title);
}

.stop__photo {
  position: relative;
  flex: none;
  width: 485px;
  aspect-ratio: 485.4 / 379;
  margin-top: 12px;
}

.stop__photo img,
.rest__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22502%22 height=%22395%22 viewBox=%22205 4 502 395%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M455.967 12C504.923 12.0001 550.49 23.345 588.603 42.8525H687.903C693.426 42.8525 697.903 47.3297 697.903 52.8525V189.094C698.244 193.205 698.418 197.352 698.418 201.53C698.418 205.709 698.244 209.856 697.903 213.967V347.917C697.903 353.44 693.426 357.916 687.903 357.916H592.975C553.996 378.824 506.81 391.061 455.967 391.062C405.123 391.062 357.936 378.824 318.958 357.916H223C217.477 357.916 213 353.439 213 347.916V52.8525C213 47.3297 217.477 42.8525 223 42.8525H323.33C361.443 23.3449 407.01 12 455.967 12Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22502%22 height=%22395%22 viewBox=%22205 4 502 395%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M455.967 12C504.923 12.0001 550.49 23.345 588.603 42.8525H687.903C693.426 42.8525 697.903 47.3297 697.903 52.8525V189.094C698.244 193.205 698.418 197.352 698.418 201.53C698.418 205.709 698.244 209.856 697.903 213.967V347.917C697.903 353.44 693.426 357.916 687.903 357.916H592.975C553.996 378.824 506.81 391.061 455.967 391.062C405.123 391.062 357.936 378.824 318.958 357.916H223C217.477 357.916 213 353.439 213 347.916V52.8525C213 47.3297 217.477 42.8525 223 42.8525H323.33C361.443 23.3449 407.01 12 455.967 12Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.stop__photo::after,
.rest__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/stop-frame-line.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.stop__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

.stop__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 54px;
  line-height: 66px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  color: var(--c-title);
}

.stop__desc {
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.4;
}

/* Заголовок «Where to eat» с узором */
.stop__eat-head {
  position: relative;
  height: 16px;
  margin-top: 48px;
}

.stop__eat-uzor {
  position: absolute;
  left: calc(50% + 46.5px);
  top: -91px;
  transform: translateX(-50%);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
}

.stop__eat-title {
  position: absolute;
  left: calc(50% + 46.5px);
  top: 14px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 42px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--c-blue);
  white-space: nowrap;
}

/* Рестораны */
.stop__rests {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding-left: 150px;
  margin-top: 48px;
}

.rest {
  width: 485px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rest__media {
  position: relative;
  width: 100%;
  aspect-ratio: 485 / 391;
  margin-bottom: 46px;
}

.rest__dish {
  position: absolute;
  left: 60%;
  top: 67%;
  width: 35%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: drop-shadow(20px 18px 40px rgba(41, 58, 70, 0.25));
  z-index: 1;
}

.rest__name {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--c-blue);
}

.rest__desc {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.4;
}

.rest__addr {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rest__addr img {
  width: 15px;
  height: 16px;
}

.rest__addr span {
  font-size: 14px;
  letter-spacing: 0.42px;
}

.rest__more {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 16px;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  color: var(--c-blue);
  transition: opacity 0.2s;
}

.rest__more:hover {
  opacity: 0.65;
}

/* «What to do» на белой волнистой подложке.
   Высота блока не фиксируется числом (карточек может быть 2 или 3,
   с разной длиной текста) — формируется потоком, волнистая подложка
   растягивается вслед за контентом через calc(100% + 33px). */
.stop__todo {
  position: relative;
  margin-top: 48px;
  padding: 39px 0 60px;
}

.stop__todo-uzor {
  /* Тот же принцип, что у .stop__eat-uzor (тот же файл, та же роль —
     узор позади заголовка блока): раньше -131px было настроено под
     фиксированную высоту .stop__rests, из-за которой между блоком
     ресторанов и "What to do" всегда был большой запас пустого места.
     Теперь высота потоковая (variable), тот отступ перестал быть
     безопасным и узор наезжал на текст. Используем то же значение,
     что уже проверенно работает у .stop__eat-uzor. */
  position: absolute;
  left: calc(50% + 47.5px);
  top: -91px;
  transform: translateX(-50%);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
  z-index: -1;
}

.stop__todo-bg {
  position: absolute;
  left: 50%;
  top: -33px;
  transform: translateX(-50%);
  width: max(1488px, calc(100vw + 48px));
  height: calc(100% + 100px);
  max-width: none;
  pointer-events: none;
}

.stop__todo-bg--mob {
  display: none;
}

.stop__todo-title {
  position: relative;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 42px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  color: var(--c-blue);
  white-space: nowrap;
  z-index: 1;
}

.stop__todo-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 44px;
  margin-top: 44px;
}

.todo {
  width: 313px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.todo__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 333 / 256;
  /* .todo__frame теперь <button> (кликабельно только фото, карточка
     .todo сама по себе больше не ссылка) — сброс дефолтных стилей кнопки. */
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.todo__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22408%22 height=%22317%22 viewBox=%220 0 408 317%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M204.209 6C244.146 6 281.319 15.1111 312.41 30.7773H393.268C397.858 30.7775 401.579 34.4986 401.579 39.0889V148.226C401.857 151.528 401.999 154.859 401.999 158.216C401.999 161.572 401.857 164.903 401.579 168.205V275.5C401.579 280.09 397.858 283.811 393.268 283.812H315.979C284.181 300.603 245.687 310.432 204.209 310.432C162.732 310.432 124.237 300.603 92.4395 283.812H14.3115C9.72129 283.811 6.00018 280.09 6 275.5V39.0889C6.00009 34.4986 9.72123 30.7774 14.3115 30.7773H96.0088C127.1 15.1112 164.272 6.00006 204.209 6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22408%22 height=%22317%22 viewBox=%220 0 408 317%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M204.209 6C244.146 6 281.319 15.1111 312.41 30.7773H393.268C397.858 30.7775 401.579 34.4986 401.579 39.0889V148.226C401.857 151.528 401.999 154.859 401.999 158.216C401.999 161.572 401.857 164.903 401.579 168.205V275.5C401.579 280.09 397.858 283.811 393.268 283.812H315.979C284.181 300.603 245.687 310.432 204.209 310.432C162.732 310.432 124.237 300.603 92.4395 283.812H14.3115C9.72129 283.811 6.00018 280.09 6 275.5V39.0889C6.00009 34.4986 9.72123 30.7774 14.3115 30.7773H96.0088C127.1 15.1112 164.272 6.00006 204.209 6Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.todo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../icons/route-frame-line.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.todo__title {
  margin-top: 38px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 24px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--c-blue);
  max-width: 332px;
}

.todo__desc {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.35;
  max-width: 326px;
}

.todo-dots {
  display: none; /* карусель карточек — только мобилка */
}

/* ---------- Лайтбокс для фото в блоке "What to do" ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 1000;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

body.lightbox-open {
  overflow: hidden;
}

/* ---------- Низ страницы ---------- */

.orfooter-uzor {
  /* Раньше -27px/-91px были подогнаны под то, что .stops в макете
     всегда заканчивается на фиксированном пикселе (9455/9598) —
     то есть под конкретное число остановок с конкретной длиной
     текста. Теперь количество остановок и их высота — переменные,
     общая высота .stops не предсказуема, поэтому вместо подгонки
     под конкретный пиксель просто не тянем узор/заголовок вверх —
     они идут в обычном потоке сразу после остановок. */
  position: relative;
  display: block;
  margin: 0 auto;
  transform: scaleY(-1);
  width: 515px;
  height: 261px;
  max-width: none;
  pointer-events: none;
  z-index: -1;
}

.other-routes {
  margin-top: 0;
  padding-bottom: 193px;
}

.other-routes__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 54px;
  letter-spacing: 1.62px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-title);
}

.or-dots {
  display: none; /* карусель «Other routes» — только мобилка */
}

/* переопределяем абсолютную сетку из routes.css */
.orpage .routes-grid--other {
  position: static;
  transform: none;
  margin: 41px auto 0; /* карточки в макете на 9677 */
}

/* ============================================================
   Мобилка (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .orhero {
	  margin-bottom: 62px;
  }
  
  .orhero__white {
    height: 105px;
  }

  .orhero__media {
    height: auto;
    aspect-ratio: 414 / 391;
  }

  .orhero__photo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22414%22 height=%22391%22 viewBox=%220 0 414 391%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M375.2 0 C396.629 0 414 17.3713 414 38.7998 L414 299.2 C414 320.629 396.629 338 375.2 338 L354 338 L354 338.601 C354 349.314 345.314 358 334.601 358 L285.498 358 C262.334 378.832 235.685 390.693 207.329 390.693 C178.974 390.693 152.325 378.832 129.16 358 L79.3994 358 C68.6855 358 60.0002 349.314 60 338.601 L60 338 L38.7998 338 C17.3714 338 8.88385e-05 320.629 0 299.2 L0 38.7998 C0 17.3713 17.3713 0 38.7998 0 L375.2 0 Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22414%22 height=%22391%22 viewBox=%220 0 414 391%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M375.2 0 C396.629 0 414 17.3713 414 38.7998 L414 299.2 C414 320.629 396.629 338 375.2 338 L354 338 L354 338.601 C354 349.314 345.314 358 334.601 358 L285.498 358 C262.334 378.832 235.685 390.693 207.329 390.693 C178.974 390.693 152.325 378.832 129.16 358 L79.3994 358 C68.6855 358 60.0002 349.314 60 338.601 L60 338 L38.7998 338 C17.3714 338 8.88385e-05 320.629 0 299.2 L0 38.7998 C0 17.3713 17.3713 0 38.7998 0 L375.2 0 Z%22/%3E%3C/svg%3E");
  }

  .orhero__media::after {
    background-image: url("../icons/hero-line-mob.svg");
  }

  .orhero__uzor {
    top: 565px;
    transform: translateX(-50%);
    width: 373px;
    height: 189px;
  }

  .orhero__title {
    width: 317px;
    font-size: 42px;
    line-height: 39px;
    letter-spacing: 1.26px;
	margin-bottom: 22.81px;
  }

  .orpage .collab {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
	margin-bottom: 18.8px;
    z-index: 1;
  }

  .orhero__intro {
    width: 325px;
  }

  .orhero__dropcap {
    font-size: 44px;
    line-height: 36px;
    letter-spacing: 1.3px;
  }

  /* Остановки — колонка */
  .stops {
    width: 333px;
    gap: 96px;
  }

  /* Шапка остановки: венок сверху, фото заходит на него на 33px */
  .stop__head {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-left: 0;
    padding-bottom: 0;
  }

  .stop__num {
    /* relative, не static: иначе абсолютный венок внутри
       позиционируется от всей шапки и растягивается на неё */
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 140px;
    height: 139px;
  }

  .stop__num span {
    font-size: 80.5px;
    letter-spacing: 2.42px;
  }

  .stop__photo {
    width: 328px;
    margin-top: -33px;
  }

  .stop__text {
    margin-top: 43px;
    gap: 29px;
  }

  .stop__title {
    font-size: 42px;
    line-height: 44px;
    letter-spacing: 1.26px;
    text-align: center;
  }

  .stop__eat-head {
    margin-top: 38px;
  }

  .stop__eat-uzor {
    left: 50%;
    top: -70px;
    width: 373px;
    height: 189px;
  }

  .stop__eat-title {
    left: 50%;
    top: 20px;
  }

  .stop__rests,
  .stop:nth-child(4) .stop__rests {
    min-height: 0;
    flex-direction: column;
    gap: 56px;
    padding-left: 0;
    margin-top: 70px;
  }

  .rest {
    width: 100%;
  }

  .rest__media {
    margin-bottom: 36px;
  }

  /* На мобилке фото ресторана — обычный скруглённый прямоугольник
     с белой окантовкой, без фигурной маски (так в макете). */
  .rest__media::after {
    display: none;
  }

  .rest__frame {
    mask: none;
    -webkit-mask: none;
    border-radius: 8px;
    border: 6px solid #fff;
  }

  /* В мобильном макете тарелка меньше: 92px при карточке 332 */
  .rest__dish {
    left: 66.5%;
    top: 72%;
    width: 27.7%;
  }

  .rest__name {
    font-size: 32px;
  }

  /* What to do — колонка на белой подложке */
  .stop__todo,
  .stop:nth-child(3) .stop__todo,
  .stop:nth-child(4) .stop__todo {
    height: auto;
    margin-top: 38px;
    padding: 90px 0 40px;
  }

  .stop__todo-bg--desk {
    display: none;
  }

  .stop__todo-bg--mob {
    display: block;
    top: 0;
    width: 540px;
    height: 100%;
  }

  .stop__todo-title {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: block;
    text-align: center;
  }

  .stop__todo-uzor {
    left: 50%;
    top: -58px;
    width: 373px;
    height: 189px;
  }

  /* Карусель: в макете на мобилке видна одна карточка и три точки.
     touch-action: pan-y — иначе на телефоне жест перехватывает
     нативный скролл страницы раньше, чем JS успеет распознать
     горизонтальный свайп (pointerdown/pointerup в one-route.js). */
  .stop__todo-cards {
    position: relative;
    inset: auto;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    touch-action: pan-y;
  }

  /* специфичность выше, чем у десктопных .todo:nth-child(n) с transform */
  .stop__todo-cards .todo,
  .stop__todo-cards .todo:nth-child(n) {
    position: static;
    left: auto;
    transform: none;
    display: none;
  }

  .stop__todo-cards .todo.is-active {
    display: flex;
  }

  .todo-dots {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    margin-bottom: 20px;
  }

  .todo-dots__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(54, 118, 235, 0.3);
    transition: background 0.2s;
  }

  .todo-dots__dot.is-active {
    background: var(--c-blue);
  }

  /* Низ */
  .orfooter-uzor {
    display: none;
  }

  .other-routes {
    margin-top: 60px;
    padding-bottom: 40px;
  }

  .other-routes__title {
    font-size: 42px;
    letter-spacing: 1.26px;
  }

  /* Карусель: видна одна карточка, листается точками и свайпом.
     touch-action: pan-y — иначе на телефоне жест перехватывает
     нативный скролл страницы раньше, чем JS успеет распознать
     горизонтальный свайп (pointerdown/pointerup в one-route.js). */
  .orpage .routes-grid--other {
    margin-top: 40px;
    touch-action: pan-y;
  }

  .orpage .routes-grid--other .route-card {
    display: none;
  }

  .orpage .routes-grid--other .route-card.is-active {
    display: flex;
  }

  .or-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
  }

  .or-dots__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(54, 118, 235, 0.3);
    transition: background 0.2s;
  }

  .or-dots__dot.is-active {
    background: var(--c-blue);
  }
}