/* =========================================================
   5 Senses Spa — 5sensesspa.com
   Базовая тема: тёплый песок, эвкалипт, приглушённое золото
   ========================================================= */

:root{
  --sand:#f7f2ea;
  --sand-2:#efe6d8;
  --paper:#fffdfa;
  --ink:#2a2723;
  --ink-soft:#5d564c;
  --ink-mute:#8a8175;
  --green:#2f5d4f;
  --green-soft:#dfe9e2;
  --green-deep:#22463b;
  --gold:#b8894a;
  --gold-soft:#f0e2cd;
  --line:#e5dbcb;
  --radius:18px;
  --radius-s:12px;
  --shadow:0 18px 50px -28px rgba(42,39,35,.35);
  --maxw:1240px;
  --rail:322px;
  --pad:22px;
  /* высота липкой шапки на телефоне и путь, который параллакс-баннер
     проходит закреплённым, — оба значения используются в медиазапросах */
  --header-h:64px;
  --parallax-travel:60vh;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 .5em;
  letter-spacing:.2px;
}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(27px,3.4vw,38px);margin-top:0}
h3{font-size:clamp(21px,2.2vw,25px)}
h4{font-size:19px;font-family:"Manrope",sans-serif;font-weight:700}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.5em}
strong{font-weight:700;color:var(--ink)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lead{font-size:19px;color:var(--ink-soft)}
.muted{color:var(--ink-mute);font-size:15px}
.center{text-align:center}

/* ---------- Шапка ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,250,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:76px;
}
.logo{display:flex;align-items:center;gap:12px}
.logo:hover{text-decoration:none}
.logo-mark{
  width:42px;height:42px;flex:none;border-radius:50%;
  background:linear-gradient(140deg,var(--gold-soft),var(--green-soft));
  border:1px solid var(--line);
  display:grid;place-items:center;
  font-family:"Cormorant Garamond",serif;font-size:20px;color:var(--green);
}
.logo-text b{
  display:block;font-family:"Cormorant Garamond",serif;
  font-size:24px;font-weight:600;color:var(--ink);line-height:1.05;
}
.logo-text span{display:block;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-mute)}

.nav{display:flex;gap:26px;align-items:center}
.nav a{
  color:var(--ink-soft);font-size:15px;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--green);text-decoration:none;border-bottom-color:var(--gold)}
.nav a.is-active{color:var(--green);border-bottom-color:var(--green)}

.btn{
  display:inline-block;padding:13px 26px;border-radius:999px;
  background:var(--green);color:#fff;font-weight:600;font-size:15px;
  border:1px solid var(--green);cursor:pointer;transition:.2s;
}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green-soft);color:var(--green-deep)}

.burger{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--green);cursor:pointer}

/* ---------- Раскладка: контент + рекламный рельс ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail);
  gap:38px;
  align-items:start;
  padding:38px 0 60px;
}
/* грид-элементы должны уметь сжиматься уже своего min-content */
.layout>*{min-width:0}

/* Заголовок и вводный абзац — отдельный элемент сетки в левой колонке.
   На десктопе рельс с рекламой поднимается вровень с ними (span 2 строки),
   на мобильных вступление остаётся выше баннера. */
.page-intro{max-width:820px}
.page-intro h1{margin-bottom:14px}
.page-intro .lead{margin-bottom:0}
.layout:has(.page-intro)>.page-intro{grid-column:1;grid-row:1}
.layout:has(.page-intro)>main{grid-column:1;grid-row:2}
.layout:has(.page-intro)>.rail{grid-column:2;grid-row:1 / span 2}
.rail{width:var(--rail);position:sticky;top:104px}

/* Рекламный контейнер: 300×600 плюс рамка и подпись = 320px по внешнему краю */
.ad-unit{
  width:322px;max-width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  padding:10px;
  display:flex;flex-direction:column;gap:8px;
}
.ad-label{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-mute);text-align:left;
}
/* Размер зарезервирован до загрузки рекламы: подстановка баннера
   не двигает вёрстку (CLS = 0). contain отсекает влияние содержимого
   iframe на пересчёт остальной страницы. */
.ad-slot{
  width:100%;max-width:300px;min-height:600px;margin:0 auto;
  display:grid;place-items:center;
  background:var(--sand-2);border-radius:8px;
  color:var(--ink-mute);font-size:13px;text-align:center;
  contain:layout paint style;
}
.ad-slot>iframe{max-width:100%;border:0}

/* Верхний мобильный формат — 480×320.
   Ширина 480px не помещается ни в один телефон (типичные 360–414px), поэтому
   слот ужимается по ширине, а aspect-ratio удерживает пропорцию: резерв высоты
   всегда соответствует реальной ширине и вёрстка не дёргается при подстановке.
   min-height:0 обязателен — иначе сработает базовые 600px от .ad-slot. */
