/* ==========================================================================
   Новорижские бани — главная страница
   Десктоп свёрстан по макету 1440 px: 1rem = 10px макета.
   На экранах 1025–1439 px вся композиция пропорционально масштабируется.
   ========================================================================== */

@font-face {
  font-family: "Behrens Antiqua";
  src: url("../assets/fonts/BehrensAntiqua.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Stolzl Book — единственное начертание семейства на сайте.
   Объявлено и для 400, и для 500, чтобы элементы с font-weight: 500
   тоже получали Book, а не синтезированный браузером полужирный.
   Файл переведён из .otf (CFF) в .ttf с теми же контурами: Windows-браузеры
   утолщают штрихи CFF-шрифтов на мелком кегле, и Book выглядел почти как Medium. */
@font-face {
  font-family: "Stolzl";
  src: url("../assets/fonts/Stolzl-Book.ttf") format("truetype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --beige: #D7CBB3;
  --beige-light: #E9E1C9;
  --green: #182C20;
  --glass: rgba(215, 203, 179, .2);
  --glass-hover: rgba(215, 203, 179, .34);
  --bg: #0b0d0a;
  --radius: 2rem;
  --footer-gap: 9.3rem;
  --serif: "Behrens Antiqua", serif;
  --sans: "Stolzl", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: min(10px, 100vw / 144);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--beige);
  font-family: var(--sans);
  font-size: 2rem;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, address { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 1px solid var(--beige); outline-offset: 4px; }

/* ---------- Фоновое видео (одно на всю страницу) ---------- */

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* lvh — высота экрана со спрятанной адресной строкой: при прокрутке на телефоне
     фон не меняет размер, и видео не «отъезжает» */
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  background: var(--bg) url("../assets/video/poster.jpg") center / cover no-repeat;
  pointer-events: none;
}
.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg__shade {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 6, .5);
}

.page {
  position: relative;
  z-index: 1;
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 4rem;
}

/* ---------- Общие элементы ---------- */

.h2 {
  font-family: var(--serif);
  font-size: 5.8rem;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Линия с точкой на конце */
.rule {
  position: relative;
  display: block;
  height: 1px;
  background: var(--beige);
  flex: 1 1 auto;
}
.rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--beige);
}
.rule--dot-start::after { left: 0; }
.rule--dot-end::after { right: 0; }

/* Заголовок с линиями по обе стороны, линии уходят к краям окна */
.heading-ruled {
  display: flex;
  align-items: center;
  gap: 9.3rem;
  margin: 0 calc(50% - 50vw);
}
.heading-ruled .h2 { flex: none; }

/* Заголовок слева и линия до правого края окна */
.heading-line {
  display: flex;
  align-items: center;
  gap: 7.2rem;
  margin-right: calc(50% - 50vw);
}
.heading-line .h2 { flex: none; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5.8rem;
  padding: 0 3rem;
  border-radius: 10rem;
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.btn--glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--beige);
}
.btn--glass:hover { background: var(--glass-hover); }
.btn--solid {
  background: var(--beige);
  color: var(--green);
}
.btn--sm {
  height: 4.6rem;
  font-size: 2rem;
  padding: 0 3rem;
}

/* Карточки с фотографией */
.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Мягкое локальное затемнение под текстом поверх фото.
   ::after идёт после <img> в разметке, поэтому лежит над фото, но под текстом. */
.card--info::after,
.card--tradition::after,
.card--mood::after,
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Текст на фото и видео: чуть плотнее базового интерлиньяжа */
.hero__text,
.card--info__text,
.card--tradition__body p,
.card--mood__body p,
.cabins__intro p,
.review p { line-height: 1.12; }

/* ---------- 1. Первый экран ---------- */

.hero {
  position: relative;
  height: 76.1rem;
}
/* Затемнение за заголовком и текстом первого экрана (текст справа — центр смещён вправо) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 38% at 62% 54%, rgba(6, 8, 6, .42) 0%, rgba(6, 8, 6, .2) 55%, rgba(6, 8, 6, 0) 100%);
}
.hero__logo {
  position: absolute;
  left: -0.1rem;
  top: 2.4rem;
  width: 5.7rem;
}
.hero__logo img { width: 100%; height: auto; }

.hero__hours {
  position: absolute;
  left: 50%;
  top: 4.1rem;
  transform: translateX(-50%);
  height: 4.7rem;
  padding: 0 1.8rem;
  display: flex;
  align-items: center;
  border: 1px solid var(--beige-light);
  border-radius: 10rem;
  white-space: nowrap;
}

.burger {
  position: absolute;
  right: 0.5rem;
  top: 4.1rem;
  width: 4.8rem;
  height: 4.8rem;
  transition: transform .3s ease;
}
.burger img { width: 100%; height: 100%; }
.burger:hover { transform: scale(1.06); }

.hero__content {
  position: absolute;
  left: 23.7rem;
  top: 32.6rem;
  width: 89.9rem;
}
.hero__kicker {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero__title { margin-top: 1.7rem; }
.hero__title img { width: 88.6rem; height: auto; }
.hero__text {
  margin: 1.1rem 0 0 auto;
  width: 50rem;
  text-align: right;
}

/* Вертикальная кнопка бронирования — закреплена у правого края экрана.
   right совпадает с правым краем контентной колонки (как в макете),
   а на экранах шире 1440 px колонка центрируется, и кнопка идёт за ней. */
.booking {
  position: fixed;
  z-index: 40;
  /* у правого края окна, а не колонки: так панель не закрывает стрелки и кнопки карточек */
  right: calc(1.6rem + env(safe-area-inset-right));
  top: 32.5rem;
  transition: opacity .3s ease, visibility .3s ease, top .45s ease;
  width: 5.8rem;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  border-radius: 10rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Прячем над футером, чтобы не закрывать телефоны и контакты */
.booking.is-hidden { opacity: 0; visibility: hidden; }
/* Низкие окна: не даём кнопке уйти за нижний край */
@media (min-width: 1025px) and (max-height: 720px) {
  .booking { top: auto; bottom: 2.4rem; }
}
.booking__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4rem 0 3.1rem;
  font-family: var(--serif);
  font-size: 3.3rem;
  line-height: 3.1rem;
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.booking__link:hover { opacity: .75; }
.booking__icon {
  display: block;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  transition: transform .3s ease;
}
.booking__icon img { width: 100%; height: 100%; }

/* Кнопка меню — всегда на экране. В начале страницы она стоит наверху
   (там же, где бургер первого экрана главной); при прокрутке плавно съезжает
   вниз и присоединяется к верху панели, панель при этом растёт вверх.
   Свёрнута отрицательным отступом, поэтому «Бронь» и иконки не сдвигаются. */
.booking {
  --menu-btn: 4.6rem;
  --menu-shift: calc(var(--menu-btn) + 0.6rem);
  --panel-top: 32.5rem;
}
.inner-page .booking { --panel-top: 24.1rem; }
.booking__menu-wrap {
  position: relative;
  flex: none;
  width: var(--menu-btn);
  height: var(--menu-btn);
  margin-bottom: calc(var(--menu-shift) * -1);
  /* --wrap-y считает js/main.js (кнопка у верхнего края экрана при любой раскладке);
     запасное значение — для десктопа, где панель закреплена сверху */
  transform: translateY(var(--wrap-y, calc(4.1rem - var(--panel-top) - 0.6rem)));
  transition: margin-bottom .45s ease, transform .45s ease;
}
.booking__menu-btn {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform .3s ease;
}
.booking__menu-btn img { width: 100%; height: 100%; }
.booking__menu-btn:hover { transform: scale(1.08); }
.booking.has-menu .booking__menu-wrap { margin-bottom: 0; transform: none; }
/* Десктоп: панель закреплена сверху — поднимаем её верх на высоту кнопки */
@media (min-width: 1025px) and (min-height: 721px) {
  .booking.has-menu { top: calc(var(--panel-top) - var(--menu-shift)); }
}
/* Бургер первого экрана главной заменён общей кнопкой меню */
.burger { display: none; }

/* Меню сайта — в стиле выпадающего списка «Основное меню» */
.booking__menu {
  position: absolute;
  top: 0;
  right: calc(100% + 1.8rem);
  min-width: 30rem;
  padding: 0.8rem;
  border-radius: 2.4rem;
  background: var(--beige);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-0.6rem);
  transition: opacity .25s ease, transform .25s ease;
}
.booking__menu[hidden] { display: none; }
/* Высоту ограничивает js/main.js по месту на экране; лишнее — прокрутка внутри,
   тонкий тёмно-зелёный ползунок вместо стандартной полосы */
.booking__menu {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}
.booking__menu::-webkit-scrollbar { width: 4px; }
.booking__menu::-webkit-scrollbar-track { background: transparent; margin: 1.6rem 0; }
.booking__menu::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }
.booking__menu.is-open { opacity: 1; transform: none; }
.booking__menu li + li { margin-top: 0.2rem; }
.booking__menu a {
  display: block;
  padding: 1.1rem 2rem;
  border-radius: 10rem;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green);
  transition: background-color .2s ease, color .2s ease;
}
.booking__menu a[href]:hover,
.booking__menu a[aria-current="page"] { background: var(--green); color: var(--beige); }
.booking__menu a[aria-disabled="true"] { opacity: .45; cursor: default; }
/* Если кнопка в нижней половине экрана, меню раскрывается вверх (класс ставит js/main.js) */
.booking__menu.is-up { top: auto; bottom: 0; }
.booking__icon:hover,
.footer__icon:hover { transform: scale(1.08); }


/* ---------- 2–4. Карточки «о нас» ---------- */

.card--info {
  height: 62.8rem;
}
.card--info .card__img { object-position: 50% 6.5%; }
/* текст слева сверху */
.card--info::after {
  background: radial-gradient(ellipse 62% 70% at 0% 0%, rgba(8, 10, 8, .55) 0%, rgba(8, 10, 8, .25) 50%, rgba(8, 10, 8, 0) 100%);
}
.card--info__text {
  position: absolute;
  left: 8rem;
  top: 4.3rem;
  width: 57.5rem;
}
.card--info__btn {
  position: absolute;
  right: 8rem;
  top: 4.5rem;
  width: 27rem;
}

.card--tradition {
  height: 67.2rem;
  margin-top: 5rem;
  display: flex;
  align-items: center;
}
.card--tradition__body {
  margin-left: 8rem;
  width: 58rem;
}
/* текст слева по центру */
.card--tradition::after {
  background: radial-gradient(ellipse 60% 75% at 0% 50%, rgba(8, 10, 8, .6) 0%, rgba(8, 10, 8, .28) 50%, rgba(8, 10, 8, 0) 100%);
}
.card--tradition__title {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 3rem;
  text-transform: uppercase;
}
.card--tradition__body p {
  margin-top: 1.5rem;
  width: 46rem;
}

