/* ============ сайт бани «ЖАРА» · надстройка над общим стилем ЖАРА SPACE ============
   Общие токены, кнопки, навбар и таблицы берём из style.css — здесь только
   то, чего у ЖАРА SPACE нет, и правки по ТЗ клиента от 09.10.2026.

   ПРАВИЛО ЭТОГО ФАЙЛА (ТЗ, разделы 2, 3, 20):
   1) фон — глубокий графит, а не коричневое дерево: текстура волокна остаётся
      акцентом примерно на 20–30% элементов (бегущая строка, карточки акций,
      подвал), но не под всей страницей и не под карточками;
   2) контраст — основной текст #F5F1EA, вторичный #C7BBB0 (оба заметно светлее
      прежних), никакого тёмно-коричневого текста на дереве;
   3) крупные секции чередуют фон (.sec-a / .sec-b) и разделены тонкой золотой
      линией, между ними больше воздуха;
   4) декоративный Unbounded — только H1, крупные H2, названия номеров, цифры
      акций и рейтинга; карточки, прайсы, FAQ, формы, кнопки, контакты — Manrope. */

/* ── 0. токены ───────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  /* графит: холоднее и глубже прежнего коричневого #120d0a */
  --bg:#0d0b0a; --bg2:#141110; --card:#181512; --card2:#1d1916;
  --line:#302a25;                 /* нейтральная линия, без рыжины */
  /* текст по ТЗ */
  --txt:#f5f1ea; --body:#e2dbd1; --mut:#c7bbb0;
  /* акцент: золото для цифр, линий, иконок; медь — только заливки кнопок */
  --gold:#e0b478; --gold2:#d49a6a;
  --bevel:inset 0 1px 0 rgba(236,224,208,.05);
  --r-card:20px; --r-img:16px; --r-sm:12px;
  /* волокно оставлено как акцент (см. .marquee, .promo, footer) */
  --wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.012' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* ── 1. база: ровный графит вместо сруба под всей страницей ─────────────── */
body{background-color:var(--bg);background-image:none}
/* прежний тёплый «костёр» снизу убран: это была декоративная фактура */
body::before{display:none}
#grain{opacity:.035}
h1,h2{font-family:'Unbounded',sans-serif}
/* всё, что не заголовок страницы, — гротеск: карточки, прайсы, формы, FAQ */
h3,.rev b,.feat b,.step b,.book-card h3,.book-aside h3,.faq summary,legend,
table.prices th,table.prices td,.find-info,.find-info a,.f-line,.hero-attrs,
.hero-note,.note-line,.sec-sub,.space-lead,.space-list li,.space-incl,
.promo h3,.promo p,.rvs-score span,.revs-src,.note,.f-hint{
  font-family:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif}
/* мелкий вторичный текст — заметно светлее прежнего #9e8f82 */
.sec-sub,.space-lead,.promo p,.rev p,.feat span,.step span,.faq details p,
.note-line,.note,.revs-src,.find-info .f-line,.book-aside li,.f-hint,
.step span,.f-note{color:var(--mut)}
/* фокус видно всегда — форма одна из главных точек конверсии */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* ── 2. разделение секций: чередующийся фон + тонкая золотая линия ──────── */
section{padding:74px 0}
.sec-a{background:transparent}
.sec-b{background:linear-gradient(180deg,#131110 0%,#100e0d 100%);position:relative}
.sec-b::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,180,120,.42) 22%,rgba(224,180,120,.42) 78%,transparent)}
.sec-b::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,180,120,.24) 30%,rgba(224,180,120,.24) 70%,transparent)}
.sec-b .kicker{color:var(--gold)}
/* заголовки секций не должны распадаться на 4–5 строк */
h2{max-width:22ch}
.sec-sub{max-width:60ch}

/* ── 3. первый экран ────────────────────────────────────────────────────── */
/* затемнение под текстом: кадр остаётся читаемой фотографией, а не чёрным фоном */
.hero.hero-banya::before{z-index:1;background:
  linear-gradient(90deg,rgba(9,8,7,.84) 0%,rgba(9,8,7,.6) 42%,rgba(9,8,7,.26) 76%,rgba(9,8,7,.4) 100%),
  linear-gradient(180deg,rgba(9,8,7,.58) 0%,rgba(9,8,7,.26) 24%,rgba(9,8,7,.34) 52%,rgba(9,8,7,.44) 72%,rgba(9,8,7,.82) 100%)}
