/* ============================================================
   Layout — Header / Footer / Buttons
   Iter 2.4. По скрину дизайна:
   - Подвал: 3 колонки (бренд / разделы / контакты)
   - Соцсети в подвале — подписанные кружочки VK/IG/TG/MAX
   - Заголовки в подвале — обычный регистр
   - Иконка у адреса
   - Кнопка CTA внутри контактов
   - Низ: 5 ссылок + реквизиты второй строкой
   - Шапка: фикс видимости SVG-иконок соцсетей
   ============================================================ */

/* ============================================================
   ГЛОБАЛЬНЫЙ OVERRIDE КОНТЕЙНЕРА
   Легаси .container = max-width 1248px.
   Шапка и подвал = 1320px.
   Перебиваем чтобы контент главной был той же ширины.
   ============================================================ */
.container {
  max-width: var(--ds-container-max) !important;   /* 1320px как в шапке/подвале */
  width: 100%;
  padding: 0 20px !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============================================================
   ГЛОБАЛЬНЫЙ OVERRIDE ШРИФТОВ (TZ: Manrope + Inter)
   Легаси styles.css содержит 17 правил с Roboto/Philosopher —
   перебиваем на уровне body/headings с !important
   ============================================================ */
body, p, a, span, div, li, ul, button, input, textarea, select, label, td, th {
  font-family: var(--ds-font-body) !important;     /* Inter */
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-heading) !important;  /* Manrope */
}

/* ============================================================
   1. Кнопки
   ============================================================ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-button);
  font-size: var(--ds-fs-button);
  line-height: 1.2;
  padding: var(--ds-pad-cta);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  user-select: none;
}
.ds-btn--cta {
  background-color: var(--ds-color-cta);
  color: var(--ds-color-text-invert);
}
.ds-btn--cta:hover,
.ds-btn--cta:focus-visible {
  background-color: var(--ds-color-cta-hover);
  color: var(--ds-color-text-invert);
  outline: none;
}
.ds-btn--outline {
  background-color: transparent;
  color: var(--ds-color-heading);
  border-color: var(--ds-color-heading);
}
.ds-btn--outline:hover,
.ds-btn--outline:focus-visible {
  background-color: var(--ds-color-heading);
  color: var(--ds-color-heading-invert);
  outline: none;
}
.ds-btn--link {
  background: transparent;
  color: var(--ds-color-link);
  padding: 0;
  font-weight: var(--ds-fw-body);
  border-radius: 0;
}
.ds-btn--link::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform .18s ease;
}
.ds-btn--link:hover,
.ds-btn--link:focus-visible {
  color: var(--ds-color-link-hover);
  outline: none;
}
.ds-btn--link:hover::after { transform: translateX(3px); }
.ds-btn--ghost {
  background-color: transparent;
  color: var(--ds-color-heading-invert);
  border-color: var(--ds-color-heading-invert);
}
.ds-btn--ghost:hover {
  background-color: var(--ds-color-heading-invert);
  color: var(--ds-color-heading);
}
/* CTA на тёмном фоне (подвал) */
.ds-btn--cta-light {
  background-color: var(--ds-color-cta);
  color: var(--ds-color-text-invert);
  padding: 12px 28px;
  font-size: 16px;
}
.ds-btn--cta-light:hover,
.ds-btn--cta-light:focus-visible {
  background-color: var(--ds-color-cta-hover);   /* тёмно-зелёный, НЕ сливается с #142D1A */
  color: var(--ds-color-text-invert);
  outline: none;
}
@media (max-width: 768px) {
  .ds-btn { font-size: var(--ds-fs-button-mob); }
}

/* ============================================================
   2. Тег
   ============================================================ */
.ds-tag {
  display: inline-block;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-tag);
  font-size: var(--ds-fs-tag);
  line-height: 1.2;
  padding: var(--ds-pad-tag);
  background-color: var(--ds-color-bg-tag);
  color: var(--ds-color-heading);
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .ds-tag { font-size: var(--ds-fs-tag-mob); }
}

/* ============================================================
   3. Header
   ============================================================ */
.ds-header {
  position: fixed;            /* всегда сверху, не прячется при скролле */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--ds-color-bg);
  border-bottom: none;                          /* убрали жёсткую линию */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);   /* мягкая тень как в дизайне */
}

/* Компенсация фиксированной шапки — контент не уходит под неё
   Шапка: 8px padding + 56px лого + 8px padding = 72px, + запас под тень */
body {
  padding-top: 120px !important;  /* высота шапки + большой запас, как в дизайне */
}

.ds-header__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 44px;                   /* воздух: лого→меню = меню→actions */
}

.ds-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.ds-header__logo img {
  max-height: 56px;           /* ещё чуть крупнее (только десктоп, мобила перебивает) */
  width: auto;
  display: block;
}