.card--mood {
  height: 64.9rem;
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* текст по центру */
.card--mood::after {
  background: radial-gradient(ellipse 46% 44% at 50% 46%, rgba(8, 10, 8, .5) 0%, rgba(8, 10, 8, .22) 55%, rgba(8, 10, 8, 0) 100%);
}
.card--mood__body {
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--mood__logo { width: 7.7rem; height: auto; }
.card--mood__body p {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 3.6rem;
  text-transform: uppercase;
}

/* ---------- 5. Срубы ---------- */

.cabins { padding-top: 14.2rem; }

.cabins__intro {
  display: grid;
  grid-template-columns: 65.1rem 1fr;
  margin: 8.1rem 0 0 13rem;
}
.cabins__intro p {
  position: relative;
  max-width: 49rem;
}
.cabins__intro p + p { max-width: 44.6rem; }
.cabins__intro p::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: -1.2rem;
  width: 10.5rem;
  height: 1px;
  background: var(--beige);
}

.cabins__stage {
  position: relative;
  height: 83.3rem;
  margin-top: -3.9rem;
}
.cabins__art {
  position: absolute;
  left: -7.2rem;
  top: 0;
  width: 143.2rem;
  height: auto;
  max-width: none;
  pointer-events: none;
}
.cabins__list {
  position: absolute;
  inset: 72.2rem 0 auto 0;
}
.cabin-opt {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.9rem;
}
.cabin-opt:nth-child(1) { left: 7.8rem; }
.cabin-opt:nth-child(2) { left: 39.1rem; }
.cabin-opt:nth-child(3) { left: 70.4rem; }
.cabin-opt:nth-child(4) { left: 101.6rem; }
.cabin-opt .btn--solid {
  height: 4.6rem;
  font-size: 2rem;
  padding: 0 2.9rem;
}
.cabin-opt .btn--sm { width: 18rem; }

/* ---------- 6. Банное меню ---------- */

.services { padding-top: 14.5rem; }

.services__grid {
  display: grid;
  /* 780 | 562 в первом ряду и 562 | 780 в последнем */
  grid-template-columns: 56.2fr 20fr 56.2fr;
  grid-template-areas: "a a b" "w w w" "c d d";
  gap: 1.8rem;
  margin-top: 4.9rem;
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  height: 38.8rem;
  border-radius: var(--radius);
}
.services__grid .tile:nth-child(1) { grid-area: a; }
.services__grid .tile:nth-child(2) { grid-area: b; }
.services__grid .tile:nth-child(3) { grid-area: w; height: 43.7rem; }
.services__grid .tile:nth-child(4) { grid-area: c; }
.services__grid .tile:nth-child(5) { grid-area: d; }
.tile .card__img { transition: transform .8s ease; }
/* заголовок плитки слева сверху */
.tile::after {
  background: radial-gradient(ellipse 55% 60% at 0% 0%, rgba(8, 10, 8, .5) 0%, rgba(8, 10, 8, .2) 50%, rgba(8, 10, 8, 0) 100%);
}
.tile:hover .card__img { transform: scale(1.04); }

.tile__title {
  position: absolute;
  left: 4.4rem;
  top: 3.5rem;
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  text-transform: uppercase;
}
.tile__arrow {
  position: absolute;
  left: 4.4rem;
  bottom: 2.7rem;
  width: 14.6rem;
  height: 1.4rem;
  transition: width .4s ease;
}
.tile__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1px;
  top: 50%;
  height: 1px;
  background: var(--beige);
}
.tile__arrow::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 1px solid var(--beige);
  border-right: 1px solid var(--beige);
  transform: translateY(-50%) rotate(45deg);
}
.tile:hover .tile__arrow { width: 18rem; }

/* ---------- 7. Отзывы ---------- */

.reviews { padding-top: 13.9rem; }

.heading-line--reviews {
  align-items: flex-end;
  gap: 5.4rem;
}
.heading-line--reviews .h2 {
  position: relative;
  line-height: 6.4rem;
}
.heading-line--reviews .rule { margin-bottom: 1.8rem; }
.reviews__badge {
  position: absolute;
  left: 45.4rem;
  top: -2.8rem;
  width: 9rem;
  max-width: none; /* на планшете бейдж привязан к пустому якорю после первой строки */
  height: auto;
}

.card--reviews {
  height: 69.8rem;
  margin-top: 5.1rem;
}
.card--reviews__shade {
  position: absolute;
  left: 58.4rem;
  top: -6.4rem;
  width: 81.6rem;
  height: 82.7rem;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}
.card--reviews__btn {
  position: absolute;
  left: 4.4rem;
  top: 4.8rem;
  width: 30.8rem;
}
.card--reviews__list {
  position: absolute;
  left: 69.9rem;
  top: 4.7rem;
  width: 58.9rem;
  display: flex;
  flex-direction: column;
  gap: 4.7rem;
}
.review h3 {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 3.5rem;
  text-transform: uppercase;
}
.review p { margin-top: 1.2rem; }

/* ---------- 8. Контакты ---------- */

.contacts { padding-top: 7.9rem; }
.contacts .heading-ruled { gap: 13.5rem; }

.contacts__map {
  position: relative;
  display: block;
  margin: 5.2rem 8rem 0;
  height: 58.8rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass);
  isolation: isolate;
}
.contacts__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Прозрачная «заслонка»: пока карта не активирована, колесо и свайп
   прокручивают страницу, а не карту. Клик/тап включает управление картой. */
.contacts__map-guard {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2.4rem;
  cursor: pointer;
}
.contacts__map-guard span {
  padding: 1rem 2rem;
  border-radius: 10rem;
  background: rgba(8, 10, 8, .72);
  color: var(--beige);
  font-size: 1.6rem;
  line-height: 1.2;
  opacity: 0;
  transition: opacity .3s ease;
}
.contacts__map-guard:hover span,
.contacts__map-guard:focus-visible span,
.contacts__map-guard.is-hint span { opacity: 1; }
.contacts__map.is-active .contacts__map-guard { display: none; }

.contacts__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 4rem 8rem 0;
}
.contacts__address {
  margin-top: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
}
.contacts__btn { width: 27rem; }

/* ---------- 9. Футер ---------- */

.footer {
  /* Отступ от последнего блока контента до футера — единый для всех страниц */
  padding: var(--footer-gap) 0 5.4rem;
  font-size: 2.4rem;
  line-height: 1.4;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 6.4rem;
  margin-right: calc(50% - 50vw);
}
.footer__brand img { width: 34.5rem; height: auto; flex: none; }

.footer__cols {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
}
.footer__head {
  font-weight: 500;
  line-height: 3.3rem;
  margin-bottom: 4.5rem;
}
.footer__nav li { text-transform: uppercase; }
.footer__nav li + li { margin-top: 1.4rem; }
.footer__nav a,
.footer__contacts > a,
.footer__legal a { transition: opacity .3s ease; }
.footer__nav a:hover,
.footer__contacts > a:hover,
.footer__legal a:hover { opacity: .65; }

.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.footer__contacts > a { line-height: 3.3rem; }
.footer__contacts > a + a { margin-top: 1.2rem; }
.footer__social {
  display: flex;
  gap: 1.4rem;
  margin-top: 3.2rem;
}
.footer__icon {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  transition: transform .3s ease;
}
.footer__icon img { width: 100%; height: 100%; }
.footer__hours { margin-top: 3rem; }

.footer__bottom {
  margin-top: 2.8rem;
  font-size: 2rem;
  line-height: 2.3rem;
}
.footer__copy {
  display: flex;
  align-items: center;
  gap: 12.3rem;
  margin-right: calc(50% - 50vw);
}
.footer__copy span:first-child { flex: none; }
.footer__legal {
  display: grid;
  grid-template-columns: 41.3rem 45.3rem 1fr auto;
  align-items: end;
  margin-top: 2.5rem;
}

/* ---------- Меню-оверлей ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 8, .72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .35s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__list { text-align: center; }
.menu__list li + li { margin-top: 2.4rem; }
.menu__list a {
  font-family: var(--serif);
  font-size: 4.4rem;
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.menu__list a:hover { opacity: .65; }
.menu__close {
  position: absolute;
  top: 4.1rem;
  right: 3.5rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--beige);
}
.menu__close span {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 50%;
  height: 0.4rem;
  margin-top: -0.2rem;
  border-radius: 1rem;
  background: var(--green);
  transform: rotate(45deg);
}
.menu__close span + span { transform: rotate(-45deg); }

body.menu-open { overflow: hidden; }

/* ---------- Поп-ап сруба (макет попапы.pdf: окно 1204 × 771) ---------- */

/* Страница зафиксирована на месте, пока открыт поп-ап */
body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }

.cabin-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 2.4rem;
  /* окно целиком помещается по высоте (фото сжимаются); на совсем низких экранах
     прокручивается вся подложка, а не отдельный контейнер внутри окна */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.cabin-modal::-webkit-scrollbar { display: none; }
.cabin-modal[hidden] { display: none; }
.cabin-modal.is-open { opacity: 1; }
.cabin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 6, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cabin-modal__box {
  position: relative;
  flex: none;
  width: min(120.4rem, 100%);
  margin: auto 0;
  padding: 4.1rem 4.7rem 3.2rem;
  border-radius: var(--radius);
  background: var(--beige);
  color: var(--green);
}
.cabin-modal__close {
  position: absolute;
  top: 4rem;
  right: 3.8rem;
  width: 2.2rem;
  height: 2.2rem;
}
.cabin-modal__close::before,
.cabin-modal__close::after {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: 50%;
  height: 0.3rem;
  margin-top: -0.15rem;
  border-radius: 1rem;
  background: var(--green);
  transform: rotate(45deg);
}
.cabin-modal__close::after { transform: rotate(-45deg); }