.hero.hero-banya::after{z-index:1;background:
  radial-gradient(760px 520px at 28% 46%,rgba(9,8,7,.42),transparent 78%),
  radial-gradient(900px 520px at 50% 108%,rgba(224,180,120,.06),transparent 72%)}
.hero-center{position:relative;z-index:2}
h1.hero-cap{max-width:22ch}
/* строка преимуществ: 2 отдельных номера • до 20 гостей • от 690 ₽/час */
.hero-attrs{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;margin:clamp(14px,1.8vw,20px) 0 0;
  font-size:clamp(13.5px,1.5vw,17px);font-weight:700;color:var(--txt);text-shadow:0 2px 14px rgba(0,0,0,.66)}
.hero-attrs li{position:relative;padding-right:14px;margin-right:14px;white-space:nowrap}
.hero-attrs li+li::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(224,180,120,.8)}
/* «Можно со своей едой и напитками» — отдельной строкой-пометкой */
.hero-note{display:inline-flex;align-items:center;gap:9px;max-width:none;margin:clamp(12px,1.6vw,16px) 0 0;
  padding:8px 15px;border:1px solid rgba(224,180,120,.34);border-radius:999px;background:rgba(18,15,13,.58);
  font-size:clamp(13px,1.4vw,15px);font-weight:700;color:var(--txt);backdrop-filter:blur(8px)}
.hero-note::before{content:'';width:15px;height:15px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--gold),#a9662b);box-shadow:0 0 10px rgba(224,180,120,.55)}
.hero-banya .hero-sub{color:#f0eae0;font-weight:600}
/* логотип в первом экране: настоящий знак, а не текстовый суррогат.
   На десктопе текст идёт слева — значит и знак встаёт слева, над заголовком,
   и не занимает четверть экрана (за это отвечает мобильное правило ниже) */
.hero-logo{object-fit:contain;width:clamp(86px,8.6vw,124px);margin:0 0 clamp(16px,2vw,24px)}

/* ── 4. два номера ──────────────────────────────────────────────────────── */
.space{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:26px;
  background:#141210;position:relative}
.space:hover{border-color:rgba(224,180,120,.34)}
.space-top{display:grid;grid-template-columns:1fr;gap:0}
.space-body{display:grid;grid-template-columns:1.02fr 1fr;gap:30px;align-items:start;
  padding:clamp(22px,3vw,36px)}
@media(max-width:980px){.space-body{grid-template-columns:1fr;gap:0}}

.space-body h3{font-family:'Unbounded',sans-serif;font-size:clamp(21px,2.7vw,30px);font-weight:700;
  line-height:1.25;margin-bottom:12px}
.space-lead{font-size:16px;line-height:1.75;max-width:52ch}
.space-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin-top:22px}
.space-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--txt);line-height:1.5}
.space-list svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--gold2);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.space-incl{margin-top:22px;border:1px solid rgba(224,180,120,.3);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:15px 18px;background:rgba(224,180,120,.05);font-size:15px;
  color:var(--txt);line-height:1.65}
/* акция 5+1 в карточке номера: та же плашка, но тише — не спорит с прайсом */
.space-promo{margin-top:12px;padding:12px 18px;border:1px dashed rgba(224,180,120,.4);border-radius:var(--r-sm);
  font-size:14px;color:var(--mut);line-height:1.6}
.space-promo b{color:var(--gold)}
/* подсказка 5+1 в форме брони: золотая, видно и без колбэка счетчика часов */
#promoNote{margin-top:10px;color:var(--gold);font-weight:600}
#promoNote[hidden]{display:none}

