/*
 * Правки, которых не было в перенесённой вёрстке.
 *
 * Отдельным файлом, а не внутри shell.css: shell.css — общий с установкой на
 * Bitrix, и правки, нужные только этой витрине, там пришлось бы объяснять.
 * Подключается последним.
 */

/*
 * «Под заказ». Нулевой остаток у Sensey — обычное состояние, а не ошибка:
 * склад один и заполняется не всегда. Поэтому пометка спокойная, без красного,
 * и не спорит с ценой, стоящей выше.
 */
.product-detail__stock {
  margin: 12px 0 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted, #8a8378);
}

/*
 * В карточке та же пометка занимает правую подпись — слот, рассчитанный на
 * короткое слово вроде «Шампунь». «Под заказ» переносилось на две строки и
 * отжимало название до трёх, поэтому запрещаем перенос: ширина выходит та же,
 * что у слова, под которое слот и делался.
 */
.product-card__body p {
  white-space: nowrap;
}

/*
 * Логотип поверх открытого меню.
 *
 * В исходной вёрстке панель меню — это fixed-слой с z-index 1, и кнопке
 * бургера явно выдан z-index 2, а логотипу — нет. Он оказывался под панелью, и
 * при открытом меню угол оставался пустым. Похоже на недосмотр, а не на замысел:
 * иначе бургеру не понадобился бы свой слой. Та же строка отсутствует и на
 * стенде Bitrix — там намеренно ничего не трогаем.
 */
@media (max-width: 1000px) {
  .header__brand {
    position: relative;
    z-index: 2;
  }
}

/*
 * Главная: видео hero занимает весь экран, поэтому отступ под шапку не нужен.
 *
 * На Bitrix страница сама сообщала об этом свойством HERO, и оболочка вешала
 * класс page--hero. Здесь макет общий и адреса не знает, поэтому смотрим на
 * саму разметку — тем же приёмом, что уже используется для .page-hero.
 */
.page:has(.hero-media) {
  padding-top: 0;
}

/*
 * Кнопка, которая выглядит ссылкой.
 *
 * Нужна там, где действие меняет состояние на сервере — выход, переключение
 * «вход / регистрация». Ссылкой это делать нельзя: переход по адресу должен
 * быть безопасным, иначе предзагрузка браузера может разлогинить человека,
 * который просто навёл курсор.
 */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  opacity: 0.7;
}

/* Форма выхода стоит внутри строки текста и не должна её разрывать */
.inline-form {
  display: inline;
}

/* Подпись для скринридеров: видимой быть не должна, но читаться обязана */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Полоса «черновик» поверх страницы предпросмотра.
 *
 * Заметная намеренно: редактор смотрит черновик и боевую страницу в соседних
 * вкладках, и перепутать их — значит решить, что правки не сохранились.
 */
.preview-note {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 8px 16px;
  background: #3b3b3b;
  color: #f7f4ef;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/*
 * Философия просит PP Mori напрямую, мимо токена шрифта.
 *
 * У PP Mori нет кириллицы, поэтому русский текст на этой странице рисовался
 * Arial — и после подключения Onest она осталась бы единственной страницей с
 * другим шрифтом. Возвращаем её в общий строй.
 */
.philosophy-page {
  font-family: var(--font-sans);
}

/*
 * Спокойный фон карточки по умолчанию.
 *
 * У товаров со студийными снимками цвет свой — он берётся пипеткой из самого
 * файла и приходит в свойствах товара, потому что у каждой линейки фон разный:
 * J-silk кремовый, Peptide vital сиреневый, Shiori мятный.
 *
 * Здесь — то, что видно у товаров без фотографии. Прежний розовый рядом с
 * кремовыми и мятными карточками читался как случайность.
 */
.product-card--rose,
.product-card--catalog,
.product-card--explore {
  background: #f5efe1;
}

/*
 * Выбор города.
 *
 * Стоит рядом с логотипом — там его ищут по привычке, сложившейся на других
 * магазинах. Цвет берётся у шапки через currentColor: на главной шапка лежит
 * поверх видео и вся светлая, на остальных страницах тёмная.
 */
.city {
  position: relative;
  margin-left: 24px;
  margin-right: auto;
}

.city__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: inherit;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 2px;
}

.city__button svg {
  width: 13px;
  height: 16px;
  flex: none;
}

/* Вопрос «ваш город?» — маленькая карточка под кнопкой, не поверх всей страницы */
.city__ask {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 60;
  width: 260px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 18px 40px rgba(37, 37, 37, 0.16);
}

.city__ask::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 26px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}

.city__ask p {
  font-size: 15px;
}

.city__ask-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.city__yes {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 13px;
}

.city__other {
  font-size: 13px;
  color: var(--color-ink-soft);
  text-decoration: underline;
}

.city-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.city-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(37, 37, 37, 0.45);
  cursor: default;
}