.cabin-modal__top {
  display: grid;
  grid-template-columns: 52.7rem 1fr;
  gap: 1.7rem;
}
.cabin-modal__title {
  display: inline-flex;
  align-items: center;
  height: 5rem;
  padding: 0 3.2rem;
  border: 1px solid var(--green);
  border-radius: 10rem;
  font-family: var(--serif);
  font-size: 2rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.cabin-modal__days {
  display: flex;
  gap: 7.4rem;
  margin-top: 3.3rem;
}
.cabin-modal__days button {
  height: 4.6rem;
  padding: 0 3rem;
  border-radius: 10rem;
  font-family: var(--serif);
  font-size: 2rem;
  text-transform: uppercase;
  background: rgba(24, 44, 32, .2);
  color: var(--green);
  transition: background-color .3s ease, color .3s ease;
}
.cabin-modal__days button[aria-pressed="true"] { background: var(--green); color: var(--beige); }
.cabin-modal__days button[aria-pressed="false"]:hover { background: rgba(24, 44, 32, .32); }
.cabin-modal__rates {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem 7.2rem;
  margin: 3.9rem 0 0;
}
.cabin-modal__rates dt {
  display: inline-flex;
  align-items: center;
  height: 4.2rem;
  padding: 0 2rem;
  border: 1px solid var(--green);
  border-radius: 10rem;
  font-size: 2rem;
}
.cabin-modal__rates { min-height: 9.4rem; align-content: start; }
.cabin-modal__rates dd { margin: 0; font-family: var(--serif); font-size: 2.4rem; }
.cabin-modal__note { margin-top: 2.5rem; font-size: 1.4rem; line-height: 1.6rem; }
@media (min-width: 1025px) { .cabin-modal__note { white-space: nowrap; } }
.cabin-modal__info { display: flex; flex-direction: column; padding-top: 8.2rem; }
.cabin-modal__text { font-size: 2rem; line-height: 2.3rem; max-width: 58rem; }
.cabin-modal__text strong { font-weight: inherit; }
.cabin-modal__book {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  height: 5.8rem;
  margin-top: auto;
  padding: 0 1.8rem;
  border-radius: 10rem;
  background: rgba(24, 44, 32, .2);
  font-family: var(--serif);
  font-size: 2.8rem;
  text-transform: uppercase;
  transition: background-color .3s ease;
}
.cabin-modal__book:hover { background: rgba(24, 44, 32, .32); }
.cabin-modal__gallery {
  display: flex;
  gap: 1.8rem;
  margin-top: 2.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cabin-modal__gallery::-webkit-scrollbar { display: none; }
.cabin-modal__gallery img {
  flex: 0 0 calc(50% - 0.9rem);
  scroll-snap-align: start;
  width: 100%;
  /* 361 px по макету; на низких окнах фото ниже, чтобы окно помещалось целиком */
  height: clamp(16rem, calc(100vh - 47.6rem - 4.8rem), 36.1rem);
  object-fit: cover;
  border-radius: 14px;
}
.cabin-modal__arrows {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.2rem;
}
.cabin-modal__arrows button { font-size: 1.8rem; line-height: 1; color: var(--green); }
.cabin-modal__arrows button:disabled { cursor: default; }

@media (max-width: 1024px) {
  .cabin-modal__box { padding: 3.2rem 2.8rem 2.4rem; }
  .cabin-modal__top { grid-template-columns: 1fr; gap: 3rem; }
  .cabin-modal__info { padding-top: 0; }
  .cabin-modal__book { margin-top: 2.4rem; align-self: flex-start; }
  .cabin-modal__days { gap: 2rem; }
  .cabin-modal__close { top: 2.8rem; right: 2.6rem; }
}
@media (max-width: 767px) {
  .cabin-modal__gallery img { height: auto; aspect-ratio: 543 / 361; }
  .cabin-modal__title { font-size: 1.6rem; padding: 0 2rem; height: 4.2rem; }
  .cabin-modal__rates { gap: 1rem 3rem; }
  .cabin-modal__book { font-size: 2.2rem; height: 5rem; }
}

/* ==========================================================================
   Планшеты: 768–1024 px
   ========================================================================== */

@media (max-width: 1024px) {
  html { font-size: 10px; }
  body { font-size: 1.8rem; }

  .page { padding: 0 3.2rem; }
  .h2 { font-size: 4.6rem; white-space: normal; }

  /* Первый экран */
  .hero { height: auto; min-height: 100svh; padding: 13rem 0 6rem; display: flex; flex-direction: column; justify-content: center; }
  .hero__logo { left: 0; }
  .burger { right: 0; }
  .hero__content { position: static; width: auto; }
  .hero__kicker { font-size: 2.4rem; }
  .hero__title img { width: 100%; }
  /* ширины текста в em — пропорции строки как в макете (500 px при 20 px шрифта),
     поэтому переносы не «расползаются» при меньшем кегле */
  .hero__text { width: min(25em, 100%); padding-right: 1.6rem; box-sizing: content-box; max-width: calc(100% - 1.6rem); }
  /* Компактнее и ниже середины экрана, чтобы меньше заходить на текст */
  /* над закреплённой строкой категорий (её низ 2.4rem + высота 4.6rem + зазор 1.6rem), а не в ней */
  .booking { right: 0.4rem; top: auto; bottom: 8.6rem; width: 4.4rem; padding: 0.4rem; gap: 0.4rem; }
  .booking__link { padding: 1rem 0 1.8rem; font-size: 2.4rem; line-height: 2.4rem; }
  .booking__icon { width: 3.6rem; height: 3.6rem; }
  .booking { --menu-btn: 3.6rem; --menu-shift: calc(var(--menu-btn) + 0.4rem); }

  /* Карточки «о нас» */
  .card--info { height: auto; min-height: 56rem; padding: 4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
  .card--info__text, .card--info__btn { position: static; }
  .card--info__text { max-width: 28.75em; width: auto; }
  .card--info__btn { align-self: flex-start; }
  .card--tradition { height: auto; min-height: 56rem; margin-top: 3.2rem; }
  .card--tradition__body { margin: 4rem; width: auto; max-width: 58rem; }
  .card--tradition__body p { width: auto; max-width: 23em; }
  .card--mood { height: auto; min-height: 52rem; margin-top: 3.2rem; padding: 4rem; }
  .card--mood__body { margin: 0; }
  .card--mood__body br { display: none; }
  .card--mood__body p { max-width: 64rem; font-size: 2.6rem; line-height: 3.4rem; }

  /* Срубы */
  .cabins { padding-top: 11rem; }
  .heading-ruled { gap: 3.2rem; }
  .heading-ruled .rule { min-width: 4rem; }
  .heading-ruled .h2 { text-align: center; }
  .cabins__intro { grid-template-columns: 1fr 1fr; gap: 4rem; margin: 5.5rem 0 0; }
  .cabins__intro br { display: none; }
  .cabins__stage { height: auto; margin-top: 2rem; }
  .cabins__art { position: static; width: 100%; height: auto; margin-left: 0; }
  .cabins__list {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.4rem;
    /* нижняя четверть рисунка — прозрачный «воздух», как в макете кнопки заходят на него */
    margin-top: -14%;
  }
  .cabin-opt { position: static; align-items: stretch; gap: 1.2rem; }
  .cabin-opt .btn--solid { padding: 0 1.6rem; }
  .cabin-opt .btn--sm { width: auto; align-self: flex-end; min-width: 18rem; }

  /* Банное меню */
  .services { padding-top: 11rem; }
  .heading-line { gap: 3.2rem; }
  .heading-line .rule { min-width: 4rem; }
  .services__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "w w" "c d"; }
  .tile { height: 34rem; }
  .services__grid .tile:nth-child(3) { height: 38rem; }
  .tile__title { left: 3.2rem; top: 3rem; font-size: 2.4rem; right: 3.2rem; }
  .tile__arrow { left: 3.2rem; }

  /* Отзывы */
  .reviews { padding-top: 11rem; }
  .heading-line--reviews .h2 { line-height: 5.2rem; }
  .heading-line--reviews .rule { margin-bottom: 2.4rem; }
  .reviews__badge { left: auto; right: -7rem; top: -3.6rem; width: 7rem; }
  .card--reviews { height: auto; padding: 4rem; display: flex; flex-direction: column; gap: 4rem; }
  .card--reviews::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 9, .15) 0%, rgba(10, 12, 9, .78) 30%, rgba(10, 12, 9, .82) 100%); }
  .card--reviews__shade { display: none; }
  .card--reviews__btn { position: static; align-self: flex-start; width: auto; }
  .card--reviews__list { position: static; width: auto; margin-top: 20rem; gap: 3.6rem; }
  .review br { display: none; }

  /* Контакты */
  .contacts { padding-top: 9rem; }
  .contacts .heading-ruled { gap: 3.2rem; }
  .contacts__map { margin: 3.8rem 0 0; height: auto; aspect-ratio: 1200 / 588; }
  .contacts__row { margin: 3.2rem 0 0; gap: 2.4rem; }

  /* Футер */
  :root { --footer-gap: 9rem; }
  .footer { font-size: 2rem; }
  .footer__brand { gap: 3.2rem; }
  .footer__brand img { width: 30rem; }
  .footer__head { margin-bottom: 2.8rem; }
  .footer__nav li + li { margin-top: 0.8rem; }
  .footer__icon { width: 5.6rem; height: 5.6rem; }
  .footer__bottom { font-size: 1.6rem; }
  .footer__copy { gap: 3.2rem; }
  .footer__legal { grid-template-columns: 1fr auto auto auto; gap: 2.4rem; }
}

/* ==========================================================================
   Смартфоны: до 767 px (ориентир 320–430 px)
   ========================================================================== */

