/* ------------------------------------------------------------------
   Вояж Максимум — правки поверх темы style.vm.css
   Подключается ПОСЛЕ основной темы.
   ------------------------------------------------------------------ */

/* Фирменные цвета — для справки и для новых блоков
   --vm-blue  #3c4ea5  — меню, основной цвет
   --vm-red   #ca2e2e  — акцент, кнопки
*/
:root {
  --vm-blue: #3c4ea5;
  --vm-blue-light: #596ac2;
  --vm-red: #ca2e2e;
  /* Высота фиксированной шапки до 992px. См. блок «Мобильная шапка». */
  --vm-header-h: 66px;
  /* Она же от 992px: 94px верхняя полоса (логотип, адрес, телефон)
     плюс 50px синяя плашка меню. См. блок «Шапка закреплена». */
  --vm-header-desktop-h: 144px;
}

/* Основной цвет текста темнее типового: #333333 -> #222222.
   От body его наследуют заголовки, названия карточек и тексты блоков.
   Остальные перечислены явно — там цвет задан своим правилом. */
body,
.header__phone,
.button--light,
.field-text__input,
.news__label--light {
  color: #222222; }

/* Заголовки фирменным синим — тем же, что плашка меню и рамка
   врезки .note. Своего цвета у заголовков в теме нет, они
   наследовали body, и крупный кегль на 30-42px читался тяжёлым
   чёрным пятном. Сначала лечили это серым (#444444, тот же, что у
   вторичного текста), но серый просто гасил заголовок. Синий решает
   ту же задачу иначе: вес уходит в цвет, а не в черноту, и h2-h3
   начинают работать разделителями — по ним глаз прыгает быстрее.

   Примеряли на country-vm.html временным переключателем: серый,
   #3c4ea5, тёмный #314087 и светлый #596ac2. Светлый уводит в
   фиолетовый и рядом с красной кнопкой «Подобрать тур» пестрит,
   тёмный разницы не дал. Выбран #3c4ea5.

   Берём заголовки страницы и текстовой колонки. Заголовки цветных
   блоков (баннеры, формы на заливке) не трогаем: там цвет задаёт
   сам блок. */
.main__title,
.main-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: #3c4ea5;
  color: var(--vm-blue); }

/* Исключение — заголовок формы «Быстрый подбор тура» на синей
   заливке: белый текст он берёт от самого блока. Правило идёт после
   основного: вес у них одинаковый, решает порядок. Нужны оба
   селектора: форма лежит внутри .content, и .content h2 перебивает
   одиночный класс. */
.order-form__title,
.content .order-form__title {
  color: inherit; }

/* Вторичный серый темнее типового: #696969 -> #444444.
   Описания карточек, даты, подписи, плейсхолдеры в полях. */
.reviews__subheading,
.tour-types__item-description,
.news-blocks__info,
.news__date,
.news__desc {
  color: #444444; }

.field-text__input::-webkit-input-placeholder {
  color: #444444; }

.field-text__input::-moz-placeholder {
  color: #444444; }

.field-text__input:-ms-input-placeholder {
  color: #444444; }

.field-text__input::-ms-input-placeholder {
  color: #444444; }

.field-text__input::placeholder {
  color: #444444; }

/* Кегль текста не трогаем: типовые 14/24 на десктопе и 13/24 на
   мобильном. Пробовали поднять контентную колонку и текстовый блок
   главной до 16/26 (15/24 на мобильном) — Сергей забраковал, откатили.
   Строка списка спецпредложений тогда же поднималась до 14/22, тоже
   вернули. */

/* --- Отбивка пунктов в списках ------------------------------------
   У темы между пунктами 12px при межстрочном 24px. Получалось, что
   соседние пункты стоят дальше друг от друга, чем строки внутри
   одного пункта, и список рассыпался на отдельные строки вместо
   того, чтобы читаться как целое.

   Ставим 6px: пункты держатся вместе, но чуть просторнее сплошного
   текста — ровно настолько, чтобы граница между ними читалась.
   Многострочный пункт при этом не слипается с соседним: его держат
   маркер и цифра слева.

   Три списка темы и один из CMS (.red-circle__list в
   voyage-content.css, он правится там же). */
.bulleted-list li,
.numbered-list li {
  margin-top: 6px; }

.simple-list li {
  margin-bottom: 6px; }

/* В меню пункты с заглавной, а не капсом. */
.nav__link {
  text-transform: none; }

/* --- Текст меню не выделяется мышью -------------------------------
   По пунктам меню кликают, а не читают их, и клик там часто сдвоенный
   (не сработало — ткнули ещё раз). Второй клик выделял слово, и на
   синей плашке подсветка выделения ложилась светлым прямоугольником
   поверх белых букв — пункт выглядел выцветшим синим, будто он
   «залип» после клика.

   Снимаем выделение во всей плашке: пункты, ссылки выпадающего меню
   и кнопка «Подобрать тур». Фокус с клавиатуры это не трогает —
   обводка по Tab остаётся. */
.nav__link,
.nav__sub-link,
.nav__order-link {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }


/* Все кнопки шаблона — с заглавной, а не капсом («Отправить заявку»,
   «Подробнее о нас», «Подобрать тур», «Смотреть все»). В теме капс
   задан один раз на .button, поэтому снимаем тоже одним правилом —
   отдельные кнопки трогать не нужно.
   Кегль 13px при строчных буквах читается мельче капса, поэтому
   поднят до 14px: высота кнопки от этого не меняется (line-height
   остаётся 24px). */
.button {
  font-size: 14px;
  text-transform: none; }

/* Синяя кнопка: тот же размер и форма, что у красной .button (её шаблон
   «Вставить шаблон»), но фирменным синим меню с белым текстом. Для
   второстепенного действия рядом с красной «Оставить заявку». Ховер —
   светлый синий --vm-blue-light, как у ссылок меню. */
.button--blue,
.button--blue:hover {
  color: #ffffff; }

.button--blue {
  background-color: #3c4ea5;
  background-color: var(--vm-blue); }

.button--blue:hover {
  background-color: #596ac2;
  background-color: var(--vm-blue-light); }

/* Поля по бокам от контентной колонки (режим 1200px) — светлее типовых. */
.page--wrapper {
  background-color: #ffffff; }

/* Контентная колонка в теме отбрасывает тень (5px 0 40px), и на белом
   фоне эта тень и была тем самым «серым по краям». Снимаем — поля
   становятся однородно белыми. Границу колонки теперь ничто не
   обозначает, её держат скруглённые блоки внутри. */
.page--wrapper .page__wrapper {
  -webkit-box-shadow: none;
          box-shadow: none; }

/* Логотип Вояж Максимум вертикальный (170x90), в отличие от
   типового горизонтального 164x29 — задаём свои размеры.
   Высоту шапки на мобильных задаёт логотип, поэтому добавляем отступы. */
.header__top {
  padding-top: 8px;
  padding-bottom: 8px; }

.header__logo {
  width: 84px;
  height: auto; }

/* --- Мобильная шапка ----------------------------------------------
   До 992px шапка position: fixed, и тема компенсирует её высоту
   жёстким значением 50px в двух местах: padding-top у .main (иначе
   шапка легла бы на первый экран) и padding-top у выпадающего меню
   .header__nav (иначе первый пункт уходит под шапку).
   Наша шапка выше типовой — 66px: логотип вертикальный, у
   .header__top добавлены отступы по 8px. Оба значения приводим к
   фактической высоте. Поменяете отступы шапки или размер логотипа —
   поправьте --vm-header-h в :root, в одном месте. */
@media (max-width: 991px) {
  .main {
    padding-top: 66px;
    padding-top: var(--vm-header-h); }

  .header__nav {
    padding-top: 66px;
    padding-top: var(--vm-header-h); } }

/* --- Шапка уезжает и возвращается (десктоп) -----------------------
   Решение Сергея 26.10.2026, второй заход.

   Как было у темы: от 992px скрипт на отметке 75px вешал на шапку
   класс .sticky, и по нему фиксировалась **только** синяя плашка
   .nav — логотип, адрес и телефон уезжали насовсем.

   ⚠ Первый заход — шапка закреплена целиком и всегда — забракован.
   На главной это читалось хуже всего: 144px белой шапки занимали верх
   экрана постоянно, а под плашкой меню с прямым низом (на главной он
   прямой нарочно, см. раздел про меню) ехало содержимое страницы.
   Не возвращать.

   Как сейчас: шапка стоит в потоке и спокойно уезжает вверх вместе со
   страницей. Когда она ушла целиком и человек проехал ещё немного,
   скрипт вешает .sticky — и шапка **выезжает сверху** целиком, всё с
   тем же логотипом и контактами. Порог считает script.js от её
   фактической высоты: показывать шапку, пока она не скрылась, нельзя —
   она выпрыгнет поверх того, что человек читает.

   В выехавшем виде низ плашки скруглён **на всех страницах, главную
   включая**: плашка висит над содержимым, и прямой низ там ни к чему —
   продолжать его нечем.

   ⚠ Место в потоке на время полёта резервируем отступом у .main:
   без него в момент появления класса страница подпрыгнула бы на всю
   высоту шапки. 144px жёсткие, как и мобильные 66px (замерено на 992
   и 1400px); поменяете логотип или отступы .header__top — поправьте
   --vm-header-desktop-h в :root.

   ⚠ Все правила этого раздела сняты на странице с классом
   page--nav-sticky на <body> (country-vm-wide.html): там для сравнения
   собрано старое поведение темы, см. раздел «Вариант для сравнения»
   ниже. Отсюда `.page:not(.page--nav-sticky)` в селекторах. */
@media (min-width: 992px) {
  /* ⚠ Шапка лежит внутри .page__wrapper, а у сайта «страница в
     рамке»: у обёртки max-width 992/1200px и поля по бокам. Выйдя
     из потока, шапка про эту рамку забывает и растягивается во всю
     ширину окна — синяя плашка меню уезжала краями за страницу.
     Поэтому повторяем ширину обёртки: те же числа на тех же
     точках останова (`.page--wrapper .page__wrapper` в теме).
     Меняете рамку страницы — меняйте и здесь. */
  .page:not(.page--nav-sticky) .header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
    /* Тема добавляла здесь 50px — компенсировала плашку меню,
       уходившую из потока. Плашка больше никуда не уходит. */
    padding-top: 0;
    /* Тени у шапки нет: размытие расползалось и по бокам, а шапка уже
       окна — слева и справа от неё висели серые волоски по пикселю.
       Тень теперь у плашки меню, только вниз (см. ниже). */
    -webkit-box-shadow: none;
            box-shadow: none;
    /* Белый фон — только до нижних 20px. Плашка меню внизу скруглена,
       и раньше в вырезах её углов просвечивал белый фон шапки: поверх
       хиро это читалось белыми уголками. Теперь там прозрачно, и в
       вырезах видно то, что под шапкой. 20px = радиус плашки; выше
       них фон всё равно закрыт самой плашкой. */
    background: transparent -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)) no-repeat top/100% calc(100% - 20px);
    background: transparent linear-gradient(#ffffff, #ffffff) no-repeat top/100% calc(100% - 20px);
    -webkit-animation: vm-header-in 0.25s ease-out both;
            animation: vm-header-in 0.25s ease-out both; }

  .page:not(.page--nav-sticky) .header.sticky ~ .main {
    padding-top: 144px;
    padding-top: var(--vm-header-desktop-h); }

  /* Плашка меню остаётся внутри шапки на своём месте: фиксируется
     теперь шапка целиком, а не она одна. */
  .page:not(.page--nav-sticky) .sticky .nav {
    position: static;
    /* Тень только вниз: отрицательный spread равен размытию, и по
       бокам она не выходит. Повторяет скругление плашки. */
    -webkit-box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.2);
            box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.2);
    -webkit-transform: none;
            transform: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; } }

@-webkit-keyframes vm-header-in {
  from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); } }

@keyframes vm-header-in {
  from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  to { -webkit-transform: translateY(0); transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .page:not(.page--nav-sticky) .header.sticky {
    -webkit-animation: none;
            animation: none; } }

@media (min-width: 1200px) {
  .page:not(.page--nav-sticky) .header.sticky {
    max-width: 1200px; } }

/* Попап не должен сдвигать шапку.

   Fancybox на время попапа гасит прокрутку страницы и, чтобы контент
   не прыгнул на ширину исчезнувшей полосы, отдаёт body такое же поле
   справа (--f-scrollbar-compensate). Шапка в это время может быть
   фиксированной — до 992px всегда, выше при прокрутке, — то есть
   считается от окна, а не от body: поля она не получала и
   раздавалась на эти 15px вместе с окном. Меню внутри неё при открытии
   попапа заметно сдвигалось.
   Отдаём шапке то же поле, что и body: её рамка остаётся прежней.

   ⚠ Поле задаём через `right`, а не `margin-right`: шапка центрована
   автоматическими боковыми полями (см. выше), и явный margin-right их
   бы сломал — шапка уехала бы вправо вместо того, чтобы остаться на
   месте. `right` сжимает её область, а центрование остаётся за
   полями. */
html.with-fancybox .header {
  right: calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px)); }

/* --- Вариант для сравнения: уезжает всё, возвращается плашка ------
   Страница country-vm-wide.html, 27.10.2026. Сергей попросил собрать
   рядом с выезжающей шапкой второй вариант, поэтому он живёт на
   отдельной странице и включается классом page--nav-sticky на <body>.

   В покое страница ничем не отличается от остальных: та же шапка, та
   же плашка меню со скруглённым низом, никакого телефона в ней.

   При прокрутке шапка уезжает целиком и насовсем. Когда она ушла (тот
   же порог, что и у выезжающей шапки, — script.js считает его от
   фактической высоты шапки), сверху возвращается **одна синяя плашка
   меню**: во всю ширину окна, не по рамке страницы, потому что
   фиксированный элемент про max-width обёртки не знает. И вот в этом
   виде в ней появляется телефон — единственный контакт на экране.

   Механика родная, тема так и работала: `.sticky .nav
   { position: fixed }` и `.header.sticky { padding-top: 50px }`
   (второе резервирует место ушедшей из потока плашки, чтобы страница
   не прыгнула). Наши правила выезжающей шапки этим классом погашены,
   см. раздел выше. Отличий от темы два — телефон и то, что плашка не
   прилипает сразу, а возвращается позже. */
@media (min-width: 992px) {
  /* Прилипшая плашка тянется во всю ширину окна, и скругления по его
     краям ни к чему — там нет страницы, которую они продолжали бы.
     ⚠ Правило обязано стоять ниже `.page--inner .nav`: вес у них
     одинаковый, решает порядок. */
  .page--nav-sticky .sticky .nav {
    border-radius: 0;
    /* Те же кадры, что и у выезжающей шапки: плашка не возникает из
       ничего посреди текста, а выезжает сверху. */
    -webkit-animation: vm-header-in 0.25s ease-out both;
            animation: vm-header-in 0.25s ease-out both; }

  /* Телефон — только у вернувшейся плашки. В покое его нет совсем:
     страница должна выглядеть как остальные, да и в шапке телефон в
     этот момент на экране.
     ⚠ display меняется на ходу, значит меняется и место под пункты
     меню: script.js пересчитывает их по смене класса .sticky, иначе
     пункты залезут под телефон. */
  .page--nav-sticky .sticky .nav__phone {
    /* margin-left: auto — см. комментарий в разметке: иначе
       space-between растащил бы пункты, телефон и кнопку.
       Справа зазор фиксированный и заметно меньше левого: телефон с
       красной кнопкой читаются одним блоком, отдельно от пунктов
       меню. Соотношение примерно 2:1, как просил Сергей, — левый
       зазор тянется сам, правый задан здесь. */
    margin-left: auto;
    margin-right: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    min-height: 50px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff; }

  .page--nav-sticky .sticky .nav__phone:hover {
    color: #fff;
    text-decoration: underline; }

  /* ⚠ У кнопки «Подобрать тур» в теме margin-left: auto. Автоотступов
     в плашке получалось два — у неё и у телефона, — а свободное место
     CSS делит между ними поровну: телефон вставал ровно посередине
     между меню и кнопкой. Кнопке автоотступ снимаем: вправо её и так
     прижимает space-between у .nav__inner, зато всё свободное место
     достаётся левому отступу телефона. */
  .page--nav-sticky .sticky .nav__order-link {
    margin-left: 0; }

  /* Иконка контурная, как у телефона в шапке, но белая — на синем
     фирменный красный не читается. */
  .page--nav-sticky .nav__phone-icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-right: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round; } }