.ds-header__nav {
  display: flex;
  align-items: center;
  padding-left: 0;                       /* убрал отступ от логотипа */
}
.ds-header__nav .nav__list {
  display: flex;
  align-items: center;
  gap: 32px;                    /* 32px между пунктами меню (на ≥1500px) */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* На разрешениях < 1500px — пункты меню плотнее (10px) */
@media (max-width: 1500px) {
  .ds-header__nav .nav__list {
    gap: 10px !important;
  }
  .ds-header__nav {
    padding-left: 16px !important;
  }
}

/* На разрешениях < 1332px — убираем margin у пунктов меню и сжимаем шапку */
@media (max-width: 1332px) {
  .ds-header__nav .nav__list-item {
    margin: 0 !important;
  }
  .ds-header__container {
    gap: 32px !important;
  }
  .ds-header__actions {
    margin-left: auto !important;      /* телефон и соцсети — к правому краю */
  }
  /* Меню растягиваем на всё свободное место и распределяем пункты */
  .ds-header__nav {
    flex: 1 !important;                /* nav занимает всё между лого и actions */
    padding-left: 0 !important;
  }
  .ds-header__nav .nav__list {
    justify-content: space-between !important;  /* пункты равномерно по ширине nav */
    width: 100% !important;
  }
}
.ds-header__nav .nav__list-item { position: relative; margin: 0; }

.ds-header__nav .nav__list-item-href {
  font-family: var(--ds-font-body);
  font-weight: 500 !important;     /* Medium — менее жирный, чем телефон */
  font-size: 16px !important;       /* 16px как в дизайне */
  color: var(--ds-color-heading);
  text-decoration: none;
  padding: 4px 2px;
  transition: color .15s ease;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-block;
  position: relative;
}
.ds-header__nav .nav__list-item-href:hover { color: var(--ds-color-cta); }
.ds-header__nav .nav__list-item-href--active { color: var(--ds-color-cta); }

/* Убираем подчёркивание у пунктов меню */
/* 1) Легаси :before у активного пункта — 2px зелёная полоска */
.ds-header__nav .nav__list-item-href--active:before,
.ds-header__nav .nav__list-item-href--active::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
/* 2) Легаси border-bottom на span */
.ds-header__nav .nav__list-item-href span {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Полностью убираем легаси-стрелку (она была кривая) — для ВСЕХ пунктов меню */
.ds-header__nav .nav__list-item-href:after {
  content: none !important;
  display: none !important;
}

/* Стрелка подменю — ТОЛЬКО для пунктов с подменю (Развлечения) */
.ds-header__nav .nav__list-item--have-sublist > .nav__list-item-href:after {
  content: '' !important;
  display: inline-block !important;
  position: static !important;        /* легаси ставило absolute — отменяем */
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid currentColor !important;
  transform: none !important;
  vertical-align: middle;
  margin: 0 0 2px 6px;                /* сдвиг под текст */
  opacity: .6;
}
.ds-header__nav .nav__sublist {
  list-style: none;
  margin: 0 !important;
  margin-top: 24px !important;            /* плашка на 24px ниже «Развлечения» */
  padding: 10px 0 !important;
  min-width: 220px;
  background-color: var(--ds-color-bg) !important;
  border-radius: var(--ds-radius-card);
  box-shadow: none;                      /* убрал тень с пунктов меню */
  position: absolute;
  top: 100% !important;
  left: -16px !important;
  display: none;
  z-index: 100;
  width: auto !important;
}

/* Hover-мост: невидимый псевдоэлемент сверху плашки, чтобы мышь не теряла hover */
.ds-header__nav .nav__sublist::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 24px;
  z-index: 99;
}
.ds-header__nav .nav__list-item--have-sublist:hover .nav__sublist { display: block; }

/* Легаси ставил padding-right: 12px на пункт с подменю — уменьшили до 4px (место под стрелку) */
.ds-header__nav .nav__list-item--have-sublist .nav__list-item-href {
  padding-right: 4px !important;
}
.ds-header__nav .nav__sublist-item-href {
  display: block;
  font-family: var(--ds-font-body);
  font-size: 14px;
  font-weight: var(--ds-fw-button);
  color: var(--ds-color-text);
  text-decoration: none;
  padding: 8px 16px !important;        /* 8px сверху/снизу — пункты дышат, но компактно */
  line-height: 1.2 !important;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
  min-width: 180px;
}

/* У пунктов выпадающего меню — убираем отступ снизу (легаси ставит 16px) */
.ds-header__nav .nav__sublist-item {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ds-header__nav .nav__sublist-item-href {
  padding: 8px 16px !important;       /* padding 8px сверху/снизу на самой ссылке */
}
.ds-header__nav .nav__sublist-item-href:hover {
  background-color: var(--ds-color-bg-muted);
  color: var(--ds-color-cta);
}

.ds-header__actions {
  display: flex;
  align-items: center;
  gap: 32px;                   /* 32px между телефоном / соцсетями / CTA */
  margin-left: auto;            /* прибить actions к правому краю контейнера */
}

/* Телефон в actions */
.header__phone {
  font-family: var(--ds-font-body);
  font-weight: 600 !important;     /* SemiBold — заметно жирнее */
  font-size: 16px !important;       /* 16px как в дизайне */
  color: var(--ds-color-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.header__phone:hover { color: var(--ds-color-cta); }

/* Соцсети в шапке — маленькие кружочки с SVG-иконками (как в подвале) */
.ds-header__socials {
  display: flex;
  align-items: center;
  gap: 14px;                   /* 14px между кружочками */
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-header__socials .social__item { list-style: none; margin: 0; padding: 0; }
.ds-header__socials .social__item-href {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 7px;                  /* отступы внутри, чтобы иконки не прижимались */
  box-sizing: border-box;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-color-cta);
  color: var(--ds-color-text-invert);
  transition: background-color .15s ease;
  overflow: hidden;              /* чтобы иконка не вылезала */
}
.ds-header__socials .social__item-href:hover,
.ds-header__socials .social__item-href:focus-visible {
  background-color: var(--ds-color-cta-hover);   /* только смена цвета, никакого прыжка */
  outline: none;
  /* transform убран — иконка не прыгает */
}
/* Перебиваем inline fill и размеры на самом SVG И на детях */
.ds-header__socials .social__item-href svg,
.ds-header__socials .social__item-href svg *,
.ds-header__socials .social__item-href svg path,
.ds-header__socials .social__item-href svg g {
  width: 16px !important;       /* !important — перебиваем inline width="24" */
  height: 16px !important;
  min-width: 0 !important;      /* перебиваем inline min-width: 24px */
  max-width: 16px !important;
  max-height: 16px !important;
  fill: currentColor !important;
  flex-shrink: 0;
}

/* Бургер — 3 настоящих <span>, без псевдоэлементов */
.ds-header__burger {
  display: none;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
  align-self: center !important;
  outline: none !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 2px;                   /* чуть-чуть опустить */
}
.ds-burger__line {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background-color: var(--ds-color-heading) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  -webkit-transition: none !important;
  transition: none !important;
  flex-shrink: 0;
}
/* В состоянии is-open — превращаем в X */
.ds-header.is-open .ds-header__burger {
  gap: 0;
}
.ds-header.is-open .ds-burger__line:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg) !important;
}
.ds-header.is-open .ds-burger__line:nth-child(2) {
  opacity: 0 !important;
}
.ds-header.is-open .ds-burger__line:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg) !important;
}

/* Мобильная адаптация — телефон ВИДЕН */
@media (max-width: 1200px) {
  .header__phone {
    display: inline-block !important;
    font-size: 15px !important;
  }
}
@media (max-width: 1024px) {
  .ds-header__container {
    padding: 8px 16px;
    gap: 32px;                   /* одинаковые 32px между всеми flex-элементами */
    min-height: 64px;
    align-items: center !important;
    position: relative;
  }
  .ds-header__logo img { max-height: 40px; }

  /* Телефон — по центру шапки (absolute) */
  .header__phone {
    position: static !important;   /* планшет: телефон в потоке, рядом с CTA */
    left: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 1;
  }
  .ds-header__actions { gap: 32px; margin-left: auto !important; }
  /* Бургер — к правому краю */
  .ds-header__burger { display: inline-flex !important; }
  .ds-header__socials { display: none !important; }
  .ds-header__actions .ds-btn--cta {
    padding: 8px 16px;
    font-size: 13px;
  }

  /* Слайд-меню */
  .ds-header__nav {
    position: fixed;
    inset: 64px 0 0 0;          /* на всю высоту под шапкой */
    background-color: var(--ds-color-bg);
    padding: 0;                  /* убрал padding — пункты меню прижаты к верху */
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    z-index: 99;
    margin-right: 0;
    align-items: flex-start !important;   /* пункты сверху, а не по центру */
  }
  .ds-header__nav.is-open { transform: translateX(0); }
  .ds-header__nav .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;     /* padding теперь тут, а не на .nav */
  }
  .ds-header__nav .nav__list-item { border-bottom: 1px solid var(--ds-color-bg-muted); }
  .ds-header__nav .nav__list-item-href {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;            /* чуть больше для крупных пальцев */
    font-size: 18px;
  }
  .ds-header__nav .nav__list-item-href:after { margin-left: auto; }
  .ds-header__nav .nav__sublist {
    position: static;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: 0;
    display: block;
  }
  .ds-header__nav .nav__sublist-item-href {
    padding: 8px 0;
    font-size: 15px;
  }
}