/* галерея номера: одна большая фотография + превью */
.gal{position:relative;background:#100e0d;min-height:280px}
/* 16:9 — родные пропорции кадров номера: фотография показывается целиком,
   без обрезки по краям (ТЗ 2.17) */
.gal-big{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:zoom-in}
.gal-big img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal-big:hover img{transform:scale(1.03)}
.gal-tag{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;gap:8px;flex-wrap:wrap}
.gal-tag span{border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800;letter-spacing:.01em;
  background:rgba(10,9,8,.76);border:1px solid rgba(236,224,208,.18);backdrop-filter:blur(6px)}
.gal-tag span.hot{background-image:linear-gradient(100deg,#9c5a20,#7d4318);border-color:transparent;
  box-shadow:0 8px 22px rgba(0,0,0,.4)}
.gal-nav{position:absolute;inset:auto 12px 12px;display:flex;align-items:center;gap:10px;z-index:3;cursor:default}
.gal-dots{display:flex;gap:6px;margin-right:auto}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(236,224,208,.4);cursor:pointer;transition:.3s}
.gal-dots i.on{background:var(--gold);width:18px;border-radius:999px}
.gal-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,224,208,.22);cursor:pointer;
  background:rgba(10,9,8,.7);color:#fbf6ee;display:grid;place-items:center;backdrop-filter:blur(6px);transition:.25s}
.gal-btn:hover{background:rgba(224,180,120,.4);border-color:transparent}
.gal-btn svg{width:19px;height:19px;fill:none;stroke:#fbf6ee;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px}
.gal-thumbs img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;opacity:.55;
  cursor:pointer;border:1px solid transparent;transition:.3s;display:block}
.gal-thumbs img.on,.gal-thumbs img:hover{opacity:1;border-color:var(--gold2)}
/* «Все фото» — кнопка вместо шести мелких превью на телефоне */
.gal-all{display:none}