.city-modal__card {
  position: relative;
  width: min(680px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 36px;
  border-radius: var(--radius-card);
  background: var(--color-cream);
  color: var(--color-ink);
}

.city-modal__card h2 {
  font-size: 26px;
  margin-bottom: 22px;
}

.city-modal__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 20px;
}

.city-modal__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  text-align: left;
  font-size: 15px;
  color: var(--color-ink);
}

.city-modal__item:hover {
  text-decoration: underline;
}

.city-modal__item span {
  font-size: 12px;
  color: var(--color-ink-soft);
}

.city-modal__item--current {
  font-weight: 600;
}

.city-modal__note,
.city-modal__empty {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-size: 14px;
  color: var(--color-ink-soft);
}

/*
 * Город живёт в шапке, поэтому переключается вместе с ней — на 1000, а не на
 * 820. Порог и причина объяснены в header.css.
 */
@media (max-width: 1000px) {
  /*
   * Собственного отступа у города на узком экране нет: рядом встала корзина, и
   * расстояния между всеми частями шапки задаёт один общий gap. Оставить здесь
   * 16 пикселей значит прибавить их к нему и снова отобрать место у логотипа.
   */
  .city {
    margin-left: 0;
  }

  /* В узкой шапке рядом с бургером остаётся только название */
  .city__button {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

/*
 * А это уже не про шапку, а про тесный экран: всплывающий вопрос и окно выбора
 * города. Остаются на общих 820 — на планшете места им хватает.
 */
@media (max-width: 820px) {
  .city__ask {
    width: min(260px, calc(100vw - 48px));
  }

  .city-modal__card {
    padding: 26px 22px;
  }
}

/*
 * Город забирает свободное место слева, поэтому меню и утилитарные ссылки
 * сходятся справа. Отступ не даёт им слипнуться в одну строку.
 */
.header__actions--bar {
  margin-left: 32px;
}

/*
 * На узком экране отступа быть не должно: меню там выпадающее, слипаться не с
 * чем, а 32 пикселя отбирают ширину у логотипа, которой и так не хватает.
 *
 * Обнуление стоит здесь, а не в header.css рядом с остальными узкими
 * правилами: силы у них равные, и решает порядок подключения — header.css идёт
 * раньше и проигрывает. Ровно на этом правило один раз уже не сработало.
 */
@media (max-width: 1000px) {
  .header__actions--bar {
    margin-left: 0;
  }
}

/*
 * Пока сервер пересчитывает корзину, суммы гаснут: количество уже новое, а
 * итог ещё старый, и показывать их одинаково яркими — значит врать на долю
 * секунды. Сами кнопки не блокируем: нажать «+» дважды подряд — нормально.
 */
.cart-items--pending .cart-item__sum,
.cart-items--pending .cart-summary {
  opacity: 0.45;
  transition: opacity 120ms ease;
}

/* Маркеры списка из базовых стилей здесь лишние: это выбор, а не перечисление */
.city-modal__list,
.city-modal__list li,
.cart-promo__applied,
.cart-promo__applied li {
  list-style: none;
}

.city__yes {
  white-space: nowrap;
}

.city-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--color-ink-soft);
}

.city-modal__close:hover {
  background: var(--color-paper);
  color: var(--color-ink);
}

/* В истории заявок — та же подача, что в корзине: видно, откуда взялся итог */
.personal-order__sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.personal-order__was {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-ink-soft);
}