/* Мобильная адаптация — телефон (<=640px) */
@media (max-width: 640px) {
  .ds-header__container {
    padding: 8px 12px;
    gap: 8px;
    min-height: 56px;
    align-items: center !important;
  }
  .ds-header__logo img { max-height: 32px; }
  .ds-header__nav { top: 56px; }
  .ds-header__actions .ds-btn--cta { display: none; }
  .ds-header__actions { gap: 8px; margin-left: 0 !important; }
  /* На мобиле телефон — по центру (absolute) */
  .header__phone {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1;
    font-size: 15px !important;
  }
  .ds-header__burger { margin-left: auto !important; }
}

/* ============================================================
   4. Footer (3 колонки по дизайну)
   ============================================================ */
.ds-footer {
  background-color: #0D1A12;   /* темнее, чем --ds-color-cta-hover, ближе к дизайну */
  color: var(--ds-color-text-invert);
  padding: 48px 0 24px;
  font-family: var(--ds-font-body);
}
.ds-footer__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Сетка: бренд (шире) / разделы / контакты */
.ds-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 32px;
}

/* Заголовки разделов — обычный регистр, без uppercase */
.ds-footer__col h4 {
  font-family: var(--ds-font-heading);
  font-weight: var(--ds-fw-heading);
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 16px 0;
  text-transform: none;
  letter-spacing: 0;
}
/* Параграфы в подвале — сбрасываем дефолтные отступы, чтобы не было лишних промежутков */
.ds-footer p,
.ds-footer .footer__copy {
  margin: 0;
}

/* Колонка бренда */
.ds-footer__col--brand img,
.ds-footer__col--brand .logo img,
a.logo img[src*="logo-white"] {
  max-width: 70px !important;   /* !important — перебиваем inline style="max-width:140px" из include */
  height: auto;
  display: block;
  margin-bottom: 24px;          /* увеличенный отступ до текста */
}
.ds-footer__tagline {
  font-size: 14px;
  color: #B5B5B5 !important;    /* явно серый, чтобы было видно */
  line-height: 1.5;
  margin: 0 0 24px 0 !important;   /* отступ до соцсетей */
  max-width: 360px;
}

/* Соцсети в подвале — зелёные кружочки с белыми SVG-иконками */
.ds-footer__socials {
  display: flex;
  gap: 14px;                   /* 14px между кружочками */
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.ds-footer__socials .social__item {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-footer__socials .social__item-href {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-color-cta);
  color: var(--ds-color-text-invert);
  transition: background-color .15s ease;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.ds-footer__socials .social__item-href:hover,
.ds-footer__socials .social__item-href:focus-visible {
  background-color: var(--ds-color-cta-hover);   /* только смена цвета, никакого прыжка */
  outline: none;
  /* transform убран — иконка не прыгает */
}
.ds-footer__socials .social__item-href svg {
  width: 22px;
  height: 22px;
  fill: currentColor !important;   /* перебиваем inline fill="#FFFFFF" — иконка белая по умолчанию */
}

/* Навигация — список ссылок */
.ds-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-footer__nav-list-item { list-style: none; }
.ds-footer__nav-list-item-href {
  font-size: 14px;
  color: #B5B5B5 !important;    /* явно серый */
  text-decoration: none;
  transition: color .15s ease;
}
.ds-footer__nav-list-item-href:hover {
  color: var(--ds-color-bg-tag) !important;
}

/* Контакты */
.ds-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}
.ds-footer__contacts-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #B5B5B5 !important;    /* явно серый */
  text-decoration: none;
  transition: color .15s ease;
}
a.ds-footer__contacts-item:hover {
  color: var(--ds-color-bg-tag) !important;
}
.ds-footer__contacts-icon {
  flex-shrink: 0;
  width: 20px;
  height: 27px;       /* пропорция 24:32 для пина */
  display: block;
}
.ds-footer__cta {
  display: inline-flex;
}

/* Низ подвала — ссылки слева, копирайт справа (на всех экранах) */
.ds-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  font-size: 13px;
  color: #F1F1F1;
  opacity: 0.65;                /* серость как в дизайне */
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
/* Hover на всю строку убран — меняется только конкретная ссылка при наведении */
.ds-footer__bottom-left {
  flex-shrink: 0;
  color: #F1F1F1;
}
.ds-footer__bottom-left .footer__copy,
.ds-footer__bottom-left p {
  margin: 0;
  color: #F1F1F1;
  font-size: 13px;
}
.ds-footer__bottom-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
  justify-content: flex-end;       /* ссылки внутри блока — выровнены вправо */
  order: 1;                        /* блок ссылок — после копирайта (справа) */
}
.ds-footer__bottom a {
  white-space: nowrap;
  color: #F1F1F1;
  text-decoration: none;
  transition: color .15s ease;
}
.ds-footer__bottom a:hover {
  color: var(--ds-color-bg-tag);
}

@media (max-width: 1024px) {
  .ds-footer__grid { 
    grid-template-columns: 1fr auto;        /* brand слева, Разделы прижат к правому краю */
    gap: 36px; 
  }
  /* Колонка «Разделы» — текст по правому краю */
  .ds-footer__col--sections { text-align: right; }

  /* Низ: на планшете ссылки — слева */
  .ds-footer__bottom {
    flex-wrap: wrap;
  }
  .ds-footer__bottom-right {
    justify-content: flex-start !important;   /* ссылки внутри блока — к левому краю */
  }
}
@media (max-width: 640px) {
  .ds-footer { padding: 36px 0 20px; }
  .ds-footer__container { padding: 0 16px; }
  .ds-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .ds-footer__bottom { flex-direction: column; gap: 16px; align-items: center; text-align: center; }
  .ds-footer__bottom-left, .ds-footer__bottom-right { gap: 12px; align-items: center; justify-content: center; }
}


/* ============================================================
   MAIN PAGE — Hero / About / Rooms / Fun / Reviews / Help / Contacts
   Дизайн: rc-676b6804.apps.aigentura.ru
   ============================================================ */

/* ===== HERO (2-колоночный) ===== */
.ds-hero {
  background: var(--ds-color-bg);
  padding: 0 0 60px;            /* воздух даёт body padding-top */
}
.ds-hero__container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.ds-hero__left {
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  position: relative;
  height: 586px;              /* фиксированная высота как в дизайне */
  aspect-ratio: auto;         /* не растягиваем квадратом */
}
.ds-hero__slider {
  width: 100%;
  height: 100%;
}
.ds-hero__slider .swiper-container,
.ds-hero__slider .swiper-wrapper,
.ds-hero__slider .swiper-slide {
  width: 100%;
  height: 100%;
}
.ds-hero__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;   /* картинка прижата к верху блока — «МАРЬИНО» видно */
}
.ds-hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
}
.ds-hero__title {
  font-family: var(--ds-font-heading);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  max-width: 500px;
}
.ds-hero__title--accent {
  color: var(--ds-color-bg-tag);       /* светло-зелёный как в дизайне */
  white-space: nowrap;                  /* вторая строка тоже не переносится */
}
.ds-hero__pagination {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.ds-hero__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  opacity: 1;
  margin: 0 !important;
  border-radius: 50%;
  transition: all 0.25s;
}
.ds-hero__pagination .swiper-pagination-bullet-active {
  background: #FFFFFF;
  width: 24px;
  border-radius: 4px;
}

