/* ============================================================
   Главная v13 — секции ниже героя.
   Продолжение home_v13.css: переменные берутся оттуда (:root).
   Все сетки резиновые — auto-fit + minmax, без точек перелома.
   ============================================================ */

.hv13-page {
  background: var(--hv13-paper);
  font-family: var(--hv13-sans);
  color: var(--hv13-ink);
}

.hv13-page .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hv13-eyebrow--light { color: oklch(100% 0 0 / .72); }
.hv13-eyebrow--warm  { color: oklch(.78 .14 60); }
.hv13-h2--light      { color: var(--hv13-white); }

/* Страница-обёртка задаёт точку отсчёта для абсолютной шапки */
.hv13-page { position: relative; }

/* Распорка под фиксированную шапку: на этой раскладке шапка лежит
   поверх героя и места в потоке не занимает — иначе страница
   съезжала на 60px и шапка оказывалась на белом фоне. */
body.hv13-body > .mob-hidden { display: none !important; }

.hv13-hero { padding-top: 84px; }

@media (max-width: 900px) {
  .hv13-hero { padding-top: 72px; }
}

/* ── Сертификаты ──────────────────────────────────────────── */

.hv13-gift {
  display: grid;
  /* Резина: пока хватает места — две колонки, дальше одна */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-radius: 28px;
  overflow: hidden;
  background: var(--hv13-green-d);
  color: var(--hv13-white);
}

.hv13-gift__art {
  position: relative;
  min-height: 300px;
  background: linear-gradient(150deg, oklch(.34 .06 152) 0%, oklch(.2 .04 150) 100%);
}

/* Бланки веером. Размеры в процентах, поэтому веер не рассыпается
   при сужении колонки. */
