/* =========================
   THEME: WOOD + FOREST (clean)
   For index.php sections: hero__grid, object, booking, faq, gallery
   ========================= */

:root{
  /* base */
  --bg:#f4f1ea;
  --surface:#ffffff;
  --surface-2:#fbfaf7;

  --text:#1f1b16;
  --muted:#5f5a52;

  /* wood */
  --wood-900:#1a120d;
  --wood-800:#23170f;
  --wood-700:#2f1f14;

  /* forest */
  --green-700:#1f5a3a;
  --green-650:#1b4f33;
  --green-100:#e6f1eb;

  /* ui */
  --border:rgba(47,31,20,.14);
  --shadow:0 10px 28px rgba(26,18,13,.10);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:18px;

  --gap:16px;
  --section-pad:52px;
  --container:1100px;

  --focus:0 0 0 3px rgba(31,90,58,.22);

  /* hero gallery */
  --hero-main-h:260px;
  --hero-thumb-h:92px;

  /* hero layout spacing */
  --hero-gap:22px; /* расстояние между левым и правым блоком */
}

/* reset-ish */
*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{color:var(--green-650);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:10px}
section[id], main[id]{scroll-margin-top:90px}

/* type scale */
.h1{font-size:44px;line-height:1.12;margin:0 0 10px}
.h2{font-size:28px;line-height:1.2;margin:0}
.h3{font-size:18px;line-height:1.25;margin:0}
.h4{font-size:15px;line-height:1.25;margin:16px 0 8px}
.lead{font-size:16px;margin:0 0 14px;color:var(--muted)}
.sub{margin:6px 0 0;color:var(--muted)}
.sub2{margin:6px 0 0;color:var(--muted);font-size:14px}
.muted{color:var(--muted)}
.mini{font-size:13px;color:var(--muted)}

/* layout */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.main{min-height:60vh}
.section{padding:var(--section-pad) 0}
.section__head{text-align:center;margin-bottom:18px}
.section__head .h2{margin-bottom:6px}

/* header */
.header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,var(--wood-800),var(--wood-900));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header__row{display:flex;align-items:center;gap:14px;min-height:68px}
.logo{font-weight:900;letter-spacing:.2px;color:#fff;text-decoration:none}
.nav{display:flex;gap:10px;margin-left:auto}
.nav__link{
  color:rgba(255,255,255,.84);
  padding:8px 10px;border-radius:10px;
  text-decoration:none;
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(47,31,20,.20);text-decoration:none}
.btn--primary{
  background:var(--green-700);
  border-color:transparent;
  color:#fff !important;
}
.btn--primary:hover{background:var(--green-650)}
.btn--ghost{
  background:transparent;
  border-color:rgba(47,31,20,.22);
  color:var(--text) !important;
}
.btn--ghost:hover{background:rgba(47,31,20,.04)}
.header .btn--ghost{border-color:rgba(255,255,255,.25);color:#fff !important}
.header .btn--ghost:hover{background:rgba(255,255,255,.10)}
.w-100{width:100%}

/* chips + pill */
.hero__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  font-size:13px;
}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:var(--green-100);
  border:1px solid rgba(31,90,58,.18);
  color:var(--text);
  font-weight:800;font-size:13px;
}

/* cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:18px;
}
.card p{margin:0 0 10px;color:var(--muted)}
.card ul{margin:10px 0 0 18px}

/* helpers */
.sp-16{height:16px}
.mt-16{margin-top:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* HERO */
.hero{
  padding:36px 0;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(31,90,58,.10), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(47,31,20,.10), transparent 60%);
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.32fr .68fr;
  gap:var(--hero-gap);
  align-items:stretch;
}

.hero__left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  align-items:flex-start;
  text-align:left;
}

.hero__left--panel{
  background:linear-gradient(180deg, rgba(31,90,58,.10), rgba(31,90,58,.06));
  border:1px solid rgba(31,90,58,.14);
  border-left:6px solid rgba(31,90,58,.28);
  border-radius:22px;
  padding:22px;
  box-shadow:0 10px 28px rgba(26,18,13,.06);
}

.hero__media{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:8px;
}

