/* ============================================================
   Delai-sait — дизайн-система темы «Флагман-тур» (Сахалин)
   Файл: assets/css/main.css
   Шрифты: Rubik (заголовки), Roboto (текст)
   ============================================================ */

/* ------------------------------------------------------------
   1. Дизайн-токены
   ------------------------------------------------------------ */
:root {
  /* Цвета */
  --c-teal: #00a9a5;
  --c-teal-hover: #02857f;
  --c-cyan: #00bcd4;
  --c-dark: #0e2a30;
  --c-text: #222;
  --c-muted: #777;
  --c-line: #e2e6e6;
  --c-bg: #fff;
  --c-footer: #efefef;
  --c-star: #ffcc00;

  /* Форма и тени */
  --radius: 20px;
  --radius-lg: 24px;
  /* Единый плавный hover для всего сайта */
  --hover-dur: 0.35s;
  --hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-card: 0 8px 24px rgba(14, 42, 48, .08);

  /* Шапка: единый источник высоты и параметров стекла.
     Размеры элементов тоже в переменных — на ноутбуках (1366–1599) они
     уменьшаются одним блоком, состав шапки при этом не меняется. */
  --header-h: 70px;
  --header-h-sm: 58px;
  --header-max: 2100px;
  --logo-badge: 124px;
  --award-badge: var(--logo-badge);
  --header-dur: 0.4s;
  --glass-solid: #fff;
  /* Фон табов-накладок (логотип и награды): полупрозрачное стекло над фото */
  --glass-solid-soft: rgba(255, 255, 255, .26);
  --glass-solid-soft-scrolled: rgba(255, 255, 255, .5);
  --glass-solid-soft-line: rgba(255, 255, 255, .34);
  --glass-solid-soft-blur: 16px;
  --glass-bg: rgba(255, 255, 255, .86);
  --glass-line: rgba(14, 42, 48, .08);
  --glass-blur: 18px;
  --nav-fs: 14px;
  --nav-pad: 12px;
  --nav-chev: 13px;
  --aside-gap: 12px;
  --soc-size: 34px;
  --phone-size: 40px;
  --cta-fs: 14px;
  --cta-pad: 10px 16px;
  --header-pad-l: 150px;

  /* Hero-слайдер: длительность кроссфейда, интервал автоплея и размах зума */
  --hero-dur: 1.1s;
  --hero-autoplay: 8s;
  --hero-zoom-out: 1.05;
  --hero-zoom-in: 1.11;

  /* Затемнение фото в hero — сверху прозрачно, книзу темнее.
     Типы hero: тур, категория, страница, новость. Слайдер главной
     затемнения не получает — см. комментарий у .hero__media ниже. */
  --hero-scrim: linear-gradient(180deg,
      rgba(14, 42, 48, 0) 0%,
      rgba(14, 42, 48, .3) 45%,
      rgba(14, 42, 48, .92) 100%);

  /* Шрифты */
  --font-head: 'Rubik', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

/* Сжатие при скролле: класс ставит JS на <html>,
   от переменной зависят и шапка, и позиция мобильного меню. */
html.is-scrolled {
  --header-h: var(--header-h-sm);
  --logo-badge: 96px;
}

/* ------------------------------------------------------------
   2. Reset и база
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
}

/* ------------------------------------------------------------
   3. Контейнеры
   ------------------------------------------------------------ */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}

.container--narrow {
  max-width: 1180px;
}

/* ------------------------------------------------------------
   4. Кнопки
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
  text-align: center;
}

.btn--primary {
  background: var(--c-teal);
  color: #fff;
}

.btn--primary:hover {
  background: var(--c-teal-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 169, 165, .3);
}

.btn--outline {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
}

.btn--outline:hover {
  background: #fff;
  color: var(--c-dark);
}

.btn--white {
  background: #fff;
  color: var(--c-dark);
}

.btn--white:hover {
  background: #f2f6f6;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(14, 42, 48, .18);
}

.btn--lg {
  padding: 16px 34px;
  font-size: 17px;
}

.btn:disabled,
.btn.is-disabled {
  opacity: .6;
  pointer-events: none;
}

/* Бегущий блик по кнопке: общий эффект для главных CTA (шапка, CTA-баннеры).
   Двигаем translateX, а не left: проценты у псевдоэлемента считаются от его
   собственной ширины (40% кнопки), поэтому -120% уводит блик левее кнопки,
   280% — правее, и это верно для любой длины надписи без пересчёта. */
.btn--sheen {
  position: relative;
  overflow: hidden;
}

.btn--sheen::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  animation: btnSheen 5s linear infinite;
}

@keyframes btnSheen {
  0% {
    transform: translateX(-120%) skewX(-18deg);
    opacity: 0;
  }

  /* Появление в самом начале прохода — блик ещё за краем кнопки */
  3% {
    opacity: 1;
  }

  /* Проход занимает 18% цикла (0.9s из 5s), остальное — пауза */
  18% {
    transform: translateX(280%) skewX(-18deg);
    opacity: 1;
  }

  /* Гаснет сразу за кнопкой и ждёт там следующего прохода */
  21% {
    transform: translateX(280%) skewX(-18deg);
    opacity: 0;
  }

  100% {
    transform: translateX(280%) skewX(-18deg);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   5. Секции и заголовки
   ------------------------------------------------------------ */
.section {
  padding: 64px 0;
}

.section__title {
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-text);
}

.section__title--center {
  text-align: center;
}

/* ------------------------------------------------------------
   6. Хлебные крошки
   ------------------------------------------------------------ */
.breadcrumbs {
  font-size: 13px;
  color: #888;
  padding: 18px 0 0;
}

.breadcrumbs a {
  color: #888;
  transition: color var(--hover-dur) var(--hover-ease);
}

.breadcrumbs a:hover {
  color: var(--c-teal);
}

.breadcrumbs__sep {
  margin: 0 8px;
  opacity: .5;
}

.breadcrumbs > span:last-child {
  color: var(--c-text);
}

/* ------------------------------------------------------------
   7. Иконки
   ------------------------------------------------------------ */
.ds-icon {
  vertical-align: middle;
}

.ds-ui-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

/* ============================================================
   ШАПКА
   ------------------------------------------------------------
   Состояния:
     .header                          — база (белая), высота var(--header-h)
     .header--over:not(.is-scrolled)  — поверх тёмного баннера: прозрачно, белый текст
     .header.is-scrolled              — после скролла: матовое стекло + сжатие
     html.is-menu-open                — открыто мобильное меню: шапка принудительно стеклянная
     html.is-nav-min / is-nav-tight   — откат правой группы и меню в бургер (ставит JS)
   Одна десктопная версия от 1200px (любой десктоп): меню, кнопка и табы наград;
   на 1200–1599 размеры плотнее (токены --nav-* / --soc-* и т.д.).
   Единственный источник высоты — --header-h (см. дизайн-токены).
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--glass-solid);
  border-bottom: 1px solid transparent;
  transition: height var(--header-dur) var(--hover-ease), background var(--header-dur) var(--hover-ease), border-color var(--header-dur) var(--hover-ease), box-shadow var(--header-dur) var(--hover-ease);
  animation: headerDrop .5s var(--hover-ease) both;
}

/* Матовое стекло — после скролла и при открытом мобильном меню */
.header.is-scrolled,
html.is-menu-open .header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom-color: var(--glass-line);
  box-shadow: 0 10px 30px rgba(14, 42, 48, .07);
}

/* Прозрачная шапка поверх баннера */
.header--over:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Скрим поверх фото — держит контраст белого текста на любом снимке.
   pointer-events: none обязателен: абсолютный псевдоэлемент иначе перехватывает клики. */
.header--over:not(.is-scrolled)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  background: linear-gradient(180deg, rgba(14, 42, 48, .52), rgba(14, 42, 48, .24) 46%, rgba(14, 42, 48, 0));
  pointer-events: none;
}

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Логотип-накладка над шапкой ──────────────────────────── */
.header__logo-badge {
  position: absolute;
  top: 0;
  left: max(20px, calc((100% - var(--header-max)) / 2 + 20px));
  width: var(--logo-badge);
  height: var(--logo-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--glass-solid-soft);
  border: 1px solid var(--glass-solid-soft-line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 24px rgba(14, 42, 48, .14);
  -webkit-backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
  z-index: 101;
  transition: width var(--header-dur) var(--hover-ease), height var(--header-dur) var(--hover-ease), background var(--header-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.header__logo-badge img {
  max-width: calc(var(--logo-badge) - 16px);
  max-height: calc(var(--logo-badge) - 16px);
  width: auto;
  height: auto;
  /* Мягкий световой ореол: фон таба полупрозрачный, на тёмном фото
     тёмный логотип без него терялся бы. */
  filter: drop-shadow(0 1px 7px rgba(255, 255, 255, .5));
}

.header__logo-badge:hover {
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 14px 34px rgba(14, 42, 48, .22);
}

/* После скролла таб чуть плотнее, но остаётся полупрозрачным */
html.is-scrolled .header__logo-badge {
  background: var(--glass-solid-soft-scrolled);
}

/* Логотип в строке — там, где накладка скрыта */
.header__logo-inline {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
}

.header__logo-inline img {
  max-width: 46px;
  max-height: 46px;
  width: auto;
  height: auto;
}

@media (min-width: 1200px) {
  .header__inner {
    padding-left: var(--header-pad-l);
  }
}

/* ── Десктопная навигация ─────────────────────────────────── */
.nav {
  display: none;
  position: relative;
  align-items: center;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  flex-wrap: nowrap;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--nav-pad);
  font-family: var(--font-head);
  font-size: var(--nav-fs);
  font-weight: 500;
  color: var(--c-text);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.nav__link:hover {
  color: var(--c-teal);
  background: rgba(0, 169, 165, .08);
}

.nav__link .chevron {
  width: var(--nav-chev);
  height: var(--nav-chev);
  transition: transform var(--hover-dur) var(--hover-ease);
}

.nav__item:hover .nav__link .chevron {
  transform: rotate(180deg);
}

/* Скользящий индикатор под активным/наведённым пунктом.
   Отступ считается от реального низа пункта (высота ссылки 38-40px), иначе
   в сжатом состоянии (--header-h: 58px) полоска заходит на текст. */
.nav__indicator {
  position: absolute;
  left: 0;
  bottom: calc((var(--header-h) - 40px) / 2 - 8px);
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-teal), var(--c-cyan));
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform var(--hover-dur) var(--hover-ease), width var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease);
}

.nav__indicator.is-visible {
  opacity: 1;
}