/* Hero right (форма) */
.ds-hero__right {
  background: var(--ds-color-bg-muted);
  background-image: url('/tz/hero-pattern.png');  /* декоративный паттерн в правом нижнем углу */
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 280px auto;
  border-radius: var(--ds-radius-card);
  padding: 36px 36px 40px;
  position: relative;
  overflow: hidden;
  min-height: 586px;          /* высота как у левой картинки */
  height: 586px;
  display: flex;              /* чтобы прижать форму к низу */
  flex-direction: column;
  justify-content: space-between;
}
/* Декоративный лист в правом нижнем углу (как в дизайне) */
.ds-hero__right::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
  background: var(--ds-color-bg-tag);
  border-radius: 50%;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
.ds-hero__right-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Большой зазор между текстом и формой (как в дизайне) */
.ds-hero__form {
  margin-top: auto;
}
.ds-hero__quick {
  max-width: 100%;
}
.ds-hero__badge {
  display: inline-block;
  background: var(--ds-color-bg-tag);
  color: var(--ds-color-body);
  padding: 6px 18px;
  border-radius: 20px;        /* как в дизайне — пилюля */
  font-size: 16px;            /* как в дизайне */
  font-weight: 500;
  margin-bottom: 14px;
  float: right;                /* бейдж справа */
  margin-left: 14px;
  margin-top: 4px;
  clear: right;
}
.ds-hero__quick-text {
  display: block;
  clear: both;                 /* текст ПОД бейджем, не слева */
}
.ds-hero__subtitle {
  font-size: 18px;                /* как в дизайне — стандартный body-размер */
  font-weight: 400;
  color: var(--ds-color-body);
  line-height: 1.5;
  margin: 0;
  max-width: 70%;
}

.ds-hero__form {
  background: #FFFFFF;
  border-radius: var(--ds-radius-card);
  padding: 24px 24px 22px;
}
.ds-hero__form-title {
  font-family: var(--ds-font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0 0 18px;
}
.ds-hero__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.ds-hero__form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.ds-hero__form-label {
  font-size: 13px;
  color: var(--ds-color-body);
  font-weight: 500;
}
.ds-hero__form-input {
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 500;                       /* жирнее */
  color: var(--ds-color-heading);
  background: var(--ds-color-bg-muted);
  border: none;
  border-radius: 12px;
  padding: 12px 40px 12px 14px;          /* справа место под иконку */
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.2s;
}
/* Иконка календаря справа — только у полей с датой */
.ds-hero__form-field--date::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: 4px;
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23050505" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>') center/contain no-repeat;
  pointer-events: none;
  opacity: 0.6;
}
.ds-hero__form-input::placeholder {
  color: var(--ds-color-heading);
  font-weight: 500;
  opacity: 1;                             /* без бледности */
}
.ds-hero__form-input:focus {
  outline: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--ds-color-cta);
}
.ds-counter {
  display: flex;
  align-items: center;
  background: var(--ds-color-bg-muted);
  border-radius: 12px;
  padding: 0 8px;
  height: 44px;
  width: fit-content;
  min-width: 100%;
  justify-content: space-between;
}
/* В hero-форме счётчики (Взрослые, Дети) — белый фон как в дизайне */
.ds-hero__form .ds-counter {
  background: var(--ds-color-bg);
}
.ds-hero__form .ds-counter:hover {
  background: var(--ds-color-bg-muted);
}
.ds-counter__btn {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--ds-color-cta);
  cursor: pointer;
  padding: 4px 12px;
  font-weight: 400;
  line-height: 1;
}
.ds-counter__btn:disabled {
  color: #B5B5B5;
  cursor: not-allowed;
}
.ds-counter__input {
  background: transparent;
  border: none;
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-color-heading);
  text-align: center;
  width: 40px;
  padding: 0;
}
.ds-hero__form-submit {
  width: 100%;
  background: var(--ds-color-cta);
  color: #FFFFFF;
  font-family: var(--ds-font-body);
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 28px;
  padding: 14px 24px;
  margin-top: 8px;
  cursor: pointer;
  transition: background-color 0.25s;
}
.ds-hero__form-submit:hover {
  background: var(--ds-color-cta-hover);
}