@media (prefers-reduced-motion: reduce) {
  .page--nav-sticky .sticky .nav {
    -webkit-animation: none;
            animation: none; } }

/* --- Третий вариант: возвращается белая полоса ---------------------
   Страница countries-vm.html, 28.10.2026. Включается классом
   page--nav-white на <body> вместе с page--nav-sticky: механика та же,
   что у второго варианта (шапка уезжает, на том же пороге сверху
   возвращается плашка меню, в ней появляется телефон), меняется вид.

   Вернувшаяся плашка — белая полоса во всю ширину окна: логотип, пункты
   меню фирменным синим, красная кнопка «Подобрать тур» и телефон
   справа от неё. Содержимое стоит по сетке страницы (.nav__container),
   а черта под полосой идёт от края до края окна и отделяет её от
   страницы.

   В покое страница не отличается от остальных: логотип и телефон в
   плашке скрыты, плашка синяя. */
.nav__logo {
  display: none; }

@media (min-width: 992px) {
  .page--nav-white .sticky .nav {
    background-color: #ffffff;
    /* Черта под полосой — тенью, а не border: border прибавился бы
       к высоте полосы и мягкого края у него нет. 3px, как на эскизе
       Сергея. Тень от фиксированного элемента во всю ширину окна —
       значит, и черта во всю ширину. */
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

  .page--nav-white .sticky .nav__inner {
    min-height: 66px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

  .page--nav-white .sticky .nav__logo {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-right: 30px; }

  .page--nav-white .sticky .nav__logo img {
    display: block;
    width: 85px;
    height: auto; }

  /* Пункты и стрелки подменю — синие на белом. */
  .page--nav-white .sticky .nav__link,
  .page--nav-white .sticky .nav__submenu-toggle {
    color: #3c4ea5;
    color: var(--vm-blue, #3c4ea5); }

  .page--nav-white .sticky .nav__link:hover,
  .page--nav-white .sticky .nav__item:hover > .nav__link {
    color: #d0191f; }

  .page--nav-white .sticky .nav__more-icon {
    fill: currentColor; }

  /* Кнопка прижата к телефону, а не к правому краю: всё свободное место
     забирает её автоотступ, телефон идёт следом (order) с отбивкой. */
  .page--nav-white .sticky .nav__order-link {
    margin-left: auto; }

  /* Конверт на кнопке снят, как на эскизе: в полосе рядом с логотипом
     и телефоном он лишний, а 30px нужны пунктам меню — с ним при 1400px
     «Контакты» уходили в «Ещё». */
  .page--nav-white .sticky .nav__order-link .button__icon {
    display: none; }

  /* У кнопки в теме min-width 200px — под значок; без него она по
     тексту. Пункты меню — через 28px вместо 44px, как на эскизе: полоса
     одна на логотип, меню, кнопку и телефон, и при типовом шаге пункты
     не помещаются. 28 не больше 30, которые закладывает на шаг
     showExtraMenu в script.js, — значит, расчёт «Ещё» не врёт. */
  .page--nav-white .sticky .nav__order-link {
    min-width: 0;
    /* Без min-width флекс сжимал кнопку на 1024px, и текст ломался
       в две строки. */
    -ms-flex-negative: 0;
        flex-shrink: 0;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px; }

  .page--nav-white .sticky .nav__item {
    margin-right: 28px; }

  .page--nav-white .sticky .nav__phone {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    /* Отбивка от кнопки — полем, а не margin: script.js берёт
       ширину телефона по offsetWidth, и поле в неё входит, иначе
       пункты меню считались бы без него и телефон уезжал за край. */
    margin-left: 0;
    margin-right: 0;
    padding-left: 25px;
    color: #222222; }

  .page--nav-white .sticky .nav__phone:hover {
    color: #222222; } }

/* Телефон в плашке спрятан всегда, кроме вернувшейся плашки на
   десктопе (правило выше). До 992px он не нужен тем более: там плашка —
   выпадающее меню по бургеру, и скрипт сам переносит в него весь блок
   контактов шапки. */
.nav__phone {
  display: none; }

/* Попап не должен сдвигать и прилипшую плашку: она фиксированная, то
   есть считается от окна, и без компенсации полосы прокрутки
   раздаётся на её ширину вместе с окном. Та же история, что у шапки
   выше. */
html.with-fancybox .page--nav-sticky .sticky .nav {
  right: calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px)); }

/* Адрес слева от телефона, «Заказать звонок» — под телефоном.
   У адреса и телефона слева красная иконка: метка и трубка.
   Иконки взяты из спрайта шаблона (#pin и #phone) и вставлены в
   разметку напрямую — в спрайте у метки жёстко задан серый цвет
   внутренним <style>, через <use> его не перекрасить. */
/* Ссылки. В теме они шли блёклым #5b69af; заменён на фирменный синий
   меню #3c4ea5 прямо в style.vm.css, чтобы не плодить переопределения.
   Здесь только ховер — он должен быть заметно темнее самой ссылки.

   ⚠ Фокус (`a:focus`) сюда не добавлять — пробовали, сняли 25.10.2026.
   Вес у `a:focus` 0,1,1, он перебивает одиночные классы темы, и все
   белые ссылки на цветном после клика оставались тёмно-синими: пункт
   меню на синей плашке (у пунктов с подменю — надолго, подменю держит
   фокус через :focus-within), ссылки согласия в форме заявки, телефон
   в футере, названия на карточках «Виды отдыха». Тема эти ссылки
   перекрывает только для :hover, про :focus в ней правил нет вовсе.
   Фокус с клавиатуры и так виден — браузер рисует свою обводку. */
a:hover {
  color: #2a3878; }

/* Ссылки внутри текста подчёркиваем. Одного цвета мало: в абзаце
   мелким кеглем синий читается как тот же тёмный текст, ссылку видно
   только если специально искать. Подчёркивание тонкое и отодвинуто
   от букв, чтобы не резать выносные элементы.

   Ячейки таблиц (.content td a) — по той же причине, и с переходом
   заголовков на синий она стала острее: заголовки и ссылки теперь
   одного цвета #3c4ea5, и синее слово в ячейке без подчёркивания
   читается как подзаголовок. Особенно в .table--dates и
   .simple-table, где ссылка стоит внутри предложения и рядом нет
   неподчёркнутого соседа для сравнения. */
p a,
.content li a,
.content td a,
.features__item-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px; }

p a:hover,
.content li a:hover,
.content td a:hover,
.features__item-text a:hover {
  text-decoration-color: #2a3878; }

/* Исключение: фильтры над списком стран («Все страны», «Безвизовые»)
   лежат в <ul> внутри .content и попадали под правило выше. Это не
   ссылки в тексте, а переключатели — подчёркивание им не нужно. */
.content .filters__link {
  text-decoration: none; }

/* Второе исключение: кнопка-ссылка внутри абзаца или списка. В CMS
   редактор ставит её прямо в текст, и подчёркивание ложилось поверх
   заливки кнопки. Соседние кнопки разводим по горизонтали; ряд
   кнопок в узкой колонке переносится, поэтому и вертикальный шаг. */
p a.button,
.content li a.button,
.content td a.button {
  text-decoration: none; }

p a.button {
  margin-right: 10px;
  margin-bottom: 10px; }

p a.button:last-child {
  margin-right: 0; }

/* Слоган и адрес — тем же вторичным серым, что описания в карточках.
   В теме у слогана был отдельный, более светлый #737c86. */
.header__slogan,
.header__address {
  color: #444444; }

/* Иконка внутри кнопки (конвертик у «Подобрать тур»). Цвет берётся
   от текста кнопки, поэтому работает и на красном фоне, и при ховере. */
.button__icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 8px; }

.button__icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* Контурные иконки: рисуем обводкой, а не заливкой — так они совпадают
   по весу с макетом и не зависят от жёстких цветов внутри спрайта. */
.header__info-icon {
  display: block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  color: #ca2e2e;
  color: var(--vm-red); }

.header__info-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* Иконка слева, данные справа — и в шапке на десктопе, и в
   выпадающем меню по бургеру. Раньше это правило жило внутри
   @media (min-width: 992px), и на мобильных блоки оставались
   блочными: иконка вставала отдельной строкой над адресом и над
   телефоном. */
.header__address,
.header__phone-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

/* В меню по бургеру адрес и телефон шли вплотную — разводим.
   На десктопе блоки стоят в строку, там вертикальный отступ не нужен. */
@media (max-width: 991px) {
  .header__phone-block {
    margin-top: 16px; }

  /* Иконку выравниваем по первой строке текста: у адреса строка
     18px, у телефона — 30px. */
  .header__address .header__info-icon {
    margin-top: -1px; }

  .header__phone-block .header__info-icon {
    margin-top: 5px; } }

@media (min-width: 992px) {
  /* Адрес стоял вплотную к телефону, а весь свободный зазор уходил
     влево, к слогану. Разводим поровну: между слоганом, адресом,
     телефоном и мессенджерами по 74px. */
  .header__address {
    margin-left: 26px;
    margin-right: 74px; }

  .header__messengers {
    margin-left: 74px; }

  /* Слоган, адрес и телефон — три блока одной высоты (36px):
     по две строки с шагом 18px. У телефона вторая строка — ссылка. */
  .header__slogan,
  .header__address,
  .header__address-text {
    line-height: 18px; }

  /* Отступы слева в теме были рассчитаны на строку без иконки —
     обнуляем, иначе телефон и ссылка не встают друг под другом. */
  .header__phone-block .header__phones {
    margin-left: 0; }

  .header__phone-block .header__phones-item,
  .header__phone-block .header__phone {
    line-height: 18px; }

  .header__phone-block .header__contacts {
    margin-top: 0;
    line-height: 18px; }

  .header__phone-block .header__contacts-item {
    margin-left: 0; }

  /* Иконку выравниваем по первой строке текста, а не по верху блока. */
  .header__address .header__info-icon {
    margin-top: -1px; }

  .header__phone-block .header__info-icon {
    margin-top: 0; } }

/* «Заказать звонок» в шаблоне никак не оформлен — это обычная ссылка
   со стилями по умолчанию. Задаём явно: кегль как у адреса, обычное
   начертание, без подчёркивания. */
.header__contact-link {
  font-size: 13px;
  font-weight: 400;
  color: #3c4ea5;
  text-decoration: none; }

.header__contact-link:hover {
  color: #2a3878; }

/* «Туристическая компания» — первая строка слогана. Строку убрали из
   самого логотипа, стиль наследуется от .header__slogan.
   Межстрочный шаг 24px шаблона уменьшен в полтора раза — строки
   читаются как один блок, а не как два отдельных сообщения. */
.header__slogan {
  line-height: 18px; }

.header__company {
  display: block; }

/* Логотип на 10% меньше типового (150 -> 135px).
   Отступы шапки 20px — чуть просторнее, высота 94px вместо 80. */
@media (min-width: 992px) {
  .header__top {
    padding-top: 20px;
    padding-bottom: 20px; }
  .header__logo {
    width: 135px;
    height: auto; } }

/* Главное меню на десктопе: шрифт на пункт крупнее (13 -> 14px),
   шаг между пунктами шире (30 -> 44px).
   Подчёркивание при наведении привязано к ширине ссылки, поэтому
   растёт только воздух между пунктами, а не сама полоска.

   Верхние углы синей плашки скруглены тем же радиусом, что и фото
   (20px). Если меняете радиус фотографий в voyage-rounded.css —
   поправьте и здесь, иначе разъедутся. */
@media (min-width: 992px) {
  .nav {
    font-size: 14px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px; }

  /* Низ плашки скруглён только на внутренних страницах: там под ней
     белый фон страницы, и прямые углы выбиваются.
     На главной под плашкой сразу hero-слайдер. Скруглять низ там
     нельзя: в вырезах просвечивает белый фон шапки, и поверх
     фотографии это читается светлыми уголками. Скруглить заодно и
     верх хиро тоже не выход — на стыке двух кривых получается
     заметный выступ. Поэтому на главной низ плашки прямой, и
     слайдер продолжает её форму.
     Включается классом page--inner на <body> внутренней страницы. */
  .page--inner .nav {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; }

  /* ⚠ Здесь стояло .sticky .nav { border-radius: 0 }: прилипшее меню
     растягивалось во всю ширину окна, и скругление там было ни к чему.
     Снято 26.10.2026 вместе с переходом на закреплённую шапку — плашка
     больше никуда не выезжает и при прокрутке остаётся той же, что в
     покое. Если когда-нибудь вернёте прилипание одной плашки, правило
     придётся вернуть, и обязательно ниже .page--inner .nav: вес у них
     одинаковый, решает порядок. */ }

/* Ширину панели «Страны» мы одно время растягивали до краёв плашки —
   так боролись с уголками на затемнённом фоне. Затемнения больше нет,
   уголков тоже, поэтому вернули типовую ширину темы (940/1140px). */

@media (min-width: 992px) {
  .nav__item {
    margin-right: 44px; }

  /* Кнопка «Подобрать тур» вписана в плашку с отступом сверху и
     снизу, поэтому её углы скруглены, а не обрезаны краем плашки.
     Вертикальные padding'и заменены на min-height, иначе кнопка
     стала бы выше плашки.
     Высота 36 -> 34px по просьбе Сергея; отступы подняты на те же
     2px, чтобы сама плашка осталась прежних 50px. */
  .nav .nav__order-link {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 34px;
    border-radius: 10px;
    text-transform: none; } }

/* Затемнение страницы при наведении на пункт меню с подменю.
   Снято по двум причинам.

   Во-первых, 50% чёрного — это модальное затемнение, а раскрывается
   меню простым пробегом курсора: пока ведёшь мышь к «Контактам»,
   страница дважды мигает тёмным.

   Во-вторых, на затемнённом фоне становился виден каждый вырез
   скругления внизу плашки меню: за плашкой лежит белый фон шапки,
   и в вырезах он читался светлыми уголками. У узкого подменю
   («Виды отдыха», «О компании») лечить это нечем — оно 300px и до
   углов плашки не достаёт.

   Панель и без затемнения отделена от страницы: её держат скругление
   и мягкая тень ниже. Вернуть затемнение — убрать это правило,
   сам слой .page__shadow в разметке на месте. */
.page--nav-hover .page__shadow {
  display: none; }

/* Выпадающее меню на десктопе: сверху его держит синяя плашка, а
   нижние углы свободны — скругляем их тем же радиусом, что у кнопок.

   Панель отделяло от страницы затемнение, которое мы сняли. Без
   него белая панель на белом контенте терялась, поэтому обводим её
   волосяной линией по трём свободным краям. Сверху линии нет: там
   плашка меню. Тень не ставим — граница держится линией.

   До 992px подменю раскрывается внутри списка, там это не нужно. */
@media (min-width: 992px) {
  .nav__submenu {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 1px solid #e2e3e8;
    border-top: 0;
    /* В меню «Страны» нижнюю строку занимает серая плашка «Все
       страны»: у .nav__sub-all-link margin: 0 -30px, она выходит на
       края панели своими прямыми углами и закрывала скругление.
       Обрезаем по форме панели. */
    overflow: hidden; } }

/* Флажки стран — 30x20, поэтому радиус маленький: в выпадающем меню,
   в карточках «Популярные страны» и в списке стран. */
.nav__flag img,
.countries__flag img,
.destination__flag {
  border-radius: 3px; }

/* Белое поле флага на белом фоне не видно: Япония превращается в
   красную точку, у Польши пропадает верхняя половина, Финляндия —
   висящий синий крест. Обводка эту беду лечит, но загоняет каждый
   флаг в рамку, а у 39 файлов из 127 тонкая серая кромка уже вшита
   в сам png — там край получался двойной.

   Поэтому не обводим, а гасим белую точку: brightness(.95) делает
   из #ffffff бледно-серый #f2f2f2, и флаг отделяется от фона сам.
   Цвета при этом темнеют на 5% — на картинке 30x20 незаметно.
   Фильтр, а не перекраска самих png: правило подхватит и те флаги,
   которые зальют потом через админку. */
.nav__flag img,
.countries__flag img,
.destination__flag {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95); }

/* Реквизиты под ссылкой «Обратный звонок» в футере. */
.footer__company {
  margin-top: 14px;
  color: #a8aeb3; }

.footer__company a {
  color: inherit; }

.footer__company a:hover {
  color: #ffffff; }

/* Реквизиты в левой колонке, под копирайтом. */
.footer__left .footer__company {
  margin-bottom: 10px; }

/* Левая колонка футера в теме всего 25% — адрес в ней не помещался
   и ломался на три строки. Расширяем за счёт центральной. */
@media (min-width: 992px) {
  .footer__left {
    width: 42%; }

  .footer__center {
    width: 28%; } }

/* Мессенджеры переехали из центра в правую колонку, под «Обратный
   звонок», поэтому ширина 60% от центральной колонки здесь не нужна. */
.footer__right .footer__social {
  width: auto;
  margin-top: 14px;
  padding-left: 0;
  padding-right: 0; }

@media (min-width: 992px) {
  .footer__right .footer__social-list {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; } }

/* Ссылки на политики — в центре футера, вместо мессенджеров.
   Своего отступа у блока не было, он начинался вплотную к левой
   колонке — отодвигаем от неё. */
@media (min-width: 992px) {
  .footer__policy {
    padding-left: 30px; } }

/* Юридические тексты футера — ссылки на политики и оферта — набраны
   тем же шагом 24px, что и остальной футер. Для абзацев в две-три
   строки это слишком воздушно, строки распадаются. Уменьшаем шаг на
   20%: 24 -> 19px. Кегль не трогаем. */
.footer__policy,
.footer__oferta {
  line-height: 19px; }

.footer__policy-item {
  margin-bottom: 8px; }

.footer__policy-item:last-child {
  margin-bottom: 0; }

.footer__policy a {
  color: #a8aeb3; }

.footer__policy a:hover {
  color: #ffffff; }

/* --- Светлый футер (проба в вёрстке) ------------------------------
   Тема заливает футер тёмным #363940 и красит текст в белый, а серые
   цвета (#a8aeb3, #9a9a9a, #9a9a97) заданы под этот тёмный фон. Делаем
   фон светлым #f3f3f3, а весь обычный текст — цветом шрифта сайта #333.
   Цвета ссылок (красный #ed544e) не трогаем — только их наведения,
   уходившие в белый, на светлом фоне пропадали, поэтому делаем тёмными. */
.footer {
  background-color: #f3f3f3;
  color: #333333; }

.footer__currency-name,
.footer__company,
.footer__oferta,
.footer__policy a,
.footer__copy-text a,
.footer__contacts .footer__contact-link {
  color: #333333; }

.footer__company a:hover,
.footer__policy a:hover,
.footer__copy-text a:hover,
.footer__contacts .footer__contact-link:hover {
  color: #000000; }

/* Телефон в правой колонке выделяем красным — акцент темы #ed544e.
   Вес (0,2,0) перебивает .footer a, который красит ссылки футера. */
.footer__phones .footer__phone {
  color: #ed544e; }

/* Иконка MAX в футере — как в шапке: цветной логотип max_s.png 30×30
   без тёмного кружка .social__link (тема рисует его под одноцветные
   иконки-маски, здесь он не нужен). */
.footer__social .social__link {
  width: auto;
  height: auto;
  background-color: transparent;
  border-radius: 0; }

.footer__social .social__link img {
  display: block;
  width: 30px;
  height: 30px; }

/* --- Иконки мессенджеров в футере ---------------------------------
   В шапке иконки цветные, в футере — одноцветные на тёмном кружке,
   как были ВКонтакте, Facebook и Instagram из спрайта. Своих символов
   в спрайте у MAX и Telegram нет, поэтому берём силуэт реальных
   логотипов CSS-маской: форма точная, а цвет задаём здесь, и работает
   та же смена цвета при наведении, что у прежних иконок. */
.social__icon--mask {
  width: 24px;
  height: 24px;
  background-color: #8c8d94;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease; }

.social .social__link:hover .social__icon--mask {
  background-color: #ffffff; }

.social__icon--max {
  -webkit-mask-image: url("../images/max_mask.png");
          mask-image: url("../images/max_mask.png"); }

.social__icon--tg {
  -webkit-mask-image: url("../images/telegram_mask.svg");
          mask-image: url("../images/telegram_mask.svg"); }

/* --- Скругление крупных блоков ------------------------------------
   Страница читается как стопка карточек на белом фоне. Радиус тот же,
   что у фотографий, — 20px. Блокам с белым фоном скругление не нужно:
   на белом поле его всё равно не видно. */

/* Hero-слайдер: только снизу, сверху его держит плашка меню. */
.intro {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden; }

/* До 992px плашки меню нет — хиро начинается сразу под белой шапкой,
   поэтому верхние углы скругляем так же, как нижние. */
@media (max-width: 991px) {
  .intro {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px; } }

/* Баннер «Подберем тур» и блок преимуществ.
   У .consult overflow: hidden уже стоит в теме. */
.consult,
.features {
  border-radius: 20px; }

/* Фото баннера (800x320) стоит натуральной величиной, в окно баннера
   попадает нижняя полоса. Пару опускаем ниже в кадр — сдвигаем фон по
   вертикали с низа на 55% (просьба Сергея 02.11.2026); по горизонтали
   оставляем справа, где лежит пара. Тема: background-position right bottom.
   ⚠ Больше процент — пара поднимается (видно нижнюю часть снимка), меньше —
   опускается. Сейчас 42%: пара в нижней части кадра. */
.consult {
  background-position: right 42%; }

.features {
  overflow: hidden; }

/* Меню раздела в левой колонке внутренних страниц — серая плашка
   #eeeef4. Скругление фотографий живёт в voyage-rounded.css, а это
   блок интерфейса, поэтому радиус здесь.

   Межстрочный 24 -> 20px: длинный пункт в две-три строки читался как
   два отдельных пункта. Расстояние между пунктами при этом должно
   остаться прежним, поэтому отбивку увеличиваем ровно на то, что
   ушло из интерлиньяжа: 6 + 2 = 8px сверху и снизу. Высота
   однострочного пункта не меняется: было 24 + 12, стало 20 + 16.

   Начертание 400 -> 500 (Montserrat Medium, он в теме подключён):
   пункты на серой плашке выглядели бледнее остального текста.
   600 пробовали — на плашке получилось тяжело, вернулись к 500.
   Больше 500 не ставим ещё и поэтому: 600 у темы занят, им
   помечается активный пункт. */
.inner-menu {
  border-radius: 20px;
  line-height: 20px; }

.inner-menu__item {
  padding: 8px 0; }

.inner-menu__link {
  font-weight: 500; }

/* Плашка заказа: слева пары «название — значение», справа кнопка.
   Рамка той же толщины, что в теме (2px), но фирменным синим, как у
   врезки .note; бледно-голубой #bac2e6 рядом с ней выглядел
   случайным. */
.tour-order {
  border-radius: 20px;
  border-color: #3c4ea5;
  border-color: var(--vm-blue); }

/* Цена набрана как остальные значения плашки. В теме она крупнее
   (16/30 вместо 15/24) и этим ломала строку, красной мы её тоже
   пробовали — в плашке с одним столбцом значений выделение ни к
   чему, все значения равны по весу. */
.tour-order__info-price {
  font-size: inherit;
  line-height: inherit;
  color: inherit; }

/* Значения должны стоять в одну колонку, какой бы длины ни было
   название слева. У темы это сделано через min-width: 125px у
   названия — то есть на глаз: название длиннее, и колонка значений
   съезжает. Вместо этого раскладываем пары сеткой в два столбца:
   первый подстраивается под самое длинное название, второй от него
   выравнивается сам.

   Пара «название + значение» лежит в своей обёртке, поэтому ей
   нужен display: contents — иначе в сетку попадут обёртки, а не
   сами ячейки. Отбивку между строками берёт на себя row-gap:
   у элемента с display: contents margin не рисуется.
   @supports — чтобы в браузере без display: contents осталась
   типовая раскладка темы, а не сетка из двух обёрток.

   Сетка работает на всех ширинах: до 768px тема ставила значение
   под названием, и пара читалась как две отдельные строки. Теперь
   название и значение всегда в одной строке, на узком экране пара
   просто стоит по центру плашки, как и задумано темой. */
@supports (display: contents) {
  .tour-order__info {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 12px auto;
    /* Первая колонка — ровно по самому длинному названию, вторая
       забирает остаток. Если бы обе были auto, на узком экране
       колонки не помещались бы и название налезало на значение. */
    grid-template-columns: -webkit-max-content minmax(0, 1fr);
    grid-template-columns: max-content minmax(0, 1fr);
    /* По верхнему краю, а не по центру: когда значение переносится на
       вторую строку, название должно стоять на одной строке с его
       началом, а не съезжать к середине. */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    justify-content: center;
    /* Межстрочный внутри ячеек меньше типовых 24px — перенесённое
       значение читается одним блоком, а не двумя строками. */
    line-height: 20px;
    /* В теме строки разведены на 15px — для двух строк многовато,
       убавили до 10px. */
    row-gap: 10px;
    -webkit-column-gap: 12px;
       -moz-column-gap: 12px;
            column-gap: 12px; }

  .tour-order__info-item {
    display: contents; }

  /* До 768px тема центрировала содержимое плашки — в двух колонках
     это разводит короткие названия по их ячейкам вразнобой.
     Выравниваем по левому краю, колонка значений и так держится
     сеткой. */
  .tour-order__info {
    text-align: left; }

  .tour-order__info-title {
    min-width: 0;
    margin-bottom: 0;
    padding-right: 0;
    white-space: nowrap; }

  @media (min-width: 768px) {
    .tour-order__info {
      justify-content: start; } } }

/* --- Блоки-врезки и таблицы в контенте ----------------------------
   Врезка «Мы работаем более 10 лет...» в двух видах: с рамкой
   (.note) и на серой подложке (.note--light). Радиус как у
   остальных крупных блоков. До 768px тема рамку и подложку не
   рисует вовсе, там радиус ни на что не влияет.

   Рамка: толщина типовая, 2px, а цвет вместо бледно-голубого
   #bac2e6 — фирменный синий меню. В бледном оттенке врезка не
   читалась как врезка; 4px пробовали — вышло грубо.
   Вариант на подложке правило не трогает: у него рамка прозрачная,
   и :not() оставляет её такой. */
.note {
  border-radius: 20px;
  /* Типовой внутренний отступ темы (32×30px) при тонкой рамке смотрелся
     великоватым — Сергей попросил уменьшить примерно в полтора раза. */
  padding: 22px 20px; }

.note:not(.note--light) {
  border-color: #3c4ea5;
  border-color: var(--vm-blue); }

/* Подложка светлее типовой #eeeef4 — тот же серый, что у полос
   зебры в таблице (#f6f6f9), чтобы одинаковые по смыслу серые на
   странице не расходились по тону. Правило в том же медиазапросе,
   что и у темы: до 768px подложки нет вовсе. */
@media (min-width: 768px) {
  .note--light {
    background-color: #f6f6f9; } }

/* Таблица: полосы зебры шли от края до края острыми углами.
   Скругляем каждую полосу с торцов, радиус как у плашек цены.

   Два обхода особенностей таблиц: фон переносим со строки на ячейки
   (у <tr> радиус не рисуется) и меняем collapse на separate — при
   collapse браузер игнорирует border-radius у ячеек. Собственных
   границ у таблицы нет, поэтому на вид separate ничего не меняет. */
.table {
  border-collapse: separate;
  border-spacing: 0; }

.table tr:nth-child(even) {
  background-color: transparent; }

.table tr:nth-child(even) td {
  background-color: #f6f6f9; }

.table tr:nth-child(even) td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }

.table tr:nth-child(even) td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }

/* Формы и прочее содержимое всплывающих окон. */
.popup__content {
  border-radius: 20px;
  overflow: hidden; }

/* Фотоальбом над текстом страницы: у темы под ним 20px, и первый
   абзац или заголовок прилипал к фото. Отступ висит на самом альбоме,
   поэтому на страницах без альбома ничего не меняется (28.10.2026). */
.gallery {
  margin-bottom: 30px; }

@media (min-width: 768px) {
  .gallery {
    margin-bottom: 40px; } }

/* --- Слайдеры на Swiper ------------------------------------------
   Тема приехала со slick 1.8 (последний релиз 2017, репозиторий
   заброшен). Заменён 25.10.2026 на Swiper. Разметка слайдеров и классы
   темы сохранены, поэтому оформление почти всё осталось на месте —
   чинить пришлось только то, что было завязано на классы slick или на
   его отсутствие.

   Тема прятала слайдер, пока slick не разложит ленту, чтобы не мелькала
   колонка слайдов во всю высоту. Класс состояния теперь другой. */
.reviews__slider.swiper-initialized,
.gallery__list.swiper-initialized {
  visibility: visible;
  opacity: 1; }

/* Запасная раскладка темы «slick ещё не поднялся» висела на
   :not(.slick-slider). Этого класса больше нет ни на ком, поэтому
   правило стало срабатывать всегда и делало контейнер Swiper флексом —
   лента слайдов складывалась в один столбец. */
.tour-types__slider:not(.slick-slider) {
  display: block; }

/* Той же природы: до инициализации тема показывала только первый слайд,
   чтобы на загрузке не мелькала колонка во всю высоту. Снимал это сам
   slick классом .slick-initialized, и без него на главной оставались
   один логотип партнёра и один кадр хиро. Селекторы повторяют селекторы
   темы — вес одинаковый, решает порядок подключения. */
.partners__slider .partners__item:not(:first-child),
.intro__slide:not(:first-child) {
  display: block; }

/* Слайд витрины без текста — просто картинка. У обычного слайда высоту задаёт
   .intro__container (min-height 350px, ≥768px — 480px), а .intro__img лежит
   абсолютом сзади с object-fit: cover. У слайда-картинки контейнера нет, поэтому
   ту же высоту баннера задаём самому слайду теми же min-height и оставляем картинку
   абсолютом cover — так она целиком заполняет блок баннера на любом телефоне и под
   ней не остаётся серой полосы (и для загруженной мобильной, и для авто-кропа). */
.intro__slide--image picture {
  display: block; }
.intro__slide--image {
  min-height: 350px; }
@media (min-width: 768px) {
  .intro__slide--image {
    min-height: 480px; } }

/* Если у слайда задана ссылка, но не задан «Текст кнопки», кнопку не рисуем,
   а кликабельной делаем всю область слайда — прозрачная ссылка поверх картинки. */
.intro__stretched {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; }

/* При фейд-переходе неактивные слайды остаются на месте прозрачными (opacity 0)
   и лежат поверх видимого. Без этого прозрачная ссылка на всю область соседнего
   слайда перехватывала бы клик по активному — гасим события на неактивных. */
.intro__slider .intro__slide:not(.swiper-slide-active) {
  pointer-events: none; }

/* Слайд считает свою ширину вместе с полями.

   На сайте типовая модель content-box, и у этих двух слайдов тема
   держит боковые поля 15px — так в её сетке разводятся соседние
   карточки. Swiper же ставит слайду ширину инлайном, деля ширину
   контейнера на число видимых: 1170 / 4 = 292,5px. При content-box
   поля прибавляются сверху, слайд занимает 322,5px, и четвёртая
   карточка «Видов отдыха» уезжала за край на 120px (3 × 40). У
   партнёров логотипов пять в ряд — за край уходило 190px.

   border-box вписывает поля внутрь назначенной ширины: ряд сходится
   точно по контейнеру, отбивки между карточками остаются прежними,
   уже внутренние. Остальные слайдеры (хиро, отзывы, фотоальбом) полей
   не имеют, их это не касается. */
.tour-types__item,
.partners__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

/* «Виды отдыха» — лента на всю ширину контейнера: тема даёт слайдеру
   width: calc(100% + 30px) и margin -15px по бокам, чтобы вычесть поля
   .container, а боковые отступы самих карточек (15px) образуют отбивки.
   У Swiper на этом же элементе класс .swiper, а его база ставит
   margin-left/right: auto (та же специфичность, подключён позже) и
   обнуляла компенсацию: ширина оставалась +30px, слайдер уезжал вправо
   на 30px и крайняя карточка обрезалась (на мобильном — вторая). Возвращаем
   отрицательные поля селектором со своей специфичностью. */
.tour-types__slider.swiper {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px; }

/* Лента партнёров — это <ul>, и ей нужен список-реset.

   У темы он стоял на самом `.partners__slider`: там этот класс и висел
   на <ul>. При переходе на Swiper поверх списка надет <div class="swiper
   partners__slider">, потому что div внутрь <ul> не вложить, — класс
   уехал на обёртку вместе с правилом, а список остался с браузерными
   по умолчанию: отступ слева 40px и маркеры. Маркеров не видно (слайды
   выложены флексом), а вот отступ сдвигал ленту вправо, и пятый логотип
   на десктопе уходил за край контейнера ровно на эти 40px. */
.partners__slider .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none; }

/* Точки листания. Кружок рисует псевдоэлемент .slider__dot, а Swiper
   приносит для .swiper-pagination-bullet свой вид: 8px, своя заливка и
   transform: scale(.33) — наши точки ужимались до трети и перекрашивались.
   Отбивку тема держала на <li>, в которые slick заворачивал точки;
   Swiper кладёт кнопки в контейнер напрямую, поэтому margin переезжает
   на саму точку. */
.slider__dots .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 8px 4px 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  transform: none; }

/* Состояние активной точки slick отмечал классом на обёртке пункта,
   Swiper — на самой точке. */
.slider__dots .swiper-pagination-bullet-active::before {
  background-color: #ca2e2e; }

.slider__dots .slider__dot--invert.swiper-pagination-bullet-active::before {
  background-color: #ffffff; }

/* Контейнер точек у темы стоит в потоке под слайдером — поверх кадра он
   только у хиро, и там absolute задан самой темой. Swiper же вешает на
   контейнер .swiper-pagination с position: absolute. */
.reviews__dots,
.tour-types__dots,
.partners__dots {
  position: static; }

/* --- Попапы на fancybox 6 ----------------------------------------
   Шестая версия вешает на наш .popup свой класс .f-html, а у него
   padding 2rem и своя подложка: белая карточка внутри получала рамку
   в 32px и уезжала в середину экрана выше, чем нужно. У темы .popup
   был просто прозрачной обёрткой — возвращаем это поведение.

   width/height у .f-html заданы в 100%, поэтому обнуляем и их:
   ширину задаёт .popup__content (460px), и растягивать обёртку на
   весь экран незачем — иначе клик мимо карточки попадает в неё и
   попап не закрывается. */
.fancybox__slide .popup.f-html {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none; }

.footer {
  border-radius: 20px;
  overflow: hidden;
  /* Футер упирался в самый низ страницы, и нижние скруглённые углы
     было не видно. Оставляем под ним полоску белого. */
  margin-bottom: 8px; }

/* --- Скругление элементов интерфейса ------------------------------
   В теме радиусы мелкие: кнопки 6px, поля ввода и селекты 4–6px,
   плашка цены 3px. Увеличено примерно вдвое. Скругление фотографий
   живёт отдельно, в css/voyage-rounded.css.
   Селекторы с модификаторами перечислены явно — иначе правила темы
   вроде .field-text--lg .field-text__input перебивают по весу. */

.button {
  border-radius: 12px; }

.field-text__input,
.field-text--lg .field-text__input {
  border-radius: 10px; }

.news-blocks__price,
.news-blocks__img-wrap .news-blocks__price {
  border-radius: 8px; }

/* Синяя плашка цены в списке туров (спецпредложения и список туров
   страны): типовые 3px почти прямые — скругляем до 8px, как у ценника
   на карточках «Популярные туры» (просьба Сергея 02.11.2026). */
.news__price {
  border-radius: 8px; }

/* «Простой список» подразделов — ul.simple-list.content__submenu
   (подменю страницы, выводится сверху или снизу колонки): красная точка
   перед пунктом (просьба Сергея 02.11.2026). Типовой .simple-list без
   маркеров и служит ещё списком ссылок в контенте, поэтому буллет вешаем
   только на подменю через .content__submenu. Цвет — акцент --vm-red,
   как у кнопок; top 9px ставит точку на середину строки 24px. */
.simple-list.content__submenu li {
  position: relative;
  padding-left: 18px; }

.simple-list.content__submenu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--vm-red); }

/* --- «Спецпредложения 2»: четыре карточки в ряд ------------------
   В теме карточка занимает треть ряда. Здесь ряд из четырёх, поэтому
   картинка сужается сама, а кегли текста уменьшены в той же пропорции
   (14/24 -> 13/20, цена 15 -> 13), чтобы карточка не выглядела
   перегруженной. */
@media (min-width: 992px) {
  .news-blocks--4cols .news-blocks__item {
    width: 25%; } }

.news-blocks--4cols .news-blocks__title {
  font-size: 13px;
  line-height: 20px; }

.news-blocks--4cols .news-blocks__info {
  font-size: 13px;
  line-height: 20px; }

/* Заголовок — две строки, описание — три. Названия и описания туров
   клиент заводит в админке, и длина у них гуляет: на боевых данных
   заголовки вышли от одной строки до трёх, описания от трёх до семи.
   Ряд при этом стоял ровно (его держит флекс), а текст внутри ряда
   заканчивался на разной высоте, и низ карточек рвался.

   Обрезаем по строкам И резервируем эту высоту. Одного line-clamp
   мало: он держит потолок, но короткий текст всё равно поднимает низ
   карточки — min-height добирает недостающие строки пустотой, и все
   карточки ряда становятся одинаковыми.

   Только от 768px, где карточки стоят рядами. В одну колонку
   выравнивать не с чем, и обрезка там просто съела бы текст.

   Высоты считаются от line-height, заданного выше: поменяете его —
   поедут следом, трогать эти числа не нужно. */
@media (min-width: 768px) {
  .news-blocks--4cols .news-blocks__title,
  .news-blocks--4cols .news-blocks__info {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden; }

  .news-blocks--4cols .news-blocks__title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(2 * 20px); }

  .news-blocks--4cols .news-blocks__info {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: calc(3 * 20px); } }

/* Плашка цены перенесена из верхнего левого угла в правый нижний и
   набрана крупнее/жирнее типовой — 15/24 вес 700 вместо 13/26 вес 600
   (просьба Сергея 02.11.2026): цену видно первой на фотографии.
   top/left темы гасим в auto, иначе плашка стояла бы сразу в двух углах. */
.news-blocks--4cols .news-blocks__price {
  top: auto;
  left: auto;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700; }

/* Два цвета ценника на выбор (02.11.2026): верхний ряд карточек красный
   (типовой цвет темы), нижний — модификатором --blue фирменным синим.
   Оба на белой плашке. Вес селектора (0,2,0) равен теме, перебивает
   порядком подключения. Выбор сделаем — лишний цвет уберём. */
.news-blocks--4cols .news-blocks__price--blue {
  color: var(--vm-blue); }

/* Пропорции картинки. В теме padding-top: 50% — это 2:1, слишком
   приплюснуто. Ставим 3:2 (классика фотографии).
   Другие варианты — заменить одно число:
       3:2  -> 66.67%    4:3 (он же 12:9) -> 75%
       16:9 -> 56.25%    1:1              -> 100% */
/* «Смотреть все» справа от заголовка — не ссылкой, а компактной
   прозрачной кнопкой: обычное начертание, без капса, отступы меньше,
   чем у обычной кнопки шаблона.
   Только с 768px: на мобильных шаблон превращает эту ссылку в
   стрелку-иконку, и её трогать не нужно. */
@media (min-width: 768px) {
  .main-block__title-link--button {
    top: 8px;
    padding: 4px 14px;
    border: 1px solid #e1e2e5;
    border-radius: 8px;
    background-color: transparent;
    color: #222222;
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    text-transform: none;
    -webkit-transition: color 0.3s ease, border-color 0.3s ease;
    -o-transition: color 0.3s ease, border-color 0.3s ease;
    transition: color 0.3s ease, border-color 0.3s ease; }

  .main-block__title-link--button:hover {
    color: #5b69af;
    border-color: #cacbcf; } }

.news-blocks--4cols .news-blocks__img-wrap {
  margin-bottom: 12px;
  padding-top: 66.67%; }

@media (min-width: 992px) {
  .header__logo-wrap {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; } }

/* --- Поле «Удобное время для звонка» ------------------------------
   Поле с иконкой-часиками слева. Иконка — кнопка: по клику
   раскрывается список готовых интервалов, выбор подставляется в
   поле. Руками время тоже можно вписать, поле остаётся обычным
   текстовым.

   В спрайте темы символа часов нет, поэтому рисуем контуром, как
   иконки в шапке. Цвета повторяют .field-text__icon-svg темы. */
.field-text__icon-svg--stroke {
  fill: none;
  stroke: #c5c5c5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* --- Иконки в полях форм ------------------------------------------
   Правило на оба типа иконок: залитые из спрайта (имя, телефон,
   почта) и контурные, нарисованные нами (часики).

   Наведение не меняет ничего. Мышь проходит через форму насквозь, и
   иконки вспыхивали одна за другой; навести на текстовое поле — ещё
   не действие, состояние у него одно: фокус.

   При фокусе иконка темнеет до #96969b — это середина между серым
   #c5c5c5 и тем, что ставила тема. У темы здесь #363940, почти
   чёрный: иконка в активном поле становилась самым тёмным пятном
   формы и перетягивала внимание с того, что человек печатает.
   Хотите заметнее или тише — это одно число в двух правилах ниже.

   Тема умела только фокус, да и то не для всех: у символов user и
   mail в images/sprite.svg стоял class="st0" с жёстким
   fill: #c5c5c5. Внешний спрайт тянет за собой свой <style>, и со
   страницы этот цвет не перебить — две иконки из четырёх застывали
   серыми, пока соседние темнели. Поэтому класс st0 у этих двух
   символов в спрайте убран: теперь они наследуют цвет от
   .field-text__icon-svg, как это всегда делал mobile.

   ⚠ Это единственная наша правка в файле темы. Обновите спрайт —
   иконки снова застынут. Остальные символы (pin, calendar) не
   трогали: там постоянный серый задуман. */
.field-text__input:focus ~ .field-text__icon .field-text__icon-svg {
  fill: #96969b; }

.field-text__input:focus ~ .field-text__icon .field-text__icon-svg--stroke {
  fill: none;
  stroke: #96969b; }

/* Иконка темы — <span>; здесь она кнопка, поэтому снимаем
   собственное оформление кнопки и возвращаем указатель. */
.field-text__icon--button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none; }

/* Список интервалов. Лежит под полем, перекрывает соседние поля,
   поэтому z-index выше них. */
.field-time__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid #e2e3e8;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 6px 20px rgba(35, 36, 47, 0.12);
          box-shadow: 0 6px 20px rgba(35, 36, 47, 0.12); }

.field-time__list[hidden] {
  display: none; }

/* У нижнего края раскрываем вверх — класс вешает voyage.js, когда
   внизу не хватает места (поле времени последнее в коротком попапе
   «Мы вам перезвоним»). top гасим: у правила выше он calc. */
.field-time__list--up {
  top: auto;
  bottom: calc(100% + 4px); }

.field-time__option {
  display: block;
  width: 100%;
  padding: 8px 19px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: #222222;
  text-align: left;
  cursor: pointer; }

.field-time__option:hover,
.field-time__option:focus {
  background-color: #eeeef4;
  outline: none; }

/* --- Стрелки фотоальбома ------------------------------------------
   Миниатюры под слайдером убраны из разметки, листать можно только
   стрелками — значит, прятать их нельзя. От 992px тема выдвигала их
   из-за края кадра по наведению на альбом (left: -50px, opacity: 0);
   показываем сразу. Ниже 992px они и так видны постоянно.

   Радиус 6 -> 12px, как у кнопок: у кадра он теперь 20px, и прежние
   6px рядом с ним читались как недоделка. Правая стрелка — та же
   левая, отражённая через scale(-1), поэтому значение одно. */
.gallery__arrow {
  border-radius: 0 12px 12px 0; }

@media (min-width: 992px) {
  .gallery__arrow--left {
    left: 0;
    opacity: 1; }

  .gallery__arrow--right {
    right: 0;
    opacity: 1; } }

/* --- Форма «Быстрый подбор тура» ----------------------------------
   Блок .order-form из темы (страница экскурсии), перенесён на
   страницу страны. Фон в схеме vm уже наш синий #3c4ea5 — красить
   не надо, добавляем только скругление, как у остальных крупных
   блоков, и сетку в два поля.

   Набор полей повторяет попап «Напишите нам»: имя, телефон, удобное
   время, email, пожелание к туру. Пять полей в сетке по три в ряд
   оставляли бы дыру, поэтому ряды по два.

   До 768px тема выносила форму за поля колонки (margin: 0 -15px) —
   со скруглением углы уезжали бы за край экрана. Возвращаем в
   колонку. */
.order-form {
  border-radius: 20px;
  overflow: hidden; }

@media (max-width: 767px) {
  .content__order-form {
    margin-left: 0;
    margin-right: 0; }

  /* Поля в столбик: второе и дальше отбиваем от предыдущего так же,
     как это сделано у трёхколоночного ряда темы. */
  .order-form__col--2cols:not(:first-child) {
    margin-top: 10px; } }

@media (min-width: 768px) {
  .order-form__col--2cols {
    width: 50%; } }

/* Список интервалов в поле времени лежит внутри ряда формы; соседний
   столбец перекрывал бы его, поэтому поднимаем столбец с полем. */
.order-form__col:focus-within {
  position: relative;
  z-index: 2; }

/* --- Единая форма заявки -----------------------------------------
   Разметка .order-form одна на весь сайт. Отличается только обёртка:
   на главной формы нет в .container, поэтому синяя плашка идёт во всю
   ширину страницы (как делала снятая .feedback); на внутренней форма
   лежит в колонке контента и шире неё не становится.

   Поля: Имя и Телефон обязательные, Email и Время звонка нет.
   Чекбокс согласия — третье обязательное поле.

   Порядок полей: Имя, Телефон / Email, Время звонка. В два столбца
   «Время звонка» встаёт под Телефоном, то есть под тем, что уточняет;
   при обратном порядке оно оказывалось под Именем. */

/* Ряды «сообщение» и «согласие» отбиваем так же, как тема отбивает
   поля в столбик — чтобы вертикальный шаг формы не сбивался. */
.order-form__row--message,
.order-form__row--policy {
  margin-top: 10px; }

/* Ссылка и согласие лежат прямо в ряду, а не внутри .order-form__col.
   У ряда боковое поле -5px, у столбца +5px — они гасят друг друга, и
   без этого отступа ссылка с флажком встают на 5px левее полей. */
.order-form__message-toggle,
.order-form__policy {
  margin-left: 5px; }

/* Поле сообщения занимает весь ряд и переносится под ссылку: ряд у
   темы флексовый, иначе textarea встаёт справа от ссылки обрубком в
   226px. Свои боковые отступы ему даёт .order-form__col внутри. */
.order-form__message-wrap {
  width: 100%; }

/* Ссылка «Добавить сообщение». Это <button>, обнуляем кнопочное
   оформление и оставляем вид ссылки: цвет наследуется от формы
   (белый на синем), подчёркивание такое же, как у ссылок в тексте. */
.order-form__message-toggle {
  display: inline-block;
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer; }

.order-form__message-toggle:hover,
.order-form__message-toggle:focus {
  opacity: 0.8; }

/* ⚠ Обязательно. Скрипт прячет ссылку после клика атрибутом hidden,
   а браузерное [hidden] { display: none } — правило с нулевым весом,
   и display выше его перебивает: ссылка оставалась на месте рядом с
   раскрытым полем. */
.order-form__message-toggle[hidden] {
  display: none; }

/* Согласие: флажок и текст в строку, текст не наезжает на флажок.
   Ссылки белые, как и остальной текст на синем, различимы
   подчёркиванием.

   margin-top снимаем: у темы в .sl-checkbox он 25px и появляется
   только на узких экранах. Из-за него отступ перед флажком на
   мобильном был 37px против 21px на десктопе — одна и та же форма
   выглядела по-разному. Вертикальный шаг задаёт ряд, а не флажок. */
.order-form__policy {
  display: block;
  margin-top: 0;
  font-size: 13px;
  line-height: 20px; }

/* Висячий отступ: текст в две-три строки не должен заезжать под
   флажок. Флажок — это span::before, вынести его из потока текста
   нельзя, поэтому сдвигаем весь блок вправо на его ширину (16px плюс
   5px отбивки) и возвращаем первую строку назад — в этот просвет
   встаёт сам флажок. Видно только на мобильном: на десктопе строка
   одна и переносить нечего. */
.order-form__policy span {
  display: block;
  padding-left: 21px;
  text-indent: -21px; }

.order-form__policy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px; }

/* В футере осталась одна кнопка: согласие переехало строкой выше,
   отдельным рядом. Прижимаем кнопку влево. */
.order-form__footer {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

/* --- Та же форма в попапе «Напишите нам» --------------------------
   Разметка у попапа своя — .request-form, одна колонка: попап 455px
   шириной, двух колонок в него не вложить. Объединять её с
   .order-form не нужно и не стали. Повторяются только приёмы:
   порядок полей, обязательность, сообщение под ссылкой, согласие
   внутри формы и подпись кнопки.

   Ссылка на белом фоне попапа — фирменным синим: на странице она
   наследует белый от формы, здесь наследовать нечего. */
.request-form__message-toggle {
  display: inline-block;
  padding: 0;
  color: #3c4ea5;
  color: var(--vm-blue);
  font: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer; }

.request-form__message-toggle:hover,
.request-form__message-toggle:focus {
  opacity: 0.8; }

/* ⚠ Та же ловушка, что на странице: браузерное [hidden] весит ноль,
   и display выше его перебивает — без этого правила ссылка остаётся
   на месте рядом с раскрытым полем. */
.request-form__message-toggle[hidden] {
  display: none; }

/* Согласие: висячий отступ, как в форме на странице. В попапе строка
   узкая и текст переносится всегда, поэтому без него он заезжал бы
   под флажок на каждой строке. */
.request-form__policy {
  display: block;
  margin-top: 0;
  font-size: 13px;
  line-height: 20px; }

.request-form__policy span {
  display: block;
  padding-left: 21px;
  text-indent: -21px; }

.request-form__policy a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px; }

/* --- Раскрывающийся список на <details> ---------------------------
   Приём с другого проекта Сергея: вместо связки «ссылка + div +
   slideToggle», как в теме на faq.html, берём нативный <details> с
   <summary>. Скрипта не нужно вовсе — открытие, клавиатура (Enter и
   пробел), роль для скринридера и поиск по странице (Ctrl+F находит
   текст в закрытом блоке и раскрывает его) у браузера свои.

   Для CMS это тоже проще: редактор отдаёт две вложенные сущности,
   заголовок и тело, без классов-хуков, которые надо не забыть
   проставить. Классы оставлены те же, что на том сайте.

   ⚠ Чем платим: у <details> нет родной анимации раскрытия. Ниже она
   добавлена через ::details-content, но только там, где движок умеет
   calc-size(auto) — иначе блок просто открывается мгновенно. Это не
   поломка, а отсутствие плавности. */
.content-details {
  border-bottom: 1px solid #e2e3e8; }

.content-details:first-of-type {
  border-top: 1px solid #e2e3e8; }

/* list-style снимает родной треугольник в Firefox и свежих Chrome,
   ::-webkit-details-marker — в старых WebKit. Нужны оба.

   ⚠ Пробовали «как обычный текст, только жирный», шеврон слева и без
   линий-разделителей — Сергей забраковал, вернулись к этому. Пункты
   на фоне колонки терялись: без своего кегля и цвета полужирная
   строка читалась как начало абзаца, а не как кнопка. */
.content-details > summary {
  position: relative;
  padding: 14px 40px 14px 0;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: #3c4ea5;
  color: var(--vm-blue);
  cursor: pointer;
  list-style: none; }

.content-details > summary::-webkit-details-marker {
  display: none; }

.content-details > summary:hover {
  color: #2a3878; }

/* Фокус с клавиатуры виден: у темы outline снят почти везде, а здесь
   это единственный способ понять, на каком вопросе стоишь. */
.content-details > summary:focus-visible {
  outline: 2px solid #3c4ea5;
  outline: 2px solid var(--vm-blue);
  outline-offset: 2px; }

/* Шеврон вместо треугольника: рисуем двумя границами квадрата и
   поворачиваем. В закрытом виде смотрит вниз, в открытом — вверх.
   margin-top доводит его по оптике: у повёрнутого квадрата видимая
   масса смещена относительно геометрического центра. */
.content-details > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  margin-top: -7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s; }

.content-details[open] > summary::after {
  margin-top: -2px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg); }

.content-details > div {
  padding-bottom: 18px; }

.content-details > div > :first-child {
  margin-top: 0; }

.content-details > div > :last-child {
  margin-bottom: 0; }

/* Плавное раскрытие. Проверяем ровно ту возможность, на которой оно
   держится: без calc-size(auto) высота «до auto» не анимируется, и
   правило только мешало бы. */
@supports (block-size: calc-size(auto)) {
  .content-details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.25s ease, content-visibility 0.25s;
    transition-behavior: allow-discrete; }

  .content-details[open]::details-content {
    block-size: calc-size(auto); } }

/* --- Полоса хлебных крошек до 992px -------------------------------
   Тема до 992px показывает только последний пункт: остальным ставит
   display: none, а текущий растягивает на всю ширину с многоточием.
   Полного пути не видит ни пользователь, ни поисковик — индексация у
   Google идёт по мобильной версии, и скрытую разметку BreadcrumbList
   он вправе не учитывать, цепочка в сниппете тогда не соберётся.

   Показываем путь целиком одной строкой: список не переносится (на
   360px он занял бы три строки), а прокручивается вбок. У правого
   края маска-затухание — так обрез читается как «дальше есть ещё», а
   не как сломанная вёрстка. Последнему пункту даём правый отступ в
   ширину маски, иначе в конце прокрутки он уходил бы под неё.
   Прокрутку оставляем в начале пути: пунктов обычно два-три, и за
   край уезжает только хвост длинного заголовка страницы.

   На десктопе ничего не трогаем: там крошки помещаются в строку, фон
   прозрачный, прокрутка не нужна — поэтому весь блок в @media. */
@media (max-width: 991px) {
  .crumbs__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }

  .crumbs__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Полосу прокрутки прячем — о том, что строка продолжается,
       говорит затухание. */
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(calc(100% - 24px), #000), to(transparent));
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }

  .crumbs__list::-webkit-scrollbar {
    display: none; }

  /* Клирфикс темы: пункты шли float'ом, во флексе он лишний элемент. */
  .crumbs__list::after {
    display: none; }

  .crumbs__item {
    display: block;
    float: none;
    padding-top: 14px;
    padding-bottom: 14px;
    white-space: nowrap; }

  /* Разделитель «/» тема прижимает к верху строки — у пунктов
     появился вертикальный отступ, опускаем его на столько же. */
  .crumbs__item:not(:last-child)::after {
    top: 14px; }

  /* Текущий пункт больше не растягивается на всю ширину и не режется
     многоточием — за переполнение теперь отвечает прокрутка списка.
     Правый отступ равен ширине маски.

     pointer-events гасят родной переключатель темы: скрипт темы
     вешает на эту крошку клик, раскрывающий левое меню (см.
     js/script.js). Теперь за это отвечает кнопка «Разделы», а крошки
     стали строкой ссылок, и скрытый клик по ним только мешал бы.
     Сам обработчик не трогаем — до него просто не доходит событие. */
  .crumbs__item--current {
    width: auto;
    max-width: none;
    padding: 14px 24px 14px 0;
    overflow: visible;
    -o-text-overflow: clip;
       text-overflow: clip;
    pointer-events: none; }

  /* Стрелка, которую скрипт темы дорисовывает слева от текущей
     крошки: иконка без подписи не говорила, что откроется. */
  .crumbs__item--toggle::before {
    display: none; } }

/* --- Кнопка меню раздела у заголовка ------------------------------
   Раскрывает левое меню раздела там, где оно есть. Стоит значком
   слева от h1, а не в полосе крошек: в строке с крошками кнопка
   отъедала у пути ~90px и хвост уходил под затухание. У заголовка
   она ничего не загораживает, а соседство с названием раздела
   объясняет, что откроется.

   Значок 20px вписан в первую строку заголовка (строка 30px),
   рамки нет. Сама кнопка 44x44 — минимальная цель для пальца, —
   но в раскладке занимает ровно высоту строки: отрицательные
   margin'ы сверху и снизу съедают лишнее, левый выводит значок на
   край колонки. Правого margin'а нет, поэтому между значком и
   текстом остаётся 12px.

   На десктопе кнопка не нужна — сайдбар там всегда на экране. */
.section-toggle {
  display: none; }

@media (max-width: 991px) {
  .main__header--toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    /* Верхний отступ переехал с заголовка на строку целиком —
       иначе кнопку пришлось бы опускать на ту же величину. */
    margin-top: 20px; }

  .main__header--toggle .main__title {
    margin-top: 0; }

  .section-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #3c4ea5;
    color: var(--vm-blue);
    cursor: pointer; }

  /* Отступы отдельным правилом и с весом выше: у темы есть
     .main__header > :first-child { margin-top: 0 }, а первым ребёнком
     строки стала как раз кнопка — верхний margin обнулялся, и значок
     вставал на 7px ниже строки. */
  .main__header--toggle .section-toggle {
    margin: -7px 0 -7px -12px; }

  .section-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor; }

  /* Раскрытое меню — значок темнее, чтобы состояние было видно. */
  .section-toggle[aria-expanded="true"] {
    color: #2a3878; }

  /* Меню раскрывается слоем поверх страницы, а не раздвигает её:
     так короткий заголовок остаётся виден целиком, а у длинного
     перекрывается хвост — это осознанно. Точное место под кнопкой
     проставляет voyage.js (top в пикселях), здесь — запасное
     значение на случай, если скрипт не отработал: отступ колонки
     30px + отбивка строки 20px + строка 30px + зазор 8px. */
  .main__layout {
    position: relative; }

  .main__aside--opened.main__aside {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    z-index: 20; }

  .main__aside--opened .main__aside-inner {
    padding-top: 0;
    padding-bottom: 0; }

  /* Слой отделяем от текста тенью — под ним лежит контент, а не
     белое поле. */
  .main__aside--opened .inner-menu {
    -webkit-box-shadow: 0 10px 30px rgba(35, 36, 47, 0.16);
            box-shadow: 0 10px 30px rgba(35, 36, 47, 0.16); }

  /* В раскрытом мобильном слое показываем только меню раздела: баннер
     и виджет оценки Яндекса из сайдбара прячем (просьба Сергея
     02.11.2026) — слой открывают ради навигации, кнопка и баннер в нём
     лишние. На десктопе сайдбар не трогаем, там они остаются. */
  .main__aside--opened .main__aside-promo,
  .main__aside--opened .main__aside-widget {
    display: none; } }

/* --- Список спецпредложений (spec-vm.html) -------------------------
   Строка списка: фотография слева, название, маршрут, описание и цена
   справа. Блок .news--spec взят у темы, правок двенадцать.

   Тот же список стоит врезкой под h1 на country-vm.html — пять туров
   вместо двадцати и без табов. Правила общие: у блока был модификатор
   .news--compact, но после сведения кеглей от него ничего не осталось,
   и он убран из обеих страниц.

   Вводная строка под h1 — .lead с нашим модификатором .lead--sm,
   см. «Вступительный текст внутренних страниц» ниже. */

/* 1. Пропорции фотографии — 3:2, как у карточек «Популярные туры» на
      главной (.news-blocks--4cols .news-blocks__img-wrap). В теме здесь
      padding-top: 49%, то есть почти 2:1 — приплюснуто, и с главной не
      сходилось. Меняется одним числом:
          3:2  -> 66.67%    4:3 (он же 12:9) -> 75%
          16:9 -> 56.25%    1:1              -> 100% */
.news--spec .news__img-wrap::before {
  padding-top: 66.67%; }

/* 2. Доля фотографии в строке. У темы 47% — это под страницу с левой
      колонкой. Здесь колонки нет, контент во всю ширину, и при 47%
      фотография вырастала до 536x357, строка — почти на пол-экрана.
      34% дают 388x259 и оставляют тексту 66%: описание укладывается в
      две-три строки, двадцать предложений просматриваются скроллом, а
      не по одному на экран.
      До 992px оставляем поведение темы: там колонка узкая. */
@media (min-width: 992px) {
  .news--spec .news__img-wrap {
    width: calc(34% - 15px); }

  .news--spec .news__text-wrap {
    width: calc(66% - 15px); } }

/* 3. В теме .news__date — подпись над заголовком новости, отбивка у неё
      снизу. Здесь это строка маршрута и дат заезда под названием тура,
      поэтому отбивка переезжает наверх (10px — как у .news__desc). */
.news--spec .news__date {
  margin: 10px 0 0; }

/* 4. Плашка-ярлык на фотографии («8 экскурсий», «заезд 04 января») —
      это то, что на старом сайте было красной вставкой внутри
      названия. В названии она ломала строку, поверх фотографии читается
      как метка. Углы скруглены сильнее типовых 2px, чтобы не спорить со
      скруглением самой фотографии. */
.news--spec .news__label {
  border-radius: 6px;
  font-weight: 600;
  text-transform: none; }

/* 5. Заглушка на случай тура без фотографии.

      Лежит фоном у рамки: если в карточке не окажется <img> — забыли
      загрузить в админке, файл не нашёлся, — в кадре всё равно будет
      логотип на светлом, а не пустой серый прямоугольник. Фон за
      фотографией, поэтому саму разметку карточки менять не нужно:
      появилась фотография — она заглушку просто закрывает.

      Как только фотография загрузилась, фон убираем совсем: пока
      картинка проявляется (у темы .lazy-fade — секунда), логотип
      просвечивал бы сквозь полупрозрачное фото. Браузеры без :has()
      этого правила не поймут и оставят фон — он всё равно под
      фотографией, вреда нет.

      Светлый #eeeef4 вместо типового #e2e1e6: на нём логотип не
      выглядит грязным. */
.news--spec .news__img-wrap {
  background-color: #eeeef4;
  background-image: url("../images/logo-vm2.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 120px auto; }

.news--spec .news__img-wrap:has(.news__img.loaded) {
  background-image: none;
  background-color: #e2e1e6; }

/* 6. Текст в строке можно выделить мышью.

      В теме у .news__link есть ::before — прозрачный слой во всю
      строку (сама строка position: relative). Он делает кликабельной
      всю карточку, но лежит поверх текста: нажатие мышью попадает в
      него, а не в текст, и ни выделить, ни скопировать название,
      даты или цену нельзя. Для новости это мелочь, для списка туров
      нет — названия и даты копируют в переписку с клиентом.

      Слой снимаем, кликабельными остаются название, цена и
      фотография (у неё своя ссылка в разметке).
      Вернуть поведение темы — убрать эти два правила и ссылку
      .news__img-link из разметки. */
.news--spec .news__link::before {
  display: none; }

.news--spec .news__img-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block; }

/* 7. Межстрочный у названия плотнее типового: 30px -> 26px при кегле
      20px. У темы заголовки рассчитаны на одну-две строки в тексте,
      а здесь длинное название тура уходит в три, и строки расходились
      так, что название читалось не одним куском, а тремя обрывками.
      Коэффициент 1.3 — обычный для заголовков; у абзацев он больше,
      им разреженность на пользу. */
.news--spec .news__title {
  line-height: 26px; }

/* 8. Иконка-календарик перед строкой маршрута и дат. В спрайте темы
      символ calendar есть, но у него жёстко задан светло-серый
      #c5c5c5 внутренним <style> спрайта — со страницы цвет не
      перебить, а рядом с полужирной строкой он выглядит выцветшим.
      Поэтому рисуем контуром, как иконки в шапке и часики в формах:
      stroke берётся от currentColor, то есть от цвета самой строки.

      Строка выложена флексом, иконка не сжимается и прижата к первой
      строке текста (16px иконка в строке 18px — отсюда margin-top). */
.news--spec .news__date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; }

.news__date-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 3px сверху ставят середину значка (16px) на середину строки
     (22px): 3 + 8 = 11. На глаз без этого значок сидел выше текста. */
  margin: 3px 8px 0 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* 9. Текст строки — 14/22 вместо типовых 13/18: маршрут с датами и
      описание тура читают внимательно, а не просматривают, и 13px для
      них мелко. Кегль задан на строке целиком — .news__date и
      .news__desc своего не имеют и подхватывают его; у названия и
      цены кегль свой, их это не трогает.
      Это точечная правка списка, общий кегль текста на сайте
      типовой — см. блок «Кегль текста» выше. */
.news--spec .news__item {
  font-size: 14px;
  line-height: 22px; }

/* Отбивка строк списка: у темы 30px между предложениями. Фотография
   стала выше, строки длиннее — разводим чуть шире, иначе соседние
   предложения читаются одним куском.

   ⚠ Отбивка снизу, а не сверху, как в теме. Из-за табов часть строк
   скрыта (display: none), и у темы верхний margin первой ВИДИМОЙ
   строки уже не обнулялся — правило :first-of-type смотрит на разметку,
   а не на то, что показано, и над списком появлялся лишний отступ. */
.news--spec .news__item {
  margin-top: 0;
  margin-bottom: 30px; }

.news--spec .news__item:last-of-type {
  margin-bottom: 0; }

@media (min-width: 768px) {
  .news--spec .news__item {
    margin-bottom: 40px; } }

/* 10. Название тура — 16/24 полужирным (700) вместо размера h3
       (20/26) у темы.

       Сначала так сделали только на country-vm.html, где тот же список
       стоит врезкой под h1 (модификатор .news--compact), потом Сергей
       попросил свести страницы: двадцатый кегль на пять карточек подряд
       читался пятью разделами, а не пятью строками одного списка. 16px —
       ступень между обычным текстом колонки (14px) и h3.

       Вес 700, а не 400: в обычном начертании название проигрывало
       соседней строке маршрута и дат. 700, а не типовые для заголовков
       600, — чтобы разница с соседями по строке была видна сразу.
       Фирменный синий оставлен: вместе с весом он и отличает
       название-ссылку от соседнего описания.

       Класс h3 из разметки не убираем — так её отдаёт CMS, кегль
       назначается отсюда. ⚠ Правка 7 выше (межстрочный 26px) осталась
       от прежнего кегля и этим правилом перекрыта; при откате вернётся
       она. */
.news--spec .news__title,
.news--spec .news__title.h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

/* 11. Строка маршрута и дат — обычным начертанием. У темы .news__date
       полужирная (600): там это подпись-дата над заголовком новости, одна
       короткая строка. Здесь в ней маршрут с перечислением городов на
       две-три строки, и рядом с названием тура полужирный абзац
       перетягивал внимание на себя — в карточке первой читалась не
       ссылка, а список ночёвок.
       Цвет не трогаем: строка и так набрана вторичным серым #444444 (наше
       правило в блоке «Цвет текста» выше, у темы здесь #696969), и этим
       отделена от чёрного описания под ней. */
.news--spec .news__date {
  font-weight: 400; }

/* 12. Отступ под списком — ещё одна строка колонки (24px) сверх типовых
       20px у следующего блока. Нужен там, где список стоит врезкой
       внутри страницы (country-vm.html: под ним сразу фотоальбом); на
       spec-vm.html список закрывает контент, и лишние 24px перед
       «Нашими партнёрами» незаметны — ради одного правила держать
       модификатор не стали.
       ⚠ Соседние вертикальные отступы схлопываются, поэтому между списком
       и тем, что под ним, останется не 24 + 20, а наибольшее из двух —
       отсюда 44px одним числом, а не 24px. Поставите тут 24 — визуально
       ничего не изменится. */
.news--spec {
  margin-bottom: 44px; }

/* --- Вступительный текст внутренних страниц -----------------------
   Абзац под h1: «Акции, скидки и специальные цены…» на spec-vm.html,
   перечисление видов туров на country-vm.html, приглашение в тур на
   country-vm2.html. Ставится как <p class="lead lead--sm">: класс
   темы держит отбивки (30px сверху и снизу), наш модификатор —
   кегль и вес.

   Своя ступень, 16/26 обычным начертанием. Типовой .lead темы
   (18/28, вес 600) оказался слишком громким: три строки полужирного
   восемнадцатого читались вторым заголовком страницы сразу под h1.

   16px — минимальный заметный шаг от текста колонки: 14px против
   16px это 10,5pt против 12pt, то есть полтора пункта. Меньше брать
   нельзя — разница в один пиксель на экране не читается как
   намеренная, выглядит сбоем.

   ⚠ На главной (index-vm2.html) вступление оставлено типовым .lead:
   там оно не под h1 в колонке, а в блоке «О компании» во всю ширину,
   и громкость ему к месту. */
.lead--sm {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400; }

/* --- Табы по странам ----------------------------------------------
   Фильтр темы (.filters + filter-js), но вид другой: у темы это мелкие
   плашки в рамке 1px с радиусом 2px — на фильтр «Безвизовые» в списке
   стран годится, а здесь это основная навигация по списку, её должно
   быть видно.

   Модификатор --tabs нужен, чтобы не менять фильтр на
   countries-vm.html: там типовой вид уже согласован. */
.filters--tabs {
  margin: 0 0 25px;
  /* Рядом с рамками табов типовое overflow: hidden срезало бы тень и
     обрезало ряд при переносе — здесь он переносится по строкам. */
  overflow: visible; }

.filters--tabs .filters__list {
  margin: -4px;
  font-size: 14px;
  line-height: 24px; }

.filters--tabs .filters__item {
  margin: 4px; }

.filters--tabs .filters__link {
  padding: 5px 16px;
  border: 1px solid #e1e2e5;
  border-radius: 10px;
  color: #222222;
  -webkit-transition: color 0.3s ease, border-color 0.3s ease;
  -o-transition: color 0.3s ease, border-color 0.3s ease;
  transition: color 0.3s ease, border-color 0.3s ease; }

.filters--tabs .filters__link:hover {
  color: #3c4ea5;
  color: var(--vm-blue);
  border-color: #cacbcf; }

/* Активный таб — заливка фирменным синим. У темы это серый #ededed:
   на странице, где табы единственный элемент управления, серый не
   читался как выбранное состояние. */
.filters--tabs .filters__link.active,
.filters--tabs .filters__link.active:hover {
  color: #ffffff;
  background-color: #3c4ea5;
  background-color: var(--vm-blue);
  border-color: transparent; }


/* Описание в карточке «Виды отдыха» — не длиннее трёх строк. Сюда
   выводится «Краткая информация» раздела, а у части разделов это абзац
   в 600+ знаков: карточки слайдера вытягивались в разную высоту, до
   670px. Полный текст — на странице раздела. (28.10.2026) */
.tour-types__item-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden; }


/* Отступ над «Нашими партнёрами» — везде ~62px, как между остальными
   блоками главной. (28.10.2026)

   На главной было 130px пустоты: нижнее поле блока «О компании» (70px)
   плюс верхнее у партнёров (60px). Сергей попросил вдвое меньше — снято
   верхнее поле партнёров. Но и после этого от картинки «О компании» до
   заголовка оставалось 102px, от кнопки — 111px (поле 70px + отступ под
   картинкой), поэтому подтягиваем ещё на 40px.

   На внутренних было 143px: нижнее поле `.main__layout` (70px), верхнее
   у партнёров (60px) и 13px, на которые левая колонка выше текстовой.
   Снимаем верхнее поле и подтягиваем на 20px — остаётся ~63px. Правим
   не `.main__layout`, а сам блок партнёров: поле колонки нужно целиком
   на страницах, где партнёров нет и под контентом сразу футер.

   ⚠ Оба правила только от 768px. Ниже у темы свои поля (40px вместо
   60/70), и те же минусы схлопывали отступ в ноль: на главной заголовок
   «Наши партнёры» садился вплотную к блоку «О компании». */
@media (min-width: 768px) {
  .about + .partners {
    padding-top: 0;
    margin-top: -40px; }

  .main__inner + .partners {
    padding-top: 0;
    margin-top: -20px; } }

/* Баннер в левой колонке без текста — просто картинка со ссылкой: без
   тёмного градиента темы (.promo::before), он нужен только под подписью.
   Класс promo--no-text ставит шаблон CMS №7, если у баннера пустой текст.
   (28.10.2026) */
.promo--no-text::before {
  display: none; }
/* --- Оценка на Яндекс Картах в блоке отзывов (главная) -----------
   Официальный значок Яндекс Бизнеса (iframe 150×50, оценка обновляется
   сама) и ссылка на все отзывы — по центру под заголовком «Отзывы наших
   клиентов». Заголовку темы оставлен отступ 30px снизу, строку значка
   подтягиваем к нему: она относится к заголовку, а не к слайдеру.
   Номер организации — настройка «Контент → Соц. сети». (28.10.2026) */
.reviews__rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px 20px;
  margin: 0 0 24px; }

/* До 768px заголовок у темы слева и без нижнего отступа — строка значка тоже слева */
@media (max-width: 767px) {
  .reviews__rating {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }

@media (min-width: 768px) {
  .reviews__rating {
    margin-top: -14px;
    margin-bottom: 30px; } }

.reviews__rating iframe {
  display: block;
  border: 0; }

.reviews__rating-link {
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px; }
/* --- Плашка о cookie (blocks/cookie_notice.php, 28.10.2026) ---------
   Заменила виджет демо tourmobile: белая плашка с чёрной кнопкой во
   всю ширину окна выглядела чужой. Приём с pearl-black.ru — выезжает
   снизу, текст слева, кнопка справа; оформление наше: рамка страницы,
   скругление 20px сверху, кнопка сайта. Показывает её voyage.js.

   Ширина — как у шапки в полёте: фиксированный элемент про рамку
   страницы (.page__wrapper) не знает, поэтому max-width повторены. */
.cookie-notice {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
  margin: 0 auto;
  padding: 16px 0;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 30px rgba(34, 34, 34, .15);
  transform: translateY(100%);
  transition: transform .3s ease; }

.cookie-notice[hidden] {
  display: none; }

.cookie-notice--visible {
  transform: translateY(0); }

.cookie-notice__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px; }

.cookie-notice__text {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: #444444; }

/* кнопка служебная — не крупнее «Подобрать тур» в меню */
.cookie-notice__button {
  flex-shrink: 0;
  white-space: nowrap; }

@media (min-width: 768px) {
  .cookie-notice {
    max-width: 768px; }
  .cookie-notice__inner {
    flex-direction: row;
    align-items: center;
    gap: 30px; }
  .cookie-notice__text {
    font-size: 13px;
    line-height: 20px; } }

@media (min-width: 992px) {
  .cookie-notice {
    max-width: 992px; } }

@media (min-width: 1200px) {
  .cookie-notice {
    max-width: 1200px; } }

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: none; } }