.header--over:not(.is-scrolled) .nav__indicator {
  background: linear-gradient(90deg, #fff, var(--c-cyan));
}

/* ── Выпадающие панели ────────────────────────────────────────
   1-й уровень — панель под пунктом, 2-й — вылет сбоку от пункта.
   Панель первого уровня НЕ обрезается (иначе срезался бы вылет вложенной),
   скроллится только листовая — у неё внутри уже ничего нет. */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 288px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(14, 42, 48, .07);
  box-shadow: 0 18px 48px rgba(14, 42, 48, .16), 0 2px 8px rgba(14, 42, 48, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
  z-index: 102;
}

/* Невидимый мостик над панелью: между пунктом и панелью есть зазор,
   без мостика курсор по дороге терял бы наведение и панель закрывалась. */
.nav__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* Листовая панель (2-й уровень) скроллится, если позиций много */
.nav__item:not(.nav__item--has-sub) > .nav__dropdown {
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Вложенный уровень выезжает сбоку от своего пункта */
.nav__dropdown .nav__dropdown {
  top: -10px;
  left: 100%;
  min-width: 300px;
  transform: translateX(10px);
}

/* У правого края экрана панель разворачивается (класс ставит JS по замеру) */
.nav__item > .nav__dropdown.is-flip {
  left: auto;
  right: 0;
}

.nav__dropdown .nav__dropdown.is-flip {
  left: auto;
  right: 100%;
  transform: translateX(-10px);
}

.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Пункты внутри панели: переносим длинные названия туров и подсвечиваем
   строку бирюзовой меткой слева */
.nav__dropdown .nav__link {
  position: relative;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #2b3a3d;
  white-space: normal;
}

.nav__dropdown .nav__link::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-teal), var(--c-cyan));
  transform: translateY(-50%);
  transition: height var(--hover-dur) var(--hover-ease);
}

.nav__dropdown .nav__link:hover {
  background: rgba(0, 169, 165, .08);
  color: var(--c-teal);
}

.nav__dropdown .nav__link:hover::before {
  height: 20px;
}

/* У пунктов с подменю шеврон смотрит вбок — намёк на вылет */
.nav__dropdown .nav__item--has-sub > .nav__link .chevron {
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: .5;
  transform: rotate(-90deg);
  transition: transform var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease);
}

.nav__dropdown .nav__item--has-sub > .nav__link:hover .chevron {
  opacity: 1;
  transform: rotate(-90deg) translateX(2px);
}

/* Открытый пункт верхнего уровня подсвечен, пока курсор внутри панели */
.nav__item--has-sub:hover > .nav__link,
.nav__item--has-sub:focus-within > .nav__link {
  color: var(--c-teal);
  background: rgba(0, 169, 165, .08);
}

/* Тонкий скроллбар внутри длинных панелей */
.nav__dropdown::-webkit-scrollbar {
  width: 6px;
}

.nav__dropdown::-webkit-scrollbar-thumb {
  background: rgba(14, 42, 48, .18);
  border-radius: 999px;
}

.nav__dropdown::-webkit-scrollbar-track {
  background: transparent;
}

/* Белый текст в прозрачном состоянии — ТОЛЬКО для пунктов верхнего уровня:
   выпадашка лежит на белой панели и должна оставаться тёмной. */
.header--over:not(.is-scrolled) .nav__list > .nav__item > .nav__link,
.header--over:not(.is-scrolled) .header__phone {
  color: #fff;
}

.header--over:not(.is-scrolled) .nav__list > .nav__item > .nav__link:hover,
.header--over:not(.is-scrolled) .header__phone:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.header--over:not(.is-scrolled) .burger span {
  background: #fff;
}

.header--over:not(.is-scrolled) :focus-visible {
  outline-color: #fff;
}

/* ── Правая группа: мессенджеры, телефон, CTA (награды — вне потока) ── */
.header__aside {
  display: flex;
  align-items: center;
  gap: var(--aside-gap);
  margin-left: auto;
  flex: none;
}

/* Награды — те же «табы», что и логотип-накладка (тот же --logo-badge),
   но свисают с НИЖНЕЙ кромки шапки у правого края. Лежат прямо в .header
   (containing block — сама шапка, position: fixed), поэтому привязка не зависит
   от transform-анимаций внутри .header__inner. Из потока — значит ширина строки
   не тратится и состав шапки одинаков и на 1366, и на 2560. */
.header__awards {
  display: none;
  position: absolute;
  top: var(--header-h);
  right: max(20px, calc((100% - var(--header-max)) / 2 + 20px));
  align-items: flex-start;
  gap: 8px;
  z-index: 101;
  transition: top var(--header-dur) var(--hover-ease);
}

.header__awards a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--award-badge);
  height: var(--award-badge);
  background: var(--glass-solid-soft);
  border: 1px solid var(--glass-solid-soft-line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 24px rgba(14, 42, 48, .14);
  -webkit-backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
  transition: width var(--header-dur) var(--hover-ease), height var(--header-dur) var(--hover-ease), background var(--header-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.header__awards a:hover {
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 14px 34px rgba(14, 42, 48, .22);
}

html.is-scrolled .header__awards a {
  background: var(--glass-solid-soft-scrolled);
}

.header__awards img {
  max-width: calc(var(--award-badge) - 16px);
  max-height: calc(var(--award-badge) - 16px);
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 7px rgba(255, 255, 255, .45));
}

.header__socials {
  flex-wrap: nowrap;
  gap: 8px;
}

.socials--header .socials__link {
  width: var(--soc-size);
  height: var(--soc-size);
  border-radius: 50%;
  background: rgba(14, 42, 48, .06);
}

.socials--header .socials__link svg,
.socials--header .socials__link img {
  width: 18px;
  height: 18px;
}

.header--over:not(.is-scrolled) .socials--header .socials__link {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.socials--header .socials__link:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14, 42, 48, .16);
}

.header__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: var(--phone-size);
  height: var(--phone-size);
  border-radius: 50%;
  color: var(--c-text);
  white-space: nowrap;
  transition: color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.header__phone:hover {
  color: var(--c-teal);
  background: rgba(0, 169, 165, .1);
}

.header__phone .ds-ui-icon {
  width: 20px;
  height: 20px;
}

/* В десктопной версии телефон не показываем (требование пользователя):
   номер остаётся в полноэкранном меню, а на мобильных — иконкой в строке. */
@media (min-width: 1200px) {
  .header__phone {
    display: none;
  }
}

/* Позиционирование и обрезку для блика даёт .btn--sheen (см. блок кнопок) */
.header__cta.btn {
  padding: var(--cta-pad);
  font-size: var(--cta-fs);
  white-space: nowrap;
}

@keyframes headerDrop {
  from {
    transform: translateY(-100%);
  }

  to {
    /* none, а не translateY(0): матричный transform в конечном кадре делал бы
       элемент контейнером для абсолютных потомков (табы наград «отклеивались»). */
    transform: none;
  }
}

@keyframes headerItemIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Каскадное появление элементов шапки при загрузке */
.header__inner > * {
  animation: headerItemIn .5s var(--hover-ease) both;
}

.header__inner > *:nth-child(2) {
  animation-delay: .1s;
}

.header__inner > *:nth-child(3) {
  animation-delay: .18s;
}

.header__inner > *:nth-child(4) {
  animation-delay: .26s;
}

/* ── Бургер ───────────────────────────────────────────────── */
.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease);
}

.burger:hover {
  background: rgba(0, 169, 165, .1);
}

.burger span {
  width: 24px;
  height: 2.5px;
  background: var(--c-teal);
  border-radius: 2px;
  transition: transform var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.burger.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Полноэкранное мобильное меню ─────────────────────────── */
.mnav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* visibility переключается без длительности: при закрытии — с задержкой,
     чтобы успел проиграться фейд. Длительность делает содержимое нефокусируемым. */
  transition: opacity var(--header-dur) var(--hover-ease), transform var(--header-dur) var(--hover-ease), visibility 0s linear var(--header-dur);
  overscroll-behavior: contain;
}

.mnav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--header-dur) var(--hover-ease), transform var(--header-dur) var(--hover-ease), visibility 0s linear 0s;
}

/* Блокировка прокрутки страницы под модалкой и меню (класс ставит lockScroll). */
body.no-scroll {
  overflow: hidden;
}

.mnav__nav {
  display: flex;
  flex-direction: column;
  max-width: var(--header-max);
  width: 100%;
  margin: 0 auto;
}

.mnav__group {
  border-bottom: 1px solid var(--c-line);
}

/* Каскад: пункты приезжают по очереди */
.mnav.is-open .mnav__nav > .mnav__group {
  animation: mnavItemIn .45s var(--hover-ease) both;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(1) {
  animation-delay: .04s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(2) {
  animation-delay: .1s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(3) {
  animation-delay: .16s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(4) {
  animation-delay: .22s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(5) {
  animation-delay: .28s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(6) {
  animation-delay: .34s;
}

.mnav.is-open .mnav__nav > .mnav__group:nth-child(n+7) {
  animation-delay: .4s;
}

@keyframes mnavItemIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.mnav__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mnav__link {
  padding: 15px 0;
  display: block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-text);
  transition: color var(--hover-dur) var(--hover-ease);
}

.mnav__link:hover {
  color: var(--c-teal);
}

.mnav__link--parent {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
}

.mnav__plus {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 169, 165, .08);
  border: 0;
  border-radius: 50%;
  color: var(--c-teal);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease);
}

.mnav__plus:hover {
  background: rgba(0, 169, 165, .16);
}

.mnav__plus span {
  font-size: 22px;
  line-height: 1;
  transition: transform var(--hover-dur) var(--hover-ease);
}

.mnav__group-head.is-open .mnav__plus span {
  transform: rotate(45deg);
}

/* Подменю: плавное раскрытие через grid-трюк (0fr → 1fr) — высота любая,
   в том числе когда внутри раскрывается вложенный уровень. */
.mnav__list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--header-dur) var(--hover-ease);
}

.mnav__group-head.is-open + .mnav__list {
  grid-template-rows: 1fr;
}

.mnav__list-inner {
  min-height: 0;
  overflow: hidden;
}

.mnav__list .mnav__list-inner {
  padding-left: 14px;
  border-left: 1px solid var(--c-line);
  margin: 0 0 0 6px;
}

.mnav__list .mnav__link {
  font-size: 15.5px;
  font-weight: 400;
  color: #3d4a4d;
  padding: 12px 0;
}

.mnav__list .mnav__group-head .mnav__link {
  font-weight: 500;
}

/* Контакты внизу меню */
.mnav__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  width: 100%;
  max-width: var(--header-max);
  margin-left: auto;
  margin-right: auto;
}

.mnav.is-open .mnav__contact {
  animation: mnavItemIn .45s var(--hover-ease) both;
  animation-delay: .3s;
}