.personal-order__discount {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* Пояснение над формой входа: почему человека сюда прислали */
.cart-note--lead {
  margin-bottom: 22px;
  font-size: 14px;
  color: var(--color-ink);
}

/*
 * Контейнер на широком мониторе.
 *
 * Ширина 1320 пришла из макета и на ноутбуке верна. Но она фиксированная, и чем
 * шире экран, тем больше сайт похож на остров: на 1920 по бокам остаётся по
 * 300 пикселей пустоты, на 2560 — по 620. Рядом с главной и каталогом, где
 * шапки идут во всю ширину, это читается как разнобой, а не как замысел.
 *
 * Отпускаем контейнер, но только на тех экранах, где пустота реально появляется.
 * До 1600 всё остаётся ровно таким, каким было выверено по макету.
 */
@media (min-width: 1600px) {
  :root {
    --container-max: 1480px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-max: 1680px;
  }
}

/*
 * Сетки на широком экране добирают колонку, а не растягивают карточки.
 *
 * Иначе освободившееся место уходит в размер: три карточки товара шириной по
 * 540 пикселей выглядят не богаче, а крупнее — снимок в них тонет.
 */
@media (min-width: 1600px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .article-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Текст за контейнером не тянется.
 *
 * Строка длиной во весь экран нечитаема независимо от того, сколько места
 * есть: глаз теряет начало следующей строки. Поэтому контейнер растёт, а
 * колонка текста остаётся прежней.
 */
.page-hero__text,
.article-layout__body {
  max-width: 700px;
}

/*
 * Скидка в каталоге и на карточке.
 *
 * Прежняя цена перечёркнута и приглушена, новая — обычным начертанием. Тем же
 * языком, что и в корзине: там перечёркнутая сумма позиции появилась раньше, и
 * заводить второй способ показать одно и то же незачем.
 *
 * `s` перечёркивает сам, задавать `text-decoration` не нужно.
 */
.price-was {
  margin-right: 8px;
  font-weight: 400;
  color: var(--color-ink-soft);
  opacity: 0.7;
}

/*
 * Процент — только на карточке товара, в сетке для него нет места: там цена
 * лежит в узкой шапке рядом с названием раздела.
 */
.price-badge {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 12px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/*
 * Линейки на главной: ниже блоки, ниже карточки, кнопка покупки.
 *
 * Правки владельца 02.09. Лежат здесь, а не в home.css: тот — выверенная
 * вёрстка, и переписывать её значениями «на глаз» неправильно. Здесь же видно,
 * что именно и зачем отклонено от макета.
 */

/*
 * Лента занимала ровно экран (100vh). Четыре подряд — это четыре экрана
 * прокрутки до того, что под ними. Убавляем до 84: картинка слева остаётся
 * крупной, но лента перестаёт быть отдельной страницей.
 *
 * Высоту держат **оба** правила, и это не перестраховка. Одной ленты мало:
 * колонка с товарами объявляет свои 100vh отдельно и вытягивает ленту обратно
 * независимо от того, что написано у родителя. Проверено — правка только
 * `.explore-row` не меняла ничего, и по виду страницы понять это было нельзя.
 */
/* С 07.10.2026 — по содержимому (решение владельца): ни 100vh, ни 84vh. */
.explore-row,
.explore-row__content {
  min-height: 0;
}

/*
 * Карточка была 42vw — на ноутбуке это 635 пикселей. Убавляем до 36vw и
 * освобождаем место под кнопку.
 */
.explore-row__products .product-card {
  height: clamp(380px, 36vw, 620px);
  gap: 12px;
}

/*
 * Названия из 1С длинные: «ШАМПУНЬ ДЛЯ ЗАЩИТЫ ЦВЕТА ОКРАШЕННЫХ ВОЛОС(COLOR WAY)
 * PERFUME SHAMPOO PROTECTION AND GLOSS». Целиком они занимали 108 пикселей из
 * 635 и упирались в край карточки — текст обрывался на полуслове, и выглядело
 * это как поломка, а не как сокращение.
 *
 * Три строки с многоточием: сокращение становится намеренным и видно, что
 * название длиннее. Полное имя остаётся в карточке товара.
 */
.explore-row__products .product-card--explore .product-card__body h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Кнопка прижата к низу карточки и не растягивается вместе с ней */
.explore-row__products .product-card__add {
  flex: 0 0 auto;
  min-height: 44px;
}

/*
 * Картинка внутри карточки забирает то, что осталось, а не держит свою высоту.
 *
 * В широкой раскладке у неё стояло `height: clamp(220px, 26vw, 520px)` —
 * фиксированная величина, не знающая, сколько места в карточке на самом деле.
 * Пока карточка была высокой, это сходилось; стоило укоротить её и добавить
 * кнопку — название полезло на кнопку, накрыв её собой.
 *
 * Приём не выдуман: ровно так же устроена мобильная ветка этой же вёрстки. Там
 * картинка гибкая, а название и кнопка занимают своё. Переносим то же правило на
 * широкий экран, и карточка перестаёт зависеть от того, угадали ли мы высоту.
 */
.explore-row__products .product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
}

.explore-row__products .product-card__media {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 0 auto;
}

.explore-row__products .product-card__body {
  flex: 0 0 auto;
}


/*
 * Окно «узнать цену».
 *
 * Устроено как окно выбора города и намеренно похоже на него: на витрине уже
 * есть один способ показать окно поверх страницы, и второй завёл бы разнобой.
 */
.price-request {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.price-request__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(37, 37, 37, 0.45);
  cursor: default;
}

.price-request__card {
  position: relative;
  width: min(460px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--color-cream);
  color: var(--color-ink);
}

.price-request__card h2 {
  margin-bottom: 6px;
  font-size: 24px;
}

/* Название товара — подпись под заголовком: человек должен видеть, о чём спрашивает */
.price-request__product {
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.price-request__close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 26px;
  line-height: 1;
  color: var(--color-ink-soft);
}

.price-request__error {
  margin-bottom: 14px;
  font-size: 14px;
  color: #a4352c;
}

.price-request__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-request__submit:disabled {
  opacity: 0.6;
}

.price-request__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

/*
 * Форма входа, стоящая сама по себе, не растягивается во всю ширину.
 *
 * В корзине и в кабинете `.cart-form` лежит в правой колонке `.cart-layout` и
 * получает от неё 530 пикселей — ту ширину, под которую и рисовалась. А на
 * странице входа она стоит одна, прямым ребёнком `.section.shell`, и растянулась
 * на все 1320: поля в строку длиной с экран, кнопка «Войти» во всю ширину.
 *
 * Ограничиваем ровно тот случай, когда форма одна: 530 — та же ширина, что в
 * корзине, чтобы вход и оформление выглядели одной и той же формой, а не двумя
 * разными.
 */
.section.shell > .cart-form {
  max-width: 530px;
}

/* Выход из кабинета — отдельной строкой под приветствием, а не в тексте */
.page-hero__action {
  margin-top: 14px;
}

/*
 * Заголовок первого экрана центрируется при любой длине текста.
 *
 * Было видно только на длинном заголовке, и выглядело как «съехала вёрстка»:
 * абзац под заголовком и кнопка стояли по центру экрана, а сами строки
 * заголовка — правее их на три-четыре десятка пикселей.
 *
 * Причина не в самом заголовке, а в том, по чему считается его середина.
 * `.hero-copy__title` — грид без объявленных колонок, то есть одна колонка
 * размером `auto`. У такой колонки минимум равен самому широкому содержимому,
 * а строки заголовка набраны без переносов: как только строка оказывается
 * шире `.hero-copy` (760px), колонка вырастает под неё — и растёт **только
 * вправо**, потому что начало у неё прибито к левому краю. Строки честно
 * центрируются, но уже по этой съехавшей колонке.
 *
 * Замер на 1440: строки шириной 811 и 832 при коробке 760, центры 745,7 и
 * 751,7 против 712,6 у абзаца и кнопки — разъезд на 33 и 39 пикселей.
 *
 * `minmax(0, 1fr)` объявляет колонку явно, и минимум по содержимому больше не
 * действует: ширина колонки равна коробке, а длинная строка выходит за неё
 * поровну в обе стороны, оставаясь по центру. После правки центры строк —
 * 709,6 и 715,6, то есть те же 712,6 плюс-минус тройка, заданная вёрсткой
 * нарочно (`translateX(±3px)`).
 *
 * Там, где заголовок и так помещается, правило не меняет ничего: на 1024
 * замеры до и после совпадают до десятой пикселя.
 */
.hero-copy__title {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Протокол линейки — салонная процедура по шагам.
 *
 * В буклете это таблица «Шаг · Продукт · Действие · Время». Таблицей не
 * делаем: читать протокол будут с телефона, он лежит рядом с мойкой, а четыре
 * колонки на 375 пикселях превращаются либо в кашу, либо в горизонтальную
 * прокрутку.
 *
 * Поэтому шаг — это строка списка: номер слева, продукт и время сверху,
 * действие абзацем. На узком экране номер уходит над текстом, и ничего не
 * ломается.
 */
.protocol {
  max-width: 860px;
}

.protocol__head {
  margin-bottom: 40px;
}

.protocol__title {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.protocol__subtitle {
  margin: 10px 0 0;
  font-size: 18px;
  color: var(--color-ink-soft);
}

/* Надзаголовок разделов внутри протокола — тот же приём, что у шапок страниц */
.protocol__label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.64;
}

.protocol__purpose,
.protocol__steps,
.protocol__result,
.protocol__care {
  margin-bottom: 40px;
}

.protocol__purpose p,
.protocol__result p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.protocol__steps ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(59, 59, 59, 0.14);
}

.protocol__step:last-child {
  border-bottom: 1px solid rgba(59, 59, 59, 0.14);
}

.protocol__step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(59, 59, 59, 0.3);
  border-radius: 50%;
  font-size: 13px;
}

.protocol__step-product {
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.3;
}

/* Время отделяем от названия, а не прячем в скобки: мастер ищет глазами именно его */
.protocol__step-time {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(59, 59, 59, 0.08);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.protocol__step-action {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.protocol__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.protocol__tags li {
  padding: 6px 14px;
  border: 1px solid rgba(59, 59, 59, 0.3);
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.protocol__care ul {
  margin: 0;
  padding-left: 18px;
}

.protocol__care li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .protocol__step {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Время с новой строки: рядом с длинным названием оно уезжало за край */
  .protocol__step-time {
    display: inline-block;
    margin: 6px 0 0;
  }
}

/*
  Подсказка «ваш город?» на телефоне вылезала за правый край на 70 пикселей.

  Причина в том, что карточка шириной 260 привязана к левому краю кнопки
  города, а кнопка на узком экране стоит примерно посередине шапки: 185 + 260
  даёт 445 при окне 375. На широком экране места хватало, поэтому и не
  замечали.

  Ставим её по центру кнопки, а не от её левого края, и не даём быть шире
  экрана. Хвостик стрелки переезжает туда же — иначе он показывал бы мимо.
*/
@media (max-width: 640px) {
  .city__ask {
    left: 50%;
    width: min(260px, calc(100vw - 32px));
    transform: translateX(-50%);
  }

  .city__ask::before {
    left: 50%;
    margin-left: -6px;
  }
}

/*
 * Подмена Swiper.
 *
 * На sensey горизонтальные ленты крутил Swiper: он сам раскладывал слайды в
 * ряд (`.swiper-wrapper`) и сам их двигал, поэтому у контейнера стоит
 * `overflow: hidden`. Библиотеку мы не тянем — прокрутку делает браузер.
 *
 * Без этих правил лента молча ломается: слайды встают в столбик, а всё, что
 * не влезло, обрезается `overflow: hidden` и недостижимо — ни колесом, ни
 * пальцем. Видно при этом ровно одну карточку, и выглядит это как «пусто».
 */
.explore-row__products,
.product-rail__slider {
  display: flex;
  gap: clamp(12px, 1.4vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* Полосу прокрутки прячем: лента листается стрелками и жестом. */
  scrollbar-width: none;
}

.explore-row__products::-webkit-scrollbar,
.product-rail__slider::-webkit-scrollbar {
  display: none;
}

.explore-row__slide,
.product-rail__slide {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 300px);
  scroll-snap-align: start;
}

/*
 * Служебные страницы (кабинет, корзина, оформление, поиск, восстановление
 * пароля): шапка страницы из журнала давала 72px снизу, а следующая секция —
 * ещё 72px сверху, и форма оказывалась на полэкрана ниже заголовка. Здесь
 * заголовок — подпись к форме, а не обложка: отступы и кегль поменьше.
 */
.page-hero--compact {
  padding-bottom: 32px;
}

.page-hero--compact h1 {
  font-size: clamp(36px, 4.5vw, 64px);
}

.page-hero--compact + .section {
  padding-top: 0;
}

@media (max-width: 820px) {
  .page-hero--compact {
    padding-bottom: 24px;
  }
}

/* Ссылки в подсказках — подчёркнуты, как кнопка «Зарегистрироваться» рядом:
   серое «Забыли пароль?» без подчёркивания не читалось как ссылка. */
.cart-note a {
  text-decoration: underline;
}

.cart-note a:hover {
  opacity: 0.7;
}

/* Подпись поля и ссылка справа от неё — «Забыли пароль?» у поля пароля. */
.cart-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cart-field__aside {
  font-size: 13px;
  color: var(--color-ink-soft);
  text-decoration: underline;
}

.cart-field__aside:hover {
  opacity: 0.7;
}

/* «Нет учётной записи? / Уже есть?» — внутри формы, под кнопкой, по центру. */
.cart-form__switch {
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--color-ink-soft);
}

/*
 * Галочки в формах. Без своего класса на них действовали правила полей
 * (.cart-field input — ширина 100%, .cart-field span — капс): квадрат уезжал
 * на середину строки, текст — вправо.
 */
.cart-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}

.cart-field .cart-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--color-dark);
  cursor: pointer;
}