.mediaCard{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:#111;
}
.mediaCard__img{
  width:100%;
  height:var(--hero-main-h);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* thumbs row (3 visible) — scroller + arrows (fits current HTML) */
.heroThumbsWrap{
  width:100%;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.heroThumbs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 8px;
  margin:0;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.heroThumbs::-webkit-scrollbar{height:8px}
.heroThumbs::-webkit-scrollbar-thumb{background:rgba(47,31,20,.18);border-radius:999px}
.heroThumbs::-webkit-scrollbar-track{background:rgba(47,31,20,.06);border-radius:999px}

.heroThumbs .thumb{
  flex:0 0 calc((100% - 20px)/3); /* 3 превью в ряд */
  scroll-snap-align:start;
}

.thumbNav{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(47,31,20,.18);
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 18px rgba(26,18,13,.08);
  cursor:pointer;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.thumbNav:disabled{opacity:.35;cursor:default}
.thumbScrollHint{
  margin-top:6px;
  font-size:13px;
  color:rgba(95,90,82,.9);
  text-align:center;
}

/* optional thumbs scroller (if exists in HTML) */
.heroThumbsWrap{width:100%}
.heroThumbsScroller{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.heroThumbsScroller::-webkit-scrollbar{height:8px}
.heroThumbsScroller::-webkit-scrollbar-thumb{background:rgba(47,31,20,.18);border-radius:999px}
.heroThumbsScroller .thumb{flex:0 0 calc((100% - 24px)/3); scroll-snap-align:start}

.heroThumbsNav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  user-select:none;
}
.heroThumbsNav .arrow{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.heroThumbsNav .arrow:hover{border-color:rgba(47,31,20,.22);transform:translateY(-1px)}
.heroThumbsNav .hint{align-self:center}

/* right panel */
.hero__right{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;

  background: rgba(47, 31, 20, .08);
  border: 1px solid rgba(47, 31, 20, .14);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow:
    -6px 0 0 rgba(47,31,20,.18),
    0 10px 28px rgba(26,18,13,.08);
}

.hero__chips{justify-content:center}

.hero__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:280px;
}
.hero__actions .btn{width:100%}

.hero__contacts{width:100%;max-width:360px}
.mini-line{font-size:16px;line-height:1.35;color:var(--text);margin:6px 0}
.mini-line a{font-size:18px;font-weight:900;color:var(--green-700)}
.mini-line a:hover{color:var(--green-650)}

/* map placeholder inside hero right */
.heroMap{
  width:100%;
  max-width:360px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.heroMap iframe{
  width:100%;
  height:160px;
  border:0;
  display:block;
  background:#111;
}

.heroStats{
  margin-top:auto;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  max-width:360px;
  width:100%;
}
.heroStat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:10px 12px;
  text-align:center;
}
.heroStat__num{font-weight:900;font-size:24px;line-height:1.05;color:var(--green-700);margin-bottom:4px}
.heroStat__txt{font-size:12px;color:var(--muted);line-height:1.25}
.heroStat:nth-child(3){grid-column:1/-1}

/* grids */
.grid{
  display:grid;
  grid-template-columns: repeat(var(--cols,2), minmax(0,1fr));
  gap:var(--gap);
}
.grid-2{--cols:2}
.grid-3{--cols:3}
.grid-4{--cols:4}

/* object cards */
.object{padding:18px}
.object__head{
  display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  margin-bottom:12px;
}
.priceChip{
  min-width:220px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--green-100);
  border:1px solid rgba(31,90,58,.18);
  text-align:right;
}
.priceChip__k{font-size:12px;color:var(--muted)}
.priceChip__v{font-weight:900}
.priceChip__v span{font-weight:700;color:var(--muted);font-size:12px}

.object__stats{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px;
  margin:10px 0 14px;
}
.stat{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.stat__k{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.stat__v{font-weight:900}

/* split */
.split{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  align-items:stretch; /* чтобы правая колонка могла тянуться по высоте */
}
.split__side{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}

/* Loft side bottom row: "Локация" + "Баня отдельно" в одну линию */
.split__bottom{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.split__bottom .box,
.split__bottom .note{
  height:100%;
}

/* на узких экранах снова в столбик */
@media (max-width: 980px){
  .split__bottom{ grid-template-columns: 1fr; }
}

/* Loft: row below split ("Локация" + "Баня отдельно") */
.object__below{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
.object__below .box,
.object__below .note{height:100%}
@media (max-width: 980px){
  .object__below{ grid-template-columns: 1fr; }
}

.object__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* placeholder photo blocks */
.ph{
  border:1px dashed rgba(47,31,20,.28);
  background:var(--surface-2);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
  font-weight:700;
  min-height:140px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.ph--wide{min-height:160px}

/* boxes + notes */
.box{
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:14px;
  padding:12px;
}
.box__t{font-weight:900;margin-bottom:8px}
.note{
  border-radius:14px;
  padding:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
}
.note--soft{
  background:var(--green-100);
  border-color: rgba(31,90,58,.18);
}
.note--warn{
  background:#fdecec;
  border-color:#f2b6b6;
}

/* lists */
.list{margin:0;padding-left:18px}
.list--tight{margin:0;padding-left:18px}
.list--tight li{margin:6px 0}

/* booking */
.booking{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;
}
.form__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.field{display:grid;gap:6px}
.field__k{font-size:12px;color:var(--muted);font-weight:800}
.field--full{grid-column:1/-1}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font: inherit;
}
.input--area{resize:vertical;min-height:110px}
.form__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}

/* summary */
.summary{padding:16px}
.summary__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.summary__title{font-weight:900}
.summary__kv{display:grid;gap:8px;margin:10px 0 12px}
.kv__row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(47,31,20,.08);
}
.kv__row:last-child{border-bottom:none;padding-bottom:0}

/* gallery */
.filters{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin:0 0 14px;
}
.filter{
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  font: inherit;
  color: var(--text);
}
.filter.is-active{
  background:var(--green-700);
  border-color:transparent;
  color:#fff !important;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.gitem{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
}
.gitem.is-hidden{display:none}
.gph{
  min-height:120px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  color:var(--muted);
  font-weight:800;
}

/* map placeholder */
.map{padding:18px}
.map__ph{
  min-height:240px;
  border-radius:14px;
  border:1px dashed rgba(47,31,20,.28);
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-weight:800;
}

/* rules */
.rule .rule__t{font-weight:900;margin-bottom:6px}
.rule .rule__v{color:var(--muted)}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq__item{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.faq__q{
  list-style:none;
  padding:14px 16px;
  cursor:pointer;
  font-weight:900;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  color:var(--text);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"▾";color:var(--muted);font-weight:900}
.faq__item[open] .faq__q::after{content:"▴"}
.faq__a{padding:0 16px 14px;color:var(--muted)}

/* footer */
.footer{
  padding:26px 0;
  background:linear-gradient(180deg,var(--wood-900),var(--wood-800));
  color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.07);
}
.footer__row{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.footer__brand{font-weight:900;color:#fff}
.footer__muted{color:rgba(255,255,255,.58)}
.footer__links a{color:rgba(255,255,255,.78);margin-right:12px;text-decoration:none}
.footer__links a:hover{color:#fff;text-decoration:underline}

/* ===== Lightbox ===== */
.lb{
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 9, .86);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.lb.is-open{ display:flex; }
.lb__figure{
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.lb__img{
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: rgba(255,255,255,.03);
}
.lb__cap{ color: rgba(255,255,255,.82); font-size: 14px; text-align: center; }
.lb__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.lb__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.lb__prev{ left: 14px; }
.lb__next{ right: 14px; }

@media (max-width: 820px){
  .lb__nav{ width: 44px; height: 44px; font-size: 28px; }
  .lb__prev{ left: 10px; }
  .lb__next{ right: 10px; }
}

/* responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:16px}
  .booking{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2, minmax(0,1fr))}
  .object__stats{grid-template-columns:repeat(3, minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .mediaCard__img{height:220px}
  .thumb img{height:72px}
}
@media (max-width: 820px){
  .nav{display:none}
  .h1{font-size:36px}
  .grid-4{--cols:2}
  .grid-3{--cols:1}
  .form__grid{grid-template-columns:1fr}
}


/* =========================
   OBJECT GALLERY (Loft slider)
   ========================= */
.objGallery{
  border:1px solid var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 12px;
}

.objGallery__main{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border:1px solid var(--border);
  background:#111;
  box-shadow: var(--shadow);
}

.objGallery__img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display:block;
  cursor: zoom-in;
}

.objGallery__row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
}

.objThumbs{
  flex:1;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
}
.objThumbs::-webkit-scrollbar{height:8px}
.objThumbs::-webkit-scrollbar-thumb{background:rgba(47,31,20,.18);border-radius:999px}
.objThumb{
  flex: 0 0 96px;
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
  padding:0;
  cursor:pointer;
}
.objThumb img{
  width:100%;
  height:64px;
  object-fit:cover;
  display:block;
}

.ogNav{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}
.ogNav:hover{transform: translateY(-1px)}

.objGallery__hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}

/* mobile tweaks */
@media (max-width: 980px){
  .objGallery__img{ height: 190px; }
  .objThumb{ flex-basis: 86px; }
  .objThumb img{ height: 58px; }
}


/* =========================
   Object slider (Loft/Seven) — single image + arrows + dots
   ========================= */
.objSlider{width:100%; height:100%;}
.objSlider__frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:#111;
  flex:1;           /* занимает всю доступную высоту в aside */
  display:flex;
}
.objSlider__img{
  width:100%;
  height:100%;
  min-height:260px; /* fallback, если контента мало */
  object-fit:cover;
  display:block;
}
.osNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
  user-select:none;
  z-index:3;
}
.osNav:hover{background:rgba(0,0,0,.45)}
.osNav--prev{left:10px}
.osNav--next{right:10px}

.objSlider__dots{
  display:flex;
  justify-content:center;
  gap:6px;
  padding-top:10px;
}
.objSlider__dot{
  width:7px;height:7px;
  border-radius:999px;
  background:rgba(31,90,58,.25);
  border:1px solid rgba(31,90,58,.25);
}
.objSlider__dot.is-active{
  background:var(--green-700);
  border-color:var(--green-700);
}

@media (max-width: 980px){
  .split{align-items:start;}
  .split__side{height:auto;}
  .objSlider__frame{flex:unset;}
  .objSlider__img{height:220px; min-height:unset;}
}
.saunaExtras{
  margin-top: 10px;
  display: grid;
  gap: 14px;
}

.saunaExtra{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.saunaExtra__name{
  font-weight: 800;
  color: var(--text);
}

.saunaExtra__sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.saunaExtra__price{
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}

/* =========================
   FIXES (hero mobile + object slider height)
   ========================= */

/* Desktop: уменьшить высоту фото в блоках вариантов (Loft / 7 Пятниц) */
@media (min-width: 981px){
  .split{ align-items:start; }
  .split__side{ height:auto; }
  .objSlider{ height:auto; }
  .objSlider__frame{ flex:unset; height:360px; }
  .objSlider__img{ height:100%; min-height:unset; object-position:center; }
}
/* =========================
   HERO MOBILE — WIDE PHOTO (single source of truth)
   Делает фото шире внутри зелёной панели:
   - отступы по 5px
   - фото по центру
   - без горизонтального скролла
   ========================= */
@media (max-width: 980px){

  /* Важно: не давать странице горизонтальный скролл */
  html, body { overflow-x: hidden; }

  /* Панель */
  .hero__left--panel{
    padding: 22px;        /* твой текущий */
    overflow: hidden;     /* чтобы тени/радиусы не вываливались */
  }

  /* Медиа-блок расширяем до краёв панели, оставляя по 5px */
  .hero__left--panel .hero__media{
    width: auto;
    margin: 12px -17px 0;   /* 22px - 5px = 17px */
    padding: 0;             /* не надо внутренних паддингов */
    display: flex;
    justify-content: center;
  }

  /* Карточка фото — строго по центру */
  .hero__left--panel .mediaCard{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Само фото */
  .hero__left--panel .mediaCard__img{
    width: 100%;
    display:block;
    object-fit: cover;
    object-position: center;
  }
}
/* MOBILE: превью растягиваются на всю ширину между стрелками */
@media (max-width: 980px){

  /* контейнер со стрелками оставляем как есть */
  .heroThumbsWrap{
    display:grid !important;
    grid-template-columns:44px 1fr 44px !important;
    gap:10px !important;
    align-items:center !important;
  }

  /* делаем превью не flex-лентой, а сеткой на 2 колонки */
  .heroThumbs{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;

    overflow: hidden !important;   /* без горизонтального скролла */
    padding:0 !important;
    margin:0 !important;
  }

  /* КЛЮЧЕВОЕ: убиваем фикс-ширины/флексы, которые тянутся с десктопа */
  .heroThumbs .thumb{
    width:100% !important;
    flex: unset !important;
    max-width: 100% !important;
  }

  .heroThumbs .thumb img{
    width:100% !important;
    height:84px !important;  /* можешь поменять */
    object-fit:cover;
    display:block;
  }
}
/* ===== FIX MOBILE HERO THUMBS (2 нормальных превью в ряд) ===== */
@media (max-width: 980px){

  /* чтобы центр-колонка точно имела ширину */
  .heroThumbs{
    overflow-x:hidden !important;
  }

  /* превью = 2 нормальные плитки */
  .heroThumbs .thumb{
    flex: 0 0 calc((100% - 10px)/2) !important;  /* 2 в ряд */
    max-width: calc((100% - 10px)/2) !important;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(47,31,20,.14);
    background: #fff;
  }

  /* картинка внутри превью */
  .heroThumbs .thumb img{
    width: 100% !important;
    height: 86px !important;          /* под мобилу */
    object-fit: cover !important;
    display: block !important;
  }
}
/* DESKTOP: превью в hero делаем квадратными */
@media (min-width: 981px){
  /* ширина превью (можешь менять 104 -> 96/112) */
  .heroThumbs .thumb{
    flex: 0 0 104px !important;
    aspect-ratio: 1 / 1;
    padding: 0;                 /* на всякий */
    border-radius: 12px;        /* если нужно */
    overflow: hidden;           /* чтобы картинка не вылезала */
    display: block;
  }

  .heroThumbs .thumb img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
}
.formSeo{
  margin-top: 14px;
  padding: 14px 14px;
  border: 1px solid rgba(47,31,20,.14);
  border-radius: 16px;
  background: #fbfaf7;
}
.formSeo__title{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
}
.formSeo__text{
  margin: 0 0 10px;
  color: #5f5a52;
  font-size: 14px;
  line-height: 1.55;
}
.formSeo__text--muted{
  font-size: 12px;
  opacity: .9;
  margin-bottom: 0;
}
/* =========================
   CTA BAND (как на 2 скрине, но зелёный фон)
   ========================= */
.ctaBand{ padding: 42px 0; }

.ctaBand__inner{
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(31,90,58,.96), rgba(27,79,51,.96));
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}

.ctaBand__title{
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: .2px;
}

.ctaBand__form{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;
}

.ctaBand__input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.96);
  color: #1f1b16;
  font: inherit;
}

.ctaBand__input::placeholder{ color: rgba(31,27,22,.55); }

.ctaBand__btn{
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .3px;
  background: #f3c24b; /* «тёплая» кнопка, как на скрине */
  color: #1f1b16;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.ctaBand__btn:hover{ transform: translateY(-1px); }

.ctaBand__agree{
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}

.ctaBand__agree a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
}
.ctaBand__agree input{ width: 16px; height: 16px; }

/* адаптив */
@media (max-width: 980px){
  .ctaBand__title{ font-size: 34px; }
  .ctaBand__form{ grid-template-columns: 1fr; }
  .ctaBand__btn{ width: 100%; }
}

@media (max-width: 420px){
  .ctaBand__inner{ padding: 20px; }
  .ctaBand__title{ font-size: 28px; }
}
  /* ===== PRICES layout fix: 4 / 2 / 1 ===== */
#prices .priceGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

@media (max-width: 1100px){
  #prices .priceGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  #prices .priceGrid{ grid-template-columns: 1fr; }
}

#prices .priceCard{
  display:flex;
  flex-direction:column;
  min-height:260px;
}

#prices .priceBottom{ margin-top:auto; }
#prices .priceBottom .btn{ width:100%; }

#prices .rentHint{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(31,90,58,.18);
  background: rgba(31,90,58,.08);
}
/* ===== PRICES (добавь в самый низ style.css) ===== */