.mnav__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-dark);
}

.mnav__phone .ds-ui-icon {
  width: 22px;
  height: 22px;
  color: var(--c-teal);
}

.socials--menu {
  gap: 10px;
}

.socials--menu .socials__link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.socials--menu .socials__link svg,
.socials--menu .socials__link img {
  width: 22px;
  height: 22px;
}

.mnav__cta {
  width: 100%;
}

/* ── Адаптив ──────────────────────────────────────────────── */

/* Телефоны и планшеты: накладка уходит, логотип встаёт в строку */
@media (max-width: 1199px) {
  .header__inner {
    padding: 0 16px;
    gap: 10px;
  }

  .header__logo-badge {
    display: none;
  }

  .header__logo-inline {
    display: flex;
  }
}

/* ── Телефоны: крупный логотип и значки наград прямо в строке, как в макете.
   Телефон и кнопка из строки уходят — они есть в полноэкранном меню. ── */
@media (max-width: 640px) {
  :root {
    --logo-badge: 88px;
    --award-badge: 72px;
  }

  html.is-scrolled {
    --logo-badge: 74px;
    --award-badge: 62px;
  }

  /* Логотип — крупный таб, прижатый к краю экрана.
     Подложка — те же токены стекла, что у табов наград и у накладки на десктопе,
     поэтому фон у всех табов в любом состоянии один и тот же. */
  .header__logo-inline {
    width: var(--logo-badge);
    height: var(--logo-badge);
    margin-left: -16px;
    align-self: flex-start;
    background: var(--glass-solid-soft);
    border: 1px solid var(--glass-solid-soft-line);
    border-top: 0;
    -webkit-backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
    backdrop-filter: blur(var(--glass-solid-soft-blur)) saturate(140%);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 24px rgba(14, 42, 48, .14);
    transition: width var(--header-dur) var(--hover-ease), height var(--header-dur) var(--hover-ease), background var(--header-dur) var(--hover-ease);
  }

  /* После скролла фон табов — ровно фон шапки (--glass-bg: белый, слегка
     прозрачный) и то же размытие, поэтому логотип и награды читаются вместе
     с полосой как одна поверхность. */
  html.is-scrolled .header__logo-inline,
  html.is-scrolled .header__awards a {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  }

  .header__logo-inline img {
    max-width: calc(var(--logo-badge) - 16px);
    max-height: calc(var(--logo-badge) - 16px);
  }

  /* Награды — такие же табы рядом с логотипом (на десктопе они висят абсолютно) */
  .header__awards {
    display: flex;
    position: static;
    top: auto;
    right: auto;
    align-self: flex-start;
    gap: 6px;
    margin-left: -4px;
    transition: none;
  }

  /* Фон, размытие и скругление — как у логотипа: только размеры свои */
  .header__awards a {
    width: var(--award-badge);
    height: var(--award-badge);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 24px rgba(14, 42, 48, .14);
    transition: width var(--header-dur) var(--hover-ease), height var(--header-dur) var(--hover-ease);
  }

  .header__awards img {
    max-width: calc(var(--award-badge) - 14px);
    max-height: calc(var(--award-badge) - 14px);
  }

  /* В строке остаются логотип, награды и бургер */
  .header__phone,
  .header__cta {
    display: none;
  }

  .header__aside {
    gap: 8px;
  }

  /* Селектор из двух классов: иначе .socials из блока подвала (он ниже в файле)
     перебивает это правило по порядку следования. */
  .header__socials.socials--header {
    display: none;
  }

  .mnav {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Одна десктопная версия: горизонтальное меню, кнопка и табы наград —
   одинаковая на любом десктопе (от 1200px). Ниже 1200 строка физически
   не помещается (6 длинных пунктов меню), там бургер. ── */

/* Небольшие десктопы 1200–1279: меню остаётся десктопным, размеры самые плотные.
   Мессенджеры в эту полосу не помещаются вместе с шестью пунктами меню —
   в шапке они возвращаются с 1366px, а до тех пор есть в подвале. */
@media (min-width: 1200px) and (max-width: 1279px) {
  :root {
    --logo-badge: 80px;
    --nav-fs: 11px;
    --nav-pad: 6px;
    --nav-chev: 10px;
    --aside-gap: 7px;
    --soc-size: 24px;
    --phone-size: 32px;
    --cta-fs: 11.5px;
    --cta-pad: 9px 10px;
    --header-pad-l: 98px;
  }

  html.is-scrolled {
    --logo-badge: 62px;
  }

  /* Два класса: иначе .socials из блока подвала (ниже в файле) перебивает правило */
  .header__socials.socials--header {
    display: none;
  }
}

/* Десктопы 1280–1365 */
@media (min-width: 1280px) and (max-width: 1365px) {
  :root {
    --logo-badge: 84px;
    --nav-fs: 12px;
    --nav-pad: 7px;
    --nav-chev: 11px;
    --aside-gap: 8px;
    --soc-size: 26px;
    --phone-size: 32px;
    --cta-fs: 12px;
    --cta-pad: 9px 11px;
    --header-pad-l: 104px;
  }

  html.is-scrolled {
    --logo-badge: 66px;
  }

  .header__socials.socials--header {
    display: none;
  }
}

/* Ноутбуки 1366–1439: тот же состав, плотнее размеры */
@media (min-width: 1366px) and (max-width: 1439px) {
  :root {
    --logo-badge: 100px;
    --nav-fs: 12.5px;
    --nav-pad: 7px;
    --nav-chev: 11px;
    --aside-gap: 7px;
    --soc-size: 28px;
    --phone-size: 34px;
    --cta-fs: 12px;
    --cta-pad: 9px 10px;
    --header-pad-l: 124px;
  }

  html.is-scrolled {
    --logo-badge: 78px;
  }
}

/* Ноутбуки и компактные десктопы 1440–1759 */
@media (min-width: 1440px) and (max-width: 1759px) {
  :root {
    --logo-badge: 106px;
    --nav-fs: 13px;
    --nav-pad: 8px;
    --nav-chev: 12px;
    --aside-gap: 9px;
    --soc-size: 30px;
    --phone-size: 36px;
    --cta-fs: 12.5px;
    --cta-pad: 9px 12px;
    --header-pad-l: 128px;
  }

  html.is-scrolled {
    --logo-badge: 82px;
  }
}

@media (min-width: 1200px) {
  .nav {
    display: flex;
  }

  .burger {
    display: none;
  }
}

/* Пошаговый откат правой группы, когда строка не влезает (классы ставит JS):
   мессенджеры → навигация в бургер. Награды вне потока, поэтому их скрытие
   ширину не освобождает; телефона в десктопной строке нет. */
html.is-nav-min .header__socials {
  display: none;
}

/* Бейджи наград — на всех десктопных ширинах */
@media (min-width: 1200px) {
  .header__awards {
    display: flex;
  }
}

/* Меню не влезло (JS-страховка на случай, если пунктов стало больше) */
html.is-nav-tight .nav {
  display: none;
}

html.is-nav-tight .burger {
  display: flex;
}

html.is-nav-tight .header__socials {
  display: flex;
}

/* Нет :hover (тач) — индикатор не нужен */
@media (hover: none) {
  .nav__indicator {
    display: none;
  }
}

/* Нет поддержки backdrop-filter — плотный непрозрачный фон */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .header.is-scrolled,
  html.is-menu-open .header {
    background: rgba(255, 255, 255, .97);
  }

  .mnav {
    background: #fff;
  }

  .header--over:not(.is-scrolled) .header__logo-badge {
    background: rgba(255, 255, 255, .94);
  }

  .header--over:not(.is-scrolled) .header__awards a,
  .header--over:not(.is-scrolled) .socials--header .socials__link {
    background: rgba(255, 255, 255, .88);
  }
}

/* ============================================================
   HERO-СЛАЙДЕР (главная)
   ------------------------------------------------------------
   Кинематографичный режим: кроссфейд + «дыхание» камеры, пословный
   подъём заголовка, каскад текста, линия прогресса автоплея,
   счётчик слайдов и мягкий параллакс при скролле.
   Контракт сохранён: .hero / .hero__slide / .is-active / .hero__img /
   .hero__content / __title / __subtitle / __btn / __arrow / __dots —
   от .hero зависит прозрачная шапка (ds_header_has_hero + initHeader).
   Смещения параллакса приходят с JS в --hero-py (фото) и --hero-cy (текст).
   ============================================================ */

.hero {
  position: relative;
  /* Высоту задают настройки темы (--hero-h / --hero-h-m), значения по умолчанию —
     на случай отсутствия опций. Минимум не спорит с настройкой: он ограничивает
     высоту только на очень низких окнах. */
  height: var(--hero-h, 100svh);
  min-height: min(480px, var(--hero-h, 100svh));
  overflow: hidden;
  background: var(--c-dark);
  /* Свайп слайдера: без pan-y браузер на таче забирает жест под скролл и шлёт
     pointercancel до pointerup — свайп не срабатывает. pan-y отдаёт странице
     горизонтальные жесты, вертикальная прокрутка работает как раньше. */
  touch-action: pan-y;
  /* Мышью свайпят по заголовку — выделение текста при этом только мешает */
  user-select: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  /* Параллакс: сам сдвиг не анимируем — его ведёт скролл через rAF */
  transform: translate3d(0, var(--hero-py, 0px), 0);
  transition: opacity var(--hero-dur) var(--hover-ease);
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  /* Активный слайд всегда поверх уходящего — иначе обратный переход «просвечивает» */
  z-index: 1;
}

/* Фото вынесено в обёртку: эффекты перехода двигают и обрезают её,
   «дыхание» камеры живёт на самом img, а параллакс — на слайде.
   Три слоя не мешают друг другу, у каждого своя трансформация. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* «Дыхание»: медленный наезд камеры. Переход, а не @keyframes: при снятии
   класса keyframes даёт рывок, а transition плавно возвращается под фейдом. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--hero-zoom-out));
  transition: transform var(--hero-autoplay) linear;
  /* Нативный drag картинки отменяет pointer-жест свайпа (dragstart → pointercancel) */
  -webkit-user-drag: none;
}

.hero__slide.is-active .hero__img {
  transform: scale(var(--hero-zoom-in));
}

/* Пока JS не инициализировался, активный кадр стоит в начальном масштабе:
   переходу нужна смена значения, иначе «дыхание» не запустится на первом слайде. */
.hero:not(.is-ready) .hero__slide.is-active .hero__img {
  transform: scale(var(--hero-zoom-out));
}