/* Верхний блок — адаптивный: в кабинете РСЯ размер ограничен только шириной
   обрамляющего контейнера. Значит от вёрстки требуется ровно одно — задать эту
   ширину и не мешать. Никаких фиксированных размеров, масштабирования и
   обрезки: система подберёт креатив под фактическую ширину сама.
   min-height держит резерв под типовой креатив, чтобы подстановка не сдвигала
   вёрстку слишком заметно; идеального нуля с адаптивным блоком не добиться —
   высота заранее неизвестна. */
.ad-frame{width:100%}
.ad-slot-top{
  display:block;             /* не grid: сетка с place-items осталась от заглушки
                                и для адаптивного блока только лишняя переменная */
  width:100%;
  max-width:none;
  height:auto;
  min-height:250px;
  contain:none;              /* никакой изоляции: рекламный код меряет контейнер
                                и своё положение сам, мешать ему нечем */
  background:none;
}
/* контейнер занимает всю доступную ширину — чем шире, тем крупнее креатив
   может подобрать система */
.ad-mobile .ad-unit{width:100%;max-width:600px}

/* ── Параллакс-блок 300×600 (только мобильная версия) ─────────────────────────
   Баннер закреплён внутри собственного контейнера: пока пользователь прокручивает
   этот участок страницы, блок остаётся на экране, а затем уезжает вместе с ним.
   Контент он не перекрывает — занимает своё место в потоке. */
.ad-parallax{display:none}
.rail-note{
  margin-top:16px;padding:16px 18px;
  border-left:3px solid var(--gold);
  background:var(--paper);border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:14px;color:var(--ink-soft);
}
.rail-note b{display:block;margin-bottom:6px;font-size:15px}

/* Мобильный контейнер того же блока — сразу под шапкой. На десктопе скрыт. */
.ad-mobile{display:none}

/* ---------- Хиро ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 82% -12%,var(--gold-soft),transparent 62%),
    radial-gradient(760px 420px at 8% 108%,var(--green-soft),transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.hero .wrap{padding-top:56px;padding-bottom:52px}
.hero-inner{max-width:760px}
.eyebrow{
  display:inline-block;margin-bottom:16px;
  font-size:12px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.hero h1{margin-bottom:18px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ---------- Секции и карточки ---------- */
.section{margin-bottom:52px}
.section-head{margin-bottom:26px;max-width:760px}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px 22px;
  box-shadow:var(--shadow);
}
.grid{display:grid;gap:22px}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.sense-card .sense-icon{
  width:46px;height:46px;border-radius:14px;margin-bottom:14px;
  display:grid;place-items:center;font-size:22px;
  background:var(--green-soft);
}
.sense-card h3{margin-bottom:8px}
.sense-card p{margin-bottom:0;font-size:16px;color:var(--ink-soft)}

/* Таблицы */
.data-table{width:100%;border-collapse:collapse;font-size:16px;margin-bottom:1.4em}
.data-table caption{
  caption-side:top;text-align:left;
  font-weight:700;margin-bottom:12px;color:var(--ink);
}
.data-table th,.data-table td{
  text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;
}
.data-table th{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-mute);font-weight:600}
.data-table tr:last-child td{border-bottom:0}
/* широкие таблицы прокручиваются внутри своего контейнера, а не растягивают страницу */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.table-scroll .data-table{margin-bottom:0}
.table-scroll+p,.table-scroll+h3{margin-top:1.2em}

/* Карточка рецепта / процедуры */
.recipe{
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px 16px;margin-bottom:20px;
}
.recipe h3{margin-bottom:4px}
.recipe .meta{
  font-size:13px;color:var(--ink-mute);margin-bottom:14px;
  text-transform:uppercase;letter-spacing:1.1px;
}
.recipe ul,.recipe ol{margin-bottom:.9em}
.recipe .warn{
  font-size:14px;color:#7a4b2a;background:var(--gold-soft);
  border-radius:8px;padding:10px 14px;margin:6px 0 0;
}

/* Содержание страницы */
.toc{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px 14px;margin:0 0 34px;
}
.toc b{display:block;margin-bottom:10px;font-size:15px}
.toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:30px}
.toc li{margin-bottom:6px;font-size:15px}
@media (max-width:700px){.toc ol{columns:1}}