.hv13-gift__card {
  position: absolute;
  /* под подпись сюжета в углу */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 46%;
  min-width: 150px;
  aspect-ratio: 8 / 5;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 12px 26px oklch(0% 0 0 / .3);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Веер из пяти бланков. Разложены так, чтобы номинал каждого был
   виден целиком: нахлёст допустим по краю, но не по цифре. */
.hv13-gift__card--1 { top: 6%;  left: 4%;  rotate: -6deg; background: linear-gradient(180deg,oklch(.74 .05 150),oklch(.32 .06 150)); }
.hv13-gift__card--2 { top: 16%; left: 44%; rotate: 4deg;  background: linear-gradient(180deg,oklch(.82 .07 68),oklch(.4 .07 55)); }
.hv13-gift__card--3 { top: 46%; left: 20%; rotate: -3deg; background: linear-gradient(180deg,oklch(.55 .06 240),oklch(.2 .04 220)); }
.hv13-gift__card--4 { top: 56%; left: 56%; rotate: 6deg;  background: linear-gradient(180deg,oklch(.86 .07 100),oklch(.38 .08 145)); }
.hv13-gift__card--5 { top: 30%; left: 2%;  rotate: -2deg; background: linear-gradient(180deg,oklch(.86 .05 210),oklch(.36 .07 225)); display: none; }

/* Пятый бланк показываем только там, где есть место: на узкой колонке
   веер из пяти превращается в кашу. */
@media (min-width: 1100px) {
  .hv13-gift__card--5 { display: flex; }
}

/* Подпись сюжета — мелким моно в верхнем углу бланка */
.hv13-gift__tag {
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  font-family: var(--hv13-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: oklch(100% 0 0 / .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv13-gift__note-art {
  position: absolute;
  left: 28px;
  bottom: 18px;
  font-family: var(--hv13-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: oklch(100% 0 0 / .55);
}

.hv13-gift__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.hv13-gift__b2b {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: oklch(100% 0 0 / .82);
  font-size: 14px;
  text-decoration: underline dotted oklch(100% 0 0 / .4);
  text-underline-offset: .22em;
}

.hv13-gift__b2b:hover { color: var(--hv13-white); }

.hv13-gift__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 48px);
}

.hv13-gift__note {
  max-width: 52ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: oklch(100% 0 0 / .8);
}

.hv13-gift__sums { display: flex; flex-wrap: wrap; gap: 8px; }

.hv13-sum {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid oklch(100% 0 0 / .3);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hv13-sum--on { background: var(--hv13-ochre); border-color: var(--hv13-ochre); }

.hv13-gift__ways { margin: 4px 0 0; padding: 0; list-style: none; }

.hv13-gift__ways li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 4px 0;
  border-bottom: 1px solid oklch(100% 0 0 / .14);
  font-size: 14px;
  color: oklch(100% 0 0 / .86);
}

.hv13-gift__ways li:last-child { border-bottom: 0; }
.hv13-gift__ways b { font-variant-numeric: tabular-nums; }

/* ── Подборки-кругляши ────────────────────────────────────── */

.hv13-coins__group { margin-top: 22px; }

.hv13-coins__label {
  display: block;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.hv13-coins { margin-top: 12px; gap: 20px; }

/* Кругляши: в макете это сетка на всю ширину — восемь в ряд, каждый
   тянется по своей ячейке. Лентой они оставляли пустое место справа. */
@media (min-width: 901px) {
  .hv13-coins {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .hv13-coins .hv13-coin { width: auto; }
  .hv13-coins .hv13-coin__pic { width: 100%; height: auto; aspect-ratio: 1; }
}

.hv13-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 96px;
  font-family: var(--hv13-serif);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--hv13-ink);
  text-decoration: none;
}

.hv13-coin:hover { color: var(--hv13-green); }

.hv13-coin__pic {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(180deg,oklch(.74 .05 150),oklch(.26 .06 150));
  background-size: cover;
  background-position: center;
}

.hv13-coin--water     { background: linear-gradient(180deg,oklch(.86 .05 210),oklch(.36 .07 225)); }
.hv13-coin--tub       { background: linear-gradient(180deg,oklch(.87 .06 60),oklch(.4 .09 45)); }
.hv13-coin--sauna     { background: linear-gradient(180deg,oklch(.82 .07 68),oklch(.38 .06 60)); }
.hv13-coin--bbq       { background: linear-gradient(180deg,oklch(.8 .09 55),oklch(.34 .08 40)); }
.hv13-coin--pets      { background: linear-gradient(180deg,oklch(.86 .07 100),oklch(.38 .08 145)); }
.hv13-coin--forest    { background: linear-gradient(180deg,oklch(.74 .05 150),oklch(.26 .06 150)); }
.hv13-coin--mountains { background: linear-gradient(180deg,oklch(.55 .06 240),oklch(.18 .04 220)); }
.hv13-coin--sea       { background: linear-gradient(180deg,oklch(.87 .06 60),oklch(.32 .07 300)); }
/* Сюжеты из макета: озеро, луг и закатное золото */
.hv13-coin--lake      { background: linear-gradient(180deg,oklch(.86 .05 210),oklch(.36 .07 225)); }
.hv13-coin--snow      { background: linear-gradient(180deg,oklch(.9 .02 230),oklch(.4 .05 235)); }
.hv13-coin--meadow    { background: linear-gradient(180deg,oklch(.86 .07 100),oklch(.38 .08 145)); }
.hv13-coin--golden    { background: linear-gradient(180deg,oklch(.82 .07 68),oklch(.26 .05 155)); }

/* ── Владельцам ───────────────────────────────────────────── */

.hv13-owner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border-radius: 24px;
  overflow: hidden;
  background: var(--hv13-green-d);
  color: var(--hv13-white);
}

.hv13-owner__art {
  min-height: 240px;
  background: linear-gradient(180deg,oklch(.8 .08 82) 0%,oklch(.58 .09 70) 50%,oklch(.36 .06 65) 100%);
}

.hv13-owner__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 3vw, 48px);
}

.hv13-owner__note {
  max-width: 46ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: oklch(100% 0 0 / .78);
}

.hv13-owner__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.hv13-owner__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: oklch(100% 0 0 / .82);
  font-size: 14px;
  text-decoration: underline dotted oklch(100% 0 0 / .4);
  text-underline-offset: .22em;
}

.hv13-owner__link:hover { color: var(--hv13-white); }

/* ── Зачем бронировать ────────────────────────────────────── */

.hv13-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.hv13-why__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--hv13-line);
  border-radius: 16px;
  background: var(--hv13-white);
}

.hv13-why__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: oklch(96% .015 145);
  color: var(--hv13-green);
  font-family: var(--hv13-mono);
  font-size: 13px;
  font-weight: 500;
}

.hv13-why__title {
  margin: 0;
  font-family: var(--hv13-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.012em;
}

.hv13-why__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hv13-ink-2); }

