/* Страницы волны 2: «Бани», «Бассейн и чан», «Беседки», «Услуги», «Перед визитом», «Отзывы» (кадры Figma «… · 1920 / 768 / 390»).
   Блоки главной и первых страниц подключены как есть (bani, chan, besedki, otzyvy, vizit, cifry, ceny); здесь — только то, чего в них нет. */

/* ===== «Вкладка» — ряд якорей и фильтры: 44, капсула, значок 20 + текст 16/20; выбрана — шалфей ===== */
.vtabs { display: flex; flex-wrap: wrap; gap: 12px; }
.vtab {
  display: inline-flex; align-items: center; gap: 12px; flex: none; height: 44px; padding: 12px 24px;
  border: 0; border-radius: var(--r-pill); background: var(--c-bg-milk); color: var(--c-text);
  font: 600 16px/20px var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.vtab .icon { width: 20px; height: 20px; }
.vtab:hover { background: var(--c-line); }
.vtab:focus-visible { outline-offset: 3px; }

/* ===== «Входит в цену» под таблицей «Бани»: три пункта по 174 и ссылка; 390 — столбиком (12), 768 — в ряд с переносом ссылки, 1920 — в один ряд (24) ===== */
.pfoot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pfoot__list { display: contents; }
.pfoot__item { display: flex; align-items: flex-start; gap: 8px; width: 174px; font: 400 14px/19px var(--f-sans); color: var(--c-text-2); }
.pfoot__item .icon { width: 18px; height: 18px; color: var(--c-text); }
@media (min-width: 768px) {
  .pfoot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
}

/* ===== «Вопросы»: шапка, ряд якорей, колонка групп и «Фото-полоса» (1920 — колонка 1fr + полоса 579, зазор 21; ниже — полоса под колонкой) ===== */
.vpage { position: relative; isolation: isolate; } /* без заливки, как в кадрах: сквозь блок видна гравюра «Отзывов» выше */
/* «Декор · беседка» (/besedki/, п. 7) и «Декор · дуб» (/pered-vizitom/, п. 8), .45: в нижнем поле блока под фото-полосой; с 1870 — в левом поле
   (беседка — низом к низу колонки, дуб — в нижнем поле: верх на уровне низа последней группы), на 1200–1869 скрыты (поля нет, слева вопросы) */
.vpage__decor { position: absolute; z-index: -1; opacity: .45; pointer-events: none; }
.vpage__decor img { width: 100%; height: auto; }
.vpage__decor--bes { left: 14px; bottom: 2px; width: 88px; }
.vpage__decor--pv { left: 14px; bottom: 2px; width: 81px; }
@media (min-width: 768px) {
  .vpage__decor--bes { left: 18px; bottom: 1px; width: 120px; }
  .vpage__decor--pv { left: 18px; bottom: 3px; width: 108px; }
}
@media (min-width: 1200px) and (max-width: 1869px) { .vpage__decor { display: none; } }
@media (min-width: 1870px) {
  .vpage__decor--bes { left: 30px; bottom: 96px; width: 200px; }
  .vpage__decor--pv { left: 30px; bottom: 0; width: 180px; }
}
.vpage__in { display: flex; flex-direction: column; gap: 32px; padding-block: 48px; }
.vpage__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vpage__row { display: flex; flex-direction: column; gap: 32px; }
.vpage__col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.vgroup { display: flex; flex-direction: column; gap: 12px; }
.vgroup__title { font: 600 18px/26px var(--f-sans); color: var(--c-text); }
.vpage__photo { position: relative; height: 240px; border-radius: var(--r-l); overflow: hidden; }
.vpage__photo picture, .vpage__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vpage__photo img { object-fit: cover; }
@media (min-width: 768px) {
  .vpage__in { padding-block: 64px; }
  .vpage__photo { height: 360px; }
}
@media (min-width: 1200px) {
  .vpage__in { padding-block: 96px; }
  .vpage__row { display: grid; grid-template-columns: minmax(0, 1fr) 579px; column-gap: 21px; align-items: stretch; }
  .vpage--mirror .vpage__row { grid-template-columns: 579px minmax(0, 1fr); }
  .vpage--mirror .vpage__photo { order: -1; }
  .vpage__photo { height: auto; }
}

/* ===== «Скидки · полоса» и «Беседка и баня»: молочная плашка r24; 1920 — H2 слева, числа справа; 390 — всё столбиком ===== */
.sband { padding-bottom: 48px; }
.sband__box { display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; border-radius: var(--r-l); background: var(--c-bg-milk); }
.sband__top { display: flex; flex-direction: column; gap: 24px; }
.sband__title { font: 400 24px/30px var(--f-serif); color: var(--c-text); }
.sband__body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sband__cols { display: flex; flex-direction: column; gap: 24px; }
.sband__sep { align-self: stretch; height: 1px; background: var(--c-line); }
.scol { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.scol__num { font: 400 40px/40px var(--f-digits); color: var(--c-text); }
.scol__note { font: 400 15px/21px var(--f-sans); color: var(--c-text-2); }
.sband__rule { align-self: stretch; width: 100%; height: 1px; margin: 0; border: 0; background: var(--c-line); }
.sband__cert { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sband__certtext { display: flex; align-items: center; gap: 12px; font: 400 15px/21px var(--f-sans); color: var(--c-text-2); }
.sband__certtext .icon { width: 24px; height: 24px; color: var(--c-sage); }
@media (min-width: 768px) {
  .sband { padding-bottom: 64px; }
  .sband__box { gap: 32px; padding: 40px 48px; }
  .sband__title { font-size: 36px; line-height: 42px; }
  .sband__cols { flex-direction: row; gap: 32px; }
  .scol { flex: 1 1 0; }
  .sband__sep { align-self: stretch; width: 1px; height: auto; }
  .sband__cert { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .sband__certtext { flex: 1; min-width: 0; }
  .sband__cert .link-arrow { flex: none; }
}
@media (min-width: 1200px) {
  .sband { padding-bottom: 96px; }
  .sband__top { flex-direction: row; align-items: center; gap: 48px; }
  .sband__title { flex: none; width: 280px; }
  .sband__body { flex: 1; }
}

/* ===== «Беседка и баня в один день» (правка макета 20.10.2026, компонент «Цена · беседка и баня»): одна левая ось.
   до 1199 — ведомость «баня и гости слева, цена справа», ссылка последней строкой слева; с 1200 — заголовок и ссылка в одной строке, три колонки ===== */
.bband { padding-block: 32px 48px; }
.bband__box { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px; border-radius: var(--r-l); background: var(--c-bg-milk); }
.bband__title { font: 400 24px/30px var(--f-serif); color: var(--c-text); }
.bband__rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--c-line); }
.bband__list { display: flex; flex-direction: column; }
.bband__link { align-self: flex-start; }
.pr { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--c-line); }
.pr:last-child { border-bottom: 0; }
.pr__who { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; min-width: 0; }
.pr__name { font: 400 16px/22px var(--f-sans); color: var(--c-text); }
.pr__guests { font: 400 14px/19px var(--f-sans); color: var(--c-text-2); }
.pr__num { flex: none; font: 400 26px/30px var(--f-digits); color: var(--c-text); white-space: nowrap; }
@media (min-width: 768px) {
  .bband { padding-block: 48px 64px; }
  .bband__box { gap: 24px; padding: 40px 48px; }
  .bband__title { font-size: 36px; line-height: 42px; }
  .pr { padding-block: 16px; }
  .pr__who { gap: 4px; }
  .pr__name { font-size: 18px; line-height: 26px; }
  .pr__guests { font-size: 15px; line-height: 21px; }
  .pr__num { font-size: 40px; line-height: 44px; }
}
@media (min-width: 1200px) {
  .bband { padding-block: 64px 96px; }
  .bband__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title link" "rule rule" "list list"; align-items: end; }
  .bband__title, .bband__link { align-self: end; } /* ссылка в строке заголовка — по низу, как в кадре (по базовой линии выходила на 3,5 px выше) */
  .bband__title { grid-area: title; white-space: nowrap; }
  .bband__link { grid-area: link; }
  .bband__rule { grid-area: rule; }
  .bband__list { grid-area: list; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 65px; align-items: start; } /* 32 + линия 1 + 32 между колонками (кадр: x колонок 308 / 764,3 / 1220,7 при ширине 1304) */
  .pr { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding-block: 0; border-bottom: 0; }
  .pr { position: relative; }
  .pr + .pr::before { content: ""; position: absolute; left: -33px; top: 0; bottom: 0; width: 1px; background: var(--c-line); } /* линия посередине промежутка 65 */
  .pr__num { order: -1; font-size: 40px; line-height: 40px; }
  .pr__who { display: block; flex: none; font: 400 15px/21px var(--f-sans); color: var(--c-text-2); }
  .pr__name, .pr__guests { font: inherit; color: inherit; }
  .pr__name::after { content: " · "; }
}

/* ===== Фото-полоса с цифрами («Как выбрать», «Парение и уход») — «Цифры» главной: белые значения, росчерк, линии α0,14 ===== */
.cifry--band .cifra + .cifra { border-color: var(--c-line-dark); }
/* F6/F7 (19.10): в кадрах лент страниц («Как выбрать», «Парение и уход», «На компанию») подпись и росчерк непрозрачные; 0,85 и 0,5 — только «Цифры» главной (cifry.css) */
.cifry--page .cifra__note, .cifry--page .cifra__dash { opacity: 1; }
/* 390, три колонки: столбиком, между колонками линия 1 px (в кадре — вплотную, без полей) */
.cifry--tri .cifry__row { display: flex; flex-direction: column; row-gap: 0; }
.cifry--tri .cifra + .cifra { border-top: 1px solid var(--c-line-dark); margin-top: 24px; padding-top: 24px; } /* правка макета 11.10: 24 до и после линии (кадр «Бани · 390» 9571) */
/* две колонки в ряд на всех ширинах, над рядом — надзаголовок по центру */
.cifry--row .cifry__row { display: flex; row-gap: 0; }
.cifry--row .cifra { flex: 1 1 0; min-width: 0; }
.cifry__eyebrow { display: flex; justify-content: center; color: var(--c-text-light); }
.cifry--eyebrow .cifry__row { padding-top: 24px; }
@media (min-width: 768px) {
  .cifry--tri .cifry__row { flex-direction: row; }
  .cifry--tri .cifra { flex: 1 1 0; min-width: 0; }
  .cifry--tri .cifra + .cifra { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--c-line-dark); }
  .cifry--row .cifra + .cifra { border-left: 1px solid var(--c-line-dark); }
}
@media (max-width: 767px) {
  .cifry--row .cifra + .cifra { border-left: 0; }
}
@media (min-width: 1200px) {
  .cifry--band .cifry__in { display: block; }
  .cifry--band .cifry__row { display: flex; }
}