.cart-field .cart-check span {
  display: inline;
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.cart-check--small {
  margin-top: 10px;
  font-size: 13px;
}

/* Подсказки и ошибки под полем. */
.cart-field__hint,
.cart-field__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.cart-field__hint {
  color: var(--color-ink-soft);
}

.cart-field__error {
  color: #b3261e;
}

.cart-field--error input:not([type="checkbox"]),
.cart-field--error select {
  border-color: #b3261e;
}

.cart-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * Кнопка карточки: цена, при наведении — «В корзину» (решение 29.09.2026).
 * Обе подписи лежат в одной ячейке сетки и меняются прозрачностью — ширина
 * кнопки не прыгает. Без наведения (телефон) остаётся цена.
 */
.product-card__add {
  display: grid;
  place-items: center;
}

.product-card__add > span {
  grid-area: 1 / 1;
  transition: opacity var(--transition-base);
}

.product-card__add-price {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.product-card__add-label {
  opacity: 0;
}

@media (hover: hover) {
  .product-card__add:hover .product-card__add-price,
  .product-card__add:focus-visible .product-card__add-price {
    opacity: 0;
  }

  .product-card__add:hover .product-card__add-label,
  .product-card__add:focus-visible .product-card__add-label {
    opacity: 1;
  }
}

/*
 * Вёрстка рассчитана на второй снимок при наведении: основной гаснет, второй
 * проявляется. Второго снимка у товаров из 1С нет — и при наведении карточка
 * оставалась пустой. Гасим основной, только если второй есть.
 */
.product-card:hover .product-card__media-image:only-child {
  opacity: 1;
  transform: none;
}

.product-card--catalog:hover .product-card__media-image:only-child {
  transform: scale(1.06);
}

/*
 * Название в карточке держало 68–76% ширины под пометку «Под заказ» справа —
 * и тогда, когда пометки нет. В узкой карточке телефона (две в ряд) слова
 * рвались посередине: «КОНДИЦИОНЕ / С / ПЕПТИДНЫ…». Без пометки — вся ширина.
 */
.product-card--catalog .product-card__body h3:only-child {
  max-width: none;
}

@media (max-width: 820px) {
  .product-card--catalog .product-card__body h3 {
    font-size: 14px;
    overflow-wrap: normal;
    hyphens: auto;
  }
}

/* Ссылки на документы в формах (06.10.2026). */
.cart-check a,
.cart-legal a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.cart-legal { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--color-ink); opacity: .72; }

/* Контакты (06.10.2026). */
.contacts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.contacts-list__label { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(59, 59, 59, .56); }
.contacts-list__value { font-size: 22px; color: var(--color-ink); text-decoration: none; word-break: break-word; }
.contacts-list__value:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacts-list__note { margin: 6px 0 0; font-size: 13px; opacity: .6; }
.contacts-legal { margin: 56px 0 0; font-size: 13px; line-height: 1.5; opacity: .6; }

/* Сотрудничество (06.10.2026): текст и линейки рядом, заявка — ниже во всю ширину. */
.coop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.coop__intro a { color: inherit; }
.coop__cta { display: inline-block; margin-top: 8px; padding: 14px 24px; border: 1px solid var(--color-dark); border-radius: 999px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; }
.coop__cta:hover { background: var(--color-dark); color: #fff !important; }
.coop__lines { display: grid; gap: 0; }
.coop-line { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 20px; padding: 14px 0;
  border-bottom: 1px solid rgba(59, 59, 59, .12); color: var(--color-ink); text-decoration: none; }
.coop-line__image { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #f3f3f3; }
.coop-line__image img { width: 100%; height: 100%; object-fit: cover; }
.coop-line__name { font-size: 20px; font-style: italic; }
.coop-line__arrow { font-size: 18px; opacity: .5; }
.coop-line:hover .coop-line__arrow { opacity: 1; }
.coop__form { grid-column: 1 / -1; max-width: 760px; scroll-margin-top: 120px; }
.coop__form h2 { margin: 0 0 20px; }
.coop__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.coop__sent { font-size: 18px; }
/* Вопрос с вариантами (Честный знак): fieldset без рамки, подпись — как у полей. */
.coop__choice { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.coop__choice legend { padding: 0; margin-bottom: 10px; }
.coop__choice-options { display: flex; flex-wrap: wrap; gap: 12px 32px; }

@media (max-width: 900px) {
  .coop { grid-template-columns: 1fr; }
  .coop__row { grid-template-columns: 1fr; }
}
.coop__intro h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.2; }
.coop__intro p { margin: 0 0 14px; max-width: 62ch; font-size: 16px; line-height: 1.5; }
.coop__intro a:not(.coop__cta) { text-decoration: underline; text-underline-offset: 2px; }

/* Кабинет (07.10.2026): заказы слева, профиль справа; на телефоне — подряд. */
.cabinet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; margin-top: 32px; }
.cabinet h2 { margin: 0 0 16px; }
.cabinet-orders { margin: 0 0 24px; padding: 0; list-style: none; }
.cabinet-orders li { border-bottom: 1px solid rgba(59, 59, 59, .12); }
.cabinet-orders__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: var(--color-ink); text-decoration: none; }
.cabinet-orders__row:hover { text-decoration: underline; text-underline-offset: 3px; }
.cabinet__logout { max-width: 240px; }
.profile { display: grid; gap: 32px; }
.profile .cart-form h2 { margin: 0 0 8px; font-size: 22px; }

/* Карточка заказа. */
.order-card__facts { display: grid; gap: 14px; margin: 0; }
.order-card__facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.order-card__facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(59, 59, 59, .56); padding-top: 3px; }
.order-card__facts dd { margin: 0; }