/* прайс номера: спокойный однотонный фон, слева время, справа крупная цена */
.sb-price-cap{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--gold2)}
.space-price{margin-top:0;border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;
  background:#100e0d}
.space-price table.prices{margin-top:0;width:100%;border-collapse:collapse;font-size:15px}
.space-price table.prices th,.space-price table.prices td{padding:16px 18px;text-align:left;
  border-bottom:1px solid rgba(236,224,208,.07);vertical-align:middle}
.space-price table.prices th{color:var(--mut);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;background:rgba(236,224,208,.03)}
.space-price table.prices tbody tr:last-child td{border-bottom:none}
.space-price table.prices tbody tr:hover{background:rgba(224,180,120,.05)}
.space-price td:first-child{color:var(--mut)}
.space-price td:last-child,.space-price th:last-child{text-align:right;white-space:nowrap}
.space-price td:last-child b{font-size:19px;font-weight:800;color:var(--gold)}
.space-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.space-foot .btn{text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.space-foot .note{font-size:13.5px;flex:1 1 200px}

/* ── 5. акции: три компактные карточки с крупными числами ───────────────── */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.promo{border:1px solid var(--line);border-radius:var(--r-card);padding:22px 22px 20px;
  background-image:var(--wood),linear-gradient(160deg,#1b1815,#131110);
  background-size:320px 320px,auto;background-blend-mode:soft-light,normal;
  box-shadow:var(--bevel);transition:.3s}
.promo:hover{transform:translateY(-3px);border-color:rgba(224,180,120,.4)}
.promo b{display:block;font-family:'Unbounded',sans-serif;font-size:clamp(30px,4.4vw,40px);line-height:1;
  color:var(--gold);margin-bottom:12px;letter-spacing:-.01em}
.promo h3{font-size:17px;font-weight:800;margin-bottom:6px}
.promo p{font-size:14.5px;line-height:1.6}
.note-line{font-size:15px;line-height:1.7;margin-top:20px}

/* ── 6. «Почему ЖАРА»: короче и компактнее ──────────────────────────────── */
.about{display:grid;grid-template-columns:1.06fr .94fr;gap:30px;margin-top:34px;align-items:start}
@media(max-width:980px){.about{grid-template-columns:1fr}}
.about-photo{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);position:sticky;top:96px}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
@media(max-width:980px){.about-photo{position:static}}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.feat{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 16px 14px;background:#161311;
  transition:.25s;box-shadow:var(--bevel)}
.feat:hover{border-color:rgba(224,180,120,.36)}
.feat b{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;margin-bottom:5px;line-height:1.35}
.feat span{font-size:13.5px;line-height:1.5;display:block}
.feat .ico{color:var(--gold2);width:19px;height:19px;flex:none}

/* ── 7. отзывы: раньше по странице, рейтинг крупно ─────────────────────── */
.rvs-head{margin-top:30px;gap:18px}
.rvs-score{border:1px solid var(--line);border-radius:var(--r-img);padding:16px 22px;
  background:#161311;gap:16px}
.rvs-score b{font-family:'Unbounded',sans-serif;font-size:clamp(34px,4.6vw,46px);color:var(--gold);
  line-height:1;letter-spacing:-.02em}
.rvs-score i{color:#e8c46b;letter-spacing:3px;font-size:15px;margin-bottom:6px}
.rvs-score span{font-size:13.5px;line-height:1.5}
.rvs-all{color:var(--gold);font-size:14px;font-weight:800;margin-left:auto;border:1px solid var(--line);
  border-radius:999px;padding:13px 22px;background:rgba(224,180,120,.05);transition:.25s}
.rvs-all:hover{border-color:var(--gold);background:rgba(224,180,120,.12)}
.rev{border:1px solid var(--line);border-radius:var(--r-img);padding:22px;background:#161311;position:relative}
.rev .stars{color:#e8c46b;letter-spacing:3px;font-size:15px;margin-bottom:10px}
.rev p{color:var(--mut);font-size:14.5px;line-height:1.7;margin-bottom:0}
/* буква-аватар отзыва: белый текст на мягком янтаре давал 2,7:1, на #a5642a —
   4,4:1 (тоже меньше порога 4,5). На этой меди белый текст держит 5,4:1 и
   7,3:1 — обе ступени градиента проходят AA для мелкого текста. */
.rev .who i{background:linear-gradient(140deg,#95571f,#7d4318)}
.rev .who span{font-size:14px}
.revs-src{font-size:13.5px;margin-top:20px}

/* ── 8. «Как забронировать»: три компактных блока ──────────────────────── */
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:14px;margin-top:32px}
.step{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r-img);
  padding:20px;background:#161311;transition:.25s}
.step:hover{border-color:rgba(224,180,120,.36)}
.step i{font-style:normal;font-family:'Unbounded',sans-serif;font-size:20px;font-weight:700;color:var(--gold);
  line-height:1}
.step b{font-size:16px;font-weight:800;line-height:1.35}

/* ── 9. FAQ ─────────────────────────────────────────────────────────────── */
.faq{gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:#161311}
.faq summary{font-size:16px;padding:18px 54px 18px 20px}
.faq details p{font-size:15px;line-height:1.7;padding:0 20px 18px}

/* ── 10. форма: два смысловых блока ────────────────────────────────────── */
/* display:grid обязателен: раньше он жил в этом же правиле, а без него на
   широком экране «заявка» и «администратор» вставали друг под друга */
.book{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin-top:32px;align-items:start}
.book-card{border:1px solid var(--line);border-radius:var(--r-card);background:#141210;
  padding:clamp(20px,3vw,30px)}
.book-card h3{font-size:clamp(19px,2.4vw,24px);margin-bottom:8px}
.book-card .m-sub{font-size:15px;line-height:1.65;margin-bottom:20px}
.fset{border:1px solid var(--line);border-radius:var(--r-img);padding:16px 16px 14px;margin:0;
  background:#100e0d}
.fset+.fset{margin-top:16px}
.fset legend{padding:2px 10px;margin-left:-4px;font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.fset .fl{margin-top:10px}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.fields2{grid-template-columns:1fr}}
.f-sub{text-transform:uppercase;letter-spacing:.05em;font-size:16px;margin-top:6px}
.f-hint{margin:2px 0 0;text-align:center;font-size:13.5px;line-height:1.5}
.f-err{font-size:13.5px}
.book-aside{border:1px solid var(--line);border-radius:var(--r-card);background:#141210;
  padding:clamp(20px,3vw,30px)}
.book-aside h3{font-size:clamp(17px,2.2vw,21px);line-height:1.35;margin-bottom:16px}
.book-aside ul{list-style:none;display:grid;gap:12px}
.book-aside li{display:flex;gap:11px;font-size:15px;line-height:1.6;color:var(--txt)}
.book-aside li svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--gold2);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.book-aside .call{margin-top:20px;display:grid;gap:9px}
.book-aside .call a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;font-weight:700;font-size:15px;background:rgba(236,224,208,.04);transition:.3s}
.book-aside .call a:hover{border-color:rgba(224,180,120,.45);background:rgba(224,180,120,.09)}
.book-aside .call svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--gold2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.book-aside .call em{font-style:normal;color:var(--mut);font-size:12.5px;display:block;font-weight:400}

/* ── 11. контакты и карта: главный телефон — главный элемент ───────────── */
.find-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:22px;margin-top:32px;align-items:stretch}
.find-map{border:1px solid var(--line);border-radius:var(--r-card);background:#100e0d}
.find-map iframe{filter:grayscale(.85) invert(.9) contrast(.92) brightness(1.04)}
.find-info{border:1px solid var(--line);border-radius:var(--r-card);background:#161311;gap:16px;padding:26px}
.find-phone{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:clamp(21px,2.9vw,28px);
  font-weight:800;color:var(--gold);letter-spacing:-.01em;white-space:nowrap}
.find-phone em{flex:1 1 100%;font-style:normal;font-size:13.5px;font-weight:600;color:var(--mut);
  letter-spacing:0}
.find-phone .ico{width:24px;height:24px;color:var(--gold2)}
.find-info .f-line{font-size:15.5px}
.find-sec{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.find-sec .f-line{font-size:14.5px;color:var(--mut)}
.find-btns .btn{text-transform:uppercase;letter-spacing:.05em;font-size:13.5px}
.same-building{border:1px dashed rgba(224,180,120,.3);border-radius:var(--r-img);padding:20px 22px;
  margin-top:26px;background:rgba(224,180,120,.04);font-size:15px;line-height:1.7;color:var(--txt)}
.same-building a{color:var(--gold);text-decoration:underline;font-weight:700}

/* ── 12. нижняя панель на телефоне: бронь + звонок ─────────────────────── */
.m-bar{display:none}
@media(max-width:880px){
  .m-bar{display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;padding:8px;border-radius:16px;
    background:rgba(12,10,9,.92);border:1px solid rgba(236,224,208,.14);
    box-shadow:0 16px 40px rgba(0,0,0,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .m-bar__book{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;
    background-image:linear-gradient(100deg,#9c5a20,#7d4318);color:#fbf6ee;font-weight:800;font-size:15.5px;
    text-transform:uppercase;letter-spacing:.05em}
  .m-bar__call{display:grid;place-items:center;width:54px;min-height:50px;border-radius:12px;
    border:1px solid rgba(224,180,120,.42);background:rgba(224,180,120,.08);color:var(--gold)}
  .m-bar__call svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  /* панель не должна перекрывать контент и системную зону iPhone */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  footer{padding-bottom:24px}
}

/* ── 13. просмотр фотографий на весь экран ─────────────────────────────── */
.lbx{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  background:rgba(8,7,6,.98);padding:18px}
.lbx.open{display:flex}
.lbx img{max-width:min(1400px,96vw);max-height:86vh;border-radius:var(--r-img);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lbx-x{position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(236,224,208,.2);background:rgba(20,17,15,.92);color:#fbf6ee;font-size:26px;line-height:1}
.lbx-p,.lbx-n{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(236,224,208,.2);background:rgba(20,17,15,.92);color:#fbf6ee;cursor:pointer;
  display:grid;place-items:center}
.lbx-p{left:16px}.lbx-n{right:16px}
.lbx-p svg,.lbx-n svg{width:24px;height:24px;fill:none;stroke:#fbf6ee;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbx-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:var(--mut);font-size:13.5px}
@media(max-width:640px){.lbx-p{left:8px}.lbx-n{right:8px}.lbx-p,.lbx-n{width:44px;height:44px}}

/* ── 14. бегущая строка и подвал: сюда переехала текстура дерева ───────── */
.marquee{border-top:1px solid rgba(224,180,120,.2);border-bottom:1px solid rgba(224,180,120,.2);
  background-color:#14110f;background-image:var(--wood);background-size:320px 320px;
  background-blend-mode:soft-light;padding:14px 0}
.marquee span{color:var(--mut);font-size:13px}
.marquee span b{color:var(--gold2);text-shadow:none}
footer{border-top:1px solid var(--line);background-color:#121010;background-image:var(--wood);
  background-size:320px 320px;background-blend-mode:soft-light;margin-top:0}
footer .f-col a{color:var(--mut);font-size:14px}
footer .f-col b{color:var(--txt);display:block;margin-bottom:8px;font-size:14px}
.f-col a:hover{color:var(--gold)}
.copy{color:#9a8f85;font-size:13px}

/* ── 14б. читаемость заливок ───────────────────────────────────────────────
   Молочный текст на мягком янтаре #c68b59 даёт всего 2,70:1 — на телефоне это
   не кнопка, а пятно. На плотной меди тот же текст даёт 5,01:1 (#9c5a20) и
   7,26:1 (#7d4318), то есть проходит AA. Янтарь остаётся для свечений, рамок и
   иконок, а заливки кнопок и активных пилюль идут медью. */
.nav-links a.active,.cta-btn,.cta-m,.btn-primary,.f-sub,.m-bar__book,.to-top,
.cdot.on,.cal-day.on,.cal-day.on.we,.cal-time.on,.cal-done,
.cf-acts .mini-btn.b,.mini-btn.b,.ec-btn,.gal-tag span.hot,.step i{
  background-image:linear-gradient(100deg,#9c5a20,#7d4318)}
.btn-primary:hover,.cta-btn:hover,.f-sub:hover,.mini-btn.b:hover,.v-btn:hover,.cube-arrow:hover{
  background-image:linear-gradient(100deg,#a56026,#84471a)}

/* ── 15. адаптив: 375 / 390 / 430, планшет, десктоп ────────────────────── */
@media(max-width:880px){
  section{padding:56px 0}
  h2{max-width:none}
  /* мелкий текст на телефоне крупнее на 1–2 px, межстрочный интервал больше (ТЗ 2.2) */
  .sec-sub{font-size:16px;line-height:1.75}
  .space-lead{font-size:16px;line-height:1.75}
  .space-list li{font-size:15px}
  .space-incl{font-size:15px}
  .feat span{font-size:14px}
  .rev p{font-size:15px}
  .promo p{font-size:14.5px}
  .note-line{font-size:15px}
  .faq summary{font-size:15.5px}
  .faq details p{font-size:15px}
  .about-photo{aspect-ratio:auto}

  /* первый экран: логотип, заголовок, преимущества, две кнопки */
  .hero{padding:92px 0 96px}
  .hero-logo{margin:0 auto 14px;width:clamp(112px,32vw,150px)}
  .hero-attrs{font-size:14.5px;gap:14px 0;justify-content:center}
  .hero-attrs li{padding-right:13px;margin-right:13px}
  .hero-attrs li+li::before{left:-13px}
  .hero-note{font-size:13.5px;justify-content:center}
  .hero-banya .hero-btns{gap:10px}
  .hero-banya .hero-btns .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;
    text-transform:uppercase;letter-spacing:.04em;font-size:14.5px}

  /* номера: одна большая фотография + 3 превью + «Все фото» */
  .space{border-radius:var(--r-card)}
  .gal-big{aspect-ratio:4/3}
  .gal-thumbs{grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
  .gal-thumbs img:nth-child(n+4){display:none}
  .gal-thumbs img{aspect-ratio:4/3}
  /* кнопка лежит поверх большого кадра (снизу-справа её занимают превью) */
  .gal-all{display:inline-flex;align-items:center;gap:8px;position:absolute;right:12px;top:12px;z-index:4;
    border:1px solid rgba(236,224,208,.22);border-radius:999px;padding:10px 16px;font-family:inherit;
    font-size:13.5px;font-weight:800;color:#fbf6ee;background:rgba(10,9,8,.74);backdrop-filter:blur(8px);
    cursor:pointer}
  .gal-all span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;
    background:rgba(224,180,120,.22);font-size:12px;color:var(--gold)}
  .gal-nav{inset:auto auto 12px 12px;gap:8px}
  .gal-btn{width:40px;height:40px}
  .gal-dots{background:rgba(10,9,8,.55);border-radius:999px;padding:7px 10px;backdrop-filter:blur(6px)}
  .space-body{padding:20px 18px 24px}
  /* прайс: время слева, крупная цена справа, строки выше */
  .space-price table.prices{font-size:14.5px}
  .space-price table.prices th,.space-price table.prices td{padding:15px 14px}
  .space-price table.prices th{font-size:11.5px}
  .space-price td:last-child b{font-size:19px}
  .space-foot{gap:10px}
  .space-foot .btn{width:100%;justify-content:center}
  .space-foot .note{flex:1 1 100%;text-align:center}

  /* акции: компактные карточки «число слева, текст справа» — меньше скролла */
  .promos{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .promo{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:center;padding:16px 18px}
  .promo b{grid-row:1/3;margin:0;font-size:clamp(26px,8vw,34px);min-width:96px}
  .promo h3{margin-bottom:3px;font-size:16px}
  .promo p{font-size:14px;line-height:1.55}

  /* «Почему ЖАРА»: компактная сетка 2×3 */
  .about{gap:22px;margin-top:26px}
  .about .sec-sub{font-size:15.5px;line-height:1.7}
  .feat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .feat{padding:14px 13px 12px;border-radius:12px}
  .feat b{font-size:14px;gap:8px;margin-bottom:4px}
  .feat .ico{width:17px;height:17px}
  .feat span{font-size:13px;line-height:1.45}
  .about-photo{border-radius:var(--r-img)}

  /* отзывы */
  .rvs-head{gap:14px;margin-top:26px}
  .rvs-score{padding:14px 16px;border-radius:14px}
  .rvs-score b{font-size:34px}
  .rvs-all{margin-left:0;width:100%;text-align:center;padding:15px 18px}
  .revs{margin-top:20px}
  .rev{padding:18px 16px}

  /* шаги: три компактных строки вместо высоких карточек */
  .steps{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .steps-arrow{display:none}
  .step{flex-direction:row;align-items:center;gap:14px;padding:15px 16px}
  /* номер шага — просто крупные цифры: медный кружок из style.css остаётся
     только на компьютере, где шаги стоят в три колонки */
  .step i{width:auto;height:auto;min-width:34px;background:none;box-shadow:none;border-radius:0;
    font-size:19px;color:var(--gold)}
  .step b{font-size:15px}

  /* форма */
  .book{grid-template-columns:1fr;gap:16px;margin-top:26px}
  .book-card,.book-aside{border-radius:var(--r-img);padding:18px 16px}
  .fset{padding:14px 14px 2px}
  .f-hint{font-size:13px}
  input,select,textarea{font-size:16px;padding:15px 14px}
  .f-sub{min-height:56px}

  /* страх от вылезания за рамки на реальных телефонах: Safari/Chrome на Android
     считают свои системные метрики по-разному, поэтому полям формы — вся ширина
     карточек и запрет раздуваться: без min-width:0 поле в грид-ячейке не сжимается,
     а без max-width:100% chrome-овский колбэк у datepicker выпирает на узких экранах */
  form,.fset,.fields2,.book-card,.book-aside{max-width:100%;min-width:0}
  #book input,#book select,#book textarea{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .fields2 > div{min-width:0}
  /* дата: нативный control рисуется крупнее текста — даём ему явно дышать,
     но не шире карточки; на iOS шрифт меньше 16px вызывает зум при фокусе */
  #bDate{font-size:16px;line-height:1.2;-webkit-appearance:none;appearance:none}
  #bDate::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.7}
  /* от горизонтального дрожания при открытии клавиатуры/календаря */
  html,body{overflow-x:clip}

  /* контакты */
  .find-grid{grid-template-columns:1fr;gap:16px}
  .find-map{min-height:240px}
  .find-info{padding:20px 18px;gap:14px}
  .find-phone{font-size:clamp(20px,6.4vw,24px)}
  .find-btns .btn{flex:1 1 100%;text-align:center}
  .same-building{font-size:14.5px;padding:18px}
}

/* планшет и узкий десктоп: две карточки номеров в столбик уже есть, акции — по 2 */
@media(min-width:881px) and (max-width:1180px){
  .promos{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr 1fr}
}
/* широкий десктоп: держим читаемую колонку и не растягиваем кадры */
@media(min-width:1440px){
  .wrap{max-width:1240px}
}
@media(min-width:1900px){
  .wrap{max-width:1320px}
}