/* Слайдер главной идёт без затемнения фото — по решению владельца сайта.
   Поэтому правила для .hero__media::after здесь больше нет, а настройка
   «Затемнение фото» (классы hero__slide--ov-* из inc/hero.php) сейчас
   ни на что не влияет. Текст слайда держится на своих тенях
   (text-shadow у .hero__title / .hero__subtitle), верх — на скриме шапки.
   Затемнение в hero остальных типов живёт в токене --hero-scrim. */

/* ── Эффекты перехода (класс hero--tr-* из настроек) ──────── */

/* Наплыв с приближением */
.hero--tr-zoom .hero__media {
  transform: scale(1.09);
  transition: transform var(--hero-dur) var(--hover-ease);
}

.hero--tr-zoom .hero__slide.is-active .hero__media {
  transform: scale(1);
}

/* Растворение с расфокусом */
.hero--tr-blur .hero__media {
  filter: blur(18px);
  transition: filter var(--hero-dur) var(--hover-ease);
}

.hero--tr-blur .hero__slide.is-active .hero__media {
  filter: blur(0);
}

/* Раскрытия: новый кадр проявляется поверх уходящего, поэтому у уходящего
   отключаем фейд и держим его классом .is-leaving, пока раскрытие не закончится.
   Текст уходящего слайда скрываем сразу — иначе он просвечивал бы под новым. */
.hero--tr-circle .hero__slide,
.hero--tr-wipe .hero__slide,
.hero--tr-curtain .hero__slide {
  transition: none;
}

.hero--tr-circle .hero__slide:not(.is-active) .hero__content,
.hero--tr-wipe .hero__slide:not(.is-active) .hero__content,
.hero--tr-curtain .hero__slide:not(.is-active) .hero__content {
  opacity: 0;
}

.hero--tr-circle .hero__slide.is-leaving,
.hero--tr-wipe .hero__slide.is-leaving,
.hero--tr-curtain .hero__slide.is-leaving {
  opacity: 1;
}

.hero--tr-circle .hero__slide.is-active .hero__media {
  animation: heroRevealCircle var(--hero-dur) var(--hover-ease) both;
}

.hero--tr-wipe .hero__slide.is-active .hero__media {
  animation: heroRevealWipe var(--hero-dur) var(--hover-ease) both;
}

.hero--tr-wipe[data-dir="prev"] .hero__slide.is-active .hero__media {
  animation-name: heroRevealWipeBack;
}

.hero--tr-curtain .hero__slide.is-active .hero__media {
  animation: heroRevealCurtain var(--hero-dur) var(--hover-ease) both;
}

@keyframes heroRevealCircle {
  from {
    clip-path: circle(0% at 50% 50%);
  }

  to {
    clip-path: circle(135% at 50% 50%);
  }
}

/* Диагональный занавес: четыре точки, поэтому полигон плавно интерполируется */
@keyframes heroRevealWipe {
  from {
    clip-path: polygon(0 0, 0 0, -25% 100%, 0 100%);
  }

  to {
    clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
  }
}

@keyframes heroRevealWipeBack {
  from {
    clip-path: polygon(100% 0, 100% 0, 125% 100%, 100% 100%);
  }

  to {
    clip-path: polygon(-25% 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes heroRevealCurtain {
  from {
    clip-path: inset(50% 0 50% 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Сдвиг с параллаксом: новый кадр приезжает сбоку, уходящий уходит обратно */
.hero--tr-shift .hero__media {
  transform: translate3d(7%, 0, 0);
  transition: transform var(--hero-dur) var(--hover-ease);
}

.hero--tr-shift .hero__slide.is-active .hero__media {
  transform: translate3d(0, 0, 0);
}

.hero--tr-shift .hero__slide.is-leaving .hero__media {
  transform: translate3d(-5%, 0, 0);
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 2;
  padding: 0 16px;
  transform: translate3d(0, var(--hero-cy, 0px), 0);
}

/* Бейдж-плашка над заголовком */
.hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

.hero__title {
  font-family: var(--font-head);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.12;
  font-weight: 700;
  color: #fff;
  max-width: 1000px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

/* Слова заголовка: расставляет JS, каждому — своя задержка через --w.
   Скрытое состояние живёт только в кадре `from` (+ animation-fill-mode: both),
   поэтому при отключённом JS заголовок остаётся видимым. */
.hero__title-word {
  display: inline-block;
}

.hero__slide.is-active .hero__title-word {
  animation: heroWordIn .9s var(--hover-ease) both;
  animation-delay: calc(var(--w, 0) * 70ms + 150ms);
}

@keyframes heroWordIn {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}

.hero__subtitle {
  margin-top: 14px;
  font-size: clamp(16px, 2vw, 22px);
  max-width: 720px;
  opacity: .95;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

.hero__btn {
  margin-top: 28px;
}

.hero__slide.is-active .hero__badge,
.hero__slide.is-active .hero__subtitle,
.hero__slide.is-active .hero__btn {
  animation: heroRiseIn .7s var(--hover-ease) both;
}

.hero__slide.is-active .hero__badge {
  animation-delay: 120ms;
}

.hero__slide.is-active .hero__subtitle {
  animation-delay: 450ms;
}

.hero__slide.is-active .hero__btn {
  animation-delay: 600ms;
}

@keyframes heroRiseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Стрелки ──────────────────────────────────────────────── */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .65;
  transition: opacity var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
}

.hero:hover .hero__arrow,
.hero__arrow:focus-visible {
  opacity: 1;
}

.hero__arrow:hover {
  background: #fff;
  color: var(--c-dark);
  border-color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.hero__arrow--prev {
  left: 24px;
}

.hero__arrow--next {
  right: 24px;
}

/* ── Точки ────────────────────────────────────────────────── */
.hero__dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}

.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease), width var(--hover-dur) var(--hover-ease), border-radius var(--hover-dur) var(--hover-ease);
}

.hero__dot:hover {
  background: rgba(255, 255, 255, .8);
}

.hero__dot.is-active {
  width: 28px;
  border-radius: 6px;
  background: #fff;
}

/* ── Счётчик слайдов ──────────────────────────────────────── */
.hero__counter {
  position: absolute;
  left: 24px;
  bottom: 28px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.hero__counter-cur {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.hero__counter-sep {
  color: rgba(255, 255, 255, .5);
}

.hero__counter.is-tick .hero__counter-cur {
  animation: heroCountTick .45s var(--hover-ease);
}

@keyframes heroCountTick {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Линия прогресса автоплея ─────────────────────────────── */
.hero__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
  z-index: 5;
}

.hero__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--c-teal), var(--c-cyan));
}

/* Анимацию включает JS (is-playing) и ставит на паузу (is-paused),
   поэтому линия и таймер слайда идут синхронно. */
.hero.is-playing .hero__progress-fill {
  animation: heroProgress var(--hero-autoplay) linear forwards;
}

.hero.is-paused .hero__progress-fill {
  animation-play-state: paused;
}

@keyframes heroProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Анимация текста выключена настройкой: слова (если разметка их уже содержит)
   остаются видимыми и без движения. */
.hero--no-text-anim .hero__title-word {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

/* Один слайд: хром не рендерит PHP, но если шаблон его вывел — прячем */
.hero--single .hero__arrow,
.hero--single .hero__dots,
.hero--single .hero__counter,
.hero--single .hero__progress {
  display: none;
}

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Своя высота для телефонов и планшетов из настроек темы */
  .hero {
    height: var(--hero-h-m, 88svh);
    min-height: min(420px, var(--hero-h-m, 88svh));
  }

  .hero__arrow {
    display: none;
  }

  .hero__badge {
    margin-bottom: 14px;
    padding: 6px 13px;
    font-size: 12px;
  }

  .hero__counter {
    left: 16px;
    bottom: 26px;
  }

  .hero__counter-cur {
    font-size: 16px;
  }

  .hero__dots {
    bottom: 26px;
  }
}

/* Уменьшенная анимация: автоплей и прогресс выключает JS,
   линию убираем совсем, а кадр оставляем в натуральном масштабе. */
@media (prefers-reduced-motion: reduce) {
  .hero__progress {
    display: none;
  }

  .hero__img,
  .hero__slide.is-active .hero__img,
  .hero:not(.is-ready) .hero__slide.is-active .hero__img {
    transform: none;
  }
}

/* ============================================================
   СЕКЦИЯ «ТОП» (главная)
   ============================================================ */
.top-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 40px;
}

.top-title__highlight {
  color: var(--c-teal);
}

.top-title__rotating {
  color: #0e6e75;
  text-decoration: underline wavy var(--c-teal) 2px;
  text-underline-offset: 6px;
  display: inline-block;
  /* Слово печатается по буквам (initWordRotation): бокс свободный и растёт вслед
     за буквами, поэтому соседние слова подталкиваются, как на машинке, а зазоры
     вокруг остаются обычными пробелами. От прыжков по высоте заголовок защищает
     запас min-height, который считает JS. Переходов по ширине здесь быть не
     должно — они превратили бы печать в разъезжающийся блок. */
  white-space: nowrap;
}

/* Курсор машинки: виден только пока слово печатается или стирается. */
.top-title__rotating.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: .82em;
  margin: 0 2px 0 3px;
  background: currentColor;
  vertical-align: -.06em;
  animation: wordCaret 700ms steps(1, end) infinite;
}

@keyframes wordCaret {
  50% {
    opacity: 0;
  }
}

/* Сетка туров */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1024px) {
  .tours-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .tours-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   КАРТОЧКА ТУРА
   ============================================================ */
.tour-card {
  display: block;
}

.tour-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #0e6e75;
}

.tour-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur) var(--hover-ease);
}

.tour-card:hover .tour-card__media img {
  transform: scale(1.06);
}

/* Тёмный градиент снизу — подложка под заголовок и цену */
.tour-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 56px 16px 14px;
  background: linear-gradient(180deg, rgba(14, 42, 48, 0) 0%, rgba(14, 42, 48, 0.45) 45%, rgba(14, 42, 48, 0.92) 100%);
}

.tour-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17.5px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.tour-card:hover .tour-card__title {
  color: #fff;
  text-decoration-color: var(--c-teal);
}

.tour-card__price {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(14, 42, 48, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.tour-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #0e6e75, var(--c-teal));
  color: #fff;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

/* ============================================================
   HERO ТУРА (single)
   ============================================================ */
.tour-hero {
  position: relative;
  height: 92svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--c-dark) center / cover no-repeat;
}

.tour-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.tour-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
}

.tour-hero__title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  max-width: 900px;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.tour-hero__price-card {
  margin-top: 24px;
  background: #fff;
  border-radius: 18px;
  padding: 18px 28px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(14, 42, 48, .2);
}

.tour-hero__price {
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-teal);
}

.tour-hero__price-label {
  font-size: 13px;
  color: var(--c-muted);
}