/* «Цена по запросу» на карточке товара. */
.price-request { margin-top: 16px; max-width: 480px; }
.price-request__cancel { display: block; margin: 12px auto 0; }

@media (max-width: 900px) {
  .cabinet { grid-template-columns: 1fr; }
  .order-card__facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* Правки владельца 07.10.2026 (sensey part2) ------------------------------- */

/* «Качество»: стрелка уходила ПОД снимок и выглядела оборванной — кладём поверх. */
.home-quality__arrow { z-index: 2; }

/* Шапка: корзина — иконкой сумки с числом в кружке, а не голым «0» в круге. */
.header__cart { position: relative; border: 0; border-radius: 0; width: 42px; height: 42px; }
.header__cart svg { width: 24px; height: 24px; }
.header__cart-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--color-dark, #232323); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.header--overlay .header__cart-count { background: #fff; color: var(--color-dark, #232323); }

/* Заголовки страниц: надпись над заголовком отстоит на 5 px больше (регистрация и др.). */
.page-hero__eyebrow + h1 { margin-top: 5px; }


/*
 * Баннер линейки — ЦЕЛИКОМ (решение владельца 07.10.2026): высоту блока задают
 * пропорции снимка, а не экран. Раньше снимок растягивался на 168 px выше блока
 * под «параллакс» и обрезался по cover — у портретных баннеров 3:4 пропадали
 * верх и низ. Параллакс снят (класс parallax-float убран из разметки).
 */
.explore-row__image-media {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  will-change: auto;
}
.explore-row { align-items: stretch; }
.order-card__pay { margin-top: 24px; max-width: 320px; }

/* Сертификаты: карточки с превью и просмотр страниц (08.10.2026) */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.certs__item { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.certs__open { display: block; padding: 0; border: 1px solid rgba(59, 59, 59, .14); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; transition: box-shadow .2s, transform .2s; }
.certs__open:hover { box-shadow: 0 14px 34px rgba(37, 37, 37, .1); transform: translateY(-2px); }
.certs__thumb { display: block; width: 100%; height: auto; aspect-ratio: 480 / 679; object-fit: cover; }
.certs__copy { display: grid; align-content: start; gap: 6px; color: var(--color-ink); }
.certs__copy span { font-size: 13px; line-height: 1.35; opacity: .7; }
.certs__actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.certs__link { padding: 0; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.certs-popup { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(20, 20, 20, .88); }
.certs-popup__bar { display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: #fff; color: var(--color-ink); }
.certs-popup__bar strong { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.certs-popup__download { flex: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.certs-popup__close { flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: inherit; font-size: 32px; line-height: 1; cursor: pointer; }
.certs-popup__pages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; justify-items: center; align-content: start; gap: 20px; padding: 24px 16px 48px; }
.certs-popup__page { display: block; width: min(100%, 900px); height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
@media (max-width: 600px) {
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .certs__copy strong { font-size: 14px; }
  .certs-popup__bar { gap: 12px; padding: 10px 12px 10px 16px; }
  .certs-popup__pages { padding: 12px 8px 32px; gap: 12px; }
}
/* Документы из панели (протоколы): заглушка превью и подписи просмотра (08.10.2026) */
.certs__thumb--file { display: grid; place-items: center; font-size: 13px; letter-spacing: .1em; color: var(--color-ink); background: #f7f4ef; }
.certs-popup__note { margin: 40px 0 0; color: #fff; text-align: center; }
.certs-popup__note a { color: inherit; text-decoration: underline; }

/* Текст из панели с оформлением (редактор с HTML, 12.10.2026): <RichText>.
   Без оформления это прежний <p> с классом места; с абзацами/списками —
   <div> с тем же классом, внутренним блокам — свои отступы. */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text > p,
.rich-text > ul,
.rich-text > ol,
.rich-text > blockquote { margin: 0 0 .8em; }
.rich-text ul,
.rich-text ol { padding-left: 1.3em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li + li { margin-top: .25em; }
.rich-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rich-text strong,
.rich-text b { font-weight: 600; }
.rich-text h2,
.rich-text h3,
.rich-text h4 { margin: 1em 0 .5em; font-size: 1.15em; line-height: 1.25; }
.rich-text blockquote { padding-left: 1em; border-left: 2px solid currentColor; opacity: .85; }
.certs__rich { font-size: 13px; line-height: 1.35; opacity: .7; }

/* Соцсети значками (12.10.2026): страница «Контакты» и плашка у правого края.
   Чёрно-белые: значок берёт цвет текста. */
.contacts-social { display: flex; gap: 16px; }
.contacts-social__link { display: inline-flex; color: #1f1f1f; transition: opacity .2s; }
.contacts-social__link:hover { opacity: .6; }

/* Столбик «язычков», прижатых к правому краю, внизу (по образцу владельца).
   Под шапкой (40) и окнами (100+): мобильное меню и всплывающие окна её закрывают. */
.social-dock { position: fixed; right: 0; bottom: 96px; z-index: 30; display: grid; gap: 8px; }
.social-dock__link {
  display: grid; place-items: center; width: 56px; height: 48px; padding-right: 4px;
  border-radius: 24px 0 0 24px; background: #1f1f1f; color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: width .2s, background .2s;
}
.social-dock__link:hover,
.social-dock__link:focus-visible { width: 64px; background: #000; }
@media (max-width: 820px) {
  .social-dock { bottom: 72px; gap: 6px; }
  .social-dock__link { width: 46px; height: 40px; border-radius: 20px 0 0 20px; }
  .social-dock__link svg { width: 20px; height: 20px; }
  .social-dock__link:hover,
  .social-dock__link:focus-visible { width: 46px; }
}
@media print { .social-dock { display: none; } }

/* Протоколы: значок документа вместо превью (12.10.2026) */
.certs--icons { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.certs__icon { display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: 4 / 3; color: var(--color-ink); background: #f7f4ef; }
.certs__icon-ext { font-size: 12px; letter-spacing: .14em; }
.certs--icons .certs__open { cursor: pointer; }
@media (max-width: 600px) { .certs--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Карточка товара: свойства из 1С (13.10.2026) */
.product-specs { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 24px; margin: 0; font-size: 15px; line-height: 1.4; }
.product-specs dt { color: rgba(59, 59, 59, .56); }
.product-specs dd { margin: 0; color: var(--color-ink); }
.product-detail__text { white-space: pre-line; }
@media (max-width: 600px) { .product-specs { grid-template-columns: 1fr; gap: 2px; } .product-specs dd + dt { margin-top: 10px; } }

/* Карточки товара без анимации при наведении (решение владельца 13.10.2026):
   не приподнимаются, тень не растёт, снимок не меняется и не масштабируется.
   Подсказка «В корзину» на кнопке цены остаётся — это не анимация карточки. */
.product-card,
.product-card--catalog,
.product-card__media-image { transition: none; }
.product-card:hover { transform: none; box-shadow: none; }
.product-card--catalog:hover { transform: none; box-shadow: 0 8px 24px rgba(37, 37, 37, 0.04); }
.product-card:hover .product-card__media-image { opacity: 1; transform: none; }
.product-card--catalog:hover .product-card__media-image { transform: scale(1.06); }

/* Умный поиск (22.10.2026): пометка об исправленном запросе и чипы линеек. */
.search-note {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--color-ink-soft);
}

.search-note strong {
  font-weight: 600;
  color: var(--color-ink);
}

.search-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.search-lines__label {
  margin-right: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.search-lines__chip {
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.search-lines__chip:hover {
  border-color: var(--color-ink);
  background: var(--color-paper);
}

/* Выдача поиска — сетка с переносом: всё найденное видно сразу, листается вниз. */
.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}

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

/* Чат с ботом sensey (26.10.2026, components/ChatWidget.vue). Кнопка — в правом
   нижнем углу под плашкой соцсетей; окно — над ней, на телефоне — во весь экран.
   Слой — как у плашки (30): окна сайта (120+) и меню телефона его закрывают. */
.chat__launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 31;
  display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%;
  background: var(--color-dark); color: #fff; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transition: transform .2s, background .2s;
}
.chat__launcher:hover, .chat__launcher:focus-visible { background: #000; transform: scale(1.05); }
.chat__launcher-x { font-size: 32px; line-height: 1; }
.chat__dot { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: #e0565b; border: 2px solid #fff; }
.chat__panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 31;
  display: flex; flex-direction: column; width: 380px; height: min(600px, calc(100vh - 120px));
  border-radius: var(--radius-card); background: var(--color-white); color: var(--color-ink);
  box-shadow: 0 24px 60px rgba(37, 37, 37, .22); overflow: hidden; font-size: 15px;
}
.chat__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; background: var(--color-dark); color: #fff; }
.chat__title { margin: 0; font-size: 17px; font-weight: 600; }
.chat__sub { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.chat__close { border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat__links { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 18px 12px; background: var(--color-dark); }
.chat__max { color: var(--color-rose); font-size: 13px; text-decoration: underline; }
.chat__restart { border: 0; padding: 0; background: none; color: rgba(255, 255, 255, .75); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.chat__restart:hover { color: #fff; }
.chat__list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--color-cream); }
.chat__msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; line-height: 1.4; }
.chat__msg--bot, .chat__msg--manager { align-self: flex-start; background: var(--color-white); border-bottom-left-radius: 4px; }
.chat__msg--manager { border: 1px solid var(--color-gold); }
.chat__msg--client { align-self: flex-end; background: var(--color-dark); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--client a { color: #fff; }
.chat__who { display: block; margin-bottom: 2px; font-size: 12px; color: var(--color-ink-soft); }
.chat__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.chat__text a { color: inherit; text-decoration: underline; }
.chat__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__btn {
  padding: 8px 14px; border: 1px solid var(--color-dark); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-dark); font: inherit; font-size: 14px; cursor: pointer;
}
.chat__btn:hover:not(:disabled), .chat__btn:focus-visible { background: var(--color-dark); color: #fff; }
.chat__btn:disabled { opacity: .5; cursor: default; }
.chat__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat__stars-label { width: 100%; font-size: 13px; color: var(--color-ink-soft); }
.chat__star { min-width: 48px; padding: 6px 10px; border: 1px solid var(--color-gold); border-radius: var(--radius-pill); background: var(--color-white); font: inherit; font-size: 14px; cursor: pointer; }
.chat__star:hover:not(:disabled), .chat__star:focus-visible { background: var(--color-sand); }
.chat__star:disabled { opacity: .5; cursor: default; }
.chat__typing { margin: 0; font-size: 13px; color: var(--color-ink-soft); }
.chat__error { margin: 0; padding: 8px 16px; font-size: 13px; color: #b3261e; background: #fdecea; }
.chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--color-line); }
.chat__input {
  flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; resize: none;
  border: 1px solid var(--color-line); border-radius: 20px; font: inherit; font-size: 15px; color: var(--color-ink);
}
.chat__input:focus { outline: 2px solid var(--color-gold); outline-offset: 0; }
.chat__send { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-dark); color: #fff; font-size: 16px; cursor: pointer; }
.chat__send:disabled { opacity: .4; cursor: default; }
.chat__consent { margin: 0; padding: 4px 16px 12px; font-size: 11px; line-height: 1.35; color: var(--color-ink-soft); }
.chat__consent a { color: inherit; text-decoration: underline; }
@media (max-width: 820px) {
  .chat__launcher { right: 12px; bottom: 12px; width: 52px; height: 52px; }
  .chat__panel { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 130; }
  .chat__input { font-size: 16px; } /* меньше 16 — iOS приближает страницу при вводе */
}
@media print { .chat { display: none; } }