/* ==========================================================================
   HOUSE 09 — v2. Своя вёрстка, без наследия скопированной страницы.
   Порядок: токены → примитивы → PDP.
   ========================================================================== */

/* --------------------------------- сброс -------------------------------- */
/* На страницах h09 стили темы Horizon не подключаются, поэтому нужен свой
   минимальный сброс: иначе браузерный body{margin:8px} даёт белые поля
   по краям тёмных секций и прижимает текст к краю экрана. */
body { margin: 0; -webkit-text-size-adjust: 100%; }

/* ------------------------------- токены -------------------------------- */
.h09 {
  /* Charcoal & Amber: графит — поверхности и шапка, янтарь — действия.
     Текст на янтаре тёмный (--on-accent): контраст 6.4 против 2.8 у белого. */
  --brand: #1f1f1e;
  --brand-dark: #000000;
  --accent: #d08b22;
  --accent-dark: #b87718;
  --accent-soft: rgba(208, 139, 34, 0.1);
  --on-accent: #17150f;
  --ink: #121211;
  --ink-2: #33332f;
  --muted: #6e6e68;
  --line: #e3e3e0;
  --panel: #f5f5f3;
  --panel-2: #ececE8;
  --save-bg: #e3f0de;
  --save-ink: #3c6b33;
  --star: #d08b22;
  --radius: 5px;
  --radius-lg: 10px;
  --gutter: 40px;
  --maxw: 1440px;

  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 991px) {
  .h09 { --gutter: 24px; }
}
@media (max-width: 400px) {
  .h09 { --gutter: 20px; }
}

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

.h09 img { display: block; max-width: 100%; }

.h09__wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ------------------------------ примитивы ------------------------------ */
.h09-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.h09-btn:hover { background: var(--accent-dark); }
.h09-btn:disabled { opacity: 0.6; cursor: default; }
.h09-btn--ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.h09-btn--ghost:hover { background: rgba(31, 31, 30, 0.06); }

.h09-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.h09-stars { color: var(--star); font-size: 15px; letter-spacing: 1.5px; line-height: 1; }

/* ------------------------------- PDP сетка ------------------------------ */
.h09-pdp { padding: 24px 0 40px; overflow-x: clip; }
.h09-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 585px);
  gap: 48px;
  align-items: start;
}
@supports not (overflow: clip) {
  @media (max-width: 991px) { .h09-pdp { overflow-x: hidden; } }
}
@media (max-width: 991px) {
  .h09-pdp { padding: 14px 0 24px; }
  .h09-pdp__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .h09-pdp__wrap { padding-left: 0; padding-right: 0; }
  .h09-pdp__info { padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (min-width: 992px) {
  .h09-pdp__media { position: sticky; top: 24px; }
}

/* -------------------------------- галерея ------------------------------- */
.h09-gal { position: relative; }
.h09-gal__viewport { overflow: hidden; border-radius: var(--radius); }
@media (max-width: 991px) {
  /* 04.09.2026: кадр крупнее — фото главный продавец. Узкие поля вместо
     полного gutter и более высокая пропорция кадра. */
  .h09-gal__viewport { overflow: visible; padding-left: 10px; padding-right: 10px; }
}
.h09-gal__rail {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.h09-gal__slide { flex: 0 0 100%; }
@media (max-width: 991px) {
  .h09-gal__slide { flex: 0 0 calc(100% - 18px); margin-right: 6px; }
  .h09-gal__frame { aspect-ratio: 4 / 3; }
}
.h09-gal__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
}
.h09-gal__frame img { width: 100%; height: 100%; object-fit: cover; }

.h09-gal__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 24px 20px;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0) 0%, rgba(20, 18, 15, 0.72) 62%);
  color: #fff;
  pointer-events: none;
}
.h09-gal__badge-title { font-size: 22px; font-weight: 500; text-align: center; margin: 0 0 14px; }
.h09-gal__badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.h09-gal__badge-item {
  flex: 1 1 0;
  max-width: 120px;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
.h09-gal__badge-item svg { display: block; margin: 0 auto 6px; width: 18px; height: 18px; }
.h09-gal__badge-item + .h09-gal__badge-item { border-left: 1px solid rgba(255, 255, 255, 0.25); }
@media (max-width: 991px) {
  .h09-gal__badge { padding: 44px 12px 14px; }
  .h09-gal__badge-title { font-size: 16px; margin-bottom: 10px; }
  .h09-gal__badge-item { font-size: 8px; }
  .h09-gal__badge-item svg { width: 14px; height: 14px; }
}

.h09-gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.18s ease;
}
.h09-gal__nav--prev { left: 12px; }
.h09-gal__nav--next { right: 12px; }
.h09-gal__nav:disabled { opacity: 0; pointer-events: none; }
.h09-gal__nav svg { width: 8px; height: 13px; }
@media (max-width: 991px) { .h09-gal__nav { display: none; } }

.h09-gal__thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.h09-gal__thumbs::-webkit-scrollbar { display: none; }
.h09-gal__thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 62px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  position: relative;
}
.h09-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.h09-gal__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.38);
  transition: opacity 0.18s ease;
}
.h09-gal__thumb.is-active { border-color: var(--accent); }
.h09-gal__thumb.is-active::after { opacity: 0; }
@media (max-width: 991px) { .h09-gal__thumbs { display: none; } }

.h09-gal__dots { display: none; }
@media (max-width: 991px) {
  .h09-gal__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .h09-gal__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
  }
  .h09-gal__dot.is-active { background: var(--accent); }
}