#prices .priceGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
@media (max-width: 1100px){
  #prices .priceGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  #prices .priceGrid{ grid-template-columns: 1fr; }
}

#prices .priceCard{
  display:flex;
  flex-direction:column;
  min-height:260px;
}

#prices .priceTitle{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
  margin-bottom:10px;
}

#prices .priceValue{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

/* маленькая зелёная подложка только под ценой */
#prices .priceBadge{
  display:inline-block;
  padding:6px 10px;
  border-radius:12px;
  background: rgba(31,90,58,.10);
  border: 1px solid rgba(31,90,58,.16);
  color: #1b4f33;
  font-weight:900;
  line-height:1.1;
}

#prices .priceBottom{
  margin-top:auto;
  display:flex;
}
#prices .priceBottom .btn{
  width:100%;
  justify-content:center;
}

#prices .rentHint{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(31,90,58,.18);
  background: rgba(31,90,58,.08);
}
#prices .rentHint b{ font-weight:800; }

/* FIX: фильтры поверх всего и кликабельны */
.filters{
  position: relative;
  z-index: 10;
}

.filter{
  position: relative;
  z-index: 11;
  pointer-events: auto;
}
/* ===== GALLERY: 2 ряда + раскрытие ===== */

/* кнопка */
.galleryMore{
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(47,31,20,.14);
  background: #fff;
  box-shadow: 0 10px 22px rgba(26,18,13,.08);
  cursor: pointer;
  user-select: none;
}
.galleryMore:hover{ transform: translateY(-1px); }
.galleryMore__txt{ font-weight: 900; }
.galleryMore__icon{ font-size: 18px; line-height: 1; }