.tour-hero__btn {
  margin-top: 18px;
}

/* ============================================================
   LAYOUT СТРАНИЦЫ ТУРА
   ============================================================ */
.tour-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  padding: 32px 0 64px;
}

.tour-content,
.tour-sidebar {
  min-width: 0;
}

.tour-sidebar {
  position: sticky;
  top: 86px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: #fff;
  border: 1px solid #eef2f2;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.sidebar-card__title {
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 6px;
}

.info-rows {
  display: flex;
  flex-direction: column;
}

.info-rows__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2f2;
  font-size: 15px;
}

.info-rows__row:last-child {
  border-bottom: 0;
}

.info-rows__icon {
  color: var(--c-teal);
  display: flex;
  align-items: center;
}

.info-rows__label {
  color: var(--c-muted);
  min-width: 130px;
}

.info-rows__value {
  color: var(--c-text);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .tour-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .tour-sidebar {
    position: static;
  }
}

/* ============================================================
   БЛОКИ КОНТЕНТА
   ============================================================ */
.block {
  margin: 44px 0;
  min-width: 0;
}

.block__title {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Типографика текстового блока */
.text-block p {
  margin: 14px 0;
}

/* Картинки, вставленные в текст (блок «Текст», описание категории, контент
   страницы), скругляются автоматически — как карточки и галереи. Без этого
   фото в тексте выглядит чужеродным прямоугольником. Галереи и фото-аккордеон
   скругляют себя сами, поэтому в списке только «сырые» контейнеры контента. */
.text-block img,
.cat-content img,
.container--narrow img {
  border-radius: var(--radius);
}

.text-block ul,
.text-block ol {
  padding-left: 22px;
  margin: 14px 0;
}

.text-block ul {
  list-style: disc;
}

.text-block ol {
  list-style: decimal;
}

.text-block li {
  margin: 6px 0;
}

.text-block ul li::marker {
  color: var(--c-teal);
}

.text-block h2 {
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 28px 0 12px;
}

.text-block h3 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 24px 0 10px;
}

.text-block a {
  color: var(--c-teal);
  text-decoration: underline;
  transition: color var(--hover-dur) var(--hover-ease);
}

.text-block a:hover {
  color: var(--c-teal-hover);
}

.text-block table {
  width: 100%;
}

.text-block td,
.text-block th {
  border: 1px solid var(--c-line);
  padding: 10px 14px;
}

.text-block th {
  background: #f6f9f9;
  font-weight: 600;
  text-align: left;
}

.table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--c-line);
  margin: 14px 0;
}

.table-wrap table {
  margin: 0;
  border: 0;
}

.table-wrap td,
.table-wrap th {
  border: 1px solid var(--c-line);
  padding: 10px 14px;
}

.table-wrap th {
  background: #f6f9f9;
  font-weight: 600;
  text-align: left;
}

/* Галерея-сетка */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gl-item {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

.gl-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur) var(--hover-ease);
}

.gl-item:hover img {
  transform: scale(1.06);
}

/* Галерея-карусель */
.gallery-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.gallery-carousel .gl-item {
  flex: 0 0 340px;
  scroll-snap-align: start;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--c-dark);
  box-shadow: 0 6px 20px rgba(14, 42, 48, .2);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
}

.gallery-nav:hover {
  color: var(--c-teal);
  transform: translateY(-50%) scale(1.06);
}

.gallery-nav--prev {
  left: 12px;
}

.gallery-nav--next {
  right: 12px;
}

/* Фото-аккордеон */
.photo-acc {
  display: flex;
  gap: 10px;
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
}

.photo-acc__item {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: flex 0.45s var(--hover-ease);
  cursor: pointer;
}

.photo-acc__item.is-active,
.photo-acc__item:hover {
  flex: 4;
}

.photo-acc__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-acc__caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gallery-carousel .gl-item {
    flex: 0 0 260px;
  }

  .photo-acc {
    height: 260px;
  }

  .photo-acc__caption {
    font-size: 12px;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }
}

/* Аккордеон */
.accordion {
  border: 1px solid #eef2f2;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.accordion__item + .accordion__item {
  border-top: 1px solid #f0f2f2;
}

.accordion__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  text-align: left;
  transition: color var(--hover-dur) var(--hover-ease);
}

.accordion__head:hover {
  color: var(--c-teal);
}

.accordion__chevron {
  transition: transform var(--hover-dur) var(--hover-ease);
  color: var(--c-teal);
  flex: none;
}

.accordion__item.is-open .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__body {
  display: none;
  padding: 0 22px 22px;
}

.accordion__item.is-open .accordion__body {
  display: block;
}

/* Карта */
.map-embed {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eef2f2;
}

.map-embed iframe {
  width: 100%;
  display: block;
  border: 0;
}

/* Блок «Видео с экскурсии» */
.video-block {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #08181d;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
}

.video-block video,
.video-block iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-block video {
  cursor: pointer;
}

.video-block:hover {
  box-shadow: 0 14px 36px rgba(14, 42, 48, 0.22);
}

.video-block {
  transition: box-shadow var(--hover-dur) var(--hover-ease);
}

@media (max-width: 640px) {
  .video-block {
    border-radius: 14px;
    aspect-ratio: auto;
    min-height: 0;
  }

  .video-block video,
  .video-block iframe {
    position: static;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* CTA-баннер */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 70px 30px;
  text-align: center;
  color: #fff;
  background: var(--c-dark) center center / cover no-repeat;
}

.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 48, .55);
  pointer-events: none;
}

/* Контент баннера — поверх затемнения, кликабелен */
.cta-banner > * {
  position: relative;
  z-index: 1;
}

.cta-banner__inner {
  position: relative;
  z-index: 2;
}

.cta-banner__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

/* Когда текста в баннере нет, кнопка идёт сразу за заголовком */
.cta-banner__title + .btn {
  margin-top: 24px;
}

.cta-banner__text {
  margin: 12px auto 24px;
  max-width: 560px;
  opacity: .92;
}

/* Блок кнопок */
.buttons-block {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   КАТЕГОРИЯ (архив)
   ============================================================ */
.cat-hero {
  position: relative;
  height: 46svh;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--c-dark) center center / cover no-repeat;
}

.cat-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.cat-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 0 34px;
  color: #fff;
  width: 100%;
}

.cat-hero__title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.cat-hero__subtitle {
  margin-top: 10px;
  font-size: 17px;
  opacity: .95;
}

.cat-content {
  min-width: 0;
  overflow-x: clip;
  margin-top: 8px;
}

/* Типографика описания категории — как text-block */
.cat-content p {
  margin: 14px 0;
}

.cat-content ul,
.cat-content ol {
  padding-left: 22px;
  margin: 14px 0;
}

.cat-content ul {
  list-style: disc;
}

.cat-content ol {
  list-style: decimal;
}

.cat-content li {
  margin: 6px 0;
}

.cat-content ul li::marker {
  color: var(--c-teal);
}

.cat-content h2 {
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 28px 0 12px;
}

.cat-content h3 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 24px 0 10px;
}

.cat-content a {
  color: var(--c-teal);
  text-decoration: underline;
  transition: color var(--hover-dur) var(--hover-ease);
}

.cat-content a:hover {
  color: var(--c-teal-hover);
}

.cat-content table {
  width: 100%;
}

.cat-content td,
.cat-content th {
  border: 1px solid var(--c-line);
  padding: 10px 14px;
}

.cat-content th {
  background: #f6f9f9;
  font-weight: 600;
  text-align: left;
}

/* ============================================================
   СТРАНЫ (лендинги за границу)
   ============================================================ */
.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.resort-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-dark);
  box-shadow: var(--shadow-card);
  transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}



.resort-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur) var(--hover-ease);
}

/* Тёмный градиент снизу — подложка под текст */
.resort-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 18px 18px;
  background: linear-gradient(180deg, rgba(14, 42, 48, 0) 0%, rgba(14, 42, 48, 0.55) 40%, rgba(14, 42, 48, 0.92) 100%);
  color: #fff;
}

.resort-card__name {
  margin: 0 0 6px;
  font: 600 19px/1.3 var(--font-head);
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.resort-card__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* Карточка без фото: сплошной тёмный фон */
.resort-card--noimg {
  aspect-ratio: auto;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
}

.resort-card--legacy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur) var(--hover-ease);
}

.resort-card:hover img {
  transform: scale(1.06);
}

.resort-card__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #00b3b0;
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
}

@media (max-width: 1024px) {
  .country-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .country-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ФОРМЫ И МОДАЛКИ
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 48, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .25s;
}

.modal__box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow: auto;
  animation: modalIn .3s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #f2f6f6;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
  font-size: 16px;
}

.modal__close:hover {
  background: #e5eded;
  color: var(--c-dark);
}

.modal__title {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.modal__subtitle {
  color: var(--c-muted);
  margin: 8px 0 20px;
  font-size: 14.5px;
}

/* Формы */
.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-text);
  background: #fff;
  transition: border-color var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

/* Поле телефона: флаг РФ слева, текст сдвинут, чтобы не наезжал на флаг */
.form__field--phone .form__input {
  padding-left: 54px;
}

.form__field-flag {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.form__field-flag .ds-icon {
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(14, 42, 48, .12);
}

/* Незаполненное обязательное поле: подсветка + тост с подсказкой
   (браузерные подсказки валидации отключены — см. initForms в main.js) */
.form__input.is-invalid,
.form__select.is-invalid,
.form__textarea.is-invalid {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}

.form__consent-input.is-invalid + .form__consent-box {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 169, 165, .12);
}

.form__textarea {
  min-height: 100px;
  resize: vertical;
}

.form__btn {
  margin-top: 6px;
}

.form__policy {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}

.form__policy a {
  color: var(--c-teal);
  text-decoration: underline;
}

/* Чекбокс согласия на обработку ПД: стоит под кнопкой отправки.
   Нативный input скрыт, но остаётся фокусируемым; визуал — квадрат с галочкой. */
.form__consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-muted);
  cursor: pointer;
}

.form__consent-input {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form__consent-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--c-line);
  border-radius: 6px;
  background: #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.form__consent-box .ds-ui-icon {
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
}

.form__consent-input:checked + .form__consent-box {
  background: var(--c-teal);
  border-color: var(--c-teal);
}

.form__consent-input:checked + .form__consent-box .ds-ui-icon {
  opacity: 1;
  transform: scale(1);
}

.form__consent-input:focus-visible + .form__consent-box {
  box-shadow: 0 0 0 3px rgba(0, 169, 165, .18);
}

.form__consent:hover .form__consent-box {
  border-color: var(--c-teal);
}

.form__consent-text a {
  color: var(--c-teal);
  text-decoration: underline;
}

