/* ==========================================================================
   pages.css — блоки, общие для всех страниц сайта и появившиеся по ТЗ.
   Подключается последним: base.css → styles.css → home.css → pages.css.
   Палитру берёт у варианта через --home-* (их объявляет home.css, раздел 1).
   --mbar-h — высота нижней панели; её же читают отступ страницы, плавающая
   кнопка и cookie-баннер, поэтому число живёт в одном месте.

   Оглавление:
     1. Хлебные крошки .crumbs
     2. Чекбокс согласия .consent
     3. Нижняя панель действий на мобильном .mbar
     4. Плавающая кнопка WhatsApp .wafab
     5. Cookie-баннер .cookie
     6. Служебные модификаторы сквозного слоя
     7. Варианты изделия .variants, .variant-card, .swatches
     8. Стоимость .pricing, .price-slot
     9. Характеристики и конструкция .specs, .spec-list, .parts
    10. Применение и сравнение .usage, .compare
    11. Схема работы .flow
    12. Гарантия .warranty-item
    13. SEO-текст главной .prose
    14. Перелинковка .crosslink
    15. Текстовые и юридические страницы — чередование фона секций
    16. Вкладки .tabs
    17. Иконки в строках характеристик
    18. Текст об изделии — аккордеон .product-text, .detail-accordion
    19. Статьи .article-card, .article
    20. «Нашли дешевле» .price-match
   ========================================================================== */

:root {
  --mbar-h: 62px;
}

/* --------------------------------------------------------------------------
   1. Хлебные крошки

   Лента прокручивается вбок внутри себя: длинная цепочка на телефоне иначе
   растягивает страницу. Обрезка стоит на самой ленте, не на предках.
   -------------------------------------------------------------------------- */

.crumbs {
  border-bottom: 1px solid var(--home-line);
  background-color: var(--home-bg);
}

.crumbs__list {
  display: flex;
  align-items: center;
  gap: var(--rrs-space-1);
  min-width: 0;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.crumbs__list::-webkit-scrollbar {
  display: none;
}

.crumbs__item {
  display: flex;
  align-items: center;
  gap: var(--rrs-space-1);
  font-size: var(--rrs-fs-small);
  line-height: 1.3;
}

.crumbs__item + .crumbs__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--home-ink-dim);
  border-right: 1px solid var(--home-ink-dim);
  transform: rotate(45deg);
}

.crumbs__link {
  display: inline-block;
  padding: 6px 2px;
  color: var(--home-ink-muted);
  text-decoration: none;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.crumbs__link:hover,
.crumbs__link:focus-visible {
  color: var(--home-accent);
}

.crumbs__current {
  padding: 6px 2px;
  color: var(--home-ink);
}

/* --------------------------------------------------------------------------
   2. Чекбокс согласия под формой

   Разметку ставит вёрстка, состояние кнопки ведёт js/main.js. Без JS чекбокс
   и кнопка остаются обычными рабочими элементами формы.
   -------------------------------------------------------------------------- */

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--rrs-space-2);
  font-size: var(--rrs-fs-small);
  line-height: 1.45;
  color: var(--home-ink-muted);
  cursor: pointer;
}

.consent__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--home-line-strong);
  border-radius: 5px;
  background-color: transparent;
  transition:
    border-color var(--rrs-dur) var(--rrs-ease),
    background-color var(--rrs-dur) var(--rrs-ease);
}

.consent__box::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--rrs-accent-ink);
  border-bottom: 2px solid var(--rrs-accent-ink);
  opacity: 0;
  transform: rotate(45deg) scale(.7);
  transition:
    opacity var(--rrs-dur) var(--rrs-ease),
    transform var(--rrs-dur) var(--rrs-ease);
}

.consent:hover .consent__box {
  border-color: var(--home-ink-muted);
}

[data-consent]:checked + .consent__box {
  border-color: var(--home-accent);
  background-color: var(--home-accent);
}

[data-consent]:checked + .consent__box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

[data-consent]:focus-visible + .consent__box {
  outline: 2px solid var(--home-accent);
  outline-offset: 3px;
}

.consent__text {
  min-width: 0;
}

.consent__link {
  color: var(--home-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.consent__link:hover,
.consent__link:focus-visible {
  color: var(--home-accent);
}

/* Причина неактивной кнопки названа текстом, а не только состоянием кнопки:
   иначе скринридер сообщает «недоступно» без объяснения. */
.consent-reason {
  margin-top: var(--rrs-space-1);
  font-size: var(--rrs-fs-small);
  line-height: 1.4;
  color: var(--home-ink-dim);
}

.consent-reason[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Нижняя панель действий — только на мобильном

   Место под панель освобождает padding-bottom у body: панель зафиксирована
   и иначе накрыла бы последнюю секцию и подвал.
   -------------------------------------------------------------------------- */

.mbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--rrs-z-header);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--home-line-strong);
  background-color: var(--home-bg-tint);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--mbar-h);
  padding: 8px 6px;
  border: 0;
  border-right: 1px solid var(--home-line);
  background: none;
  color: var(--home-ink);
  font-family: inherit;
  font-size: var(--rrs-fs-label);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rrs-dur) var(--rrs-ease);
}

.mbar__item:last-child {
  border-right: 0;
}

.mbar__item:hover,
.mbar__item:focus-visible {
  background-color: var(--home-surface-hi);
}

.mbar__item--accent {
  color: var(--home-accent);
}

.mbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.mbar__icon svg {
  width: 20px;
  height: 20px;
}

.mbar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

body {
  padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  :root {
    --mbar-h: 0px;
  }

  .mbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. Плавающее меню быстрых контактов

   На мобильном стоит над нижней панелью и подписано только для скринридера;
   с 900px разворачивается в подписанную пилюлю.
   -------------------------------------------------------------------------- */

.contact-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--mbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--rrs-z-header);
  display: grid;
  justify-items: end;
  gap: 10px;
}