/* контейнер-клиппер */
.galleryClip{
  position: relative;
  overflow: hidden;
}

/* лёгкий “градиент” снизу когда свернуто */
.galleryClip.is-collapsed::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 72px;
  background: linear-gradient(180deg, rgba(244,241,234,0), rgba(244,241,234,1));
  pointer-events:none;
}

/* высота в свернутом состоянии — задастся JS (под 2 ряда) */
.galleryClip.is-collapsed{
  max-height: var(--gallery-collapsed-h, 320px);
}

/* развернули */
.galleryClip.is-expanded{
  max-height: none;
}
.galleryClip.is-expanded::after{ display:none; }

/* стрелка вверх при открытии */
.galleryClip.is-expanded + .galleryMore .galleryMore__icon{
  transform: rotate(180deg);
}
.galleryClip.is-collapsed { max-height: var(--gallery-collapsed-h); overflow:hidden; }
.galleryClip.is-expanded { max-height:none; }
/* ===== GALLERY THUMBS: no white gaps (cover) ===== */
.gallery .gitem{
  border-radius: 18px;
  overflow: hidden;
  background: #f6f3ec; /* на случай подгрузки/ошибок */
}

.gallery .gitem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== LOCATION: stack on mobile (info сверху, карта снизу) ===== */
@media (max-width: 820px){
  #location .grid-2{ --cols:1; }
  #location .map iframe{ height: 280px; } /* опционально, чтобы карта не была слишком высокой */
}
/* ===== LOCATION: buttons nice on mobile ===== */
@media (max-width: 560px){
  #location .row--tight{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #location .row--tight .btn{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* если "Быстро связаться" не в row, а отдельной кнопкой */
  #location .btn.btn--primary{
    width: 100%;
    justify-content: center;
  }
}