.form__label {
  font-size: 13px;
  color: var(--c-muted);
  margin-bottom: -6px;
}

/* Поле с иконкой (дата экскурсии) и календарь под ним */
.form__field {
  position: relative;
  width: 100%;
}

.form__field--date .form__input {
  padding-right: 46px;
  cursor: pointer;
}

.form__field-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  color: var(--c-teal);
  pointer-events: none;
}

.datepicker {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(14, 42, 48, .18);
}

.datepicker[hidden] {
  display: none;
}

.datepicker .bc__month {
  font-size: 14px;
}

.datepicker .bc__day {
  font-size: 13px;
  border-radius: 8px;
}

.form.is-loading .form__btn {
  pointer-events: none;
  opacity: .6;
}

/* ============================================================
   КОЛИЧЕСТВО ЧЕЛОВЕК — ПЛАШКИ
   Выпадающий список здесь не подходил: его панель раскрывалась внутри
   скроллящейся модалки и добавляла ей прокрутку. Плашки показывают все
   варианты сразу, поэтому раскрывать и прокручивать нечего.
   ============================================================ */
.people {
  min-width: 0; /* fieldset иначе тянется по min-content и ломает flex-колонку формы */
  margin: 0;
  padding: 0;
  border: 0;
}

.people__label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
}

.people__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.people__chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* Радио скрыто визуально, но остаётся в потоке фокуса: display:none убрал бы
   поле из клавиатурной навигации, а стрелки внутри группы перестали бы работать. */
.people__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.people__chip-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  line-height: 1.2;
  color: var(--c-text);
  transition: border-color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.people__chip:hover .people__chip-text {
  border-color: var(--c-teal);
  color: var(--c-teal);
}

.people__radio:checked + .people__chip-text {
  border-color: var(--c-teal);
  background: var(--c-teal);
  color: #fff;
}

.people__radio:focus-visible + .people__chip-text {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 169, 165, .12);
}

/* Девять вариантов-цифр (1–9) одинаковой ширины, «10 и более» — по тексту. */
.people__chip:nth-child(-n + 9) .people__chip-text {
  min-width: 50px;
}

/* Строка стоимости в форме заявки: подпись слева, сумма справа.
   Пустая строка скрыта атрибутом hidden и места не занимает. */
.form__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(0, 169, 165, .07);
}

.form__price-label {
  font-size: 14px;
  color: var(--c-muted);
}

.form__price-value {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-teal);
  text-align: right;
}

.form__price[hidden] {
  display: none;
}

/* Блок «цена за технику»: трансфер, количество снегоходов, места за инструктором
   и подсказка о вместимости. Раскрывается только у туров с ценой за снегоход или
   катер (кнопка с data-machine), поэтому в разметке скрыт. Скрывать в HTML
   безопасно: заявка уходит только через AJAX, без JS форма не отправляется. */
.machine {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.machine[hidden] {
  display: none;
}

/* Подсказка о вместимости: не мешает отправить заявку, только подсказывает,
   сколько техники нужно на выбранное количество человек. */
.machine__hint {
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 169, 165, .07);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text);
}

.machine__hint[hidden] {
  display: none;
}

/* Плашки внутри блока техники — только цифры и «Нет», поэтому их можно ужать.
   С общими min-width 50px и padding 16px шесть вариантов количества переносились
   на вторую строку и модалка вырастала ещё на 54px. Высота плашки не меняется:
   по ней и попадают пальцем. */
.machine .people__chip-text {
  padding: 11px 12px;
}

.machine .people__chip:nth-child(-n + 9) .people__chip-text {
  min-width: 40px;
}

/* ============================================================
   КАЛЕНДАРЬ БРОНИРОВАНИЯ
   ============================================================ */
.booking-calendar {
  user-select: none;
}

.bc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bc__month {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}

.bc__nav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: #fff;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}

.bc__nav:hover {
  border-color: var(--c-teal);
  color: var(--c-teal);
}

.bc__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.bc__days span {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 4px 0;
}

.bc__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.bc__day {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

.bc__day:hover:not(.is-off):not(.is-empty) {
  background: rgba(0, 169, 165, .12);
}

.bc__day.is-free {
  position: relative;
}

.bc__day.is-free::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-cyan);
}

.bc__day.is-off {
  color: #c3cccc;
  cursor: default;
}

.bc__day.is-selected {
  background: var(--c-teal);
  color: #fff;
  font-weight: 600;
}

.bc__day.is-today {
  border: 1.5px solid var(--c-teal);
}

.bc__day.is-empty {
  visibility: hidden;
}

.bc__legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

.bc__legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-cyan);
  margin-right: 6px;
}

/* ============================================================
   ТОСТЫ (уведомления)
   ============================================================ */
.toasts {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
}

.toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(14, 42, 48, .2);
  animation: toastIn .35s cubic-bezier(.2, .9, .3, 1.2);
  position: relative;
  overflow: hidden;
  border-left: 4px solid;
}

.toast--success {
  border-color: #00b3a0;
}

.toast--error {
  border-color: #e5484d;
}

.toast--warning {
  border-color: #f5a623;
}

.toast__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.toast--success .toast__icon {
  background: #00b3a0;
}

.toast--error .toast__icon {
  background: #e5484d;
}

.toast--warning .toast__icon {
  background: #f5a623;
}

.toast__text {
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.45;
  padding-top: 6px;
}

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: .25;
  animation: toastProgress 4.5s linear forwards;
}

.toast--success .toast__progress {
  background: #00b3a0;
}

.toast--error .toast__progress {
  background: #e5484d;
}

.toast--warning .toast__progress {
  background: #f5a623;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

.toast.is-hiding {
  animation: toastOut .3s forwards;
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

@media (max-width: 640px) {
  .toasts {
    left: 12px;
    right: 12px;
    top: 80px;
    max-width: none;
  }
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer {
  background: var(--c-footer);
  margin-top: 64px;
  padding: 44px 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.footer-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}

.footer-card__title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--c-dark);
}

.footer-card p,
.footer-card li {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
}

.footer-card a {
  color: var(--c-teal);
  transition: color var(--hover-dur) var(--hover-ease);
}

.footer-card a:hover {
  text-decoration: underline;
}

.footer-card ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* В пятиколоночном подвале карточка узкая, и пять иконок ложились «4 + 1» —
   одна висела во второй строке. Ограничиваем ширину блока так, чтобы в ряд
   вставало ровно три (3 × 44 + 2 × 12 = 156px, берём 160px с запасом на
   округление). Ниже 1200px подвал перестраивается в три колонки, карточка
   становится широкой — там ограничение не нужно и все пять идут одной строкой. */
@media (min-width: 1201px) {
  .footer .socials {
    max-width: 160px;
  }
}

.socials__link {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f4f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.socials__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14, 42, 48, .12);
  background: #fff;
}

.socials__link img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Буква-фолбэк: соцсеть без загруженной SVG-иконки */
.socials__letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-dark);
}

/* Пульсация при наведении — как на сайте-доноре (анимация Elementor «Pulse»):
   иконка покачивается 0,9–1,1, пока курсор на ней. Только соцсети подвала —
   у иконок в шапке своё наведение на стекле. */
@keyframes ds-social-pulse {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.footer .socials__link:hover,
.footer .socials__link:focus-visible,
.footer .socials__link:active {
  animation: ds-social-pulse 1s linear infinite;
}

.footer__awards {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.footer__awards img {
  height: 40px;
  width: auto;
  border-radius: 8px;
}

.footer__bottom {
  margin-top: 36px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer__copy {
  font-size: 14px;
  color: var(--c-muted);
}

.footer__company {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-teal);
}

.to-top {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #d7dedf;
  background: #fff;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
  flex: none;
}

.to-top:hover {
  color: var(--c-teal);
  border-color: var(--c-teal);
  transform: translateY(-2px);
}

@media (max-width: 1200px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   COOKIE-БАР И RTO-ПЛАШКА
   ============================================================ */
.cookie-bar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 520px;
  z-index: 150;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(14, 42, 48, .25);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: modalIn .4s;
}

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

.cookie-bar__text {
  font-size: 13.5px;
  color: #555;
  line-height: 1.5;
}

.cookie-bar__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cookie-bar__policy {
  font-size: 12.5px;
  color: var(--c-teal);
  text-decoration: underline;
}

/* Плавающая плашка «Реестр туроператоров».
   Стили 1:1 как на сайте-доноре (#ftRegistryBadge): стекло, монospace-пилюля РТО,
   въезд снизу и закрытие с запоминанием на неделю (логика в main.js). */
.ft-badge {
  position: fixed;
  bottom: 24px;
  left: 24px;
  /* 90 — выше контента, но НИЖЕ оверлеев темы: меню (99), шапки (100), модалки (200).
     У донора было 99999, но с таким значением плашка перекрывала мобильное меню
     и кнопку отправки в модалке. */
  z-index: 90;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  padding: 14px 18px 14px 14px;
  max-width: 340px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: ftBadgeSlideIn .6s cubic-bezier(.16, 1, .3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

.ft-badge[hidden] {
  display: none;
}

/* Пока в том же углу висит cookie-бар, плашку не показываем — иначе наложатся.
   Как только cookie приняли, плашка въезжает своей анимацией. */
.cookie-bar:not([hidden]) ~ .ft-badge {
  display: none;
}

@keyframes ftBadgeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ft-badge-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ft-badge-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.ft-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ft-badge-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.ft-badge-company {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.3;
}

.ft-badge-rto {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 5px;
  letter-spacing: .4px;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  width: fit-content;
}

.ft-badge-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.ft-badge-close:hover {
  background: #f3f4f6;
  color: #4b5563;
}

@media (max-width: 480px) {
  .ft-badge {
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 12px 14px 12px 12px;
  }

  .ft-badge-icon {
    width: 38px;
    height: 38px;
  }

  .ft-badge-title,
  .ft-badge-company {
    font-size: 12px;
  }

  .ft-badge-rto {
    font-size: 10px;
  }
}


/* ============================================================
   ПЛАВАЮЩИЙ ВИДЖЕТ СОЦСЕТЕЙ (SOC DOCK)
   «Стеклянная пилюля»: desktop/планшет — вертикальная колонна у правого
   края, телефоны (≤767px) — горизонтальная полоса у нижнего края.
   ВАЖНО: мобильные переопределения стоят НИЖЕ базовых правил той же
   специфичности — медиазапрос специфичность не повышает, правило выше
   базового мертво.
   ============================================================ */
.soc-dock {
  position: fixed;
  right: 14px;
  /* Ниже свисающих табов наград (высота шапки + ~124px) */
  top: calc(var(--header-h, 70px) + 150px);
  bottom: 24px;
  /* Пилюля обжимает контент и центрируется в отведённой полосе
     (top+bottom задают границы, margin — центр; transform занят анимацией) */
  height: fit-content;
  margin: auto 0;
  /* Уровень ft-badge: выше контента, ниже меню 99 / шапки 100 / модалок 200 */
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 10px 9px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--hover-ease), opacity .45s var(--hover-ease), visibility 0s linear 0s;
}

/* Появление по скроллу (initSocialDock в main.js): пока в кадре hero-баннер,
   виджет убран за край — пилюля вправо, мобильная полоса вниз. Класс is-armed
   ставит JS: без JS виджет остаётся видимым, скрытое состояние живёт только
   при работающем скрипте. Направление выезда задаётся по ширине ниже. */
.soc-dock.is-armed {
  visibility: hidden;
  opacity: 0;
  transition: transform .45s var(--hover-ease), opacity .45s var(--hover-ease), visibility 0s linear .45s;
}

.soc-dock.is-armed.is-visible {
  visibility: visible;
  opacity: 1;
  transition: transform .45s var(--hover-ease), opacity .45s var(--hover-ease), visibility 0s linear 0s;
}

@media (min-width: 768px) {
  .soc-dock.is-armed {
    transform: translateX(calc(100% + 20px));
  }

  .soc-dock.is-armed.is-visible {
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .soc-dock.is-armed {
    transform: translateY(calc(100% + 20px));
  }

  .soc-dock.is-armed.is-visible {
    transform: translateY(0);
  }
}

.soc-dock__link {
  position: relative;
  flex: none;
  width: var(--socdock-btn, 44px);
  height: var(--socdock-btn, 44px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14, 42, 48, .05);
  transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.soc-dock__link img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.soc-dock__letter {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-dark);
}

.soc-dock__link:hover,
.soc-dock__link:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 0 0 2px var(--c-teal), 0 10px 22px rgba(14, 42, 48, .16);
}

/* Кнопка звонка — только в мобильной полосе (показ в ≤767px ниже) */
.soc-dock__link--phone {
  display: none;
}

/* Подпись-тултип слева от кнопки: видна на hover и focus-visible.
   Задержка visibility при закрытии — проверенный паттерн темы,
   иначе фокус не встаёт. */
.soc-dock__label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(8px, -50%);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--c-dark);
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(14, 42, 48, .18);
  transition: opacity var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease), visibility 0s linear var(--hover-dur);
}