.wafab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--rrs-radius-pill);
  background-color: var(--home-surface);
  color: var(--home-ink);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--rrs-shadow-lift);
  transition:
    transform var(--rrs-dur) var(--rrs-ease),
    border-color var(--rrs-dur) var(--rrs-ease),
    color var(--rrs-dur) var(--rrs-ease);
}

.wafab:hover,
.wafab:focus-visible {
  transform: translateY(-2px);
  border-color: var(--home-accent);
  color: var(--home-accent);
}

.wafab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--home-accent);
}

.wafab__icon svg {
  width: 24px;
  height: 24px;
}

.wafab__label {
  display: none;
  font-size: var(--rrs-fs-small);
  font-weight: 600;
  white-space: nowrap;
}

.contact-fab__chevron {
  display: none;
  width: 18px;
  height: 18px;
  transition: transform var(--rrs-dur) var(--rrs-ease);
}

.contact-fab__chevron svg {
  width: 18px;
  height: 18px;
}

.contact-fab[data-open] .contact-fab__chevron {
  transform: rotate(180deg);
}

.contact-fab__menu {
  display: grid;
  gap: 8px;
  width: min(240px, calc(100vw - 32px));
  margin: 0;
  padding: 10px;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
  box-shadow: var(--rrs-shadow-lift);
  list-style: none;
}

.contact-fab__menu[hidden] {
  display: none;
}

.contact-fab__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: calc(var(--home-radius) - 6px);
  color: var(--home-ink);
  font-size: var(--rrs-fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease);
}

.contact-fab__link:hover,
.contact-fab__link:focus-visible {
  border-color: var(--home-line-strong);
  background-color: var(--home-surface-hi);
  color: var(--home-accent);
}

.contact-fab__link:focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: 2px;
}

.contact-fab__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--home-accent);
}

.contact-fab__icon svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 900px) {
  .contact-fab {
    right: 24px;
    bottom: 24px;
  }

  .wafab {
    padding: 12px 20px 12px 14px;
  }

  .wafab__label {
    display: block;
  }

  .contact-fab__chevron {
    display: flex;
  }
}

/* --- кнопка «наверх» -------------------------------------------------------
   Та же анатомия и позиция, что у .wafab, зеркально слева; скрыта атрибутом
   hidden, пока страница не проскроллена — переключает js/main.js. ---------- */

/* Правило явное: своё display: flex иначе перебивает [hidden]. */
.scrolltop[hidden] {
  display: none;
}