/* ── Нижние тексты ────────────────────────────────────────── */

.hv13-seo__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 40px 56px;
  align-items: start;
}

.hv13-seo__cols > div { display: flex; flex-direction: column; gap: 14px; }

.hv13-seo p {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: oklch(30% .012 60);
}

.hv13-seo__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.hv13-seo__list li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: oklch(30% .012 60);
}

.hv13-seo__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--hv13-green);
}

.hv13-steps {
  margin-top: 48px;
  /* В макете 32px сверху и 36px по бокам */
  padding: clamp(20px, 2.22vw, 32px) clamp(20px, 2.5vw, 36px);
  border: 1px solid var(--hv13-line);
  border-radius: 20px;
  background: var(--hv13-white);
}

.hv13-steps__lead { margin-top: 10px !important; max-width: 84ch; }

.hv13-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.hv13-step { display: flex; gap: 14px; align-items: flex-start; }

.hv13-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 999px;
  background: oklch(96.5% .012 145);
  color: oklch(.34 .06 150);
  font-family: var(--hv13-mono);
  font-size: 14px;
}

.hv13-step b { font-size: 15px; }
.hv13-step p { margin-top: 5px !important; font-size: 14px; line-height: 1.55; color: var(--hv13-ink-2); }
.hv13-steps__tail { margin-top: 22px !important; font-size: 14px; color: var(--hv13-ink-2); }

/* ============================================================
   ⚠ ПОМЕТКА ДАННЫХ-ЗАГЛУШЕК
   Блоки, где цифры и названия вписаны руками, обведены пунктиром
   и подписаны. Сделано нарочито заметно: такие данные нельзя
   выкатить молча — пресса это чужие товарные знаки и реклама
   (ФЗ-38), а «19 человек» на проде считается по-настоящему.
   Снять вместе с подстановкой реальных источников.
   ============================================================ */

/* Рамка и ярлык убраны по просьбе — блоки выглядят как обычные.
   Пометка о том, что данные липовые, осталась комментарием в шаблонах
   рядом с каждым таким блоком: пресса, «19 человек», погода. */
.hv13-stub { position: relative; }

.hv13-stub--inline { margin-top: 20px; width: fit-content; max-width: 100%; }

.hv13-stub__flag {
  position: absolute;
  top: -11px;
  left: 18px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--hv13-ochre);
  color: var(--hv13-white);
  font-family: var(--hv13-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hv13-stub__flag--sm {
  position: static;
  margin-left: 8px;
  font-size: 8px;
  vertical-align: middle;
}

.hv13-stub-line { opacity: .85; }

/* ── Живой спрос ──────────────────────────────────────────── */

.hv13-live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--hv13-line);
  border-radius: 999px;
  background: var(--hv13-white);
  font-size: 14px;
  color: var(--hv13-ink-2);
}

.hv13-live b { color: var(--hv13-ink); font-variant-numeric: tabular-nums; }

.hv13-live__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: oklch(.52 .13 145);
  animation: hv13-pulse 2.4s ease-in-out infinite;
}

.hv13-live__sep { width: 1px; height: 16px; background: var(--hv13-line); }

@keyframes hv13-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
  .hv13-live__dot { animation: none; }
}

/* ── Погодная строка в герое ──────────────────────────────── */