/* LOCATION: center "Быстро связаться" on desktop */
@media (min-width: 561px){
  #location .row--tight + .btn{
    display: table;
    margin: 5px auto 0; /* 5px отступ сверху + центрирование */
  }
}

  #location .row--tight .spacer{
    flex:1 1 auto;
  }
  #location .row--tight .btn{
    white-space:nowrap;
  }
  /* сделаем карты чуть “вторичными”, а звонок главным */
  @media (min-width: 821px){
  #location .row--tight a.btn:not(.btn--primary):not([href^="tel:"]){
    background:#fff;
  }
}
/* LOCATION: protect button styles from accidental overrides */
#location a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
/* ===== LOCATION: force primary button style (fix overrides) ===== */
#location .btn.btn--primary{
  background: var(--green-700);
  color: #fff;
  border: 1px solid transparent;
}

#location .btn.btn--primary:hover{
  background: var(--green-650);
}
/* ===== LOCATION: clean buttons layout ===== */

/* desktop/tablet: 2 карты слева, звонок справа */
@media (min-width: 821px){
  #location .row--tight{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
  }
  #location .row--tight .spacer{ flex:1 1 auto; }
  #location .row--tight .btn{ white-space:nowrap; }

  /* карты делаем вторичными */
  #location .row--tight a.btn:not(.btn--primary):not([href^="tel:"]){
    background: #fff;
  }
}

/* mobile: все кнопки ровной колонкой */
@media (max-width: 560px){
  #location .row--tight{
    flex-direction:column;
    align-items:stretch;
    gap:5px;               /* ВОТ твой нужный отступ */
  }
  #location .row--tight .btn{
    width:100%;
    justify-content:center;
  }
}
/* ===== BOOKING bottom: equal height cards on desktop ===== */
@media (min-width: 981px){
  /* контейнер, где стоят formSeo и instagram-карта */
  .booking{
    align-items: stretch; /* уже есть, но фиксируем */
  }

  /* если эти два блока лежат внутри grid/row — растягиваем карточки */
  .booking > .card{
    height: 100%;
  }

  /* конкретно: SEO блок и Instagram блок пусть тянутся одинаково */
  .formSeo{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Инстаграм-колонка: iframe растянуть на высоту карточки */
  .igEmbed{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .igEmbed iframe{
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
  }
}
/* CONTACTS PAGE: mobile stack (info сверху, карта снизу) */
@media (max-width: 820px){
  #contactsPage .grid-2{ --cols: 1; }
  #contactsPage .map{ order: 2; }   /* на всякий случай */
}
/* ===== MOBILE NAV (burger) ===== */
.navToggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  margin-left:auto;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:2px;
}

@media (max-width: 820px){
  .navToggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{ display:none; } /* у тебя уже было — оставляем */
}

/* overlay container */
.mnav{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
}
.mnav.is-open{ display:block; }

.mnav__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,12,9,.55);
}