.scrolltop {
  position: fixed;
  left: 16px;
  bottom: calc(var(--mbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: var(--rrs-z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--rrs-radius-pill);
  background-color: var(--home-surface);
  color: var(--home-ink);
  cursor: pointer;
  box-shadow: var(--rrs-shadow-lift);
  transition:
    transform var(--rrs-dur) var(--rrs-ease),
    border-color var(--rrs-dur) var(--rrs-ease),
    color var(--rrs-dur) var(--rrs-ease);
}

.scrolltop svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

@media (hover: hover) and (pointer: fine) {
  .scrolltop:hover {
    transform: translateY(-2px);
    border-color: var(--home-accent);
    color: var(--home-accent);
  }
}

.scrolltop:focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .scrolltop {
    left: 24px;
    bottom: 24px;
  }
}

/* Футер — последняя секция страницы: кнопка scroll-to-top висит fixed поверх
   нижнего края документа и у подвала, в отличие от остальных секций, нет
   следующего блока снизу, чтобы отодвинуть контент от неё. Фикс только до
   1600px: на широких экранах футер и так просторный, добавка через
   --home-section-pad там раздувала отступ сильнее, чем нужно для зазора. */
@media (max-width: 1600px) {
  footer.home-section {
    padding-bottom: 90px;
  }
}

/* --------------------------------------------------------------------------
   5. Cookie-баннер

   Скрытое состояние разрешено только под html[data-cookie-engine="on"],
   флаг ставит js/main.js: без JS баннер остаётся видимым блоком внизу
   страницы, а не пропадает вместе со ссылкой на политику.
   -------------------------------------------------------------------------- */

.cookie {
  display: flex;
  flex-direction: column;
  gap: var(--rrs-space-2);
  max-width: 560px;
  margin: 0 auto var(--rrs-space-3);
  padding: var(--rrs-space-3);
  border: 1px solid var(--home-line-strong);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
  box-shadow: var(--rrs-shadow-lift);
}

/* Поверх страницы баннер всплывает только при живом скрипте: иначе кнопка
   «Хорошо» ничего не сделает, и баннер навсегда закроет низ страницы. Без JS
   он остаётся обычным блоком в конце документа со ссылкой на политику. */
html[data-cookie-engine="on"] .cookie {
  position: fixed;
  right: 12px;
  bottom: calc(var(--mbar-h) + 12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: var(--rrs-z-nav);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition:
    opacity var(--rrs-dur-slow) var(--rrs-ease),
    transform var(--rrs-dur-slow) var(--rrs-ease),
    visibility var(--rrs-dur-slow) var(--rrs-ease);
}

html[data-cookie-engine="on"] .cookie[data-cookie-shown] {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.cookie[hidden] {
  display: none;
}

.cookie__text {
  font-size: var(--rrs-fs-small);
  line-height: 1.5;
  color: var(--home-ink-muted);
}

.cookie__link {
  color: var(--home-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.cookie__link:hover,
.cookie__link:focus-visible {
  color: var(--home-accent);
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-1);
}

@media (min-width: 900px) {
  .cookie {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  html[data-cookie-engine="on"] .cookie {
    right: 24px;
    bottom: 24px;
    left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-cookie-engine="on"] .cookie {
    transition-duration: .01ms;
  }
}

/* --------------------------------------------------------------------------
   6. Служебные модификаторы сквозного слоя
   -------------------------------------------------------------------------- */

/* Текущая страница в меню и логотип на своей странице — текст, а не ссылка:
   выглядят так же, но не ведут туда, где посетитель уже стоит. */
.header-dark__link--static,
.header-dark__sublink--static {
  cursor: default;
}

.header-dark__logo--static {
  cursor: default;
}

/* «Заказать звонок» живёт в строке шапки везде, где шапка развёрнута, то
   есть с 900px. Тесноту снимает не удаление, а форма подачи: кнопка звонка
   до 1440px остаётся иконкой с подписью в aria-label. Ширины выверены
   замером. */
.header-dark__cta--ghost {
  display: none;
  flex: none;
  gap: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  justify-content: center;
}

.header-dark__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.header-dark__cta-icon svg {
  width: 18px;
  height: 18px;
}

.header-dark__cta-text {
  display: none;
}

@media (min-width: 900px) {
  .header-dark__cta--ghost {
    display: inline-flex;
  }
}

/* С 1440px в строке хватает места на подпись рядом с иконкой. */
@media (min-width: 1440px) {
  .header-dark__cta--ghost {
    gap: var(--rrs-space-1);
    width: auto;
    padding: 0 18px;
  }

  .header-dark__cta-text {
    display: inline;
  }
}

/* <picture> не должен вклиниваться в сетку обёртки .block__img: своего бокса
   он не создаёт, и <img> остаётся прямым ребёнком обёртки по раскладке. */
picture {
  display: contents;
}

/* Блок .footer объявлен в home.css, раздел 14; здесь только строка документов,
   появившаяся вместе с политикой и картой сайта. */
.footer__docs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-1) var(--rrs-space-3);
}

.footer__docs .footer__link {
  padding: 4px 0;
}

/* Блок без содержания скрывается целиком: у .home-section и .home-card свой
   display из home.css, и одного атрибута hidden им мало. */
.home-section[hidden],
.home-card[hidden],
.footer__legal[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Варианты изделия — серии профиля, управление, цвет, монтаж

   Группы идут сплошной лентой и разделяются волосяной линией: это один
   разговор о выборе, а не четыре отдельные секции.
   -------------------------------------------------------------------------- */

.variants {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

.variants__group + .variants__group {
  padding-top: clamp(32px, 5vw, 56px);
}

.variants__group-title {
  font-family: var(--rrs-font-heading);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.variants__group-text {
  max-width: 62ch;
  margin-top: var(--rrs-space-2);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.55;
}

.variants__grid {
  display: grid;
  gap: var(--home-gap);
  margin-top: var(--rrs-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.variant-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--home-card-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
  transition:
    border-color var(--rrs-dur) var(--rrs-ease),
    background-color var(--rrs-dur) var(--rrs-ease);
}

.variant-card__name {
  font-family: var(--rrs-font-heading);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.variant-card__list {
  margin-top: var(--rrs-space-2);
}

.variant-card__row {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--home-line);
}

.variant-card__key {
  color: var(--home-ink-dim);
  font-size: var(--rrs-fs-label);
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.variant-card__val {
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.5;
}

.variant-card__row--price .variant-card__val {
  color: var(--home-accent);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .variant-card:hover {
    border-color: var(--home-line-strong);
    background-color: var(--home-surface-hi);
  }
}

@media (min-width: 640px) {
  .variants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .variants__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Виды профилей — обзорная карточная сетка перед детальными .variant-card.
   Чертежи сечений нарисованы на белом фоне с чёрными размерными подписями
   (0,8 / 10 / 60) — на тёмной карточке они нечитаемы, поэтому у фото своя
   светлая «подложка» на всю ширину карточки, а не прямая заливка цветом
   поверхности. */
.profile-kinds {
  display: grid;
  gap: var(--home-gap);
  margin-top: var(--rrs-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.profile-kinds__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease);
}

.profile-kinds__img {
  aspect-ratio: 4 / 3;
  padding: 12px;
  background-color: #f2f0eb;
}

.profile-kinds__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-kinds__name {
  margin-top: var(--rrs-space-3);
  padding-inline: var(--home-card-pad);
  font-family: var(--rrs-font-heading);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.profile-kinds__text {
  margin-top: 6px;
  padding-inline: var(--home-card-pad);
  padding-bottom: var(--home-card-pad);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .profile-kinds__card:hover {
    border-color: var(--home-line-strong);
    background-color: var(--home-surface-hi);
  }
}

@media (min-width: 640px) {
  .profile-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .profile-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .profile-kinds { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Образцы цвета: чип — визуальная подсказка, а не точный тон, поэтому он
   aria-hidden, а название цвета остаётся текстом. */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-2);
  margin-top: var(--rrs-space-4);
}

/* .swatch сидит на <a> — цвет ведёт на страницу подбора по этому оттенку
   (/cveta/cveta/<цвет>/, страницы пока не созданы). Плавный hover и
   border-color обязательны проекту для ссылок. */
.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--home-line);
  border-radius: var(--rrs-radius-pill);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease);
}

.swatch:hover,
.swatch:focus-visible {
  border-color: var(--rrs-accent, var(--home-ink));
  color: var(--home-ink);
}

.swatch__chip {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--home-line-strong);
  border-radius: 50%;
}

.swatch__name {
  white-space: nowrap;
}

.swatch--white .swatch__chip { background-color: #f2f0eb; }
.swatch--brown .swatch__chip { background-color: #5a3b28; }
.swatch--grey .swatch__chip { background-color: #8b8b88; }
.swatch--beige .swatch__chip { background-color: #cdb894; }
.swatch--sky .swatch__chip { background-color: #7ba7c9; }

/* --------------------------------------------------------------------------
   8. Стоимость

   Цифр на сайте нет: слот .price-slot объясняет, почему сумму называют после
   замера, а четыре карточки разбирают структуру цены.
   -------------------------------------------------------------------------- */

.pricing {
  display: grid;
  gap: var(--home-gap);
}

.price-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--home-line-strong);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.price-slot__label {
  color: var(--home-ink-dim);
  font-size: var(--rrs-fs-label);
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.price-slot__value {
  margin-top: var(--rrs-space-1);
  color: var(--home-accent);
  font-family: var(--rrs-font-heading);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* Цена-пример для макета (data-todo="price-placeholder" на .price-slot) —
   не реальное число заказчика, поэтому подпись должна быть заметной,
   а не теряться рядом с акцентной цифрой. */
.price-slot__note {
  color: var(--home-ink-dim);
  font-family: var(--rrs-font-body);
  font-size: var(--rrs-fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.price-slot__text {
  max-width: 62ch;
  margin-top: var(--rrs-space-2);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.6;
}

.price-slot__foot {
  margin-top: var(--rrs-space-3);
}

.pricing__grid {
  display: grid;
  gap: var(--home-gap);
  grid-template-columns: minmax(0, 1fr);
}

.pricing__card {
  min-width: 0;
  padding: var(--home-card-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.pricing__card-title {
  font-family: var(--rrs-font-heading);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.pricing__list {
  margin-top: var(--rrs-space-2);
}

.pricing__item {
  position: relative;
  padding: 8px 0 8px 20px;
  border-top: 1px solid var(--home-line);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.5;
}

.pricing__item::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 2px;
  width: 8px;
  height: 1px;
  background-color: var(--home-accent);
}

@media (min-width: 720px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .pricing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Карточки с крупной .price-slot__value (а не списком .pricing__item) теснее
   в четырёх колонках — длинный диапазон цены переносится. Модификатор держит
   такую сетку в двух колонках от 720px и шире, не трогая .pricing__grid без
   модификатора (он остаётся четырёхколоночным, как на rolstavni.html); на
   мобильном оба варианта и так в одну колонку через базовое правило выше. */
@media (min-width: 720px) {
  .pricing__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   9. Характеристики и конструкция

   .spec-list — пары «параметр — значение». На узком экране пара идёт в две
   строки, с 760px — в две колонки; горизонтальной прокрутки этот список не
   даёт ни на одной ширине, потому что таблицей в разметке не является.
   -------------------------------------------------------------------------- */

.specs {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
}

.spec-list__row {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--home-line);
}

.spec-list__row:last-child {
  border-bottom: 1px solid var(--home-line);
}

.spec-list__key {
  color: var(--home-ink-dim);
  font-size: var(--rrs-fs-label);
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.spec-list__val {
  color: var(--home-ink);
  font-size: var(--rrs-fs-body);
  line-height: 1.5;
}

@media (min-width: 760px) {
  .spec-list__row {
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--rrs-space-4);
  }
}

/* Ячейка грида .specs: без min-width: 0 колонка растягивается по самому
   длинному неразрывному куску текста внутри карточек деталей. */
.specs__parts {
  min-width: 0;
}

.specs__parts-title {
  font-family: var(--rrs-font-heading);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Нумерация деталей — счётчиком CSS, в разметке цифр нет. */
.parts {
  counter-reset: part;
  display: grid;
  gap: var(--home-gap);
  margin-top: var(--rrs-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.part {
  min-width: 0;
  padding: var(--home-card-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.part::before {
  counter-increment: part;
  content: counter(part, decimal-leading-zero);
  display: block;
  color: var(--home-accent);
  font-family: var(--rrs-font-heading);
  font-size: var(--rrs-fs-label);
  font-weight: 700;
  letter-spacing: var(--rrs-ls-label);
}

.part__name {
  margin-top: var(--rrs-space-1);
  font-family: var(--rrs-font-heading);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.part__text {
  margin-top: var(--rrs-space-1);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   10. Применение и сравнение

   .compare — три колонки с 900px и стопка ниже. Шапка колонок нарисована
   отдельной строкой и скрыта от скринридера: подписи к значениям несёт
   .compare__key, который на широком экране уходит из отрисовки, но остаётся
   в дереве доступности.
   -------------------------------------------------------------------------- */

.usage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-1);
}

.usage__tag {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--home-accent);
  border-radius: var(--rrs-radius-pill);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  transition: color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease);
}

.usage__tag:hover {
  background-color: var(--home-accent);
  color: var(--rrs-accent-ink);
}

.compare {
  margin-top: clamp(28px, 4vw, 48px);
}

.compare__head {
  display: none;
}

.compare__list {
  display: grid;
  gap: var(--rrs-space-2);
}

.compare__row {
  display: grid;
  gap: var(--rrs-space-2);
  min-width: 0;
  padding: var(--home-card-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.compare__cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compare__key {
  color: var(--home-ink-dim);
  font-size: var(--rrs-fs-label);
  letter-spacing: var(--rrs-ls-label);
  text-transform: uppercase;
}

.compare__val {
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.5;
}

.compare__cell--object .compare__val {
  color: var(--home-ink);
  font-family: var(--rrs-font-heading);
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.compare__link {
  border-bottom: 1px solid transparent;
  color: var(--home-accent);
  text-decoration: none;
  transition: border-color var(--rrs-dur) var(--rrs-ease);
}

.compare__link:hover,
.compare__link:focus-visible {
  border-bottom-color: var(--home-accent);
}

@media (min-width: 900px) {
  .compare__head,
  .compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: var(--rrs-space-4);
    align-items: start;
  }

  .compare__head {
    padding: 0 var(--home-card-pad) 10px;
  }

  .compare__head-cell {
    color: var(--home-ink-dim);
    font-size: var(--rrs-fs-label);
    letter-spacing: var(--rrs-ls-label);
    text-transform: uppercase;
  }

  .compare__list {
    gap: var(--rrs-space-1);
  }
}

/* --------------------------------------------------------------------------
   11. Схема работы — нумерация шагов счётчиком CSS
   -------------------------------------------------------------------------- */

.flow {
  counter-reset: flow;
  display: grid;
  gap: var(--home-gap);
  grid-template-columns: minmax(0, 1fr);
}

.flow__item {
  min-width: 0;
  padding: var(--home-card-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.flow__item::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  display: block;
  color: var(--home-accent);
  font-family: var(--rrs-font-heading);
  font-size: var(--rrs-fs-label);
  font-weight: 700;
  letter-spacing: var(--rrs-ls-label);
}

.flow__title {
  margin-top: var(--rrs-space-1);
  font-family: var(--rrs-font-heading);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.flow__text {
  margin-top: var(--rrs-space-1);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. Гарантия
   -------------------------------------------------------------------------- */

.warranty {
  display: grid;
  gap: var(--home-gap);
  grid-template-columns: minmax(0, 1fr);
}

.warranty-item {
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.warranty-item[hidden] {
  display: none;
}

.warranty-item__term {
  color: var(--home-accent);
  font-family: var(--rrs-font-heading);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.warranty-item__name {
  margin-top: var(--rrs-space-2);
  font-family: var(--rrs-font-heading);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.warranty-item__text {
  margin-top: var(--rrs-space-1);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.55;
}

@media (min-width: 720px) {
  .warranty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .warranty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   13. SEO-текст главной .prose — его читает только index.html;
       страницы направлений перешли на аккордеон (раздел 18)

   Селекторы идут по элементу, а не только по классу: на WordPress этот текст
   станет полем WYSIWYG, и редактор выдаст <h3> и <p> без классов. Первый <p>
   блока — вводный абзац, остальные — текст раздела.

   С 1100px раскладка редакционная: узкая дорожка под подзаголовки, основная —
   под абзац. Последовательность внутри .prose плоская (h3, p, h3, p …), пары
   собирает автоплейсмент грида, обёрток в разметке нет — иначе поле WYSIWYG
   пришлось бы заменить повторителем.
   -------------------------------------------------------------------------- */

.prose {
  max-width: 72ch;
}

/* Роль вводного абзаца несёт класс: в CMS позиция абзаца не гарантирована,
   а поле может начаться с заголовка. Селектор с > и классом сильнее
   правила .prose > p ниже, иначе обычный текст перебил бы вводный. */
.prose > .prose__lead {
  color: var(--home-ink);
  font-size: var(--rrs-fs-body-lg);
  line-height: 1.6;
}

/* Подстраховка: класса в поле не проставили — вводным считается первый абзац,
   и только пока .prose__lead в блоке нет. Отдельным правилом, потому что
   браузер без :has() должен пропустить подстраховку, а не правило выше. */
.prose:not(:has(.prose__lead)) > p:first-of-type {
  color: var(--home-ink);
  font-size: var(--rrs-fs-body-lg);
  line-height: 1.6;
}

.prose > h3,
.prose__title {
  margin-top: clamp(28px, 4vw, 40px);
  font-family: var(--rrs-font-heading);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.prose > p,
.prose__text {
  margin-top: var(--rrs-space-2);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.65;
}

/* Порог 1100px — тот же, на котором в этом файле раскладываются .parts,
   .variants__grid и .flow. Ниже него левая дорожка перестаёт вмещать
   подзаголовок, и пара возвращается к обычному порядку: заголовок над текстом. */
@media (min-width: 1100px) {
  .prose {
    display: grid;
    max-width: none;
    /* Колонка текста шире меры ровно на свой левый отступ: волосок идёт
       сплошной линией через обе дорожки, поэтому зазор даёт padding, а не gap. */
    grid-template-columns:
      minmax(260px, 360px)
      minmax(0, 1fr);
  }

  /* Отступ пары задаёт padding, а не margin: у .prose > h3 и .prose > p выше
     свой margin-top, и сброс обязан перечислить их поимённо — селектор
     .prose > * слабее и оставил бы заголовок на 24px ниже своего абзаца,
     то есть разорвал бы волосок между дорожками. */
  .prose > *,
  .prose > h3,
  .prose > p {
    margin-top: 0;
  }

  /* В узкой дорожке живёт только h3. Всё остальное — второй абзац под тем же
     заголовком, список, незнакомый тег из редактора — адресуется в колонку
     текста поимённо, а не занимает первую свободную ячейку. */
  .prose > *:not(h3) {
    grid-column: 2;
    padding-left: var(--rrs-space-6);
  }

  /* Вводный абзац идёт во всю ширину сетки, но мерой короче основного текста.
     Чтобы разница читалась решением, а не обрывом колонки, он берёт крупный
     кегль: при 24px мера 76ch — это 1208px против 1409px у текста, то есть
     отступ справа виден как поле интро, а не как недовёрстанная строка. */
  .prose > .prose__lead {
    grid-column: 1 / -1;
    max-width: 76ch;
    padding-left: 0;
    padding-bottom: var(--rrs-space-3);
    font-size: clamp(18px, 1.9vw, 24px);
    line-height: 1.45;
  }

  .prose:not(:has(.prose__lead)) > p:first-of-type {
    grid-column: 1 / -1;
    max-width: 76ch;
    padding-left: 0;
    padding-bottom: var(--rrs-space-3);
    font-size: clamp(18px, 1.9vw, 24px);
    line-height: 1.45;
  }

  /* Воздуха над волоском больше, чем под ним: линию рисует верхняя граница
     следующей пары, поэтому отступ над ней — это padding-bottom предыдущей. */
  .prose > * {
    padding-bottom: clamp(36px, 3.8vw, 52px);
  }

  .prose > h3,
  .prose > h3 + * {
    padding-top: clamp(28px, 3vw, 40px);
  }

  /* Волосок отделяет пары друг от друга; над первой парой его нет — её от
     вводного абзаца отделяет сам отступ. Линия идёт по заголовку и первому
     следующему элементу: на втором абзаце того же раздела её быть не должно,
     иначе она прошла бы по половине строки. */
  .prose > h3:not(:first-of-type),
  .prose > h3:not(:first-of-type) + * {
    border-top: 1px solid var(--home-line);
  }
}

/* --------------------------------------------------------------------------
   14. Перелинковка — карточка целиком является ссылкой
   -------------------------------------------------------------------------- */

.crosslink {
  color: inherit;
  text-decoration: none;
}

/* Прижим к низу карточки даёт .home-card__foot из home.css — он стоит на узле
   вторым классом. Здесь только вид строки-перехода. */
.crosslink__go {
  display: inline-flex;
  align-items: center;
  gap: var(--rrs-space-1);
  color: var(--home-accent);
  font-size: var(--rrs-fs-small);
}

.crosslink .btn__icon {
  transition: transform var(--rrs-dur) var(--rrs-ease);
}

@media (hover: hover) and (pointer: fine) {
  .crosslink:hover .btn__icon {
    transform: translateX(4px);
  }
}

/* --------------------------------------------------------------------------
   15. Текстовые и юридические страницы — чередование фона секций

   На политике и карте сайта разделы идут длинным списком и станут одним
   ACF-повторителем: модификатор --tint на части из них размножился бы одним
   своим вариантом по всем записям. Поэтому чётность считает селектор.
   .home-section--flush — шапка страницы, она вне чередования, и nth-of-type
   отсчитывает от неё: второй по счёту раздел получает подложку, третий нет.
   Страницы с ручными --tint (главная, направления) сюда не попадают:
   правило включает только .page-text.
   -------------------------------------------------------------------------- */

.page-text > .home-section:nth-of-type(even) {
  background-color: var(--home-bg-tint);
}

/* --------------------------------------------------------------------------
   16. Вкладки .tabs — прогрессивное улучшение объёмного блока

   Без скрипта все панели видны со своими заголовками, а полоса вкладок не
   показывается: признак data-tabs-ready ставит js/home.js на сам блок и
   только после того, как связал его целиком, — иначе над развёрнутым
   содержимым повис бы переключатель, который ничего не переключает. Атрибут
   hidden у панелей тоже ставит скрипт — в статической разметке его нет.
   Полоса прокручивается сама: обрезка стоит на .tabs__bar, не на предках,
   иначе длинный ряд вкладок увёл бы вбок всю страницу.
   -------------------------------------------------------------------------- */

.tabs__bar {
  display: none;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tabs__bar::-webkit-scrollbar {
  display: none;
}

[data-tabs-ready] .tabs__bar {
  display: block;
}

.tabs__list {
  display: flex;
  gap: var(--rrs-space-1);
  width: max-content;
  min-width: 100%;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--home-line);
}

.tabs__tab {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--home-radius) var(--home-radius) 0 0;
  background: none;
  color: var(--home-ink-muted);
  font-family: inherit;
  font-size: var(--rrs-fs-small);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--rrs-dur) var(--rrs-ease),
    border-color var(--rrs-dur) var(--rrs-ease),
    background-color var(--rrs-dur) var(--rrs-ease);
}

/* Выбранную вкладку держат три разных признака — фон, рамка и подчёркивание
   снизу, — чтобы она читалась и на монохромном экране, и при дальтонизме. */
.tabs__tab[aria-selected="true"] {
  border-color: var(--home-line);
  background-color: var(--home-surface);
  color: var(--home-ink);
}

.tabs__tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -2px;
  left: 12px;
  height: 2px;
  background-color: transparent;
  transition: background-color var(--rrs-dur) var(--rrs-ease);
}

.tabs__tab[aria-selected="true"]::after {
  background-color: var(--home-accent);
}

@media (hover: hover) and (pointer: fine) {
  .tabs__tab:hover {
    color: var(--home-ink);
  }
}

[data-tabs-ready] .tabs__panel[hidden] {
  display: none;
}

[data-tabs-ready] .tabs__panel {
  padding-top: var(--rrs-space-2);
}

/* Без скрипта панели идут подряд, и границу между ними держит та же
   волосяная линия, что и между подгруппами внутри панели. */
[data-tabs]:not([data-tabs-ready]) .tabs__panel + .tabs__panel {
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--home-line);
}

/* --------------------------------------------------------------------------
   17. Иконки в строках характеристик

   Колонка под иконку фиксированной ширины: подписи остаются выровненными
   по левому краю, и список не «прыгает» от строки к строке. Иконка
   декоративна — смысл несут подпись и значение.
   -------------------------------------------------------------------------- */

.spec-list__key {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-list__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--home-accent);
}

/* Тот же абсолютный вес контура, что у .home-card__icon в home.css:
   иконки разных размеров держат одну линию, как и рамки страницы. */
.spec-list__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   18. Текст об изделии — аккордеон .product-text, .detail-accordion

   Устройство то же, что у секции #faq (home.css, раздел 9), классы свои:
   текст об изделии — не вопрос и ответ, и чужое имя запутало бы читателя.
   Без скрипта это обычные <details>, раскрытые атрибутом open. Со скриптом
   (data-detail-accordion-ready) они держатся открытыми, а высота едет
   grid-template-rows 0fr → 1fr: через display плавности не бывает.
   visibility убирает свёрнутый текст из обхода клавиатурой.
   -------------------------------------------------------------------------- */

.product-text {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.product-text__lead {
  max-width: 72ch;
  color: var(--home-ink);
  font-size: var(--rrs-fs-body-lg);
  line-height: 1.6;
}

.detail-accordion {
  display: grid;
}

.detail-accordion__item {
  border-top: 1px solid var(--home-line);
  transition: border-color var(--rrs-dur) var(--rrs-ease);
}

.detail-accordion__item:last-child {
  border-bottom: 1px solid var(--home-line);
}

.detail-accordion__item[data-detail-accordion-open] {
  border-top-color: color-mix(in srgb, var(--home-accent) 60%, transparent);
}

.detail-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rrs-space-2);
  padding-block: clamp(18px, 2.2vw, 24px);
  color: var(--home-ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--rrs-dur) var(--rrs-ease);
}

.detail-accordion__q::-webkit-details-marker { display: none; }
.detail-accordion__q::marker { content: ""; }

.detail-accordion__q:focus-visible {
  outline: 2px solid var(--home-accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.detail-accordion__title {
  font-family: var(--rrs-font-heading);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.detail-accordion__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  color: var(--home-ink-dim);
  transition:
    border-color var(--rrs-dur) var(--rrs-ease),
    color var(--rrs-dur) var(--rrs-ease);
}

/* Доворачивается только знак, не рамка: иначе квадрат станет ромбом. */
.detail-accordion__mark svg,
.detail-accordion__mark::before,
.detail-accordion__mark::after {
  transition: transform 320ms var(--rrs-ease);
}

.detail-accordion__mark svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

/* Запасной плюс на случай, когда lucide не приехал; при появлении
   настоящей иконки :has(svg) ниже его убирает. */
.detail-accordion__mark::before,
.detail-accordion__mark::after {
  content: "";
  grid-area: 1 / 1;
  background-color: currentColor;
}

.detail-accordion__mark::before {
  width: 12px;
  height: 1.5px;
}

.detail-accordion__mark::after {
  width: 1.5px;
  height: 12px;
}

.detail-accordion__mark:has(svg)::before,
.detail-accordion__mark:has(svg)::after {
  content: none;
}

/* Без скрипта состояние держит сам <details>: знак отвечает и на него. */
.detail-accordion:not([data-detail-accordion-ready]) .detail-accordion__item[open] .detail-accordion__mark,
.detail-accordion__item[data-detail-accordion-open] .detail-accordion__mark {
  border-color: var(--home-accent);
  color: var(--home-accent);
}

.detail-accordion:not([data-detail-accordion-ready]) .detail-accordion__item[open] .detail-accordion__mark svg,
.detail-accordion:not([data-detail-accordion-ready]) .detail-accordion__item[open] .detail-accordion__mark::before,
.detail-accordion:not([data-detail-accordion-ready]) .detail-accordion__item[open] .detail-accordion__mark::after,
.detail-accordion__item[data-detail-accordion-open] .detail-accordion__mark svg,
.detail-accordion__item[data-detail-accordion-open] .detail-accordion__mark::before,
.detail-accordion__item[data-detail-accordion-open] .detail-accordion__mark::after {
  transform: rotate(45deg);
}

.detail-accordion__answer {
  display: grid;
  grid-template-rows: 1fr;
}

.detail-accordion__answer-inner {
  min-height: 0;
}

.detail-accordion__text {
  max-width: 72ch;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.65;
}

.detail-accordion[data-detail-accordion-ready] .detail-accordion__answer {
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--rrs-ease);
}

.detail-accordion[data-detail-accordion-ready] .detail-accordion__answer-inner {
  overflow: hidden;
  visibility: hidden;
  /* visibility ждёт конца анимации: иначе текст исчезает раньше створки */
  transition: visibility 0s linear 340ms;
}

.detail-accordion[data-detail-accordion-ready] .detail-accordion__item[data-detail-accordion-open] .detail-accordion__answer {
  grid-template-rows: 1fr;
}

.detail-accordion[data-detail-accordion-ready] .detail-accordion__item[data-detail-accordion-open] .detail-accordion__answer-inner {
  visibility: visible;
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .detail-accordion__q:hover .detail-accordion__mark {
    border-color: var(--home-line-strong);
    color: var(--home-ink);
  }
}


/* --------------------------------------------------------------------------
   19. Статьи — карточка .article-card, страница .article
   Карточка целиком ссылка, тем же приёмом, что .home-card--interactive
   и .crosslink: картинка сверху, текст и «Читать» снизу, весь узел — один
   <a>. .article-card__go не кнопка и не отдельная ссылка — вложенная
   интерактивность в HTML запрещена, а переход на карточке один.
   -------------------------------------------------------------------------- */

.article-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--home-line);
  border-radius: 20px;
  background-color: var(--home-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--rrs-dur) var(--rrs-ease),
              background-color var(--rrs-dur) var(--rrs-ease),
              transform var(--rrs-dur) var(--rrs-ease);
}

.article-card__img {
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface-hi);
  aspect-ratio: 16 / 9;
  transition: border-color var(--rrs-dur) var(--rrs-ease);
}

.article-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rrs-dur-slow) var(--rrs-ease);
}

.article-card__title {
  margin-top: var(--rrs-space-2);
  font-family: var(--rrs-font-heading);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.article-card__excerpt {
  margin-top: 8px;
  margin-bottom: var(--rrs-space-2);
  max-width: 48ch;
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.6;
}

/* margin-top: auto держит «Читать» у низа карточки — тот же приём,
   что .home-card__foot, но внутри ссылки, а не в отдельном блоке. */
/* Вид — как у .btn--ghost (обводка, пилюля, заливка на ховере), но физически
   остаётся span внутри единственной ссылки карточки, а не второй кнопкой:
   вложенная интерактивность в HTML запрещена. align-self держит ширину
   по контенту — без него flex-column растянул бы пилюлю на всю карточку. */
.article-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--rrs-space-1);
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 16px;
  border: 1px solid var(--home-accent);
  border-radius: var(--rrs-radius-pill);
  color: var(--home-accent);
  font-size: var(--rrs-fs-small);
  font-weight: 600;
  transition: background-color var(--rrs-dur) var(--rrs-ease),
              color var(--rrs-dur) var(--rrs-ease);
}

.article-card__go .btn__icon {
  transition: transform var(--rrs-dur) var(--rrs-ease);
}

@media (hover: hover) and (pointer: fine) {
  .article-card:hover {
    border-color: var(--home-line-strong);
    background-color: var(--home-surface-hi);
    transform: translateY(-2px);
  }

  .article-card:hover .article-card__img {
    border-color: var(--home-line-strong);
  }

  .article-card:hover .article-card__img img {
    transform: scale(1.04);
  }

  .article-card:hover .article-card__go {
    background-color: var(--home-accent);
    color: var(--rrs-accent-ink);
  }

  .article-card:hover .article-card__go .btn__icon {
    transform: translateX(2px);
  }
}

/* --- страница статьи ----------------------------------------------------- */

.article-intro__head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.article-intro {
  display: grid;
  gap: var(--rrs-space-4);
}

.article-intro__media {
  display: grid;
  gap: var(--rrs-space-2);
}

.article-intro__text {
  min-width: 0;
}

@media (min-width: 900px) {
  .article-intro {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: var(--rrs-space-6);
  }

  .article-intro__media {
    position: sticky;
    top: calc(var(--home-header-h, 60px) + var(--rrs-space-4));
  }
}

.article__hero {
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface-hi);
  aspect-ratio: 21 / 9;
}

@media (min-width: 900px) {
  .article__hero {
    aspect-ratio: 4 / 3;
  }
}

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

.article__body {
  max-width: 72ch;
}

.article__lead {
  color: var(--home-ink);
  font-size: var(--rrs-fs-body-lg);
  line-height: 1.6;
}

.article__body h2 {
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--rrs-font-heading);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.article__body p {
  margin-top: var(--rrs-space-2);
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-body);
  line-height: 1.65;
}

.article__body p:first-of-type {
  margin-top: 0;
}

/* Специфичность класса (2) берёт верх над .article__body p (класс+тег) без
   !important: ни одного ещё нет в этом файле, заводить не с этого правила. */
.article__body .article__cta-lead {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--rrs-space-3);
  border-top: 1px solid var(--home-line);
  color: var(--home-ink);
  font-weight: 600;
}

.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rrs-space-2);
  margin-top: var(--rrs-space-1);
}

/* Секция «Остались вопросы?» в конце статьи — единственное место, где
   заголовок, подводка и кнопки центрируются по горизонтали; .home-section__head
   — общий класс с асимметричной раскладкой заголовок/подводка везде
   на сайте, поэтому правка идёт через предка, а не в самом классе. */
section[aria-labelledby="article-cta-title"] .home-section__head {
  justify-items: center;
  text-align: center;
}

section[aria-labelledby="article-cta-title"] .home-section__lead {
  max-width: 54ch;
}

section[aria-labelledby="article-cta-title"] .home-section__body {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  section[aria-labelledby="article-cta-title"] .home-section__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* .home-section__foot — общий класс (home.css), в остальных местах сайта
   это текстовая сноска без своего выравнивания. Центровка — только для
   кнопки «Все статьи» на главной, селектор скопирован по id секции,
   а не правкой общего класса. */
#articles .home-section__foot {
  display: flex;
  justify-content: center;
}

/* Секция списка статей (stati.html) не имеет .home-section__head —
   отступ под него не нужен, иначе padding секции и margin-top складываются. */
section[aria-label="Список статей"] .home-section__body {
  margin-top: 0;
}

/* --- карта на странице контактов ------------------------------------------
   Единственное место сайта со встроенным картографическим виджетом — на
   остальных страницах карта остаётся ссылкой (.footer__map), по явному
   решению не грузить чужой скрипт лишний раз. Здесь карта — сама суть
   страницы, поэтому исключение оправдано.

   У виджета Яндекс.Карт нет параметра тёмной темы в публичном embed —
   инверсия цветов фильтром на самом iframe даёт графитовый фон и светлые
   подписи в тон сайту; фильтр стоит только на iframe, не на обёртке, —
   иначе вложенные filter складываются и результат перестаёт быть
   предсказуемым. ----------------------------------------------------- */

.contacts-layout {
  display: grid;
  gap: var(--rrs-space-4);
}

.contacts-layout__info {
  display: grid;
  gap: var(--rrs-space-3);
  align-content: start;
}

.contacts-layout__map {
  min-height: 360px;
}

@media (min-width: 900px) {
  .contacts-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: stretch;
  }

  .contacts-layout__map {
    min-height: 0;
  }
}

.contacts-map {
  overflow: hidden;
  height: 100%;
  min-height: 360px;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface-hi);
}

.contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  filter: invert(1) hue-rotate(318deg) brightness(.95) contrast(.92);
}

/* Компактная форма контактов использует тот же CF7 и те же поля, что
   секции заявки, но без боковых sales-карточек общего request partial. */
.contacts-request {
  max-width: 920px;
  margin-inline: auto;
}

.contacts-request .request__panel {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   20. «Нашли дешевле» .price-match — шесть страниц направлений, между
       (возможно скрытой) .promos и .request.
   -------------------------------------------------------------------------- */

.price-match {
  display: flex;
  flex-direction: column;
  gap: var(--rrs-space-3);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background-color: var(--home-surface);
}

.price-match__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background-color: var(--rrs-accent-soft);
  color: var(--home-accent);
}

.price-match__icon svg {
  width: 22px;
  height: 22px;
}

.price-match__body {
  min-width: 0;
}

.price-match__title {
  font-family: var(--rrs-font-heading);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.price-match__text {
  margin-top: 4px;
  max-width: 56ch;
  color: var(--home-ink-muted);
  font-size: var(--rrs-fs-small);
  line-height: 1.55;
}

.price-match__action {
  align-self: flex-start;
}

@media (min-width: 720px) {
  .price-match {
    flex-direction: row;
    align-items: center;
    gap: var(--rrs-space-4);
  }

  .price-match__body {
    flex: 1 1 auto;
  }

  .price-match__action {
    align-self: center;
  }
}