/**
 * Houses Landing — стилі (07.08.2026).
 *
 * Mobile-first: базові правила = телефон, десктоп добудовується медіазапитами.
 * Причина не в моді — у макеті мобільна версія була набором винятків з
 * десктопної, і головна таблиця сторінки на 375px рвала ціни посеред розряду.
 *
 * Токени успадковуються з vsb-tokens.css (--vsb-*), тут лише те, що специфічне
 * для дім-лендингу.
 */

.hs-main {
  --hs-ink:        var(--vsb-ink, #14345b);
  --hs-ink-deep:   var(--vsb-ink-deep, #1D2D44);
  --hs-ink-soft:   #2B2B2B;
  --hs-muted:      #5F6873;
  --hs-accent:     var(--vsb-accent, #f4892d);
  --hs-accent-h:   #e07818;
  --hs-line:       #D6DEE5;
  --hs-pale:       #e6eef5;
  --hs-paper:      #fff;
  --hs-bg:         #F7F9FA;
  --hs-warn:       #B5533A;
  --hs-ok:         #2E7D5B;

  background: var(--hs-bg);
  color: var(--hs-ink-soft);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.hs-main *, .hs-main *::before, .hs-main *::after { box-sizing: border-box; }

/* ── Типографіка ──────────────────────────────────────────────────── */
.hs-main h1, .hs-main h2, .hs-main h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--hs-ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .6rem;
}
/* Специфічність важлива: `.hs-main h1` (клас+тег) перебивав одиночний клас,
   і білий заголовок ставав темно-синім на темно-синьому фоні — тобто зникав. */
.hs-main .hs-hero__title {
  font-size: clamp(1.85rem, 6.5vw, 3.4rem);
  color: #fff !important; /* тема задає колір заголовків глобально — перебиваємо */
  margin-bottom: 1rem;
  text-shadow: 0 2px 18px rgba(10, 24, 40, .45); /* світле фото знизу кадру */
}
.hs-main .hs-hero .hs-eyebrow { color: var(--hs-accent); }
.hs-main .hs-section--deep .hs-h2,
.hs-main .hs-quiz-sec .hs-h2 { color: #fff; }
.hs-h2          { font-size: clamp(1.55rem, 5vw, 2.7rem); }
.hs-h3          { font-size: 1.2rem; margin-bottom: .5rem; }

.hs-eyebrow {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hs-accent); font-weight: 600; margin: 0 0 .55rem;
}
.hs-lead  { font-size: 1.02rem; color: var(--hs-muted); max-width: 62ch; margin: 0 0 1rem; }
.hs-muted { color: var(--hs-muted); font-size: .9rem; }
.hs-accent{ color: var(--hs-accent); }

/* ── Каркас ───────────────────────────────────────────────────────── */
.hs-container { max-width: 1160px; margin: 0 auto; padding: 0 1.15rem; }
.hs-container--narrow { max-width: 780px; }

.hs-section { padding: 2.75rem 0; }
.hs-section--tight  { padding: 2rem 0; }
.hs-section--paper  { background: var(--hs-paper); }
.hs-section--deep   { background: var(--hs-ink-deep); color: #fff; }
.hs-section--deep h2, .hs-section--deep h3 { color: #fff; }
.hs-section--deep .hs-lead, .hs-section--deep .hs-muted { color: rgba(255,255,255,.8); }

.hs-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }

/* ── Кнопки ───────────────────────────────────────────────────────── */
.hs-btn {
  display: block; width: 100%; text-align: center;
  background: var(--hs-accent); color: #fff; text-decoration: none;
  padding: .95rem 1.4rem; font-weight: 600; font-size: .88rem;
  letter-spacing: .03em; text-transform: uppercase; border: 0; cursor: pointer;
  font-family: inherit; line-height: 1.3;
}
.hs-btn:hover { background: var(--hs-accent-h); color: #fff; }
.hs-btn--sm    { display: inline-block; width: auto; padding: .7rem 1.1rem; font-size: .8rem; }
.hs-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
.hs-btn--ghost:hover { background: rgba(255,255,255,.1); }
.hs-btn--dark  { border-color: var(--hs-line); color: var(--hs-ink); }
.hs-btn--dark:hover { background: var(--hs-pale); color: var(--hs-ink); }

/* ── Картки ───────────────────────────────────────────────────────── */
.hs-card {
  background: var(--hs-paper); border: 1px solid var(--hs-line); padding: 1.25rem;
}
.hs-card--accent { border-left: 3px solid var(--hs-accent); }
.hs-card p:last-child { margin-bottom: 0; }
.hs-list { padding-left: 1.05rem; margin: .7rem 0 1rem; }
.hs-list li { margin-bottom: .35rem; font-size: .93rem; }

/* ── HERO ─────────────────────────────────────────────────────────── */
.hs-hero {
  position: relative; color: #fff; padding: 2.5rem 0 2rem;
  background: #12293f; overflow: hidden;
}
.hs-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hs-hero-bg, none);
  background-position: center 40%; background-size: cover; background-repeat: no-repeat;
}
.hs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hs-hero-overlay, linear-gradient(140deg, rgba(18,41,63,.92) 0%, rgba(29,45,68,.86) 45%, rgba(36,64,92,.72) 100%));
}
.hs-hero__inner { position: relative; z-index: 1; display: grid; gap: 1.75rem; }
.hs-hero__lead  { color: rgba(255,255,255,.88); font-size: 1.02rem; }

/* Хто рахує підсумкову суму. Тон приглушений навмисно: це обмовка під офером,
   а не другий оффер (правки Віки 10.08). На тлі hero .hs-muted не годиться —
   він розрахований на світлі секції. */
.hs-hero__lead-note { margin: .5rem 0 0; font-size: .85rem; color: rgba(255,255,255,.7); }

/* Рядок про землю — головне питання покупця з не-ЄС. Візуально відділена,
   бо в макеті ця думка зʼявлялась аж на 40% скролу. */
.hs-hero__land {
  border-left: 2px solid var(--hs-accent);
  padding-left: .9rem; margin: 1.15rem 0;
  font-size: .93rem; color: rgba(255,255,255,.82);
}

.hs-hero__actions { display: grid; gap: .6rem; margin: 1.25rem 0 1rem; }

.hs-hero__channels {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.18);
}
.hs-chan {
  color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.32); padding: .5rem .85rem;
}
.hs-chan:hover { background: rgba(255,255,255,.12); color: #fff; }

.hs-hero__note { font-size: .85rem; color: rgba(255,255,255,.75); margin: .9rem 0 0; }
.hs-hero__geo  { font-size: .8rem;  color: rgba(255,255,255,.6);  margin: .8rem 0 0; }

.hs-vikki {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  padding: 1.1rem;
}
.hs-vikki__photo { width: 100%; max-width: 190px; height: auto; display: block; margin-bottom: .8rem; }
.hs-vikki__name  { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: #fff; }
.hs-vikki__role  { margin: .3rem 0 .5rem; }
.hs-vikki__meta  { font-size: .83rem; color: rgba(255,255,255,.75); line-height: 1.5; }
.hs-vikki__meta span { display: block; }
.hs-vikki__meta a { color: var(--hs-accent); text-decoration: none; display: block; margin-top: .4rem; }

.hs-trust {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.2);
}
.hs-trust__i { text-decoration: none; display: block; }
.hs-trust__i b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; color: #fff; }
.hs-trust__i span { font-size: .78rem; color: rgba(255,255,255,.72); }
a.hs-trust__i:hover b { color: var(--hs-accent); }

/* ── Каталог ──────────────────────────────────────────────────────── */
.hs-feed { display: grid; gap: 1rem; margin-top: 1.5rem; }
.hs-obj {
  background: var(--hs-paper); border: 1px solid var(--hs-line);
  text-decoration: none; color: inherit; display: block;
}
.hs-obj:hover { border-color: var(--hs-accent); }
.hs-obj__ph {
  aspect-ratio: 4/3; background: var(--hs-pale);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hs-obj__ph img { width: 100%; height: 100%; object-fit: cover; }
.hs-obj__body  { padding: .9rem 1rem 1.1rem; }
.hs-obj__price { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; color: var(--hs-ink); }
.hs-obj__meta  { font-size: .85rem; color: var(--hs-muted); margin-top: .3rem; }
.hs-obj__tags  { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.hs-km {
  display: inline-block; background: var(--hs-pale); color: var(--hs-ink);
  font-size: .73rem; font-weight: 600; padding: .2rem .5rem;
}
.hs-catalog__all { margin-top: 1.25rem; }

.hs-intercept {
  background: var(--hs-ink-deep); color: #fff; padding: 1.5rem; margin-top: 1.5rem;
  display: grid; gap: 1.1rem;
}
.hs-intercept h3 { color: #fff; }
.hs-intercept p  { color: rgba(255,255,255,.78); margin: 0; font-size: .93rem; }

/* ── Карта цін ────────────────────────────────────────────────────── */
.hs-km__summary { font-size: 1.05rem; color: var(--hs-ink); max-width: 62ch; margin: 1.1rem 0; }
.hs-km__wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* На телефоні таблиця стає списком: три колонки з цінами 1.35rem у 327px
   не вміщаються і рвуть числа посеред розряду («€299 / 900»). */
.hs-km__table { width: 100%; border-collapse: collapse; }
.hs-km__table thead { display: none; }
.hs-km__table tr {
  display: block; background: var(--hs-paper);
  border: 1px solid var(--hs-line); margin-bottom: .6rem; padding: .8rem 1rem;
}
.hs-km__table tr.is-best { background: #FFF6EC; border-color: #f6d5b0; }
.hs-km__table td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border: 0; }
.hs-km__table td::before {
  content: attr(data-th); color: var(--hs-muted);
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  flex: 0 0 auto; align-self: center;
}
.hs-km__table td:first-child {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; color: var(--hs-ink); padding-bottom: .5rem;
}
.hs-km__table td:first-child::before { content: none; }
.hs-km__price { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--hs-ink); }

.hs-pill {
  display: inline-block; background: var(--hs-accent); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .5rem; margin-top: .4rem; vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
}
.hs-km__note { margin-top: .75rem; }
.hs-inline-cta { margin-top: 1.5rem; }

/* ── Порівняння цін ───────────────────────────────────────────────── */
.hs-compare { display: grid; gap: 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; }
/* Блоки всередині секції злипались: сітка мала лише верхній відступ,
   і картка під нею впритул торкалась колонок порівняння. */
.hs-compare + .hs-card,
.hs-grid + .hs-card,
.hs-card + .hs-card { margin-top: 1.25rem; }
.hs-compare__bad  { background: #FDF3F1; border: 1px solid #f0d5cf; padding: 1.25rem; }
.hs-compare__good { background: #F1F8F4; border: 1px solid #cfe6da; padding: 1.25rem; }
.hs-compare__big  { font-family: 'Cormorant Garamond', serif; font-size: 2.3rem; line-height: 1; }
.hs-compare__bad  .hs-compare__big { color: var(--hs-warn); }
.hs-compare__good .hs-compare__big { color: var(--hs-ok); }
.hs-compare__tag  { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; margin: 0 0 .45rem; }
.hs-compare__bad  .hs-compare__tag { color: var(--hs-warn); }
.hs-compare__good .hs-compare__tag { color: var(--hs-ok); }
.hs-compare p { margin: .5rem 0 0; font-size: .92rem; }

/* ── Два продукти ─────────────────────────────────────────────────── */
.hs-two__col   { display: flex; flex-direction: column; }
.hs-two__price { font-family: 'Cormorant Garamond', serif; font-size: 1.85rem; color: var(--hs-ink); margin-top: auto; }
.hs-two__living{ margin-top: 1.25rem; }

/* ── Кроки ────────────────────────────────────────────────────────── */
.hs-steps { display: grid; gap: 1rem; margin-top: 1.5rem; counter-reset: hs-s; }
.hs-step  { position: relative; padding-left: 2.75rem; min-height: 2rem; }
.hs-step::before {
  counter-increment: hs-s; content: counter(hs-s);
  position: absolute; top: 0; left: 0; width: 2rem; height: 2rem;
  border: 1px solid var(--hs-accent); color: var(--hs-accent);
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.hs-step b    { display: block; margin-bottom: .2rem; font-size: .95rem; }
.hs-step span { font-size: .86rem; color: var(--hs-muted); }
.hs-eood__anchor { margin-top: 1rem; }
.hs-eood__anchor a { color: var(--hs-accent); font-weight: 600; text-decoration: none; font-size: .9rem; }
.hs-process__trip { margin-top: 1.5rem; }

/* ── Таблиця витрат ───────────────────────────────────────────────── */
.hs-costs__table { width: 100%; border-collapse: collapse; background: var(--hs-paper); margin-top: 1.15rem; }
.hs-costs__table td { padding: .7rem .85rem; border-bottom: 1px solid var(--hs-line); font-size: .9rem; }
/* Колонка значень тримає і суми, і текст («називає адвокат», «залежить від
   операцій компанії»). nowrap рятував суми від розриву, але на 390 px текстове
   значення розпирало таблицю за ширину екрана — сторінка отримувала
   горизонтальний скрол. Тепер текст переноситься, а суми не рвуться, бо
   розряди в них склеєні нерозривним пробілом (hs-costs.php). */
.hs-costs__table td:last-child { text-align: right; font-weight: 600; }
.hs-costs__table tr.hs-costs__total td {
  background: var(--hs-pale); font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; color: var(--hs-ink); border-bottom: 0;
}
.hs-costs__table .hs-muted { display: block; font-size: .78rem; }
/* .hs-main h3 задає margin:0 і б'є одиночний клас — тому відступи тут
   прописані з тією ж вагою, інакше підзаголовок злипається з таблицею. */
.hs-main .hs-costs__extra-title { margin-top: 2.25rem; margin-bottom: .75rem; }
.hs-main .hs-costs__note { margin-top: 1rem; }
.hs-costs__table + .hs-muted { margin-top: .85rem; }
.hs-costs__base-note { margin-top: .55rem; }
.hs-costs__table { margin-bottom: .25rem; }
.hs-main .hs-costs__table + .hs-card,
.hs-main .hs-costs__note + .hs-grid { margin-top: 1.5rem; }

/* ── Відгуки ──────────────────────────────────────────────────────── */
.hs-review { margin: 0; }
.hs-review blockquote { margin: 0 0 .9rem; font-size: .95rem; }
.hs-review blockquote::before { content: "«"; color: var(--hs-accent); }
.hs-review blockquote::after  { content: "»"; color: var(--hs-accent); }
.hs-review figcaption b    { display: block; font-size: .92rem; color: var(--hs-ink); }
.hs-review figcaption span { display: block; font-size: .8rem; color: var(--hs-muted); }
.hs-review__deal { font-style: italic; }
.hs-reviews__note { margin-top: 1.15rem; }
.hs-reviews__link { margin-top: .5rem; }
.hs-reviews__link a { color: var(--hs-accent); text-decoration: none; font-weight: 600; font-size: .9rem; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.hs-faq__i { border-bottom: 1px solid var(--hs-line); }
.hs-faq__i summary {
  cursor: pointer; padding: 1rem 2rem 1rem 0; position: relative;
  font-weight: 600; font-size: .97rem; color: var(--hs-ink); list-style: none;
}
.hs-faq__i summary::-webkit-details-marker { display: none; }
.hs-faq__i summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  color: var(--hs-accent); font-size: 1.4rem; font-weight: 400; line-height: 1;
}
.hs-faq__i[open] summary::after { content: "–"; }
.hs-faq__a { padding-bottom: 1rem; }
.hs-faq__a p { margin: 0 0 .5rem; color: var(--hs-muted); font-size: .92rem; }
.hs-faq__a { max-width: 78ch; } /* рядок не довший за комфортний, але блок — по контейнеру */

/* ── Instagram ────────────────────────────────────────────────────── */
.hs-reels { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
/* .hs-reel — кнопка, а не посилання: перегляд відбувається тут, у лайтбоксі */
.hs-reel {
  position: relative; display: block; aspect-ratio: 9/16; background: var(--hs-pale);
  overflow: hidden; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit; width: 100%;
}
.hs-reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-reel__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .85; pointer-events: none;
}
.hs-reel:hover .hs-reel__play { opacity: 1; }
.hs-reel.is-playing .hs-reel__play { opacity: 0; }
.hs-reel.is-playing:hover .hs-reel__play { opacity: 1; }
.hs-reel:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.hs-reel__play svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.hs-reels__cta { margin-top: 1.15rem; }

/* ── Лайтбокс рілсів ─────────────────────────────────────────────── */
.hs-reels__lb {
  position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .96); padding: 1rem;
}
.hs-reels__lb[hidden] { display: none; }
.hs-reels__lb-stage { position: relative; height: 100%; display: flex; align-items: center; }
.hs-reels__lb-video {
  max-height: min(86vh, 90dvh); max-width: min(100%, 480px);
  width: auto; height: auto; background: #000; display: block;
}
.hs-reels__lb-close,
.hs-reels__lb-nav {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer;
  border-radius: 50%; line-height: 1; padding: 0;
}
.hs-reels__lb-close { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.75rem; }
.hs-reels__lb-nav   { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 2rem; }
.hs-reels__lb-nav--prev { left: .5rem; }
.hs-reels__lb-nav--next { right: .5rem; }
.hs-reels__lb-close:hover,
.hs-reels__lb-nav:hover { background: rgba(255, 255, 255, .24); }
.hs-reels__lb-bar {
  position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; gap: 1rem;
  align-items: center; justify-content: center; flex-wrap: wrap; padding: 0 1rem;
}
.hs-reels__lb-counter { color: rgba(255, 255, 255, .7); font-size: .85rem; }
.hs-reels__lb-ig { color: #fff; font-size: .85rem; text-decoration: underline; }

@media (min-width: 640px) {
  .hs-reels__lb-nav--prev { left: 1.5rem; }
  .hs-reels__lb-nav--next { right: 1.5rem; }
}

/* ── Фото-смуга і фінал ───────────────────────────────────────────── */
.hs-photostrip {
  height: 180px; background-position: center 45%; background-size: cover; background-repeat: no-repeat;
}
.hs-final { text-align: center; }
.hs-final .hs-lead { margin-left: auto; margin-right: auto; }
.hs-final__actions { display: grid; gap: .6rem; margin: 1.5rem 0 1rem; }
.hs-final__note { color: rgba(255,255,255,.6); }

/* ── Квіз ─────────────────────────────────────────────────────────── */
.hs-quiz-sec { position: relative; background: var(--hs-ink-deep); overflow: hidden; }
.hs-quiz-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hs-quiz-bg, none);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.hs-quiz-sec::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hs-quiz-overlay, linear-gradient(140deg, rgba(18,41,63,.9) 0%, rgba(29,45,68,.86) 100%));
}
.hs-quiz-sec > .hs-container { position: relative; z-index: 1; }
.hs-quiz-sec .hs-h2 { color: #fff; }
.hs-quiz-sec .hs-lead { color: rgba(255,255,255,.82); }

.hs-quiz { background: var(--hs-paper); border: 1px solid var(--hs-line); padding: 1.25rem; margin-top: 1.35rem; }
.hs-quiz__progress { height: 3px; background: var(--hs-line); margin-bottom: 1.35rem; }
.hs-quiz__progress i { display: block; height: 3px; background: var(--hs-accent); transition: width .3s ease; }

.hs-quiz__step { display: none; }
.hs-quiz__step.is-active { display: block; }
.hs-quiz__q { font-weight: 600; margin: 0 0 .85rem; color: var(--hs-ink); }
.hs-quiz__num { color: var(--hs-accent); margin-right: .35rem; font-size: .85rem; }
.hs-quiz__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hs-quiz__note { margin: .7rem 0 0; }

.hs-opt {
  border: 1px solid var(--hs-line); padding: .7rem 1rem; font-size: .9rem;
  cursor: pointer; background: #fff; font-family: inherit; color: var(--hs-ink-soft);
  text-align: left; flex: 1 1 auto; min-height: 44px;
}
.hs-opt:hover { border-color: var(--hs-accent); }
.hs-opt[aria-checked="true"], .hs-opt.is-sel {
  border-color: var(--hs-accent); background: #FFF6EC; color: var(--hs-ink); font-weight: 600;
}
.hs-opt:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

.hs-quiz__back {
  background: none; border: 0; color: var(--hs-muted); font-size: .82rem;
  cursor: pointer; padding: .75rem 0 0; font-family: inherit;
}
.hs-quiz__objects { display: grid; gap: .7rem; margin: 1rem 0 1.25rem; }
.hs-quiz__obj {
  display: flex; gap: .8rem; align-items: center; text-decoration: none;
  color: inherit; border: 1px solid var(--hs-line); padding: .6rem;
}
.hs-quiz__obj:hover { border-color: var(--hs-accent); }
.hs-quiz__obj img { width: 76px; height: 60px; object-fit: cover; flex: 0 0 auto; background: var(--hs-pale); }
.hs-quiz__obj b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--hs-ink); }
.hs-quiz__obj span { font-size: .8rem; color: var(--hs-muted); }

.hs-quiz__empty, .hs-quiz__watch { border-left: 3px solid var(--hs-accent); padding-left: .9rem; margin-bottom: 1.25rem; }
.hs-quiz__channels { border-top: 1px solid var(--hs-line); padding-top: 1.15rem; margin-top: 1.15rem; }
.hs-quiz__contact { display: grid; gap: .6rem; margin-top: .9rem; }
.hs-input {
  border: 1px solid var(--hs-line); padding: .8rem 1rem; font-size: 1rem;
  font-family: inherit; width: 100%; min-height: 44px;
}
.hs-input:focus { outline: 2px solid var(--hs-accent); outline-offset: -1px; }
.hs-quiz__privacy { margin-top: .9rem; }

/* ── Липка смуга дій (тільки мобільний) ───────────────────────────── */
/* Смуга рендериться прямо в <body>, ПОЗА `.hs-main`, де оголошені --hs-*.
   Через це `background: var(--hs-accent)` не резолвився і смуга виходила
   прозорою: білий текст просто лежав на фото. Помітили лише 08.08, коли
   прибрали чужу плаваючу кнопку теми, що весь час її накривала.
   Тому змінні дублюємо тут — правило не має залежати від місця в DOM. */
.hs-sticky {
  --hs-accent:    var(--vsb-accent, #f4892d);
  --hs-ink-deep:  var(--vsb-ink-deep, #1D2D44);
  --hs-line:      #D6DEE5;

  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr auto; gap: 1px;
  background: var(--hs-line);
  box-shadow: 0 -2px 12px rgba(20,52,91,.14);
  transform: translateY(100%); transition: transform .25s ease;
}
.hs-sticky.is-on { transform: translateY(0); }
.hs-sticky a {
  background: var(--hs-accent); color: #fff; text-decoration: none;
  padding: .9rem 1rem; font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; text-align: center; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.hs-sticky a.hs-sticky__call { background: var(--hs-ink-deep); padding-inline: 1.2rem; }

/* Глобальна кнопка теми на дім-сторінці шкодить двічі: пише «Подобрать
   КВАРТИРУ» і веде в квартирну гілку бота (`?start=s_buy__lru`), тобто ламає
   і зміст, і атрибуцію дім-квіза. До того ж її z-index 9500 лягав поверх
   нашої липкої смуги — на телефоні людина бачила лише чужу кнопку.
   Файл вантажиться тільки на лендингах плагіна, тож правило локальне. */
body.page-template-vikki-houses .tg-float-btn,
body.page-template-vikki-houses .floating-bot__btn { display: none !important; }

/* Плашка «переглянути згоду» від CookieYes сидить у тому ж куті, що й наша
   смуга, і накривала ліву кнопку. Піднімаємо її рівно на висоту смуги й
   приглушуємо: у каталозі вона лягала на початок ціни, а ціна — головне,
   заради чого картку взагалі дивляться. Клікабельність лишається (відкликати
   згоду має бути можливо), при дотику/наведенні повертається повна видимість. */
@media (max-width: 639px) {
  .cky-btn-revisit-wrapper {
    bottom: 60px !important;
    opacity: .45; transform: scale(.85); transform-origin: left bottom;
    transition: opacity .2s ease;
  }
  .cky-btn-revisit-wrapper:hover,
  .cky-btn-revisit-wrapper:focus-within { opacity: 1; }
}

/* ══ Мобільне ущільнення (08.08.2026) ═════════════════════════════
   Верстка не ламалась — сторінка просто виходила нескінченною: 17 800 px
   на 390 px екрані. Секції, картки й ліди мали десктопні відступи, тому
   до першого доказу треба було гортати два екрани. Тут тільки щільність,
   жодної зміни складу блоків. */
@media (max-width: 639px) {
  .hs-main       { line-height: 1.55; }
  .hs-section    { padding: 2.1rem 0; }
  .hs-section--tight { padding: 1.6rem 0; }
  .hs-lead       { font-size: .97rem; line-height: 1.5; margin-bottom: .85rem; }
  .hs-card       { padding: 1rem; }
  .hs-card p     { font-size: .93rem; line-height: 1.5; }
  .hs-grid       { gap: .8rem; margin-top: 1rem; }

  /* Фото 4/3 з'їдало 292 px на кожній картці — при шести це зайвий екран.
     3/2 лишає будинок упізнаваним, але вертикаль коротшає майже вдвічі. */
  .hs-obj__ph    { aspect-ratio: 3/2; }
  .hs-obj__body  { padding: .75rem .85rem .9rem; }
  .hs-obj__price { font-size: 1.4rem; }
  .hs-feed       { gap: .8rem; margin-top: 1.15rem; }

  /* Карта цін на телефоні. Кожен пояс — це три числа, а займав пів екрана:
     шість поясів давали 1500 px майже порожнього місця. Тепер заголовок пояса
     і кількість обʼєктів стоять в одному рядку, ціни — компактною парою під
     ним, а плашка «найнижчий поріг» переїхала під заголовок: поруч із «3–5 км»
     вона розпирала рядок і читалась як окремий блок. */
  .hs-km__table tr             { padding: .6rem .8rem; margin-bottom: .45rem; }
  .hs-km__table td             { padding: .1rem 0; font-size: .92rem; }
  .hs-km__table td::before     { font-size: .68rem; letter-spacing: .05em; }
  /* Блок, а не flex: у flex-контейнері плашка з flex-basis:100% розтягувалась
     на всю ширину картки і читалась як банер. Тут вона inline-block — по ширині
     свого тексту, з власного рядка під назвою пояса. */
  .hs-km__table td:first-child {
    display: block; font-size: 1.05rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--hs-line); margin-bottom: .3rem;
  }
  .hs-km__price { font-size: 1.02rem; }
  .hs-pill {
    display: inline-block; width: auto;
    font-size: .58rem; padding: .16rem .42rem; margin-top: .3rem;
  }
  .hs-km__summary              { font-size: 1rem; margin: .9rem 0; }

  .hs-costs__table td { padding: .6rem .7rem; font-size: .87rem; }
  .hs-intercept       { padding: 1.15rem; gap: .9rem; margin-top: 1.15rem; }
  .hs-steps           { gap: .7rem; }

  /* Візитка Вікі в hero: на десктопі вона стоїть збоку і нічого не коштує,
     на телефоні лягає в стовпчик і забирає ~850 px — цілий екран МІЖ обіцянкою
     і кнопкою. Доказ «хто ця людина» на мобільному дає блок hs-reels нижче,
     тож у hero він дублюється ціною головного кроку. */
  .hs-vikki { display: none; }
}

/* ══ Планшет ══════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .hs-container { padding: 0 1.5rem; }
  .hs-section   { padding: 3.5rem 0; }
  .hs-btn       { display: inline-block; width: auto; }
  .hs-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
  /* Фінал центрований, але text-align на flex-контейнер не діє —
     кнопки лишались притиснутими вліво під центрованим заголовком. */
  .hs-final__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
  .hs-grid--2   { grid-template-columns: 1fr 1fr; }
  /* Одна картка в двоколонковій сітці не має тулитись у половину. */
  .hs-grid--2 > :only-child { grid-column: 1 / -1; }
  .hs-compare   { grid-template-columns: 1fr 1fr; }
  .hs-feed      { grid-template-columns: 1fr 1fr; }
  .hs-trust     { grid-template-columns: repeat(4, 1fr); }
  .hs-reels     { grid-template-columns: repeat(4, 1fr); }
  .hs-steps     { grid-template-columns: 1fr 1fr; }
  .hs-quiz      { padding: 1.75rem; }
  .hs-photostrip{ height: 240px; }
  .hs-sticky    { display: none; }
}

/* ══ Десктоп ══════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .hs-section   { padding: 4.5rem 0; }
  .hs-hero      { padding: 4.5rem 0 3rem; }
  .hs-hero__inner { grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
  .hs-vikki__photo { max-width: 100%; }
  .hs-grid--3   { grid-template-columns: repeat(3, 1fr); }
  .hs-feed      { grid-template-columns: repeat(3, 1fr); }
  .hs-steps     { grid-template-columns: repeat(5, 1fr); }
  .hs-step      { padding-left: 0; padding-top: 2.5rem; }
  .hs-step::before { top: 0; }
  .hs-intercept { grid-template-columns: 1fr auto; align-items: center; padding: 2.25rem; gap: 2rem; }
  .hs-photostrip{ height: 280px; }

  /* Таблиця стає таблицею тільки там, де для неї є місце */
  .hs-km__table thead { display: table-header-group; }
  .hs-km__table tr { display: table-row; border: 0; margin: 0; padding: 0; background: transparent; }
  .hs-km__table tr.is-best { background: #FFF6EC; }
  .hs-km__table th, .hs-km__table td {
    display: table-cell; padding: .95rem 1rem;
    border-bottom: 1px solid var(--hs-line); text-align: left;
  }
  .hs-km__table th {
    font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--hs-muted); font-weight: 600;
  }
  .hs-km__table td::before { content: none; }
  /* display повертаємо ЯВНО: мобільне `td:first-child{display:block}` має вищу
     специфічність за загальне `td{display:table-cell}` і розпирало першу колонку. */
  .hs-km__table td:first-child {
    display: table-cell; font-family: 'Montserrat', sans-serif;
    font-size: 1rem; color: inherit; padding: .95rem 1rem; white-space: nowrap;
  }
  .hs-km__table td:first-child .hs-pill { white-space: normal; }
  /* Ширини задаємо явно: без них браузер віддавав першій колонці майже
     половину таблиці, а ціни тиснулись праворуч із діркою посередині. */
  .hs-km__table { table-layout: fixed; }
  .hs-km__table th:nth-child(1), .hs-km__table td:nth-child(1) { width: 42%; }
  .hs-km__table th:nth-child(2), .hs-km__table td:nth-child(2) { width: 20%; }
  .hs-km__table th:nth-child(3), .hs-km__table td:nth-child(3) { width: 20%; }
  .hs-km__table th:nth-child(4), .hs-km__table td:nth-child(4) { width: 18%; text-align: right; }
  .hs-km__price { font-size: 1.3rem; }
  .hs-km__table tr.is-best td { border-bottom-color: #f6d5b0; }
  .hs-pill { margin-top: 0; margin-left: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-main *, .hs-sticky { transition: none !important; }
}

/* ══ Швидкий перегляд обʼєкта (08.08.2026) ════════════════════════
   Рекламний трафік не має покидати лендинг заради картки обʼєкта:
   перехід губить місце скролу, квіз і карту цін. Тому попап. */

/* Стан обʼєкта — бейдж поверх фото картки */
.hs-obj__ph { position: relative; }
.hs-obj__cond {
  position: absolute; top: .55rem; left: .55rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .25rem .55rem; border-radius: 20px;
}
.hs-obj__cond--good { background: #e8f5ec; color: #1a7a40; }
.hs-obj__cond--warn { background: #fdf1e0; color: #8a5316; }

/* Явна підказка, що картка клікабельна: до цього вона мовчала */
.hs-obj__view {
  display: inline-block; margin-top: .7rem;
  font-size: .82rem; font-weight: 600; color: var(--hs-accent);
}
.hs-obj:hover .hs-obj__view { text-decoration: underline; }

.hs-quick {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 24, 38, .82); padding: 1rem;
}
.hs-quick[hidden] { display: none; }
.hs-quick__box {
  background: var(--hs-paper, #fff); max-width: 940px; width: 100%;
  max-height: 92vh; overflow-y: auto; position: relative;
  display: grid; grid-template-columns: 1fr;
}
.hs-quick__close {
  position: absolute; top: .4rem; right: .5rem; z-index: 3;
  width: 40px; height: 40px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--hs-ink);
  font-size: 1.7rem; line-height: 1; border-radius: 50%;
}
.hs-quick__gal { position: relative; background: var(--hs-pale); }
.hs-quick__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.hs-quick__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; cursor: pointer; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--hs-ink);
  font-size: 1.6rem; line-height: 1;
}
.hs-quick__nav--prev { left: .5rem; }
.hs-quick__nav--next { right: .5rem; }
.hs-quick__count {
  position: absolute; bottom: .6rem; right: .7rem;
  background: rgba(12, 24, 38, .65); color: #fff;
  font-size: .72rem; padding: .15rem .5rem; border-radius: 20px;
}
.hs-quick__body { padding: 1.15rem; }
.hs-quick__body .hs-obj__cond { position: static; display: inline-block; margin-bottom: .5rem; }
.hs-quick__price {
  font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; color: var(--hs-ink);
}
.hs-quick__meta { color: var(--hs-muted); font-size: .9rem; margin: .2rem 0 .9rem; }
.hs-quick__poi { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.hs-quick__poi-item {
  background: var(--hs-pale); color: var(--hs-ink);
  font-size: .76rem; font-weight: 600; padding: .25rem .55rem;
}
.hs-quick__desc { font-size: .9rem; color: var(--hs-muted); margin-bottom: 1.1rem; }
.hs-quick__desc[hidden] { display: none; }
.hs-quick__actions { display: grid; gap: .6rem; }

@media (min-width: 800px) {
  .hs-quick__box { grid-template-columns: 1.15fr 1fr; }
  .hs-quick__img { aspect-ratio: auto; height: 100%; min-height: 380px; }
  .hs-quick__body { padding: 1.6rem 1.5rem; align-self: center; }
  .hs-quick__actions { grid-template-columns: 1fr 1fr; }
}

/* Honeypot — пастка для ботів. Має бути невидимим для людей, але лишатись у DOM:
   боти заповнюють усі поля підряд, люди його не бачать.
   ⚠️ 09.08.2026: поле поїхало в прод БЕЗ цього правила і показувалось живою
   порожньою рамкою під контактом. Небезпека не косметична — людина могла в нього
   написати, і заявка мовчки відхилилась би як спам.
   Ховаємо зсувом за екран, а не display:none: частина ботів пропускає приховані
   поля, а зсунуте бачить як звичайне. */
.hs-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}