.hv13-hero__weather {
  margin-top: 12px;
  font-family: var(--hv13-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
}

/* ── Пресса ───────────────────────────────────────────────── */

.hv13-press {
  display: grid;
  /* Четыре в ряд, как в макете: при auto-fit выходило семь в первом
     ряду и одно во втором — полоса переставала читаться как сетка. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 22px;
  border: 1px solid var(--hv13-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--hv13-white);
}

.hv13-press__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
  border-right: 1px solid var(--hv13-line);
  border-bottom: 1px solid var(--hv13-line);
  font-size: 21px;
  color: oklch(30% .012 60);
  letter-spacing: -.01em;
}

.hv13-quote {
  margin: 24px 0 0;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: oklch(.32 .06 150);
  color: var(--hv13-white);
}

.hv13-quote p {
  max-width: 62ch;
  margin: 0;
  font-family: var(--hv13-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.36;
}

.hv13-quote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--hv13-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(.72 .16 55);
}

@media (max-width: 700px) {
  /* На телефоне в макете два столбца */
  .hv13-press { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv13-press__cell { min-height: 74px; font-size: 18px; }
}

/* Левая колонка старой раскладки выводится только ради обработчиков
   поиска (модуль каталога держит клик по «Найти»). Убираем её из
   виду, не выключая display: скрытому display: none компоненту
   нечего мерить, а он при инициализации читает размеры. */
.hv13-legacy-hooks {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 700px) {
  /* В одну строку два счётчика на телефон не помещаются: текст
     переносился, а скругление 999px превращало плашку в кривую
     капсулу. Ставим колонкой с обычным скруглением. */
  .hv13-live {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 13px;
  }

  .hv13-live__sep { display: none; }

  .hv13-live__dot { margin-bottom: 2px; }
}

/* ============================================================
   Сверка с новой версией макета (Main.dc.html): сертификаты,
   подборки, цитата, «Владельцам», «Зачем бронировать», SEO, подвал.
   ============================================================ */

/* ── Сертификаты: бланки ─────────────────────────────────────── */
.hv13-gift__art { position: relative; min-height: 460px; overflow: hidden; }

.hv13-blank {
  position: absolute;
  width: 31%;
  max-width: 268px;
  min-width: 190px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 44px oklch(12% .02 150 / .5);
}

.hv13-blank--forest { background: linear-gradient(180deg, oklch(.62 .06 150) 0%, oklch(.36 .07 152) 60%, oklch(.22 .05 150) 100%); }
.hv13-blank--golden { background: linear-gradient(180deg, oklch(.78 .08 60) 0%, oklch(.58 .1 45) 55%, oklch(.32 .06 40) 100%); }
.hv13-blank--dusk   { background: linear-gradient(180deg, oklch(.5 .06 245) 0%, oklch(.34 .06 240) 55%, oklch(.2 .04 235) 100%); }
.hv13-blank--meadow { background: linear-gradient(180deg, oklch(.82 .08 105) 0%, oklch(.6 .09 120) 55%, oklch(.36 .07 130) 100%); }
.hv13-blank--lake   { background: linear-gradient(180deg, oklch(.78 .06 215) 0%, oklch(.56 .08 220) 55%, oklch(.32 .06 225) 100%); }

.hv13-blank__in {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 168px;
  padding: 16px 18px;
  background: linear-gradient(180deg, oklch(0% 0 0 / .1) 0%, oklch(0% 0 0 / .52) 100%);
  color: var(--hv13-white);
}

.hv13-blank__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.hv13-blank__mark { font-family: var(--hv13-serif); font-style: italic; font-size: 15px; }

.hv13-blank__mark span {
  font-family: var(--hv13-sans);
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .8;
}

.hv13-blank__tag,
.hv13-blank__kind {
  font-family: var(--hv13-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: oklch(100% 0 0 / .72);
}

.hv13-blank__kind { display: block; letter-spacing: .16em; color: oklch(100% 0 0 / .7); }

.hv13-blank__sum {
  display: block;
  margin-top: 5px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Старые бланки больше не выводятся */
.hv13-gift__card { display: none; }

/* ── Сертификаты: способы вручения ───────────────────────────── */
.hv13-ways {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  overflow: hidden;
  background: oklch(100% 0 0 / .14);
}

.hv13-ways li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: oklch(.24 .045 155);
}

.hv13-ways__ico { display: inline-flex; width: 22px; flex: none; color: var(--hv13-white); }
.hv13-ways__ico svg { width: 22px; height: 22px; }
.hv13-ways__ico--free { color: oklch(.82 .13 145); }

.hv13-ways__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hv13-ways__txt b { font-size: 14px; font-weight: 600; }
.hv13-ways__txt span { font-size: 12.5px; color: oklch(100% 0 0 / .62); }

.hv13-ways__price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hv13-white); }
.hv13-ways__price--free { color: oklch(.82 .13 145); }

.hv13-gift__ways { display: none; }

/* ── Подборки: подписи групп с короткой чертой ───────────────── */
.hv13-coins__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  font-size: 15px;
  font-weight: 600;
}

.hv13-coins__label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: oklch(72% .01 60);
}

/* ── Признание: цитата и ячейки ──────────────────────────────── */
.hv13-press__cell { background: transparent; min-height: 96px; }

.hv13-quote {
  margin-top: 32px;
  padding: 40px 48px;
  border-radius: 24px;
  background: oklch(.32 .06 150);
}