/* side panel */
.mnav__panel{
  position:absolute;
  top:0; right:0;
  width:min(360px, 92vw);
  height:100%;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow: -18px 0 50px rgba(0,0,0,.25);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transform:translateX(100%);
  transition:transform .18s ease;
  border-top-left-radius:18px;
  border-bottom-left-radius:18px;
}
.mnav.is-open .mnav__panel{ transform:translateX(0); }

.mnav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mnav__title{ font-weight:900; font-size:18px; }
.mnav__close{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}

.mnav__links{
  display:grid;
  gap:8px;
  padding-top:6px;
}
.mnav__link{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.mnav__link:hover{ text-decoration:none; border-color:rgba(47,31,20,.22); transform:translateY(-1px); }

.mnav__cta{ margin-top:auto; }

/* ===== MOBILE NAV: fullscreen overlay ===== */
.mnav{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
}
.mnav.is-open{ display:block; }

/* на фуллскрине отдельный backdrop не нужен */
.mnav__backdrop{ display:none; }

.mnav__panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background: var(--surface);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
  border-radius:0;
  box-shadow:none;
  border:0;
}

/* header внутри меню */
.mnav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.mnav__title{ font-weight:900; font-size:18px; }

.mnav__close{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--surface-2);
  cursor:pointer;
  font-size:18px;
}

/* список ссылок */
.mnav__links{
  display:grid;
  gap:0;
  margin-top:4px;
}
.mnav__link{
  padding:16px 8px;
  border-bottom:1px solid rgba(47,31,20,.10);
  background:transparent;
  color:var(--text);
  font-weight:900;
  text-decoration:none;
}
.mnav__link:hover{ text-decoration:none; }

/* нижний CTA */
.mnav__cta{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
}

/* бургер-кнопка */
.navToggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  margin-left:auto;
}
.navToggle span{
  display:block;
  width:18px;height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:2px;
}

/* показываем бургер только на мобиле, скрываем обычную навигацию */
@media (max-width: 820px){
  .nav{ display:none; }
  .navToggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* блокируем скролл страницы при открытом меню */
body.is-nav-open{ overflow:hidden; }
/* ===== MOBILE NAV: make it richer ===== */
.mnav__panel{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(31,90,58,.10), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(47,31,20,.10), transparent 60%),
    var(--bg);
}

.mnav__head{
  border-bottom: 1px solid rgba(47,31,20,.10);
}

.mnav__title{
  font-size: 20px;
  letter-spacing: .2px;
}

.mnav__close{
  border: 1px solid rgba(47,31,20,.14);
  background: rgba(47,31,20,.08);
  color: var(--text);
}

/* пункты как “карточки” */
.mnav__links{
  gap:10px;
  margin-top:10px;
}