.soc-dock__link:hover .soc-dock__label,
.soc-dock__link:focus-visible .soc-dock__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

/* Телефон: полоса у нижнего края, появляется по скроллу выездом снизу */
@media (max-width: 767px) {
  .soc-dock {
    --socdock-btn: 42px;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
  }

  /* Скрытое состояние у полосы то же, что у пилюли (см. .soc-dock.is-armed
     выше), — гейт по скроллу работает и здесь, только выезд снизу. */

  /* Кнопка звонка: акцентная бирюзовая, первая в полосе */
  .soc-dock__link--phone {
    display: grid;
    background: var(--c-teal);
    color: #fff;
  }

  .soc-dock__link--phone svg {
    width: 22px;
    height: 22px;
  }

  .soc-dock__link--phone:hover,
  .soc-dock__link--phone:focus-visible {
    background: var(--c-teal-hover);
  }
}

@media (max-width: 400px) {
  .soc-dock {
    --socdock-btn: 40px;
    gap: 6px;
  }

  .soc-dock__link img {
    width: 22px;
    height: 22px;
  }

  .soc-dock__link--phone svg {
    width: 20px;
    height: 20px;
  }
}

/* Разведение с соседями снизу. Виджет идёт в DOM РАНЬШЕ cookie-bar и
   ft-badge (подключается сразу после </footer>), поэтому работают
   селекторы соседей. Высота дока на мобильном =
   42 (кнопка) + 16 (padding) + 2 (border) ≈ 60px. Диапазон — весь ≤767px:
   док уже полоса, а соседи без правила держат десктопные bottom 20/24px. */
@media (max-width: 767px) {
  /* Место над доком занимаем, только когда он реально показан. Пока виджет
     спрятан (первый экран, hero в кадре), соседи возвращаются на свои базовые
     отступы — иначе под ними остаётся пустая полоса высотой с док.
     :not(.is-armed) — случай без JS: скрытого состояния там нет, док виден. */
  /* cookie-bar над доком; в ≤640 его база 84px (запас над ft-badge), выше — 20px */
  .soc-dock:not(.is-armed) ~ .cookie-bar,
  .soc-dock.is-visible ~ .cookie-bar {
    bottom: calc(84px + 60px);
  }

  /* ft-badge над доком: в ≤480 он полоса во всю ширину (база 16px), выше — слева снизу (24px) */
  .soc-dock:not(.is-armed) ~ .ft-badge,
  .soc-dock.is-visible ~ .ft-badge {
    bottom: calc(16px + 60px + 12px);
  }

  /* Соседи съезжают вместе с доком, а не прыгают на 60px */
  .cookie-bar,
  .ft-badge {
    transition: bottom .45s var(--hover-ease);
  }
}


/* ============================================================
   ЛАЙТБОКС
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 20, 22, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  animation: fadeIn .25s;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background var(--hover-dur) var(--hover-ease);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, .3);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hover-dur) var(--hover-ease);
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, .3);
}

.lightbox__nav--prev {
  left: 20px;
}

.lightbox__nav--next {
  right: 20px;
}

.lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
}

/* ============================================================
   НОВОСТИ
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.news-card {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(14, 42, 48, .14);
}

.news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f4f4;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-dur) var(--hover-ease);
}

.news-card:hover .news-card__media img {
  transform: scale(1.06);
}

.news-card__body {
  padding: 18px 20px 22px;
}

.news-card__date {
  font-size: 12.5px;
  color: #999;
}

.news-card__title {
  margin-top: 8px;
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--c-text);
  transition: color var(--hover-dur) var(--hover-ease);
}

.news-card:hover .news-card__title {
  color: var(--c-teal);
}

@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* Пагинация */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-line);
  color: #555;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.page-numbers.current {
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: #fff;
}

.page-numbers:hover:not(.current) {
  border-color: var(--c-teal);
  color: var(--c-teal);
}

/* Hero новости (single) */
.single-news-hero {
  position: relative;
  height: 52svh;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--c-dark) center center / cover no-repeat;
}

.single-news-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.single-news-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 0 34px;
  color: #fff;
  width: 100%;
}

.single-news-hero__title {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.single-news-hero__date {
  margin-top: 10px;
  font-size: 14px;
  opacity: .9;
}

/* Контент статьи */
.article {
  max-width: 820px;
  margin: 0 auto;
}

.article p {
  margin: 14px 0;
}

.article ul,
.article ol {
  padding-left: 22px;
  margin: 14px 0;
}

.article ul {
  list-style: disc;
}

.article ol {
  list-style: decimal;
}

.article li {
  margin: 6px 0;
}

.article ul li::marker {
  color: var(--c-teal);
}

.article h2 {
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 28px 0 12px;
}

.article h3 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 24px 0 10px;
}

.article a {
  color: var(--c-teal);
  text-decoration: underline;
  transition: color var(--hover-dur) var(--hover-ease);
}

.article a:hover {
  color: var(--c-teal-hover);
}

.article img {
  border-radius: 16px;
  margin: 18px 0;
}

.article table {
  width: 100%;
}

.article td,
.article th {
  border: 1px solid var(--c-line);
  padding: 10px 14px;
}

.article th {
  background: #f6f9f9;
  font-weight: 600;
  text-align: left;
}

/* ============================================================
   СТРАНИЦА / ПОИСК / 404
   ============================================================ */
.page-hero {
  position: relative;
  height: 38svh;
  min-height: 260px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--c-dark) center center / cover no-repeat;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 0 34px;
  color: #fff;
  width: 100%;
}

.page-hero__title {
  font-family: var(--font-head);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

.search-form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}

.search-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-text);
  background: #fff;
  transition: border-color var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease);
}

.search-form input:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(0, 169, 165, .12);
}

/* Форма поиска: одна на страницу результатов поиска и на 404-ю. */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 460px;
}

/* Поле тянется, кнопка держит свою ширину: без этого .form__input с width:100%
   выталкивал кнопку на отдельную строку и она растягивалась во всю ширину. */
.search-form .form__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.search-form .btn {
  flex: none;
}

/* Общий блок «страницы нет»: используется страницей 404 и состоянием
   «заявка не найдена» на странице «Спасибо». Сверху запас под фиксированную
   шапку (70px) — тот же приём, что в page.php (там padding-top:100px). */
.notfound {
  text-align: center;
  padding: 110px 16px 72px;
}

.notfound__code {
  font-family: var(--font-head);
  font-size: 96px;
  line-height: 1;
  font-weight: 800;
  color: var(--c-teal);
}

.notfound__text {
  max-width: 560px;
  margin: 12px auto 26px;
  color: var(--c-muted);
}

.notfound .buttons-block {
  justify-content: center;
}

/* Направления и поиск: на 404 они важнее кнопок — уводят в каталог. */
.notfound .search-form {
  margin: 0 auto 22px;
}

.notfound__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}

.notfound__cat {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--c-text);
  transition: border-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease);
}

.notfound__cat:hover {
  border-color: var(--c-teal);
  background: rgba(0, 169, 165, .08);
  color: var(--c-teal);
}

/* ============================================================
   ОТЗЫВЫ (обёртка виджета)
   ============================================================ */
.sw-wrapper {
  margin: 24px 0;
}

.reviews-title {
  font-family: var(--font-head);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 8px;
}

/* ============================================================
   ПРОЧЕЕ
   ============================================================ */
/* Screen reader text (WordPress) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Выравнивание контента */
.alignwide {
  width: calc(100% + 120px);
  max-width: none;
  margin-left: -60px;
  margin-right: -60px;
}

.alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media (max-width: 760px) {
  .alignwide {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Типографика редактора — как text-block */
.entry-content p {
  margin: 14px 0;
}

.entry-content ul,
.entry-content ol {
  padding-left: 22px;
  margin: 14px 0;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin: 6px 0;
}

.entry-content ul li::marker {
  color: var(--c-teal);
}

.entry-content h2 {
  font-family: var(--font-head);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 28px 0 12px;
}

.entry-content h3 {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  margin: 24px 0 10px;
}

.entry-content a {
  color: var(--c-teal);
  text-decoration: underline;
  transition: color var(--hover-dur) var(--hover-ease);
}

.entry-content a:hover {
  color: var(--c-teal-hover);
}

.entry-content table {
  width: 100%;
}

.entry-content td,
.entry-content th {
  border: 1px solid var(--c-line);
  padding: 10px 14px;
}

.entry-content th {
  background: #f6f9f9;
  font-weight: 600;
  text-align: left;
}

/* Focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--c-teal);
  color: #fff;
}

/* Скроллбар */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cdd6d6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-teal);
}