.hv13-quote p,
.hv13-quote blockquote { max-width: 62ch; font-size: 26px; font-weight: 300; line-height: 1.36; }

/* ── Заголовки секций с собственным кеглем в макете ──────────── */
.hv13-owner .hv13-h2 { font-size: clamp(26px, 2.64vw, 38px); }
.hv13-why-sec .hv13-h2,
.hv13-sec h2.hv13-h2--why { font-size: clamp(24px, 2.36vw, 34px); }

/* ── SEO-тексты: колонка 1300 по центру ─────────────────────── */
.hv13-seo { padding-left: clamp(20px, 5.56vw, 80px); padding-right: clamp(20px, 5.56vw, 80px); }

.hv13-seo__cols,
.hv13-seo .hv13-steps {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.hv13-seo__cols { gap: 56px; }

.hv13-seo__kicker {
  display: block;
  font-size: 15px;
  color: oklch(.42 .07 145);
}

.hv13-seo .hv13-h2 { font-size: clamp(24px, 2.22vw, 32px); line-height: 1.16; }

.hv13-seo__list { grid-template-columns: 1fr 1fr; }

@media (max-width: 700px) {
  .hv13-seo__list { grid-template-columns: 1fr; }
}

.hv13-ways__txt { line-height: 1.4; gap: 1px; }

@media (max-width: 979px) {
  /* Строки о погоде в мобильном макете нет */
  .hv13-hero__weather { display: none; }
}

/* ── Сертификаты на телефоне — Mobile.dc.html ──────────────────
   Светлый фон без тёмной карточки. Порядок: подпись, заголовок и текст;
   бланки лентой; номиналы лентой; способы вручения в рамке; кнопка
   на всю ширину. Разметка та же, что на компьютере: body раскрыт
   через display: contents, порядок задаёт order. */
@media (max-width: 900px) {
  .hv13-gift {
    display: flex; flex-direction: column;
    border-radius: 0; overflow: visible; background: none; color: var(--hv13-ink);
  }
  .hv13-gift__body { display: contents; }
  .hv13-gift .hv13-eyebrow { order: 1; color: oklch(.42 .07 145); }
  .hv13-gift .hv13-h2 { order: 2; margin-top: 9px; color: var(--hv13-ink); }
  .hv13-gift .hv13-h2 br { display: none; }
  .hv13-gift__note { order: 3; margin-top: 6px; font-size: 14px; color: oklch(36% .012 60); }

  /* Бланки — лента 244px вместо веера */
  .hv13-gift__art {
    order: 4; display: flex; gap: 12px; min-height: 0; margin: 16px calc(var(--hv13-pad) * -1) 0;
    padding: 4px 0 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none;
    background: none;
  }
  .hv13-gift__art::-webkit-scrollbar { display: none; }
  .hv13-gift__art::before, .hv13-gift__art::after { content: ""; flex: 0 0 8px; }
  .hv13-gift__art .hv13-blank {
    position: static; flex: none; width: 244px; min-width: 0; max-width: none;
    rotate: 0deg !important; scroll-snap-align: start;
    box-shadow: 0 12px 26px oklch(20% .025 50 / .16);
  }
  .hv13-blank__in { min-height: 152px; padding: 14px 16px; }
  .hv13-blank__mark { font-size: 14px; }
  .hv13-blank__mark span { font-size: 8px; }
  .hv13-blank__tag, .hv13-blank__kind { font-size: 7.5px; }
  .hv13-blank__sum { margin-top: 4px; font-size: 24px; }
  .hv13-gift__note-art { display: none; }

  /* Номиналы — лента контурных кнопок, выбранный — оранжевый */
  .hv13-gift__sums {
    order: 5; flex-wrap: nowrap; gap: 12px; margin: -6px calc(var(--hv13-pad) * -1) 0;
    padding: 0; overflow-x: auto; scrollbar-width: none;
  }
  .hv13-gift__sums::-webkit-scrollbar { display: none; }
  .hv13-gift__sums::before, .hv13-gift__sums::after { content: ""; flex: 0 0 8px; }
  .hv13-gift .hv13-sum { flex: none; border-color: oklch(87.5% .006 85); color: var(--hv13-ink); background: transparent; }
  .hv13-gift .hv13-sum--on { background: oklch(.58 .17 52); border-color: oklch(.58 .17 52); color: #fff; }

  /* Способы вручения — белая рамка с разделителями */
  .hv13-gift .hv13-ways {
    order: 6; gap: 0; margin-top: 16px; border: 1px solid oklch(92.4% .006 85);
    border-radius: 16px; background: #fff;
  }
  .hv13-gift .hv13-ways li { gap: 12px; background: none; border-bottom: 1px solid oklch(95.6% .006 85); }
  .hv13-gift .hv13-ways li:last-child { border-bottom: 0; }
  .hv13-gift .hv13-ways__ico { color: var(--hv13-ink); }
  .hv13-gift .hv13-ways__ico--free,
  .hv13-gift .hv13-ways__price--free { color: oklch(.38 .07 150); }
  .hv13-gift .hv13-ways__txt span { color: oklch(52% .01 60); }
  .hv13-gift .hv13-ways__price { color: var(--hv13-ink); }

  /* Кнопка на всю ширину; ссылки для компаний в мобильном макете нет */
  .hv13-gift__cta { order: 7; margin-top: 16px; }
  .hv13-gift__cta .hv13-btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
  .hv13-gift__b2b { display: none; }
}

/* ── Подборки и пресса на телефоне — Mobile.dc.html ── */
@media (max-width: 900px) {
  /* Кругляши 84px лентой, по четыре в поле зрения */
  .hv13-coins { gap: 12px; }
  .hv13-coins .hv13-coin { flex: none; width: 84px; }
  .hv13-coins__group { margin-top: 22px; }
  .hv13-coins { margin-top: 14px; }
}
@media (max-width: 700px) {
  .hv13-press { margin-top: 18px; }
  .hv13-press__cell { min-height: 74px; padding: 12px; font-size: 18px; }
  .hv13-quote { margin-top: 20px; padding: 26px 22px; border-radius: 20px; }
  .hv13-quote p,
  .hv13-quote blockquote { font-size: 20px; line-height: 1.38; }
  .hv13-quote cite { margin-top: 16px; font-size: 10px; }
}

/* ── SEO-разделы: <details>, на компьютере всегда раскрыты ── */
.hv13-seo__item > summary { list-style: none; cursor: default; pointer-events: none; }
.hv13-seo__item > summary::-webkit-details-marker { display: none; }
.hv13-seo__item > summary .hv13-h2 { margin: 0; }
.hv13-seo__item { display: flex; flex-direction: column; gap: 14px; }

/* ── Низ страницы на телефоне — Mobile.dc.html ── */
@media (max-width: 700px) {
  /* Владельцам: кнопка во всю ширину */
  .hv13-owner__cta { flex-direction: column; align-items: stretch; gap: 13px; }
  .hv13-owner__cta .hv13-btn { justify-content: center; min-height: 52px; font-size: 16px; }
  .hv13-owner__link { align-self: flex-start; font-size: 13.5px; }

  /* Зачем бронировать: номер слева, текст справа */
  .hv13-why { gap: 12px; margin-top: 18px; }
  .hv13-why__item {
    display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; row-gap: 5px;
    align-items: start; padding: 18px; border-radius: 14px;
  }
  .hv13-why__num { grid-row: 1 / span 2; width: 38px; height: 38px; font-size: 12px; }
  .hv13-why__title { font-size: 18px; }
  .hv13-why__item p { font-size: 13px; }

  /* SEO-разделы — аккордеон с «+» */
  .hv13-seo__cols { gap: 0; }
  .hv13-seo__cols > div { gap: 0; }
  .hv13-seo__kicker--second { display: none; }
  .hv13-seo__cols > div:first-child .hv13-seo__kicker { margin-bottom: 12px; }
  .hv13-seo__item { gap: 0; border-bottom: 1px solid oklch(92.4% .006 85); }
  .hv13-seo__item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 56px; cursor: pointer; pointer-events: auto;
  }
  .hv13-seo__item > summary .hv13-h2 { font-size: 19px; line-height: 1.2; }
  .hv13-seo__item > summary::after {
    content: "+"; flex: none; font-family: var(--hv13-sans); font-size: 22px; color: oklch(.42 .07 145);
  }
  .hv13-seo__item[open] > summary::after { content: "−"; }
  .hv13-seo__item p { margin: 4px 0 0 !important; padding-bottom: 14px; font-size: 14px; line-height: 1.65; }
  .hv13-seo__item .hv13-seo__list { padding-bottom: 16px; }

  /* Как забронировать: белая карточка, без вводного и финального абзацев */
  .hv13-seo .hv13-steps { margin-top: 30px; padding: 22px 18px; border-radius: 18px; }
  .hv13-seo .hv13-steps .hv13-h2 { font-size: 24px; }
  .hv13-steps__lead, .hv13-steps__tail { display: none; }
  .hv13-steps__grid { gap: 16px; margin-top: 18px; }
  .hv13-step { gap: 12px; }
  .hv13-step__n { width: 32px; height: 32px; }
}


/* Телефон: точка «в эфире» — в строке с первым счётчиком, а не над ним
   (в колонку она уходила отдельной строкой). */
@media (max-width: 700px) {
  .hv13-live { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: center; }
  .hv13-live__dot { grid-row: 1; margin: 0; }
  .hv13-live > span:not(.hv13-live__dot):not(.hv13-live__sep) { grid-column: 2; }
}

/* Суммы сертификатов — ссылки на gifts с ?amount= (выбор — первым нажатием) */
a.hv13-sum { text-decoration: none !important; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
/* Ссылкам браузер и общие стили дают свой цвет — держим цвет плашек как был:
   белый на тёмном блоке, на телефоне (светлый блок) — тёмный, выбранная — белая */
.hv13-gift a.hv13-sum, .hv13-gift a.hv13-sum:visited, .hv13-gift a.hv13-sum:hover { color: var(--hv13-white) !important; }
@media (max-width: 900px) {
  .hv13-gift a.hv13-sum:not(.hv13-sum--on), .hv13-gift a.hv13-sum:not(.hv13-sum--on):visited { color: var(--hv13-ink) !important; }
}
a.hv13-sum:not(.hv13-sum--on):hover { border-color: oklch(.58 .17 52); }

/* ── Сертификаты: настоящие дизайны, конверт и коробка ─────────
   Сверху веер из пяти обложек с gifts, снизу две плитки упаковки.
   На телефоне всё это — одна лента (обёртки раскрыты через contents). */
.hv13-gift__art {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 26px;
}
.hv13-gfan { position: relative; height: 230px; flex: none; }
.hv13-gfan__card {
  position: absolute;
  width: 24%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 320 / 451;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 34px oklch(12% .02 150 / .55);
  transition: translate .2s ease;
}
.hv13-gfan__card--1 { left: 1%;  top: 18px; rotate: -8deg; }
.hv13-gfan__card--2 { left: 19%; top: 4px;  rotate: -3deg; }
.hv13-gfan__card--3 { left: 38%; top: 0;    rotate: 1deg; z-index: 1; }
.hv13-gfan__card--4 { left: 57%; top: 6px;  rotate: 5deg; }
.hv13-gfan__card--5 { left: 75%; top: 20px; rotate: 9deg; }
.hv13-gfan__card:hover { translate: 0 -8px; z-index: 2; }

.hv13-gpack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 170px; }
.hv13-gpack__item { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.hv13-gpack__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv13-gpack__item:last-child img { object-position: 50% 30%; }
.hv13-gpack__item figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.2;
  color: var(--hv13-ink); background: oklch(100% 0 0 / .9);
}

@media (max-width: 900px) {
  .hv13-gift__art { flex-direction: row; gap: 12px; padding: 4px 0 20px; }
  .hv13-gfan, .hv13-gpack { display: contents; }
  .hv13-gfan__card {
    position: static; flex: none; width: 150px; max-width: none; height: 211px;
    rotate: 0deg; scroll-snap-align: start;
    box-shadow: 0 10px 22px oklch(20% .025 50 / .16);
  }
  .hv13-gpack__item { flex: none; width: 170px; height: 211px; scroll-snap-align: start; }
}

/* ── Владельцам: фото хозяев (owners_hosts.png от дизайнера) ── */
.hv13-owner__art {
  min-height: 320px;
  /* Фон приподнят: в кадре лица и чашки, а не небо над головами */
  background: oklch(.36 .06 65) url("../image/hv13/owners_hosts.webp") 50% 42% / cover no-repeat;
}
@media (max-width: 900px) {
  .hv13-owner__art { min-height: 260px; background-image: url("../image/hv13/owners_hosts-448.webp"); }
}

/* «Как это работает» — четыре шага в ряд на компьютере */
.hv13-steps__grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