/* Hero responsive */
@media (max-width: 1024px) {
  .ds-hero {
    padding-bottom: 60px;
  }
  .ds-hero__container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ds-hero__left {
    height: auto;                 /* на мобиле — авто */
    aspect-ratio: 1 / 0.85;
  }
  .ds-hero__title {
    font-size: 28px;
  }
  .ds-hero__right {
    height: auto;                 /* на мобиле — авто */
    min-height: 0;
    padding: 24px;
  }
  .ds-hero__quick {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .ds-hero {
    padding-bottom: 40px;
  }
  .ds-hero__form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ds-hero__title {
    font-size: 22px;
  }
  .ds-hero__form-title {
    font-size: 18px;
  }
}

/* ===== ABOUT (О нас + 6 features) ===== */
.ds-about {
  background: var(--ds-color-bg);
  padding: 80px 0;            /* единый ритм */
}
.ds-about__head {
  max-width: var(--ds-container-max);
  margin: 0 auto 32px;
  padding: 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ds-about__title {
  font-family: var(--ds-font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;
  max-width: 700px;
  line-height: 1.15;
}
.ds-about__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  padding-top: 8px;
}
.ds-about__more {
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-color-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.ds-about__more:hover {
  color: var(--ds-color-heading);
}
.ds-arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.ds-about__more:hover .ds-arrow,
a:hover .ds-arrow {
  transform: translateX(3px);
}

.ds-about__grid {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* feature card variants */
.ds-feature {
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  background: var(--ds-color-bg-muted);
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ds-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ds-feature--text {
  padding: 28px 28px 32px;
  justify-content: space-between;
}
.ds-feature--text .ds-feature__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  position: relative;
}
.ds-feature--text .ds-feature__head {
  display: flex;
  justify-content: flex-end;       /* тег справа */
  min-height: 28px;                /* высота как в дизайне */
}
.ds-feature--text .ds-feature__head--left {
  justify-content: flex-start;     /* у карточек без заголовка — тег слева */
}
.ds-feature--text .ds-feature__title {
  font-family: var(--ds-font-heading);
  font-size: 26px;
  font-weight: 800 !important;        /* жирный, перебиваем легаси */
  color: var(--ds-color-heading);
  margin: 0;
  line-height: 1.1;
}
.ds-feature--text .ds-feature__text {
  font-size: 18px;                /* как в дизайне — стандартный body */
  color: var(--ds-color-body);
  line-height: 1.5;
  margin: 0;
  margin-top: auto;                /* текст прижат к низу карточки */
}
.ds-feature__tag {
  display: inline-block;
  background: var(--ds-color-bg-tag);
  color: var(--ds-color-body);
  padding: 4px 14px;
  border-radius: 16px;
  font-size: 16px;                /* как в дизайне */
  font-weight: 500;
  align-self: flex-start;
}
.ds-feature--image {
  position: relative;
  min-height: 280px;
}
.ds-feature--image .ds-feature__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
}
.ds-feature--image .ds-feature__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--ds-color-bg-tag);
}
.ds-feature--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%);
  z-index: 1;
}
.ds-feature--image .ds-feature__body {
  position: absolute;
  top: 0;                           /* текст сверху как в дизайне */
  left: 0;
  right: 0;
  padding: 24px 28px 22px;
  z-index: 2;
  color: #FFFFFF;
}
.ds-feature--image .ds-feature__title {
  font-family: var(--ds-font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px;
  line-height: 1.2;
}
.ds-feature--image .ds-feature__text {
  font-size: 18px;                /* как в дизайне */
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
  margin: 0;
}

/* About responsive */
@media (max-width: 1024px) {
  .ds-about {
    padding: 50px 0 50px;
  }
  .ds-about__title {
    font-size: 30px;
  }
  .ds-about__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ds-about__head {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }
  .ds-about__title {
    font-size: 24px;
  }
  .ds-about__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ds-feature {
    min-height: 200px;
  }
}

/* ===== ROOMS (5 номеров) ===== */
.ds-rooms {
  background: var(--ds-color-bg);        /* белая секция, как в дизайне */
  padding: 80px 0;
}
.ds-rooms__subtitle {
  font-size: 18px;
  font-weight: 400;
  color: var(--ds-color-body);
  margin: 24px 0 32px;                  /* ещё больше воздуха сверху */
}
.ds-rooms__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ds-rooms__viewport {
  overflow: hidden;                /* обрезаем карточки за пределами */
  width: 100%;
}
.ds-rooms__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
  will-change: transform;
}
.ds-rooms__track .ds-room-card {
  flex: 0 0 auto;                  /* ширину ставит JS */
  flex-shrink: 0;
  max-width: none;                 /* снимаем старый grid max-width */
  box-sizing: border-box;
}
.ds-room-card {
  background: var(--ds-color-bg-muted);  /* серые карточки как в дизайне */
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  padding: 20px;                         /* поля вокруг карточки */
  gap: 0;                                /* убрал стандартный gap */
}
.ds-room-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ds-room-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 20px;                   /* скругление картинки */
  overflow: hidden;                      /* чтобы tag не вылезал */
}
.ds-room-card__body {
  padding: 20px 4px 4px;                 /* отступ сверху под картинкой */
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ds-room-card__title {
  font-family: var(--ds-font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;
  line-height: 1.2;
}
.ds-room-card__text {
  font-size: 16px;
  color: var(--ds-color-body);
  line-height: 1.45;
  margin: 0;
  flex: 1;
}
.ds-room-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  margin-top: auto;
}
.ds-room-card__more {
  font-size: 14px;
  color: var(--ds-color-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: color 0.2s;
}
.ds-room-card__more:hover {
  color: var(--ds-color-cta);
}
.ds-room-card__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-color-heading);
  margin: 0;
  white-space: nowrap;
}
.ds-rooms .container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ds-rooms__title {
  font-family: var(--ds-font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;                              /* убрал нижний margin, чтобы только subtitle давал отступ */
  line-height: 1.15;
}
.ds-rooms__subtitle {
  font-size: 18px;            /* как .ds-hero__subtitle */
  font-weight: 400;
  color: var(--ds-color-body);
  margin: 0 0 40px;
  padding-top: 30px;                   /* отступ от заголовка */
}
.ds-rooms__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.ds-rooms__more {
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-color-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: color 0.2s;
}
.ds-rooms__more:hover {
  color: var(--ds-color-cta);
}
.ds-rooms__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ds-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #B5B5B5;
  background: transparent;
  color: var(--ds-color-heading);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ds-nav-btn:hover {
  background: var(--ds-color-cta);
  border-color: var(--ds-color-cta);
  color: #FFFFFF;
}
.ds-rooms__page {
  font-size: 15px;
  color: var(--ds-color-body);
  min-width: 30px;
  text-align: center;
}

.ds-rooms__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Rooms responsive */
@media (max-width: 1024px) {
  .ds-rooms {
    padding: 50px 0 50px;
  }
  .ds-rooms__title {
    font-size: 30px;
  }
  .ds-rooms__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ds-rooms__title {
    font-size: 24px;
  }
  .ds-rooms__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ds-rooms__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== DATE FILTER BAR (между rooms и fun) ===== */
.ds-filter {
  background: var(--ds-color-bg);
  padding: 80px 0;                  /* единый ритм со всеми секциями */
}
.ds-filter__form {
  background: var(--ds-color-bg-muted);
  border-radius: 20px;
  padding: 32px 36px;               /* выше — как в дизайне */
}
.ds-filter__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 20px;
  align-items: end;
}
.ds-filter__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-filter__label {
  font-size: 13px;
  color: var(--ds-color-text);
  font-weight: 500;
}
.ds-filter__input {
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-color-heading);
  background: var(--ds-color-bg);         /* белый фон, как в дизайне */
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
}
.ds-filter__input::placeholder {
  color: var(--ds-color-heading);
  font-weight: 500;
  opacity: 1;
}
.ds-filter__input:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--ds-color-cta);
  background: var(--ds-color-bg);
}
.ds-filter .ds-counter {
  background: var(--ds-color-bg-muted);  /* серый фон */
  height: 44px;
}
.ds-filter__select {
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-color-heading);
  background: var(--ds-color-bg)              /* белый фон, как в дизайне */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23050505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 16px center;
  background-size: 12px 8px;
  border: none;
  border-radius: 12px;
  padding: 14px 38px 14px 16px;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  height: 48px;
}
.ds-filter__select:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--ds-color-cta);
}
.ds-filter__submit {
  background: var(--ds-color-cta);
  color: var(--ds-color-bg);
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: 28px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
  height: 44px;
}
.ds-filter__submit:hover {
  background: var(--ds-color-cta-hover);
}