/* Маркер «можно / нельзя дома» */
.tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;
  padding:3px 10px;border-radius:999px;vertical-align:middle;
}
.tag-yes{background:var(--green-soft);color:var(--green-deep)}
.tag-no{background:#f6ddd6;color:#8c3b23}
.tag-part{background:var(--gold-soft);color:#7a5424}

/* Шаги */
.steps{counter-reset:step;list-style:none;padding:0}
.steps li{
  position:relative;padding-left:52px;margin-bottom:20px;
}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;
  background:var(--green-soft);color:var(--green-deep);
  display:grid;place-items:center;font-weight:700;font-size:15px;
}

/* FAQ */
details.faq{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:16px 20px;margin-bottom:12px;
}
details.faq summary{
  cursor:pointer;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:12px 0 2px;color:var(--ink-soft);font-size:16px}

/* Уведомления */
.note{
  background:var(--gold-soft);border:1px solid #e8d5b6;
  border-radius:var(--radius-s);padding:16px 20px;font-size:15px;color:#6b4f28;
}
.note strong{color:#5a4120}

.callout{
  background:var(--green-deep);color:#eaf1ec;
  border-radius:var(--radius);padding:34px 34px 30px;
}
.callout h2{color:#fff}
.callout p{color:#cfded5}
.callout .btn{background:var(--gold);border-color:var(--gold)}
.callout .btn:hover{background:#a2763c;border-color:#a2763c}

/* Хлебные крошки */
.crumbs{font-size:14px;color:var(--ink-mute);padding:16px 0 0}
.crumbs a{color:var(--ink-mute)}

/* Контакты */
.contact-list{list-style:none;padding:0}
.contact-list li{display:flex;gap:12px;margin-bottom:14px}
.contact-list .ic{width:24px;flex:none;text-align:center}

.map-stub{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(120deg,var(--green-soft),var(--sand-2));
  min-height:280px;display:grid;place-items:center;
  color:var(--green-deep);text-align:center;padding:20px;
}

/* Форма */
.form-row{display:grid;gap:14px;margin-bottom:14px}
.form-row.two{grid-template-columns:1fr 1fr}
label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
input,textarea,select{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green-soft);border-color:var(--green)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft)}
.check input{width:auto;margin-top:4px}

/* ---------- Подвал ---------- */
.site-footer{
  background:var(--green-deep);color:#c9d8d0;
  padding:48px 0 26px;margin-top:20px;font-size:15px;
}
.site-footer h4{color:#fff;margin-bottom:14px;font-size:16px}
.site-footer a{color:#c9d8d0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.footer-grid ul{list-style:none;padding:0}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.13);
  margin-top:32px;padding-top:18px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13px;color:#9fb4aa;
}
.disclaimer{
  font-size:13px;color:#9fb4aa;margin-top:14px;line-height:1.6;
}

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

/* Планшет: рельс уходит под текст */
@media (max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:30px}
  /* одна колонка: порядок задаётся order, явную расстановку по строкам сбрасываем
     (селекторы повторяют десктопные — одинаковая специфичность, побеждает поздний) */
  .layout:has(.page-intro)>.page-intro,
  .layout:has(.page-intro)>main,
  .layout:has(.page-intro)>.rail{grid-column:auto;grid-row:auto}

  /* Реклама переезжает под шапку, десктопный контейнер в рельсе скрывается */
  /* колонка, а не строка: тогда align-self:stretch у .ad-unit тянет по ширине
     (нужно для полноэкранного режима на узких экранах ниже).
     Отступ сверху минимальный: чем выше блок, тем больше его площади попадает
     в экран, а видимым показ считается при ≥50% площади в течение 2 секунд. */
  .ad-mobile{display:flex;flex-direction:column;align-items:center;padding:14px 0 2px}
  .rail .ad-unit{display:none}

  /* ── Параллакс ──────────────────────────────────────────────────────────
     Баннер закреплён по центру экрана и не двигается, а текст проезжает
     поверх него. Достигается тремя вещами:
       1) контент получает непрозрачную подложку и верхний слой (z-index 1);
       2) баннер — position: fixed по центру вьюпорта на нижнем слое (z-index 0);
       3) в потоке статьи оставлено «окно» — участок без подложки, через который
          баннер и виден.
     Отступы между секциями переносим в паддинги: иначе баннер просвечивал бы
     в щелях между ними. */
  main > *:not(.ad-parallax){
    position:relative;
    z-index:1;
    background:var(--sand);
  }
  main > .section{margin-bottom:0;padding-bottom:40px}
  main > .toc{margin-bottom:0;padding-bottom:26px}

  /* окно в потоке: высота задаёт, сколько прокрутки баннер остаётся на виду */
  .ad-parallax{
    display:block;
    height:calc(600px + var(--parallax-travel));
    margin:0;
    background:transparent;
  }
  .ad-parallax-inner{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:0;
    /* явная ширина обязательна: у fixed-элемента без неё ширина считается
       по содержимому, а содержимое опирается на max-width:100% от родителя —
       получается замкнутый круг и блок схлопывается.
       100% (а не 100vw) — vw включает ширину полосы прокрутки. */
    width:322px;
    max-width:100%;
    display:none;                 /* вне окна баннера нет вовсе: он не должен
                                     занимать площадь экрана, будучи закрытым
                                     контентом — это давало бы видимые показы,
                                     которых никто не видел */
  }
  .ad-parallax.is-live .ad-parallax-inner{
    display:flex;flex-direction:column;align-items:center;
  }

  /* --- Скорость первой отрисовки на телефоне ---------------------------- */

  /* backdrop-filter в шапке заставляет композитор пересчитывать размытие
     на каждом кадре прокрутки — на мобильных заменяем плотным фоном */
  .site-header{background:var(--paper);backdrop-filter:none}

  /* градиенты хиро — заметная площадь перекраски на слабом GPU */
  .hero{background:var(--paper)}

  /* секции ниже первого экрана не размечаются до подхода прокрутки;
     заданная высота-заглушка не даёт скакать полосе прокрутки */
  main .section{content-visibility:auto;contain-intrinsic-size:auto 900px}

  .rail{position:static;width:100%;display:flex;flex-direction:column;align-items:center}

  /* Floor Ad липнет к низу экрана и перекрывает нижнюю часть страницы.
     Запас снизу в подвале — чтобы последняя строка не оказалась под ним.
     Отступ внутри подвала, а не у body: иначе под тёмным подвалом появилась бы
     светлая полоса фона. */
  .site-footer{padding-bottom:96px}
  .ad-unit{width:min(322px,100%)}
  .rail{width:100%}
  .rail-note{width:min(620px,100%)}
}

@media (max-width:900px){
  :root{--pad:20px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .hero .wrap{padding-top:44px;padding-bottom:40px}
}

/* Телефон */
@media (max-width:700px){
  :root{--pad:16px}
  body{font-size:16px;line-height:1.65}

  .site-header .wrap{min-height:64px;gap:12px}
  .logo-mark{width:36px;height:36px;font-size:17px}
  .logo-text b{font-size:20px}
  .logo-text span{font-size:10px;letter-spacing:1.8px}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px var(--pad) 14px;
    box-shadow:0 20px 30px -22px rgba(42,39,35,.5);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .burger{display:block;padding:4px 6px}

  .layout{padding:24px 0 44px;gap:26px}
  .page-intro{padding-top:20px}
  .page-intro+.layout{padding-top:20px}
  .section{margin-bottom:40px}

  .hero .wrap{padding-top:34px;padding-bottom:32px}
  .hero-actions{gap:10px}
  .btn{padding:12px 20px;font-size:14px}
  .hero-actions .btn{flex:1 1 auto;text-align:center}

  .grid{gap:16px}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .card{padding:20px 18px 16px}
  .callout{padding:26px 20px 22px}
  .toc{padding:18px 18px 12px}
  .recipe{padding:18px 18px 12px;border-radius:0 12px 12px 0}
  .note,.rail-note{padding:14px 16px;font-size:14px}

  .steps li{padding-left:44px}
  .steps li::before{width:30px;height:30px;font-size:14px}

  .form-row.two{grid-template-columns:minmax(0,1fr)}
  input,textarea,select{font-size:16px;min-width:0} /* 16px — иначе iOS зумит форму */

  .data-table{font-size:15px}
  .data-table th,.data-table td{padding:11px 10px}
  .table-scroll .data-table{min-width:520px}       /* прокрутка внутри контейнера */
  .table-scroll{
    margin-inline:calc(-1 * var(--pad));           /* таблица во всю ширину экрана */
    padding-inline:var(--pad);
  }

  .footer-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .site-footer{padding:36px 0 96px}   /* нижний запас под липкий Floor Ad */
  .footer-bottom{gap:8px}
}

/* Узкие экраны (< 352px): блок 300×600 не помещается в поля — выпускаем его на всю ширину */
@media (max-width:351px){
  /* верхний блок теперь резиновый — растягивать его отрицательными полями
     больше не требуется; правило осталось только для параллакса ниже */
  .ad-slot{width:100%;max-width:300px}
  .ad-label{padding-left:10px}
  /* у параллакса поля уже, чтобы 300px помещались внутрь рамки */
  .ad-parallax .ad-unit{padding:10px 6px}
  h1{font-size:29px}
  .crumbs{font-size:13px}
}

/* Метка отрисовки. Пустой фон у невидимого псевдоэлемента: файл запрашивает
   только тот клиент, который действительно разобрал стиль и построил макет.
   Отдаётся с запретом кеширования, поэтому отмечает каждый просмотр, а не
   только первый, и не требует выполнения скриптов. */
body::after{content:"";position:fixed;left:-9999px;top:0;width:1px;height:1px;
  background-image:url(/r.gif);pointer-events:none}