@media (max-width: 767px) {
  body { font-size: 1.6rem; line-height: 1.25; }
  .page { padding: 0 1.6rem; }
  .h2 { font-size: 3.4rem; line-height: 1.1; }
  :root { --radius: 1.6rem; }

  /* Первый экран */
  .hero { padding: 11rem 0 4rem; min-height: 100svh; }
  .hero__logo { top: 2rem; width: 4.4rem; }
  .hero__hours { top: 2.8rem; height: 3.8rem; padding: 0 1.4rem; font-size: 1.5rem; }
  .burger { top: 2.8rem; width: 4rem; height: 4rem; }
  .hero__kicker { font-size: 1.7rem; line-height: 1.3; }
  .hero__title { margin-top: 1rem; }
  .hero__text { margin-top: 1.6rem; font-size: 1.6rem; line-height: 1.18; padding-right: 0; max-width: 100%; }
  .hero::before { background: radial-gradient(ellipse 90% 40% at 55% 55%, rgba(6, 8, 6, .42) 0%, rgba(6, 8, 6, .2) 55%, rgba(6, 8, 6, 0) 100%); }
  .card--info__text,
  .card--tradition__body p,
  .card--mood__body p,
  .cabins__intro p,
  .review p { line-height: 1.18; }
  .booking { right: 0.3rem; bottom: calc(7rem + env(safe-area-inset-bottom)); width: 3.6rem; padding: 0.3rem; gap: 0.3rem; }
  .booking__link { padding: 0.8rem 0 1.2rem; font-size: 1.8rem; line-height: 1.9rem; }
  .booking__icon { width: 3rem; height: 3rem; }
  .booking { --menu-btn: 3rem; --menu-shift: calc(var(--menu-btn) + 0.3rem); }
  .booking__menu { min-width: 24rem; padding: 2rem 2.4rem; }
  .booking__menu a { font-size: 1.7rem; padding: 0.9rem 1.6rem; }
  /* на первом экране текст прижат вправо — освобождаем место под кнопку */
  .hero__content { padding-right: 2.6rem; }

  /* Карточки «о нас» */
  .card--info { min-height: 48rem; padding: 2.4rem 2rem; }
  /* на телефоне текст идёт сверху во всю ширину — затемняем верх карточки */
  .card--info::after { background: linear-gradient(180deg, rgba(8, 10, 8, .55) 0%, rgba(8, 10, 8, .25) 35%, rgba(8, 10, 8, 0) 60%); }
  .card--info__btn { width: 100%; height: 5rem; font-size: 2.4rem; }
  .card--tradition { min-height: 48rem; margin-top: 2rem; align-items: flex-start; }
  .card--tradition::after { background: linear-gradient(180deg, rgba(8, 10, 8, .6) 0%, rgba(8, 10, 8, .3) 40%, rgba(8, 10, 8, 0) 70%); }
  .card--mood::after { background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(8, 10, 8, .5) 0%, rgba(8, 10, 8, .2) 60%, rgba(8, 10, 8, 0) 100%); }
  .card--tradition__body { margin: 2.4rem 2rem; }
  .card--tradition__title { font-size: 2.2rem; line-height: 2.5rem; }
  .card--mood { min-height: 42rem; margin-top: 2rem; padding: 2.4rem 2rem; }
  .card--mood__logo { width: 6rem; }
  .card--mood__body p { font-size: 2rem; line-height: 2.6rem; }

  /* Срубы */
  .cabins { padding-top: 8rem; }
  .heading-ruled { gap: 1.6rem; }
  .heading-ruled .rule { min-width: 1.6rem; }
  .cabins .h2 { max-width: 26rem; }
  .cabins__intro { grid-template-columns: 1fr; gap: 3.6rem; margin-top: 4.4rem; }
  .cabins__art { width: calc(100% + 3.2rem); max-width: none; margin-left: -1.6rem; }
  .cabins__list { grid-template-columns: 1fr; gap: 2rem; margin-top: -12%; }
  .cabin-opt { flex-direction: row; align-items: center; gap: 1rem; }
  .cabin-opt .btn--solid { flex: 1 1 auto; font-size: 1.7rem; height: 4.4rem; }
  .cabin-opt .btn--sm { flex: none; min-width: 0; height: 4.4rem; font-size: 1.7rem; padding: 0 1.8rem; }

  /* Банное меню */
  .services { padding-top: 8rem; }
  .heading-line { gap: 1.6rem; }
  .services__grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "w" "c" "d"; gap: 1.2rem; margin-top: 2.8rem; }
  .tile, .services__grid .tile:nth-child(3) { height: 24rem; }
  .tile__title { left: 2rem; top: 2.2rem; font-size: 2.2rem; }
  .tile__arrow { left: 2rem; bottom: 2rem; width: 11rem; }
  .tile:hover .tile__arrow { width: 13rem; }

  /* Отзывы */
  .reviews { padding-top: 8rem; }
  .heading-line--reviews { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .heading-line--reviews .h2 { line-height: 3.8rem; padding-right: 6rem; }
  .heading-line--reviews .rule { width: 100%; margin-bottom: 0; flex: none; }
  .reviews__badge { right: 0; top: -3rem; width: 5.6rem; }
  .card--reviews { padding: 2rem; margin-top: 2.8rem; gap: 2.4rem; }
  .card--reviews__btn { height: 5rem; font-size: 2.2rem; padding: 0 2.4rem; }
  .card--reviews__list { margin-top: 14rem; gap: 3rem; }
  .review h3 { font-size: 2.2rem; line-height: 2.8rem; }
  .review p { margin-top: 0.8rem; }

  /* Контакты */
  .contacts { padding-top: 8rem; }
  .contacts .heading-ruled { gap: 1.6rem; }
  .contacts__map { aspect-ratio: 4 / 3; margin-top: 2.8rem; }
  .contacts__row { flex-direction: column; align-items: stretch; margin-top: 2.4rem; }
  .contacts__address { margin-top: 0; }
  .contacts__btn { width: 100%; height: 5rem; font-size: 2.4rem; }

  /* Футер */
  :root { --footer-gap: 8rem; }
  .footer { padding: var(--footer-gap) 0 4rem; font-size: 1.7rem; }
  .footer__brand { gap: 1.6rem; }
  .footer__brand img { width: 22rem; }
  .footer__cols { flex-direction: column; gap: 4rem; margin-top: 3.2rem; }
  .footer__contacts { align-items: flex-start; text-align: left; }
  .footer__head { margin-bottom: 1.6rem; line-height: 2.4rem; }
  .footer__contacts > a { line-height: 2.4rem; }
  .footer__contacts > a + a { margin-top: 0.8rem; }
  .footer__social { margin-top: 2rem; gap: 1.6rem; }
  .footer__icon { width: 5rem; height: 5rem; }
  .footer__hours { margin-top: 2rem; }
  .footer__bottom { margin-top: 4rem; font-size: 1.4rem; line-height: 1.8rem; }
  .footer__copy { gap: 1.6rem; }
  .footer__legal { grid-template-columns: auto auto; justify-content: space-between; gap: 1.6rem 2rem; margin-top: 2rem; }
  .footer__legal a { white-space: nowrap; }
  .footer__legal p { grid-column: 1 / -1; }
  .footer__legal a:last-child { justify-self: end; }
  .footer__legal a:nth-of-type(3) { grid-column: 2; }

  .menu__list a { font-size: 3.2rem; }
  .menu__close { top: 2.8rem; right: 1.6rem; width: 4rem; height: 4rem; }
}

/* Самые узкие телефоны (320–374 px): кнопки срубов в одну строку не помещаются */
@media (max-width: 374px) {
  .cabin-opt .btn--solid,
  .cabin-opt .btn--sm { font-size: 1.5rem; padding: 0 1.2rem; }
  .heading-line--reviews .h2 { font-size: 2.8rem; line-height: 3.2rem; }
  .cabins .h2 { max-width: 23rem; }
  .heading-line { gap: 1.2rem; }
  .footer__legal { gap: 1.6rem 1.2rem; }
  .footer__legal a { white-space: normal; }
}

/* ==========================================================================
   Общие компоненты (js/components.js) и внутренние страницы услуг.
   Десктоп — по макетам 1440 px (парения, бесконтактные, аромапрогревы).
   ========================================================================== */

/* Обёртки компонентов не влияют на вёрстку — работают только их потомки */
site-bg, site-booking, site-footer, category-nav { display: contents; }

.inner { padding-top: 4.3rem; }
/* Правый край контента — 1320 px макета: справа остаётся место под «Бронь» */
.inner__body { margin-right: 8rem; }
.inner-page .booking { top: 24.1rem; }

/* Стрелка «назад» — та же, что в плитках, только влево */
.back {
  position: relative;
  display: block;
  width: 5.2rem;
  height: 1.4rem;
  transition: transform .3s ease;
}
.back::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--beige);
}
.back::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-bottom: 1px solid var(--beige);
  border-left: 1px solid var(--beige);
  transform: translateY(-50%) rotate(45deg);
}
.back:hover { transform: translateX(-0.6rem); }

/* Заголовок страницы и то, что стоит с ним в одной строке */
/* Единые расстояния (внутренние страницы и меню категорий на главной) */
:root {
  --head-gap: 4.5rem;   /* заголовок ↔ переключатели в одной строке */
  --pill-gap: 2rem;     /* между пилюлями в любой группе */
  --stack-gap: 3.4rem;  /* переключатели ↔ фото ↔ навигация категорий; карточки ↔ навигация */
  --nav-gap: var(--stack-gap);
  --head-to-story: 5.1rem; /* заголовок ↔ фото, когда переключателей под заголовком нет */
  --story-h: 41.4rem;      /* высота блока «фото + описание» на всех детальных страницах */
}

.inner__head {
  display: flex;
  align-items: center;
  gap: var(--head-gap);
  margin-top: 1.8rem;
}
.inner__head .h2 { flex: none; }
.inner__title--2l { line-height: 1; white-space: normal; }
.inner__head--top { align-items: flex-start; }
.inner__head > .price,
.inner__head .meta { margin-left: auto; }
.inner__head--top > .price,
.inner__head--top .meta { margin-top: 1.4rem; }

/* Продолжительность и цена — одна группа справа от заголовка */
.meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: none;
}
.meta__time {
  height: 4.8rem;
  padding: 0 2.2rem;
  border: 1px solid var(--beige-light);
  font-family: var(--sans);
  font-size: 2rem;
  text-transform: none;
  pointer-events: none;
}

/* Пилюли-переключатели и навигация категорий */
.inner__switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
}
.inner__switch .btn,
.cat-nav .btn { padding: 0 2.6rem; }
.inner__switch--row { margin-top: var(--switch-gap, 6.2rem); }
.inner__switch--row.is-after-2l { margin-top: 5rem; }
a.btn[aria-disabled="true"] { cursor: default; }
a.btn--glass[aria-disabled="true"]:hover { background: var(--glass); }

/* Меню категорий: стоит после контента, а при прокрутке закреплено внизу экрана
   (sticky) — доступно всегда и садится на своё место перед футером */
.cat-nav {
  position: sticky;
  bottom: 2.4rem;
  z-index: 30;
  margin-top: var(--nav-gap);
  pointer-events: none; /* пустое место строки не перехватывает клики по контенту */
}
.cat-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
}
/* Десктоп: первая кнопка у левого края колонки, последняя — у правого */
@media (min-width: 1025px) {
  .cat-nav ul { flex-wrap: nowrap; justify-content: space-between; }
}
.cat-nav a { pointer-events: auto; }
/* Над светлой бежевой поверхностью — тёмно-зелёный текст (класс ставит js/main.js) */
.cat-nav .btn--glass.on-light { color: var(--green); background: rgba(233, 225, 201, .62); }
.cat-nav .btn--glass { box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, .25); }

/* Цена в светлой плашке */
.price {
  height: 4.8rem;
  padding: 0 3rem;
  font-size: 2.8rem;
  pointer-events: none;
}