@media (max-width: 1024px) {
  .ds-filter__row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .ds-filter__submit {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .ds-filter__row {
    grid-template-columns: 1fr;
  }
  .ds-filter__form {
    padding: 18px 20px;
  }
}

/* ===== FUN (развлечения, 2 карточки) ===== */
.ds-fun {
  background: var(--ds-color-bg);
  padding: 80px 0;
}
.ds-fun .container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ds-fun__head {
  margin-bottom: 32px;
}
.ds-fun__tag {
  display: inline-block;
  background: var(--ds-color-bg-tag);
  color: var(--ds-color-body);
  padding: 6px 18px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.ds-fun__title {
  font-family: var(--ds-font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;
  line-height: 1.15;
}
.ds-fun__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ds-fun-card {
  background: var(--ds-color-bg-muted);
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 300px;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  padding: 32px;                    /* поля вокруг карточки — больше */
  gap: 24px;                       /* отступ между текстом и картинкой */
}
.ds-fun-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ds-fun-card__leaf {
  position: absolute;
  top: 36px;                       /* сдвинут вниз от верхнего края */
  left: 36px;
  width: 24px;
  height: 16px;
  color: var(--ds-color-bg-tag);
  z-index: 2;
}
.ds-fun-card__body {
  padding: 48px 8px 8px 8px;       /* 48px сверху — место под листик */
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;     /* текст сверху, под листиком */
}
.ds-fun-card__title {
  font-family: var(--ds-font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;
  line-height: 1.2;
}
.ds-fun-card__text {
  font-size: 16px;
  color: var(--ds-color-body);
  line-height: 1.5;
  margin: 0;
}
.ds-fun-card__image {
  background-size: cover;
  background-position: center;
  min-height: 260px;
  border-radius: 20px;              /* скругление картинки */
  align-self: stretch;             /* картинка на всю высоту карточки */
}

/* Fun responsive */
@media (max-width: 1024px) {
  .ds-fun {
    padding: 50px 0 50px;
  }
  .ds-fun__title {
    font-size: 30px;
  }
  .ds-fun__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .ds-fun-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ds-fun-card__image {
    aspect-ratio: 16 / 10;
  }
  .ds-fun__title {
    font-size: 24px;
  }
}

/* ===== REVIEWS ===== */
.ds-reviews {
  background: var(--ds-color-bg);    /* белая секция, как в дизайне */
  padding: 80px 0;
}
.ds-reviews .container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ds-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.ds-reviews__title {
  font-family: var(--ds-font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0;
  line-height: 1.15;
}
.ds-reviews__more {
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-color-heading);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: color 0.2s;
}
.ds-reviews__more:hover {
  color: var(--ds-color-cta);
}
.ds-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ds-review-card {
  background: var(--ds-color-bg-muted);  /* серые карточки на белой секции — как в дизайне */
  border-radius: var(--ds-radius-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.ds-review-card__stars {
  display: flex;
  gap: 4px;
  color: var(--ds-color-cta);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
}
.ds-review-card__star {
  color: var(--ds-color-cta);
}
.ds-review-card__text {
  font-size: 18px;
  color: var(--ds-color-body);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-review-card__fio {
  font-family: var(--ds-font-heading);
  font-size: 18px;
  font-weight: 800 !important;
  color: var(--ds-color-heading);
  margin: 0;
  margin-top: auto;                /* имя прижато к низу карточки */
}
.ds-review-card__subject {
  font-size: 13px;
  color: var(--ds-color-body);
  margin: -6px 0 0;
  opacity: 0.7;
}

/* Reviews responsive */
@media (max-width: 1024px) {
  .ds-reviews {
    padding: 50px 0 50px;
  }
  .ds-reviews__title {
    font-size: 30px;
  }
  .ds-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ds-reviews__title {
    font-size: 24px;
  }
  .ds-reviews__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ===== HELP FORM (Поможем выбрать номер) ===== */
.ds-help {
  background: var(--ds-color-bg);       /* белая секция */
  padding: 80px 0;
}
.ds-help .container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ds-help__card {
  background: var(--ds-color-bg-muted); /* серая карточка внутри */
  border-radius: var(--ds-radius-card);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.ds-help__title {
  font-family: var(--ds-font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0 0 16px;
  line-height: 1.15;
}
.ds-help__text {
  font-size: 18px;            /* как .ds-hero__subtitle */
  font-weight: 400;
  color: var(--ds-color-body);
  line-height: 1.5;
  margin: 0;
}
.ds-help__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds-help__form-input {
  font-family: var(--ds-font-body);
  font-size: 15px;
  color: var(--ds-color-heading);
  background: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 16px 18px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.ds-help__form-input:focus {
  outline: none;
  border-color: var(--ds-color-cta);
}
.ds-help__form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ds-color-body);
  cursor: pointer;
}
.ds-help__form-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--ds-color-cta);
}
.ds-help__form-submit {
  background: var(--ds-color-cta);
  color: #FFFFFF;
  font-family: var(--ds-font-body);
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 28px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.25s;
  margin-top: 4px;
}
.ds-help__form-submit:hover {
  background: var(--ds-color-cta-hover);
}

/* Help responsive */
@media (max-width: 1024px) {
  .ds-help__card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 28px;
  }
  .ds-help__title {
    font-size: 26px;
  }
}
@media (max-width: 640px) {
  .ds-help {
    padding: 40px 0 50px;
  }
  .ds-help__title {
    font-size: 22px;
  }
  .ds-help__card {
    padding: 24px 20px;
  }
}

/* ===== CONTACTS BLOCK ===== */
.ds-contacts {
  background: var(--ds-color-bg);
  padding: 80px 0;
}
.ds-contacts .container {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.ds-contacts__card {
  background: var(--ds-color-bg-muted);
  border-radius: var(--ds-radius-card);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}
.ds-contacts__info {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;       /* tag и соцсети — по естественной ширине */
}
.ds-contacts__tag {
  display: inline-block;
  background: var(--ds-color-bg-tag);
  color: var(--ds-color-body);
  padding: 6px 18px;
  border-radius: 18px;
  font-size: 16px;            /* как в дизайне */
  font-weight: 500;
  margin-bottom: 14px;
}
.ds-contacts__title {
  font-family: var(--ds-font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0 0 18px;
  line-height: 1.15;
}
.ds-contacts__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
}
.ds-contacts__item {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ds-color-heading);
}
.ds-contacts__item a {
  color: var(--ds-color-heading);
  text-decoration: none;
  transition: color 0.2s;
}
.ds-contacts__item a:hover {
  color: var(--ds-color-cta);
}
.ds-contacts__text {
  font-size: 18px;
  font-weight: 400;
  color: var(--ds-color-body);    /* как .ds-hero__subtitle */
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 90%;
}
.ds-contacts__socials {
  display: flex;
  gap: 12px;
  margin-top: 28px;               /* увеличенный воздух от текста */
}
.ds-contacts__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--ds-color-body);
  margin-bottom: 24px;
}
.ds-contacts__info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ds-contacts__info-item b {
  color: var(--ds-color-heading);
  margin-right: 4px;
}
.ds-contacts__socials {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.ds-contacts__social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-color-cta);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.ds-contacts__social svg {
  display: block;
  width: 24px;
  height: 24px;
  color: #FFFFFF;             /* SVG наследует белый */
}
.ds-contacts__social:hover {
  background: var(--ds-color-cta-hover);
}
.ds-contacts__cta {
  display: inline-block;
  background: var(--ds-color-cta);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 28px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.2s;
}
.ds-contacts__cta:hover {
  background: var(--ds-color-cta-hover);
}
.ds-contacts__map {
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  min-height: 360px;
  background: #FFFFFF;
  margin: 32px;                    /* поля вокруг карты как в дизайне */
}
.ds-contacts__map iframe {
  display: block;                  /* убирает inline-баг и белую полосу снизу */
  width: 100%;
  vertical-align: top;
}
.ds-contacts__map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: none;
  display: block;
  vertical-align: top;             /* убирает белую полосу снизу */
}

/* Contacts responsive */
@media (max-width: 1024px) {
  .ds-contacts__card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 24px;
  }
  .ds-contacts__title {
    font-size: 26px;
  }
}
@media (max-width: 640px) {
  .ds-contacts {
    padding: 40px 0 50px;
  }
  .ds-contacts__title {
    font-size: 22px;
  }
  .ds-contacts__card {
    padding: 24px 20px;
  }
  .ds-contacts__map,
  .ds-contacts__map iframe {
    min-height: 280px;
  }
}

/* ============================================
   Внутренние страницы — общие
   ============================================ */
/* Скрыть старые блоки Битрикса на внутренних страницах */
.page--rooms .main__top,
.page--rooms .main__aside,
.page--rooms .filter-top,
.page--rooms .main__breadcrumbs,
.page--rooms .main__title,
.page--gallery .main__top,
.page--gallery .main__breadcrumbs,
.page--gallery .main__title { display: none !important; }
.page--gallery { padding-top: 0 !important; }
.page--gallery .main { padding: 0 !important; background: #fff !important; }
.page--gallery .ds-gallery__hero { padding-top: 180px !important; }   /* компенсация фиксированной шапки */
.page--rooms .main__content > .container > .row > .col-lg-4,
.page--rooms .main__content > .container > .row > .col-xl-3 { display: none !important; }
.page--rooms .main__content > .container > .row > .col-lg-8,
.page--rooms .main__content > .container > .row > .col-xl-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
.page--rooms .main__right > *:not(.ds-rooms-page) { display: none !important; }
.page--rooms .main { padding: 0 !important; background: #fff !important; }

.ds-rooms-page { padding: 60px 0 100px; background: #fff; }
.ds-rooms-page__tag { margin-bottom: 24px; }
.ds-rooms-page__title {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.1;
  color: var(--ds-color-heading);
  margin: 0 0 16px;
}
.ds-rooms-page__subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ds-color-body);
  margin: 0 0 40px;
}
.ds-rooms-page__filter {
  background: var(--ds-color-bg-muted);
  border-radius: 24px;
  padding: 24px 32px;
  margin-bottom: 48px;
}
.ds-rooms-page__filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.ds-rooms-page__field { display: flex; flex-direction: column; gap: 6px; }
.ds-rooms-page__field-label {
  font-size: 13px;
  color: var(--ds-color-body);
  padding-left: 16px;
}
.ds-rooms-page__field-input {
  width: 100%;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--ds-font-body);
  font-size: 16px;
  color: var(--ds-color-heading);
}
.ds-rooms-page__field-input:focus { outline: 2px solid var(--ds-color-cta); }
.ds-rooms-page__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}
.ds-rooms-page__filter-btn {
  height: 52px;
  padding: 14px 28px;
  white-space: nowrap;
}

.ds-rooms-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.ds-rooms-page .ds-room-card {
  background: var(--ds-color-bg-muted);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #ECECEC;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.ds-rooms-page .ds-room-card__image {
  display: block;
  position: relative;
  aspect-ratio: 1.1;
  background-size: cover;
  background-position: center;
  background-color: #ddd;
  margin: 16px 16px 0;
  border-radius: 16px;
  overflow: hidden;
  width: calc(100% - 32px);
}
.ds-rooms-page .ds-room-card__tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--ds-color-bg-tag);
  color: var(--ds-color-heading);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 100px;
}
.ds-rooms-page .ds-room-card__tag--lux {
  background: #FFF6BF;
}
.ds-rooms-page .ds-room-card__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ds-rooms-page .ds-room-card__title {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: var(--ds-color-heading);
}
.ds-rooms-page .ds-room-card__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-color-body);
  margin: 0;
}
.ds-rooms-page .ds-room-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--ds-color-body);
}
.ds-rooms-page .ds-room-card__features li {
  position: relative;
  padding-left: 14px;
}
.ds-rooms-page .ds-room-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--ds-color-cta);
  border-radius: 50%;
}
.ds-rooms-page .ds-room-card__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-rooms-page .ds-room-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ds-color-heading);
}
.ds-rooms-page .ds-room-card__meta-item svg { color: var(--ds-color-cta); }
.ds-rooms-page .ds-room-card__bottom {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ds-rooms-page .ds-room-card__more {
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-color-cta);
  text-decoration: none;
}
.ds-rooms-page .ds-room-card__more:hover { color: var(--ds-color-cta-hover); }
.ds-rooms-page .ds-room-card__price {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--ds-color-heading);
  margin: 0;
}