/* ------------------------------ инфоколонка ----------------------------- */
.h09-pdp__title {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
  margin: 12px 0 8px;
}
@media (max-width: 991px) { .h09-pdp__title { font-size: 26px; } }

.h09-pdp__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.h09-pdp__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 16px;
  margin: 18px 0;
  padding: 18px 16px;
  background: #121211;
  border-radius: 14px;
}
.h09-pdp__trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
}
.h09-pdp__trust-item svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent); }

.h09-pdp__desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.h09-pdp__desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h09-pdp__desc p { margin: 0 0 10px; }
.h09-pdp__more {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------- опции ---------------------------------- */
.h09-opt { margin-top: 22px; }
.h09-opt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.h09-opt__label { font-size: 15px; font-weight: 500; }
.h09-opt__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.h09-opt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h09-opt__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.h09-opt__card:hover { border-color: #cfc8bd; }
.h09-opt__card.is-selected {
  border-color: var(--ink);
  background: var(--panel);
  color: var(--accent);
}
.h09-opt__card svg { width: 46px; height: 28px; }
.h09-opt__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* ------------------------------- допы ----------------------------------- */
.h09-add { margin-top: 26px; display: grid; gap: 10px; }
.h09-add__row {
  display: grid;
  grid-template-columns: 24px 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.h09-add__row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.h09-add__box {
  width: 20px;
  height: 20px;
  border: 1px solid #c9c2b6;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.h09-add__row.is-on .h09-add__box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.h09-add__box svg { width: 12px; height: 12px; opacity: 0; }
.h09-add__row.is-on .h09-add__box svg { opacity: 1; }
.h09-add__thumb {
  width: 84px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}
.h09-add__thumb img { width: 100%; height: 100%; object-fit: cover; }
.h09-add__name { font-size: 14px; font-weight: 500; }
.h09-add__note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.h09-add__price { font-size: 13px; margin-top: 4px; }
.h09-add__was { color: var(--muted); text-decoration: line-through; margin-left: 6px; }
.h09-add__save { color: var(--save-ink); margin-left: 6px; }

/* -------------------------------- цена ---------------------------------- */
.h09-price {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 14px;
}
.h09-price__was { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.h09-price__now { font-size: 26px; font-weight: 500; }
.h09-price__save {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--save-bg);
  color: var(--save-ink);
  font-size: 13px;
  font-weight: 500;
}

.h09-guar {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.h09-guar span { display: inline-flex; align-items: center; gap: 7px; }
.h09-guar svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* ------------------------------- помощь --------------------------------- */
.h09-help {
  margin-top: 26px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--panel);
}
.h09-help__top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.h09-help__title { font-size: 17px; font-weight: 500; line-height: 1.35; text-align: center; }
.h09-help__hours { margin: 10px 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.h09-help__actions { display: grid; gap: 8px; }

/* ----------------------------- аккордеоны ------------------------------- */
.h09-acc { margin-top: 26px; border-top: 1px solid var(--line); }
.h09-acc__item { border-bottom: 1px solid var(--line); }
.h09-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.h09-acc__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--panel-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}
.h09-acc__item.is-open .h09-acc__icon { transform: rotate(180deg); }
.h09-acc__icon svg { width: 11px; height: 7px; }
.h09-acc__a { height: 0; overflow: hidden; transition: height 0.24s ease; }
.h09-acc__a-inner { padding: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ------------------------- нижняя липкая панель -------------------------- */
.h09-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px var(--gutter);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -2px 18px rgba(20, 18, 15, 0.1);
}
.h09-bar.is-on { display: flex; }
.h09-bar__prices { display: flex; align-items: center; gap: 10px; }
.h09-bar .h09-btn { width: auto; min-width: 260px; padding: 14px 28px; }
@media (max-width: 991px) {
  .h09-bar { flex-direction: column; gap: 8px; padding: 10px var(--gutter) 12px; }
  .h09-bar .h09-btn { width: 100%; min-width: 0; }
  .h09-bar__guar { display: none; }
}

/* ------------------------------- модалка -------------------------------- */
.h09-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 18, 15, 0.55);
}
.h09-modal__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 28px 26px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
}
.h09-modal__x {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.h09-modal__h { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.h09-modal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.h09-modal th,
.h09-modal td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.h09-modal th { font-weight: 500; color: var(--muted); font-size: 13px; }
.h09-modal__note { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ==========================================================================
   Блоки страницы (фаза 2)
   ========================================================================== */

/* ------------------------------- шапка ---------------------------------- */
.h09-top {
  background: var(--panel-2);
  font-size: 12px;
  color: var(--ink-2);
}
.h09-top__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.h09-top__rating { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.h09-top__mid { color: var(--muted); }
.h09-top__phone { color: inherit; text-decoration: none; white-space: nowrap; }
@media (max-width: 991px) {
  .h09-top__mid { display: none; }
  .h09-top { font-size: 11px; }
}

.h09-head { background: var(--brand); color: #fff; }
.h09-head__in {
  display: grid;
  grid-template-columns: auto 1fr auto;   /* знак слева, меню, корзина справа */
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.h09-head__logo {
  justify-self: start;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
/* знак: плашка и буквы красятся переменными, поэтому один и тот же svg
   работает и на светлом, и на тёмном фоне */
.h09-logo { display: block; width: 100%; height: auto; }
.h09-logo__bg { fill: var(--logo-bg, #000); }
.h09-logo__fg { fill: var(--logo-fg, #fff); }
/* в шапке и подвале — только слово, белым */
.h09-head__logo,
.h09-foot__brand { --logo-fg: #ffffff; }
.h09-head__logo .h09-logo { width: 150px; }
.h09-head__nav { display: flex; align-items: center; gap: 30px; margin-left: 60px; }
.h09-head__nav a { color: #fff; text-decoration: none; font-size: 14px; opacity: 0.92; }
.h09-head__nav a:hover { opacity: 1; }
.h09-head__right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.h09-head__icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.h09-head__icon svg { width: 20px; height: 20px; }
.h09-head__burger { display: none; }
@media (max-width: 991px) {
  .h09-head__nav { display: none; }
  .h09-head__burger { display: inline-flex; }
  .h09-head__in { min-height: 58px; }
  .h09-head__logo .h09-logo { width: 118px; }
}

/* ------------------------------- бургер-меню ------------------------------ */
.h09-drawer { position: fixed; inset: 0; z-index: 400; }
.h09-drawer[hidden] { display: none; }
.h09-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(10, 10, 10, 0.5);
  opacity: 0; transition: opacity .25s ease;
}
.h09-drawer.is-open .h09-drawer__backdrop { opacity: 1; }
.h09-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(86vw, 340px);
  background: #fff; color: var(--ink);
  padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
}
.h09-drawer.is-open .h09-drawer__panel { transform: translateX(0); }
.h09-drawer__close {
  align-self: flex-end; background: none; border: 0; padding: 6px;
  color: var(--ink); cursor: pointer; margin-bottom: 4px;
}
.h09-drawer__close svg { width: 22px; height: 22px; }
.h09-drawer__links { display: flex; flex-direction: column; }
.h09-drawer__links a {
  color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.h09-drawer__cart {
  color: var(--ink); text-decoration: none; font-size: 15px;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.h09-drawer__cta {
  margin-top: auto; text-align: center; padding: 15px 16px;
  border-radius: var(--radius); background: var(--brand); color: #fff;
  text-decoration: none; font-size: 14px; font-weight: 500;
}
@media (min-width: 992px) {
  .h09-drawer { display: none; }
}

/* ---------------------------- бегущая строка ---------------------------- */
.h09-marq { overflow: hidden; background: #fff; border-block: 1px solid var(--line); }
.h09-marq__track {
  display: flex;
  width: max-content;
  animation: h09marq 38s linear infinite;
}
.h09-marq__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 34px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--muted);
}
.h09-marq__item b { font-weight: 500; color: var(--ink); }
@keyframes h09marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h09-marq__track { animation: none; } }

/* ------------------------------ тёмный блок ----------------------------- */
.h09-band {
  position: relative;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
/* высота секции идёт за пропорцией кадра, иначе на широких экранах низ обрезается
   ровно по головам. object-position: bottom — если места всё же не хватает,
   срезается небо сверху, а не люди снизу. */
/* 03.09.2026: блок обрезан сразу после встроенной формы — без «хвоста» фото
   с людьми под ней (решение Klim). Высота теперь от контента, не от кадра. */
.h09-band__bg { position: absolute; inset: 0; z-index: -2; }
.h09-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.h09 .h09-band__img--m { display: none; }
@media (max-width: 991px) {
  .h09 .h09-band__img--d { display: none; }
  .h09 .h09-band__img--m { display: block; }
}
.h09-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.85) 0%, rgba(20, 18, 15, 0.58) 42%, rgba(20, 18, 15, 0.12) 100%);
}
.h09-band__in { padding-top: 64px; padding-bottom: 72px; max-width: 780px; margin: 0 auto; }
.h09-band__pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.h09-band__h {
  margin: 18px 0 14px;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 500;
}
.h09-band__h span { color: rgba(255, 255, 255, 0.62); }
.h09-band__p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0; }
@media (max-width: 991px) {
  .h09-band__in { padding-top: 36px; padding-bottom: 44px; }
  .h09-band__h { font-size: 28px; }
}

/* -------------------------- заголовок секции ---------------------------- */
.h09-sec { padding: 56px 0; }
.h09-sec--tight { padding: 36px 0; }
.h09-sec__h {
  margin: 0 0 28px;
  font-size: 38px;
  line-height: 1.16;
  font-weight: 500;
  text-align: center;
}
.h09-sec__h span { color: var(--muted); }
@media (max-width: 991px) {
  .h09-sec { padding: 34px 0; }
  .h09-sec__h { font-size: 26px; margin-bottom: 20px; }
}

/* ------------------------------- сетка карт ----------------------------- */
.h09-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.h09-card__media {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  aspect-ratio: 16 / 10;
}
.h09-card--tall .h09-card__media { aspect-ratio: 1 / 1; }
@media (min-width: 750px) {
  .h09-card--tall { grid-row: span 2; display: flex; flex-direction: column; }
  .h09-card--tall .h09-card__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
}
.h09-card__media img { width: 100%; height: 100%; object-fit: cover; }
.h09-card__body { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.h09-card__h { font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.h09-card__h span { color: var(--muted); }
.h09-card__t { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.h09-card--wide { grid-column: 1 / -1; }
.h09-card--stack { display: grid; grid-template-rows: auto; gap: 24px; }
@media (max-width: 749px) {
  .h09-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* ------------------------------ схема ----------------------------------- */
.h09-diag { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--panel); aspect-ratio: 1800 / 725; }
@media (max-width: 749px) { .h09-diag { aspect-ratio: 1 / 1; } }
.h09-diag img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.h09-diag img { width: 100%; }
/* специфичность выше, чем у общего `.h09 img { display: block }` — иначе
   мобильная и десктопная картинки рисуются одновременно друг на друге */
.h09 .h09-diag__img--m { display: none; }
@media (max-width: 749px) {
  .h09 .h09-diag__img--d { display: none; }
  .h09 .h09-diag__img--m { display: block; }
}
.h09-diag__pt { position: absolute; display: flex; flex-direction: column; }
.h09-diag__chip {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink-2);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(20, 18, 15, 0.08);
}
@media (max-width: 749px) { .h09-diag__chip { font-size: 11px; padding: 6px 9px; white-space: normal; } }

/* ------------------------------ карусель -------------------------------- */
.h09-car { position: relative; }
.h09-car__viewport { overflow: hidden; }
.h09-car__rail {
  display: flex;
  gap: 24px;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.h09-car__item { flex: 0 0 calc((100% - 48px) / 3); }
@media (max-width: 991px) { .h09-car__item { flex: 0 0 calc(100% - 56px); } }
.h09-car__foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}
.h09-car__bars { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.h09-car__bar {
  flex: 1 1 0;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease;
}
.h09-car__bar.is-active { background: var(--accent); }
.h09-car__nav { display: flex; gap: 10px; }
.h09-car__arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.h09-car__arrow--next { background: var(--accent); color: var(--on-accent); }
.h09-car__arrow:disabled { opacity: 0.4; cursor: default; }
.h09-car__arrow svg { width: 8px; height: 13px; }

/* -------------------------- текстовая карусель --------------------------- */
.h09-tcard__h { font-size: 19px; font-weight: 500; margin: 0 0 8px; }
.h09-tcard__h span { color: var(--muted); }
.h09-tcard__t { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* -------------------------------- видео --------------------------------- */
.h09-video__frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(22, 34, 51, 0.12);
}
.h09-video__frame img,
.h09-video__frame video { width: 100%; height: 100%; object-fit: cover; }
.h09-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.h09-video__play span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.h09-video__play svg { width: 22px; height: 24px; margin-left: 4px; color: var(--ink); }
@media (max-width: 991px) { .h09-video__frame { max-width: calc(100% - 32px); border-radius: var(--radius); } }

/* --------------------------------- FAQ ---------------------------------- */
.h09-faq__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
.h09-faq__tabs { display: flex; flex-direction: column; gap: 6px; }
.h09-faq__tab {
  padding: 13px 16px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.h09-faq__tab.is-active { background: var(--panel); font-weight: 500; color: var(--ink); }
@media (max-width: 991px) {
  .h09-faq__grid { grid-template-columns: 1fr; gap: 20px; }
  .h09-faq__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .h09-faq__tab { text-align: center; border: 1px solid var(--line); }
  .h09-faq__tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
.h09-faq__panel { display: none; }
.h09-faq__panel.is-active { display: block; }

/* ------------------------------- отзывы --------------------------------- */
.h09-rev__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.h09-rev__avg { font-size: 42px; font-weight: 500; line-height: 1; }
.h09-rev__count { font-size: 13px; color: var(--muted); }
.h09-rev__h { font-size: 28px; font-weight: 500; margin: 0; }
.h09-rev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 991px) { .h09-rev__grid { grid-template-columns: 1fr; } }
.h09-rev__card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.h09-rev__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.h09-rev__date { font-size: 12px; color: var(--muted); }
.h09-rev__title { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.h09-rev__body { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.h09-rev__pics { display: flex; gap: 8px; margin: 0 0 14px; }
.h09-rev__pic {
  width: 96px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
  cursor: zoom-in;
}
.h09-rev__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.h09-rev__pic:hover img { transform: scale(1.06); }
.h09-lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 18, 15, 0.82);
  cursor: zoom-out;
}
.h09-lightbox img { max-width: min(900px, 100%); max-height: 88vh; border-radius: var(--radius); }
.h09-rev__who { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.h09-rev__who b { font-weight: 500; color: var(--ink-2); }
.h09-rev__badge { color: #2c6b33; }
.h09-rev__more { margin: 26px auto 0; display: block; width: auto; padding: 14px 34px; }

/* ------------------------------ подписка -------------------------------- */
.h09-sub { background: var(--ink); color: #fff; position: relative; isolation: isolate; }
/* 03.09.2026: фон блока — фото датчика (два кадра: широкий и вертикальный),
   сгенерированы под пропорции блока, чтобы датчик не резался (решение Klim). */
.h09-sub__bg { position: absolute; inset: 0; z-index: -2; }
.h09-sub__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.h09-sub .h09-sub__bg--m { display: none; }
.h09-sub::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.72) 42%, rgba(10,10,12,.28) 70%, rgba(10,10,12,.05) 100%);
}
.h09-sub__in { padding-top: 64px; padding-bottom: 64px; min-height: 300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) clamp(140px, 19vw, 310px); gap: 40px; align-items: center; }
.h09-sub__h { font-size: 30px; font-weight: 500; margin: 0 0 10px; }
.h09-sub__p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0; }
.h09-sub__form { display: flex; gap: 10px; }
.h09-sub__form input {
  flex: 1;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 15px;
}
.h09-sub__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.h09-sub__form button { width: auto; padding: 15px 26px; }
@media (max-width: 991px) {
  .h09-sub__in { grid-template-columns: 1fr; gap: 20px; padding-top: 34px; }
  .h09-sub__h { font-size: 24px; }
  .h09-sub__form { flex-direction: column; }
  .h09-sub__form button { width: 100%; }
  .h09-sub .h09-sub__bg--d { display: none; }
  .h09-sub .h09-sub__bg--m { display: block; }
  .h09-sub__bg img { object-position: center 60%; }
  .h09-sub::after { background: linear-gradient(180deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.85) 42%, rgba(10,10,12,.3) 66%, rgba(10,10,12,0) 100%); }
  .h09-sub__in { padding-top: 34px; padding-bottom: 44px; min-height: 0; }
}

/* -------------------------------- футер --------------------------------- */
.h09-foot { background: #0f0e0c; color: rgba(255, 255, 255, 0.72); }
.h09-foot__in { padding-top: 44px; padding-bottom: 28px; }
@media (max-width: 749px) { .h09-foot__in { padding-bottom: 170px; } }
.h09-foot__brand { color: #fff; margin-bottom: 26px; }
.h09-foot__brand .h09-logo { width: 172px; }
.h09-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 749px) { .h09-foot__cols { grid-template-columns: 1fr; gap: 0; } }
.h09-foot__col-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: default;
}
@media (max-width: 749px) {
  .h09-foot__col { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .h09-foot__col-h { cursor: pointer; }
  .h09-foot__col-h svg { transition: transform 0.2s ease; }
  .h09-foot__col.is-open .h09-foot__col-h svg { transform: rotate(180deg); }
  .h09-foot__list { display: none; }
  .h09-foot__col.is-open .h09-foot__list { display: block; }
}
.h09-foot__col-h svg { width: 11px; height: 7px; display: none; }
@media (max-width: 749px) { .h09-foot__col-h svg { display: block; } }
.h09-foot__list { list-style: none; margin: 0; padding: 0 0 14px; }
.h09-foot__list li { margin-bottom: 9px; }
.h09-foot__list a { color: inherit; text-decoration: none; font-size: 14px; }
.h09-foot__list a:hover { color: #fff; }
.h09-foot__bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 13px;
}

/* ------------------------- обратный звонок ------------------------------ */
.h09-help__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.h09-cb[hidden] { display: none; }
.h09-cb__lead { margin: -6px 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.h09-cb__form { display: grid; gap: 12px; }
.h09-cb__field { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.h09-cb__field i { font-style: normal; color: var(--muted); }
.h09-cb__field input,
.h09-cb__field select,
.h09-cb__field textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.h09-cb__field textarea { resize: vertical; }
.h09-cb__field input:focus,
.h09-cb__field select:focus,
.h09-cb__field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.h09-cb__fine { margin: 2px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.h09-cb__ok {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--save-bg);
  color: var(--save-ink);
  font-size: 15px;
  text-align: center;
}

/* ---------------------------- конфигуратор ------------------------------ */
.h09-cfg { margin: 26px 0 4px; }
.h09-cfg__step { padding: 0 0 22px; }
.h09-cfg__step + .h09-cfg__step { border-top: 1px solid var(--line); padding-top: 20px; }
.h09-cfg__lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
}
.h09-cfg__lab em { font-style: normal; color: var(--muted); margin-right: 8px; }
.h09-cfg__lab b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.h09-cfg__hint { margin: 6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }

.h09-cfg__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) 0 var(--fill, 50%), var(--line) var(--fill, 50%) 100%);
  outline: none;
  margin: 4px 0 8px;
}
.h09-cfg__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.h09-cfg__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
}
.h09-cfg__range:active::-webkit-slider-thumb { cursor: grabbing; }
.h09-cfg__minmax {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.h09-cfg__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h09-cfg__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.h09-cfg__opt:hover { border-color: var(--ink-2); }
.h09-cfg__opt.is-on { border-color: var(--ink); background: var(--panel); }
.h09-cfg__sw { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
.h09-cfg__pl { color: var(--muted); font-size: 13px; }
.h09-cfg__opt.is-on .h09-cfg__pl { color: var(--accent-dark); }

.h09-cfg__sum {
  margin-top: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.h09-cfg__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 5px 0;
  color: var(--ink-2);
}
.h09-cfg__row--tot {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.h09-cfg__dep { margin-top: 6px; font-size: 12px; color: var(--muted); }
.h09-cfg__err {
  margin-top: 10px;
  font-size: 13px;
  color: #a3352c;
}
@media (max-width: 991px) {
  .h09-cfg__lab { font-size: 14px; }
  .h09-cfg__opt { padding: 10px 12px; font-size: 13px; }
}

/* строка допа теперь <button>, а не <label> — гасим дефолты кнопки
   и раскладываем внутренние span'ы в столбик */
.h09-add__row {
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}
.h09-add__name,
.h09-add__note,
.h09-add__price { display: block; }
.h09-add__price b { font-weight: 600; }
.h09-add__price s { color: var(--muted); margin-left: 8px; font-weight: 400; }

/* верхняя плашка: контраст был низкий — текст переводим в графит */
.h09-top { background: var(--panel); color: var(--ink); }
.h09-top__mid { color: var(--ink-2); }
.h09-top__chat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.h09-top__chat:hover { color: var(--accent-dark); }
.h09-top__ava { position: relative; display: inline-block; flex: none; }
.h09-top__ava img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* зелёный огонёк «на связи» */
.h09-top__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2eae5a;
  border: 2px solid var(--panel);
}
@media (max-width: 991px) {
  .h09-top__ava img { width: 22px; height: 22px; }
  .h09-top__dot { width: 8px; height: 8px; }
}

/* ------------------------------ контентная страница --------------------- */
.h09-doc { padding: 44px 0 96px; }
.h09-doc .h09__wrap { max-width: 900px; }
.h09-doc__crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
}
.h09-doc__crumbs a { color: var(--muted); text-decoration: none; }
.h09-doc__crumbs a:hover { color: var(--ink); }
.h09-doc__crumbs b { color: var(--ink); font-weight: 500; }
.h09-doc__h {
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
}
.h09-doc__lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 0 0 30px; }
.h09-doc__body { font-size: 17px; line-height: 1.68; color: var(--ink-2); }
.h09-doc__body h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 700;
  margin: 44px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.h09-doc__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.h09-doc__body h3 { font-size: 19px; color: var(--ink); font-weight: 600; margin: 28px 0 10px; }
.h09-doc__body p { margin: 0 0 16px; }
.h09-doc__body ul, .h09-doc__body ol { margin: 0 0 18px; padding-left: 22px; }
.h09-doc__body li { margin-bottom: 8px; }
.h09-doc__body a { color: var(--accent-dark); }
.h09-doc__body strong { color: var(--ink); font-weight: 600; }
.h09-doc__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 15.5px;
}
.h09-doc__body th, .h09-doc__body td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.h09-doc__body th { background: var(--panel); color: var(--ink); font-weight: 600; }
.h09-doc__body blockquote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.h09-doc__body blockquote p:last-child { margin-bottom: 0; }
.h09-doc__help {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 52px;
  padding: 22px 24px;
  background: var(--panel);
  border-radius: var(--radius-lg);
}
.h09-doc__help b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 3px; }
.h09-doc__help p { margin: 0; font-size: 14.5px; color: var(--muted); }
.h09-doc__help-ava { position: relative; flex: none; }
.h09-doc__help-ava img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.h09-doc__help-dot {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2eae5a;
  border: 2px solid var(--panel);
}
.h09-doc__help-acts { display: flex; gap: 10px; }
.h09-doc__help-acts .h09-btn { padding: 11px 20px; font-size: 15px; }
.h09-doc__updated { margin: 26px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 767px) {
  .h09-doc { padding: 26px 0 64px; }
  .h09-doc__body { font-size: 16px; }
  .h09-doc__help { grid-template-columns: auto 1fr; row-gap: 14px; }
  .h09-doc__help-acts { grid-column: 1 / -1; }
  .h09-doc__help-acts .h09-btn { flex: 1; text-align: center; }
}

/* ---------------------------------- чат --------------------------------- */
.h09-chat__fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  font: 500 15px/1 'Outfit', sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.h09-chat__fab:hover { border-color: var(--accent); }
.h09-chat__fab-ava, .h09-chat__ava { position: relative; display: block; flex: none; }
.h09-chat__fab-ava img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.h09-chat__ava img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.h09-chat__dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2eae5a;
  border: 2px solid #fff;
}
.h09-chat__badge {
  position: absolute;
  top: 2px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d24a3a;
  border: 2px solid #fff;
}
.h09-chat__badge[hidden] { display: none; }
.h09-chat[hidden] { display: none; }
.h09-chat { position: fixed; inset: 0; z-index: 70; }
.h09-chat__scrim { position: absolute; inset: 0; background: rgba(18, 18, 17, 0.42); }
.h09-chat__panel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: min(400px, calc(100vw - 40px));
  height: min(620px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.h09-chat__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--brand);
  color: #fff;
}
.h09-chat__who { display: flex; align-items: center; gap: 11px; }
.h09-chat__who b { display: block; font-size: 15.5px; font-weight: 600; }
.h09-chat__who i { display: block; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.h09-chat__x {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.h09-chat__x:hover { color: #fff; }
.h09-chat__wa {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 14px 0; padding: 13px 16px;
  border-radius: 10px; background: #1FAF38; color: #fff;
  text-decoration: none;
}
.h09-chat__wa svg { width: 26px; height: 26px; flex: none; }
.h09-chat__wa b { display: block; font-size: 15px; font-weight: 600; }
.h09-chat__wa i { display: block; font-style: normal; font-size: 12px; opacity: .85; margin-top: 1px; }
.h09-chat__or { display: flex; align-items: center; gap: 12px; margin: 12px 14px 0; color: var(--muted); font-size: 12px; }
.h09-chat__or::before, .h09-chat__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.h09-chat__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  background: var(--panel);
}
.h09-chat__msg {
  max-width: 86%;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.h09-chat__msg p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
.h09-chat__msg--me {
  margin-left: auto;
  background: var(--brand);
  border-radius: 14px 14px 4px 14px;
}
.h09-chat__msg--me p { color: #fff; }
.h09-chat__compose { flex: none; padding: 12px 14px 10px; border-top: 1px solid var(--line); background: #fff; }
.h09-chat__who-fields { display: grid; gap: 8px; margin-bottom: 8px; }
.h09-chat__who-fields[hidden] { display: none; }
.h09-chat__who-fields input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 400 14.5px/1.4 'Outfit', sans-serif;
  color: var(--ink);
}
.h09-chat__row { display: flex; align-items: flex-end; gap: 8px; }
.h09-chat__row textarea {
  flex: 1;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  font: 400 15px/1.4 'Outfit', sans-serif;
  color: var(--ink);
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}
.h09-chat__who-fields input:focus, .h09-chat__row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.h09-chat__send {
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.h09-chat__send:hover { background: var(--accent-dark); }
.h09-chat__send svg { width: 20px; height: 20px; }
.h09-chat__fine { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.h09-chat__foot {
  flex: none;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  background: #fff;
}
.h09-chat__foot a { color: var(--accent-dark); }
@media (max-width: 600px) {
  .h09-chat__fab { right: 14px; bottom: 14px; padding: 7px 15px 7px 7px; font-size: 14px; }
  .h09-chat__fab-ava img { width: 34px; height: 34px; }
  .h09-chat__panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* подпись под ценой: цена конечная, доставка внутри */
.h09-price__delivered{display:block;width:100%;margin-top:6px;font-size:13px;line-height:1.4;opacity:.72;font-weight:500}

/* Видео в галерее товара: тот же кадр, что у фотографий, без своих полей. */
.h09-gal__video{display:block;width:100%;height:100%;object-fit:cover;background:#1E1E1C}
.h09-gal__thumb--vid{position:relative}
.h09-gal__thumb--vid svg{position:absolute;left:50%;top:50%;width:16px;height:16px;
  transform:translate(-50%,-50%);color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));pointer-events:none}

/* Полоса с нашими роликами: три вертикали 9:16 в ряд. */
.h09-soc__note{max-width:640px;margin:-6px 0 26px;font-size:15px;line-height:1.6;opacity:.62}
.h09-soc__row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.h09-soc__card{margin:0;cursor:pointer}
.h09-soc__frame{position:relative;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:#1E1E1C}
.h09-soc__v{display:block;width:100%;height:100%;object-fit:cover}
.h09-soc__snd{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(20,20,19,.58);color:#F4F4F2;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(4px);transition:background .2s}
.h09-soc__snd svg{width:18px;height:18px}
.h09-soc__card:hover .h09-soc__snd{background:rgba(20,20,19,.82)}
.h09-soc__card.is-loud .h09-soc__snd{display:none}
.h09-soc__cap{margin:11px 2px 0;font-size:13.5px;line-height:1.5;opacity:.6}
@media (max-width:749px){
  .h09-soc__row{grid-template-columns:1fr 1fr;gap:12px}
}

/* ======================= отзывы v2 ======================= */
/* Сводка с распределением и фильтрами. Токены темы, ничего чужого:
   янтарь вместо зелёного, Outfit, скругления 5/10. */
.h09-rv2__sum{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:44px;
  background:var(--panel);border-radius:var(--radius-lg);padding:30px 34px;margin:0 0 26px}
.h09-rv2__score{display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--line);padding-right:34px}
.h09-rv2__n{font-size:62px;line-height:.9;font-weight:600;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.h09-rv2__n small{font-size:24px;font-weight:400;color:var(--muted);letter-spacing:-.01em}
.h09-rv2__sc-stars{margin:12px 0 9px}
.h09-rv2__cnt{font-size:14px;color:var(--ink-2)}
.h09-rv2__how{font-size:12.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;max-width:34ch}
.h09-rv2__stars{display:inline-flex;gap:2px;color:var(--star)}
.h09-rv2__stars svg{width:17px;height:17px}
.h09-rv2__stars .off{color:var(--line)}
.h09-rv2__stars--sm svg{width:14px;height:14px}

.h09-rv2__bars{display:flex;flex-direction:column;gap:9px;justify-content:center}
.h09-rv2__bar{display:grid;grid-template-columns:52px 1fr 44px;align-items:center;gap:14px;
  border:0;background:none;padding:5px 8px;margin:0 -8px;border-radius:var(--radius);
  font:inherit;color:inherit;cursor:pointer;text-align:left;transition:background .15s}
.h09-rv2__bar:hover{background:var(--panel-2)}
.h09-rv2__bar.is-on{background:var(--accent-soft)}
.h09-rv2__bk{font-size:13.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.h09-rv2__bt{height:9px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.h09-rv2__bf{display:block;height:100%;background:var(--star);border-radius:99px}
.h09-rv2__bn{font-size:13px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

.h09-rv2__filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;align-items:center}
.h09-rv2__chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 15px;
  font:inherit;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s}
.h09-rv2__chip:hover{border-color:var(--muted)}
.h09-rv2__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.h09-rv2__sep{flex:1}
.h09-rv2__showing{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

.h09-rv2__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.h09-rv2__card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:19px 20px 20px;
  background:#fff;display:flex;flex-direction:column;gap:12px}
.h09-rv2__card[hidden]{display:none}
.h09-rv2__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.h09-rv2__date{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.h09-rv2__who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:-4px 0 0}
.h09-rv2__name{font-size:14.5px;font-weight:500}
.h09-rv2__loc{font-size:13px;color:var(--muted)}
.h09-rv2__ok{display:inline-flex;align-items:center;gap:4px;background:var(--save-bg);color:var(--save-ink);
  font-size:11px;font-weight:500;letter-spacing:.03em;padding:3px 8px;border-radius:99px;white-space:nowrap}
.h09-rv2__ok svg{width:11px;height:11px}
/* Конфигурация заказа — то, чего нет ни на одной платформе отзывов. */
.h09-rv2__spec{display:flex;flex-wrap:wrap;gap:6px}
.h09-rv2__spec b{background:var(--accent-soft);color:#7d5210;font-size:12px;font-weight:500;
  padding:4px 9px;border-radius:var(--radius);font-variant-numeric:tabular-nums}
.h09-rv2__t{font-size:16px;font-weight:600;line-height:1.3;margin:0;letter-spacing:-.01em}
.h09-rv2__b{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0}
.h09-rv2__pics{display:flex;gap:7px;flex-wrap:wrap}
.h09-rv2__pic{border:0;padding:0;background:none;cursor:zoom-in;border-radius:4px;overflow:hidden}
.h09-rv2__pic img{width:74px;height:56px;object-fit:cover}
.h09-rv2__reply{background:var(--panel);border-radius:var(--radius);padding:12px 14px;
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.h09-rv2__reply b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.h09-rv2__more{margin:26px auto 0;display:block;border:1px solid var(--ink);background:none;
  border-radius:var(--radius);padding:14px 34px;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer;transition:background .15s,color .15s}
.h09-rv2__more:hover{background:var(--ink);color:#fff}
.h09-rv2__more[hidden]{display:none}
.h09-rv2__bar:focus-visible,.h09-rv2__chip:focus-visible,.h09-rv2__more:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:1000px){.h09-rv2__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .h09-rv2__sum{grid-template-columns:1fr;gap:26px;padding:24px}
  .h09-rv2__score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px}
}
@media(max-width:660px){.h09-rv2__grid{grid-template-columns:1fr}}

/* -------- кнопка и форма отзыва -------- */
.h09-rv2__write{margin:16px 0 0;align-self:flex-start;border:1px solid var(--ink);background:none;
  border-radius:var(--radius);padding:10px 18px;font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;transition:background .15s,color .15s}
.h09-rv2__write:hover{background:var(--ink);color:#fff}

.h09-rvf{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(20,20,19,.6);overflow-y:auto}
.h09-rvf[hidden]{display:none}
.h09-rvf__box{position:relative;width:100%;max-width:560px;background:#fff;border-radius:var(--radius-lg);
  padding:34px 34px 30px;margin:auto}
@media(max-width:600px){.h09-rvf__box{padding:26px 20px 22px}}
.h09-rvf__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.h09-rvf__x:hover{color:var(--ink)}
.h09-rvf__h{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.h09-rvf__p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.h09-rvf__row{display:block;margin:0 0 15px}
.h09-rvf__two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.h09-rvf__two{grid-template-columns:1fr;gap:0}}
.h09-rvf__lab{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.h09-rvf__lab em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.h09-rvf input,.h09-rvf textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;resize:vertical}
.h09-rvf input:focus,.h09-rvf textarea:focus{outline:none;border-color:var(--accent)}
.h09-rvf__stars{display:flex;gap:4px}
.h09-rvf__stars button{border:0;background:none;padding:2px;cursor:pointer;color:var(--line)}
.h09-rvf__stars button svg{width:30px;height:30px;display:block}
.h09-rvf__stars button.is-on{color:var(--star)}
.h09-rvf__drop{display:block;border:1px dashed var(--line);border-radius:var(--radius);padding:16px;
  text-align:center;font-size:13.5px;color:var(--muted);cursor:pointer;transition:border-color .15s}
.h09-rvf__drop:hover{border-color:var(--accent)}
.h09-rvf__thumbs{display:flex;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.h09-rvf__thumbs span{position:relative}
.h09-rvf__thumbs img{width:66px;height:50px;object-fit:cover;border-radius:4px}
.h09-rvf__thumbs button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border:0;border-radius:50%;
  background:var(--ink);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.h09-rvf__err{background:#fdecea;color:#8c2f22;border-radius:var(--radius);padding:10px 12px;
  font-size:13.5px;line-height:1.5;margin:0 0 12px}
.h09-rvf__err[hidden]{display:none}
.h09-rvf__send{width:100%;border:0;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);
  font:inherit;font-size:15.5px;font-weight:500;padding:15px;cursor:pointer;margin:6px 0 0}
.h09-rvf__send:hover{background:var(--accent-dark)}
.h09-rvf__send:disabled{opacity:.55;cursor:default}
.h09-rvf__fine{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 0;text-align:center}
.h09-rvf__ok[hidden]{display:none}


/* checkout gate — V1 dark card */
.h09cg{position:fixed;inset:0;z-index:80;display:none}
.h09cg.is-on{display:block}
.h09cg__bg{position:absolute;inset:0;background:rgba(5,4,3,.62)}
.h09cg__card{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);background:#171613;border:1px solid #2c2a24;border-radius:22px;padding:26px 22px 20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.h09cg__x{position:absolute;top:10px;right:12px;background:none;border:0;color:#6f6a60;font-size:22px;line-height:1;padding:6px;cursor:pointer}
.h09cg__card h3{margin:0;color:#F7F2E8;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.h09cg__sum{color:#a49e92;font-size:13px;margin-top:7px}
.h09cg__sum b{color:#E8A33D;font-weight:600}
.h09cg__mail{width:100%;box-sizing:border-box;margin-top:18px;padding:15px 16px;border-radius:12px;border:1px solid #3a372f;background:#211f1a;color:#F7F2E8;font-size:15px;outline:none}
.h09cg__mail::placeholder{color:#7d786d}
.h09cg__mail:focus{border-color:#E8A33D}
.h09cg__err{color:#e4604e;font-size:12.5px;margin-top:8px}
.h09cg__go{width:100%;margin-top:12px;border-radius:12px}
.h09cg__or{display:flex;align-items:center;gap:12px;color:#6f6a60;font-size:11.5px;margin:16px 0 12px;text-transform:uppercase;letter-spacing:.12em}
.h09cg__or:before,.h09cg__or:after{content:"";flex:1;height:1px;background:#2c2a24}
.h09cg__wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:12px;border:1px solid #2e6b4b;background:rgba(37,211,102,.08);color:#4fd884;font-size:15px;font-weight:500;cursor:pointer}
.h09cg__wa svg{width:20px;height:20px;flex:none}
.h09cg__skip{display:block;width:100%;text-align:center;margin-top:16px;background:none;border:0;color:#6f6a60;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(min-width:750px){.h09cg__card{left:50%;right:auto;width:400px;transform:translate(-50%,-50%)}}

/* configurator v2: compare prices */
.h09-cfg__ps { color: var(--muted); text-decoration: line-through; font-size: 12px; }
.h09-cfg__ps:empty, .h09-add__price s:empty { display: none; }
.h09-price__save:empty { display: none; }
.h09-add__price s { color: var(--muted); text-decoration: line-through; font-weight: 400; }