/* ===== «Бассейн и чан»: карточки «Баня · строка» без номера, цены и вместимости ===== */
.brows .bani__rows { gap: 12px; } /* между карточками 12 на всех ширинах (у «Трёх бань» на 768 — 16) */
.banya--info .banya__bottom { display: flex; flex-direction: column; align-items: stretch; }
@media (min-width: 1200px) {
  .banya--info .banya__bottom { display: block; min-height: 100px; padding: 0; } /* «Низ» в кадре 100 при кнопке 56: ниже скрытая строка «Условие» */
  .banya--info .banya__bottom .btn { display: inline-flex; }
}

/* ===== «Травы для чана» и группы «Услуг»: сетка карточек «Услуга · карточка» ===== */
.uherbs__in, .ugroups__in { display: flex; flex-direction: column; gap: 24px; padding-block: 48px; }
.uherbs__in .link-arrow { align-self: flex-start; }

/* «Декор · веник» (ТЗ-гравюры-внутренние, п. 4) и «Декор · самовар» в чайной карте (п. 5), прозрачность .45.
   Веник — справа у заголовка, как самовар главной: с 1870 в поле, на 1200–1869 внутри контейнера; самовар — в пустой ячейке сетки карточек
   (4-я колонка с 1200, вторая строка справа на 768–1199), на 390 скрыт — там одна гравюра на страницу */