.ds-rooms-page__tariff {
  background: var(--ds-color-bg-muted);
  border-radius: 32px;
  padding: 56px 32px;
  text-align: center;
}
.ds-rooms-page__tariff-title {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ds-color-heading);
}
.ds-rooms-page__tariff-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ds-color-body);
  margin: 0 auto 32px;
  max-width: 640px;
}

@media (max-width: 1024px) {
  .ds-rooms-page__grid { grid-template-columns: repeat(2, 1fr); }
  .ds-rooms-page__title { font-size: 40px; }
  .ds-rooms-page__filter-row { grid-template-columns: 1fr 1fr; }
  .ds-rooms-page__filter-btn { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ds-rooms-page__grid { grid-template-columns: 1fr; }
  .ds-rooms-page__title { font-size: 32px; }
  .ds-rooms-page__filter-row { grid-template-columns: 1fr; }
  .ds-rooms-page__tariff { padding: 40px 20px; }
  .ds-rooms-page__tariff-title { font-size: 28px; }
}

/* ============================================
   Внутренние страницы — /gallery/
   ============================================ */
.ds-gallery { background: #fff; }
.ds-gallery__hero {
  position: relative;
  background: #050505 url('/upload/iblock/gallery-hero.jpg') center/cover no-repeat;
  padding: 80px 0 100px;
  color: #fff;
  isolation: isolate;                  /* чтобы ::before был внутри */
}
.ds-gallery__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 100%);
  z-index: -1;
}
.ds-gallery__hero .container { position: relative; z-index: 1; }
.ds-gallery__hero-tag {
  display: inline-block;
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 14px;
  color: #EBFEC4;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.ds-gallery__hero-title {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 64px;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 20px;
}
.ds-gallery__hero-subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.ds-gallery__content { padding: 60px 0 100px; }
.ds-gallery__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 48px;
}
.ds-gallery__filter {
  font-family: var(--ds-font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--ds-color-heading);
  background: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 100px;
  padding: 12px 28px;
  cursor: pointer;
  transition: all .2s ease;
}
.ds-gallery__filter:hover {
  border-color: var(--ds-color-cta);
  color: var(--ds-color-cta);
}
.ds-gallery__filter.is-active {
  background: var(--ds-color-cta);
  color: #fff;
  border-color: var(--ds-color-cta);
}

.ds-gallery__grid {
  columns: 4;                         /* multi-column masonry — без пустот */
  column-gap: 4px;
}
.ds-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f1f1;
  margin: 0 0 4px;                    /* нижний отступ = зазор между рядами */
  break-inside: avoid;                /* не разрывать карточку между колонок */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: transform .3s ease;
  width: 100%;
}
.ds-gallery__item:hover { transform: scale(1.02); z-index: 2; }
.ds-gallery__item.is-hidden { display: none; }
.ds-gallery__img {
  width: 100%;
  height: auto;                        /* натуральные пропорции */
  display: block;
}

@media (max-width: 1024px) {
  .ds-gallery__grid { columns: 3; }
  .ds-gallery__hero-title { font-size: 48px; }
}
@media (max-width: 640px) {
  .ds-gallery__grid { columns: 2; column-gap: 4px; }
  .ds-gallery__item { margin-bottom: 4px; border-radius: 8px; }
  .ds-gallery__hero-title { font-size: 36px; }
  .ds-gallery__hero { padding: 50px 0 60px; }
  .ds-gallery__filter { padding: 8px 16px; font-size: 14px; }
}

/* ============================================
   Внутренние страницы — /contacts/
   ============================================ */