/* Две карточки в ряд: 562 | 693 */
.inner-cards {
  display: grid;
  grid-template-columns: 56.2fr 69.3fr;
  gap: 2.5rem;
  margin-top: 6.4rem;
}
.inner-cards .tile { height: 38.8rem; }
.inner-cards .tile__title {
  left: 3rem;
  top: 3.1rem;
  max-width: 43rem;
  line-height: 1;
}
.inner-cards .tile__arrow { left: 3rem; bottom: 2.7rem; }
.inner-cards .price {
  position: absolute;
  right: 3rem;
  bottom: 2.4rem;
}
/* «Веники и полоки»: товары по 410 px в ряд, или 410 | 845 */
.inner-cards--three { grid-template-columns: repeat(3, 1fr); }
.inner-cards--narrow-wide { grid-template-columns: 41fr 84.5fr; }
.inner-cards--next { margin-top: 2.5rem; }
.inner-cards__text {
  grid-column: span 2;
  align-self: end;
  line-height: 2.3rem;
}
.inner-cards__text p + p { margin-top: 2.3rem; }
/* Карточка товара — не ссылка */
.tile--static { cursor: default; }
.tile--static:hover .card__img { transform: none; }
.price--left { right: auto; }
.inner-cards .price--left { left: 3rem; right: auto; }

/* Светлое фото под заголовком: плавное затемнение сверху вниз */
.tile--shade-top::after {
  background: linear-gradient(180deg, rgba(8, 10, 8, .6) 0%, rgba(8, 10, 8, .35) 22%, rgba(8, 10, 8, .1) 42%, rgba(8, 10, 8, 0) 58%);
}

/* Карточка раздела, который ещё не сделан: без эффектов наведения */
.tile[aria-disabled="true"] { cursor: default; }
.tile[aria-disabled="true"]:hover .card__img { transform: none; }
.tile[aria-disabled="true"]:hover .tile__arrow { width: 14.6rem; }

/* Большая карточка услуги с описанием поверх фото */
.story {
  /* единая высота большого блока описания для всех детальных страниц услуг;
     по самому длинному описанию (4 руки / Дуплет), короткие оставляют воздух снизу */
  height: var(--story-h);
  margin-top: var(--stack-gap);
}
.story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* текст слева сверху — мягко затемняем эту сторону */
  background: radial-gradient(ellipse 80% 95% at 0% 20%, rgba(8, 10, 8, .55) 0%, rgba(8, 10, 8, .28) 50%, rgba(8, 10, 8, 0) 100%);
}
.story--after-head { margin-top: var(--head-to-story); }
/* Светлое фото (кожа, белая простыня): затемнение плотнее, но только со стороны текста */
.story--shade::after {
  background:
    linear-gradient(90deg, rgba(8, 10, 8, .62) 0%, rgba(8, 10, 8, .45) 38%, rgba(8, 10, 8, .12) 68%, rgba(8, 10, 8, 0) 85%),
    radial-gradient(ellipse 80% 95% at 0% 20%, rgba(8, 10, 8, .3) 0%, rgba(8, 10, 8, 0) 100%);
}
.story__text {
  padding: 4.8rem 3.4rem 0;
  max-width: 100rem;
  line-height: 2.3rem;
}
.story__text p + p { margin-top: 2.3rem; }

/* Подзаголовок под крупным заголовком страницы услуги */
.inner__sub {
  margin-top: 0.9rem;
  font-size: 1.6rem;
  line-height: 1.8rem;
}
/* Переключатели между услугами (детальные страницы «Контактных») */
.inner__switch--service .btn { padding: 0 3rem; }

/* Каталог «Контактные»: 562 | 693, затем 693 | 562 и одна широкая карточка */
.inner-cards--rev { grid-template-columns: 69.3fr 56.2fr; margin-top: 2.5rem; }
.inner-cards--wide { grid-template-columns: 1fr; margin-top: 2.5rem; }
.catalog .tile__title { line-height: 1.1; max-width: calc(100% - 6rem); }
.tile__sub {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.8rem;
  text-transform: none;
}


@media (max-width: 1024px) {
  .inner__body { margin-right: 0; }
  .inner-page .booking { top: auto; }
  .inner__head { flex-wrap: wrap; gap: 2rem 3.2rem; }
  .inner__head .h2 { flex: 0 1 auto; }
  .inner__switch--row,
  .inner__switch--row.is-after-2l { margin-top: 3.6rem; }
  .inner-cards { margin-top: 4.8rem; }
  .inner-cards .tile { height: 34rem; }
  .inner-cards .tile__title { left: 3rem; top: 3rem; right: 3rem; font-size: 2.4rem; }
  .story { height: auto; min-height: var(--story-h); }
  .story__text { padding: 4rem 3.4rem; max-width: 68rem; }
  .story__text br { display: none; }
  .inner-cards__text br { display: none; }
  .inner-cards--three { grid-template-columns: 1fr 1fr; }
  .inner-cards__text { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .inner { padding-top: 3rem; }
  .inner__head { margin-top: 2rem; }
  .inner__title--2l { line-height: 1.05; }
  .inner__head--top > .price,
  .inner__head--top .meta { margin-top: 0.4rem; }
  .price { height: 4rem; padding: 0 2rem; font-size: 2.2rem; }
  :root { --pill-gap: 1rem; }
  .inner__switch .btn {
    height: auto;
    min-height: 4rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.6rem;
    white-space: normal;
    text-align: center;
  }
  .inner__switch--row,
  .inner__switch--row.is-after-2l { margin-top: 2.8rem; }
  :root { --pill-gap: 0.8rem; }
  /* на телефоне меню — одна строка с горизонтальной прокруткой */
  .cat-nav { bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  .cat-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
  .cat-nav ul::-webkit-scrollbar { display: none; }
  .cat-nav .btn { flex: none; }
  .cat-nav .btn { height: 4rem; padding: 0 1.6rem; font-size: 1.5rem; }
  .inner-cards { gap: 1.2rem; margin-top: 2.8rem; }
  .inner-cards--rev,
  .inner-cards--wide,
  .inner-cards--three,
  .inner-cards--narrow-wide { margin-top: 1.2rem; }
  .inner-cards .tile { height: 24rem; }
  .inner-cards .tile__title { left: 2rem; top: 2.2rem; right: 2rem; font-size: 2.2rem; }
  .inner-cards .tile__arrow { left: 2rem; bottom: 2.2rem; }
  .inner-cards .price { right: 2rem; bottom: 1.6rem; }
  .story { margin-top: 2.4rem; min-height: 0; }
  /* на телефоне текст идёт по всей карточке — затемнение плавно сверху вниз */
  .story::after { background: linear-gradient(180deg, rgba(8, 10, 8, .62) 0%, rgba(8, 10, 8, .5) 55%, rgba(8, 10, 8, .3) 100%); }
  .story__text { padding: 2.4rem 2rem 2.8rem; line-height: 1.18; }
  .story__text p + p { margin-top: 1.6rem; }
}

/* Сетка каталогов остаётся двухколоночной (как на десктопе, широкая карточка — на обе
   колонки), пока колонка не уже ~280 px; в одну колонку — только на узких телефонах */
@media (max-width: 599px) {
  .inner-cards,
  .inner-cards--rev,
  .inner-cards--wide,
  .inner-cards--three,
  .inner-cards--narrow-wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   «Меню» и «Дополнительные услуги» (макеты меню.pdf, Дополнительные услуги.pdf)
   ========================================================================== */

/* Светлая карточка с позициями: название — линия — цена */
.price-card {
  padding: 2.5rem 1.6rem 2.6rem 2.5rem;
  border-radius: var(--radius);
  background: var(--beige);
  color: var(--green);
}
.price-row {
  display: grid;
  grid-template-columns: auto 1fr 5.4rem;
  align-items: baseline;
  column-gap: 1rem;
}
.price-row + .price-row { margin-top: 1.7rem; }
.price-row__name { font-size: 1.8rem; line-height: 2.2rem; text-transform: uppercase; }
.price-row__line { align-self: center; height: 1px; margin-top: 0.6rem; background: rgba(24, 44, 32, .7); }
.price-row__price { font-size: 1.8rem; white-space: nowrap; }
.price-row__sub {
  grid-column: 1 / -1;
  font-size: 1rem;
  line-height: 1.3rem;
  opacity: .8;
}

/* Напитки: две колонки по 590 px */
.drinks {
  display: grid;
  grid-template-columns: 59rem 59rem;
  column-gap: 7rem;
  align-items: start;
  margin-top: 3.9rem;
}
.drinks__group + .drinks__group { margin-top: 2.5rem; }
.drinks__title {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1;
  text-transform: uppercase;
}
.drinks__group .price-card { margin-top: 3.1rem; }

/* Меню WHITE: заголовок, выпадающий список, стрелки, галерея листов */
.menu-white { margin-top: 9rem; }
.menu-white__head {
  display: flex;
  align-items: center;
  gap: var(--head-gap);
}
.menu-white__head .h2 { flex: none; }
.menu-white__arrows { display: flex; gap: 1rem; margin-left: auto; }
.round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--beige);
  font-size: 2rem;
  transition: background-color .3s ease, opacity .3s ease;
}
.round-btn:hover { background: var(--glass-hover); }
.round-btn:disabled { opacity: .35; cursor: default; }

.dropdown { position: relative; z-index: 20; }
.dropdown__btn { gap: 1.2rem; }
.dropdown__chevron {
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease, margin .3s ease;
}
.dropdown.is-open .dropdown__chevron { transform: rotate(-135deg); margin-top: 0.4rem; }
.dropdown__list {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  min-width: 100%;
  padding: 0.8rem;
  border-radius: 2.4rem;
  background: var(--beige);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-0.6rem);
  transition: opacity .25s ease, transform .25s ease;
}
.dropdown__list[hidden] { display: none; }
.dropdown.is-open .dropdown__list { opacity: 1; transform: none; }
.dropdown__list {
  max-height: 36rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* тонкая фирменная полоса прокрутки вместо стандартной */
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}
.dropdown__list::-webkit-scrollbar { width: 4px; }
.dropdown__list::-webkit-scrollbar-track { background: transparent; margin: 1.6rem 0; }
.dropdown__list::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }
.dropdown__list::-webkit-scrollbar-button { display: none; height: 0; }
.dropdown__list a,
.dropdown__list button {
  display: block;
  width: 100%;
  padding: 1.1rem 2rem;
  border-radius: 10rem;
  font-family: var(--serif);
  font-size: 2rem;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green);
  transition: background-color .2s ease;
}
.dropdown__list a:hover,
.dropdown__list button:hover { background: rgba(24, 44, 32, .1); }
.dropdown__list a[aria-current="page"],
.dropdown__list button[aria-selected="true"] { background: var(--green); color: var(--beige); }
.dropdown__list li + li { margin-top: 0.2rem; }