.ugroups { position: relative; isolation: isolate; }
.ugroups--tea .ugroup { position: relative; }
.ugroups__venik, .ugroups__samovar { position: absolute; z-index: -1; opacity: .45; pointer-events: none; }
.ugroups__venik img, .ugroups__samovar img { width: 100%; height: auto; }
.ugroups__venik { right: 4px; top: 0; width: 71px; }
.ugroups__samovar { display: none; }
@media (min-width: 768px) {
  .ugroups__venik { right: 48px; top: 2px; width: 136px; }
  /* центр правой колонки (2 колонки, зазор 16); низ ячейки второй строки — 361 (фото 260 + подпись + «Добавить»), гравюра 170 по центру */
  .ugroups__samovar { display: block; right: calc((100% - 16px) / 4 - 68px); bottom: 95px; width: 136px; }
}
@media (min-width: 1200px) {
  .ugroups__venik { right: max(40px, 50% - 700px); top: 4px; width: 180px; }
  /* четвёртая колонка (4 колонки, зазор 16, колонка = (100% − 48) / 4): ширина = колонка − 40, по центру, низом к низу карточек */
  .ugroups__samovar { --sam-w: min(200px, calc((100% - 48px) / 4 - 40px)); right: calc(((100% - 48px) / 4 - var(--sam-w)) / 2); bottom: 0; width: var(--sam-w); }
}
@media (min-width: 1870px) {
  .ugroups__venik { right: max(16px, 50% - 880px); width: 226px; }
  .ugroups__samovar { --sam-w: min(226px, calc((100% - 48px) / 4 - 40px)); }
}
.ugroup { display: flex; flex-direction: column; gap: 16px; }
.ugroup--next { padding-top: 16px; }
.ugroup__title { font: 400 24px/30px var(--f-serif); color: var(--c-text); }
.ucards { display: flex; flex-direction: column; gap: 24px; }
.ucards .ucard { flex: none; min-width: 0; }
.ucards .ucard__title { align-self: stretch; }
.ucards .ucard__name { flex: 1; min-width: 0; } /* в кадрах цена прижата к правому краю карточки (название — на остаток ширины) */
@media (min-width: 768px) {
  .uherbs__in, .ugroups__in { gap: 32px; padding-block: 64px; }
  .ucards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
}
@media (min-width: 1200px) {
  .uherbs__in, .ugroups__in { padding-block: 96px; }
}
/* четыре в ряд — с 1200 (12.10.2026); на 1200–1319 цена под названием, название не растягивается */
@media (min-width: 1200px) {
  .ucards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) and (max-width: 1319px) {
  .ucards .ucard__name { flex: none; }
}