.mnav__link{
  border: 1px solid rgba(47,31,20,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(26,18,13,.06);
  padding: 16px 14px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}

.mnav__link:hover{
  transform: translateY(-1px);
  border-color: rgba(31,90,58,.22);
  background: rgba(31,90,58,.06);
}

/* активный пункт (если захочешь помечать классом .is-active) */
.mnav__link.is-active{
  border-color: transparent;
  background: var(--green-700);
  color: #fff;
}

/* низ */
.mnav__cta{
  border-top: 1px solid rgba(47,31,20,.10);
  padding-top: 14px;
}

.mnav__title{ color: var(--green-700); }

.mnav__close{ background: var(--green-100); border-color: rgba(31,90,58,.18); }

/* ===== Burger icon: fix 3 lines ===== */
.navToggle{
  display:none;
  position: relative;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  margin-left:auto;
}

.navToggle span{
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transform:translateX(-50%);
}

.navToggle span:nth-child(1){ top:14px; }
.navToggle span:nth-child(2){ top:21px; }
.navToggle span:nth-child(3){ top:28px; }

@media (max-width: 820px){
  .navToggle{ display:inline-block; }
}

/* ===== Burger icon: perfectly centered 3 lines ===== */
.navToggle{
  display:none;
  position: relative;
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  margin-left:auto;
  box-sizing:border-box;
}

.navToggle span{
  position:absolute;
  left:50% !important;
  width:18px !important;
  height:2px !important;
  background:#fff !important;
  border-radius:2px !important;

  margin:0 !important;          /* убиваем любые margin: auto */
  padding:0 !important;
  transform:translateX(-50%) !important;
  box-sizing:border-box;
}

.navToggle span:nth-child(1){ top:14px; }
.navToggle span:nth-child(2){ top:21px; }
.navToggle span:nth-child(3){ top:28px; }

@media (max-width: 820px){
  .navToggle{ display:inline-block; }
}

/* ===== BOOKING LAYOUT (как было): form слева, insta справа, seo под формой ===== */
.booking{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:start;

  grid-template-areas:
    "form insta"
    "seo  insta";
}

.booking > form{ grid-area: form; }
#bookingSeo{ grid-area: seo; }
#bookingInsta{ grid-area: insta; }

/* мобила: форма -> SEO -> Instagram */
@media (max-width: 980px){
  .booking{
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "seo"
      "insta";
  }
}

/* ===== CONTACTS: accents ===== */

/* зелёная карточка целиком (для "График") */
.card--green{
  background: var(--green-700);
  border-color: transparent;
  color: #fff;
}
.card--green .h3,
.card--green .sub2,
.card--green .mini,
.card--green b,
.card--green li{
  color:#fff;
}
.card--green a{ color:#fff; text-decoration: underline; }
.card--green .list--tight li::marker{ color: rgba(255,255,255,.85); }

/* подложка под заголовком у остальных */
.h3--accent{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(31,90,58,.10);
  border: 1px solid rgba(31,90,58,.16);
  color: var(--green-700);
  margin-bottom: 10px;
}

/* если заголовок внутри зелёной карточки — подложку не рисуем */
.card--green .h3--accent{
  background: transparent;
  border-color: rgba(255,255,255,.22);
  color:#fff;
}
/* =========================
   HOTFIX: HERO THUMBS on mobile (single horizontal row)
   Fixes 'tall grid' issue when thumbs become multi-row.
   Put this block at the VERY END of the CSS.
   ========================= */
@media (max-width: 980px){
  .heroThumbs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:10px !important;
    padding:2px 2px 8px !important;
    margin:0 !important;
  }
  .heroThumbs .thumb{
    flex:0 0 calc((100% - 10px)/2) !important; /* 2 visible */
    max-width:none !important;
    width:auto !important;
    scroll-snap-align:start;
  }
  .heroThumbs .thumb img{
    width:100% !important;
    height:86px !important;
    object-fit:cover !important;
    display:block !important;
  }
}
/* ===== HEADER: CTA слева, бургер справа (desktop + mobile) ===== */
.header__row{
  display:flex;
  align-items:center;
  gap:14px;
}

.header__row .logo{ order:1; }
.header__row .headerCta{ order:2; }

/* меню (десктоп) уходит вправо */
.header__row .nav{
  order:3;
  margin-left:auto;
}

/* бургер всегда самый правый */
.header__row .navToggle{
  order:4;
  margin-left:12px;
}

/* мобила: nav скрыт, бургер прижат к правому краю */
@media (max-width: 820px){
  .header__row .nav{ display:none; }
  .header__row .navToggle{
    margin-left:auto; /* прижать вправо */
  }
}
/* ===== HEADER: logo left, CTA center, burger right (desktop+mobile) ===== */
.header__row--burger{
  display:flex;
  align-items:center;
  gap:12px;
}
.header__row--burger .logo{ flex:0 0 auto; }
.header__row--burger .headerCta{ margin:0 auto; }     /* центрируем кнопку/номер */
.header__row--burger .navToggle{ flex:0 0 auto; }     /* бургер справа */



/* ===== HEADER NAV FIX: desktop menu + mobile burger ===== */

/* по умолчанию (десктоп) — показываем обычную навигацию */
.header .nav{ display:flex; gap:18px; align-items:center; }
.header .navToggle{ display:none; }

/* мобила — скрываем nav, показываем бургер */
@media (max-width: 980px){
  .header .navToggle{ display:inline-flex !important; }
}

/* на всякий случай: чтобы nav не “умирал” из-за чужих правил */
@media (min-width: 981px){
  .header .nav{ display:flex !important; }
  .header .navToggle{ display:none !important; }
}

/* ===== HEADER FINAL (keep only this block) ===== */

/* desktop */
.header .nav{ display:flex; gap:10px; margin-left:auto; align-items:center; }
.header .navToggle{ display:none; }
.header .headerCta{ margin-left:12px; }

/* mobile */
@media (max-width: 820px){
  .header .nav{ display:none; }
  .header .navToggle{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }

  /* на мобиле: логотип слева, CTA рядом, бургер справа */
  .header__row{ gap:10px; }
  .header .headerCta{ margin-left:auto; } /* CTA уезжает вправо, перед бургером */
  .header .navToggle{ margin-left:10px; } /* бургер самый правый */
}
/* ===== FAQ PAGE: section titles (inside cards) ===== */
#faqPage .card > h2.h3{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .2px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(31,90,58,.10);
  border: 1px solid rgba(31,90,58,.16);
  color: var(--green-700);
}

/* маленькая “полоска” слева, как в hero-панели */
#faqPage .card > h2.h3::before{
  content:"";
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: rgba(31,90,58,.55);
}

/* чтобы на мобиле не расползалось */
@media (max-width: 560px){
  #faqPage .card > h2.h3{
    font-size: 18px;
    padding: 9px 12px;
  }
  #faqPage .card > h2.h3::before{
    height: 20px;
  }
}
/* ===== SEO block (green) ===== */
#rulesSeo .rulesSeoCard{
  background: linear-gradient(180deg, rgba(31,90,58,.96), rgba(27,79,51,.96));
  border-color: rgba(255,255,255,.14);
  color: #fff;
}

#rulesSeo .rulesSeoCard p{
  color: rgba(255,255,255,.92);
  margin: 0 0 12px;
}

#rulesSeo .rulesSeoCard p:last-child{ margin-bottom: 0; }

#rulesSeo .rulesSeoCard b{
  color: #fff;
}

#rulesSeo .rulesSeoCard a{
  color: rgba(255,255,255,.95);
  text-decoration: underline;
}
/* ===== одинаковая ширина SEO блока и FAQ ===== */
#rulesPage .rulesNarrow{
  max-width: 980px;   /* можешь поставить 900/960/1020 */
  margin: 0 auto;
}

#rulesPage .rulesNarrow .faq{
  max-width: 100% !important; /* перебиваем твой .faq{max-width:820px} */
}

/* ===== Instagram: БОЛЬШЕ высота + одинаковые карточки ===== */

/* сетка тянет карточки на одну высоту */
#galleryPage .instaGrid{ align-items: stretch; }

/* карточка */
#galleryPage .instaCard{
  display:flex;
  align-items:stretch;
}

