:root{--brand:#5e3a4e;--brand2:#7c536b;--text:#2b2b2b}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 "Adamina",serif;color:var(--text)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===== TOPBAR ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;   /* ← больше не серый */
  color: #fff;
  /* чтобы псевдо-элемент мог лечь поверх */
  position: sticky;
}
.topbar::before{
  content: "";
  position: absolute;
  inset: 0;
  /* тёплая «вуаль»: слегка затемняет фон под текстом */
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.32));
  pointer-events: none;
  z-index: -1; /* вуаль позади контента топбара */
}
.topbar__row{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.topbar__nav{display:flex;gap:10px;flex-wrap:wrap}
.topbar__link{padding:6px 12px;border:1px solid rgba(255,255,255,.35);border-radius:4px;color:#fff}
.topbar__link:hover{background:rgba(255,255,255,.12)}
.topbar__contacts{display:flex;gap:16px;white-space:nowrap}
.topbar__contacts a{color:#fff}

/* ===== HERO ===== */
.hero{position:relative;background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.hero__inner{position:relative;color:#fff;text-align:center;padding:56px 0 36px}
.brand{position:relative;display:inline-block;padding:18px 24px 28px}
.brand::before,.brand::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:840px;height:84px;background:url("../img/logo-decor.png") no-repeat center/contain;opacity:.95
}
.brand::before{top:-66px}
.brand::after{bottom:-56px}
.brand__title{font:700 58px/1.15 "Vidaloka",serif;letter-spacing:.06em;margin:0}
.brand__subtitle{margin-top:8px;letter-spacing:.12em;font-size:15px}

/* ===== NAVBAR: зелёный «мрамор» ===== */

/* Убираем маркеры и возвращаем flex-раскладку */
.navbar .main-nav{ 
  display:flex; align-items:center; flex-wrap:wrap; gap:22px;
  margin:0; padding:14px 20px; list-style:none;
}
.navbar .main-nav > li{ list-style:none; margin:0; padding:0; position:relative; }

/* Ссылка меню — читаемо на мраморе */
.main-nav__link{
  display:block;
  padding:10px 14px;
  font-family:"Adamina", serif;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:#3a2a29;         /* тёмно-коричневый — читаемо */
  text-shadow:0 1px 0 rgba(255,255,255,.85);
  border-radius:6px;
  transition:background-color .15s ease, color .15s ease;
}
.main-nav__link:hover,
.main-nav__item.active > .main-nav__link{
  background: rgba(255,255,255,.18);
  color:#221414;
}

/* Выпадающее подменю */
.has-children > .main-nav__dropdown{
  display:none;
  position:absolute; left:0; top:100%;
  min-width:260px; padding:8px 0;
  background:#fff; border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  list-style:none; margin:6px 0 0;
  z-index:30;
}
.has-children:hover > .main-nav__dropdown{ display:block; }
.main-nav__dropdown a{
  display:block; padding:10px 16px; color:#2c1c23; text-decoration:none;
}
.main-nav__dropdown a:hover{ background:#f3f0f1; }

/* сама полоса меню (используем контейнер внутри .navbar как «трей») */
.navbar{
  background: transparent;
}
.navbar .container{
  /* ширина как у карусели */
  max-width: 1160px;
  /* отступ от баннера сверху и снизу */
  margin: 16px auto 26px;
  /* «планка» меню */
  padding: 0;                    /* паддинг даём ссылкам */
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  /* 1-й слой — мраморная подложка с плавным исчезновением вниз,
     2-й слой — родной фиолетовый градиент */
  background:
    url("../img/slider-row-bg.png") center top/cover no-repeat,
    linear-gradient(180deg,#7b5870 0%, #5b3c48 100%);
}

/* список ссылок внутри планки */
.main-nav{
  display:flex;
  align-items:center;
  justify-content:space-between; /* равномерно распределяем как на старом */
  gap: 8px;
  padding: 12px 22px;
  margin: 0;
  list-style: none;
}

/* пункт меню */
.main-nav__item{ position: relative; }

/* ссылка */
.main-nav__link{
  display:block;
  padding: 12px 14px;
  color:#f2ecec;
  text-decoration:none;
  text-transform:uppercase;
  font-family:"Adamina", serif;
  font-size: 16px;
  letter-spacing:.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  border-radius: 6px;
  transition: background .15s ease,color .15s ease,transform .15s ease;
}

/* hover/active подчёркиваем, но не «липко» */
.main-nav__link:hover,
.main-nav__item.active > .main-nav__link{
  color:#fff;
  background: rgba(255,255,255,.08);
}

/* чуть «поднять» при ховере — аккуратно */
@media (hover:hover){
  .main-nav__link:hover{ transform: translateY(-1px); }
}

/* небольшой запас по адаптиву */
@media (max-width: 1280px){
  .navbar .container{ margin: 12px auto 22px; }
  .main-nav__link{ font-size:15px; padding: 10px 12px; }
}

/* ===== Фон «бежевой» области под меню и каруселью ===== */
/* используется текстура columns-container-bg.png */
.columns-container{
  background:
    url("../img/columns-container-bg.png") center top repeat-x,
    #efe7de; /* базовый бежевый */
}

/* заголовок под меню */
.lead-h2{padding:32px 16px;text-align:center;background:#f3eee8}
.lead-h2 h2{font:400 40px/40px "Vidaloka",serif;text-transform:uppercase;color:#695049;margin:0}

/* ===== КАРУСЕЛЬ УСЛУГ ===== */
.services-carousel{--cards:3;--gap:28px;position:relative;margin:40px auto 24px;padding:28px 48px;max-width:1160px;background:linear-gradient(180deg,#96ae8a 0%,#cfd8c8 100%);border-radius:8px;box-shadow:0 14px 24px rgba(0,0,0,.12)}
.services-carousel .sc-viewport{overflow:hidden}
.services-carousel .sc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100%-(var(--gap)*(var(--cards)-1)))/var(--cards));gap:var(--gap);transition:transform .6s ease}
.sc-item{list-style:none}
.sc-card{display:block;text-align:center;color:inherit}
.sc-img{display:block;aspect-ratio:4/3;border:18px solid #fff;outline:1px solid #d5d0c7;box-shadow:0 8px 18px rgba(0,0,0,.18);margin-bottom:18px;background:#fff}
.sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.sc-title{display:block;font:26px/1.15 "Adamina",serif;color:#5a2e43;text-transform:uppercase}
.sc-more{display:inline-block;margin-top:12px;font-size:14px;letter-spacing:.08em;border-bottom:1px dashed currentColor;color:#7b3e57}
.sc-more:hover{color:#4a2638}
.sc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:110px;background:center/contain no-repeat;opacity:.85;border:0;cursor:pointer}
.services-carousel .sc-prev{left:8px;background-image:url("../img/left_but.png")}
.services-carousel .sc-next{right:8px;background-image:url("../img/right_but.png")}

/* ===== АДАПТИВ ===== */
@media (max-width:1100px){
  .services-carousel{--cards:2;padding:24px 42px}
  .brand__title{font-size:44px}
  .brand::before,.brand::after{width:620px}
}
@media (max-width:680px){
  .services-carousel{--cards:1;padding:18px 38px}
  .brand__title{font-size:36px}
  .brand::before,.brand::after{width:480px}
  .topbar__contacts{display:none}
}
.hero__inner{position:relative; padding:100px 0 88px; text-align:center; color:#fff}
.brand::before,.brand::after{width:920px; height:92px; opacity:.95}
.brand::before{top:-82px}
.brand::after{bottom:-72px}
@media (max-width:960px){
  .brand::before,.brand::after{width:620px; height:72px}
  .hero__inner{padding:76px 0 66px}
}
@media (max-width:640px){
  .brand::before,.brand::after{width:480px; height:56px}
  .hero__inner{padding:60px 0 52px}
}
.site-footer a{color:#5e3a4e}
.site-footer .footer__col a{font-size:15px}
/* слой меню поверх контента */
.navbar{ position:relative; z-index: 900; }

/* выпадашка */
.main-nav__item.has-children .main-nav__dropdown{
  display:none; position:absolute; left:0; top:100%;
  min-width:260px; padding:8px 0; list-style:none;
  background:#fff; color:#2c1c23; box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.main-nav__item.has-children:hover .main-nav__dropdown{ display:block; }

/* ---------- CTA (нижний баннер) ---------- */
.home-column .item-link{ display:block; position:relative; overflow:hidden; border-radius:10px; }
.home-column .img-box{ position:relative; }
.home-column .img-box .item-img{
  display:block; width:100%; height:auto;
  transition: transform .5s ease;
  transform-origin:50% 50%;
}

/* Завитушка */
.home-column .item-html .decor{
  width:320px; height:24px; margin:0 auto 10px;
  background:url("../img/decor-top.png") center no-repeat;
  transition: transform .7s ease;
}

/* Ховер-эффекты как на видео */
.home-column .item-link:hover .img-box .item-img{ transform: scale(1.03); }
.home-column .item-link:hover .item-html .decor{ transform: rotate(360deg); }

/* Текст на баннере оставим читаемым */
.home-column .item-html{
  text-align:center; color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.home-column .item-html .more{
  display:inline-block; margin-top:12px; padding:8px 18px;
  border:1px solid rgba(255,255,255,.9); border-radius:4px;
}
.home-column .item-link:hover .more{ background:#fff; color:#5e3a4e; }

/* ---------- FOOTER ---------- */
.site-footer{background:#f4f1ef;color:#544a50;margin-top:0px;}
.site-footer .container{max-width:1180px;margin:0 auto;padding:0 16px;}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0;}
.footer__title{font-weight:700;margin-bottom:10px;}
.footer__col a{display:block;margin:.2rem 0;color:#5b3c48;text-decoration:none;}
.footer__col a:hover{text-decoration:underline;}
.footer__bottom{border-top:1px solid #e5e1e7;display:flex;justify-content:space-between;gap:12px;padding:14px 0;font-size:14px;color:#6f6a6d;}


/* ===== CTA (нижняя широкая плашка) ===== */
.cta-bottom{
  position:relative;
  overflow:hidden;
  padding:84px 16px;
  background:#f3eee8;
}

/* фон баннера: будет зумиться при ховере */
.cta-bottom__bg{
  position:absolute; inset:0;
  background: url("../img/footer_ban.jpg") center/cover no-repeat; /* <-- твоя картинка */
  transform: scale(1);                     /* исходный масштаб */
  transition: transform 1.1s ease;         /* плавность зума */
  will-change: transform;
}

/* лёгкая «вуаль» поверх фона для читабельности текста */
.cta-bottom::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(35,26,33,.28), rgba(35,26,33,.24));
  pointer-events:none; z-index:1;
}

.cta-bottom__inner{
  position:relative; z-index:2;
  max-width:980px; margin:0 auto; text-align:center; color:#fff;
}

/* завитушка */
.cta-bottom__decor{
  width:540px; height:60px; margin:0 auto 18px;
  background:url("../img/decor-ic.png") center/contain no-repeat; /* файл с завитком */
  transform-origin:50% 50%;
  transition: transform .9s cubic-bezier(.19,.8,.25,1);
}

/* заголовок и телефон */
.cta-bottom__title{
  font:400 28px/1.25 "Vidaloka", serif;
  letter-spacing:.02em; text-transform:uppercase; margin:0 0 8px;
}
.cta-bottom__phone a{
  color:#fff; text-decoration:none; font:400 30px/1 "Vidaloka", serif;
}

/* кнопка */
.btn-ghost{
  display:inline-block; margin-top:18px; padding:10px 24px;
  border:1px solid #fff; border-radius:4px; color:#fff; text-decoration:none;
  transition:.25s;
}
.btn-ghost:hover{ background:#fff; color:#5e3a4e }

/* ХОВЕР-эффекты: зум фона + вращение завитушки */
.cta-bottom:hover .cta-bottom__bg{ transform: scale(1.06); }
.cta-bottom:hover .cta-bottom__decor{ transform: rotate(360deg); }

/* уважим prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cta-bottom__bg, .cta-bottom__decor{ transition:none; }
  .cta-bottom:hover .cta-bottom__bg{ transform:none; }
  .cta-bottom:hover .cta-bottom__decor{ transform:none; }
}

/* адаптив */
@media (max-width: 640px){
  .cta-bottom__decor{ width:380px; height:42px; }
}

/* ===== КАРУСЕЛЬ УСЛУГ (восстановление) ===== */
.services-carousel{
  --cards: 3;           /* сколько карточек видно */
  --gap: 28px;
  position: relative;
  margin: 40px auto 24px;
  padding: 28px 48px;
  max-width: 1160px;
  background:
    radial-gradient(1200px 280px at 50% -60px, rgba(255,255,255,.85) 0%, rgba(255,255,255,.9) 40%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #96ae8a 0%, #cfd8c8 100%);
  border-radius: 8px;
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
}

/* окно и «лента» */
.services-carousel .sc-viewport{ overflow: hidden; }
.services-carousel .sc-track{
  display: flex;
  gap: var(--gap);
  transition: transform .6s ease;
  will-change: transform;
  padding: 4px 0;
}

/* один элемент ленты */
.services-carousel .sc-item{
  list-style: none;
  flex: 0 0 calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards));
}

.services-carousel .sc-card{
  display: block;
  text-align: center;
  color: inherit;
}

.services-carousel .sc-img{
  display:block;
  aspect-ratio: 4/3;
  border: 18px solid #fff;
  outline: 1px solid #d5d0c7;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  margin-bottom: 18px;
  background:#fff;
}
.services-carousel .sc-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.services-carousel .sc-title{
  display:block;
  font-family: "Adamina", serif;
  font-size: 26px;
  line-height: 1.15;
  color:#5a2e43;
  text-transform: uppercase;
  letter-spacing:.02em;
}

.services-carousel .sc-more{
  display:inline-block;
  margin-top: 12px;
  font-size: 14px;
  letter-spacing:.08em;
  color:#7b3e57;
  border-bottom: 1px dashed currentColor;
  text-decoration: none;
}
.services-carousel .sc-more:hover{ color:#4a2638; }

/* стрелки */
.services-carousel .sc-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:42px; height:110px;
  border:0;
  background: center/contain no-repeat;
  opacity:.85; cursor:pointer;
  transition:.2s;
  z-index:2;
}
.services-carousel .sc-arrow:hover{ opacity:1; }
.services-carousel .sc-prev{ left:8px;  background-image:url("../img/left_but.png"); }
.services-carousel .sc-next{ right:8px; background-image:url("../img/right_but.png"); }

/* адаптив */
@media (max-width: 1100px){
  .services-carousel{ --cards:2; padding:24px 42px; }
  .services-carousel .sc-title{ font-size:22px; }
}
@media (max-width: 680px){
  .services-carousel{ --cards:1; padding:18px 38px; }
  .services-carousel .sc-title{ font-size:20px; }
  .services-carousel .sc-arrow{ height:90px; }
}
/* ---------- Мраморное меню (поверх фирменного фиолетового) ---------- */
.navbar--marble { margin: 18px auto 24px; }
.navbar--marble .container { max-width: 1180px; }

.navbar--marble .main-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 18px 24px;
  border-radius: 18px;
  /* два фона: снизу фиолетовый градиент, сверху мрамор */
  background-image:
    linear-gradient(180deg, rgba(121,87,105,0) 46%, #694352 100%),
    url('[[++base_url]]img/slider-row-bg.png'); /* зелёный мрамор */
  background-size: 100% 100%, cover;   /* градиент тянем, мрамор — cover */
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 50% 50%;
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

/* Ссылки верхнего уровня */
.main-nav__link{
  display:block;
  padding: 10px 14px;
  font: 400 16px/1 "Adamina", serif;
  color: #efe6e6;
  letter-spacing:.04em;
  text-transform: uppercase;
  text-decoration:none;
  transition: color .2s ease, text-shadow .2s ease;
}

/* Актив и hover — «золото» */
.main-nav__link:hover,
.main-nav__item .active{
  color:#d6b16e; /* золото */
  text-shadow: 0 0 6px rgba(255,255,255,.18);
}

/* ------- Дропдаун ------- */
.main-nav__dropdown{
  position:absolute; left:0; top:100%;
  margin-top:14px;                /* отступ, чтобы тень не прилипала */
  background:#fff;
  border-radius:12px;
  box-shadow:0 16px 28px rgba(0,0,0,.22);
  padding:10px 0;
  list-style:none;
  min-width:260px;

  opacity:0; transform:translateY(8px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 20;
}

/* ссылка верхнего уровня — НОВЫЙ ШРИФТ + усиленная читаемость */
.main-nav__link{
  display:block;
  padding:10px 14px;
  font-family:"Cinzel","Adamina",serif; /* <- новый шрифт */
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fffdf8;                 /* контрастнее */
  text-shadow:0 1px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.12);
  -webkit-text-stroke:.25px rgba(0,0,0,.22); /* «псевдожирность» для webkit */
  border-radius:6px;
  transition:color .2s ease, background-color .15s ease, text-shadow .2s ease;
}

/* ховер раскрывает */
.main-nav__item.has-children:hover > .main-nav__dropdown{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}

/* «перекладина» над карточкой, визуально связывает с пунктом */
.main-nav__dropdown::before{
  content:""; position:absolute; top:-14px; left:24px; right:24px; height:14px;
  background: linear-gradient(180deg, rgba(123,62,87,.35) 0, rgba(90,46,67,.0) 100%);
  border-top-left-radius:8px; border-top-right-radius:8px;
}

/* ссылки в дропдауне */
.main-nav__dropdown-link{
  display:block; padding:10px 18px;
  font: 400 16px/1.25 "Adamina", serif;
  color:#2c1c23; text-decoration:none;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.main-nav__dropdown-link:hover{
  background:#f6f1f3; color:#7b3e57; padding-left:22px;
}

/* активная — золотая */
.main-nav__dropdown .active{ color:#d7b36a; }

/* небольшая адаптивность */
@media (max-width: 1240px){
  .navbar{ width: calc(100% - 32px); }
}

/* Чтоб меню не «липло» к баннеру сверху */
.navbar--marble { padding-top: 2px; }

/* На очень узких — перенос строк */
@media (max-width: 1100px){
  .navbar--marble .main-nav{ flex-wrap:wrap; justify-content:center; }
}
/* На телефонах можно упростить — без выпадашки, как секцию */
@media (max-width: 680px){
  .has-children > .main-nav__dropdown{ position:static; display:block; box-shadow:none; padding:6px 0 0; }
  .main-nav__sublink{ padding-left: 24px; }
}

/* Фон всей карусели: зелёный мрамор + мягкий сход к белому */
.services-carousel{
  position:relative;
  border-radius:12px; overflow:hidden;
  background:#eef3ef;
}
.services-carousel::before{
  content:""; position:absolute; inset:0;
  background: url("../img/columns-container-bg.png") center/cover repeat;
  opacity:.9;      /* «текстура» читаемая, но не перебивает контент */
}
.services-carousel::after{
  /* градиент вниз к белому, как на старом сайте */
  content:""; position:absolute; left:0; right:0; bottom:0; height:160px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%);
  pointer-events:none;
}

/* Заголовок карточки + завитушка */
.sc-title{
  display:block;
  margin:10px 0 0;
  font-family:"Vidaloka", serif;
  font-size:28px; line-height:1.15;
  color:#4a2638; text-align:center; text-transform:uppercase;
}
.sc-title::after{
  content:"";
  width:120px; height:20px; margin:14px auto 0; display:block;
  background:url("../img/whiskers.png") center/contain no-repeat;
  opacity:.95;
}

/* Кнопка «подробнее» контрастнее */
.sc-more{
  display:inline-block; margin-top:12px;
  font-size:15px; letter-spacing:.06em;
  color:#6b3248; border-bottom:1px dashed currentColor;
}
.sc-more:hover{ color:#3f1d2a; border-bottom-color:transparent; }

/* 2) На внутренних страницах убираем любой дубль фона в зоне контента */
body:not(.home) .content,
body:not(.home) .page-content,
body:not(.home) .columns-container,
body:not(.home) .columns,
body:not(.home) .main,
body:not(.home) .container.content {
  background: none !important;
  /* если где-то заданы через шорт-запись background — это гарантированно перебьёт */
}

/* (на всякий случай) если раньше задавали фон на lead-h2 — гасим */
.lead-h2,
.lead-h2 .lead-h2__inner {
  background-image: none !important;
}

/* Sticky остаётся: topbar--img уже имеет position:sticky; top:0; */
.topbar--img{position:sticky; top:0; z-index:1000}

/* строки контактов */
.topbar__contacts{display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; text-align:right}
.topbar__contacts a{color:#fff; text-decoration:none}
.topbar__contacts a:hover{text-decoration:underline}
.topbar__contacts .contact-row{display:flex; gap:18px; flex-wrap:wrap; justify-content:flex-end}

/* иконки-подписи слева от текста (телефон/почта/адрес) */
.c{display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:15px}
.c--phone::before{content:"📞"}
.c--mail::before {content:"✉"}
.c--addr::before {content:"📍"}

/* кнопки мессенджеров */
.contact-row--icons{gap:8px}
.social-btn{
  --c: rgba(255,255,255,.18);
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  color:#fff; text-decoration:none; line-height:1;
  border:1px solid rgba(255,255,255,.55);
  background:var(--c); backdrop-filter:blur(1px);
  transition:.2s ease;
}
.social-btn svg{width:16px; height:16px; fill:currentColor; display:block}

/* брендовые цвета */
.social-btn--wa{ --c: rgba(37,211,102,.18) }
.social-btn--tg{ --c: rgba(41,169,235,.18) }

.social-btn--wa:hover{ background:#25D366; border-color:#25D366 }
.social-btn--tg:hover{ background:#29A9EB; border-color:#29A9EB }

/* адаптив: на планшете скрываем вторую строку адреса */
@media (max-width:860px){
  .topbar__contacts .contact-row:nth-child(2){display:none}
}
/* на телефоне — прячем блок контактов (как ранее) */
@media (max-width:640px){
  .topbar__contacts{display:none}
}

/* иконки в кнопках мессенджеров */
.social-btn svg{
  width:18px; height:18px;
  flex:0 0 18px;
  margin-right:8px;
  fill: currentColor;   /* иконка белая/золотая вместе с текстом */
}

/* ----- TOPBAR поверх баннерного фона ----- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  background: transparent !important;   /* убираем серый фон */
  backdrop-filter: none !important;      /* и размытие */
  color: #fff;
}

/* читаемость текста на любом фоне */
.topbar, .topbar a{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* кнопки-линки в левом меню — без заливки при ховере */
.topbar__link{ border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent; }
.topbar__link:hover{ background:rgba(255,255,255,.10); }

/* контакты выравниваем, как сделали ранее */
.topbar__contacts{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; text-align:right; }
.topbar__contacts a{ color:#fff; text-decoration:none; }
.topbar__contacts a:hover{ text-decoration:underline; }
/* высота верхней панели */
:root{ --topbar-h: 48px; }

/* делаем бар поверх всего */
.topbar{
  position: fixed;           /* было sticky */
  left: 0; right: 0; top: 0;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none !important;
  color:#fff;
}

/* чтобы основной контент не уезжал под фикс-бар */
body{ padding-top: var(--topbar-h); }

/* а герой специально «заходит» под бар,
   чтобы фоном под ним была картинка */
.hero{
  margin-top: calc(-1 * var(--topbar-h));
  /* если нужно, можно слегка увеличить верхний паддинг */
  /* padding-top: calc(56px + var(--topbar-h)); */
}

/* читаемость текста в баре */
.topbar, .topbar a{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55); }

/* опционально: на узких экранах бар пониже */
@media (max-width:640px){
  :root{ --topbar-h: 44px; }
}

/* ===== Социальные кнопки (общие) ===== */
.social-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.social-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:.18s ease;
  will-change:transform,box-shadow,opacity;
}
.social-btn svg{width:18px;height:18px;fill:currentColor}

/* размеры для компактных мест (заголовки) */
.social-btn--sm{padding:6px 12px;font-size:14px}
.social-row--center{justify-content:center}

/* варианты */
.social-btn--wa{background:linear-gradient(180deg,#2FAF48,#1E7A3C)}
.social-btn--tg{background:linear-gradient(180deg,#2A78A6,#1F3F59)}

/* hover/focus */
.social-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.social-btn:active{transform:translateY(0);opacity:.95}

/* светлая тема (если надо на бежевом фоне сделать обводку и бренд-текст) */
.social-btn--outline{background:transparent;color:#5e3a4e;border-color:#5e3a4e}
.social-btn--outline:hover{background:#5e3a4e;color:#fff}

/* отступы в конкретных блоках */
.lead-h2 .social-row{margin-top:10px}
.cta-bottom .social-row{margin-top:16px}

/* Отступы/раскладка кнопок мессенджеров в подвале */
.footer__messengers{ margin-top:10px; }
.footer__messengers .social-btn{ margin-right:8px; margin-bottom:6px; }

/* Цвет контактов в подвале */
.site-footer .c{ color:#5b3c48; }

/* Если у иконок контактов ещё нет стилей, добавьте: */
.c{ display:inline-flex; align-items:center; gap:8px; font-size:16px; line-height:1.3; margin:.25rem 0; }
.c::before{ content:""; width:16px; height:16px; background: currentColor; opacity:.9; display:inline-block; }

/* Пиктограммы (CSS-маски) */
.c--phone::before{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill=\"%23000\" d=\"M6.6 10.8c1.7 2.3 3.8 4.1 6.1 5.5l1.3-1.9c.3-.4.8-.5 1.2-.3l4 1.6c.5.2.8.7.7 1.2-.6 2.1-2.7 3.4-4.8 2.8-7.1-2-12.5-7.4-14.5-14.5C.1 3 1.4 1 3.5.4c.5-.2 1.1.1 1.2.7l1.6 4c.2.4.1.9-.3 1.2L4.1 7.6c.4 1.1 1.3 2.2 2.5 3.2Z\"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill=\"%23000\" d=\"M6.6 10.8c1.7 2.3 3.8 4.1 6.1 5.5l1.3-1.9c.3-.4.8-.5 1.2-.3l4 1.6c.5.2.8.7.7 1.2-.6 2.1-2.7 3.4-4.8 2.8-7.1-2-12.5-7.4-14.5-14.5C.1 3 1.4 1 3.5.4c.5-.2 1.1.1 1.2.7l1.6 4c.2.4.1.9-.3 1.2L4.1 7.6c.4 1.1 1.3 2.2 2.5 3.2Z\"/></svg>') center/contain no-repeat;
}
.c--mail::before{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M2 6c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6Zm2 0 8 5 8-5H4Zm16 12V9l-8 5-8-5v9h16Z\"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M2 6c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6Zm2 0 8 5 8-5H4Zm16 12V9l-8 5-8-5v9h16Z\"/></svg>') center/contain no-repeat;
}
.c--addr::before{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z\"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23000\" d=\"M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z\"/></svg>') center/contain no-repeat;
}

:root{
  --gold:#d7b36a;
  --gold2:#c99c54;        /* тёплая тень */
}

/* CTA-кнопка «Подробнее» — заливка золотом при ховере */
.cta-bottom .btn-ghost{
  border-color:#fff; color:#fff; transition:.24s ease;
}
.cta-bottom .btn-ghost:hover{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold2) 100%);
  color:#2d1e24; border-color:transparent;
  box-shadow:0 8px 20px rgba(199,156,76,.35);
}

/* Кнопки в топбаре: тоже «золотой» ховер */
.topbar__link{ transition:.24s ease; }
.topbar__link:hover{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold2) 100%);
  color:#2d1e24; border-color:transparent;
  box-shadow:0 6px 16px rgba(199,156,76,.28);
}

/* ---- Кнопки мессенджеров в подвале: аккуратные, не во всю ширину ---- */
.site-footer .footer__messengers{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.site-footer .social-btn{
  /* сбрасываем наследование из шапки/общих стилей */
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  width:auto;           /* никакой ширины 100% */
  flex:0 0 auto;        /* не растягиваемся */
  font-size:15px;
  line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  text-decoration:none;
  color:#fff;
}

.site-footer .social-btn svg{
  width:18px; height:18px; flex:0 0 18px;
}

/* цвета (такие же, как в шапке) */
.site-footer .social-btn--wa{
  background:linear-gradient(180deg,#2fb44a 0%,#1e7b33 100%);
  border:1px solid #1c6a2c;
}
.site-footer .social-btn--tg{
  background:linear-gradient(180deg,#2c6d8c 0%,#1f4d66 100%);
  border:1px solid #1b4054;
}

/* лёгкий отклик */
.site-footer .social-btn:hover{ transform:translateY(-1px); }

/* ---------------------------------------------------------
   CTA (нижняя плашка) — фикс «прилипа» + адаптив
--------------------------------------------------------- */

/* Любые картинки в тексте — резиновые, без вываливания */
.columns-container img,
.site-content img,
.content img {
  max-width: 100%;
  height: auto;
}

/* Блок CTA всегда начинается с новой строки после float’ов */
section.cta-bottom {
  clear: both;              /* <-- главное: гасим обтекание */
  display: block;
  position: relative;
  isolation: isolate;       /* чтобы overlay не конфликтовал */
  overflow: hidden;         /* на всякий случай, от вылетов */
  width: 100%;
  /* высота и отступы адаптивно */
  min-height: clamp(320px, 44vw, 520px);
  padding: clamp(40px, 8vw, 100px) 16px;
  margin: 0;                /* без зазора до подвала */
  background: #000;         /* «подложка», всё равно перекроем bg */
}

/* Фоновая картинка */
.cta-bottom__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: scale(1.03);
  will-change: transform;
  z-index: 0;
  /* лёгкая кин-бернс анимация, можно выключить при желании */
  animation: cta-kenburns 28s ease-in-out infinite alternate;
}

/* Лёгкая тёмная вуаль для читабельности текста */
.cta-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,12,12,.36), rgba(15,12,12,.32));
  z-index: 1;
  pointer-events: none;
}

/* Контент CTA */
.cta-bottom__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

/* Завиток */
.cta-bottom__decor {
  width: clamp(320px, 56vw, 560px);
  height: clamp(28px, 7vw, 62px);
  margin: 0 auto 18px;
  background: url("../img/decor-ic.png") center/contain no-repeat;
  opacity: .9;
}

/* Заголовок + телефон */
.cta-bottom__title {
  margin: 0 0 10px;
  font: 400 clamp(22px, 3.5vw, 32px)/1.2 "Vidaloka", serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cta-bottom__phone a {
  color: #fff;
  font: 400 clamp(22px, 3.4vw, 34px)/1 "Vidaloka", serif;
  text-decoration: none;
}

/* Ряд кнопок */
.cta-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Кнопки мессенджеров внутри CTA можно сделать пошире */
.cta-actions .social-btn {
  min-width: 220px;
}

/* Кнопка «Подробнее» — золотая заливка при ховере */
.btn-ghost {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 24px;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .15s ease;
}
.btn-ghost:hover {
  background: #d7b36a; /* золото */
  color: #2c1c23;
  transform: translateY(-1px);
}

/* Мобилки/планшеты */
@media (max-width: 920px){
  .cta-bottom { min-height: clamp(280px, 52vw, 420px); }
}
@media (max-width: 640px){
  .cta-bottom__decor { width: 76%; height: auto; }
  .cta-actions .social-btn { min-width: 180px; }
}

/* Кин-бернс */
@keyframes cta-kenburns {
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.12) translate3d(-1.5%, -1.2%, 0); }
}

/* ===== Mobile header & off-canvas nav ===== */
:root{
  --mbar-h: 56px;
  --mbar-bg: linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.35));
  --sheet-w: min(92vw, 380px);
}

/* Включаем мобильный бар только на узких экранах */
.mbar,.mnav__panel{ display:none; }
@media (max-width: 820px){
  .topbar, .navbar--marble{ display:none !important; }   /* прячем десктопные */
  .mbar{ display:flex; }
  .mnav__panel{ display:block; }
}

/* Верхняя полоса (моб.) */
.mbar{
  position:sticky; top:0; z-index:1100;
  align-items:center; justify-content:space-between;
  height:var(--mbar-h); padding:8px 12px;
  color:#fff; background:var(--mbar-bg);
  backdrop-filter:saturate(120%) blur(2px);
}
.mbar__burger{ width:36px; height:28px; display:inline-flex; flex-direction:column; justify-content:space-between; cursor:pointer }
.mbar__burger span{ height:2px; background:#fff; border-radius:2px; display:block }
.mbar__phone{ color:#fff; font:600 16px/1 "Adamina",serif; letter-spacing:.02em; text-decoration:none }
.mbar__icons{ display:flex; gap:10px }
.mbar__icon{
  width:34px; height:34px; border-radius:999px; display:inline-block;
  background:#ffffff1f; border:1px solid #ffffff45; backdrop-filter:blur(1px)
}
.mbar__icon--wa{ background:
  radial-gradient(60% 60% at 35% 65%,#25d366 0 60%,#1fa955 100%); position:relative }
.mbar__icon--wa::before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M20 3.9A10.7 10.7 0 0 0 3.2 18L2 22l4.2-1.2A10.7 10.7 0 1 0 20 3.9ZM6.7 18.7l-.3-.2-2 .6.6-2-.2-.3A8.7 8.7 0 1 1 18.7 6.7 8.7 8.7 0 0 1 6.7 18.7Zm8-4.2c-.4.2-1 .5-1.6.5-1.3 0-3-1-4.2-2.6-1.1-1.5-1.2-2.7-1.2-3 0-.3.2-.6.6-.6h.3c.2 0 .3.1.4.3l.6 1.5c.1.2.1.3 0 .5l-.3.4c.2.4.9 1.2 1.8 1.8.7.4 1.2.6 1.4.4l.5-.4c.1-.1.3-.1.4 0l1.5.6c.3.1.3.3.3.5v.2c0 .5-.3.8-1 .1Z'/></svg>") center/contain no-repeat;
  background:#fff;
}
.mbar__icon--tg{ background:
  radial-gradient(65% 65% at 35% 65%,#4a7fb1 0 60%,#1a4768 100%); position:relative }
.mbar__icon--tg::before{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='m21.9 4.3-3 14.9c-.1.7-.6.9-1.2.6l-5.4-4-2.6 2.4c-.5.5-.8.3-1-.3l-1.8-5.7-4.8-1.5c-.7-.2-.7-.7.1-1L20.8 3.4c.6-.2 1.4 0 1.1.9Z'/></svg>") center/contain no-repeat;
  background:#fff;
}

/* Панель */
.mnav__panel{
  position:fixed; inset:0; pointer-events:none; z-index:1099;
}
.mnav__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:.25s;
}
.mnav__sheet{
  position:absolute; top:0; right:0; height:100%; width:var(--sheet-w);
  background:#fff; transform:translateX(100%); transition:transform .28s ease;
  box-shadow: -26px 0 40px rgba(0,0,0,.28);
  display:flex; flex-direction:column;
}
.mnav__toggle:checked ~ .mnav__panel{ pointer-events:auto }
.mnav__toggle:checked ~ .mnav__panel .mnav__backdrop{ opacity:1 }
.mnav__toggle:checked ~ .mnav__panel .mnav__sheet{ transform:none }

/* Контент панели */
.mnav__header{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #eee }
.mnav__title{ font:700 18px/1 "Adamina",serif; color:#4b3940 }
.mnav__close{ width:28px; height:28px; position:relative; cursor:pointer }
.mnav__close::before,.mnav__close::after{
  content:""; position:absolute; left:4px; right:4px; top:13px; height:2px; background:#333
}
.mnav__close::before{ transform:rotate(45deg) } .mnav__close::after{ transform:rotate(-45deg) }

.mnav__section{ padding:12px 16px; border-bottom:1px solid #f2f0f2 }
.mnav__subtitle{ font:700 13px/1 "Adamina",serif; letter-spacing:.1em; text-transform:uppercase; color:#7b3e57; margin:2px 0 8px }
.mnav__list{ list-style:none; padding:0; margin:0 }
.mnav__list > li{ margin:8px 0 }
.mnav__list a{ color:#2b2b2b; text-decoration:none; font:16px/1.3 "Adamina",serif }
.mnav__list a:hover{ color:#7b3e57; text-decoration:underline }

/* Антиквариат (раскрывашка) */
.mnav__details details{ border:1px solid #eee; border-radius:8px; padding:8px 10px }
.mnav__details summary{ cursor:pointer; list-style:none; font:16px/1.3 "Adamina",serif }
.mnav__details summary::-webkit-details-marker{ display:none }
.mnav__details ul{ list-style:none; margin:8px 0 0 6px; padding:0 }
.mnav__details li{ margin:6px 0 }
.mnav__details a{ font-size:15px }

/* Контакты и кнопки внизу панели */
.mnav__contacts .btn-wa, .mnav__contacts .btn-tg{
  display:block; text-align:center; margin:8px 0; padding:12px 16px;
  border-radius:999px; color:#fff; text-decoration:none; font:16px/1 "Adamina",serif
}
.mnav__contacts .btn-wa{ background:linear-gradient(180deg,#25d366,#1fa955) }
.mnav__contacts .btn-tg{ background:linear-gradient(180deg,#5b89b8,#224c6d) }
.mnav__contacts .c{ display:block; margin:8px 0; color:#4b3940; text-decoration:none }
.mnav__contacts .c::before{
  content:""; width:18px; height:18px; margin-right:8px; display:inline-block; vertical-align:-3px; background:#7b3e57; mask-size:contain; mask-position:center; mask-repeat:no-repeat
}
.mnav__contacts .c--phone::before{ mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h4l2 5-2 2a12 12 0 0 0 5 5l2-2 5 2v4a3 3 0 0 1-3 3A17 17 0 0 1 3 6a3 3 0 0 1 3-4Z'/></svg>") }
.mnav__contacts .c--mail::before{ mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z'/></svg>") }
.mnav__contacts .c--addr::before{ mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/></svg>") }

/* Герой ниже мобильной полосы */
@media (max-width:820px){
  .hero{ margin-top:0 }               /* .mbar sticky, фон общий */
  .hero__inner{ padding:70px 0 44px } /* компактнее на моб. */
}

/* ========== MOBILE FIX PACK (изолировано, десктоп не затрагиваем) ========== */

@media (max-width: 680px){
  :root{ --topbar-h:56px; }

  /* Топбар: без серого фона, лёгкое затемнение только над картинкой */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;        /* убираем серую подложку */
    backdrop-filter: none;
  }
  .topbar__row{ min-height: var(--topbar-h); }

  /* Тонкий градиент прямо под топбаром, чтобы телефон/почта читались на фото */
  .topbar::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0; height:var(--topbar-h);
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
    pointer-events:none;
  }

  /* “Герой”: картинка под топбаром, без тёмной вуали на всём сайте */
  .hero{
    position:relative;
    background-size:cover;
    background-position:center;
    min-height: 420px;               /* чтобы заголовок + завитки поместились */
    padding: calc(var(--topbar-h) + 8px) 0 28px;  /* отступ под топбар */
    overflow:hidden;
  }
  .hero::before{                      /* лёгкая вуаль только внутри hero */
    content:"";
    position:absolute; inset:0;
    background: rgba(0,0,0,.25);
  }

  /* Завитки — строго по центру экрана, без “safe-area” сдвигов */
  .brand::before,
  .brand::after{
    left:50%; transform:translateX(-50%);
    width: min(84vw, 520px);         /* аккуратное масштабирование на узких экранах */
  }
  .brand{ margin-top: 4px; }

  /* Боковая панель/офкэнвас — не под топбаром и не перекрывается им */
  .mobile-menu,
  .m-panel,
  .offcanvas{
    z-index: 1100;      /* выше .topbar */
  }
  .mobile-menu .panel__body,
  .m-panel .panel__body,
  .offcanvas .panel__body{
    padding-top: var(--topbar-h);    /* чтобы контент не оказался под топбаром */
  }

  /* Бургер с подписью “Меню” */
  .burger::after{
    content:"Меню";
    margin-left:8px;
    font-size:14px; line-height:1;
    vertical-align:middle;
    color:#fff;
  }
}

/* ---------- Страховка от случайной тёмной вуали/фона на всём сайте ---------- */
body{ background:#fff; }
.columns-container{
  background:
    url("../img/columns-container-bg.png") center top repeat-x,
    #efe7de;
}
/* если ранее где-то добавлялась глобальная вуаль */
body::before, .page::before{ content:none !important; }

/* (Необязательно) аккуратные иконки WA/TG через текущий цвет */
.social-btn svg{ display:inline-block; width:1em; height:1em; fill:currentColor; }

/* ===== MOBILE hotfix: topbar + hero + paddings (не влияет на десктоп) ===== */
@media (max-width: 768px) {
  :root { --tbH: 58px; } /* фактическая высота топбара на мобайле */

  /* лёгкая затемняющая вуаль у топбара, без «серой панели» */
  .topbar{
    position: sticky; top: 0; z-index: 1000;
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.20));
    backdrop-filter: blur(2px);
  }
  /* на случай если где-то задавалась жёсткая подложка */
  .topbar, .topbar * { background-color: transparent !important; }

  /* пододвигаем hero под топбар без зазора/полоски */
  .hero{
    margin-top: calc(-1 * var(--tbH));
    padding-top: var(--tbH);
    background-size: cover;
    background-position: center top;
    transform: translateZ(0); /* фикс субпиксельного «1px gap» в Safari */
  }

  /* чтобы «завитки» точно были по центру */
  .brand::before,
  .brand::after { left: 50%; transform: translateX(-50%); }

  /* текст под hero: даём дыхания у краёв только на мобилке */
  .lead-h2,
  .lead-h2 h2,
  .columns-container .container,
  .cta-bottom__inner { padding-left: 18px; padding-right: 18px; }
}

/* ===== mobile-safe-area + шапка ===== */
:root{
  /* высота safe-area сверху (iOS), на остальных будет 0 */
  --sat: env(safe-area-inset-top, 0px);
  /* дефолтная высота топбара на мобиле; потом мы её переопределим JS-ом */
  --topbar-h: 52px;
}

@media (max-width: 991px){
  /* сама полоса; даём ей паддинг на величину safe-area */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: var(--sat);
    background: rgba(35,26,33,.65);
    backdrop-filter: blur(2px);
  }
  .topbar__row{ min-height: var(--topbar-h); }

  /* “затычка” в саму чёлку — чтобы не было белого фона над шапкой */
  .topbar::before{
    content:"";
    position: fixed;
    left:0; right:0; top:0;
    height: var(--sat);
    background: rgba(35,26,33,.65);
    backdrop-filter: blur(2px);
    z-index: -1;          /* ниже самой шапки, но выше body */
  }
}

/* ===== mobile drawer ===== */
@media (max-width: 991px){
  /* сам выезжающий контейнер меню */
  .drawer{
    position: fixed;
    top: calc(var(--sat) + var(--topbar-h));  /* СТАРТ НИЖЕ ШАПКИ */
    left: 0; right: 0; bottom: 0;
    height: auto;
    overflow: auto;
    background: #fff;
    z-index: 1100;            /* выше контента, но шапка остаётся над ним */
    -webkit-overflow-scrolling: touch;
  }
  /* затемнение фона — тоже начиная под шапкой */
  .drawer__backdrop{
    position: fixed;
    top: calc(var(--sat) + var(--topbar-h));
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.35);
    z-index: 1090;
  }
}

/* общий вид */
.social-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; color:#fff;
  font:500 14px/1 "Adamina", serif; text-decoration:none;
}
.social-btn svg{ width:20px; height:20px; display:block }

/* фирменные цвета */
.social-btn--wa{ background:#25D366 }
.social-btn--tg{ background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%) }

/* на телефоне оставляем только круг с иконкой */
@media (max-width:900px){
  .social-btn{ width:36px; height:36px; padding:0; justify-content:center }
  .social-btn span{ display:none }
  .social-btn svg{ width:18px; height:18px }
}

/* По умолчанию показываем десктопную сетку, мобильную прячем */
.footer-mobile{ display:none; }

/* Мобильная версия футера */
@media (max-width: 768px){
  .footer-desktop{ display:none; }
  .footer-mobile{ display:block; }

  .footer-mobile .fm-contacts{
    margin: 8px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background:#f7f3f0;
    box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
  .footer-mobile .c{ display:block; margin:4px 0; color:#5b3c48; text-decoration:none; }
  .footer-mobile .f-messengers{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

  .social-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:999px; color:#fff; text-decoration:none;
  }
  .social-btn svg{ width:18px; height:18px; }
  .social-btn--wa{ background:#25D366; }
  .social-btn--tg{ background:linear-gradient(180deg,#2AABEE 0,#229ED9 100%); }

  /* Аккордеоны */
  .fm-acc{
    margin:8px 0; border-radius:12px; background:#fbf9f7;
    box-shadow:0 6px 14px rgba(0,0,0,.05); overflow:hidden;
  }
  .fm-acc > summary{
    list-style:none; cursor:pointer;
    padding:12px 16px; font:700 18px/1.2 "Adamina", serif; color:#5b3c48; position:relative;
  }
  .fm-acc > summary::-webkit-details-marker{ display:none; }
  .fm-acc[open] > summary{ border-bottom:1px solid #eee; }
  .fm-acc > summary::after{
    content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
    border-right:2px solid #5b3c48; border-bottom:2px solid #5b3c48;
    transform:translateY(-50%) rotate(-45deg); transition:.2s;
  }
  .fm-acc[open] > summary::after{ transform:translateY(-50%) rotate(45deg); }

  .fm-list{ display:grid; gap:8px; padding:12px 16px 14px; }
  .fm-list a{ color:#5b3c48; text-decoration:none; }
  .fm-list a:hover{ text-decoration:underline; }
  .fm-list .f-all{ font-weight:700; margin-top:4px; }

  .site-footer .footer__bottom{
    border-top:1px solid #e5e1e7; margin-top:12px; padding-top:12px;
    display:flex; justify-content:space-between; gap:10px; font-size:14px; color:#6f6a6d;
  }
}

/* ===== БАЗА: везде по умолчанию — «пилюли» ===== */
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:9999px;
  width:auto;                /* важно: не фиксируем размеры */
  height:auto;
  font-size:16px;
  line-height:1;
}

.social-btn--wa{ background:#25d366; color:#fff; }
.social-btn--tg{ background:#2aabee; color:#fff; }

.social-btn svg{ width:22px; height:22px; fill:#fff; flex:0 0 22px; }

/* Явно закрепим «пилюли» в этих секциях (на случай старых стилей) */
.lead-h2 .social-btn,
.cta-bottom .social-btn,
.footer__messengers .social-btn{
  width:auto !important;
  height:auto !important;
  border-radius:9999px !important;
  padding:10px 18px !important;
  font-size:16px !important;
}

/* ===== Шапка на десктопе — тоже «пилюли» ===== */
.topbar .social-btn{
  padding:8px 14px;
  gap:8px;
  border-radius:9999px;
  font-size:14px;
}

/* ===== ТОЛЬКО МОБИЛЬНО: в шапке — круглые иконки ===== */
@media (max-width: 720px){
  .topbar .social-btn{
    display:grid;
    place-items:center;
    padding:0 !important;
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    font-size:0; line-height:0;         /* скрываем текст рядом с иконкой */
    box-shadow:0 6px 12px rgba(0,0,0,.18);
  }
  .topbar .social-btn svg{ width:22px; height:22px; }
}

/* === Вариант №2: карточки на мобилках (без горизонтального скролла) === */
/* Навешиваем на таблицу класс .table--cards, а на обёртку .table-wrap--cards */

@media (max-width: 640px) {
  /* обёртка без «кап»-полосы и без внутреннего скролла */
  .table-wrap--cards {
    padding-top: 0;
    max-width: 100%;
    overflow: visible;
  }
  .table-wrap--cards::before { display: none; }

  /* сама таблица становится «карточной» */
  .table--cards {
    border-collapse: separate;     /* чтобы радиусы работали красиво */
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    border: 0;
  }

  /* скрываем заголовок на мобилке — заголовки уедут в ::before */
  .table--cards thead { display: none; }

  /* каждая строка — отдельная карточка */
  .table--cards tbody tr {
    display: block;
    margin: 0 0 12px;
    border: 1px solid #5e3a4e;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
  }

  /* ячейка = одна строка карточки */
  .table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 0;                                  /* свои границы */
    border-bottom: 1px solid #e6ded5;
    background: #fff;
    text-align: right;                           /* значение справа */
    font-weight: 700;
  }
  .table--cards tbody td:last-child { border-bottom: 0; }

  /* подпись слева — берётся из data-label, которое подставит JS */
  .table--cards tbody td::before {
    content: attr(data-label);
    color: #5e3a4e;
    font-weight: 700;
    text-align: left;
    flex: 1 1 auto;
    padding-right: 12px;
  }

  /* лёгкая «зебра» и ховер внутри карточки (не обязательно) */
  .table--cards tbody tr:nth-child(even) td { background: #fbf8f4; }
  .table--cards tbody tr:hover td { background: #f3eee9; }
}

/* ===== Mobile header icons: official brand SVGs (topbar only) ===== */
@media (max-width: 900px){
  .topbar .contact-row--icons a.social-btn{
    position: relative;
    width: 44px; height: 44px;
    border-radius: 999px;
    padding: 0;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    color:#fff; text-decoration:none;
  }
  .topbar .contact-row--icons a.social-btn--wa{ background:#25D366; }
  .topbar .contact-row--icons a.social-btn--tg{ background:#229ED9; }

  /* прячем «кривой» встроенный SVG */
  .topbar .contact-row--icons a.social-btn > svg{ display:none !important; }

  /* рисуем официальный логотип псевдоэлементом */
  .topbar .contact-row--icons a.social-btn::before{
    content:""; width:24px; height:24px; display:block;
    background-repeat:no-repeat; background-position:center; background-size:contain;
  }
  .topbar .contact-row--icons a.social-btn--wa::before{
    background-image:url('/img/brand-whatsapp.svg');   /* абсолютный путь */
  }
  .topbar .contact-row--icons a.social-btn--tg::before{
    background-image:url('/img/brand-telegram.svg');   /* абсолютный путь */
  }

  /* на мобилке текст внутри кнопок не нужен */
  .topbar .contact-row--icons a.social-btn span,
  .topbar .contact-row--icons a.social-btn b,
  .topbar .contact-row--icons a.social-btn i{ display:none !important; }
}

/* ---- ТАБЛИЦЫ: единые стили для главной и внутренних ---- */
.columns-container table,
.page-content table,
.content table,
.text-content table,
.rte table {                     /* добавили .rte — на внутренних страницах контент лежит в .rte */
  border-collapse: collapse;
  width: 100%;
  max-width: 760px;             /* эстетично на десктопе */
  margin: 0 auto 18px;
  table-layout: fixed;
}

.columns-container td,
.page-content td,
.content td,
.text-content td,
.rte td {
  padding: 12px 16px;
  border: 1px solid #5e3a4e;
  text-align: center;
  font-weight: 700;
}

/* шапка (если сделана отдельным <thead>) */
.page-content thead th,
.content thead th,
.text-content thead th,
.rte thead th {
  background: #5e3a4e;
  color: #fff;
}

/* зебра */
.page-content table tr:nth-child(even) td,
.content table tr:nth-child(even) td,
.text-content table tr:nth-child(even) td,
.rte table tr:nth-child(even) td {
  background: #f7f3ef;
}

/* hover по строке (кроме первой, если «шапка» сделана первым <tr>) */
@media (hover:hover){
  .page-content table tr:not(:first-child):hover td,
  .content table tr:not(:first-child):hover td,
  .text-content table tr:not(:first-child):hover td,
  .rte table tr:not(:first-child):hover td {
    background: linear-gradient(0deg, #efe5d9 0%, #ffffff 100%);
    transition: background .18s ease-in-out;
  }
}

/* обёртка для таблиц на узких экранах */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto 18px;
  max-width: 100%;
}

/* важно: убираем принудительный min-width, чтобы не было боковой прокрутки */
.table-wrap > table { min-width: 0; width: 100%; }

/* перенос длинных подписей в ячейках вместо горизонтального скролла */
@media (max-width: 680px){
  .page-content table td,
  .content table td,
  .text-content table td,
  .rte table td {
    white-space: normal;
    word-break: break-word;
  }
}

/* Breadcrumbs */
.breadcrumbs { 
  margin: 10px 0 25px; 
  font-size: 14px; 
  line-height: 1.4;
  color: #5c374a;            /* фирменный фиолетовый */
}
.breadcrumbs__item { 
  display: inline-block; 
  vertical-align: middle;
}
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";              /* разделитель */
  margin: 0 8px;
  opacity: .5;
}
.breadcrumbs__link {
  color: #5c374a;
  text-decoration: none;
}
.breadcrumbs__link:hover { 
  text-decoration: underline; 
}
.breadcrumbs .is-current { 
  color: #000; 
  font-weight: 700; 
}

/* ===== Articles list ===== */
.article-list {
  display: grid;
  gap: 28px;
}

.post-card {
  background: #fff;
  border: 1px solid #e6ded5;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 14px 24px rgba(0,0,0,.06);
}

.post-card__title {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  color: #5c374a;
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; }

.post-card__meta {
  color: #8a6f7d;
  font-size: 14px;
  margin-bottom: 12px;
}

.post-card__thumb { display: block; margin: 10px 0 14px; }
.post-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.post-card__intro {
  color: #3f2a34;
  font-size: 16px;
  line-height: 1.6;
}

.post-card__more { margin: 14px 0 0; }

.btn.btn--more {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #5c374a;
  border-radius: 10px;
  color: #5c374a;
  text-decoration: none;
  transition: .18s ease;
}
.btn.btn--more:hover {
  background: #5c374a;
  color: #fff;
}

/* Pagination */
.pagination-wrap { margin-top: 28px; }
.pagination {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pagination li a,
.pagination li span {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid #e6ded5;
  border-radius: 10px;
  color: #5c374a;
  text-decoration: none;
}
.pagination li a:hover { background: #f7f3ef; }
.pagination li.active span {
  background: #5c374a; color: #fff; border-color: #5c374a;
}
/* обнуляем возможные переполнения */
.columns-container,
#cntrBox,
#columns {
  overflow: visible !important;
}

/* закрываем плавающие элементы внутри основного контейнера */
#columns::after {
  content: "";
  display: block;
  clear: both;
}

/* футер всегда ниже и поверх */
.site-footer,
footer {
  clear: both;
  position: relative;
  z-index: 3;
  display: block;
}

/* немного воздуха сверху, чтобы не прилипал */
.site-footer { margin-top: 32px; }

.article-list { display: grid; gap: 28px; }
.post-card { border:1px solid #e6ded5; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.05); background:#fff; }
.post-card__inner { display:flex; gap:20px; padding:24px; align-items:flex-start; }
.post-card__media img { display:block; width:240px; height:auto; border-radius:10px; }
.post-card__title { margin:0 0 8px; font-size:22px; line-height:1.3; }
.post-card__intro { color:#5c4b47; }
.post-card__more .btn { border:1px solid #5e3a4e; border-radius:10px; padding:8px 18px; }
@media (max-width:768px){
  .post-card__inner{ flex-direction:column; }
  .post-card__media img{ width:100%; }
}

/* ==== Footer contacts tidy ==== */
.site-footer .footer__col .c{
  display: inline-flex;          /* иконка + текст в одной линии */
  align-items: center;           /* вертикальное выравнивание */
  gap: 8px;                      /* отступ между иконкой и текстом */
  margin: .35rem 0;              /* одинаковые внешние отступы */
  line-height: 1.4;
}

/* если иконки сделаны через ::before — приводим к одному виду */
.site-footer .footer__col .c::before{
  position: static;              /* убираем absolute */
  transform: none;
  width: 18px;
  height: 18px;
  margin-right: 0;               /* gap выше уже даёт отступ */
  opacity: .9;
}

.cookie-banner{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    background:#222;
    color:#fff;

    padding:15px 20px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;

    z-index:99999;
}

.cookie-banner a{
    color:#e5e1a5;
}

.cookie-btn{
    background:#d9b04b;
    color:#fff;

    border:none;

    padding:10px 20px;
    cursor:pointer;
}

.cookie-btn-decline{
    background:#666;
}