/* Галерея листов: выходит за правый край колонки до края окна */
.sheets {
  display: flex;
  gap: 3rem;
  margin-top: 4.4rem;
  margin-right: calc(-12rem - max(0px, (100vw - 144rem) / 2));
  padding-right: 4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.sheets::-webkit-scrollbar { display: none; }
.sheets.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.sheets[hidden] { display: none; }
.sheet {
  flex: none;
  width: 59.5rem;
  scroll-snap-align: start;
  border-radius: 22px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .4s ease;
}
.sheet img { width: 100%; height: auto; aspect-ratio: 760 / 1235; border-radius: 22px; pointer-events: none; user-select: none; }
.sheet:hover { transform: translateY(-0.4rem); }
.sheets--empty {
  align-items: center;
  justify-content: center;
  height: 24rem;
  margin-right: 0;
  padding: 0;
  border: 1px dashed rgba(215, 203, 179, .4);
  border-radius: var(--radius);
  cursor: default;
  font-size: 2rem;
}

/* Полноэкранный просмотр листа */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 8, 6, .92);
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  position: absolute;
  inset: 2.4rem 9rem 9rem;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__stage img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  border-radius: 1.2rem;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__close {
  position: absolute;
  top: 2.4rem;
  right: 2.4rem;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--beige);
}
.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 50%;
  height: 0.3rem;
  margin-top: -0.15rem;
  border-radius: 1rem;
  background: var(--green);
  transform: rotate(45deg);
}
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__nav { position: absolute; top: 50%; margin-top: -2.3rem; }
.lightbox__nav--prev { left: 2.4rem; }
.lightbox__nav--next { right: 2.4rem; }
.lightbox__bar {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  transform: translateX(-50%);
  font-size: 1.8rem;
}

/* Дополнительные услуги: список 580 | карточка чана 684 */
.inner-cards--extras { grid-template-columns: 58fr 68.4fr; gap: 1.6rem; margin-top: 4.4rem; }
.inner-cards--extras .tile { height: 31.8rem; }
.price-card--extras { padding: 4.1rem 2.5rem 2.6rem; }
.price-row--col { grid-template-columns: auto 1fr auto; }
.price-row--col .price-row__price { justify-self: end; }
.price-row--col + .price-row--col { margin-top: 3.5rem; }
.inner__sub--lg { font-size: 2rem; line-height: 2.3rem; margin-top: 0.9rem; }

@media (max-width: 1024px) {
  .drinks { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
  .sheets { margin-right: -3.2rem; }
  .sheet { width: 42rem; }
  .menu-white { margin-top: 7rem; }
  .menu-white__head { flex-wrap: wrap; gap: 2rem; }
  .lightbox__stage { inset: 8rem 1.6rem 9rem; }
  .lightbox__nav { top: auto; bottom: 2.4rem; margin-top: 0; }
}
@media (max-width: 767px) {
  .drinks { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .price-row__name, .price-row__price { font-size: 1.5rem; }
  .sheets { margin-right: -1.6rem; gap: 1.2rem; }
  .sheet { width: 80vw; }
  .menu-white__arrows { display: none; }
  .inner-cards--extras { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Мобильная система (до 767 px): единая типографика, кнопки, поля 20 px.
   Стоит последней — перекрывает разрозненные мобильные значения выше.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --m-gutter: 2rem;          /* боковые поля 20 px */
    --m-h1: 2.6rem;            /* заголовки страниц и разделов */
    --m-h3: 1.7rem;            /* заголовки карточек */
    --m-text: 1.4rem;          /* основной текст */
    --m-small: 1.2rem;
    --m-lh: 1.32;
  }
  body { font-size: var(--m-text); line-height: var(--m-lh); }
  .page { padding: 0 var(--m-gutter); }
  .h2 { font-size: var(--m-h1); line-height: 1.08; }
  .inner__title--2l { line-height: 1.08; }
  /* справа вверху — кнопка меню: заголовок её не подлезает */
  .inner__head .h2 { padding-right: 4.4rem; }
  .inner__sub, .inner__sub--lg { font-size: var(--m-small); line-height: 1.3; margin-top: 0.6rem; }

  /* Кнопки: компактнее, но не меньше ~36 px по высоте */
  .btn { height: 4rem; padding: 0 2rem; font-size: 1.6rem; }
  .btn--sm,
  .inner__switch .btn,
  .cat-nav .btn,
  .dropdown__btn { height: 3.6rem; min-height: 0; padding: 0 1.6rem; font-size: 1.4rem; }
  .price { height: 3.6rem; padding: 0 1.6rem; font-size: 1.7rem; }
  .meta { gap: 0.8rem; }
  .meta__time { height: 3.6rem; padding: 0 1.4rem; font-size: 1.3rem; }
  .dropdown__list a, .dropdown__list button { padding: 0.9rem 1.6rem; font-size: 1.5rem; }
  .card--info__btn, .contacts__btn { height: 4.4rem; font-size: 1.8rem; }
  .card--reviews__btn { height: 4rem; padding: 0 2rem; font-size: 1.6rem; }
  .cabin-opt .btn--solid,
  .cabin-opt .btn--sm { height: 4rem; font-size: 1.5rem; padding: 0 1.4rem; }

  /* Первый экран: всё по центру */
  .hero { padding: 9rem 0 5rem; }
  .hero__logo { position: static; align-self: center; width: 4.6rem; margin-bottom: 2.4rem; }
  .hero__hours { left: 0; transform: none; top: 2.8rem; height: 3.6rem; padding: 0 1.4rem; font-size: 1.3rem; }
  .hero__content { padding-right: 0; text-align: center; }
  .hero__kicker { font-size: 1.3rem; line-height: 1.3; }
  .hero__title { margin-top: 0.8rem; }
  .hero__title img { width: 100%; max-width: 36rem; margin: 0 auto; }
  .hero__text { width: auto; max-width: 30rem; margin: 2rem auto 0; font-size: var(--m-text); line-height: var(--m-lh); text-align: center; }
  .hero::before { background: radial-gradient(ellipse 95% 45% at 50% 52%, rgba(6, 8, 6, .5) 0%, rgba(6, 8, 6, .22) 55%, rgba(6, 8, 6, 0) 100%); }

  /* Карточки с текстом на фото */
  .card--info { min-height: 44rem; padding: 2.4rem 2rem; }
  .card--info__text,
  .card--tradition__body p,
  .card--mood__body p,
  .cabins__intro p,
  .review p,
  .story__text { line-height: var(--m-lh); }
  /* текст сверху, кнопка «маршрут» снизу — затемняем обе зоны */
  .card--info::after { background: linear-gradient(180deg, rgba(8, 10, 8, .62) 0%, rgba(8, 10, 8, .28) 32%, rgba(8, 10, 8, 0) 55%, rgba(8, 10, 8, 0) 62%, rgba(8, 10, 8, .62) 100%); }
  .card--tradition { min-height: 44rem; }
  .card--tradition::after { background: linear-gradient(180deg, rgba(8, 10, 8, .78) 0%, rgba(8, 10, 8, .55) 38%, rgba(8, 10, 8, .15) 68%, rgba(8, 10, 8, 0) 85%); }
  .card--tradition__title { font-size: var(--m-h3); line-height: 1.2; }
  .card--tradition__body p { margin-top: 1rem; }
  .card--mood { min-height: 38rem; }
  .card--mood::after { background: radial-gradient(ellipse 95% 55% at 50% 50%, rgba(8, 10, 8, .66) 0%, rgba(8, 10, 8, .3) 60%, rgba(8, 10, 8, 0) 100%); }
  .card--mood__logo { width: 5rem; }
  .card--mood__body p { font-size: 1.6rem; line-height: 1.3; }

  /* Срубы: картинка во всю ширину экрана при полях 20 px */
  .cabins__art { width: calc(100% + 2 * var(--m-gutter)); margin-left: calc(var(--m-gutter) * -1); }
  .cabins__intro { gap: 2.4rem; }

  /* Карточки услуг */
  .tile__title,
  .inner-cards .tile__title { font-size: var(--m-h3); line-height: 1.15; }
  .tile__sub { font-size: var(--m-small); line-height: 1.3; }
  .review h3 { font-size: var(--m-h3); line-height: 1.25; }
  .heading-line--reviews .h2 { font-size: var(--m-h1); line-height: 1.1; }
  .story__text { font-size: var(--m-text); }
  .story__text p + p { margin-top: 1rem; }

  /* Меню и доп. услуги */
  .drinks__title { font-size: 2rem; }
  .drinks__group .price-card { margin-top: 1.6rem; }
  .price-card { padding: 1.8rem 1.6rem; }
  .price-row__name, .price-row__price { font-size: 1.3rem; line-height: 1.7rem; }
  .price-row + .price-row { margin-top: 1.4rem; }
  .price-row--col + .price-row--col { margin-top: 2rem; }
  .sheets { margin-right: calc(var(--m-gutter) * -1); }
  .menu-white { margin-top: 5rem; }

  /* Футер */
  .footer { font-size: 1.5rem; }
  .footer__bottom { font-size: var(--m-small); line-height: 1.5; }

  /* Панель «Бронь» чуть отодвинута от края */
  .booking { right: 0.6rem; }

  /* Поп-ап сруба: поля 20 px, компактная типографика, одна фотография в ленте */
  .cabin-modal { padding: calc(2rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left)); }
  .cabin-modal__box { width: 100%; max-width: calc(100vw - 4rem); padding: 2rem 1.8rem 1.8rem; }
  .cabin-modal__close { top: 2.2rem; right: 1.8rem; width: 1.8rem; height: 1.8rem; }
  .cabin-modal__title { height: 3.4rem; padding: 0 1.6rem; font-size: 1.4rem; }
  .cabin-modal__top { gap: 2rem; }
  .cabin-modal__days { gap: 1rem; margin-top: 2rem; }
  .cabin-modal__days button { height: 3.6rem; padding: 0 1.8rem; font-size: 1.4rem; }
  .cabin-modal__rates { gap: 0.8rem 2.4rem; margin-top: 2rem; min-height: 7.2rem; }
  .cabin-modal__rates dt { height: 3.2rem; padding: 0 1.4rem; font-size: 1.4rem; }
  .cabin-modal__rates dd { font-size: 1.8rem; }
  .cabin-modal__note { margin-top: 1.6rem; font-size: 1.1rem; line-height: 1.4rem; }
  .cabin-modal__text { font-size: var(--m-text); line-height: var(--m-lh); }
  .cabin-modal__book { height: 4rem; margin-top: 1.6rem; padding: 0 1.8rem; font-size: 1.6rem; }
  .cabin-modal__gallery { gap: 1rem; margin-top: 2rem; }
  .cabin-modal__gallery img { flex-basis: 100%; height: auto; aspect-ratio: 543 / 361; }
  .cabin-modal__arrows { gap: 2.4rem; margin-top: 0.4rem; }
  .cabin-modal__arrows button { min-width: 4.4rem; min-height: 4.4rem; font-size: 2rem; }
}

@media (max-width: 374px) {
  .cabin-opt { gap: 0.8rem; }
  .cabin-opt .btn--solid,
  .cabin-opt .btn--sm { font-size: 1.3rem; padding: 0 1.1rem; }
}

/* ---------- Переключатель срубов в поп-апе (общий выпадающий список) ---------- */
.cabin-modal__pick { align-self: flex-start; }
.cabin-modal__title.dropdown__btn { gap: 1.2rem; background: transparent; color: var(--green); cursor: pointer; }
.cabin-modal__title.dropdown__btn:hover { background: rgba(24, 44, 32, .08); }
.cabin-modal__pick .dropdown__list { min-width: 100%; border: 1px solid rgba(24, 44, 32, .15); }

/* ---------- Меню сайта на телефоне — на весь экран ---------- */
.booking__menu-close { display: none; }
.booking__menu.is-full {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: calc(8rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right))
           calc(2.4rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left));
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: none;
}
.booking__menu.is-full li + li { margin-top: 0.4rem; }
.booking__menu.is-full a { padding: 1.2rem 1.8rem; font-size: 2rem; white-space: normal; }
.booking__menu.is-full .booking__menu-close {
  display: block;
  position: absolute;
  top: calc(2rem + env(safe-area-inset-top));
  right: calc(2rem + env(safe-area-inset-right));
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--green);
}
.booking__menu-close::before,
.booking__menu-close::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  top: 50%;
  height: 0.2rem;
  margin-top: -0.1rem;
  border-radius: 1rem;
  background: var(--beige);
  transform: rotate(45deg);
}
.booking__menu-close::after { transform: rotate(-45deg); }