/* ===== «Чан · полоса» («Услуги»): 390 — фото сверху, название и цена в строку, пояснение ниже; ≥768 — миниатюра, текст по центру, цена справа ===== */
.cstrip { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "photo photo" "name price" "note note"; gap: 12px 0; padding: 12px; border-radius: var(--r-l); background: var(--c-bg-milk); }
.cstrip__photo { grid-area: photo; display: block; height: 160px; border-radius: var(--r-m); overflow: hidden; }
.cstrip__photo img { width: 100%; height: 100%; object-fit: cover; }
.cstrip__text { display: contents; }
.cstrip__name { grid-area: name; font: 400 24px/30px var(--f-serif); color: var(--c-text); }
.cstrip__note { grid-area: note; font: 400 15px/21px var(--f-sans); color: var(--c-text-2); }
.cstrip__price { grid-area: price; font: 600 24px/30px var(--f-sans); color: var(--c-text); white-space: nowrap; }
@media (min-width: 768px) {
  .cstrip { display: flex; align-items: center; gap: 24px; padding: 12px 24px 12px 12px; }
  .cstrip__photo { flex: none; width: 120px; height: 80px; }
  .cstrip__text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
}
@media (min-width: 1200px) {
  .cstrip__photo { width: 160px; height: 104px; }
}