/* делаем виджеты крупными */
@media (min-width: 981px){
  #galleryPage .instaCard{
    min-height: 520px;          /* было “мелко” — это в 3-4 раза выше */
  }
}

/* сам инста-блок растягиваем, но без “пережатия” */
#galleryPage .instaCard .instagram-media{
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  flex: 1 1 auto;
  height: auto !important;      /* важно: НЕ 100% */
}

/* внутри — пусть iframe занимает высоту карточки */
@media (min-width: 981px){
  #galleryPage .instaCard iframe{
    min-height: 520px !important;
  }
}

/* мобила — не огромные */
@media (max-width: 980px){
  #galleryPage .instaCard iframe{
    min-height: 420px !important;
  }
}
/* ===== FAQ: по ширине как остальные блоки (container) ===== */
#faq .faq,
#faqRules .faq,
#pricesPage #faq .faq,
#galleryPage #faq .faq{
  max-width: 100% !important;
  width: 100%;
}

/* если хочешь, чтобы сами “плашки” были не слишком растянуты — можно так:
#faq .faq__item{ max-width: 100%; }
*/
/* === FIX: маркер слева без налезания на текст === */

/* если у тебя пункты называются .chip (как раньше) */
#sevenPage .paramCard .chip{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px 14px 60px; /* место слева под маркер */
  box-sizing: border-box;
}

/* если у тебя пункты НЕ .chip, а например .pillItem / .item / .row — добавь их сюда */
#sevenPage .paramCard .pillItem,
#sevenPage .paramCard .item{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px 14px 60px;
  box-sizing: border-box;
}

/* кружок */
#sevenPage .paramCard .chip::before,
#sevenPage .paramCard .pillItem::before,
#sevenPage .paramCard .item::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform: translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  background: rgba(31,90,58,.10);
  border: 1px solid rgba(31,90,58,.18);
}

/* звезда */
#sevenPage .paramCard .chip::after,
#sevenPage .paramCard .pillItem::after,
#sevenPage .paramCard .item::after{
  content:"★";
  position:absolute;
  left:18px;
  top:50%;
  transform: translateY(-50%);
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  color: var(--green-700);
  line-height:1;
  pointer-events:none;
}

/* если где-то осталась “реальная” звезда/иконка внутри HTML — скрываем, чтобы не дублировалось */
#sevenPage .paramCard .chip .star,
#sevenPage .paramCard .pillItem .star,
#sevenPage .paramCard .item .star{
  display:none !important;
}

#sevenPage .aboutGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items: stretch; /* важно для равной высоты */
}
/* right column (2 cards stacked) */
#sevenPage .rightCol{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}

#sevenPage .aboutCard--fill{ height:100%; }

/* CTA card (prices link) */
#sevenPage .aboutCard--cta{
  background: rgba(31,90,58,.06);
  border: 1px solid rgba(31,90,58,.18);
}

/* mobile: no equal height needed */
@media (max-width: 980px){
  #sevenPage .rightCol{ height:auto; }
  #sevenPage .aboutCard--fill{ height:auto; }
}

/* FAQ — как предыдущие блоки (на всю ширину контейнера) */
#sevenPage #sevenFaq .faq{
  width: 100%;
  max-width: none !important;
  margin: 0;            /* убрать центрирование */
}

#sevenPage #sevenFaq .faq__item{
  width: 100%;
}
/* RIGHT column = 2 cards stacked, и она задаёт высоту */
#loftPage .rightCol{
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* чтобы обе колонки тянулись */
#loftPage .aboutGrid{
  align-items: stretch;
}

/* ВАЖНО: у грида должны быть дети, которые реально являются колонками.
   Обычно это: .aboutCard (left) и .rightCol (right)
*/
#loftPage .aboutGrid > .aboutCard{
  height: 100%;
  overflow: hidden;           /* режем */
  position: relative;
}

/* мягкий низ, чтобы обрезка выглядела красиво */
#loftPage .aboutGrid > .aboutCard::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 70px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}
#loftPage .aboutCard{ height:auto; } /* важный фикс */
#loftPage .aboutGrid{ align-items: stretch; }

#loftPage #loftAbout .aboutGrid > .aboutCard{
  overflow:hidden;
  position:relative;
}

/* мягкая “шторка” снизу */
#loftPage #loftAbout .aboutGrid > .aboutCard::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:80px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}
#loftPage .rightCol .aboutCard{
  display:flex;
  flex-direction:column;
}

#loftPage .rightCol .aboutCard .btn{
  margin-top:auto; /* кнопка прижмётся вниз */
}
/* ===== LOFT ABOUT: strict 1:1 height ===== */
#loftPage #loftAbout .aboutGrid{ align-items: stretch; }

/* правая колонка — обычная колонка */
#loftPage #loftAbout .rightCol{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* кнопки справа вниз */
#loftPage #loftAbout .rightCol .aboutCard{
  display:flex;
  flex-direction:column;
}
#loftPage #loftAbout .rightCol .aboutCard .btn{ margin-top:auto; }

/* левая карточка — режется по высоте, которую задаст JS */
#loftPage #loftAbout .aboutLeft{
  overflow:hidden;
  position:relative;
}

/* красивый fade снизу */
#loftPage #loftAbout .aboutLeft::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:80px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}

/* мобила: не фиксируем высоту */
@media (max-width: 980px){
  #loftPage #loftAbout .aboutLeft{ height:auto !important; }
  #loftPage #loftAbout .aboutLeft::after{ display:none; }
}