html {
  scrollbar-width: thin;
  scrollbar-color: #cdd6d6 transparent;
}

/* Мобильные отступы секций */
@media (max-width: 760px) {
  .section {
    padding: 40px 0;
  }

  .section__title {
    font-size: 26px;
  }

  .block {
    margin: 32px 0;
  }

  .block__title {
    font-size: 22px;
  }
}

/* ============================================================
   СТРАНИЦА «СПАСИБО» (подтверждение заявки)
   ============================================================ */
/* Сверху запас под фиксированную шапку (70px) — тот же приём, что в page.php,
   где контейнеру без hero-картинки задан padding-top:100px. */
.thanks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
  padding: 110px 0 72px;
}

.thanks__head {
  text-align: center;
}

.thanks__head p {
  margin-top: 10px;
  color: var(--c-muted);
}

/* Знак успеха: круг с галочкой, «мягкость» даёт тень в тон бренда. */
.thanks__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--c-teal);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 169, 165, .3);
}

.thanks__mark .ds-ui-icon {
  width: 38px;
  height: 38px;
  stroke-width: 2.6;
}

/* Плашка о письме: визуальный язык .toast--success, но в потоке страницы. */
.thanks__note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border-left: 4px solid var(--c-teal);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.thanks__note-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-teal);
  color: #fff;
}

.thanks__note p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-muted);
}

/* «Что дальше»: подзаголовок мельче карточного, чтобы не спорить с h1. */
.thanks__next {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thanks__next-title {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.thanks__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.thanks__steps li + li {
  margin-top: 12px;
}

/* Ряд кнопок по центру колонки. */
.thanks .buttons-block,
.thanks__notfound .buttons-block {
  justify-content: center;
}

/* В блоке «Заявка не найдена» .notfound__code держит текстовую фразу, а не цифры
   404, поэтому кегль уменьшаем только внутри этого блока. */
.thanks__notfound .notfound__code {
  font-size: 36px;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .thanks {
    gap: 18px;
    padding: 100px 0 48px;
  }

  .thanks__mark {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 640px) {
  /* Две «пилюли» в узкой колонке рвутся по строкам — ставим их в столбик. */
  .thanks .buttons-block .btn,
  .thanks__notfound .buttons-block .btn {
    flex: 1 1 100%;
  }
}

/* Печать */
@media print {

  .header,
  .mnav,
  .hero__arrow,
  .hero__dots,
  .hero__counter,
  .hero__progress,
  .footer,
  .modal,
  .toasts,
  .cookie-bar,
  .ft-badge,
  .soc-dock,
  .lightbox,
  .to-top,
  .tour-sidebar,
  .pagination {
    display: none !important;
  }

  .hero,
  .tour-hero,
  .cat-hero,
  .page-hero,
  .single-news-hero {
    height: auto;
    min-height: 0;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* Уменьшенная анимация */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__slide.is-active .hero__img {
    animation: none;
  }
}

/* ============================================================
   === MOBILE REFINEMENTS (v2) ===
   ============================================================ */

/* Карта: базовая высота (обычный селектор перекрывает атрибут height) */
.map-embed iframe {
  width: 100%;
  height: 400px;
}

@media (max-width: 640px) {

  /* 1. Хлебные крошки — горизонтальный скролл (в т.ч. внутри .cat-hero) */
  .breadcrumbs {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

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

  /* 2. Форма поиска — колонка */
  .search-form {
    flex-direction: column;
  }

  .search-form input,
  .search-form .btn {
    width: 100%;
  }

  /* 3. Календарь бронирования — компактнее под 360px */
  .bc__month {
    font-size: 15px;
  }

  .bc__days,
  .bc__grid {
    gap: 3px;
  }

  .bc__day {
    font-size: 13px;
    border-radius: 8px;
  }

  /* 4. Карта */
  .map-embed iframe {
    height: 280px;
  }

  /* 5. Masonry-галерея: 2 колонки, мелкие ряды */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    grid-auto-rows: 140px !important;
  }

  .gallery-grid .gl-item {
    aspect-ratio: auto;
    height: 100%;
  }

  /* 7. Таблицы */
  .table-wrap {
    font-size: 13px;
  }

  .table-wrap td,
  .table-wrap th {
    padding: 8px 10px;
  }

  /* 8. Hero-заголовки: читаемый минимум, кнопки на всю ширину */
  .tour-hero__title {
    font-size: clamp(32px, 9vw, 44px);
  }

  .cat-hero__title {
    font-size: clamp(32px, 8.5vw, 40px);
  }

  .hero__btn,
  .tour-hero__btn {
    width: 100%;
    max-width: 320px;
  }

  /* 9. Карточка цены: не сжимаем padding, кнопка на всю ширину карточки.
        На узком экране контент hero прижат к нижней границе секции, иначе под
        карточкой остаётся полоса пустого фона, но вплотную не ставим — 24px
        снизу, столько же, сколько между заголовком и карточкой. */
  .tour-hero__content {
    justify-content: flex-end;
    padding-bottom: 24px;
  }

  .tour-hero__price-card {
    width: 100%;
    max-width: 320px;
    padding: 16px 22px;
  }

  /* Цена в карточке hero: на узком экране 30px спорят с кеглем заголовка,
     поэтому чуть уменьшаем — на десктопе пропорция остаётся прежней */
  .tour-hero__price {
    font-size: 26px;
  }

  /* 11. Формы: 16px, чтобы iOS не зумил при фокусе */
  .form__input,
  .form__select,
  .form__textarea,
  .search-form input {
    font-size: 16px;
  }

  /* 12. Футер: награды переносятся */
  .footer__awards {
    flex-wrap: wrap;
  }

  /* 13–14. Cookie-bar: края 12px + место над rto-badge */
  .cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 84px;
    padding: 16px;
    gap: 12px;
  }

  .cookie-bar__row {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-bar__row .btn {
    width: 100%;
  }

  /* 15. Сетки: компактные отступы */
  .tours-grid {
    gap: 18px;
  }

  .news-grid {
    gap: 16px;
  }

  /* 16. Секции: 32px */
  .section {
    padding: 32px 0;
  }

  /* 18. Лайтбокс: картинка крупнее, кнопки не перекрывают */
  .lightbox {
    padding: 12px;
  }

  .lightbox img {
    max-width: 96vw;
    max-height: 86vh;
  }

  .lightbox__close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .lightbox__nav--prev {
    left: 8px;
  }

  .lightbox__nav--next {
    right: 8px;
  }

  /* 19. Модалка */
  .modal__box {
    padding: 24px 18px;
  }

  /* 20. Тосты */
  .toasts {
    top: 76px;
  }
}

/* --- Мобильные доработки ≤480px --- */
@media (max-width: 480px) {

  .section {
    padding: 28px 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tours-grid {
    gap: 16px;
  }

  .footer-card {
    padding: 20px 16px;
  }

  .notfound__code {
    font-size: 64px;
  }

  .notfound__text {
    margin: 10px 0 24px;
  }
}
/* ============================================================
   TOUR HERO: единый блок в правой части — тёмное «стекло»
   Панель = бейдж категории + заголовок + цена + кнопка записи.
   Десктоп ≥1024px — панель прижата вправо и центрирована по
   вертикали, левая часть фото остаётся свободной; планшет —
   панель по центру; телефон — панель внизу hero на всю ширину.
   ============================================================ */

.tour-hero__panel {
  max-width: 460px;
  padding: 32px 34px 30px;
  border-radius: var(--radius-lg);
  background: rgba(14, 42, 48, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(4, 20, 24, 0.45);
  text-align: left;
}

/* Без поддержки backdrop-filter — плотнее фон, читаемость та же */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tour-hero__panel {
    background: rgba(14, 42, 48, 0.88);
  }
}

.tour-hero__badge {
  display: inline-block;
  padding: 7px 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(0, 169, 165, 0.22);
  border: 1px solid rgba(0, 169, 165, 0.5);
  color: #d9fffb;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
}

/* Заголовок в панели: белый, влево; лёгкая тень вместо тяжёлой —
   контраст обеспечивает само стекло */
.tour-hero__title {
  text-align: left;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Цена и кнопка: стекло теперь одно — на панели, карточка прозрачна */
.tour-hero__price-card {
  margin-top: 22px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.tour-hero__price {
  color: #ffffff;
  font-size: 34px;
}

.tour-hero__price-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.tour-hero__btn {
  margin-top: 18px;
  width: 100%;
}

/* --- Десктоп: панель у правого края, фото слева свободно --- */
@media (min-width: 1024px) {
  .tour-hero__content {
    align-items: flex-end;
    justify-content: center;
    padding-right: clamp(24px, 5vw, 72px);
  }

  .tour-hero__title {
    max-width: 100%;
    font-size: clamp(28px, 2.7vw, 40px);
  }
}

/* --- Планшет: панель по центру, чуть шире --- */
@media (min-width: 641px) and (max-width: 1023px) {
  .tour-hero__panel {
    max-width: 520px;
  }
}

/* --- Телефон: панель внизу hero на всю ширину --- */
@media (max-width: 640px) {
  .tour-hero__panel {
    max-width: 100%;
    padding: 20px 20px 18px;
    border-radius: var(--radius);
  }

  .tour-hero__title {
    font-size: clamp(28px, 7.5vw, 38px);
  }

  .tour-hero__price {
    font-size: 28px;
  }

  .tour-hero__price-card {
    margin-top: 16px;
    padding-top: 16px;
  }

  /* Кнопка на всю ширину панели (базовый мобильный блок капил её 320px) */
  .tour-hero__btn {
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   PHOTO-ACC на телефонах: вместо аккордеона — карусель со свайпом.
   Тап-раскрытие на узком экране оставляет кадр узкой полоской, поэтому
   на ≤640px кадры листаются почти на всю ширину (86% + подглядывание
   следующего). Горизонтальный жест обрабатывает main.js (по образцу
   hero-слайдера): touch-action: pan-y не даёт браузеру «съедать»
   горизонтальный свайп под нативное панорамирование и не мешает
   вертикальной прокрутке страницы.
   ============================================================ */
@media (max-width: 640px) {
  .photo-acc {
    height: 280px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .photo-acc::-webkit-scrollbar {
    display: none;
  }

  .photo-acc__item,
  .photo-acc__item.is-active {
    flex: 0 0 86%;
    width: 86%;
    transition: none;
    cursor: default;
  }
}