/* ===== Один ряд отзывов («Бани», «Бассейн и чан»): 1920 — три карточки, 768 — две, 390 — лента 290 с прокруткой (тот же компонент, что на главной) ===== */
/* гравюра «Горы ели» в кадре 1920 привязана к верху и выходит за блок вниз, в «Вопросы» (блок без заливки, гравюра видна сквозь него): −22; на 390 — как на главной.
   F17 (сверка 19.10): в кадрах 768 («Бани», «Дубовая», «Бассейн и чан») гравюры нет — на 768–1199 не выводится (по соседнему кадру 768; 1200 и шире — как в кадре 1920) */
.otzyvy--row { overflow: visible; }
@media (min-width: 768px) and (max-width: 1199px) { .otzyvy--row .otzyvy__decor { display: none; } }
@media (min-width: 1200px) { .otzyvy--row .otzyvy__decor { top: -22px; bottom: auto; height: 878px; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .otzyvy--row .otz:nth-child(n+3) { display: none; }
}
@media (min-width: 1200px) {
  .otzyvy--row .otzyvy__cards { flex-wrap: nowrap; }
}

/* ===== «Все отзывы»: шапка и список из восьми карточек «Компакт» (390 — колонкой, фото сверху 326×184; 768 — строки с фото слева 239; 1920 — четыре в ряд) ===== */
.rgrid { position: relative; isolation: isolate; overflow: hidden; background: var(--c-bg-linen); }
.rgrid .otzyvy__decor { top: 270px; bottom: auto; height: 223px; }
.rgrid__in { display: flex; flex-direction: column; gap: 24px; padding-block: 48px; }
.rgrid__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rgrid__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rcards { display: flex; flex-direction: column; gap: 12px; }
/* 390: фото сверху 326×184, высота карточки — по содержимому (без фиксированной высоты) */
.rcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--r-l); background: var(--c-bg-milk); }
.rcard__photo { display: block; flex: none; aspect-ratio: 326 / 184; border-radius: var(--r-m); overflow: hidden; }
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.rcard__body { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 8px 16px 16px; min-width: 0; }
.rcard__quote { margin: 0; font: 400 15px/22px var(--f-sans); color: var(--c-text); overflow-wrap: anywhere; word-spacing: -.01em; } /* −0,15 px на пробел: у цитаты Владимира строка 294,2 при колонке 294 (метрика Chrome против Figma) и уходила в четвёртую строку (+22) */
.rcard__foot { display: flex; flex-direction: column; gap: 12px; }
.rcard__low { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.rcard__src { font: 400 15px/21px var(--f-sans); color: var(--c-text-2); }
.btn--ghost { background: transparent; color: var(--c-text); box-shadow: inset 0 0 0 1.5px var(--c-text); }
.btn--ghost:hover { background: rgba(30, 42, 31, .06); }
.rgrid__more { align-self: stretch; }
@media (min-width: 768px) {
  .rgrid .otzyvy__decor { top: 889px; height: 351px; }
  .rgrid__in { gap: 32px; padding-block: 64px; }
  .rgrid__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .rcards { gap: 16px; }
  /* 768: фото слева 239, тянется на высоту карточки, не ниже 130; низ карточки — SPACE_BETWEEN */
  .rcard { flex-direction: row; }
  .rcard__photo { position: relative; width: 239px; min-height: 130px; aspect-ratio: auto; align-self: stretch; }
  .rcard__photo img { position: absolute; inset: 0; }
  .rcard__body { flex: 1 1 0; gap: 0; justify-content: space-between; padding: 16px; }
  .rcard__foot { display: contents; }
  .rgrid__more { display: none; }
}
@media (min-width: 1200px) {
  .rgrid .otzyvy__decor { top: -22px; height: 878px; }
  .rgrid__in { gap: 40px; padding-block: 96px; }
  .rgrid__links { flex-direction: row; align-items: center; gap: 32px; }
  /* вид «Обычный»: четыре в ряд, фото сверху 308×150; карточки ряда одной высоты — по самой высокой (правка макета 11.10), подпись прижата к низу */
  .rcards { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 24px; }
  .rcard { flex: 0 0 calc((100% - 72px) / 4); flex-direction: column; }
  .rcard__photo { width: 100%; height: 150px; min-height: 0; align-self: auto; }
  .rcard__body { flex: 1 1 auto; justify-content: flex-start; gap: 12px; padding: 8px 16px 16px; }
  .rcard__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
}