@media (max-width: 767px) {
  /* Внутренние страницы: стрелка ниже, на одной линии с кнопкой меню */
  .inner { padding-top: calc(3.9rem + env(safe-area-inset-top)); }
  /* Заголовок слева, под ним — переключатели или группа «время + цена» */
  .inner__head,
  .inner__head--top { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 2rem; }
  .inner__head > .price,
  .inner__head .meta,
  .inner__head--top .meta { margin: 0; }
  .inner__switch--row,
  .inner__switch--row.is-after-2l { margin-top: 2rem; }
  .story,
  .story--after-head { margin-top: 2rem; }
  .inner-cards { margin-top: 2.4rem; }
  /* Категории доступны из меню сайта — нижняя строка на телефоне не нужна */
  .cat-nav { display: none; }
  :root { --footer-gap: 6rem; }

  /* Футер: всё в одну колонку по левому краю */
  .footer__cols { align-items: flex-start; }
  .footer__contacts { align-items: flex-start; text-align: left; }
  .footer__legal { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .footer__legal p { margin-bottom: 0.4rem; }
  .footer__legal a { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

  /* Поп-ап: переключатель срубов помещается по ширине и не заходит под крестик */
  .cabin-modal__pick { max-width: calc(100% - 3.6rem); }
  .cabin-modal__title.dropdown__btn { max-width: 100%; white-space: normal; text-align: left; }
  .cabin-modal__pick .dropdown__list { width: max-content; max-width: calc(100vw - 7.6rem); }
  .cabin-modal__pick .dropdown__list button { white-space: normal; }
}

/* ---------- Отзывы: компактный слайдер с полосками ---------- */
.card--reviews { height: 44rem; }
.reviews-slider {
  position: absolute;
  left: 69.9rem;
  right: 4.4rem;
  top: 4.7rem;
  bottom: 4rem;
  display: flex;
  flex-direction: column;
}
.reviews-slider__track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reviews-slider__track::-webkit-scrollbar { display: none; }
.reviews-slider .review { flex: 0 0 100%; scroll-snap-align: start; padding-right: 2rem; }
.reviews-slider__nav { display: flex; align-items: center; gap: 3rem; margin-top: 2.4rem; }
.reviews-slider__bars { flex: 1; display: flex; gap: 0.8rem; }
.reviews-slider__bars button {
  flex: 1;
  height: 1.6rem;
  position: relative;
}
.reviews-slider__bars button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(215, 203, 179, .35);
  transition: height .3s ease, background-color .3s ease;
}
.reviews-slider__bars button[aria-selected="true"]::before { height: 2px; margin-top: -0.5px; background: var(--beige); }
.reviews-slider__arrows { display: flex; gap: 1.6rem; }
.reviews-slider__arrows button { font-size: 2.2rem; line-height: 1; transition: opacity .3s ease; }
.reviews-slider__arrows button:disabled { opacity: .3; cursor: default; }

@media (max-width: 1024px) {
  .card--reviews { height: auto; }
  .reviews-slider { position: static; margin-top: 18rem; }
}
@media (max-width: 767px) {
  .reviews-slider { margin-top: 10rem; }
  .reviews-slider .review { padding-right: 0.4rem; }
  .reviews-slider__nav { gap: 2rem; margin-top: 2rem; }
  .reviews-slider__arrows button { min-width: 3.6rem; min-height: 3.6rem; }
}

/* ==========================================================================
   Анимации, привязанные к прокрутке (движок в js/main.js). Движок пишет в элементы
   только translate / scale / opacity / clip-path / mask — вёрстку не трогает.
   Без JS или при «уменьшении движения» всё стоит на своих местах.
   ========================================================================== */
:root { --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); }
.bg--tall { background-image: url("../assets/video/poster-vertical.jpg?v=2"); }

/* Первый экран главной: короткое вступление при загрузке (один раз).
   backwards — после вступления управление переходит к прокрутке. */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-title-in { from { opacity: 0; transform: translateY(22px); clip-path: inset(100% -10% -30% -10%); } to { clip-path: inset(-10% -10% -30% -10%); } }
html.js-anim .hero__logo { animation: hero-in .9s var(--ease-soft) .1s backwards; }
html.js-anim .hero__title { animation: hero-title-in 1s var(--ease-soft) .25s backwards; }
html.js-anim .hero__kicker { animation: hero-in .8s var(--ease-soft) .45s backwards; }
html.js-anim .hero__text { animation: hero-in .8s var(--ease-soft) .6s backwards; }

/* ---------- Наведение на карточки (только устройства с мышью) ---------- */
.tile .card__img { transition: transform .5s var(--ease-soft); }
.tile .tile__arrow { transition: transform .3s var(--ease-soft); }
.tile::after { transition: opacity .5s ease; }
.tile:hover .card__img { transform: none; }
.tile:hover .tile__arrow { width: 14.6rem; }
@media (hover: hover) and (pointer: fine) {
  .tile:not([aria-disabled="true"]):not(.tile--static):hover .card__img { transform: scale(1.025); }
  .tile:not([aria-disabled="true"]):hover .tile__arrow { transform: translateX(7px); }
  .tile:not([aria-disabled="true"]):not(.tile--static):hover::after { opacity: .85; }
}
@media (max-width: 767px) {
  .tile:hover .tile__arrow { width: 11rem; }
}

/* ---------- Поп-ап сруба: окно поднимается и проявляется ---------- */
.cabin-modal { transition: opacity .35s var(--ease-soft); }
.cabin-modal__box { transform: translateY(12px); transition: transform .38s var(--ease-soft); }
.cabin-modal.is-open .cabin-modal__box { transform: none; }
/* смена сруба и тарифов внутри открытого окна — мягкая подмена содержимого */
.cabin-modal__swap { transition: opacity .18s ease; }
.cabin-modal__swap.is-fading { opacity: 0; }

/* ---------- Выпадающие списки и меню сайта: единое раскрытие ---------- */
.dropdown__list,
.booking__menu { transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft); }
.dropdown__list { transform: translateY(-8px); }
.booking__menu:not(.is-full) { transform: translateY(-8px); }
.booking__menu.is-open:not(.is-full) { transform: none; }

@media (max-width: 767px) {
  /* строка заголовка отзывов тянется к краю экрана — сам заголовок с бейджем держим в полях 20 px */
  .heading-line--reviews .h2 { max-width: calc(100% - var(--m-gutter)); }
}

/* Галерея листов меню: только горизонтальное листание, лист не выходит из ленты */
.sheets { overflow-y: hidden; touch-action: pan-x pan-y; transition: opacity .9s var(--ease-soft); }
/* Лента листов — от края до края экрана: слева выходит за поле страницы на --bleed-l
   и возвращает его отступом, поэтому первый лист стоит по линии контента, а при листании
   листы уходят за край экрана, а не упираются в невидимую стенку колонки */
.sheets {
  --bleed-l: calc(4rem + max(0px, (100vw - 144rem) / 2));
  margin-left: calc(var(--bleed-l) * -1);
  padding-left: var(--bleed-l);
  scroll-padding-left: var(--bleed-l);
}
@media (max-width: 1024px) { .sheets { --bleed-l: 3.2rem; } }
@media (max-width: 767px) { .sheets { --bleed-l: var(--m-gutter); } }
.sheets.is-pending { opacity: 0; }

/* Описание первого экрана на телефоне — три строки: при кегле 14 px нужно 35rem;
   колонке разрешено заходить в поля на 1,2rem с каждой стороны (центр сохраняется).
   На самых узких экранах (320) — четыре строки, но без выхода за экран. */
@media (max-width: 767px) {
  .hero__text {
    --w: min(35rem, calc(100vw - 2.4rem));
    width: var(--w);
    max-width: none;
    margin-left: calc((100% - var(--w)) / 2);
    margin-right: 0;
  }
}

/* Телефон: кнопки «Подробнее» не уходят под панель «Бронь» (4rem от края экрана) */
@media (max-width: 767px) {
  .cabins__list { padding-right: calc(4.6rem + env(safe-area-inset-right) - var(--m-gutter)); }
}

/* ---------- Телефон: первый экран главной по референсу ----------
   Колонка по центру с одинаковыми полями слева и справа, рассчитанными по панели «Бронь»
   (она занимает 4rem у правого края) — панель не перекрывает буквы ни при какой ширине.
   Иерархия: крупный знак НБ → подзаголовок вплотную к названию → заметный отступ → описание. */
@media (max-width: 767px) {
  .hero { padding: 12rem 0 8rem; }
  .hero__logo { width: 6.6rem; margin-bottom: 3.6rem; }
  .hero__content { padding: 0 calc(4.6rem - var(--m-gutter)); }
  .hero__kicker { font-size: min(1.8rem, calc((100vw - 9.2rem) / 19)); line-height: 1.3; }
  .hero__title { margin-top: 0.6rem; }
  .hero__title img { display: block; width: 100%; margin: 0 auto; }
  /* Описание стоит ниже панели «Бронь» (она по центру экрана, а вся композиция
     центрирована по высоте с запасом), поэтому ему возвращена полная ширина колонки:
     отрицательные поля снимают боковые отступы заголовочной группы. */
  .hero__text {
    width: auto;
    max-width: none;
    margin: 7rem calc(var(--m-gutter) - 4.6rem) 0;
    font-size: 1.5rem;
    line-height: 1.3;
  }
}