.page--contacts .main { padding: 0 !important; background: #fff !important; }
.page--contacts .main__aside,
.page--contacts .filter-top { display: none !important; }
.page--contacts .main__title {
  font-family: var(--ds-font-heading) !important;
  font-weight: 800 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  color: var(--ds-color-heading) !important;
  margin: 24px 0 32px !important;
}
.ds-contacts--page { padding: 0; }                 /* без нижнего отступа — карта прижата к низу */
.ds-contacts__item-text--link {
  color: var(--ds-color-heading);
  text-decoration: none;
  transition: color .15s ease;
}
.ds-contacts__item-text--link:hover { color: var(--ds-color-cta); }

/* ============================================
   Внутренние страницы — /reviews/
   ============================================ */
.page--reviews .main { padding: 0 !important; background: #fff !important; }
.page--reviews .main__top,
.page--reviews .main__breadcrumbs,
.page--reviews .main__title,
.page--reviews .main__aside,
.page--reviews .filter-top { display: none !important; }
.ds-reviews--page { padding: 60px 0 100px; }
.ds-reviews__head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ds-reviews__title--page {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.1;
  color: var(--ds-color-heading);
  margin: 0;
}
.ds-reviews__subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ds-color-body);
  margin: 0 0 48px;
}
.ds-reviews--page .ds-reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .ds-reviews--page .ds-reviews__grid { grid-template-columns: 1fr; }
  .ds-reviews__title--page { font-size: 32px; }
}

/* ============================================
   Модальные окна (popup)
   ============================================ */
.mfp-content .popup,
.popup {
  background: #fff;
  border-radius: 24px;
  padding: 0;
  max-width: 480px;
  width: 90%;
  margin: 40px auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
}
.popup__container {
  padding: 40px 40px 32px;
}
.popup__title {
  font-family: var(--ds-font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ds-color-heading);
  margin: 0 0 24px;
  text-align: center;
}
.popup__content { color: var(--ds-color-body); }
.popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F1F1;
  border: none;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.popup__close:hover { background: #E5E5E5; }
.popup__close::before,
.popup__close::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--ds-color-heading);
  border-radius: 1px;
}
.popup__close::before { transform: rotate(45deg); }
.popup__close::after { transform: rotate(-45deg); }

/* Поля в модалке — стиль как в остальном сайте */
.popup .form__field-input,
.popup input.input,
.popup input[type="text"],
.popup input[type="email"],
.popup input[type="tel"],
.popup textarea,
.popup select {
  width: 100%;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--ds-font-body);
  font-size: 16px;
  color: var(--ds-color-heading);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.popup .form__field-input:focus,
.popup input.input:focus,
.popup textarea:focus {
  outline: none;
  border-color: var(--ds-color-cta);
  box-shadow: 0 0 0 3px rgba(43, 117, 64, 0.1);
}
.popup .form__row { margin-bottom: 16px; }
.popup .form__field { position: relative; }

/* Кнопка в модалке — как ds-btn--cta */
.popup .form__btn button,
.popup button[type="submit"],
.popup .ds-btn,
.popup input[type="submit"] {
  width: 100%;
  background: var(--ds-color-cta);
  color: var(--ds-color-text-invert);
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-button);
  font-size: var(--ds-fs-button);
  padding: var(--ds-pad-cta);
  border: none;
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  transition: background-color .18s ease;
  margin-top: 8px;
}
.popup .form__btn button:hover,
.popup button[type="submit"]:hover,
.popup .ds-btn:hover {
  background-color: var(--ds-color-cta-hover);
}

/* MFP — затемнение и центрирование */
.mfp-bg { background: rgba(0,0,0,0.65) !important; }
.mfp-wrap { overflow-y: auto !important; padding: 20px 0 !important; }

/* Главный фильтр на /rooms/ */
.page--rooms .main { padding-top: 0; }
.page--rooms .ds-rooms-page { padding: 60px 0; }

/* ============================================
   Внутренние страницы — /rooms/
   ============================================ */
.page--rooms .main__content > .container > .row > .col-lg-4,
.page--rooms .main__content > .container > .row > .col-xl-3 { display: none !important; }
.page--rooms .main__content > .container > .row > .col-lg-8,
.page--rooms .main__content > .container > .row > .col-xl-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
.page--rooms .main__right > *:not(.ds-rooms-page) { display: none !important; }

/* ============================================================
   Fun cards — link wrapper + "Подробнее" indicator
   ============================================================ */
.ds-fun-card {
  padding: 0;                       /* override: padding 0, inner __link has padding */
}
.ds-fun-card__link {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 300px;
  padding: 32px;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  align-items: stretch;
  position: relative;
}
.ds-fun-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--ds-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-color-cta);
  transition: color 0.2s;
}
.ds-fun-card__more .ds-arrow {
  transition: transform 0.2s;
  display: inline-block;
}
.ds-fun-card__link:hover .ds-fun-card__more {
  color: var(--ds-color-cta-hover);
}
.ds-fun-card__link:hover .ds-fun-card__more .ds-arrow {
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .ds-fun-card__link {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Fun detail page (page--fun-detail)
   ============================================================ */
.page--fun-detail .main__content,
.page--fun-detail .ds-wrapper > .ds-main,
.page--fun-detail .main__content > .container,
.page--fun-detail .main__content > .container > .row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}
.page--fun-detail .main__content > .container > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.page--fun-detail .main__aside,
.page--fun-detail .consult-form,
.page--fun-detail .aside-nav {
  display: none !important;
}

.ds-fun-detail {
  padding: 0 0 80px;
  background: #fff;
}
.ds-fun-detail__hero {
  background-size: cover;
  background-position: center;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 60px 0;
  position: relative;
  color: #fff;
  border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);
  margin-bottom: 60px;
}
.ds-fun-detail__hero-content {
  max-width: var(--ds-container-max);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.ds-fun-detail__title {
  font-family: var(--ds-font-heading);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 16px;
  max-width: 720px;
}
.ds-fun-detail__lead {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  max-width: 640px;
  margin: 0;
  opacity: 0.92;
}
.ds-fun-detail__section {
  max-width: var(--ds-container-max);
  margin: 0 auto 60px;
  padding: 0 32px;
}
.ds-fun-detail__section-title {
  font-family: var(--ds-font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--ds-color-heading);
  margin: 0 0 28px;
}
.ds-fun-detail__content {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ds-color-body);
  max-width: 880px;
}
.ds-fun-detail__content p {
  margin: 0 0 16px;
}
.ds-fun-detail__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}
.ds-fun-detail__item {
  background: var(--ds-color-bg-muted);
  border-radius: 16px;
  padding: 24px 28px;
}
.ds-fun-detail__item-label {
  font-family: var(--ds-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.ds-fun-detail__item-value {
  font-family: var(--ds-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-color-heading);
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
}
.ds-fun-detail__cta {
  max-width: var(--ds-container-max);
  margin: 60px auto 0;
  padding: 0 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 1024px) {
  .ds-fun-detail__title { font-size: 42px; }
  .ds-fun-detail__list { grid-template-columns: 1fr; }
  .ds-fun-detail__hero { min-height: 380px; }
}
@media (max-width: 640px) {
  .ds-fun-detail__title { font-size: 32px; }
  .ds-fun-detail__section-title { font-size: 24px; }
  .ds-fun-detail__hero { min-height: 300px; padding: 40px 0; margin-bottom: 40px; }
  .ds-fun-detail__section { margin-bottom: 40px; padding: 0 20px; }
  .ds-fun-detail__cta { padding: 0 20px; }
  .ds-fun-detail__item { padding: 18px 20px; }
  .ds-fun-detail__lead { font-size: 16px; }
}