/* ---------- Телефон: «Дополнительные услуги», отзывы ---------- */
@media (max-width: 767px) {
  /* карточка ниже, заголовок над яркими цитрусами — затемнение плотнее, но только сверху */
  .tile--shade-top::after {
    background: linear-gradient(180deg, rgba(8, 10, 8, .78) 0%, rgba(8, 10, 8, .55) 24%, rgba(8, 10, 8, .2) 46%, rgba(8, 10, 8, 0) 66%);
  }
  /* бейдж Яндекса — сразу после первой строки заголовка, а не у правого края под панелью */
  .reviews__badge-anchor { position: relative; }
  .reviews__badge { left: 0.8rem; right: auto; top: -3.6rem; }
  /* «Больше отзывов» — справа вверху карточки, левее панели «Бронь» */
  .card--reviews__btn { align-self: flex-end; margin-right: calc(4.4rem + env(safe-area-inset-right) - var(--m-gutter) - 2rem); }
}

/* Строка цены (напитки, аренда): название — гибкая линия — цена. Линия не короче 2,4rem,
   поэтому не пропадает, когда название переносится на две строки, и стоит на уровне
   первой строки названия, где и цена (--pr-lh — межстрочный интервал названия). */
.price-row { --pr-lh: 2.2rem; grid-template-columns: minmax(0, max-content) minmax(2.4rem, 1fr) 5.4rem; }
.price-row--col { grid-template-columns: minmax(0, max-content) minmax(2.4rem, 1fr) auto; }
.price-row__name { line-height: var(--pr-lh); }
.price-row__line { align-self: start; margin-top: calc(var(--pr-lh) / 2); }
@media (min-width: 768px) and (max-width: 1024px) { .price-row { --pr-lh: 1.9rem; } }
@media (max-width: 767px) { .price-row { --pr-lh: 1.7rem; } }

/* Футер: справа постоянная свободная полоса под закреплённую панель «Бронь».
   --panel-safe — от края окна до левого края панели плюс зазор; из него вычитаем
   уже имеющееся поле страницы ((100vw - 100%) / 2), поэтому на широких экранах,
   где колонка далеко от панели, отступ не добавляется. Линия у названия идёт как прежде. */
:root { --panel-safe: 9rem; }
@media (max-width: 1024px) { :root { --panel-safe: 6.4rem; } }
@media (min-width: 768px) {
  .footer__cols,
  .footer__bottom { padding-right: max(0px, calc(var(--panel-safe) - (100vw - 100%) / 2)); }
}

/* Крестик поп-апа срубов: поверх соседей (выбор сруба на планшете заходил на его место
   и перехватывал нажатие) и с областью нажатия 4,4rem; сам крестик того же размера и там же */
.cabin-modal__pick { max-width: calc(100% - 5.6rem); }
.cabin-modal__close {
  z-index: 25; /* выше выпадающего выбора сруба (z-index: 20), который накрывал центр крестика */
  width: 4.4rem;
  height: 4.4rem;
  top: 2.9rem;
  right: 2.7rem;
  touch-action: manipulation;
}
.cabin-modal__close::before,
.cabin-modal__close::after { left: 0.9rem; right: 0.9rem; }
@media (max-width: 1024px) { .cabin-modal__close { top: 1.7rem; right: 1.5rem; } }
@media (max-width: 767px) {
  .cabin-modal__close { top: 1.1rem; right: 0.7rem; width: 4rem; height: 4rem; }
  .cabin-modal__close::before,
  .cabin-modal__close::after { left: 1.1rem; right: 1.1rem; }
}

/* Сетки карточек каталогов: один промежуток и между колонками, и между рядами.
   Каждый ряд — своя сетка, поэтому расстояние до следующего ряда задаём той же
   переменной (селектор сильнее отдельных margin-top рядов на любой ширине). */
:root { --cards-gap: 1.5rem; }
@media (max-width: 767px) { :root { --cards-gap: 0.8rem; } }

/* Цена на карточках каталогов — компактная капсула (плашки времени и цены
   в шапке детальных страниц — отдельные, их не трогаем) */
.inner-cards .price { height: 3.8rem; padding: 0 2rem; font-size: 2.2rem; }
@media (max-width: 767px) { .inner-cards .price { height: 3.2rem; padding: 0 1.4rem; font-size: 1.5rem; } }

/* «Дополнительные услуги»: карточка аренды и карточка чана одной высоты —
   обе растягиваются по строке сетки, фото чана заполняет высоту (object-fit: cover) */
.inner-cards--extras { align-items: stretch; }
.inner-cards--extras .tile { height: auto; min-height: 31.8rem; }
@media (min-width: 768px) and (max-width: 1024px) {
  .price-card--extras { padding: 3rem 2.4rem 2.6rem; }
  .price-row--col + .price-row--col { margin-top: 2.4rem; }
}

/* Планшет */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Два атмосферных заголовка главной — одна типографика */
  .card--tradition__title,
  .card--mood__body p { font-size: 2.6rem; line-height: 3rem; letter-spacing: normal; }

  /* Карточки напитков и аренды: названия и цены компактнее, мелкие подписи как были */
  .price-row__name,
  .price-row__price { font-size: 1.5rem; line-height: 1.9rem; }

  /* «Больше отзывов» — в правом верхнем углу карточки */
  .card--reviews__btn { align-self: flex-end; }

  /* Бейдж Яндекса — сразу после первой строки заголовка, чуть выше неё */
  .reviews__badge-anchor { position: relative; }
  .reviews__badge { left: 1.6rem; right: auto; top: -4.6rem; }

  /* Нижняя навигация категорий не уходит под панель «Бронь» */
  .cat-nav ul { padding-right: calc(var(--panel-safe) - 3.2rem); }

  /* Детальные страницы: время и цена — на одной линии с выпадающим списком процедур.
     Группа всегда на второй строке шапки, справа; список поднимается на её строку,
     центры совпадают (высоты: группа 4,8rem, список 4,6rem). */
  .inner__head--top .h2 { flex-basis: 100%; }
  .inner__head--top .meta { margin-top: 9.7rem; }
  .inner:has(.inner__head--top .meta) .inner__body > .inner__switch--row:first-child { margin-top: -4.7rem; }
  /* длинное название в списке не заходит под группу времени и цены (≈31rem справа) */
  .inner:has(.inner__head--top .meta) .inner__body > .inner__switch--row:first-child .dropdown { max-width: calc(100% - 33rem); }
  .inner:has(.inner__head--top .meta) .inner__body > .inner__switch--row:first-child .dropdown__btn {
    max-width: 100%; height: auto; min-height: 4.6rem; padding-top: 0.6rem; padding-bottom: 0.6rem;
    white-space: normal; text-align: left;
  }
}

/* Выбор сруба в поп-апе: раскрытый список ровно по ширине своей кнопки */
/* контейнер по ширине кнопки (в сетке поп-апа он иначе растягивается на всю колонку) */
.cabin-modal__pick { justify-self: start; width: max-content; }
.cabin-modal__pick .dropdown__list { width: 100%; min-width: 0; max-width: none; }
.cabin-modal__pick .dropdown__list button { white-space: normal; font-size: 1.6rem; padding: 1rem 1.6rem; }
.inner-cards { gap: var(--cards-gap); }
.inner-cards + .inner-cards { margin-top: var(--cards-gap); }

/* Описание услуги на первом экране: шторка сверху вниз, фото под ним неподвижно */
.story__text.is-curtain { animation: story-curtain 1.2s var(--ease-soft) .3s backwards; }
@keyframes story-curtain {
  from { clip-path: inset(-2% -2% 100% -2%); opacity: .2; }
  to { clip-path: inset(-2% -2% 0 -2%); opacity: 1; }
}

/* Горизонтальная прокрутка — только внутри галерей. Карточки въезжают сбоку
   и до появления стоят за краем экрана: обрезаем их по краю колонки, иначе
   мобильный браузер расширяет страницу и её можно сдвинуть пальцем.
   clip (а не hidden) не создаёт контейнер прокрутки, вертикальная прокрутка не меняется. */
@media (max-width: 1024px) {
  .hero, .page, .footer { overflow-x: hidden; overflow-x: clip; }
}

/* Первый экран главной на планшете — по утверждённому образцу: время слева, бургер справа,
   по центру крупный знак НБ, группа «подзаголовок + название» в одну строку и ниже,
   с заметным отступом, описание в три строки. Отступы привязаны к высоте экрана. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero { padding: 13rem 0 9rem; align-items: center; text-align: center; }
  .hero::before { background: radial-gradient(ellipse 60% 42% at 50% 52%, rgba(6, 8, 6, .42) 0%, rgba(6, 8, 6, .2) 55%, rgba(6, 8, 6, 0) 100%); }
  .hero__logo { position: static; width: 8.6rem; margin-bottom: clamp(4.4rem, 6.5svh, 8rem); }
  .hero__hours { left: 0; transform: none; }
  .hero__content { width: 100%; text-align: center; }
  .hero__kicker { font-size: 2.6rem; }
  .hero__title { margin-top: 1rem; }
  .hero__title img { display: block; width: min(100%, 81vw); margin: 0 auto; }
  .hero__text {
    width: auto;
    max-width: 46rem;
    margin: clamp(7rem, 11svh, 14rem) auto 0;
    padding-right: 0;
    text-align: center;
  }
}

@media (max-width: 1024px) {
  /* Панель «Бронь» (планшет и телефон) — посередине правого края экрана, с учётом
     безопасных зон. Центрируем отступами (top/bottom + margin: auto), без transform:
     панель не становится контейнером для fixed-потомков и не спорит с анимацией кнопки
     меню внутри. Когда кнопка меню присоединяется сверху, нижний край не двигается — растёт вверх. */
  .booking,
  .inner-page .booking {
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    right: calc(0.4rem + env(safe-area-inset-right));
    height: max-content;
    margin: auto 0;
    transition: opacity .3s ease, visibility .3s ease, bottom .45s ease;
  }
  .booking.has-menu { bottom: calc(1rem + env(safe-area-inset-bottom) + var(--menu-shift)); }
}

@media (max-width: 767px) {
  /* Стеклянные кнопки внутри карточек: размытие фона под элементом, у предка которого
     во время анимации меняется opacity, браузер считает от другого слоя — кнопки
     «мигали» яркостью. На телефоне оставляем тот же полупрозрачный цвет без размытия. */
  .btn--glass, .round-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* футер: «Разработка сайта» слева, «Наверх ↑» справа — на одной линии */
  .footer__legal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.2rem 1.6rem; }
  .footer__legal p,
  .footer__legal a:first-of-type { grid-column: 1 / -1; }
  .footer__legal a:last-child { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}